* {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
button{
    background: transparent;
    border: transparent;
}
.white{
    color: #ffffff;
}
.cyan{
    color: #65b5e5;
}
.dark-blue{
    color: #08283B;
}
.font-20{
    font-size: 20px;
}
.font-26{
    font-size: 26px;
}
.font-30{
    font-size: 30px;
}
.font-40{
    font-size: 40px;
}
.font-50{
    font-size: 50px;
}
.font-60{
    font-size: 60px;
}
.font-70{
    font-size: 70px;
}
.font-80{
    font-size: 80px;
}
.font-90{
    font-size: 90px;
}
.font-100{
    font-size: 100px;
}
.font-120{
    font-size: 120px;
}
.srisakdi-regular {
  font-family: "Srisakdi", system-ui;
  font-weight: 400;
  font-style: normal;
}
.single-day-regular {
  font-family: "Single Day", cursive;
  font-weight: 400;
  font-style: normal;
}
.zain-bold {
  font-family: "Zain", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.rosario-bold {
  font-family: "Rosario", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700px;
  font-style: normal;
}
.share-tech-regular {
  font-family: "Share Tech", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.anek-devanagari-bold {
  font-family: "Anek Devanagari", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.viga{
    font-family: "Viga", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body{
    height: 100%;
}
.navbar-scrolled {
      background-color: #3498db; /* Your desired background color */
    }
.up{
    padding-bottom: 5%;
}
.navbar{
    display: flex;
    background: in;
    flex-shrink: 1;
    flex-grow: 0;
    align-items: center;
    justify-content: space-between;
    padding:5px 10px;
    border-bottom-style: solid;
    border-bottom-color: #ededed;
    position: fixed;
    z-index: 1000;
    width: 99%;
}
.links{
    display: flex;
    background: in;
    justify-content: space-between;
    flex-shrink: 1;
    flex-grow: 0;
    align-items: center;
    gap: 5%;
    width: 80vw;
}
.hamburger {
  font-size: 1rem;
  cursor: pointer;
  color: #ffffff;
  display: none;
}
@media (max-width: 768px) {
  .links {
position: fixed;
  top: 60px; 
  left: 0;
  width: 100%;
  height: 100vh ;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    background-color: #08283B;
  z-index: 1;
  margin-top: -20px;
  gap: 12%;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .links a h2{
    text-align: left;
    font-size: 80%;
  }
  .links.show {
    display: flex;
    transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  }

  .hamburger {
    display: block;
    margin-right: 5%;
    
  }
}
.up{
      transition: transform 0.3s ease-out;

}
.up:hover{
    transform: translateY(-5px);
    transition: transform 0.4s;
    cursor: pointer;
}
.link{
    transition: transform 0.3s ease-out, text-decoration 0.3s ease-out;
}
.link:hover{
    transform: scale(1.05);
    text-decoration: underline;
    text-decoration-color: #65b5e5;
    transition: transform 0.4s;
}
.cta1
{
    display: inline;
    border-radius: 20px;
    background-color: #65b5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 20px;
}
.navbar img{
    height: auto;
    width: 8%;
}
.hero-div{
    background-image: url("https://i.postimg.cc/yN0pBtzr/bg3.png") ;
    background-size: cover;
    height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    
}
.logo{
    display: flex;
    justify-content: center;
}

.hero-section{
    background-color: #08283B;
    margin-bottom: 2%;
    width: 100%;
    overflow: hidden;
}
.hero-middle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 1;
}
.hero-middle .arrow{
    display: flex;
    height: auto;
    flex-shrink: 1;
    justify-content: center;
}
.hero-middle .arrow .img{
    width: 100%;
}
.hero-middle.arrow.button{
    color: #08283B;

}
.circles-hero{
    display: flex;
    align-items: center;
    justify-content: center;
}
.circles-hero .circle{
    border:solid;
    border-color: #ffffff;
    border-radius: 100px;
    height: 30px;
    width: 30px;
    margin:20px 10px;
}
.aboutus{
   padding-top: 5%;
}
.AlexHack{
    padding: 0% 6% 3% 1%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 1;
}
.AlexHack h1{
    border-top: solid;
    border-top-width: 1%;
    border-top-color: #08283B;
     display: inline-block;    
  width: fit-content; 
}
.hacker
{
    padding: 0% 6% 3% 1%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 1;
}
.hacker h1{
    border-top: solid;
    border-top-width: 0.5%;
    border-top-color: #08283B;
    display: inline-block;
    text-align: center;
    
}
.hacker p{
    text-align: center;
}
.text{
    display: flex;
    flex-direction: column;
}
.hacker img{
    height: auto;
    flex-shrink: 1;
}
.what-we-do {
    margin-bottom: 2%;
    padding-top: 5%;
}
.what-we-do-title {
    display: flex;
    justify-content: center;

}
.what-we-do-title h1{
    border-top: solid;
    border-top-width: 1%;
    border-top-color: #08283B;
}
.boxes{
    display: flex;
    justify-content: space-around;
    flex-shrink: 1;
}
.box{
    display: flex;
    flex-shrink: 1;
    padding: 2% 1% 4%;
    flex-direction: column;
    background-color: #08283B;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    gap: 10%;     
    width: 25%;
}

.box img{
    width: 40%;
    height: auto;
}
.box p{
    text-align: center;
    margin: 0% 1%;
}
.our-community{
    background-color: #08283B;
    display: flex;
    justify-content: space-between;
    padding-top:4%;
    padding-right: 5%;
    overflow: hidden;
    flex-shrink: 1;
    
}
.our-community-left{
    padding-left: 3%;
    display: flex;
    flex-direction: column;
    gap: 10%;
    flex-shrink: 1;
    
}

.our-community-right {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
 position: relative;
 flex-shrink: 1;
    width: 60%;
}
.our-community-right img{
    width: 100%;
    height: auto;
    border-radius: 10%;
}
.social{
    display: flex;
    gap: 5%;
    margin: 7% 0%;
}
.social img{
    width: 80%;
    height: auto;
}
.partners{
    margin-bottom: 5%;
}
.title-partners{
    display: flex;
    justify-content:center;
}
.hackclub{
    display: flex;
    justify-content: center;
    gap: 5%;
}
.creativa{
    display: flex;
    justify-content: center;
}
.cta{
    display: flex;
    justify-content: center;
    gap: 5%;
}
.cta-1{
    background-color: #65b5e5;
    border-radius: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    cursor: pointer;
}
.cta-2{
    background-color: #08283B;
    border-radius: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    cursor: pointer;
}
.join-us{
    margin-bottom: 5%;
}
.join-us-box{
    background-color: #08283B;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 60%;
    height: 100%;
    margin: auto;
    border-radius: 38px;
    padding: 1% 1%;
}

.upper{
    display: flex;
        margin-left: 5% ;
        margin-bottom: 5%;
        overflow: hidden;

}
.image-upper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 1;
    overflow: hidden;
}
.image-upper img{
    flex-shrink: 1;
}

.lower{
    margin-left: 5%;
   
}
.lower h1{
     background-color: #65b5e5;
     border-radius: 30px;
     display: inline;
     padding: 1% 4%;
}
.apply{
    cursor: pointer;
}
footer{
    background-color: #08283B;
    padding: 3% 5%;
}
.info{
    display: flex;
    justify-content: space-between;    
    border-bottom: solid;
    border-bottom-color: #ededed;
}
.info h1
{
    margin-bottom: 10%;
}
.hh
{
    margin-bottom: 10%;
}
.contact-us{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-us a{
    width :40%;
}
.social-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.social-footer a,.social-footer img{
  width: 50%;
  margin-bottom: 10%;
}
.copyrights{
    display: flex;
    justify-content: flex-end;
}
.text-with-cursor::after {
    content: "|";
    animation: blink 1s step-start infinite;
}
.by-students{
    text-align: left;
}
@keyframes blink {
    50% { opacity: 0; }
}
@media (max-width: 768px) {
  .hero-div img{
    width: 30%;
    height: 30%;
  }
  .logo img{
    width: 50%;
  }
.circles-hero .circle{
    width: 5px;
    height: 5px;
 }
 .AlexHack{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 .AlexHack .text{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
  .AlexHack p{
    text-align: center;
 }
 .AlexHack img{
    width: 70%;
    height: 20%;
    margin-top: 5%;
 }
 .hacker{
      display: flex;
    flex-direction: column-reverse;
    align-items: center;
 }
 .hacker img{
    width: 70%;
    height: 20%;
        margin-top: 5%;

 }
 .hacker h1{
    width: fit-content;
 }
 .hacker .text{
    align-items: center;
 }
 .boxes{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 .box{
    width: 70%;
    margin-bottom: 4%;
 }
 .our-community{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 .our-community-left{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
  .text-left{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 .text-left p{
    text-align: center;
 }
 .our-community img{
    width: 100%;
    height: auto;
    border-radius: 10%;
 }
 .social img{
    width: 50%;
    height: auto;
 }
 .hackclub img{
    width: 30%;
    height: 15%;
 }
 .creativa img{
    width: 100%;
    height: auto;
 }
 .cta-1{
    width: fit-content;
    height: fit-content;
    padding: 3% 3%;
 }
 .cta-1 h1{
    font-size: 20px;
    text-align: center;

 }
  .cta-2{
    width: fit-content;
    height: fit-content;
    padding: 3% 3%;
 }
 .cta-2 h1{
    font-size: 20px;
    text-align: center;

 }
 .join-us-box{
  width: 94%;
    height: auto;
    margin: auto;
    border-radius: 30px;
 }
 .image-upper img{
    width: 100%;
 }
 .info{
    display: flex;
    flex-direction: column;
 }
 .about p{
text-align: center;
 }
  .about h1{
text-align: center;
 }
 .contact-us a{
    width :20%;
}
 .contact-us img{
    width :100%;
}
.social-media h1{
    text-align: center;
}
.social-media{
    align-items: center;
}
.social-footer a,.social-footer img{
    width: 40%;
    align-items: center;
}
.social-footer a{
    display: flex;
    align-items: center;
    justify-content: center;
}
 .font-26{
    font-size: 20px;;
 }
  .font-30{
    font-size: 25px;;
 }
 .font-40{
    font-size: 23px;;
 }
 .font-60{
    font-size: 25px;
 }
  .font-70{
    font-size: 14px;
 }
 .font-80{
    font-size: 16px;
 }
 .font-100{
    font-size: 50px;
 }
 .font-120{
    font-size: 40px;
 }
}