@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&family=Varela+Round&display=swap');

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:'poppins', sans-serif;

}
body{
	

background-image:url('images/Back6.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;

	
}

nav{
	font-family:"Poppins",sans-serif;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1em;
	width:100%;
	padding:5px 10%;
	
}
nav a{
	text-decoration:none;
	
	font-size:22px;
	font-weight:bold;
	color:#000032;
	opacity:0;
	animation:slideRight 1s ease forwards;
	animation-delay:.7s;
}
#logo{
    position:relative;
	height:120px;
	width:120px;
	margin-right:5px;
	
}
input[type="checkbox"]{
	appearance:none;
	-webkit-appearance:none;
}
label{
	display:none;
	cursor:pointer;
}
ul{
	list-style:none;
	display:flex;
	gap:1em;
}
ul a{
	padding:0.3em;
}
ul a:hover{
	background-color:#0850a3;
	border-radius:30px;
	color:white;
	text-decoration:none;

}
.active{
	
	background-color:#0850a3;
	border-radius:30px;
	color:white;
	text-decoration:none;

}
@media screen and (max-width:600px){
	#logo{

	height:70px;
	width:70px;
	margin-right:5px;
	
            }
	label{
		display:block;
	}
	ul{
		font-size:1.2em;
		position:absolute;
		left:-100%;
		flex-direction:column;
	text-align:center;
		justify-content:center;
        background-image:url('images/Back6.jpg');
		gap:2em;
		top:80px;          /*same as the height of navbar*/
        width:100%;	
         height: 50%;
         transition:0.5s;
	
z-index:1;		 
	}
	ul a{

	color:#000032;

}
	input[type="checkbox"]:checked ~ ul{
		left:0;
	}
	ul a:hover{
	background-color:#0850a3;
	border-radius:30px;
	color:white;
	text-decoration:none;

}
}




.home{
	height:80vh;
	width:100%;
	justify-content:space-between;
	display:flex;
	align-items:center;
	padding:10px 10% 10px;
	opacity:0;
	animation:slideBottom 1s ease forwards;
	animation-delay:.7s;
}
.home-content{
	max-width:700px;
	
	padding-bottom:20px;
}
.digital{
	width:500px;
	height:600px;
padding-bottom:100px;
	animation:slideBottom 1s ease forwards;
	animation-delay:.7s;
	padding-top:20px;
	
}
.home-content h3{
	font-size:40px;
	font-weight:800;
	opacity:0;
	animation:slideBottom 1s ease forwards;
	animation-delay:.7s;
	color:#000032;
}
.home-content h3:nth-of-type(2){
	margin-bottom:20px;
	
}
.home-content h3 span{
	color:#0850a3;
}
.home-content h1{
	font-size:50px;
	font-weight:700;
	margin:-3px 0;
	color:#000032;
	opacity:0;
	animation:slideBottom 1s ease forwards;
	animation-delay:.7s;
}
.home-content p{
	font-size:20px;
	
}
.home-sci a{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:40px;
	height:40px;
	background:#0850a3;
	border:2px solid #0850a3;
	border-radius:50%;
	font-size:20px;
	color:white;
	text-decoration:none;
	margin:30px 15px 30px 0;
}
.home-sci a:hover{
	background:cyan;
	color:#fff;
	box-shadow:0 0 20px #0ef;
}
.btn-box{
	display:inline-block;
	padding:12px 28px;
	background:#0850a3;
	border-radius:40px;
	font-size:16px;
	color:white;
	letter-spacing:1px;
	text-decoration:none;
	font-weight:600;
}
.btn-box2{
	display:inline-block;
	padding:12px 20px;
	background:#0dcae1;
	border-radius:20px;
	font-size:12px;
	color:white;
	letter-spacing:1px;
	text-decoration:none;
	font-weight:600;
	float:right;
}


.btn-box:hover{
	box-shadow:0 0 5px cyan;
	color:white;
	text-decoration:none;
	
}


/* @media for home page */


@media (max-width: 820px) {
  .home {
    flex-direction: column;
    align-items: center;
height:100vh;
  }

  .digital {
    order: -1;
    width: 200px; /* Adjust the width as needed for small screens */
    height: auto;
    
  }

  .home-content {
    text-align: center;
    
  }

  .home-content h1 {
    font-size: 30px; /* Adjust the font size for small screens */
  }

  .home-content h3 {
    font-size: 24px; /* Adjust the font size for small screens */
  }

  .home-sci {
    margin-top: 20px;
	margin-bottom:50px;
  }
}


/* Add this @media query for screens with max-width of 480px */
@media (max-width: 480px) {
  .home {
    flex-direction: column;
    align-items: center;
    padding: ;
  }
  
  .digital {
    max-width: 100%;
    height: auto;
    padding-bottom: 20px;
    padding-top: 10px;
  }
  
  .home-content {
    max-width: 100%;
    text-align: center;
    padding-bottom: 100px;
  }
  
  .home-content h1 {
    font-size: 30px;
  }
  
  .home-content h3 {
    font-size: 20px;
    margin: 10px 0 15px;
  }
  
  .home-content p {
    font-size: 16px;
  }
  
  .home-sci {
    margin-top: 15px;
  }
  
  .home-sci a {
    width: 25px;
    height: 25px;
    font-size: 14px;
    margin: 0 5px;
  }
}

@media (max-width: 1024px) {
  .home {
    flex-direction: column;
    align-items: center;
	height:70vh;
  }

  .digital {
    order: -1;
    width: 500px; 
    height: 500px;
    padding-bottom: 30px;
  }

  .home-content {
    text-align: center;
    margin-top: 20px;
  }

  .home-content h1 {
    font-size: 30px; 
  }

  .home-content h3 {
    font-size: 24px; 
  }

  .home-sci {
    margin-top: 20px;
  }
}


/* end of @media for home page */



.about{
	height:85vh;
	background-image:url('images/about.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	color:#0850a3;
	position:relative;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	align-items:center;
	gap:1.5rem;
}

.about-img img{
padding-top:20%;
padding-left:60px;
	padding-bottom:20%;
	width:600px;
	height:600px;
animation:slideBottom 2s ease backwards;
	animation-delay:.10s;
	
	
}

.about-text h2{
	font-size:20px;

}

.about-text h4{
	font-size:29px;
	font-weight:600;
	color:#0850a3;
	line-height:1.7;
	margin:10px 0 15px;
	
}
.about-text p{
	color:#0850a3;
	font-size:15px;
	line-height:1.4;
	margin-bottom:4rem;
	padding-right:50px;
	text-align:left;
}
.about2{
	background-image:url('images/careers.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	width:100%;
	display:flex;
}
.about-img2 img{
    padding-top:0;
	padding-bottom:20%;
	margin-right:0px;
	padding-right:20px;
	width:400px;
	height:400px;
    animation:slideBottom 2s ease backwards;
	animation-delay:0.10s;
	
}

.about-text2 h4{
	font-size:29px;
	font-weight:600;
	color:#0850a3;
	line-height:1.7;
	padding-left:50px;
	padding-right:100px;
	padding-top:30px;
	margin-bottom:20px;
}
.about-text2 p{
	color:#0850a3;
	font-size:15px;
	line-height:1.4;
	margin-bottom:4rem;
	padding-left:50px;
	padding-right:100px;
}











/* @media for about */
@media screen and (max-width: 767px) {
  .about {
    padding: 10px; 
    display:flex;
flex-direction:column;
width:100%;
height:auto;	
  }
  .about-img img {
    padding: 0;
    width: 100%;  
    max-height: 30vh; 
    margin: 0 auto; 
   padding-bottom:0;
  }

  .about-text {
   text-align:center;
    margin: 0; 
	padding-top:0;
	
  }
.about-text h1 {
    font-size: 20px;
}
  .about-text h4 {
    font-size: 20px; 
    margin-bottom: 5px;
  }

  .about-text p {
   
	color:#0850a3;
	font-size:12px;
	line-height:1.4;
	margin-bottom:4rem;
	padding-left:5px;
	padding-right:5px;
	 text-align: justify;
     letter-spacing: 0px;
    word-spacing: 0px; 
  }
  
  

}
/* Existing CSS for wider screens */
@media screen and (min-width: 768px) and (max-width: 1025px) {
  
  .about {
   
    text-align: center;
    padding: 1rem; 
    height: auto; 
  }
  
  .about-img img {
    width: 100%; 
    max-width: 500px; 
    height: 300px; 
    margin: 0 auto; 
    padding: 0; 
    margin-bottom: 1rem; 
  }
  
  .about-text {
    padding: 1rem; 
    text-align: center;
  }
  .about-text h1 {
    font-size: 25px;
}
  .about-text h4 {
    font-size: 24px; 
    margin: 0; 
    line-height: 1.4;
  }
  
  .about-text p {
    font-size: 14px; /* Reduce font size for compactness */
    margin-bottom: 1rem; /* Reduce spacing */
    padding: 0; /* Remove previous padding */
    text-align: center; /* Center text */
  }
}

@media screen and (min-width: 1500px) {
  .about {
   
    text-align: center;
    padding-top:0px; 
    height: 80vh; 
  }
  
  .about-img img {
     
    width: 600px; 
    height: 400px; 
    margin: 0 auto; 
    padding: 0; 
    margin-bottom: 1rem; 
  }
  
  .about-text {
    padding: 1rem; /* Adjust padding for spacing */
    text-align: center;
  }
  .about-text h2 {
    font-size: 25px;
}
  .about-text h4 {
    font-size: 30px; 
    margin: 0; /* Remove top margin */
    line-height: 1.4;
  }
  
  .about-text p {
    font-size: 25px; 
    margin-bottom: 1rem; 
    padding: 0; 
    text-align: center; 
  }
  
}
/* end of @media for about */


/* media for about2 */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .about2 {
    max-height: 200vh; /* Adjust max-height as needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem; /* Adjust padding as needed */
  }
  
  .about-img2 img {
   max-width:400px;
   max-height:300px;
  }
  
  .about-text2 {
    
    padding: 1rem; /* Adjust padding for spacing */
  }
  
  .about-text2 h4 {
    font-size: 24px; /* Reduce font size for compactness */
    margin-bottom: 1rem; /* Reduce spacing */
  }
  
  .about-text2 p {
    font-size: 14px; /* Reduce font size for compactness */
    margin-bottom: 2rem;
  padding-right: 70px;
	
  }
}

@media screen and (max-width:768px){
	
.about2 {
    
    display:flex;
   flex-direction:column;
    width:100%;
 align-items:center;
   padding:0;
  }

.about-text2 {
     padding-left:0;
	 margin-left:0;
	 width:100%;
  word-spacing: 0;
    margin: 0; 
	padding-top:0;
	order:2;
	
  }

.about-img2 img{
  
   width:100%;
   height:auto;
   padding-left:20px;
   order:1;
   padding-bottom:5px;
	
}

.about-text2 h4{
 font-size: 20px; 
    margin-bottom: 5px;
	text-align:center;
}
.about-text2 p{
	color:#0850a3;
	font-size:12px;
	line-height:1.4;
	margin-bottom:4rem;
	padding-left:10px;
	padding-right:10px;
	 text-align: justify;
	 letter-spacing: 0px;
  word-spacing: 0px; 
}



}


@media screen and (min-width: 1500px) {
	.about2{

}
.about-img2 img{
    padding-top:0;
	padding-bottom:20%;
	margin-right:0px;
	padding-right:20px;
	width:500px;
	height:500px;
    animation:slideBottom 2s ease backwards;
	animation-delay:0.10s;
	
}

.about-text2 h4{
	font-size:29px;
	font-weight:600;
	color:#0850a3;
	line-height:1.7;
	padding-left:50px;
	padding-right:100px;
	padding-top:30px;
	margin-bottom:20px;
}
.about-text2 p{
	color:#0850a3;
	font-size:25px;
	line-height:1.4;
	margin-bottom:4rem;
	padding-left:50px;
	padding-right:100px;
}

}

/*  end media for about2 */





















































@keyframes slideRight{
 0%{
	transform: translateY(100px);
	opacity:0;
}
 100%{
	transform: translateY(0px);
	opacity:1;
}
}

	
@keyframes slideTop{
 0%{
	transform: translateX(-100px);
	opacity:0;
}
 100%{
	transform: translateX(0px);
	opacity:1;
}
}
@keyframes slideBottom{
 0%{
	transform: translateY(-100px);
	opacity:0;
}
 100%{
	transform: translateY(0px);
	opacity:1;
}
}