@media (max-width: 767px) {
    /* navbar  */
    .navbar {
    display: block;
    padding: 20px 10px;
    
}
.nav-left {
    width: 100%;
    text-align: center;
}
.nav-right {
    width: 100%;
    padding-left: 0px;
    padding-top: 20px;
}
.nav-right-side {
    width: 20%;
    text-align: left;
}

.nav-right-mid {
    width: 60%;
    text-align: center;
}
.nav-left-content {
    font-size: 10px;
    color: white;
}
.nav-left-content a{
    color: white;
}
.time {
    color: white;
}
.right-text {
    font-size: 10px;
    margin: 0;
    color: white;
}
    /* top-section */
  .top-section {
    flex-direction: column;
    position: relative;
    height: auto;
  }

  .top-left {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  .top-right {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 2;
    padding: 0;
    margin: 0;
  }
   .top-right {
    top: auto;
    left: auto;
    z-index: 1; /* Lower z-index so it's behind navbar */
  }

  .header-section {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    padding-top: 120px;
  }

  .header {
    font-size: 40px;
    font-weight: 600;
    line-height: 2.4rem;
    color: white;
  }

  .square-btn {
    margin-top: 20px;
  }
  .square-btn {
    position: relative;
    padding: 20px 30px;
}
/* second-section */
.second-section {
    background-color: black;
    padding: 50px 10px;
    padding-bottom: 0px;
}
.second-section-grid {
    padding: 0 0px;
}
.second-grid {
    display: flex;
    gap: 5px;
}

.count-grid {
    display: block;
}
.number {
    font-size: 40px;
}
.count-grid-head {
    font-size: 10px;
    padding-left: 0px;
}
.second-video {
    width: 160px;
    height: 100px;
    overflow: hidden;
    flex-shrink: 0;
}
.line {
    display: inline-block;
    font-size: 19px;
}
.rest-text{
    font-size: 19px;
}
.second-para {
    font-size: 14px;
    line-height: 1.2rem;
}
/* project-section */
.project-section {
    padding: 20px 15px;
    background-color: black;
    display: block;
    gap: 0px;
    padding-bottom: 100px;
}
.project-section-grid {
    width: 100%;
}
.project-box {
    padding-top: 20px;
}
.square-btn-w {
    padding: 20px 30px;
    margin-top: 20px;
}
.project-right-grid-head {
    width: 100%;
}
.project-second-para {
    font-size: 16px;
    padding: 10px 0px;
    line-height: 1.4rem;
}
/* video-section */
.video-section {
    position: relative;
    width: 100%;
    height: auto;
    /* Use auto if you want dynamic height */
    overflow: hidden;
    padding: 60px 10px;
}
.video-content-section {
    display: block;
}

.content-left {
    width: 100%;
}

.content-right {
    width: 100%;
}
.video-content-head {
    font-size: 32px;
    margin: 0;
    color: white;
    line-height: 2.4rem;
    padding: 20px 0px;
}
.video-bottom-section {
    padding: 30px 0 0;
}
.video-grid-section {
    display: block;
    margin: 0;
    padding: 0;
}
.video-box {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0px;
    background: rgba(255, 255, 255, 0.01);
    /* subtle white tint */
    backdrop-filter: blur(1px);
    margin: 10px 0px;
}
.video-box-text {
    font-size: 22px;
}
/* founder-section */
.founder-section {
    padding: 50px 10px;
    height: auto;
}

.founder-top-right {
    width: 100%;
    display: flex;
    text-align: center;
}


.founder-top-section {
    flex-direction: column;
    padding: 0;
     padding-bottom: 50px;
  }

  .founder-top-left,
  .founder-top-right {
    width: 100%;
  }

  .founder-text-right-section {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0px;
  }
.founder-heading {
    font-size: 40px;
}
.review-section {
    padding-top: 5vh;
}
.first-review {
    font-size: 20px;
    line-height: 1.5rem;
}

.second-review {
    font-size: 20px;
    line-height: 1.5rem;
}
.founder-bottom-section {
    display: block;
    padding-top: 0px;
}
.founder-bottom-left {
    width: 100%;
}

.founder-bottom-right {
    width: 100%;
    padding: 50px 0px;
    padding-bottom: 0;
}
.founder-heading-b {
    font-size: 35px;
    line-height: 2.2rem;
}
.count {
    font-size: 18px;
    color: #969696;
    margin: 0;
}

.count-text {
    font-size: 20px;
    line-height: 1.5rem;
}

.custom-line {
    margin: 10px 0;
}
/* latest-blog-section */
.latest-blog-section {
    padding: 50px 15px;
    padding-bottom: 20px;
}
.bottom-head-section {
    display: block;
}
.bottom-head {
    font-size: 30px;
    padding-bottom: 20px;
}
.blog-bottom-section {
    padding: 20px 0px;
}
.bottom-grid-section {
    display: block;
}
.bottom-grid-left {
    width: 100%;
}
.bottom-grid-right {
    width: 100%;
}
.post-title {
    font-size: 24px;
    line-height: 1.2;
}
.bottom-contact-section {
    display: block;
}

.bottom-contact-section-left {
    width: 100%;
}

.bottom-contact-section-right {
    width: 100%;
    padding-top: 20px;
}
.video-content-sidehead {
    font-size: 18px;
}
.contact-head {
    font-size: 22px;
}
.address-section {
    display: block;
}

 .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
  }

  .footer-col.logo-col {
    order: 1; /* ✅ Move logo to top */
  }

  .footer-col.links-col {
    order: 2;
    width: 100%;
  }

  .footer-col.social-col {
    order: 3;
    width: 100%;
  }

  .footer-col.links-col .footer-links,
  .footer-col.social-col .footer-links {
    padding: 0;
    margin: 0 auto;
  }

  .footer-links li {
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .footer-left{
    margin-bottom: 0px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Navbar */
    .navbar {
        padding: 15px 20px;
    }
    
    .nav-right {
        padding-left: 20px;
    }
    
    .nav-left-content, .right-text {
        font-size: 12px;
    }
    
    /* Top Section */
    .top-section {
        height: 85vh;
        flex-direction: column;
    }
    
    .top-left {
        width: 100%;
        height: 50%;
    }
    
    .top-right {
        width: 100%;
        height: 50%;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    .header-section {
        padding-bottom: 20px;
        text-align: center;
    }
    
    .header {
        font-size: 45px;
        line-height: 3rem;
    }
    
    .square-btn {
        padding: 20px 30px;
        font-size: 12px;
        margin-top: 20px;
    }
    
    /* Second Section */
    .second-section {
        padding: 80px 15px 40px;
    }
    
    .second-section-grid {
        padding: 0 30px;
    }
    
    .second-head {
        font-size: 35px;
    }
    
    .video-text-wrap {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .second-video {
        width: 100%;
        height: 200px;
        margin: 0 auto;
    }
    
    .second-para {
        font-size: 18px;
        line-height: 1.6rem;
    }
    
    .second-grid {
        flex-direction: column;
        gap: 20px;
    }
    
    .count-grid {
        border-top: 1px solid rgba(150, 150, 150, 0.3);
        padding: 20px 0;
    }
    
    .number {
        font-size: 50px;
    }
    
    .count-grid-head {
        font-size: 14px;
    }
    
    /* Project Section */
    .project-section {
        flex-direction: column;
        gap: 60px;
        padding: 40px 15px 100px;
    }
    
    .project-section-grid {
        width: 100%;
    }
    
    .project-box {
        padding-top: 60px;
    }
    
    .video-grid {
        height: 350px;
    }
    
    .project-box-grid-head {
        font-size: 20px;
    }
    
    .project-right-grid-head {
        width: 100%;
        margin-left: 0;
    }
    
    .latest {
        font-size: 32px;
    }
    
    .project-second-para {
        font-size: 18px;
    }
    
    .square-btn-w {
        padding: 20px 30px;
        font-size: 12px;
        margin-top: 40px;
    }
    
    /* Video Section */
    .video-section {
        padding: 80px 15px;
        height: auto;
        min-height: 80vh;
    }
    
    .video-content-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .content-left, .content-right {
        width: 100%;
    }
    
    .video-content-head {
        font-size: 32px;
        line-height: 2.4rem;
    }
    
    .video-bottom-section {
        padding: 60px 0 0;
    }
    
    .video-grid-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .video-box-text {
        font-size: 22px;
    }
    
    /* Founder Section */
    .founder-section {
        padding: 80px 25px;
    }
    
    .founder-top-section {
        flex-direction: column;
        gap: 30px;
    }
    
    .founder-top-left, .founder-top-right {
        width: 100%;
    }
    
    .founder-top-right {
        justify-content: center;
    }
    
    .founder-text-right-section {
        width: 100%;
    }
    
    .founder-heading {
        font-size: 38px;
        line-height: 2.6rem;
        text-align: center;
    }
    
    .review-section {
        padding-top: 10vh;
        gap: 20px;
    }
    
    .first-review, .second-review {
        font-size: 24px;
        line-height: 1.8rem;
        text-align: center;
    }
    
    .founder-bottom-section {
        flex-direction: column;
        gap: 30px;
    }
    
    .founder-bottom-left, .founder-bottom-right {
        width: 100%;
    }
    
    .founder-heading-b {
        font-size: 38px;
        line-height: 2.6rem;
        text-align: center;
    }
    
    .count-text {
        font-size: 24px;
    }
    
    /* Latest Blog Section */
    .latest-blog-section {
        padding: 80px 15px 30px;
    }
    
    .bottom-head-section {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .bottom-head {
        font-size: 38px;
        text-align: center;
    }
    
    .blog-bottom-section {
        padding: 50px 0;
    }
    
    .bottom-grid-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .bottom-grid-left, .bottom-grid-right {
        width: 100%;
    }
    
    .post-title {
        font-size: 26px;
    }
    
    .bottom-contact-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .bottom-contact-section-left, .bottom-contact-section-right {
        width: 100%;
    }
    
    .contact-head {
        font-size: 38px;
        text-align: center;
    }
    
    .address-section {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-col {
        flex: none;
        min-width: auto;
    }
    
    .footer-col.social-col {
        justify-content: center;
    }
    
    .footer-col.social-col .footer-links {
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    /* Navbar */
    .navbar {
        padding: 15px 25px;
    }
    
    .nav-right {
        padding-left: 25px;
    }
    
    .nav-left-content, .right-text {
        font-size: 13px;
    }
    
    /* Top Section */
    .header {
        font-size: 55px;
        line-height: 3.8rem;
    }
    
    .square-btn {
        padding: 22px 35px;
        font-size: 13px;
    }
    
    /* Second Section */
    .second-section {
        padding: 100px 15px 50px;
    }
    
    .second-section-grid {
        padding: 0 80px;
    }
    
    .second-head {
        font-size: 40px;
    }
    
    .video-text-wrap {
        gap: 15px;
    }
    
    .second-video {
        width: 240px;
        height: 110px;
    }
    
    .second-grid {
        gap: 30px;
    }
    
    .number {
        font-size: 60px;
    }
    
    /* Project Section */
    .project-section {
        gap: 100px;
        padding: 50px 15px 150px;
    }
    
    .project-box {
        padding-top: 80px;
    }
    
    .video-grid {
        height: 450px;
    }
    
    .project-right-grid-head {
        width: 70%;
    }
    
    .latest {
        font-size: 36px;
    }
    
    .square-btn-w {
        padding: 22px 35px;
        font-size: 13px;
        margin-top: 60px;
    }
    
    /* Video Section */
    .video-section {
        padding: 100px 15px;
    }
    
    .video-content-head {
        font-size: 38px;
        line-height: 2.8rem;
    }
    
    .video-bottom-section {
        padding: 80px 0 0;
    }
    
    .video-grid-section {
        gap: 25px;
    }
    
    .video-box-text {
        font-size: 24px;
    }
    
    /* Founder Section */
    .founder-section {
        padding: 100px 30px;
    }
    
    .founder-heading, .founder-heading-b {
        font-size: 44px;
        line-height: 2.8rem;
    }
    
    .review-section {
        padding-top: 15vh;
        gap: 25px;
    }
    
    .first-review, .second-review {
        font-size: 26px;
        line-height: 2rem;
    }
    
    .count-text {
        font-size: 26px;
    }
    
    /* Latest Blog Section */
    .latest-blog-section {
        padding: 100px 15px 30px;
    }
    
    .bottom-head {
        font-size: 44px;
    }
    
    .blog-bottom-section {
        padding: 60px 0;
    }
    
    .post-title {
        font-size: 28px;
    }
    
    .bottom-grid-right {
        width: 30%;
    }
    
    .bottom-grid-left {
        width: 65%;
    }
    
    .contact-head {
        font-size: 44px;
    }
    
    /* Footer */
    .footer-content {
        gap: 35px;
    }
    
    .footer-col {
        min-width: 160px;
    }
}
@media (min-width: 1201px) and (max-width: 1400px) {}