/*=========================================================
 SURYA LIGHTS
 RESPONSIVE STYLESHEET
=========================================================*/

/*=========================================================
 LARGE LAPTOP
=========================================================*/

@media (max-width:1400px) {

    .hero-wrapper {

        grid-template-columns: 1fr 1fr;

        gap: 50px;

    }

    .hero-title {

        font-size: 56px;

    }

    .products-grid {

        grid-template-columns: repeat(3, 1fr);

    }

    .categories-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}

/*=========================================================
 LAPTOP
=========================================================*/

@media (max-width:1200px) {

    .container {

        width: 94%;

    }

    .navbar {

        gap: 28px;

    }

    .nav-menu {

        gap: 22px;

    }

    .hero-title {

        font-size: 48px;

    }

    .hero-description {

        font-size: 17px;

    }

    .hero-circle {

        width: 300px;

        height: 300px;

    }

    .hero-circle img {

        width: 180px;

    }

    .floating-card {

        width: 145px;

        height: 145px;

        padding: 18px;

    }

    .process-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .why-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

/*=========================================================
 TABLET
=========================================================*/

@media (max-width:992px) {

    section {

        padding: 80px 0;

    }

    .top-bar {

        display: none;

    }

    .header {

        height: 80px;

    }

    .nav-menu {

        display: none;

    }

    .menu-toggle {

        display: flex;

    }

    .header-actions .btn {

        display: none;

    }

    .hero {

        padding: 80px 0;

        min-height: auto;

    }

    .hero-wrapper {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-content {

        max-width: 100%;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-features {

        justify-content: center;

    }

    .hero-image {

        margin-top: 60px;

        min-height: 520px;

    }

    .categories-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .products-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .oem-wrapper {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .testimonial-grid {

        grid-template-columns: 1fr;

    }

    .cta-wrapper {

        flex-direction: column;

        text-align: center;

        padding: 60px 40px;

    }

    .footer-bottom {

        flex-direction: column;

        gap: 20px;

    }

    .footer-bottom {

        padding: 68px 0 26px;

    }

    .footer-bottom::before {

        top: 26px;

        left: 50%;

        transform: translateX(-50%);

        white-space: nowrap;

        font-size: 21px;

    }

}

/*=========================================================
 MOBILE
=========================================================*/

@media (max-width:768px) {

    section {

        padding: 70px 0;

    }

    .section-heading {

        margin-bottom: 50px;

    }

    .section-heading h2 {

        font-size: 34px;

    }

    .hero-title {

        font-size: 38px;

    }

    .hero-description {

        font-size: 16px;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    .hero-buttons .btn {

        width: 100%;

    }

    .hero-features {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

    .hero-image {

        min-height: 420px;

    }

    .hero-circle {

        width: 230px;

        height: 230px;

    }

    .hero-circle img {

        width: 150px;

    }

    .floating-card {

        width: 110px;

        height: 110px;

        padding: 14px;

        border-radius: 18px;

    }

    /* Floating positions */

    .card-1 {

        top: 0;

        left: 0;

    }

    .card-2 {

        top: 30px;

        right: 0;

    }

    .card-3 {

        top: 170px;

        left: -5px;

    }

    .card-4 {

        top: 170px;

        right: -5px;

    }

    .card-5 {

        bottom: 0;

        left: 30px;

    }

    .card-6 {

        bottom: 0;

        right: 30px;

    }

    .categories-grid {

        grid-template-columns: 1fr;

    }

    .products-grid {

        grid-template-columns: 1fr;

    }

    .process-grid {

        grid-template-columns: 1fr;

    }

    .why-grid {

        grid-template-columns: 1fr;

    }

    .stats-grid {

        grid-template-columns: 1fr;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .search-box {

        flex-direction: column;

    }

    .search-box button {

        width: 100%;

        border-radius: 12px;

    }

    .mobile-menu {

        width: 100%;

    }

}

/*=========================================================
 SMALL MOBILE
=========================================================*/

@media (max-width:480px) {

    .container {

        width: 92%;

    }

    .header {

        height: 72px;

    }

    .logo img {

        width: 170px;

    }

    .hero-title {

        font-size: 32px;

    }

    .hero-description {

        font-size: 15px;

    }

    .hero-badge {

        font-size: 12px;

        padding: 10px 16px;

    }

    .hero-circle {

        width: 190px;

        height: 190px;

    }

    .hero-circle img {

        width: 125px;

    }

    .floating-card {

        width: 95px;

        height: 95px;

        padding: 12px;

    }

    .cta-wrapper {

        padding: 40px 25px;

    }

    .cta-content h2 {

        font-size: 30px;

    }

    .stat-card h2 {

        font-size: 42px;

    }

    .scroll-top {

        right: 20px;

        bottom: 20px;

    }

}

/* =========================================================
   LOGO FIT FIX
   The supplied logo has large white margins around it.
   This keeps the complete logo inside the header so it
   never overlaps the blue contact bar.
========================================================= */

.header {
    height: 144px;
}

.logo {
    width: 180px;
    height: 140px;
    flex: 0 0 180px;
    overflow: hidden;
    position: relative;
}

.logo img,
.header.scrolled .logo img {
    width: 180px;
    max-width: none;
    height: auto;
    transform: none;
}

@media (max-width:992px) {
    .header {
        height: 100px;
    }

    .logo {
        width: 100px;
        height: 96px;
        flex-basis: 100px;
    }

    .logo img,
    .header.scrolled .logo img {
        width: 95px;
        transform: none;
    }
}

@media (max-width:480px) {
    .header {
        height: 82px;
    }

    .logo {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .logo img,
    .header.scrolled .logo img {
        width: 75px;
        transform: none;
    }
}

/* Make the Surya Lights mark clearly visible on the dark footer. */
.footer-logo {
    display: grid;
    place-items: center;
    width: 196px;
    height: 158px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(232, 189, 105, .65);
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #f4ead8);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.footer-logo img {
    width: 260px;
    max-width: none;
    max-height: none;
    margin: 0;
    transform: translate(-38px, -45px);
}

@media (max-width:640px) {
    .footer-logo {
        width: 160px;
        height: 130px;
    }

    .footer-logo img {
        width: 220px;
        transform: translate(-32px, -38px);
    }
}

/* Transparent Surya Lights logo: no white card in the dark header or footer. */
.products-page .logo,
.product-details-page .logo {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

.products-page .logo img,
.product-details-page .logo img,
.products-page .header.scrolled .logo img,
.product-details-page .header.scrolled .logo img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .85)) drop-shadow(0 0 8px rgba(232, 189, 105, .18));
}

.products-page .footer-logo,
.product-details-page .footer-logo {
    display: block;
    width: 210px;
    height: auto;
    margin: 0 0 24px;
    overflow: visible;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.products-page .footer-logo img,
.product-details-page .footer-logo img {
    display: block;
    width: 210px;
    max-width: 100%;
    height: auto;
    margin: 0;
    transform: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .85)) drop-shadow(0 0 10px rgba(232, 189, 105, .18));
}

@media(max-width:640px) {

    .products-page .footer-logo,
    .product-details-page .footer-logo {
        width: 170px;
        height: auto;
    }

    .products-page .footer-logo img,
    .product-details-page .footer-logo img {
        width: 170px;
    }
}

/* A soft dark-gold halo makes the original transparent Surya logo readable on black. */
.products-page .logo,
.product-details-page .logo {
    isolation: isolate;
}

.products-page .logo::before,
.product-details-page .logo::before {
    content: "";
    position: absolute;
    inset: -18px -24px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(202, 145, 38, .74) 0%, rgba(118, 75, 17, .5) 34%, rgba(28, 18, 5, .25) 57%, transparent 75%);
    filter: blur(8px);
}

.products-page .footer-logo,
.product-details-page .footer-logo {
    position: relative;
    isolation: isolate;
}

.products-page .footer-logo::before,
.product-details-page .footer-logo::before {
    content: "";
    position: absolute;
    inset: -26px -32px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(190, 127, 26, .78) 0%, rgba(101, 61, 11, .56) 36%, rgba(19, 13, 4, .35) 62%, transparent 78%);
    filter: blur(12px);
}

/* The header and footer now use the full patterned panel; no logo-only glow. */
.products-page .logo::before,
.product-details-page .logo::before,
.products-page .footer-logo::before,
.product-details-page .footer-logo::before {
    content: none !important;
}

.products-page .logo img,
.product-details-page .logo img,
.products-page .header.scrolled .logo img,
.product-details-page .header.scrolled .logo img,
.products-page .footer-logo img,
.product-details-page .footer-logo img {
    filter: brightness(1.35) contrast(1.45) saturate(1.2) drop-shadow(0 1px 0 rgba(255, 239, 189, .55));
}

/* Home, About and Catalogue use the same clean Surya logo layout as Products.
   This must come after the older global footer rule, which was cropping the logo. */
.site-footer .footer-logo {
    display: block;
    width: 210px;
    height: auto;
    margin: 0 0 24px;
    overflow: visible;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.site-footer .footer-logo img {
    display: block;
    width: 210px !important;
    max-width: 100%;
    max-height: none !important;
    height: auto !important;
    margin: 0;
    transform: none !important;
    object-fit: contain;
    filter: none !important;
}

@media (max-width: 640px) {
    .site-footer .footer-logo,
    .site-footer .footer-logo img {
        width: 170px !important;
        height: auto !important;
    }
}

/* One Surya Lights logo layout for every page.  This matches the Products
   page: the complete mark is visible, without a cropped card around it. */
.header .logo {
    display: flex;
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.header .logo img {
    display: block;
    width: 210px !important;
    max-width: 100%;
    max-height: none !important;
    height: auto !important;
    object-fit: contain;
    transform: none !important;
    filter: none !important;
}

.header.scrolled .logo img {
    width: 185px !important;
}

.footer .footer-logo {
    display: block;
    width: 210px !important;
    height: auto !important;
    margin: 0 0 24px;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.footer .footer-logo img {
    display: block;
    width: 210px !important;
    max-width: 100%;
    max-height: none !important;
    height: auto !important;
    margin: 0;
    object-fit: contain;
    transform: none !important;
    filter: none !important;
}

@media (max-width: 640px) {
    .header .logo img,
    .footer .footer-logo,
    .footer .footer-logo img {
        width: 170px !important;
        height: auto !important;
    }

    .header.scrolled .logo img {
        width: 150px !important;
    }
}