/* ==========================================================
   RADHE ENTERPRISE
   Global Stylesheet
   Version : 0.3.0
========================================================== */

/* ==========================================================
   CSS VARIABLES
========================================================== */

:root {

    /* Brand */

    --primary: #C62828;
    --primary-dark: #A91F1F;
    --secondary: #1A1A1A;

    /* Colors */

    --white: #FFFFFF;
    --background: #FFFFFF;
    --surface: #F8FAFC;

    --text: #1F2937;
    --text-light: #6B7280;

    --border: #E5E7EB;

    /* Radius */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-full: 999px;

    /* Shadow */

    --shadow: 0 15px 45px rgba(0, 0, 0, .08);

    /* Transition */

    --transition: .35s ease;

    /* Premium Accent */

--accent: #C7A269;
--accent-light: #E8D8BE;

}

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: "Manrope", sans-serif;

    background: linear-gradient(180deg,#ffffff,#f8fafc);

    color: var(--text);

    overflow-x: hidden;

    line-height: 1.7;

}

img {

    display: block;

    width: 100%;

}

a {

    color: inherit;

    text-decoration: none;

}

ul {

    list-style: none;

}

button {

    border: none;

    background: none;

    cursor: pointer;

    font: inherit;

}

input,
textarea {

    font: inherit;

}

/* ==========================================================
   LAYOUT
========================================================== */

.container {

    width: min(1280px, calc(100% - 48px));

    margin-inline: auto;

}

.section {

    padding: 100px 0;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.section-title {

    font-size: clamp(2rem,4vw,3rem);

    font-weight: 800;

    color: var(--secondary);

}

.section-description {

    max-width: 700px;

    color: var(--text-light);

    margin-top: 15px;

}

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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 34px;

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

    font-weight: 700;

    transition: var(--transition);

}

.btn-primary {

    background: var(--primary);

    color: white;

}

.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-3px);

}

.btn-secondary {

    border: 2px solid var(--secondary);

}

.btn-secondary:hover {

    background: var(--secondary);

    color: white;

}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

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

    backdrop-filter:blur(16px);

    z-index:1000;

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

    box-shadow:0 6px 30px rgba(0,0,0,.04);

    transition: padding .35s ease,
            background .35s ease,
            box-shadow .35s ease;
            backdrop-filter: .35s ease;

}   

.header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:90px;

}

.header.scrolled{

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

    backdrop-filter:blur(12px);

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

    padding:12px 0;

}

.nav-links a.active{

    color:var(--primary);

}

.nav-links a.active::after{

    width:100%;

}

.navbar{

    display:flex;

    align-items:center;

    margin-left:auto;

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:auto;

    height:60px;

    display:block;

    transition:height .35s ease;

}

.header.scrolled .logo img{

    height:60px;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:55px;

}

.nav-links a {

    position: relative;

    font-weight: 600;

    transition: .3s;

}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition: .3s;

}

.nav-links a:hover {

    color: var(--primary);

}

.nav-links a:hover::after {

    width: 100%;

}

.quote-btn{

    margin-left:45px;

}
.mobile-menu {

    display: none;

    margin-left: 20px;

}

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

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:transparent;

    cursor:pointer;

    align-items:center;

    justify-content:center;

    color:#222;

    transition:.3s;

    z-index:1002;

}

.menu-toggle svg{

    width:30px;

    height:30px;

}

.menu-toggle:hover{

    color:#C62828;

}

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

.menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

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

@media (max-width:992px){

    .menu-toggle{

        display:flex;

    }

    .navbar{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:#FFFFFF;

        display:flex;

        justify-content:flex-start;

        align-items:flex-start;

        padding:100px 35px 40px;

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

        transition:right .35s ease;

        z-index:999;

    }

    .navbar.active{

        right:0;

    }

    .nav-links{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:28px;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links a{

        display:block;

        width:100%;

        font-size:1.1rem;

        font-weight:600;

        padding:8px 0;

        border-bottom:1px solid #ECECEC;

    }

}

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

.hero{

    padding-top:140px;

    padding-bottom:90px;

}

.hero-container{

    display:grid;

    grid-template-columns:42% 58%;

    align-items:start;

    gap:90px;

}

.hero-content {

    animation: fadeUp .8s ease;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:#FEECEC;

    color:var(--primary);

    font-size:.95rem;

    font-weight:700;

    margin-bottom:24px;

}

.hero h1{

    font-size: 3.5rem;

    line-height: 1.05;

    letter-spacing: -0.03em;

    margin-bottom: 20px;

}

.hero h1 span{

    display:block;

    color:var(--primary);

}

.hero-stats{

    display:flex;

    gap:40px;

    margin-bottom:50px;

}

.hero-stats h2{

    font-size:2.4rem;

    color:var(--primary);

    font-weight:800;

    margin-bottom:2px;

}

.hero-stats span{

    color:var(--text-light);

    font-size:.95rem;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:30px;

}

.hero-image {

    position: relative;

    height: 520px;

    margin-top: 30px;

}

.hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:radial-gradient(circle,
    rgba(198,40,40,.05),
    transparent 70%);

    top:-150px;

    left:-200px;

    z-index:-1;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:28px;

    box-shadow:0 30px 60px rgba(0,0,0,.12);

    transition:.5s;

}

.hero-image:hover img {

    transform: scale(1.02);

}

/* ==========================================================
   ABOUT US
========================================================== */
.about{

    background:#F7F4EE;

    position:relative;

    overflow:hidden;

}

.about-container {

    display: grid;

    grid-template-columns: 400px 1fr;
    
    gap: 110px;
    
    align-items: center;

}

/* ==========================================================
   LEFT PANEL
========================================================== */

.about-specs{

    background:linear-gradient(
        145deg,
        #242424,
        #171717
    );

    border-radius:18px;

    padding:40px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    transition:.35s ease;

    border:1px solid rgba(255,255,255,.05);

}

.about-specs::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 6px;

    height: 100%;

    background: var(--primary);

}

.about-specs:hover{

    transform:translateY(-6px);

    box-shadow:0 35px 70px rgba(0,0,0,.22);

}

.about-top-line{

    width:70px;

    height:3px;

    background:var(--accent);

    margin-bottom:28px;

}

.about-label{

    display:inline-block;

    margin-bottom:40px;

    color:var(--accent);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.88rem;

    font-weight:700;

}

.spec-list {

    display: flex;

    flex-direction: column;

}

.spec-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

    border-bottom:1px solid rgba(255,255,255,.07);

}

.spec-item:last-child {

    border-bottom: none;

}
.spec-item span{

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

    font-size:1rem;

    font-weight:500;

}

.spec-item strong{

    color:var(--accent);

    font-size:1.05rem;

    font-weight:700;

}

/* ==========================================================
   RIGHT CONTENT
========================================================== */

.about-content {

    max-width: 720px;

}

.section-tag{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:25px;

    color:var(--accent);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.88rem;

    font-weight:700;

}

.section-tag span{

    width:45px;

    height:2px;

    background:var(--accent);

}

.about-content h2{

    font-size:clamp(2.3rem,3.5vw,3.8rem);

    line-height:1.08;

    color:#222222;

    margin-bottom:35px;

    letter-spacing:-1.5px;

    text-transform:uppercase;

    font-weight:800;

}

.about-content p{

    color:#5F6368;

    font-size:1.08rem;

    line-height:1.8;

    margin-bottom:26px;

}

.about-content p:last-child {

    margin-bottom: 0;

}

/* ==========================================================
   SMALL DETAILS
========================================================== */

.about-content h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:28px;

    background:var(--accent);

    border-radius:20px;

}

.about-content {

    animation: fadeUp .8s ease;

}

.about-specs {

    animation: fadeLeft .8s ease;

}

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

.products{

    background:#fff;

    padding:80px 0;

}

.products-header{

    text-align:center;

    max-width:980px;

    margin:0 auto 50px;

}

.products-grid{

    display:grid;

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

    gap:28px;

    margin-bottom:40px;

}

.products-header .section-title{

    max-width: 900px;

    margin: 18px auto 20px;
    
    font-size: clamp(2.8rem, 5vw, 4rem);

    line-height: 1.15;

    letter-spacing: -0.02em;
}

.products-header .section-description{

    max-width: 760px;

    margin: 0 auto;
    
    line-height: 1.7;
}

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

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #ececec;

    cursor:pointer;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    position:relative;

    
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    border-color: var(--primary);

}

/* Active Card */

.product-card.active{

    border-color:#C62828;

    box-shadow:0 20px 55px rgba(198,40,40,.18);

}

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

.product-image{

    height:220px;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

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

    transform:scale(1.05);

}

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

.product-content{

    padding:24px;

}

.product-content h3{

    font-size:1.45rem;

    color:#222;

    margin-bottom:12px;

    font-weight:700;

    line-height:1.3;

    position:relative;

    display:inline-block;
}

.product-content p{

    color:#666;

    font-size:.95rem;

    line-height:1.7;

    min-height:55px;

    margin-bottom:25px;

}

.product-content h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:#C62828;
    
    transition: width .35s ease;

}

.product-card:hover h3::after,

.product-card.active h3::after{

    width:75px;

}

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

.product-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:none;

    border:none;

    color:#C62828;

    font-weight:700;

    cursor:pointer;

    transition:
        color .3s ease,
        gap .3s ease;


}

.product-btn svg{

    transition:transform .35s ease;

}

.product-card:hover .product-btn svg{

    transform:translateX(6px);

}

.product-card.active .product-btn svg{

    transform:rotate(180deg);

}

/* ==========================================================
   DETAILS PANEL
========================================================== */

.product-details{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transform:translateY(-15px);

    transition:

        max-height .45s ease,

        opacity .35s ease,

        transform .35s ease,

        padding .35s ease;

    padding:0 45px;

    background:#fff;

    border-radius:20px;

    border:1px solid #ECECEC;

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

}

.product-details.active{

    max-height:700px;

    opacity:1;

    transform:translateY(0);

    padding:45px;

}

.details-header{

    margin-bottom:30px;

    border-bottom:1px solid #ececec;

    padding-bottom:20px;

}

.details-header h3{

    font-size:2rem;

    color:#222;

    margin-bottom:8px;

}

.details-header span{

    color:#C62828;

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:.9rem;

    font-weight:600;

}

/* ==========================================================
   VARIANTS
========================================================== */

#details-list{

    list-style:none;

    padding:0;

    margin:0;

    display:grid;

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

    gap:18px 50px;

}

#details-list li{

    position:relative;

    padding-left:28px;

    color:#444;

    font-size:1.02rem;

    line-height:1.8;

}

#details-list li::before{

    content:"▸";

    position:absolute;

    left:0;

    color:#C62828;

    font-size:18px;

    font-weight:bold;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }


}

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

.reveal.delay-1{
    transition-delay:.1s;
}

.reveal.delay-2{
    transition-delay:.2s;
}

.reveal.delay-3{
    transition-delay:.3s;
}

.reveal.delay-4{
    transition-delay:.4s;
}

/* ==========================================================
   QUALITY ASSURANCE
========================================================== */

.quality{

    background:#F8F4EA;

    padding:60px 0;

}

.quality-content{

    max-width:1120px;

    margin:0 auto;

}

/* ==========================================================
   HEADING
========================================================== */

.quality .section-tag{

    margin-bottom:30px;

}

.quality .section-title{

    font-size:clamp(2.8rem, 4.2vw, 4rem);

    line-height:1.12;

    font-weight:800;

    color:#1F1F1F;

    text-transform:uppercase;

    margin-bottom:40px;

    letter-spacing:-0.02em;

    max-width:900px;

}

/* ==========================================================
   QUALITY LIST
========================================================== */

.quality-list{

    display:flex;

    flex-direction:column;

    gap:0;

    text-align:left;

}

.quality-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:22px 0;

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

    transition:.35s ease;

}

/* Remove border from last item */

.quality-item:last-child{

    border-bottom:none;

}

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

.quality-item svg{

    width:22px;

    height:22px;

    color:#C62828;

    flex-shrink:0;

    transition:.35s;

}

/* ==========================================================
   TEXT
========================================================== */

.quality-item span{

    font-size:1.18rem;

    color:#262626;

    line-height:1.6;

    font-weight:500;

}

/* ==========================================================
   HOVER EFFECT
========================================================== */

.quality-item:hover{

    padding-left:18px;

}

.quality-item:hover svg{

    transform:scale(1.2);

}

.quality-item:hover span{

    color:#C62828;

}

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

.why{

    background:#FFFFFF;

    padding:100px 0;

}

.why-header{

    max-width:900px;

    margin:0 auto 70px;

}

.why .section-tag{

    margin-bottom:25px;

}

.why .section-title{

    font-size:3.4rem;

    line-height:1.1;

    font-weight:800;

    color:#1F1F1F;

    text-transform:uppercase;

    letter-spacing:-1px;

}

/* ==========================================================
   GRID
========================================================== */

.why-grid{

    display:grid;

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

    gap:26px;

}

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

.why-card{

    background:#FFFFFF;

    border:1px solid #E8E8E8;

    border-radius:18px;

    padding:34px 34px 30px;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

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

    min-height:250px;
}

/* Top Accent Line */

.why-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#C62828;

    transition:.4s ease;

}

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

.why-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#FFF4F4;

    color:#C62828;

    margin-bottom:22px;

    transition:.35s;

}

.why-icon svg{

    width:30px;

    height:30px;

}

/* ==========================================================
   TEXT
========================================================== */

.why-card h3{

    font-size:1.9rem;
    
    margin-bottom:14px;
    
    line-height:1.25;
}


.why-card p{

    color:#666;

    line-height:1.7;

    font-size:1.02rem;

    margin:0;

}

/* ==========================================================
   HOVER
========================================================== */

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.10);

}

.why-card:hover::before{

    width:100%;

}

.why-card:hover .why-icon{

    background:#C62828;

    color:#FFF;

    transform:rotate(-8deg) scale(1.08);

}

.why-card:hover h3{

    color:#C62828;

}

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

.why{

    background:#FFFFFF;

    padding:100px 0;

}

.why-header{

    max-width:900px;

    margin:0 auto 70px;

}

.why .section-tag{

    margin-bottom:25px;

}

.why .section-title{

    font-size:3.4rem;

    line-height:1.1;

    font-weight:800;

    color:#1F1F1F;

    text-transform:uppercase;

    letter-spacing:-1px;

}

/* ==========================================================
   GRID
========================================================== */

.why-grid{

    display:grid;

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

    gap:30px;

}

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

.why-card{

    background:#FFFFFF;

    border:1px solid #E8E8E8;

    border-radius:18px;

    padding:40px;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

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

}

/* Top Accent Line */

.why-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#C62828;

    transition:.4s ease;

}

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

.why-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#FFF4F4;

    color:#C62828;

    margin-bottom:25px;

    transition:.35s;

}

.why-icon svg{

    width:30px;

    height:30px;

}

/* ==========================================================
   TEXT
========================================================== */

.why-card h3{

    font-size:1.5rem;

    margin-bottom:15px;

    color:#222;

}

.why-card p{

    color:#666;

    line-height:1.8;

    font-size:1.05rem;

}

/* ==========================================================
   HOVER
========================================================== */

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.10);

}

.why-card:hover::before{

    width:100%;

}

.why-card:hover .why-icon{

    background:#C62828;

    color:#FFF;

    transform:rotate(-8deg) scale(1.08);

}

.why-card:hover h3{

    color:#C62828;

}

/* ==========================================================
   CONTACT
========================================================== */

.contact{

    background:#FFFFFF;

    padding:100px 0;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:50% 50%;

    gap:70px;

    align-items: center;

}

/* ==========================================================
   LEFT
========================================================== */

.contact-content .section-tag{

    margin-bottom:22px;

}

.contact-content .section-title{

    font-size: clamp(2.8rem, 4vw, 3.8rem);
    
    line-height: 1.15;
    
    margin: 18px 0 28px;

}

.contact-text{

    color:#666;

    font-size:1.15rem;

    line-height:1.8;

    max-width:520px;

    margin-bottom:50px;

} 

.contact-card{
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.contact-card:hover{
    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

/* ==========================================================
   CONTACT ITEMS
========================================================== */

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

    margin-bottom:35px;

    padding:25px;

    border:1px solid #ECECEC;

    border-radius:18px;

    background:#FFF;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}

.contact-item:last-child{

    margin-bottom:0;

}

.contact-item:hover{

    transform:translateY(-6px);

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

    border-color:#C62828;

}

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

.contact-icon{

    width:64px;

    height:64px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#FFF4F4;

    color:#C62828;

    transition:
        background .35s ease,
        transform .35s ease;

}

.contact-icon svg{

    width:28px;

    height:28px;

}

.contact-item:hover .contact-icon{

    background:#C62828;

    color:#FFF;

    transform:scale(1.08);

}

/* ==========================================================
   TEXT
========================================================== */

.contact-item h3{

    font-size:1.35rem;

    margin-bottom:10px;

    color:#1F1F1F;

}

.contact-item p{

    color:#666;

    line-height:1.8;

    margin:0;

}

.contact-item a{

    color:#666;

    font-size:1.1rem;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.contact-item a:hover{

    color:#991B1B;

}

/* ==========================================================
   MAP
========================================================== */

.contact-map{

    margin-top:50px;

    height:650px;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.10);

    border:1px solid #ECECEC;

}

.contact-map iframe{

    width:100%;

    height:100%;

    border:none;

}

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

.footer{

    background:#F7F5F2;

    color:#666;

    padding:80px 0 25px;

    border-top:1px solid #E5DED5;
}

/* ==========================================================
   MIDDLE
========================================================== */

.footer-company{

    max-width:340px;

}

.footer-company h2{

    font-size:1.8rem;

    color:#222;

    margin:20px 0 12px;

    transition: color .3s ease;

}

.footer-company:hover h2{

    color: var(--primary);

}

.footer-company p{

    color:#666;

    line-height:1.8;

}

.footer-logo{

    width:90px;

    display:block;

    margin-bottom:10px;

    transition: transform .35s ease;

}

.footer-company:hover .footer-logo{

    transform: rotate(-6deg) scale(1.08);

}

.footer-column h3{

    margin-bottom:24px;

}

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

.footer-middle{

    display:grid;

    grid-template-columns:1.6fr 1fr 1fr 1.2fr;

    gap:60px;

    padding:60px 0;

    align-items:start;

}

.footer-column h3{

    color:#222;

    font-size:1.3rem;

    margin-bottom:22px;

    position:relative;

    display:inline-block;

}

.footer-column h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:45px;

    height:3px;

    background:#C62828;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:16px;

    color:#CFCFCF;

    transition:.3s;

}

/* ==========================================================
   LINKS
========================================================== */

.footer-column a{

    color:#555;

    text-decoration:none;

    transition:.3s;

}

.footer-column a:hover{

    color:#C62828;

    padding-left:6px;

}

/* ==========================================================
   CONTACT
========================================================== */

.footer-column li{

    color:#666;

    margin-bottom:16px;

}

.footer-contact svg{

    color:#C62828;

    width:18px;

    height:18px;

}

/* ==========================================================
   BOTTOM
========================================================== */

.footer-bottom{

    border-top:1px solid #DDD4C8;

    margin-top:20px;

    padding-top:25px;

    text-align:center;

}

.footer-bottom p{

    color:#777;

}

/* ==========================================================
   HOVER EFFECT
========================================================== */

.footer-column li:hover{

    transform:translateX(4px);

}

/* ==========================================================
   FLOATING WHATSAPP
========================================================== */

.whatsapp-float{

    position:fixed;

    right:30px;

    bottom:30px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

    transition:.35s;

    z-index:9999;

    animation:whatsappFloat 2.5s ease-in-out infinite;

}

.whatsapp-float:hover{

    transform:translateY(-8px) scale(1.08);

    background:#1EBE5D;

}

.whatsapp-float svg{

    width:30px;

    height:30px;

}

.whatsapp-float i{

    font-size:34px;

    color:#FFF;

}

@keyframes whatsappFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.grid {

    display: grid;

    gap: 30px;

}

.card {

    background: white;

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

    box-shadow: var(--shadow);

}

.text-center {

    text-align: center;

}

/* ==========================================
   Mobile Product Panel Placeholder
========================================== */

#mobile-product-panel{
    display:none;
}

@media (max-width:992px){

    #mobile-product-panel{
        display:block;
        width:100%;
    }

}

/* Keyboard Focus */
:focus-visible{
    outline:3px solid var(--primary);
    outline-offset:4px;
    border-radius:6px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible){
    outline:none;
}