body{
    padding:0;
    margin:0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}
/*----------------------------------------------styling the header-------------------------------------------*/

/*----------------------------------------------nav section-------------------------------------------*/
.dropBtn{
  
  background:rgba(189, 8, 8, 0.5);
  z-index: 1;
  
  overflow: visible;

 position:relative;
    right:5% !important;
  display:none;
}
.btnInv{
  background:rgba(26, 25, 25, 0.767);
  color:rgb(78, 0, 0);
}
.spanInv{
  background:rgb(255, 0, 0) !important;
}
.dropBtn span{
  display: block;
  width:30px;
  height:5px;
  margin:5px;
  
  background:rgba(58, 3, 3, 0.925);
}
.dropDown{
  position:fixed;
  top:80px;
  right:0;
  z-index: 3;
  height:100%;
  width:50%;

  background-color: #2d3436;
  background-image: linear-gradient(315deg, #515f64 0%, #e9e9e9 74%);
  
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  animation: menuAnimation 500ms ease ;
  
}
.dropDown a{
  text-align: center;
  padding:20px;
  font-size: 18px;
  color:rgb(0, 0, 0);
  font-family:Arial, Helvetica, sans-serif;

}
.dropDown a:hover{
  color:red;
  
}
.hide{
  animation : menuAnimation1 500ms forwards;
 
}

@keyframes menuAnimation{
  0%{
    width:0%;
  }
  100%{
    width:50%;
  }}
  @keyframes menuAnimation1{
    0%{
      width:50%;
    }
    100%{
      width:0%;
      
    }}
header nav{
    width:100%;
    height:80px;
    background:rgb(245,247,250);
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top:0;

}
header nav img{
    height: 80px;
}
header nav a.translate img{
    height: 3rem;
    transform: translateX(-7rem);
}
.dropDown a.translate img{
    height: 3rem;
    width:4rem;
    /* transform: translateX(-7rem); */
}
nav{
  z-index: 3;
}
nav .links{
    width:30%;
    transform: translateX(-0rem);
    display:flex;
    justify-content: space-around;
}
nav .links a{
    color: black;
    text-decoration: none;
    font-size:19px;
}
nav .links a:hover{
    text-decoration: underline;
    color:red;
}

/*----------------------------------------------fold and caroussel-------------------------------------------*/
header .header{
    margin-top:7%;
    margin-bottom: 8%;
    width:92%;
    height:70vh;
    display:grid;
    justify-content: center;
    align-items: start;
    grid-template-columns: 1fr 1fr ;
    margin-left: 4%;
    margin-right: 4%;
}

/*----------------------------------------------fold section-------------------------------------------*/

.header .fold{
    margin-top:15%;
    margin-left:0px;
    margin-right: 40px;
   }
header .header .fold  h1{
    font-size:3rem;
    font-weight:600;
    margin: 0px;
    padding:0px;
    animation: DownFade 0.8s  cubic-bezier(0, 0.79, 1, 0.85)  forwards;
}
header .header .fold  h2{
    font-size:2rem;
    color: red;
    margin: 0px;
    padding:0px;
    animation: DownFade 0.8s  cubic-bezier(0, 0.79, 1, 0.85)  forwards;
}
header .header .fold  p{
    font-size: 20px;
    animation: upFade 0.8s  cubic-bezier(0, 0.79, 1, 0.85)  forwards;
}
header .header .fold  button{
    width:120px;
    height:50px;
    background:red;
    color:white;
    border:none;
    animation: upFade 0.8s  cubic-bezier(0, 0.79, 1, 0.85)  forwards;
}
header .header .fold  button:hover{
    background:white;
    color:red;
    font-weight: 600;
    border: solid 2px red;
}
body > header > svg{
  display:none !important;
  height:0px;
}


/*----------------------------------------------caroussel section-------------------------------------------*/
.wrapper1{
    margin: 0;
    padding: 0;
    height: 65vh;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.8s  cubic-bezier(0.46, 0.21, 1, 0.85)  forwards;
    
}
.slider{
    width: 700px;
    height: 400px;
    overflow: hidden;
  }
  
  .slides{
    width: 500%;
    height: 500px;
    display: flex;
    flex-direction: row;
  }
  
  .slides input{
    display: none;
  }
  
  .slide{
    width: 20%;
    transition: 2s;
  }
  
  .slide img{
    width: 100%;
    height: 100%;
  }
  
  /*css for manual slide navigation*/
  
  .navigation-manual{
    position: absolute;
    width: 800px;
    margin-top: -80px;
    display: flex;
    justify-content: center;
    margin-left:-80px;
  }
  
  .manual-btn{
    border: 2px solid red;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
  }
  
  .manual-btn:not(:last-child){
    margin-right: 40px;
  }
  
  .manual-btn:hover{
    background: red;
  }
  
  #radio1:checked ~ .first{
    margin-left: 0;
  }
  
  #radio2:checked ~ .first{
    margin-left: -20%;
  }
  
  #radio3:checked ~ .first{
    margin-left: -40%;
  }
  
  #radio4:checked ~ .first{
    margin-left: -60%;
  }
  
  /*css for automatic navigation*/
  
  .navigation-auto{
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 420px;
    margin-left:-80px;
  }
  
  .navigation-auto div{
    border: 2px solid red;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
  }
  
  .navigation-auto div:not(:last-child){
    margin-right: 40px;
  }
  
  #radio1:checked ~ .navigation-auto .auto-btn1{
    background: red;
  }
  
  #radio2:checked ~ .navigation-auto .auto-btn2{
    background: red;
  }
  
  #radio3:checked ~ .navigation-auto .auto-btn3{
    background: red;
  }
  
  #radio4:checked ~ .navigation-auto .auto-btn4{
    background: red;
  }
/*----------------------------------------------partners section-------------------------------------------*/
.partners h1{
text-align: center;
}

@keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  .logos {
    overflow: hidden;
    padding: 60px 0;
    background: white;
    white-space: nowrap;
    position: relative;
  }
  
  .logos:before,
  .logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
  }
  
  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }
  
  .logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }
  
  .logos:hover .logos-slide {
    animation-play-state: paused;
  }
  
  .logos-slide {
    display: inline-block;
    animation: 10s slide infinite linear;
  }
  
  .logos-slide img {
    height: 30px;
    margin: 0 30px;
  }

  /*----------------------------------------------services section-------------------------------------------*/
.services{
    
    background: rgb(240, 240, 240);
    display: flex ;
    height:90vh;
    flex-direction: column;
    align-items: center;
}
.services h1{
    margin-top: 50px;
    text-align: center;
    margin-bottom: 0;
}
.services p{
    font-size: 20px;
    width: 80%;
    text-align: center;
}
.services .cards{
    width:100%;
    height:100%;
    display: flex;
    justify-content: space-evenly;
    gap:20px;
}
.services .cards .card{
  position:relative;
    width: 30%;
    height:80%;
    background:white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding-bottom:10px;
    overflow:hidden;
    box-sizing: border-box;
    z-index:1;
}
.services .cards .card .layer{
  position:absolute;
  top:99%;
  height:100%;
  width:100%;
  background: white ;
  z-index:1;
  transition: 0.5s;
}
.services .cards .card .layer img{
  display:none;
  transition-delay: 0.5s;
  transition: 0.5s;
}
.services .cards .card:hover .layer{
  top:0;
}
.services .cards .card:hover .layer img{
  display:block;
  position:absolute;
  right:40% !important;
  top:5%;
  width:100px;
  height:100px;
  
}
.services .cards .card:hover {
    background:white;
    box-shadow: rgba(255, 0, 0, 0.514) 0px 10px 20px;
    z-index: 2;
}
.services .cards .card:hover img{
  width:50%;
  height:50%;
  transition-delay: 0.2s;
  transition:0.5s;
  right:0;
}
.services .cards .card:hover p{
  display:block;
}
.services .cards .card img {
    position: relative;
    width:100%;
    height:90%;
    z-index: 0;
    transition:0.5s;
    
}
.services .cards .card  span {
    margin: 0;
    margin: 30px;
    padding:0;
    color:red;
    text-align: left;
    font-weight: 600;
    font-size:1.2em;
    
}
.services .cards .card  p span {
    margin: 0;
    margin: 20px 0px 5px ;
    padding:0;
    color:red;
    text-align: left;
    font-weight: 600;
    font-size:1.2em;
    
}

.services .cards .card p {
    width:90%;
    position: relative;
    margin : 0px;
    display:none;
    padding-left:15px;
    padding-right:10px;
    font-size: 1.1rem;
    text-align: left;
    z-index: 2;
}
  /*----------------------------------------------About Us section-------------------------------------------*/
.about{
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.about .symbol img{
    height:350px;
    padding-left:130px;
    
}
.about .symbol {
  animation: Left 0.8s  0.3s linear forwards;
  animation-play-state: paused;
}
.about .content{
    margin-top: 15px;
    animation: Right 0.8s  0.3s linear forwards;
    animation-play-state: paused;
}
 body > section.about > div.content > p:nth-child(2){
    width:90%;
} 
.about .content h2{
    margin:50px 0px 0px ;
    padding:0px;

}
  /*----------------------------------------------team section-------------------------------------------*/

.team{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
section.team > p{
    width:50%;
    text-align: center;
}
section.team > h1{
    margin:0;
    margin-top:50px;
    margin-bottom:5px;
}

.team .teamMembers{
    width:100%;
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(4,230px);
}
.team .teamMembers .profile img{
    width:50%;
    border-radius: 50%;
    height: 55%;
    border: 1px solid black;
}
.team .teamMembers .profile:nth-child(1){
  animation: Right 0.7s  0.5s linear  forwards;
  
  animation-play-state: paused;
}
.team .teamMembers .profile:nth-child(2){
  animation: Right 0.8s  0.5s linear  forwards;
  animation-play-state: paused;
}
.team .teamMembers .profile:nth-child(3){
  animation: Right 0.9s  0.5s linear  forwards;
  animation-play-state: paused;
}
.team .teamMembers .profile:nth-child(4){
  animation: Right 1s  0.5s linear  forwards;
  animation-play-state: paused;
}


.team .teamMembers .profile  {
    text-align: center;
}
.team .teamMembers .profile h4 {
    padding: 0px;
    margin:0px;
    margin-bottom: 5px;
}
.team .teamMembers .profile p{
    padding: 0px;
    margin:0px;
    color:red;
}
  /*----------------------------------------------Contact us  section-------------------------------------------*/
.contact{
    background: rgb(240, 240, 240);
    margin-top:40px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.contact h1{
    margin-top:40px;
    margin-bottom:0px;
    animation: fadeIn 0.7s  linear  forwards;
}
.contact p{
  animation: fadeIn 0.7s  linear  forwards;
}
.contact form{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    gap:20px;
    animation: fadeIn 0.7s  linear  forwards;
}

.contact form div {
    width:35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap:5px;
    
}
.contact form div input {
    width:100%;
    height:30px;

}
.contact form div input:hover {
    border: solid 2px rgba(117, 10, 10, 0.808);

}
.contact form  div textarea{
  width:100%;
  height:20vh;
}
.contact form div textarea:hover {
    border: solid 2px rgba(117, 10, 10, 0.808);

}

.contact form label{
    align-self: flex-start;
}
.contact form button{
    width:36.1%;
    transform: translateX(5px);
    height:40px;
    background:red;
    color:white;
    border:none;
    margin-bottom:40px;
}
.contact form button:hover{
    background:white;
    color:red;
    font-weight: 600;
    border: solid 2px red;
}

/* .contact form input[type='message']{
    height:200px;
}
.contact form input[type='message']::placeholder{

} */
  /*----------------------------------------------Location section-------------------------------------------*/
.map{
    width:100%;
    height:100vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap:5px;
}
.map h1{
    margin-bottom:0px;
}
.map button{
    width:10%;
    transform: translateX(5px);
    height:40px;
    background:red;
    color:white;
    border:none;
}
.map button:hover{
    background:white;
    color:red;
    font-weight: 600;
    border: solid 2px red;
}
.map iframe{
    margin-top:40px;
    width:60%;
    height:70%;
    margin-bottom:50px;
    animation: fadeIn 0.8s  cubic-bezier(0.46, 0.21, 1, 0.85)  forwards;
    animation-play-state: paused ;
}
  /*----------------------------------------------Footer section-------------------------------------------*/
footer{
    background:rgb(245,247,250);
    width:100%;
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr ;
    justify-content: center;
    align-items: center;
}

footer .footerLinks{
    display:flex;
    flex-direction: column;
    height:150px;
    
}
footer .footerLinks:nth-child(2){
  animation: upFade 0.5s  linear  forwards;
  animation-play-state: paused;
}
footer .footerLinks:nth-child(3){
  animation: upFade 0.6s  linear  forwards;
  animation-play-state: paused;
}
footer .footerLinks:nth-child(4){
  animation: upFade 0.7s  linear  forwards;
  animation-play-state: paused;
}
footer .footerLinks:nth-child(5){
  animation: upFade 0.8s  linear  forwards;
  animation-play-state: paused;
}

footer .footerLinks h4{
    margin-bottom: 5px;
}
footer .footerLinks a{
    text-decoration: none;
    color:black;
    cursor: pointer;
}
 .end{
    width:100% !important;
    text-align: center;
    background:red;
    color:white;
}
.phone{
  width:370px;
  height:150px;
  position:fixed;
  top:35%;
  left:50%;
  transform:translate(-50%,50%);
  background:rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display:none;
  box-shadow: rgba(0, 0, 0, 0.514) 0px 10px 20px;
  border-radius: 12px;
}
.phone h1,.email h1{
  font-size: 1.2rem !important;
  cursor: pointer;
}
.phone button,.email button{
  font-size: 1.1rem !important;
  position: absolute;
  top:0;
  right:0;
  border:none;
  background:rgb(245, 245, 245);
  border-radius: 12px;
}
.email{
  width:370px;
  height:150px;
  position:fixed;
  top:35%;
  left:50%;
  transform:translate(-50%,50%);
  background:rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display:none;
  box-shadow: rgba(0, 0, 0, 0.514) 0px 10px 20px;
  text-align: center;
  border-radius: 12px;
}

  /*----------------------------------------------Responsivness-------------------------------------------*/
  @media screen and (max-width:1400px){
    .dropDown{
      display:none;
    }
  }
  @media screen and (max-width:1300px){
    .wrapper1{
      margin-top: 50px;
    }
  }
  @media screen and (max-width:1200px){
   
    .wrapper1{
        margin: 0;
        padding: 0;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;

        margin-top:50px;
    }
    .slider{
        width: 500px;
        height: 300px;
        overflow: hidden;
      } 
    .navigation-manual,.navigation-auto{
        width:350px;
        transform: translate(10rem,-7rem);
        
    }
    .services{
      height:90vh;
    }
    .services .cards .card p{
      font-size:0.9em
    }
    .services .cards .card span{
      font-size:1em;
    }

  }
  @media screen and (max-width:900px){
    .services .cards .card p{
      font-size:0.9rem
    }
    .services .cards .card span{
      font-size:1rem;
    }
    .slider{
      width: 400px;
      height: 300px;
      overflow: hidden;
    } 
    .navigation-manual,.navigation-auto{
      width:250px;
      transform: translate(10rem,-7rem);
      
  }

  }
  @media screen and (max-width:850px){
    nav .links{
      width:40%;
      margin-left:10px;
      justify-content: space-between;
    }
    nav a img{
      transform: translateX(0rem) !important;
    }
    .wrapper1{
      display:none;
  }
  
  header .header{
    display:flex;
    flex-direction: column;
    
}
header{
  background:linear-gradient(to bottom,red 50% ,white);
  
}
body > header > svg{
  display:block !important;
  height:100%;
}

header .fold>h1{
  color:white;
  
}
header .fold>p{
  color:white;
  
}
header .fold>h2{
  color:rgb(0, 0, 0) !important;
}
header .header button{
 border: solid 1px white !important;
}
.contact form  div textarea{
  width:17rem;
}
body > section.team > div.teamMembers{
  grid-template-columns: 1fr 1fr;
}
body > footer{
  grid-template-columns: 1fr 1fr 1fr ;
  grid-template-rows: auto 1fr ;
  gap:20px;

}

.services .cards .card{
  height: 320px !important;
}
.services .cards .card span{
  font-size: 0.65em;
  text-align: left;
}
  }
  @media screen and (max-width:750px){
    .services .cards .card{
      height: 300px !important;
    }
    
    
    .services .cards .card span{
      font-size:0.8rem;
    }
    .contact form  div textarea{
      width:100%;
    }
    .map iframe{
      margin-top:40px;
      width:90%;
      height:45%;
      margin-bottom:50px;
      animation: fadeIn 0.8s  cubic-bezier(0.46, 0.21, 1, 0.85)  forwards;
      animation-play-state: paused ;
  }
  }
  @media screen and (max-width:630px){
    nav .links{
      display:none;
    }
    nav a img{
      display: none;
    }
    nav .dropBtn{
      /* margin-right:200px; */
      display: block;
      margin-right:0px;
  
    }
    /* header{
      
    } */
    header .header{
        display:flex;
        flex-direction: column;
        
    }
    header .header .fold{
        margin-top: 5px ;
        margin-bottom: 25px;
        
    }
    .wrapper1{
        display:none;
    }
    .navigation-manual,.navigation-auto{
        width:0px;
        
    }
    .services{
        height:200vh;
        gap:20px;
    }
    .services p{
        font-size: 14px;
        width: 80%;
        text-align: center;
    }
    .services .cards {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: end;
        align-items: center;
        width:100%;
    }
    .services .cards .card{
        width: 70%;
        height:350px;
        background:white;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        transform: translateX(22%);
        margin:15px 0;
    }
    .services .cards .card p{
      font-size:1rem;
    }
    services .cards .card img {
      height: calc(100% - 20px);
  }
    body > section.about{
        grid-template-columns: 1fr;
    }
    body > section.about > div.content{
        padding-left:10px;
    }
    body > section.team > div.teamMembers{
        grid-template-columns: 1fr 1fr;
    }
    .team .teamMembers .profile{
        margin-bottom:35px;
    }
    .contact form div{
        width:60%;
    }
  
    .map button{
      width:20%;
      margin-left:0px;
    }
    body > footer{
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: auto 1fr ;
        justify-content: end;
        align-items: center;
    }
    footer .footerLinks{
      margin-left:20px;
    }
    .about .symbol {
      animation: none;
      animation-play-state: paused;
    }
    .about .content{
        margin-top: 15px;
        animation: upFade 0.8s  0.3s linear forwards;
        animation-play-state: paused;
    }
    .about .symbol img{
      padding-left:50px;
    }
    .team .teamMembers .profile:nth-child(1){
      animation: fadeIn 0.6s   cubic-bezier(0.46, 0.21, 1, 0.85)  forwards;
      
      animation-play-state: paused;
    }
    .team .teamMembers .profile:nth-child(2){
      animation: fadeIn 0.8s   cubic-bezier(0.46, 0.21, 1, 0.85)  forwards;
      animation-play-state: paused;
    }
    .team .teamMembers .profile:nth-child(3){
      animation: fadeIn 1s   cubic-bezier(0.46, 0.21, 1, 0.85)  forwards;
      animation-play-state: paused;
    }
    .team .teamMembers .profile:nth-child(4){
      animation: fadeIn 1.2s   cubic-bezier(0.46, 0.21, 1, 0.85)  forwards;
      animation-play-state: paused;
    }
  }

/*------------------------------------- Animations -----------------------------------------------------*/
@keyframes upFade{
  0%{
    transform:translateY(100px);
    opacity:0;
  }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}
@keyframes DownFade{
  0%{
    transform:translateY(-100px);
    opacity:0;
  }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}
@keyframes fadeIn{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@keyframes Left{
  0%{
    transform:translateX(-150px);
  }
  100%{
    transform:translateX(0px);
  }
}
@keyframes Right{
  0%{
    transform:translateX(100px);
  }
  100%{
    transform:translateX(0px);
  }
}
.fade-in{
  animation: fadeIn 0.7s  linear  forwards;
}
.map-fade{
  animation: fadeIn 0.8s  cubic-bezier(0.46, 0.21, 1, 0.85)  forwards;
}
.animation_start{
  animation-play-state: running !important;
}