@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Great+Vibes&display=swap");

/*=========================================================
 SURYA LIGHTS
 MAIN STYLESHEET
=========================================================*/

/*=========================================================
 TOP BAR
=========================================================*/

.top-bar {

    background: var(--primary);

    height: 42px;

    color: var(--white);

    font-size: var(--fs-sm);

}

.top-bar .container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.top-bar-left,
.top-bar-right {

    display: flex;

    align-items: center;

    gap: 24px;

}

.top-bar a {

    display: flex;

    align-items: center;

    gap: 8px;

    transition: var(--transition);

}

.top-bar a:hover {

    color: var(--secondary);

}

/*=========================================================
 HEADER
=========================================================*/

.header {

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    height: 90px;

    background: rgba(255, 255, 255, .92);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    z-index: var(--z-header);

    border-bottom: 1px solid rgba(0, 0, 0, .05);

    transition: var(--transition);

}

.header.scrolled {

    height: 76px;

    box-shadow: var(--shadow-md);

}

.header .container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

/*=========================================================
 LOGO
=========================================================*/

.logo {

    display: flex;

    align-items: center;

}

.logo img {

    width: 210px;

    transition: var(--transition);

}

.header.scrolled .logo img {

    width: 185px;

}

/*=========================================================
 NAVIGATION
=========================================================*/

.navbar {

    display: flex;

    align-items: center;

    gap: 48px;

}

.nav-menu {

    display: flex;

    align-items: center;

    gap: 36px;

}

.nav-menu li {

    position: relative;

}

.nav-menu a {

    font-size: 15px;

    font-weight: var(--fw-600);

    color: var(--heading);

    transition: var(--transition);

}

.nav-menu a:hover {

    color: var(--primary);

}

.nav-menu a.active {

    color: var(--primary);

}

.nav-menu a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 0;

    height: 3px;

    border-radius: 999px;

    background: var(--secondary);

    transition: var(--transition);

}

.nav-menu a:hover::after,
.nav-menu a.active::after {

    width: 100%;

}

/*=========================================================
 HEADER ACTIONS
=========================================================*/

.header-actions {

    display: flex;

    align-items: center;

    gap: 14px;

}

/*=========================================================
 ICON BUTTON
=========================================================*/

.icon-btn {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--light);

    transition: var(--transition);

}

.icon-btn:hover {

    background: var(--secondary);

    transform: translateY(-3px);

}

/*=========================================================
 PRIMARY BUTTON
=========================================================*/

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px 30px;

    border-radius: 999px;

    font-size: 15px;

    font-weight: var(--fw-600);

    transition: var(--transition);

}

.btn-primary {

    background: var(--primary);

    color: var(--white);

}

.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}

.btn-secondary {

    background: var(--secondary);

    color: var(--black);

}

.btn-secondary:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}

/*=========================================================
 MOBILE MENU BUTTON
=========================================================*/

.menu-toggle {

    display: none;

    width: 46px;

    height: 46px;

    border-radius: 12px;

    background: var(--light);

    align-items: center;

    justify-content: center;

}

.menu-toggle i {

    font-size: 22px;

}

/*=========================================================
 SECTION TITLE
=========================================================*/

.section-heading {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 70px;

}

.section-heading span {

    color: var(--primary);

    text-transform: uppercase;

    font-weight: var(--fw-600);

    letter-spacing: 1px;

}

.section-heading h2 {

    font-size: 42px;

    margin-top: 12px;

    margin-bottom: 20px;

}

.section-heading p {

    font-size: 17px;

    line-height: 1.8;

}

/*=========================================================
 HERO SECTION
=========================================================*/

.hero {

    position: relative;

    min-height: calc(100vh - 132px);

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(circle at top right, #dcecff 0%, transparent 35%),
        radial-gradient(circle at bottom left, #fff3c4 0%, transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

}

.hero::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    background: rgba(10, 77, 155, .05);

    border-radius: 50%;

    top: -250px;

    right: -150px;

    filter: blur(40px);

}

.hero::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    background: rgba(255, 193, 7, .12);

    border-radius: 50%;

    bottom: -180px;

    left: -120px;

    filter: blur(50px);

}

/*=========================================================
 HERO CONTAINER
=========================================================*/

.hero-wrapper {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 70px;

    align-items: center;

    position: relative;

    z-index: 2;

}

/*=========================================================
 HERO CONTENT
=========================================================*/

.hero-content {

    max-width: 700px;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 20px;

    border-radius: 999px;

    background: rgba(10, 77, 155, .08);

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 26px;

}

.hero-title {

    font-size: 64px;

    line-height: 1.08;

    color: var(--heading);

    margin-bottom: 24px;

}

.hero-title span {

    color: var(--primary);

}

.hero-description {

    font-size: 18px;

    line-height: 1.9;

    color: var(--text);

    margin-bottom: 40px;

    max-width: 620px;

}

/*=========================================================
 HERO BUTTONS
=========================================================*/

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

}

/*=========================================================
 HERO FEATURES
=========================================================*/

.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 48px;

}

.hero-feature {

    display: flex;

    align-items: center;

    gap: 12px;

}

.hero-feature i {

    width: 46px;

    height: 46px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: rgba(10, 77, 155, .10);

    color: var(--primary);

    font-size: 18px;

}

.hero-feature span {

    font-size: 15px;

    font-weight: 600;

}

/*=========================================================
 HERO IMAGE
=========================================================*/

.hero-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 650px;

}

/*=========================================================
 CENTER CIRCLE
=========================================================*/

.hero-circle {

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: var(--shadow-lg);

    position: relative;

}

.hero-circle img {

    width: 230px;

    object-fit: contain;

}

/*=========================================================
 FLOATING PRODUCT CARDS
=========================================================*/

.floating-card {

    position: absolute;

    width: 170px;

    height: 170px;

    background: #fff;

    border-radius: 28px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 22px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

}

.floating-card img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}

.floating-card:hover {

    transform: translateY(-10px) scale(1.05);

    box-shadow: var(--shadow-lg);

}

/*=========================================================
 PRODUCT POSITIONS
=========================================================*/

.card-1 {

    top: 10px;

    left: 20px;

}

.card-2 {

    top: 50px;

    right: 10px;

}

.card-3 {

    left: -20px;

    top: 250px;

}

.card-4 {

    right: -20px;

    top: 250px;

}

.card-5 {

    bottom: 20px;

    left: 60px;

}

.card-6 {

    bottom: 20px;

    right: 60px;

}

/*=========================================================
 SCROLL INDICATOR
=========================================================*/

.scroll-indicator {

    position: absolute;

    left: 50%;

    bottom: 30px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

}

.scroll-indicator i {

    font-size: 22px;

}

/*=========================================================
 PRODUCT CATEGORIES
=========================================================*/

.categories {

    background: var(--light);

    position: relative;

}

.categories-grid {

    display: grid;

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

    gap: 30px;

}

/*=========================================================
 CATEGORY CARD
=========================================================*/

.category-card {

    position: relative;

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 35px 28px;

    overflow: hidden;

    transition: var(--transition);

    box-shadow: var(--shadow-sm);

    border: 1px solid transparent;

}

.category-card:hover {

    transform: translateY(-12px);

    box-shadow: var(--shadow-lg);

    border-color: rgba(10, 77, 155, .15);

}

/*=========================================================
 CATEGORY IMAGE
=========================================================*/

.category-image {

    width: 150px;

    height: 150px;

    margin: 0 auto 25px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.category-image img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    transition: var(--transition-slow);

}

.category-card:hover .category-image img {

    transform: scale(1.08);

}

/*=========================================================
 CATEGORY CONTENT
=========================================================*/

.category-content {

    text-align: center;

}

.category-content h3 {

    font-size: 22px;

    margin-bottom: 12px;

    color: var(--heading);

}

.category-content p {

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 22px;

    color: var(--text);

}

/*=========================================================
 CATEGORY BUTTON
=========================================================*/

.category-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--primary);

    font-weight: var(--fw-600);

    transition: var(--transition);

}

.category-link i {

    transition: var(--transition);

}

.category-card:hover .category-link {

    color: var(--primary-dark);

}

.category-card:hover .category-link i {

    transform: translateX(6px);

}

/*=========================================================
 CATEGORY TOP ICON
=========================================================*/

.category-icon {

    position: absolute;

    top: 22px;

    right: 22px;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(10, 77, 155, .08);

    color: var(--primary);

    font-size: 20px;

}

/*=========================================================
 CATEGORY BACKGROUND EFFECT
=========================================================*/

.category-card::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: rgba(10, 77, 155, .04);

    right: -90px;

    top: -90px;

    transition: var(--transition-slow);

}

.category-card:hover::before {

    transform: scale(1.25);

}

/*=========================================================
 CATEGORY HIGHLIGHT
=========================================================*/

.category-card::after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 0;

    background: var(--secondary);

    transition: .4s ease;

}

.category-card:hover::after {

    height: 100%;

}

/*=========================================================
 FEATURED PRODUCTS
=========================================================*/

.featured-products {

    background: var(--white);

    position: relative;

}

.products-grid {

    display: grid;

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

    gap: 30px;

}

/*=========================================================
 PRODUCT CARD
=========================================================*/

.product-card {

    position: relative;

    background: var(--white);

    border-radius: var(--radius-lg);

    overflow: hidden;

    border: 1px solid var(--border);

    transition: var(--transition);

    box-shadow: var(--shadow-sm);

}

.product-card:hover {

    transform: translateY(-12px);

    box-shadow: var(--shadow-lg);

}

/*=========================================================
 PRODUCT IMAGE
=========================================================*/

.product-image {

    position: relative;

    height: 260px;

    background: linear-gradient(180deg,
            #fafcff,
            #f4f7fb);

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}

.product-image img {

    max-width: 78%;

    max-height: 78%;

    object-fit: contain;

    transition: .45s ease;

}

.product-card:hover .product-image img {

    transform: scale(1.08);

}

/*=========================================================
 PRODUCT BADGE
=========================================================*/

.product-badge {

    position: absolute;

    top: 18px;

    left: 18px;

    background: var(--secondary);

    color: var(--black);

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

}

/*=========================================================
 QUICK VIEW
=========================================================*/

.quick-view {

    position: absolute;

    bottom: -50px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--primary);

    color: #fff;

    padding: 12px 24px;

    border-radius: 999px;

    transition: .35s;

    white-space: nowrap;

}

.product-card:hover .quick-view {

    bottom: 18px;

}

/*=========================================================
 PRODUCT BODY
=========================================================*/

.product-body {

    padding: 28px;

}

.product-category {

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.product-title {

    margin-top: 10px;

    margin-bottom: 12px;

    font-size: 21px;

    color: var(--heading);

}

.product-description {

    font-size: 15px;

    line-height: 1.8;

    color: var(--text);

    margin-bottom: 22px;

}

/*=========================================================
 PRODUCT FEATURES
=========================================================*/

.product-features {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 26px;

}

.product-features span {

    background: var(--light);

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 13px;

    color: var(--heading);

}

/*=========================================================
 PRODUCT FOOTER
=========================================================*/

.product-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

}

.product-link {

    color: var(--primary);

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 8px;

}

.product-link i {

    transition: .3s;

}

.product-link:hover i {

    transform: translateX(5px);

}

.whatsapp-link {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: #25D366;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .35s;

}

.whatsapp-link:hover {

    transform: scale(1.08);

}

/*=========================================================
 VIEW ALL BUTTON
=========================================================*/

.view-all {

    margin-top: 60px;

    display: flex;

    justify-content: center;

}

/*=========================================================
 OEM MANUFACTURING
=========================================================*/

.oem {

    position: relative;

    background: var(--light);

}

.oem-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}

.oem-image {

    position: relative;

}

.oem-image img {

    width: 100%;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

}

.oem-content span {

    display: inline-block;

    color: var(--primary);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 18px;

}

.oem-content h2 {

    font-size: 44px;

    margin-bottom: 24px;

}

.oem-content p {

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 30px;

}

.oem-list {

    display: grid;

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

    gap: 20px;

    margin-bottom: 35px;

}

.oem-list li {

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 500;

}

.oem-list i {

    color: var(--primary);

    font-size: 18px;

}

/*=========================================================
 WHY CHOOSE US
=========================================================*/

.why-us {

    background: #fff;

}

.why-grid {

    display: grid;

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

    gap: 30px;

}

.why-card {

    padding: 40px 30px;

    border-radius: var(--radius-lg);

    background: var(--white);

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

    text-align: center;

}

.why-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.why-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 24px;

    border-radius: 50%;

    background: rgba(10, 77, 155, .08);

    display: flex;

    justify-content: center;

    align-items: center;

}

.why-icon i {

    color: var(--primary);

    font-size: 34px;

}

.why-card h3 {

    margin-bottom: 16px;

    font-size: 24px;

}

.why-card p {

    line-height: 1.8;

}

/*=========================================================
 COMPANY STATS
=========================================================*/

.stats {

    background: var(--primary);

    color: #fff;

}

.stats-grid {

    display: grid;

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

    gap: 40px;

}

.stat-card {

    text-align: center;

}

.stat-card h2 {

    font-size: 56px;

    color: #fff;

    margin-bottom: 10px;

}

.stat-card p {

    color: rgba(255, 255, 255, .85);

    font-size: 17px;

}

/*=========================================================
 MANUFACTURING PROCESS
=========================================================*/

.process {

    background: var(--light);

    position: relative;

}

.process-grid {

    display: grid;

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

    gap: 32px;

}

.process-card {

    position: relative;

    background: #fff;

    padding: 40px 28px;

    border-radius: var(--radius-lg);

    text-align: center;

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

}

.process-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.process-number {

    position: absolute;

    top: 20px;

    right: 22px;

    font-size: 42px;

    font-weight: 800;

    color: rgba(10, 77, 155, .08);

}

.process-icon {

    width: 90px;

    height: 90px;

    margin: 0 auto 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(10, 77, 155, .08);

}

.process-icon i {

    font-size: 36px;

    color: var(--primary);

}

.process-card h3 {

    margin-bottom: 16px;

    font-size: 24px;

}

.process-card p {

    line-height: 1.8;

}

/*=========================================================
 TESTIMONIALS
=========================================================*/

.testimonials {

    background: #fff;

}

.testimonial-grid {

    display: grid;

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

    gap: 30px;

}

.testimonial-card {

    background: #fff;

    padding: 35px;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

}

.testimonial-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.testimonial-stars {

    display: flex;

    gap: 5px;

    margin-bottom: 20px;

    color: var(--secondary);

}

.testimonial-text {

    line-height: 1.9;

    margin-bottom: 30px;

}

.testimonial-user {

    display: flex;

    align-items: center;

    gap: 15px;

}

.testimonial-user img {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    object-fit: cover;

}

.testimonial-user h4 {

    font-size: 18px;

}

.testimonial-user span {

    font-size: 14px;

    color: var(--text);

}

/*=========================================================
 CTA
=========================================================*/

.cta {

    background: linear-gradient(135deg,
            var(--primary),
            var(--primary-dark));

    color: #fff;

    border-radius: 40px;

    overflow: hidden;

}

.cta-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    padding: 70px;

}

.cta-content h2 {

    color: #fff;

    font-size: 46px;

    margin-bottom: 20px;

}

.cta-content p {

    color: rgba(255, 255, 255, .88);

    max-width: 650px;

    line-height: 1.9;

}

.cta-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

/*=========================================================
 FOOTER
=========================================================*/

.footer {

    background: #0f172a;

    color: #fff;

    padding-top: 90px;

}

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.3fr;

    gap: 50px;

}

.footer-logo img {

    width: 220px;

    margin-bottom: 24px;

}

.footer p {

    color: rgba(255, 255, 255, .75);

    line-height: 1.9;

}

.footer h3 {

    color: #fff;

    margin-bottom: 24px;

    font-size: 22px;

}

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.footer-links a {

    color: rgba(255, 255, 255, .75);

    transition: var(--transition);

}

.footer-links a:hover {

    color: var(--secondary);

    padding-left: 8px;

}

.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.footer-contact div {

    display: flex;

    gap: 14px;

    align-items: flex-start;

}

.footer-contact i {

    color: var(--secondary);

    margin-top: 4px;

}

.footer-bottom {

    margin-top: 70px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    min-height: 92px;

    padding: 28px 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: rgba(255, 255, 255, .65);

}

/* Shared footer signature — appears automatically on every page. */
.footer-bottom::before {

    content: "❤️  BLESSED BY MAA";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: #efc46d;

    font-family: "Great Vibes", cursive;

    font-size: clamp(26px, 2.25vw, 39px);

    font-weight: 400;

    letter-spacing: .04em;

    line-height: 1;

    text-transform: none;

    text-shadow: 0 1px 12px rgba(220, 161, 49, .18);

}

.footer-bottom {

    position: relative;

}

/* A clean white footer keeps the original Surya logo and all contact text clear. */
.footer {
    background: #fffdf8;
    color: #251a0f;
    border-top: 1px solid #dfb65f;
}

.footer p,
.footer-links a,
.footer-contact span,
.footer-contact a {
    color: #4b3928;
}

.footer h3 {
    color: #251a0f;
}

.footer-links a:hover {
    color: #9b691a;
}

.footer-contact i {
    color: #b77b1d;
}

.footer-logo img {
    filter: none;
}

.footer-social a {
    background: #2a1b0d;
    color: #f1c665;
}

.footer-bottom {
    border-top-color: rgba(133, 89, 19, .24);
    color: #4b3928;
}

.footer-bottom::before {
    content: "❤️ Blessed By Maa";
    color: #70480e;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-shadow: none;
}

.footer-compact-address {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 720px;
    padding-top: 34px;
    color: #4b3928;
    line-height: 1.7;
}

.footer-compact-address i {
    margin-top: 5px;
    color: #b77b1d;
}

.footer-social {

    display: flex;

    gap: 14px;

}

.footer-social a {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .08);

}

.footer-social a:hover {

    background: var(--secondary);

    color: #111;

}

/*=========================================================
 SEARCH POPUP
=========================================================*/

.search-popup {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .65);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

    z-index: var(--z-modal);

}

.search-popup.active {

    opacity: 1;

    visibility: visible;

}

.search-box {

    width: min(90%, 650px);

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow: var(--shadow-xl);

}

.search-box input {

    flex: 1;

    font-size: 18px;

    padding: 14px;

}

.search-box button {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    font-size: 20px;

}

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

.mobile-menu {

    position: fixed;

    top: 0;

    right: -100%;

    width: 320px;

    height: 100vh;

    background: #fff;

    transition: .4s ease;

    z-index: 9999;

    box-shadow: -10px 0 40px rgba(0, 0, 0, .12);

    padding: 40px 30px;

}

.mobile-menu.active {

    right: 0;

}

.mobile-menu .close-menu {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: var(--light);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    margin-bottom: 40px;

}

.mobile-menu ul {

    display: flex;

    flex-direction: column;

    gap: 24px;

}

.mobile-menu a {

    font-size: 18px;

    font-weight: 600;

    /* The menu panel is white, so navigation must stay dark on mobile. */
    color: #241a10;

}

.mobile-menu a:hover {

    color: var(--primary);

}

/*=========================================================
 SCROLL TOP
=========================================================*/

.scroll-top {

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: var(--shadow-md);

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

    z-index: 999;

}

.scroll-top.active {

    opacity: 1;

    visibility: visible;

}

.scroll-top:hover {

    transform: translateY(-6px);

}

/*=========================================================
 PRELOADER
=========================================================*/

.preloader {

    position: fixed;

    inset: 0;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 99999;

}

.loader {

    width: 70px;

    height: 70px;

    border: 6px solid #eee;

    border-top-color: var(--primary);

    border-radius: 50%;

}

/*=========================================================
 UTILITIES
=========================================================*/

.bg-light {

    background: var(--light);

}

.bg-primary {

    background: var(--primary);

    color: #fff;

}

.rounded {

    border-radius: var(--radius-lg);

}

.shadow {

    box-shadow: var(--shadow-md);

}

.text-primary {

    color: var(--primary);

}

.text-white {

    color: #fff;

}

.text-center {

    text-align: center;

}

.mb-20 {

    margin-bottom: 20px;

}

.mb-40 {

    margin-bottom: 40px;

}

.mt-40 {

    margin-top: 40px;

}

.mt-60 {

    margin-top: 60px;

}

/*=========================================================
 STICKY HEADER
=========================================================*/

.header.sticky {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: #fff;

    animation: fadeDown .4s ease;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

}

/* One clean footer blessing on every page. */
.footer-bottom::before {
    content: none !important;
    display: none !important;
}

.footer-bottom {
    position: relative;
}

.footer-bottom .maa-blessing {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    color: #7d5321 !important;
    font-size: 14px !important;
    white-space: nowrap;
}

.footer-bottom .maa-heart {
    color: #d92727;
    margin-right: 4px;
}

@media(max-width:700px) {
    .footer-bottom .maa-blessing {
        position: static;
        transform: none;
        order: 3;
        width: 100%;
        text-align: center;
        margin-top: 12px !important;
    }
}