@media screen and (max-width: 1150px) {
    .navbar {
        padding: 0 20px;
    }

    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .nav-right {
        gap: 0.5rem;
    }

    #view-demo-nav {
        display: none;
    }

    #get-started-nav {
        display: none;
    }

    .font-toggle {
        display: none;
    }

    .mobile-menu.active {
        display: block;
    }
}

@media screen and (max-width:780px) {
    .navbar {
        padding: 0 20px;
        height: 50px;
    }

    .navbar .logo {
        width: 60px;
        height: 30px;
    }

    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .nav-right {
        gap: 0.5rem;
    }

    #view-demo-nav {
        display: none;
    }

    #get-started-nav {
        display: none;
    }

    .font-toggle {
        display: none;
    }

    .mobile-menu.active {
        display: block;
    }
}

@media (max-width: 780px) {

    /* hero-section  */
    .hero-section {
        flex-direction: column;
        align-items: center;
        min-height: auto;
        position: relative;
    }

    .hero-left,
    .hero-right,
    .cirlcle-img,
    .collab-img,
    .logo-left,
    .logo-right {
        display: none;
    }

    .hero-center {
        /* height: auto; */
        width: 100vw;
        margin: 0;
        border-radius: 15px;
        padding: 90px 20px 0 20px;
    }

    .hero-text-wrapper {
        position: static;
        transform: none;
        width: 100%;
        padding-top: 0;
        margin: 0;
    }

    #center-button {
        flex-direction: column;
        gap: 10px;
    }

    #get-started-center,
    #view-demo {
        width: 100%;
        max-width: 300px;
    }

    .hero-center-img {
        height: 90%;
        width: 90%;

    }

    /* About-section  */
    .about {

        flex-direction: column;
        padding: 60px 20px 0 20px;
        align-items: center;
        width: 100%;
        /* text-align: center; */
    }

    .about-left {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .about h1,
    .about p {
        width: 100%;
    }

    .about-right {
        width: 100%;
        height: 100%;
        padding: 0;
        margin-top: 30px;

        /* text-align: center; */
    }

    .about-right img {
        width: 100%;
        /* height: 130%; */
    }

    /* smart-fast section  */

    .smart-fast h1 {
        font-size: 32px;
        width: 100%;
        line-height: 1.3;
    }

    .smart-fast h4 {
        font-size: 14px;
        line-height: 1.2;
    }

    .smart-cards {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 20px 0;
    }

    .smart-fast .cards {
        width: 90%;
        height: auto;
        padding: 20px 10px;
    }

    .smart-fast .cards img {
        margin: 20px auto 20px auto;
    }

    .smart-fast .cards p {
        width: 100%;
        margin: 0 10px 20px;
    }

    /* Product-section  */

    .product-container {
        flex-direction: column;
        padding: 90px 20px 20px 20px;

    }

    .product-content .gradient-text {
        font-size: 48px;
        margin-top: 15px;
    }

    .product-content p {
        width: 90%;
        margin-top: 15px;
    }

    .button-wrapper {
        align-items: center;
        justify-content: center;
    }

    .product-content {
        align-items: center;
    }

    .product-content,
    .product-image {
        width: 100%;
        text-align: center;
    }

    .features-grid {
        margin-top: 0px;
        padding: 20px;
        width: 100%;
    }

    .feature-box {
        /* border-right: none !important; */
        /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
        border-left: none;
        align-items: center;
        padding: 20px;

    }

    .feature-box p {
        text-align: center;
    }


    /* bg-section  */
    .bg {
        z-index: 0;
        padding: 40px 20px;
        /* justify-content: center; */
        height: 90%;
        width: 100%;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;


        /* background-size: cover; */
    }

    .bg::before {
        content:'' ;
        position: absolute;
        inset:0;
        background: rgba(255, 255, 255, 0.3);
        /* Black overlay - adjust opacity if needed */
        z-index:1;
    }


    .bg h1 {
        font-size: 30px !important;

        text-align: center;
        z-index:2;
        /* width: 50%; */
    }

    /* system-section  */
    .system {
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        padding: 20px;
        /* background-position:center; */
    }

    .system .left {
        margin: 20px 0;
    }

    .system .left h1 {
        font-size: 40px;
    }

    /* .system span{
        margin: 4px;
        font-size: 12px;
    }
    .system .left h4{
        font-size: 12px;
    } */

    .system .left p {
        text-align: center;
    }

    .card-container {
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .system-card {
        flex-grow: 1;
        height: auto;
    }

    .system-card p {
        font-size: 14px;
    }

    .card-top {
        flex-direction: column;
    }

    /* why-section  */

    .why {
        display: none;
    }

    /* .why .left,
    .why .right {
        display: none;
    } */

    /* .why-card{
        position: static;
    } */



    /* customer-section  */

    .customer-left,
    .customer-right {
        display: none;
    }

    .customer-center {
        /* justify-content: center; */
        width: 100vw;
        margin: 0;
        padding: 90px 20px;



    }

    .customer-center-text {
        margin: 0 20px;
    }


    .customer-center h1 {
        width: 100%;
        height: auto;
        font-size: 40px;
        line-height: 1.2;
    }


    .customer-cards {
        position: static;
        flex-direction: column;
    }

    .customer-card {
        position: static;
        /* Rectangle 18 */
        /* position: absolute; */
        padding: 30px;
        width: 90vw;
        height: auto;
        background: #FFFFFF;
        box-shadow: 0px 4px 15px rgba(24, 27, 52, 0.05);
        border-radius: 15px;

    }

    .see-all-stories {
        /* align-content: center; */
        /* position: static; */
        /* margin-top: 200px; */
        /* bottom: 20px; */

    }

    /* centers-section  */

    .centers {
        /* height: max-content; */
        flex-direction: column;
        gap: 30px;
        overflow: hidden;
    }

    .centers .left {
        margin: 0;
        padding: 90px 20px;
    }

    .centers .left h1 {
        font-size: 38px;
        font-weight: 800;
        width: 90vw;
        height: auto;
    }

    .centers .right {
        /* width: 100%; */
        /* background-color: gray; */
        /* height: 100%; */
        overflow: hidden;

    }

    .centers .right img {
        width: 50%;
        height: 50%;
        object-fit: cover;
        /* object-view-box: content-box; */
    }

    /* media-section  */

    .media-bg .right,
    .media-bg .left {
        display: none;
    }

    .media-bg .center {
        padding: 90px 20px 40px 20px;

        width: 100vw;
        margin-left: 0;
        margin-right: 0;
    }

    .media-bg .text-center {
        align-items: center;
    }

    .media-cards {
        flex-direction: column;
    }

    /* .media-bg .center h4 {
        font-size: 12px;
    }

    .media-section span {
        color: #1F252B;
        margin: 4px;
        font-size: 12px;
    } */

    .media-bg .center h1 {
        width: 100%;
        height: auto;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 800;
    }

    .media-cards {
        /* width: 100%; */
        position: static;
        margin-top: 30px;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
    }

    .left-media-card {
        width: 100%;
        /* height: 295px; */
        height: auto;
        /* max-width: 350px; */

    }

    .left-media-card .card-img {
        width: 100%;
        /* height: auto; */
        height: 300px;
        margin: 0;
        object-fit: cover;
        border-radius: 0;
    }

    .left-media-card .card-content {
        padding: 20px;

    }

    .right-media-card {
        width: 100%;
        /* max-width: 350px; */
        gap: 20px;
    }

    .right-media-card1,
    .right-media-card2 {
        height: auto;
        flex-direction: column;
    }


    .right-media-card .card-img {
        width: 100%;
        height: 300px;
        margin: 0;
        border-radius: 15px 15px 0 0;
    }

    .card-content h3 {
        width: 100%;
        height: auto;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .right-media-card .card-content h3 {
        margin-bottom: 20px;
    }

    .read-more-btn {
        margin-bottom: 40px;
        /* margin-bottom: 20px; */
    }

    .read-more {
        margin-top: 30px;
    }

    /* contact-section  */
    .contacts {
        flex-direction: column;
        align-items: center;
        padding: 60px 20px 0 20px;
        gap: 40px;
    }

    /* .contacts .left h1 {

    } */

    .contacts form {
        gap: 16px;
    }

    .contacts .left img {
        display: none;

    }

    .contacts .left h1 {
        font-size: 48px;
    }

    .contacts .right {
        width: 90%;
    }

    .contacts .see-all {
        align-self: center;
    }

    /* footer-section */
    .footer-wrapper::before {
        display: none;
    }

    .footer-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        /* justify-content: center; */
        padding: 40px;
    }

}

/* for the  product -section  */
@media (max-width: 480px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-box {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .bg h1 {
        font-size: 26px;
        line-height: 1.3;
    }

    .bg {
        background-size: contain;
        background-position: top center;
    }


}

/* @media (max-width: 768px) { */
/* Customer section responsive styles */
/* .customer-center-text {
        margin: 0 100px;
    }
    
    .customer-center h1 {
        width: 100%;
        height: auto;
        font-size: 42px;
        line-height: 1.2;
    }
} */

/* menu-toggle  */
/* Hide by default */
.mobile-menu {
    display: none;
    flex-direction: column;
    align-items: center;
    background-color: white;
    position: absolute;
    top: 70px;
    /* adjust if navbar height is different */
    right: 20px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 99;
}

/* Show when active */
.mobile-menu.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Hide for large screens */
/* @media (min-width: 768px) {
    .mobile-menu {
        display: none !important;
    }
} */