/*--------------------- Responsive (Start) ---------------------*/

@media (max-width: 1350px) {
    .header .logo-name {
        display: none;
    }

    .header .container {
        gap: 1rem;
    }

    .header .navbar {
        gap: 1rem;
    }
}

@media (max-width: 980px) {

    html {
        font-size: 75%;
    }

    .header .navbar {
        display: none;
    }

    .header #menu-btn {
        display: initial;
    }

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        background: #ffffff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem;
    }

    .mobile-menu-header .logo {
        max-width: 140px;
        display: flex;
        align-items: center;
    }

    .mobile-menu-header .logo img {
        width: 100%;
        height: auto;
        display: block;
    }

    .close-mobile-menu {
        font-size: 1.5rem;
        cursor: pointer;
        color: #333;
    }

    .mobile-menu {
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 10000;
        max-height: 80vh;
        overflow-y: auto;
        background: var(--secondary-color);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        border-top: 0.2rem solid rgba(255, 255, 255, 0.2);
        border-bottom: 0.2rem solid rgba(0, 0, 0, 0.2);
        padding: 2rem;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    .mobile-menu.active {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .mobile-navbar .main-nav-link {
        background-color: var(--main-color);
        color: var(--white);
        font-size: 2rem;
        font-weight: bold;
        cursor: pointer;
        width: 100%;
        padding: 1.5rem 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 1rem;
    }

    .mobile-navbar .main-nav-link a {
        color: var(--white);
    }

    .mobile-navbar .sub-nav-link {
        padding-left: 2rem;
        padding-bottom: 1rem;
        background: var(--white);
        display: none;
        -webkit-transition: all 0s;
        -moz-transition: all 0s;
        -o-transition: all 0s;
        transition: all 0s;
    }

    .mobile-navbar .sub-nav-link a {
        color: var(--grey);
        display: block;
        padding: 1rem 0rem;
        font-size: 1.8rem;
        font-weight: 500;
        border-bottom: 0.2rem solid rgba(0, 0, 0, 0.2);
    }

    .mobile-navbar .sub-nav-link a:hover {
        color: var(--main-color);
        border-color: var(--main-color);
    }

    .mobile-sector-group {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding: 0.8rem 0;
    }

    .mobile-sector-group .sector-toggle {
        width: 100%;
        background: none;
        border: none;
        color: var(--secondary-color);
        font-size: 1.8rem;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        cursor: pointer;
        text-align: left;
    }

    .mobile-sector-group .sector-toggle i {
        transition: transform 0.2s ease;
        color: var(--secondary-color);
    }

    .mobile-sector-group.active .sector-toggle i {
        transform: rotate(90deg);
    }

    .mobile-sector-group .sector-services {
        display: none;
        padding-left: 1rem;
        margin-top: 0.5rem;
    }

    .mobile-sector-group .sector-services a {
        display: block;
        padding: 0.6rem 0;
        color: var(--secondary-color);
        opacity: 0.9;
        font-size: 1.7rem;
        text-decoration: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .mobile-sector-group .sector-services a:hover {
        color: var(--main-color);
        opacity: 1;
    }

    .mobile-menu::-webkit-scrollbar {
        width: 0.8rem;
    }

    .mobile-menu::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        background-color: var(--main-color);
    }

    .mobile-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .blog.grid,
    .blog.list {
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    .shop {
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    .footer .box-container {
        -ms-grid-columns: (minmax(33rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    }

    .team .box-container {
        -ms-grid-columns: (minmax(28rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }

    .page-single {
        gap: 3rem;
    }

    .home-slider .swiper-button-next,
    .home-slider .swiper-button-prev {
        display: none;
    }

    .shop,
    .blog.grid,
    .blog.list {
        gap: 3rem;
    }

    .header .header-contacts {
        display: none;
    }

    .header .header-1 {
        justify-content: flex-end;
    }

    .cart .cart-bottom {
        gap: 2rem;
    }

    .gallery .box-container {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'gallery-1 gallery-4'
            'gallery-2 gallery-4'
            'gallery-5 gallery-3'
            'gallery-5 gallery-6 '
            'gallery-7 gallery-8';
    }

    .project-item {
        width: 50%;
    }

}

@media (max-width: 768px) {

    html {
        font-size: 65%;
    }

    section {
        padding: 3rem 2rem;
    }

    .header .header-1 {
        padding: 0.5rem 2rem;
    }

    .header .header-2 {
        padding: 0rem 2rem;
    }

    .footer .box-container {
        padding: 2rem;
    }

    .search-container {
        right: 1rem;
    }

    .home-item {
        /* min-height handled in header.php */
    }

    .home-item .content {
        padding: 10rem 2rem;
    }

    .product-info .leave-reply {
        width: 100%;
    }

    .cart .coupon-container {
        width: 100%;
    }

}

@media (max-width: 768px) {

    .call-us-box {
        display: none;
    }

    .home-item .content .text {
        width: 100%;
    }

    .home-item .content h3 {
        font-size: 4.5rem;
    }

}

@media (max-width: 450px) {

    html {
        font-size: 50%;
    }

    .header .btn {
        display: none;
    }

    .header .header-1 {
        padding: 0.5rem 1rem;
    }

    .header .header-2 {
        padding: 0rem 1rem;
    }

    section {
        padding: 3rem 1rem;
    }

    .footer-item>p {
        font-size: 1.8rem;
    }

    .footer-item .info a {
        font-size: 2rem;
    }

    .home-item {
        /* min-height handled in header.php */
    }

    .home-item .content {
        padding: 10rem 1rem;
    }

    .home-item .content h3 {
        font-size: 3.2rem;
    }

    .home-item .content p {
        font-size: 1.4rem;
    }

    .team-single .skills {
        gap: 0rem;
    }

    .project-item {
        width: 100%;
    }

    .product-info .additional-info h3 {
        width: auto;
    }

    .comment .comment-content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
    }

    .comment.reply .comment-content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 15rem;
        flex: 1 1 15rem;
    }

    .form .input-box,
    .dark-form .input-box {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .account-form {
        padding: 4.5rem 3rem;
        max-width: 100%;
    }

    .dark-form .input-box .input-field,
    .dark-form .select {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 25rem;
        flex: 1 1 25rem;
    }

    .gallery .box-container {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            'gallery-1'
            'gallery-2'
            'gallery-3'
            'gallery-4'
            'gallery-5'
            'gallery-6'
            'gallery-7'
            'gallery-8';
    }

    .gallery-item {
        height: 30rem !important;
    }

    .team-single .image {
        width: 100%;
    }

    .mobile-menu {
        padding: 1rem;
    }

    .shop .product-container.list .product-item {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .shop .product-container.list .product-item .image {
        min-height: 15rem;
        width: 100%;
    }

    .shop .product-container.list .product-item .image img {
        height: 30rem;
        width: 100%;
        object-fit: cover;
    }

    .shop .product-container.list .product-item {
        gap: 1rem;
    }

    .cart-total {
        width: 100%;
    }

    .cart .cart-summary {
        width: 100%;
    }

}

/*--------------------- Theme Toggle and Active Link Styles ---------------------*/
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 4rem;
    height: 4rem;
    padding: 0 1rem;
    border: 0.15rem solid var(--main-color);
    border-radius: 0.8rem;
    background: transparent;
    color: var(--main-color);
    cursor: pointer;
    transition: all 0.25s ease;
}

.theme-toggle i {
    font-size: 1.4rem;
}

.theme-toggle span {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.theme-toggle:hover {
    background: var(--main-color);
    color: var(--white);
}

.mobile-menu-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-btn.active,
.main-nav-link.active>.nav-btn {
    background: var(--main-color);
    color: #fff;
}

.dropdown-content a.active,
.sub-nav-link a.active {
    color: var(--main-color);
    font-weight: 700;
}

.mobile-navbar .main-nav-link.active {
    background-color: rgba(255, 255, 255, 0.14);
}

.mobile-navbar .sub-nav-link a.active {
    color: var(--main-color);
    font-weight: 700;
}

html.dark {
    background: #141723;
    color: #e7ebf5;
}

html.dark body {
    background: #141723;
    color: #e7ebf5;
}

html.dark .header,
html.dark .mobile-menu {
    background: #121826;
}

html.dark .header-1 {
    background: #101521;
}

html.dark .header-2 {
    background: #111627;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
}

html.dark .navbar .nav-btn,
html.dark .mobile-navbar .nav-btn,
html.dark .mobile-navbar .sector-toggle,
html.dark .mobile-navbar .sub-nav-link a,
html.dark .dropdown-content a {
    color: #e7ebf5;
}

html.dark .nav-btn.active,
html.dark .dropdown-content a.active,
html.dark .sub-nav-link a.active {
    color: var(--main-color);
}

html.dark .mobile-navbar .main-nav-link {
    background-color: #172039;
}

html.dark .mobile-navbar .sub-nav-link {
    background: #0f1323;
}

html.dark .mobile-sector-group {
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark .sector-services a {
    color: #cbd4e6;
}

html.dark .theme-toggle {
    border-color: #7d8df2;
}

html.dark .theme-toggle:hover {
    background: #7d8df2;
    color: #fff;
}

html.dark .dropdown-content,
html.dark .sub-services {
    background-color: #111827;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html.dark .dropdown-content a,
html.dark .sub-services li a {
    color: #e7ebf5;
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark .dropdown-content a:hover,
html.dark .sub-services li a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #f1f5fb;
}

html.dark .footer {
    background: #0f172b;
}

html.dark .footer .content {
    background-color: #0b1224;
}

html.dark .footer-item p,
html.dark .footer-item .info a,
html.dark .footer-item .info span {
    color: #d1d9ea;
}

html.dark .footer-item .social a {
    background-color: #14223f;
    border-color: #18418f;
}

html.dark .footer-item .social a:hover i {
    color: #f7c378;
}

html.dark .page-info,
html.dark .blog-info,
html.dark .page-info .content,
html.dark .page-info .page-gallery,
html.dark .page-info .sub-section,
html.dark .page-info .sub-section p,
html.dark .page-info .sub-section ul li,
html.dark .page-info .details,
html.dark .page-info .details .category,
html.dark .page-info .details h3,
html.dark .page-info .main-heading,
html.dark .page-info .sub-heading {
    color: #d1d9ea;
}

html.dark .page-info .important {
    color: #f1f5fb !important;
}

html.dark .page-info .sub-section ul li {
    color: #cfd7e8;
}

html.dark .page-info p,
html.dark .page-info .sub-section p,
html.dark .page-info .details h3 span {
    color: #d1d9ea;
}

html.dark .page-info .page-gallery img {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
}

html.dark .mobile-menu-header {
    background: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html.dark .mobile-menu-header .logo,
html.dark .mobile-menu-header-actions,
html.dark .mobile-menu-header .close-mobile-menu {
    color: #e7ebf5;
}

html.dark .call-us-box .call-text span {
    color: #9fb1d3;
}

html.dark .call-us-box .call-text strong {
    color: #ffffff;
}

/* Dark Mode Contact Page Styles */
html.dark .contact .contact-info .info-item h3 {
    color: #ffffff;
}

html.dark .contact .contact-info .info-item p,
html.dark .contact .contact-info .info-item .contact-link {
    color: #cbd4e6;
}

html.dark .contact .contact-info .info-item .contact-link:hover {
    color: var(--main-color);
}

/* Form inputs high contrast and focus state */
html.dark .contact .dark-form.light-form .input-field {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

html.dark .contact .dark-form.light-form .input-field:focus-within {
    border-color: var(--main-color);
    box-shadow: 0 0 12px rgba(247, 148, 30, 0.4);
    background-color: rgba(0, 0, 0, 0.2);
}

html.dark .contact .dark-form.light-form .input-field label {
    color: var(--main-color);
}

html.dark .contact .dark-form.light-form .box {
    color: #ffffff;
}

html.dark .contact .dark-form.light-form .box::placeholder {
    color: #8fa0c1;
    opacity: 1;
}

/*----- Global Components Dark Mode -----*/
html.dark .feature-item,
html.dark .service-item,
html.dark .project-item .content,
html.dark .blog-item,
html.dark .testi-item,
html.dark .process-step,
html.dark .gallery-item .content,
html.dark .counting .box,
html.dark .pages-no .item,
html.dark .client-item.bg-white {
    background-color: #1a2235 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.dark .feature-item p,
html.dark .service-item p,
html.dark .blog-item p,
html.dark .testi-item p,
html.dark .process-step p,
html.dark .about .content p,
html.dark .why-us .content p,
html.dark .banner .content p,
html.dark .blog-item .date,
html.dark .project-item .content h3,
html.dark .counting .box h3,
html.dark .pages-no .item a,
html.dark .why-us .features li span,
html.dark .about-points li p {
    color: #cbd4e6 !important;
}

html.dark .feature-item h3,
html.dark .service-item h3,
html.dark .project-item .content h4,
html.dark .blog-item .content .main-heading,
html.dark .testi-item h3,
html.dark .testi-item h4,
html.dark .process-step h4,
html.dark .heading h2,
html.dark .about .content h2,
html.dark .why-us .content h2,
html.dark .counting .box .count,
html.dark .banner .content h2,
html.dark .about-points li h3 {
    color: #ffffff !important;
}

html.dark .blog-item .content .category,
html.dark .heading span {
    color: var(--main-color) !important;
}

html.dark .blog-item .content h3 span {
    color: #cbd4e6 !important;
}

html.dark .pages-no .item.active {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

html.dark .pages-no .item.active a {
    color: #fff !important;
}

html.dark .client-item img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/*--------------------- Responsive (End) ---------------------*/