/*==================================================
    KETAN HYUNDAI
    components.css
    Part 1A - Buttons • Badges • Section Titles
==================================================*/


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

.btn-primary{

display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;

padding:15px 34px;

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

color:#fff;

font-size:15px;

font-weight:600;

border:none;

border-radius:50px;

cursor:pointer;

text-decoration:none;

transition:.35s;

box-shadow:0 12px 30px rgba(0,44,111,.25);

overflow:hidden;

position:relative;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(0,44,111,.35);

}

.btn-primary:active{

transform:scale(.97);

}

.btn-primary i{

font-size:16px;

}



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

.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:15px 34px;

background:transparent;

color:var(--primary);

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

border-radius:50px;

font-weight:600;

text-decoration:none;

cursor:pointer;

transition:.35s;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

transform:translateY(-4px);

}



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

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:15px 34px;

background:var(--secondary);

color:#fff;

border:none;

border-radius:50px;

cursor:pointer;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.btn-secondary:hover{

background:#0096d6;

transform:translateY(-4px);

}



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

.icon-btn{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#fff;

color:var(--primary);

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

transition:.35s;

cursor:pointer;

}

.icon-btn:hover{

background:var(--primary);

color:#fff;

transform:translateY(-4px);

}



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

.btn-group{

display:flex;

gap:15px;

flex-wrap:wrap;

align-items:center;

}



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

.btn-sm{

padding:10px 22px;

font-size:13px;

}



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

.btn-lg{

padding:18px 42px;

font-size:17px;

}



/*=====================================
    FULL WIDTH BUTTON
=====================================*/

.btn-block{

width:100%;

}



/*=====================================
    RIPPLE EFFECT
=====================================*/

.btn-primary span.ripple{

position:absolute;

width:20px;

height:20px;

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

border-radius:50%;

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(15);

opacity:0;

}

}



/*=====================================
    BADGES
=====================================*/

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:6px 16px;

border-radius:30px;

font-size:12px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.5px;

color:#fff;

background:var(--primary);

}

.badge-new{

background:#10b981;

}

.badge-hot{

background:#ef4444;

}

.badge-premium{

background:#f59e0b;

}

.badge-electric{

background:#0ea5e9;

}

.badge-offer{

background:#ec4899;

}



/*=====================================
    PRICE BADGE
=====================================*/

.price-badge{

display:inline-block;

padding:8px 16px;

background:linear-gradient(
135deg,
#002C6F,
#0057B8
);

color:#fff;

border-radius:30px;

font-weight:700;

font-size:18px;

}



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

.section-header{

text-align:center;

margin-bottom:60px;

}

.section-header span{

display:inline-block;

color:var(--secondary);

font-size:15px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:12px;

}

.section-header h2{

font-size:44px;

font-weight:700;

color:var(--primary);

margin-bottom:18px;

}

.section-header p{

max-width:720px;

margin:auto;

font-size:16px;

color:var(--gray-600);

line-height:1.8;

}



/*=====================================
    DIVIDER
=====================================*/

.section-divider{

width:80px;

height:5px;

border-radius:20px;

margin:20px auto;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

}



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

.card{

background:#fff;

border-radius:20px;

padding:30px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.card:hover{

transform:translateY(-10px);

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

}



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

.glass-card{

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

backdrop-filter:blur(16px);

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

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

border-radius:24px;

padding:30px;

}



/*=====================================
    INFO CHIP
=====================================*/

.chip{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 16px;

border-radius:50px;

background:#eef6ff;

color:var(--primary);

font-size:14px;

font-weight:600;

}

.chip i{

color:var(--secondary);

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 1B - Feature Cards • Service Cards • Offer Cards
==================================================*/


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

.feature-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    text-align:center;

    transition:.35s;

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

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary)
    );

}

.feature-card:hover{

    transform:translateY(-12px);

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

}

.feature-card .icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef6ff;

    color:var(--primary);

    font-size:34px;

    margin-bottom:25px;

}

.feature-card h3{

    margin-bottom:15px;

    color:var(--primary);

}

.feature-card p{

    color:var(--gray-600);

    line-height:1.8;

}



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

.service-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

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

}

.service-card:hover{

    transform:translateY(-10px);

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

}

.service-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.service-content{

    padding:25px;

}

.service-content h3{

    color:var(--primary);

    margin-bottom:10px;

}

.service-content p{

    color:#666;

    margin-bottom:20px;

}



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

.offer-card{

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

    color:#fff;

    border-radius:24px;

    padding:35px;

    position:relative;

    overflow:hidden;

}

.offer-card::after{

    content:"";

    position:absolute;

    right:-60px;

    top:-60px;

    width:180px;

    height:180px;

    border-radius:50%;

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

}

.offer-card h3{

    font-size:28px;

    margin-bottom:15px;

}

.offer-card p{

    line-height:1.8;

    opacity:.9;

}

.offer-card .offer-tag{

    display:inline-block;

    margin-bottom:20px;

    background:#fff;

    color:var(--primary);

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

}



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

.testimonial-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

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

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

}

.testimonial-card .stars{

    color:#FFD700;

    margin-bottom:20px;

}

.testimonial-card p{

    font-style:italic;

    line-height:1.8;

    color:#555;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

}

.testimonial-user img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h4{

    color:var(--primary);

    margin-bottom:4px;

}



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

.stat-card{

    background:#fff;

    text-align:center;

    padding:40px 20px;

    border-radius:20px;

    transition:.35s;

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

}

.stat-card:hover{

    transform:translateY(-10px);

}

.stat-card h2{

    font-size:46px;

    color:var(--primary);

    margin-bottom:10px;

}

.stat-card span{

    color:#666;

}



/*=====================================
    HERO INFO CARD
=====================================*/

.hero-info-card{

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

    backdrop-filter:blur(15px);

    border-radius:22px;

    padding:30px;

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

    color:#fff;

}

.hero-info-card h3{

    margin-bottom:15px;

}

.hero-info-card p{

    opacity:.9;

}



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

.icon-box{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:30px;

}

.icon-box .icon{

    width:65px;

    height:65px;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:26px;

    flex-shrink:0;

}

.icon-box h4{

    margin-bottom:8px;

    color:var(--primary);

}

.icon-box p{

    color:#666;

    line-height:1.7;

}



/*=====================================
    FEATURE LIST
=====================================*/

.feature-list{

    list-style:none;

    margin:20px 0;

    padding:0;

}

.feature-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    color:#555;

}

.feature-list i{

    color:var(--secondary);

}



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

.image-card{

    overflow:hidden;

    border-radius:22px;

    position:relative;

}

.image-card img{

    width:100%;

    transition:.5s;

}

.image-card:hover img{

    transform:scale(1.08);

}



/*=====================================
    GLASS INFO CARD
=====================================*/

.info-card{

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

    backdrop-filter:blur(14px);

    border-radius:20px;

    padding:30px;

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

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 2A - Forms • Inputs • Booking Components
==================================================*/


/*=====================================
    FORM WRAPPER
=====================================*/

.form-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

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

}

.form-title{

    font-size:32px;

    color:var(--primary);

    margin-bottom:12px;

}

.form-subtitle{

    color:var(--gray-600);

    margin-bottom:30px;

    line-height:1.8;

}



/*=====================================
    FORM GROUP
=====================================*/

.form-group{

    margin-bottom:22px;

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-weight:600;

    color:var(--primary);

    margin-bottom:10px;

    font-size:15px;

}



/*=====================================
    INPUT
=====================================*/

.form-control{

    width:100%;

    height:56px;

    padding:0 18px;

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

    border-radius:14px;

    font-size:15px;

    font-family:inherit;

    background:#fff;

    transition:.35s;

    outline:none;

}

.form-control:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(0,174,239,.15);

}

.form-control::placeholder{

    color:#9ca3af;

}



/*=====================================
    TEXTAREA
=====================================*/

textarea.form-control{

    min-height:150px;

    padding:18px;

    resize:vertical;

}



/*=====================================
    SELECT
=====================================*/

select.form-control{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23002C6F' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 16px center;

    padding-right:45px;

}



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

.input-icon{

    position:relative;

}

.input-icon i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--primary);

}

.input-icon .form-control{

    padding-left:50px;

}



/*=====================================
    FORM ROW
=====================================*/

.form-row{

    display:grid;

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

    gap:20px;

}

@media(max-width:768px){

.form-row{

grid-template-columns:1fr;

}

}



/*=====================================
    CHECKBOX
=====================================*/

.checkbox{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    user-select:none;

}

.checkbox input{

    width:18px;

    height:18px;

    accent-color:var(--secondary);

}



/*=====================================
    RADIO
=====================================*/

.radio{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.radio input{

    accent-color:var(--secondary);

}



/*=====================================
    FORM ACTIONS
=====================================*/

.form-actions{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;

}



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

.error-text{

    color:#dc2626;

    font-size:13px;

    margin-top:8px;

}



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

.success-text{

    color:#16a34a;

    font-size:13px;

    margin-top:8px;

}



/*=====================================
    BOOKING BOX
=====================================*/

.booking-box{

    background:#fff;

    border-radius:24px;

    padding:35px;

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

    transition:.35s;

}

.booking-box:hover{

    transform:translateY(-8px);

}

.booking-box h3{

    color:var(--primary);

    margin-bottom:15px;

}

.booking-box p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}



/*=====================================
    CONTACT INFO BOX
=====================================*/

.contact-info-box{

    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:25px;

}

.contact-info-box .icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    font-size:24px;

}

.contact-info-box h4{

    margin-bottom:6px;

    color:var(--primary);

}

.contact-info-box p{

    color:#666;

    line-height:1.7;

}



/*=====================================
    FORM LOADER
=====================================*/

.form-loading{

    opacity:.6;

    pointer-events:none;

}

.form-loading button{

    cursor:not-allowed;

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 2B - Newsletter • Contact • CTA • Team
==================================================*/


/*=====================================
    NEWSLETTER
=====================================*/

.newsletter{

    position:relative;

    overflow:hidden;

    padding:80px 60px;

    border-radius:30px;

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

    color:#fff;

    text-align:center;

}

.newsletter::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

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

    top:-120px;
    right:-100px;

}

.newsletter h2{

    font-size:42px;

    margin-bottom:15px;

}

.newsletter p{

    max-width:700px;

    margin:0 auto 35px;

    opacity:.9;

    line-height:1.8;

}

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.newsletter-form input{

    width:420px;

    max-width:100%;

    height:58px;

    padding:0 20px;

    border:none;

    border-radius:50px;

    outline:none;

    font-size:15px;

}

.newsletter-form button{

    height:58px;

    padding:0 35px;

}



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

.contact-card{

    background:#fff;

    padding:35px;

    border-radius:24px;

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

    transition:.35s;

    text-align:center;

}

.contact-card:hover{

    transform:translateY(-10px);

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

}

.contact-card .icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:rgba(0,174,239,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:30px;

    margin-bottom:20px;

}

.contact-card h3{

    color:var(--primary);

    margin-bottom:12px;

}

.contact-card p{

    color:#666;

    line-height:1.8;

}



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

.map-card{

    overflow:hidden;

    border-radius:24px;

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

}

.map-card iframe{

    width:100%;

    height:450px;

    border:none;

}



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

.social-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    background:#fff;

    border-radius:18px;

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

    transition:.35s;

}

.social-card:hover{

    transform:translateY(-6px);

}

.social-card .icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    font-size:24px;

}

.social-card h4{

    color:var(--primary);

    margin-bottom:5px;

}

.social-card span{

    color:#666;

}



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

.dealer-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    transition:.35s;

}

.dealer-card:hover{

    transform:translateY(-10px);

}

.dealer-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.dealer-content{

    padding:30px;

}

.dealer-content h3{

    color:var(--primary);

    margin-bottom:12px;

}

.dealer-content p{

    color:#666;

    line-height:1.8;

}



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

.team-card{

    background:#fff;

    text-align:center;

    border-radius:24px;

    overflow:hidden;

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

    transition:.35s;

}

.team-card:hover{

    transform:translateY(-8px);

}

.team-card img{

    width:100%;

    height:320px;

    object-fit:cover;

}

.team-content{

    padding:30px;

}

.team-content h3{

    color:var(--primary);

    margin-bottom:6px;

}

.team-content span{

    color:var(--secondary);

    font-weight:600;

}



/*=====================================
    SOCIAL ICONS
=====================================*/

.team-social{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:20px;

}

.team-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gray-100);

    color:var(--primary);

    transition:.35s;

    text-decoration:none;

}

.team-social a:hover{

    background:var(--primary);

    color:#fff;

}



/*=====================================
    CALL TO ACTION
=====================================*/

.cta-box{

    padding:70px;

    border-radius:30px;

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

    color:#fff;

    text-align:center;

}

.cta-box h2{

    font-size:46px;

    margin-bottom:18px;

}

.cta-box p{

    max-width:760px;

    margin:0 auto 35px;

    line-height:1.8;

}



/*=====================================
    DEALER FEATURES
=====================================*/

.dealer-features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}

.dealer-feature{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

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

    transition:.35s;

}

.dealer-feature:hover{

    transform:translateY(-8px);

}

.dealer-feature i{

    font-size:40px;

    color:var(--secondary);

    margin-bottom:18px;

}

.dealer-feature h4{

    color:var(--primary);

    margin-bottom:10px;

}

.dealer-feature p{

    color:#666;

    font-size:15px;

    line-height:1.7;

}



/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:768px){

.newsletter{

padding:60px 25px;

}

.newsletter h2{

font-size:32px;

}

.cta-box{

padding:50px 25px;

}

.cta-box h2{

font-size:34px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input,

.newsletter-form button{

width:100%;

}

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 3A-1
    Top Bar • Header • Navbar
==================================================*/


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

.top-bar{
    background:var(--primary);
    color:#fff;
    font-size:14px;
    padding:10px 0;
    position:relative;
    z-index:1000;
}

.top-bar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.top-contact{
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
}

.top-contact a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.top-contact a:hover{
    color:var(--secondary);
}

.top-contact i{
    margin-right:8px;
}

.top-social{
    display:flex;
    align-items:center;
    gap:12px;
}

.top-social a{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    transition:.3s;
    text-decoration:none;
}

.top-social a:hover{
    background:var(--secondary);
    transform:translateY(-3px);
}


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

.site-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    transition:.35s;
}

.site-header.sticky{
    position:fixed;
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    animation:headerSlide .35s ease;
}

@keyframes headerSlide{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(0);
    }

}


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

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.navbar-brand img{

    height:58px;

    width:auto;

}

.navbar-brand span{

    font-size:24px;

    font-weight:700;

    color:#fff;

    transition:.3s;

}

.site-header.sticky .navbar-brand span{

    color:var(--primary);

}


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

.nav-menu{

    display:flex;

    align-items:center;

    gap:34px;

    list-style:none;

}

.nav-menu li{

    position:relative;

}

.nav-menu a{

    text-decoration:none;

    color:#fff;

    font-weight:600;

    font-size:15px;

    transition:.3s;

    position:relative;

}

.site-header.sticky .nav-menu a{

    color:var(--primary);

}

.nav-menu a:hover{

    color:var(--secondary);

}


/*=====================================
    UNDERLINE
=====================================*/

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.3s;

}

.nav-menu a:hover::after{

    width:100%;

}


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

.nav-actions{

    display:flex;

    align-items:center;

    gap:15px;

}

.nav-call{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

}

.site-header.sticky .nav-call{

    color:var(--primary);

}

.nav-call i{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--secondary);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

}


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

.nav-btn{

    padding:12px 24px;

    border-radius:40px;

    background:var(--secondary);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.nav-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,174,239,.3);

}


/*=====================================
    HAMBURGER
=====================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

    border:none;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-size:20px;

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:991px){

    .top-bar{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .nav-menu{

        display:none;

    }

    .nav-call{

        display:none;

    }

    .nav-btn{

        display:none;

    }

    .navbar{

        padding:14px 0;

    }

    .navbar-brand img{

        height:48px;

    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 3A-2
    Mega Menu • Mobile Menu • Search Overlay
==================================================*/


/*=====================================
    DROPDOWN MENU
=====================================*/

.nav-menu li.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:120%;
    left:0;
    min-width:240px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    padding:15px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:.35s;
    z-index:999;
}

.nav-menu li:hover>.dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-menu a{
    display:block;
    padding:12px 22px;
    color:var(--primary)!important;
    text-decoration:none;
    font-weight:500;
    transition:.3s;
}

.dropdown-menu a:hover{
    background:#eef7ff;
    color:var(--secondary)!important;
    padding-left:30px;
}

.dropdown-menu a::after{
    display:none;
}


/*=====================================
    MEGA MENU
=====================================*/

.mega-menu{
    position:absolute;
    left:50%;
    top:120%;
    transform:translateX(-50%);
    width:1000px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 30px 60px rgba(0,0,0,.15);
    padding:40px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:999;
}

.nav-menu li:hover>.mega-menu{
    opacity:1;
    visibility:visible;
    top:100%;
}

.mega-column h4{
    color:var(--primary);
    margin-bottom:18px;
    font-size:18px;
}

.mega-column a{
    display:block;
    color:#555 !important;
    text-decoration:none;
    padding:8px 0;
    font-size:15px;
}

.mega-column a:hover{
    color:var(--secondary)!important;
}

.mega-banner{
    border-radius:18px;
    overflow:hidden;
}

.mega-banner img{
    width:100%;
    display:block;
}


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

.search-toggle{
    width:46px;
    height:46px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.15);
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.site-header.sticky .search-toggle{
    background:#eef6ff;
    color:var(--primary);
}

.search-toggle:hover{
    background:var(--secondary);
    color:#fff;
}


/*=====================================
    SEARCH OVERLAY
=====================================*/

.search-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:9999;
}

.search-overlay.active{
    opacity:1;
    visibility:visible;
}

.search-box{
    width:700px;
    max-width:92%;
}

.search-box input{
    width:100%;
    height:68px;
    border:none;
    border-radius:60px;
    padding:0 30px;
    font-size:18px;
    outline:none;
}

.search-close{
    position:absolute;
    top:40px;
    right:40px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    font-size:20px;
}


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

.mobile-menu{
    position:fixed;
    top:0;
    left:-320px;
    width:320px;
    height:100vh;
    background:#fff;
    overflow-y:auto;
    transition:.35s;
    z-index:9999;
    box-shadow:15px 0 45px rgba(0,0,0,.12);
}

.mobile-menu.active{
    left:0;
}

.mobile-header{
    padding:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #eee;
}

.mobile-close{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
}

.mobile-nav{
    list-style:none;
    padding:25px;
}

.mobile-nav li{
    margin-bottom:10px;
}

.mobile-nav a{
    display:block;
    padding:14px 18px;
    border-radius:12px;
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.mobile-nav a:hover{
    background:#eef6ff;
    color:var(--secondary);
}


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

.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:9998;
}

.mobile-overlay.active{
    opacity:1;
    visibility:visible;
}


/*=====================================
    BREADCRUMB
=====================================*/

.breadcrumb-section{
    padding:140px 0 80px;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff;
    text-align:center;
}

.breadcrumb-section h1{
    font-size:46px;
    margin-bottom:15px;
}

.breadcrumb{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    list-style:none;
}

.breadcrumb a{
    color:#fff;
    text-decoration:none;
    opacity:.9;
}

.breadcrumb a:hover{
    opacity:1;
}

.breadcrumb .active{
    color:var(--secondary);
    font-weight:600;
}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:1200px){

    .mega-menu{
        width:900px;
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:991px){

    .mega-menu,
    .dropdown-menu{
        display:none;
    }

    .search-box input{
        height:58px;
        font-size:16px;
    }

    .breadcrumb-section{
        padding:120px 0 60px;
    }

    .breadcrumb-section h1{
        font-size:34px;
    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 3B-1
    Premium Footer
==================================================*/


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

.footer{

    position:relative;

    background:#06152F;

    color:#fff;

    padding:90px 0 0;

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

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

}

.footer::after{

    content:"";

    position:absolute;

    bottom:-160px;

    left:-160px;

    width:420px;

    height:420px;

    border-radius:50%;

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

}


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

.footer-grid{

    display:grid;

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

    gap:50px;

    position:relative;

    z-index:2;

}


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

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.footer-logo img{

    height:65px;

    width:auto;

}

.footer-logo h3{

    font-size:28px;

    font-weight:700;

}


/*=====================================
    ABOUT
=====================================*/

.footer-about{

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

    line-height:1.9;

    margin-bottom:30px;

}


/*=====================================
    SOCIAL
=====================================*/

.footer-social{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.footer-social a{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#fff;

    transition:.35s;

    text-decoration:none;

}

.footer-social a:hover{

    background:var(--secondary);

    transform:translateY(-5px);

}


/*=====================================
    TITLES
=====================================*/

.footer-title{

    font-size:22px;

    margin-bottom:28px;

    position:relative;

    padding-bottom:12px;

}

.footer-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    border-radius:10px;

    background:var(--secondary);

}


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

.footer-links{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-links li{

    margin-bottom:16px;

}

.footer-links a{

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

    text-decoration:none;

    transition:.3s;

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.footer-links a:hover{

    color:#fff;

    transform:translateX(8px);

}

.footer-links i{

    color:var(--secondary);

}


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

.footer-contact{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:22px;

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

    line-height:1.8;

}

.footer-contact i{

    color:var(--secondary);

    font-size:20px;

    margin-top:4px;

}


/*=====================================
    SHOWROOM HOURS
=====================================*/

.footer-hours{

    margin-top:30px;

    padding:22px;

    border-radius:18px;

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

}

.footer-hours h5{

    margin-bottom:18px;

    color:#fff;

}

.footer-hours p{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

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

}


/*=====================================
    NEWSLETTER MINI
=====================================*/

.footer-newsletter{

    margin-top:25px;

}

.footer-newsletter form{

    display:flex;

    margin-top:15px;

}

.footer-newsletter input{

    flex:1;

    height:52px;

    border:none;

    padding:0 18px;

    border-radius:12px 0 0 12px;

    outline:none;

}

.footer-newsletter button{

    width:58px;

    border:none;

    background:var(--secondary);

    color:#fff;

    border-radius:0 12px 12px 0;

    cursor:pointer;

    transition:.3s;

}

.footer-newsletter button:hover{

    background:#008fc4;

}


/*=====================================
    COPYRIGHT
=====================================*/

.footer-bottom{

    margin-top:70px;

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

    padding:25px 0;

}

.footer-bottom-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    margin:0;

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

}

.footer-bottom-links{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

.footer-bottom-links a{

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

    text-decoration:none;

    transition:.3s;

}

.footer-bottom-links a:hover{

    color:#fff;

}


/*=====================================
    PAYMENT ICONS
=====================================*/

.payment-icons{

    display:flex;

    gap:12px;

    margin-top:20px;

    flex-wrap:wrap;

}

.payment-icons i{

    font-size:28px;

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

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:1100px){

.footer-grid{

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

}

}

@media(max-width:768px){

.footer{

padding:70px 0 0;

}

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.footer-bottom-content{

flex-direction:column;

text-align:center;

}

.footer-logo{

justify-content:center;

}

.footer-title{

text-align:center;

}

.footer-title::after{

left:50%;

transform:translateX(-50%);

}

.footer-social{

justify-content:center;

}

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 3B-2
    Floating UI • Cookie Banner • Loader
==================================================*/


/*=====================================
    FLOATING ACTIONS
=====================================*/

.floating-actions{

    position:fixed;

    right:25px;

    bottom:25px;

    display:flex;

    flex-direction:column;

    gap:15px;

    z-index:9999;

}

.float-btn{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    font-size:22px;

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

    transition:.35s;

}

.float-btn:hover{

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

}


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

.float-whatsapp{

    background:#25D366;

}

.float-whatsapp:hover{

    background:#1ebe5d;

}


/*=====================================
    CALL
=====================================*/

.float-call{

    background:var(--primary);

}

.float-call:hover{

    background:var(--secondary);

}


/*=====================================
    TEST DRIVE
=====================================*/

.float-testdrive{

    background:#FF6A00;

}

.float-testdrive:hover{

    background:#f05d00;

}


/*=====================================
    BACK TO TOP
=====================================*/

.back-to-top{

    background:#111827;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

}

.back-to-top.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    background:var(--secondary);

}


/*=====================================
    FLOAT LABEL
=====================================*/

.float-btn span{

    position:absolute;

    right:75px;

    background:#111827;

    color:#fff;

    white-space:nowrap;

    padding:8px 14px;

    border-radius:8px;

    font-size:13px;

    opacity:0;

    visibility:hidden;

    transition:.3s;

}

.float-btn:hover span{

    opacity:1;

    visibility:visible;

}


/*=====================================
    SOCIAL DOCK
=====================================*/

.social-dock{

    position:fixed;

    left:25px;

    bottom:25px;

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:9998;

}

.social-dock a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

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

    transition:.35s;

    text-decoration:none;

}

.social-dock a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-5px);

}


/*=====================================
    COOKIE CONSENT
=====================================*/

.cookie-banner{

    position:fixed;

    left:30px;

    bottom:30px;

    width:400px;

    max-width:calc(100% - 60px);

    background:#fff;

    border-radius:22px;

    padding:28px;

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

    z-index:99999;

    transform:translateY(120%);

    transition:.45s;

}

.cookie-banner.show{

    transform:translateY(0);

}

.cookie-banner h4{

    color:var(--primary);

    margin-bottom:12px;

}

.cookie-banner p{

    color:#666;

    line-height:1.8;

    margin-bottom:22px;

}

.cookie-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}


/*=====================================
    PAGE LOADER
=====================================*/

.page-loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    z-index:100000;

    transition:.45s;

}

.page-loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-logo{

    width:90px;

    margin-bottom:30px;

}

.loader-ring{

    width:70px;

    height:70px;

    border:5px solid #E5E7EB;

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

    border-radius:50%;

    animation:loaderSpin 1s linear infinite;

}

.loader-text{

    margin-top:20px;

    color:var(--primary);

    font-weight:600;

    letter-spacing:1px;

}


/*=====================================
    PULSE DOTS
=====================================*/

.loader-dots{

    display:flex;

    gap:8px;

    margin-top:18px;

}

.loader-dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--secondary);

    animation:dots 1.2s infinite;

}

.loader-dots span:nth-child(2){

    animation-delay:.2s;

}

.loader-dots span:nth-child(3){

    animation-delay:.4s;

}


/*=====================================
    KEYFRAMES
=====================================*/

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes dots{

    0%,100%{

        transform:scale(.7);

        opacity:.4;

    }

    50%{

        transform:scale(1.2);

        opacity:1;

    }

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:768px){

    .floating-actions{

        right:15px;

        bottom:15px;

    }

    .float-btn{

        width:54px;

        height:54px;

        font-size:20px;

    }

    .social-dock{

        display:none;

    }

    .cookie-banner{

        left:15px;

        right:15px;

        bottom:15px;

        width:auto;

        max-width:none;

    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4A
    Premium Vehicle Cards
==================================================*/


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

.vehicle-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:35px;
    margin-top:50px;
}


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

.car-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    background:#fff;

    transition:.4s ease;

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

}

.car-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(0,0,0,.15);

}


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

.car-image{

    position:relative;

    overflow:hidden;

    height:240px;

    background:#f8f9fb;

}

.car-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

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

    transform:scale(1.08);

}


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

.car-badge{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 16px;

    border-radius:30px;

    background:var(--secondary);

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    z-index:2;

}


/*=====================================
    FAVORITE
=====================================*/

.car-favorite{

    position:absolute;

    top:18px;

    right:18px;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    cursor:pointer;

    transition:.3s;

    z-index:2;

}

.car-favorite:hover{

    background:#ef4444;

    color:#fff;

}


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

.car-content{

    padding:30px;

}

.car-content h3{

    color:var(--primary);

    font-size:28px;

    margin-bottom:12px;

}

.car-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:22px;

}


/*=====================================
    PRICE
=====================================*/

.car-price{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}

.car-price h4{

    color:var(--primary);

    font-size:30px;

}

.car-price span{

    color:#777;

    font-size:14px;

}


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

.car-specs{

    display:grid;

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

    gap:15px;

    margin-bottom:28px;

}

.spec-item{

    display:flex;

    align-items:center;

    gap:12px;

    background:#f8fafc;

    padding:14px;

    border-radius:16px;

}

.spec-item i{

    color:var(--secondary);

    font-size:20px;

}

.spec-item h5{

    margin:0;

    font-size:14px;

    color:#777;

}

.spec-item span{

    display:block;

    font-size:15px;

    font-weight:600;

    color:var(--primary);

}


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

.car-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.car-actions .btn-primary{

    flex:1;

}

.car-actions .btn-outline{

    flex:1;

}


/*=====================================
    COLOR OPTIONS
=====================================*/

.color-options{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:25px;

}

.color-dot{

    width:22px;

    height:22px;

    border-radius:50%;

    cursor:pointer;

    border:2px solid #fff;

    box-shadow:0 0 0 1px rgba(0,0,0,.1);

    transition:.3s;

}

.color-dot:hover{

    transform:scale(1.15);

}


/*=====================================
    STOCK STATUS
=====================================*/

.stock-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

    color:#16a34a;

    font-weight:600;

}

.stock-status i{

    font-size:12px;

}


/*=====================================
    RATING
=====================================*/

.car-rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

}

.car-rating i{

    color:#FFD700;

}

.car-rating span{

    color:#555;

}


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

.car-card.electric{

    border:2px solid #00AEEF;

}

.car-card.electric .car-badge{

    background:#00AEEF;

}


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

.car-card::before{

    content:"";

    position:absolute;

    left:-150%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.car-card:hover::before{

    left:160%;

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:768px){

.vehicle-grid{

grid-template-columns:1fr;

}

.car-content{

padding:22px;

}

.car-content h3{

font-size:24px;

}

.car-price{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.car-specs{

grid-template-columns:1fr;

}

.car-actions{

flex-direction:column;

}

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4B-1
    Pricing • EMI • Finance Cards
==================================================*/


/*=====================================
    PRICE PANEL
=====================================*/

.price-panel{
    position:relative;
    background:#fff;
    border-radius:24px;
    padding:35px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    overflow:hidden;
}

.price-panel:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(0,0,0,.14);
}

.price-panel::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
}


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

.price-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.price-header h3{
    color:var(--primary);
    font-size:28px;
}

.price-tag{
    color:var(--secondary);
    font-size:34px;
    font-weight:700;
}

.price-tag small{
    display:block;
    color:#777;
    font-size:13px;
    font-weight:500;
}


/*=====================================
    PRICE LIST
=====================================*/

.price-list{
    list-style:none;
    margin:0;
    padding:0;
}

.price-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #edf2f7;
    color:#555;
}

.price-list strong{
    color:var(--primary);
}


/*=====================================
    TOTAL PRICE
=====================================*/

.total-price{
    margin-top:25px;
    padding-top:20px;
    border-top:2px dashed #dbe4ef;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.total-price h4{
    color:var(--primary);
    font-size:22px;
}

.total-price span{
    font-size:30px;
    color:var(--secondary);
    font-weight:700;
}


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

.emi-card{

    background:linear-gradient(
        135deg,
        #002C6F,
        #004DA8
    );

    color:#fff;

    border-radius:24px;

    padding:35px;

    position:relative;

    overflow:hidden;

}

.emi-card::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

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

    right:-80px;
    top:-80px;

}

.emi-card h3{

    font-size:30px;

    margin-bottom:12px;

}

.emi-card p{

    opacity:.9;

    margin-bottom:28px;

    line-height:1.8;

}


/*=====================================
    EMI VALUE
=====================================*/

.emi-value{

    font-size:42px;

    font-weight:700;

    margin-bottom:6px;

}

.emi-note{

    font-size:14px;

    opacity:.85;

    margin-bottom:30px;

}


/*=====================================
    EMI FEATURES
=====================================*/

.emi-features{

    list-style:none;

    padding:0;

    margin:0 0 30px;

}

.emi-features li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

}

.emi-features i{

    color:#7EF7B8;

}


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

.emi-grid{

    display:grid;

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

    gap:18px;

    margin-top:30px;

}

.emi-box{

    background:#fff;

    border-radius:18px;

    padding:22px;

    text-align:center;

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

}

.emi-box h5{

    color:#777;

    margin-bottom:10px;

    font-size:14px;

}

.emi-box span{

    display:block;

    color:var(--primary);

    font-size:24px;

    font-weight:700;

}


/*=====================================
    FINANCE OPTIONS
=====================================*/

.finance-options{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:30px;

}

.finance-option{

    flex:1;

    min-width:180px;

    background:#f8fafc;

    border-radius:18px;

    padding:20px;

    text-align:center;

    transition:.3s;

    cursor:pointer;

}

.finance-option:hover{

    background:var(--primary);

    color:#fff;

}

.finance-option img{

    height:45px;

    margin-bottom:15px;

}

.finance-option h4{

    font-size:18px;

    margin-bottom:8px;

}

.finance-option p{

    font-size:14px;

    color:#666;

}

.finance-option:hover p{

    color:#fff;

}


/*=====================================
    OFFER STRIP
=====================================*/

.offer-strip{

    margin-top:35px;

    padding:18px 25px;

    border-radius:16px;

    background:#EAF8FF;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.offer-strip strong{

    color:var(--primary);

    font-size:18px;

}

.offer-strip span{

    color:#666;

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:992px){

    .emi-grid{

        grid-template-columns:1fr;

    }

    .price-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

}

@media(max-width:768px){

    .price-panel,
    .emi-card{

        padding:25px;

    }

    .price-tag{

        font-size:28px;

    }

    .emi-value{

        font-size:34px;

    }

    .offer-strip{

        flex-direction:column;

        align-items:flex-start;

    }

    .finance-options{

        flex-direction:column;

    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4B-2
    Comparison • Exchange • Finance
==================================================*/


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

.compare-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-top:40px;
}


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

.compare-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    transition:.35s;

}

.compare-card:hover{

    transform:translateY(-10px);

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

}

.compare-header{

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

    color:#fff;

    text-align:center;

    padding:28px;

}

.compare-header img{

    width:100%;

    max-height:180px;

    object-fit:contain;

    margin-bottom:20px;

}

.compare-header h3{

    font-size:26px;

}

.compare-body{

    padding:30px;

}


/*=====================================
    SPEC TABLE
=====================================*/

.compare-table{

    width:100%;

    border-collapse:collapse;

}

.compare-table tr{

    border-bottom:1px solid #edf2f7;

}

.compare-table td{

    padding:14px 0;

    font-size:15px;

}

.compare-table td:first-child{

    color:#666;

}

.compare-table td:last-child{

    color:var(--primary);

    font-weight:600;

    text-align:right;

}


/*=====================================
    VS BADGE
=====================================*/

.vs-badge{

    width:65px;

    height:65px;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    margin:25px auto;

}


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

.exchange-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

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

}

.exchange-card h3{

    color:var(--primary);

    margin-bottom:12px;

}

.exchange-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.exchange-value{

    background:#eef7ff;

    border-radius:18px;

    padding:25px;

    text-align:center;

    margin-bottom:25px;

}

.exchange-value h2{

    color:var(--secondary);

    font-size:42px;

}

.exchange-value span{

    color:#666;

}


/*=====================================
    FINANCE PARTNERS
=====================================*/

.finance-partners{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:35px;

}

.partner-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    text-align:center;

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

    transition:.35s;

}

.partner-card:hover{

    transform:translateY(-8px);

}

.partner-card img{

    max-width:120px;

    max-height:50px;

    object-fit:contain;

    margin-bottom:18px;

}

.partner-card h5{

    color:var(--primary);

    margin-bottom:8px;

}

.partner-card span{

    color:#666;

    font-size:14px;

}


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

.special-offer{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    padding:40px;

    background:linear-gradient(
        135deg,
        #0F4C81,
        #00AEEF
    );

    color:#fff;

}

.special-offer::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

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

    right:-120px;

    top:-120px;

}

.special-offer h2{

    font-size:36px;

    margin-bottom:15px;

}

.special-offer p{

    max-width:650px;

    opacity:.92;

    line-height:1.8;

    margin-bottom:30px;

}

.offer-countdown{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.offer-time{

    min-width:90px;

    text-align:center;

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

    padding:18px;

    border-radius:16px;

}

.offer-time h3{

    font-size:30px;

    margin-bottom:6px;

}

.offer-time span{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.8px;

}


/*=====================================
    LOAN ELIGIBILITY
=====================================*/

.loan-status{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:30px;

}

.loan-box{

    flex:1;

    min-width:180px;

    padding:22px;

    border-radius:18px;

    background:#f8fafc;

    text-align:center;

}

.loan-box h4{

    color:var(--primary);

    margin-bottom:10px;

}

.loan-box span{

    font-size:28px;

    font-weight:700;

    color:var(--secondary);

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:768px){

    .compare-grid{

        grid-template-columns:1fr;

    }

    .offer-countdown{

        justify-content:center;

    }

    .special-offer{

        padding:28px;

    }

    .special-offer h2{

        font-size:28px;

    }

    .loan-status{

        flex-direction:column;

    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4C-1
    FAQ • Vehicle Details • Specifications
==================================================*/


/*=====================================
    FAQ SECTION
=====================================*/

.faq-container{
    max-width:900px;
    margin:0 auto;
}

.faq-item{
    background:#fff;
    border-radius:20px;
    margin-bottom:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.35s;
}

.faq-item:hover{
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.faq-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    padding:24px 30px;
    transition:.3s;
}

.faq-header:hover{
    background:#f8fbff;
}

.faq-header h3{
    color:var(--primary);
    font-size:20px;
    font-weight:600;
    margin:0;
}

.faq-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--secondary);
    color:#fff;
    transition:.35s;
}

.faq-item.active .faq-icon{
    transform:rotate(180deg);
}

.faq-body{
    display:none;
    padding:0 30px 30px;
    color:#666;
    line-height:1.9;
}

.faq-item.active .faq-body{
    display:block;
}


/*=====================================
    VEHICLE DETAILS
=====================================*/

.vehicle-details{
    background:#fff;
    border-radius:24px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.vehicle-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:35px;
}

.vehicle-title h2{
    color:var(--primary);
    font-size:40px;
}

.vehicle-title .price{
    color:var(--secondary);
    font-size:34px;
    font-weight:700;
}


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

.detail-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.detail-card{
    background:#f8fafc;
    border-radius:20px;
    padding:25px;
    transition:.35s;
}

.detail-card:hover{
    background:#eef7ff;
    transform:translateY(-6px);
}

.detail-card i{
    font-size:30px;
    color:var(--secondary);
    margin-bottom:15px;
}

.detail-card h4{
    color:var(--primary);
    margin-bottom:8px;
}

.detail-card span{
    color:#666;
}


/*=====================================
    SPECIFICATIONS TABLE
=====================================*/

.spec-table{
    width:100%;
    border-collapse:collapse;
    margin-top:40px;
}

.spec-table tr{
    border-bottom:1px solid #edf2f7;
}

.spec-table th{
    background:#f8fbff;
    color:var(--primary);
    text-align:left;
    padding:18px 20px;
    width:35%;
    font-weight:600;
}

.spec-table td{
    padding:18px 20px;
    color:#555;
}


/*=====================================
    FEATURE TAGS
=====================================*/

.feature-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.feature-tag{
    padding:10px 18px;
    border-radius:30px;
    background:#eef7ff;
    color:var(--primary);
    font-weight:600;
    transition:.3s;
}

.feature-tag:hover{
    background:var(--primary);
    color:#fff;
}


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

.warranty-card{
    margin-top:40px;
    padding:35px;
    border-radius:24px;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
}

.warranty-card h3{
    margin-bottom:15px;
    font-size:30px;
}

.warranty-card p{
    opacity:.92;
    line-height:1.8;
}

.warranty-list{
    margin-top:25px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.warranty-item{
    background:rgba(255,255,255,.12);
    padding:20px;
    border-radius:18px;
}

.warranty-item h4{
    margin-bottom:10px;
}


/*=====================================
    QUICK INFO
=====================================*/

.quick-info{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:40px;
}

.quick-box{
    background:#fff;
    border-radius:20px;
    text-align:center;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.quick-box i{
    font-size:34px;
    color:var(--secondary);
    margin-bottom:15px;
}

.quick-box h4{
    color:var(--primary);
    margin-bottom:8px;
}

.quick-box span{
    color:#666;
}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:992px){

    .quick-info{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .vehicle-details{
        padding:25px;
    }

    .vehicle-title{
        flex-direction:column;
        align-items:flex-start;
    }

    .vehicle-title h2{
        font-size:30px;
    }

    .vehicle-title .price{
        font-size:28px;
    }

    .spec-table th,
    .spec-table td{
        padding:14px;
        font-size:14px;
    }

    .quick-info{
        grid-template-columns:1fr;
    }

    .faq-header{
        padding:20px;
    }

    .faq-body{
        padding:0 20px 20px;
    }

}

/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4C-2A
    Gallery Grid • Gallery Cards • Hover Effects
==================================================*/


/*=====================================
    GALLERY SECTION
=====================================*/

.gallery-section{
    position:relative;
    padding:80px 0;
    overflow:hidden;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
    margin-top:40px;
}


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

.gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    cursor:pointer;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.4s ease;
}

.gallery-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(0,0,0,.16);
}


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

.gallery-image{
    position:relative;
    overflow:hidden;
    height:280px;
}

.gallery-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.gallery-card:hover img{
    transform:scale(1.08);
}


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

.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.15)
    );
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    opacity:0;
    transition:.35s;
}

.gallery-card:hover .gallery-overlay{
    opacity:1;
}

.gallery-overlay h3{
    color:#fff;
    font-size:24px;
    margin-bottom:10px;
}

.gallery-overlay p{
    color:rgba(255,255,255,.9);
    line-height:1.7;
    margin-bottom:18px;
}


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

.gallery-zoom{
    position:absolute;
    top:20px;
    right:20px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    font-size:20px;
    transform:scale(.8);
    opacity:0;
    transition:.35s;
}

.gallery-card:hover .gallery-zoom{
    transform:scale(1);
    opacity:1;
}

.gallery-zoom:hover{
    background:var(--secondary);
    color:#fff;
}


/*=====================================
    CATEGORY BADGE
=====================================*/

.gallery-category{
    position:absolute;
    left:20px;
    top:20px;
    padding:8px 16px;
    border-radius:30px;
    background:rgba(255,255,255,.95);
    color:var(--primary);
    font-size:13px;
    font-weight:600;
}


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

.image-count{
    position:absolute;
    bottom:20px;
    right:20px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:30px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:14px;
}


/*=====================================
    FEATURED GALLERY
=====================================*/

.gallery-featured{
    grid-column:span 2;
}

.gallery-featured .gallery-image{
    height:585px;
}


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

.gallery-tall .gallery-image{
    height:560px;
}

.gallery-wide{
    grid-column:span 2;
}

.gallery-wide .gallery-image{
    height:300px;
}


/*=====================================
    GALLERY FILTERS
=====================================*/

.gallery-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:35px;
}

.gallery-filter button{
    border:none;
    padding:12px 24px;
    border-radius:40px;
    background:#eef6ff;
    color:var(--primary);
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.gallery-filter button:hover,
.gallery-filter button.active{
    background:var(--primary);
    color:#fff;
}


/*=====================================
    EMPTY STATE
=====================================*/

.gallery-empty{
    padding:70px 30px;
    text-align:center;
    border-radius:24px;
    background:#f8fafc;
}

.gallery-empty i{
    font-size:60px;
    color:var(--secondary);
    margin-bottom:20px;
}

.gallery-empty h3{
    color:var(--primary);
    margin-bottom:10px;
}

.gallery-empty p{
    color:#666;
}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:992px){

    .gallery-featured,
    .gallery-wide{
        grid-column:span 1;
    }

    .gallery-featured .gallery-image,
    .gallery-tall .gallery-image,
    .gallery-wide .gallery-image{
        height:320px;
    }

}

@media(max-width:768px){

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-image{
        height:260px;
    }

    .gallery-overlay{
        padding:20px;
    }

    .gallery-overlay h3{
        font-size:20px;
    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4C-2B-1
    360° Viewer • Thumbnail Slider
==================================================*/


/*=====================================
    360° VIEWER
=====================================*/

.viewer360{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    padding:30px;

}

.viewer-stage{

    position:relative;

    height:520px;

    background:#f7f9fc;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.viewer-stage img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    transition:.25s;

}

.viewer-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:var(--secondary);

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}


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

.rotate-btn{

    position:absolute;

    bottom:25px;

    right:25px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-size:22px;

    transition:.35s;

}

.rotate-btn:hover{

    background:var(--secondary);

    transform:rotate(180deg);

}


/*=====================================
    VIEWER CONTROLS
=====================================*/

.viewer-controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin-top:25px;

    flex-wrap:wrap;

}

.viewer-controls button{

    border:none;

    padding:12px 20px;

    border-radius:40px;

    background:#eef6ff;

    color:var(--primary);

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.viewer-controls button:hover{

    background:var(--primary);

    color:#fff;

}


/*=====================================
    THUMBNAIL SLIDER
=====================================*/

.thumb-slider{

    display:flex;

    gap:15px;

    overflow-x:auto;

    margin-top:30px;

    padding-bottom:8px;

    scrollbar-width:thin;

}

.thumb-slider::-webkit-scrollbar{

    height:8px;

}

.thumb-slider::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:20px;

}

.thumb{

    min-width:95px;

    height:75px;

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    border:3px solid transparent;

    transition:.3s;

    background:#fff;

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

}

.thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.thumb:hover{

    transform:translateY(-5px);

}

.thumb.active{

    border-color:var(--secondary);

}


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

.gallery-nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

}

.gallery-arrow{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    cursor:pointer;

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

    transition:.3s;

}

.gallery-arrow:hover{

    background:var(--primary);

    color:#fff;

}

.gallery-counter{

    color:#666;

    font-weight:600;

}


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

.gallery-caption{

    margin-top:20px;

    text-align:center;

}

.gallery-caption h3{

    color:var(--primary);

    margin-bottom:8px;

}

.gallery-caption p{

    color:#666;

    line-height:1.7;

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:768px){

    .viewer-stage{

        height:320px;

    }

    .viewer-controls{

        gap:10px;

    }

    .viewer-controls button{

        width:100%;

    }

    .thumb{

        min-width:80px;

        height:65px;

    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4C-2B-2
    Interior • Exterior • Video Gallery
==================================================*/


/*=====================================
    INTERIOR / EXTERIOR TABS
=====================================*/

.gallery-tabs{
    display:flex;
    justify-content:center;
    gap:15px;
    margin:40px 0;
    flex-wrap:wrap;
}

.gallery-tab{
    padding:14px 30px;
    border:none;
    border-radius:40px;
    background:#eef5ff;
    color:var(--primary);
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.gallery-tab:hover,
.gallery-tab.active{
    background:var(--primary);
    color:#fff;
}


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

.gallery-content{
    display:none;
    animation:galleryFade .4s ease;
}

.gallery-content.active{
    display:block;
}

@keyframes galleryFade{

    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.interior-gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

}

.interior-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

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

    transition:.35s;

}

.interior-card:hover{

    transform:translateY(-8px);

}

.interior-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

.interior-card:hover img{

    transform:scale(1.08);

}

.interior-info{

    padding:22px;

}

.interior-info h4{

    color:var(--primary);

    margin-bottom:8px;

}

.interior-info p{

    color:#666;

    line-height:1.7;

}


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

.exterior-gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:24px;

}

.exterior-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

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

}

.exterior-card img{

    width:100%;

    height:300px;

    object-fit:cover;

    transition:.45s;

}

.exterior-card:hover img{

    transform:scale(1.07);

}

.exterior-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:24px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.8),
        rgba(0,0,0,.1)
    );

}

.exterior-overlay h4{

    color:#fff;

}


/*=====================================
    VIDEO GALLERY
=====================================*/

.video-gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:30px;

    margin-top:40px;

}

.video-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#000;

    cursor:pointer;

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

}

.video-card img{

    width:100%;

    display:block;

    transition:.4s;

}

.video-card:hover img{

    transform:scale(1.08);

}

.video-play{

    position:absolute;

    top:50%;

    left:50%;

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

    width:78px;

    height:78px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:30px;

    transition:.35s;

}

.video-card:hover .video-play{

    background:var(--secondary);

    color:#fff;

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

}

.video-info{

    padding:20px;

    background:#fff;

}

.video-info h4{

    color:var(--primary);

    margin-bottom:8px;

}

.video-info p{

    color:#666;

    line-height:1.7;

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:992px){

    .video-gallery{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .gallery-tab{

        width:100%;

    }

    .interior-card img{

        height:220px;

    }

    .exterior-card img{

        height:240px;

    }

    .video-card img{

        height:230px;

        object-fit:cover;

    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4D-1
    Premium Lightbox • Modals
==================================================*/


/*=====================================
    LIGHTBOX
=====================================*/

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(12px);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
    z-index:9999;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox-content{
    position:relative;
    width:90%;
    max-width:1200px;
    max-height:90vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.lightbox-content img{
    width:100%;
    max-height:88vh;
    object-fit:contain;
    border-radius:20px;
    animation:zoomImage .35s ease;
}

@keyframes zoomImage{

    from{
        opacity:0;
        transform:scale(.85);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.lightbox-close{

    position:absolute;
    top:-20px;
    right:-20px;

    width:56px;
    height:56px;

    border:none;
    border-radius:50%;

    background:#fff;
    color:var(--primary);

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.lightbox-close:hover{

    background:var(--secondary);

    color:#fff;

    transform:rotate(90deg);

}


/*=====================================
    LIGHTBOX ARROWS
=====================================*/

.lightbox-prev,
.lightbox-next{

    position:absolute;
    top:50%;

    transform:translateY(-50%);

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:.3s;

}

.lightbox-prev:hover,
.lightbox-next:hover{

    background:var(--secondary);

}

.lightbox-prev{

    left:30px;

}

.lightbox-next{

    right:30px;

}


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

.image-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.image-modal.active{

    opacity:1;

    visibility:visible;

}

.image-modal-box{

    width:92%;

    max-width:950px;

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    animation:modalPop .35s ease;

}

.image-modal-box img{

    width:100%;

    display:block;

}

.image-modal-body{

    padding:30px;

}

.image-modal-body h3{

    color:var(--primary);

    margin-bottom:12px;

}

.image-modal-body p{

    color:#666;

    line-height:1.8;

}


/*=====================================
    VIDEO MODAL
=====================================*/

.video-modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.video-modal.active{

    opacity:1;

    visibility:visible;

}

.video-box{

    width:92%;

    max-width:1100px;

    background:#000;

    border-radius:20px;

    overflow:hidden;

    animation:modalPop .4s ease;

}

.video-box iframe,
.video-box video{

    width:100%;

    height:620px;

    display:block;

    border:none;

}


/*=====================================
    CONFIRMATION MODAL
=====================================*/

.confirm-modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.confirm-modal.active{

    opacity:1;

    visibility:visible;

}

.confirm-card{

    width:95%;

    max-width:520px;

    background:#fff;

    border-radius:24px;

    text-align:center;

    padding:45px;

    animation:modalPop .35s ease;

}

.confirm-icon{

    width:90px;

    height:90px;

    margin:auto auto 20px;

    border-radius:50%;

    background:#eaf8f0;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#1ea34a;

    font-size:42px;

}

.confirm-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.confirm-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

}

.confirm-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.confirm-actions .btn{

    min-width:150px;

}


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

@keyframes modalPop{

    from{

        opacity:0;

        transform:translateY(40px) scale(.9);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:992px){

    .video-box iframe,
    .video-box video{

        height:500px;

    }

}

@media(max-width:768px){

    .lightbox-prev,
    .lightbox-next{

        width:48px;
        height:48px;

    }

    .video-box iframe,
    .video-box video{

        height:260px;

    }

    .confirm-card{

        padding:30px 20px;

    }

    .confirm-actions{

        flex-direction:column;

    }

    .confirm-actions .btn{

        width:100%;

    }

}
/*==================================================
    KETAN HYUNDAI
    components.css
    Part 4D-2
    Toast • Skeleton • Progress • Alerts
==================================================*/


/*=====================================
    TOAST NOTIFICATIONS
=====================================*/

.toast-container{
    position:fixed;
    top:30px;
    right:30px;
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:99999;
}

.toast{
    width:360px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
    animation:toastIn .35s ease;
}

.toast-success{
    border-left:5px solid #17b26a;
}

.toast-error{
    border-left:5px solid #ef4444;
}

.toast-warning{
    border-left:5px solid #f59e0b;
}

.toast-info{
    border-left:5px solid var(--primary);
}

.toast-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef6ff;
    color:var(--primary);
    font-size:20px;
}

.toast-content{
    flex:1;
}

.toast-content h5{
    margin-bottom:4px;
    color:var(--primary);
}

.toast-content p{
    color:#666;
    font-size:14px;
}

.toast-close{
    cursor:pointer;
    font-size:18px;
    color:#999;
}

@keyframes toastIn{
    from{
        opacity:0;
        transform:translateX(100%);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}


/*=====================================
    SKELETON LOADING
=====================================*/

.skeleton{
    position:relative;
    overflow:hidden;
    background:#edf1f6;
}

.skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );
    animation:skeleton 1.3s infinite;
}

@keyframes skeleton{
    100%{
        transform:translateX(100%);
    }
}

.skeleton-image{
    height:240px;
    border-radius:18px;
}

.skeleton-title{
    height:24px;
    width:70%;
    margin:18px 0;
    border-radius:8px;
}

.skeleton-text{
    height:14px;
    margin-bottom:10px;
    border-radius:6px;
}


/*=====================================
    PROGRESS BAR
=====================================*/

.progress{
    width:100%;
    height:8px;
    background:#e8edf5;
    border-radius:20px;
    overflow:hidden;
}

.progress-bar{
    height:100%;
    width:0%;
    border-radius:20px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
    transition:width .6s ease;
}


/*=====================================
    STATUS BADGES
=====================================*/

.status-success,
.status-warning,
.status-error,
.status-info{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;
    font-weight:600;

}

.status-success{
    background:#eafaf1;
    color:#15803d;
}

.status-warning{
    background:#fff7e6;
    color:#d97706;
}

.status-error{
    background:#feecec;
    color:#dc2626;
}

.status-info{
    background:#eef6ff;
    color:var(--primary);
}


/*=====================================
    EMPTY STATE
=====================================*/

.empty-state{

    text-align:center;

    padding:80px 20px;

}

.empty-state img{

    width:180px;

    margin-bottom:30px;

}

.empty-state h3{

    color:var(--primary);

    margin-bottom:12px;

}

.empty-state p{

    color:#666;

    max-width:550px;

    margin:auto;

    line-height:1.8;

}


/*=====================================
    FLOATING ALERT
=====================================*/

.floating-alert{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    background:var(--primary);

    color:#fff;

    padding:14px 24px;

    border-radius:40px;

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

    z-index:9999;

}


/*=====================================
    NOTIFICATION BADGE
=====================================*/

.notify-badge{

    position:absolute;

    top:-5px;

    right:-5px;

    min-width:22px;

    height:22px;

    border-radius:50%;

    background:#ef4444;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

}


/*=====================================
    PRINT
=====================================*/

@media print{

    .navbar,
    .footer,
    .floating-alert,
    .toast-container,
    .whatsapp-float,
    .call-float{

        display:none !important;

    }

}


/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:768px){

    .toast{

        width:100%;

    }

    .toast-container{

        left:15px;

        right:15px;

        top:15px;

    }

    .floating-alert{

        width:90%;

        text-align:center;

    }

}