@font-face {
  font-family: 'Auch'; /* Name your font family */
  src: url('auch-cufonfonts/Auch 3.otf'); /* Locate the .ttf file within your directory*/
}
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@font-face {
  font-family: 'Enixe'; /* Name your font family */
  src: url('Enixe.ttf'); /* Locate the .ttf file within your directory*/
}

@font-face {
  font-family: 'Rajdhani'; /* Name your font family */
  src: url('Rajdhani-Medium.ttf'); /* Locate the .ttf file within your directory*/
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);

*{
  padding: 0;
  margin: 0;
}



*::after,
*::before{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.html{
  font-size: 62.5%;
}

.navbar input[type="checkbox"],
.navbar .hamburger-lines{
  display: none;
}

.container {
  max-width: 100% !important;
  width: 100% !important;
  background-image: url(background\ image.png) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.navbar {
  box-shadow: 0px 5px 10px 0px #33aed8 !important;
  width: 100% !important;
  background: #030515 !important;
  color: #030515 !important;
  z-index: 100 !important;
  position: fixed !important; /* Fix the navbar at the top */
  top: 0 !important; /* Align it to the top */
  left: 0 !important; /* Ensure it spans the entire width */
  right: 0 !important; /* Ensure it spans the entire width */
}

.navbar-container {
  display: flex !important;
  justify-content: space-between !important;
  height: 100px !important;
  align-items: center !important;
  padding: 0 20px !important; /* Add padding to the sides if needed */
}

.logo {
  order: 1 !important; /* Ensure the logo is the first item */
}

.menu-items {
  font-family: 'Enixe', sans-serif !important;
  order: 2 !important; /* Ensure the menu items are the second item */
  display: flex !important;
}

.menu-items li {
  list-style: none !important;
  margin-left: 1.5rem !important;
  font-size: 1.3rem !important;
}

.navbar a {
  color: #33aed8 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.3s ease-in-out !important;
}

.navbar a:hover {
  color: #ffffff !important;
}




.tagline{
  

  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 290px;
  font-size: 5vw;
  font-family: 'Enixe', sans-serif;
  background: linear-gradient(-90deg, #6af5ed, #2d64af 23.05%, #6dcfee 50%, #2d64af 76.75%, #6af5ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 0px 250px rgba(105, 200, 234, 0.5);
 
}

.page1 {
  
  padding-top: 0px;
    max-height: 100%;
    max-width: 100%;
    background-color:#030515;
    height: 100vh;
    width: 100vw;
    background-image: url(hero\ section\ background.jpg);
    background-repeat: no-repeat ;
    background-size: cover;
}


.squadsync {
  
padding-top: 0px;
  max-height: 100%;
  max-width: 100%;
  background-color:#030515;
  height: 100%;
  width: 100vw;
  background-image: url(background\ image.png);
  background-repeat: no-repeat ;
  background-size: cover;
}
.aboutheading {
  padding-left: 10px;
  font-size: 3.5vw;
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 20px;
  text-decoration-thickness: 0.1rem;
  background: linear-gradient(-90deg, #6af5ed, #2d64af 23.05%, #6dcfee 50%, #2d64af 76.75%, #6af5ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 0px 250px rgba(105, 200, 234, 0.5);
}


#carouselExampleIndicators{

padding-top: 50px;
  

}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #030515; 
  background-image: url(hero\ section\ background.jpg);
    background-repeat: no-repeat ;
    background-size: cover;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #33aed8; 
  border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff; 
}



.animaiton{
  padding-top: 0px;
  max-height: 100%;
  max-width: 100%;
  background-color:#030515;
  height: 100%;
  width: 100%;
  background-image: url(background\ image.png);
  background-repeat: no-repeat ;
  background-size: cover;

}
.animationpage{
display: flex;
justify-content: center;
align-items: center;
 padding-top: 50px;
 padding-bottom: 50px;

}
.animationpage video{
  
  width: 65vw;
}

.squadsync
{
  padding-bottom: 50px;
}

.inpartnership{
  padding-top: 0px;
  max-height: 100%;
  max-width: 100%;
  background-color:#030515;
  height: 100%;
  width: 100%;
  background-image: url(background\ image.png);
  background-repeat: no-repeat ;
  background-size: cover;
}
.uiux{
  display: none;
}

.logo img {
  width: 300px;
  padding-top: 1px;
}
.partners{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20vw;
  padding-top:50px ;
  padding-bottom: 100px;
  
}
.partner1{
  width: 40vw;

}
.partner2{
  width: 20vw;

}
.team{
  padding-top: 0px;
  max-height: 100%;
  max-width: 100%;
  background-color:#030515;
  height: 100%;
  width: 100%;
  background-image: url(background\ image.png);
  background-repeat: no-repeat ;
  background-size: cover; 
}

.teammember{
padding-top: 50px;
display: flex;
justify-content: center;
align-items: center;
gap: 7vw;
padding-bottom: 200px;
}
.section1{
display: flex;
gap: 7vw;
}
.section2{
display: flex;
gap: 7vw;
}

.crousel1111{
 padding-left: 10vw !important;
  width: 90vw !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}

.teammember img{
width: 18vw;
}

/* Add this to your CSS file */

/* Make sure the elements are hidden initially */

html {
  scroll-behavior: smooth;
}




.footer-distributed{
  background-color:#030515 ;
 
  background-image: url(background\ image.png);
  background-repeat: no-repeat ;
  background-size: cover;
  box-shadow: 0px 5px 20px 0px #33AED8;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: bold 16px sans-serif;
  padding: 40px 50px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
  display: inline-block;
  vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
  width: 40%;
}

/* The company logo */



.footer-left img{

width: 20vw;
}
/* Footer links */

.footer-distributed .footer-links{
  color:  #33AED8;
  margin: 20px 0 12px;
  padding: 0;
}

.footer-distributed .footer-links a{
  display:inline-block;
  line-height: 1.8;
  font-weight:400;
  text-decoration: none;
  color:  inherit;
}

.footer-distributed .footer-company-name{
  color:  #222;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
  width: 35%;
}

.footer-distributed .footer-center i{
  background-color:  #33383b;
  color: #ffffff;
  font-size: 25px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 42px;
  margin: 10px 15px;
  vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
  font-size: 17px;
  line-height: 38px;
}

.footer-distributed .footer-center p{
  display: inline-block;
  color: #ffffff;
  font-weight:400;
  vertical-align: middle;
  margin:0;
}

.footer-distributed .footer-center p span{
  display:block;
  font-weight: normal;
  font-size:14px;
  line-height:2;
}

.footer-distributed .footer-center p a{
  color:  lightseagreen;
  text-decoration: none;;
}

.footer-distributed .footer-links a:before {
  content: "|";
  font-weight:300;
  font-size: 20px;
  left: 0;
  color: #fff;
  display: inline-block;
  padding-right: 5px;
}

.footer-distributed .footer-links .link-1:before {
  content: none;
}

/* Footer Right */

.footer-distributed .footer-right{
  width: 20%;
}

.footer-distributed .footer-company-about{
  line-height: 20px;
  color:  #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-company-about span{
  display: block;
  color:  #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-distributed .footer-icons{
  margin-top: 25px;
}

.footer-distributed .footer-icons a{
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color:  #33383b;
  border-radius: 2px;

  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;

  margin-right: 3px;
  margin-bottom: 5px;
}
.copyright{
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 1vw;

}
/* If you don't want the footer to be responsive, remove these media queries */






@media (max-width:1205px){
  .navbar-container input[type="checkbox"],
.navbar-container .hamburger-lines {
  display: block;
}

.navbar-container {
  display: block;
  position: relative;
  height: 120px;

}

.navbar-container input[type="checkbox"] {
  position: absolute;
  display: block;
  height: 32px;
  width: 30px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.navbar-container .hamburger-lines {
  display: block;
  height: 28px;
  width: 35px;
  position: absolute;
  top: 33px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.navbar-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #ffffff;
}

.navbar-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.3s ease-in-out;
}

.navbar-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.navbar-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.3s ease-in-out;
}

.navbar .menu-items {
  padding-top: 100px;
  background: #030515;
  height: 100vh;
  width: 300px;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 40px;
  transition: transform 0.5s ease-in-out;
  box-shadow: 5px 0px 10px 0px #33aed8;
  overflow: scroll;
  background-image: url(background\ image.png) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.navbar .menu-items::-webkit-scrollbar {
  display: none;
}

.navbar .menu-items li {
  margin-bottom: 1.8rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2.5rem;
}

.navbar-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}
.navbar-container{
  display: block;
  position: relative;
  height: 90px;
} 


}













@media (max-width: 500px){
  .navbar-container input[type="checkbox"]:checked ~ .logo{
      display: none;
  }
  
}



@media (max-width: 900px){

  #carouselExampleIndicators{
      display: none;
          
      
      }
      .teammember{
       
      flex-direction: column;
      }
      .teammember img{
        width: 30vw;
          }
          .copyright{
            font-size: 2vw;
          }
          
      
      .uiux{
          
          display: block;
          padding-top: 15px;
         
          
      }
      .uiux img{
          padding-bottom: 50px;
          width: 100%;
      }
         
          
          .logo img {
              width: 220px;
              padding-top: 2px;
          }
      
          .page1 {
          
              
                height: 600px;
               
            }
          
          
          .squadsync {
              
           
              height: 100%;
             
             
         
      }
      
      
      .footer-distributed{
        font: bold 14px sans-serif;
      }
    
      .footer-distributed .footer-left,
      .footer-distributed .footer-center,
      .footer-distributed .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
      }
    
      .footer-distributed .footer-center i{
        margin-left: 0;
      }
      .footer-left img{

        width: 50vw;
         }
      
      
      .aboutheading{
      
          font-size: 5vw;
         
          
          padding: 20px;
         
      }
      .animationpage video{
          
          width: 100vw;
      }
      
      
          .animationpage{
              display: flex;
              justify-content: center;
              align-items: center;
                 padding-top: 15px;
               
              }
      
              .partners{
                  padding-top: 50px;
                  flex-direction: column;
              }
                
              .partner1{
                  width: 70vw;
              
              }
              .partner2{
                  width: 40vw;
              
              }
       
  
}

@media (max-width: 1080px){
  .page1{
    background-image: url(background\ image.png);
  }
  }
  

@media (max-width: 494px){
.page1{
  background-image: url(background\ phone.png);
}
}