/* ===========================================================
   KETAN HYUNDAI NAGPUR
   Premium Automotive Theme
   Developed by OSSUM DigiTech
=========================================================== */

/*==============================
Google Font
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
Root Variables
==============================*/

:root{

    --primary:#002C6F;
    --secondary:#0A4DBF;
    --accent:#00AEEF;

    --white:#ffffff;
    --light:#f7f9fc;
    --dark:#09111f;

    --text:#4b5563;

    --radius:18px;

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

    --transition:.35s ease;

}

/*==============================
Reset
==============================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

html{

font-size:16px;

overflow-x:hidden;

}

body{

font-family:'Poppins',sans-serif;

background:#ffffff;

color:#111827;

overflow-x:hidden;

line-height:1.6;

}

img{

width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:90%;

max-width:1280px;

margin:auto;

}

section{

padding:90px 0;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-heading span{

color:var(--secondary);

font-weight:700;

letter-spacing:2px;

font-size:.9rem;

text-transform:uppercase;

}

.section-heading h2{

font-size:2.8rem;

margin:15px 0;

font-weight:800;

color:var(--primary);

}

.section-heading p{

max-width:750px;

margin:auto;

color:var(--text);

}

/*==============================
Buttons
==============================*/

.btn-primary{

display:inline-block;

padding:14px 32px;

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

color:#fff;

border-radius:50px;

font-weight:600;

transition:.35s;

box-shadow:0 10px 25px rgba(0,60,160,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 20px 40px rgba(0,60,160,.4);

}

.btn-outline{

display:inline-block;

padding:14px 30px;

border:2px solid #fff;

color:#fff;

border-radius:50px;

transition:.35s;

font-weight:600;

}

.btn-outline:hover{

background:#fff;

color:var(--primary);

}

/*==============================
Navbar
==============================*/

header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

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

backdrop-filter:blur(14px);

}

.navbar{

height:85px;

display:flex;

align-items:center;

}

.navbar .container{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:12px;

color:#fff;

font-weight:700;

font-size:1.3rem;

}

.logo img{

width:55px;

}

.nav-links{

display:flex;

gap:35px;

}

.nav-links a{

color:#fff;

font-weight:500;

transition:.3s;

position:relative;

}

.nav-links a:hover{

color:#00AEEF;

}

.nav-links a::after{

content:'';

position:absolute;

bottom:-8px;

left:0;

height:2px;

width:0;

background:#00AEEF;

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

.nav-buttons{

display:flex;

gap:15px;

}

.menu-btn{

display:none;

font-size:28px;

color:#fff;

cursor:pointer;

}

/*==============================
Hero
==============================*/
/* ===========================================================
   PREMIUM HERO
=========================================================== */

.premium-hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:
    radial-gradient(circle at 75% 45%,rgba(220,220,220,.45),transparent 28%),
    linear-gradient(180deg,#fafafa 0%,#f4f4f4 55%,#ededed 100%);

    padding:130px 0 60px;

}

/* ===============================
   Decorative Background
================================ */

.hero-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    z-index:0;

}

.hero-circle-1{

    width:520px;
    height:520px;

    right:-120px;
    top:80px;

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

}

.hero-circle-2{

    width:320px;
    height:320px;

    left:-120px;
    bottom:-100px;

    background:rgba(230,230,230,.55);

}

/* ===============================
   Layout
================================ */

.hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    position:relative;

    z-index:5;

}

/* ===============================
   Left Side
================================ */

.hero-left{

    max-width:610px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 20px;

    border-radius:40px;

    background:#ffffff;

    color:#222;

    font-weight:600;

    letter-spacing:.5px;

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

    margin-bottom:28px;

}

.hero-left h1{

    font-size:70px;

    line-height:1.05;

    font-weight:800;

    color:#111;

    margin-bottom:24px;

}

.hero-left p{

    font-size:19px;

    line-height:1.9;

    color:#555;

    margin-bottom:30px;

}

.hero-price{

    font-size:18px;

    color:#666;

    margin-bottom:35px;

}

.hero-price strong{

    display:block;

    margin-top:6px;

    font-size:42px;

    color:#002C5F;

    font-weight:800;

}

/* ===============================
   Buttons
================================ */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.btn-primary{

    background:#002C5F;

    color:#fff;

    text-decoration:none;

    padding:18px 38px;

    border-radius:60px;

    font-weight:700;

    transition:.35s;

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

}

.btn-primary:hover{

    transform:translateY(-5px);

    background:#004b9c;

}

.btn-outline{

    text-decoration:none;

    border:2px solid #111;

    color:#111;

    padding:18px 38px;

    border-radius:60px;

    font-weight:700;

    transition:.35s;

}

.btn-outline:hover{

    background:#111;

    color:#fff;

}

/* ===============================
   Features
================================ */

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    color:#333;

}

.hero-features i{

    width:44px;

    height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fff;

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

    color:#002C5F;

}

/* ===============================
   Right Side
================================ */

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}
.hero-car{

transition:.5s ease;

}

.hero-car.fade{

opacity:0;

transform:translateY(30px) scale(.95);

}
/* Spotlight */

.car-light{

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.95),
    rgba(240,240,240,.65),
    transparent 72%);

    filter:blur(15px);

    z-index:0;

}

/* Car */

.hero-car{

    position:relative;

    width:100%;

    max-width:760px;

    z-index:3;

    animation:floatCar 5s ease-in-out infinite;

    filter:
    drop-shadow(0 45px 45px rgba(0,0,0,.22));

}

/* ===============================
   Finance Card
================================ */

.finance-card{

    position:absolute;

    right:-10px;

    bottom:25px;

    width:310px;

    padding:28px;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    z-index:5;

}

.finance-card span{

    color:#666;

    font-size:15px;

}

.finance-card h3{

    font-size:34px;

    color:#002C5F;

    margin:12px 0 20px;

}

.finance-card ul{

    margin:0 0 28px;

    padding:0;

    list-style:none;

}

.finance-card li{

    margin-bottom:12px;

    color:#444;

}

/* ===============================
   Model Selector
================================ */

.model-selector{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:70px;

}

.model-btn{

    border:none;

    cursor:pointer;

    padding:16px 30px;

    background:#fff;

    border-radius:60px;

    font-weight:700;

    color:#555;

    transition:.35s;

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

}

.model-btn:hover{

    transform:translateY(-4px);

}

.model-btn.active{

    background:#002C5F;

    color:#fff;

}

/* ===============================
   Animation
================================ */

@keyframes floatCar{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ===============================
   Responsive
================================ */

@media(max-width:1100px){

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.hero-left{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.finance-card{

position:relative;

margin-top:30px;

right:auto;

bottom:auto;

width:100%;

max-width:360px;

}

.hero-left h1{

font-size:54px;

}

.hero-price strong{

font-size:34px;

}

}

@media(max-width:768px){

.premium-hero{

padding-top:110px;

}

.hero-left h1{

font-size:40px;

}

.hero-left p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-outline{

width:100%;

text-align:center;

}

.model-selector{

gap:12px;

}

.model-btn{

padding:12px 20px;

font-size:14px;

}

.hero-car{

max-width:100%;

}

}
.model-selector{

    display:none;

}

/*==============================
Swiper
==============================*/

.swiper-pagination-bullet{

background:#fff;

opacity:.4;

}

.swiper-pagination-bullet-active{

background:#00AEEF;

opacity:1;

}

/*==============================
Quick Actions
==============================*/

.quick-actions{

margin-top:-80px;

position:relative;

z-index:20;

}

.quick-actions .container{

display:grid;

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

gap:25px;

}

.action-card{

background:#fff;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.action-card:hover{

transform:translateY(-12px);

}

.action-card i{

font-size:45px;

color:#0057d9;

margin-bottom:20px;

}

.action-card h3{

margin-bottom:10px;

color:#002C6F;

}

.action-card p{

color:#6b7280;

margin-bottom:18px;

}

.action-card a{

font-weight:700;

color:#0057d9;

}

/*==============================
About
==============================*/

.about .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-left h5{

color:#0A4DBF;

font-size:1rem;

letter-spacing:2px;

margin-bottom:12px;

}

.about-left h2{

font-size:3rem;

margin-bottom:20px;

color:#002C6F;

}

.about-left p{

color:#6b7280;

margin-bottom:25px;

}

.about-left ul{

margin-bottom:30px;

}

.about-left li{

padding:12px 0;

font-weight:500;

}

.about-right img{

border-radius:25px;

box-shadow:var(--shadow);

}

/*==============================
Floating Buttons
==============================*/

.call-btn,

.whatsapp-btn{

position:fixed;

right:25px;

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

color:#fff;

font-size:24px;

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

z-index:999;

transition:.3s;

}

.call-btn{

bottom:105px;

background:#0057d9;

}

.whatsapp-btn{

bottom:30px;

background:#25d366;

}

.call-btn:hover,

.whatsapp-btn:hover{

transform:scale(1.1);

}

/*==============================
Scroll To Top
==============================*/

.scroll-top{

position:fixed;

left:25px;

bottom:30px;

width:55px;

height:55px;

background:#002C6F;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

box-shadow:var(--shadow);

transition:.3s;

}

.scroll-top:hover{

background:#0057d9;

transform:translateY(-5px);

}

/*==============================
Section Background
==============================*/

body{

background:
linear-gradient(
180deg,
#ffffff 0%,
#f5f8ff 100%
);

}
/*==================================================
            FEATURED CARS SECTION
==================================================*/

.cars-section{
    background:#f7faff;
    position:relative;
}

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

.car-card{

    position:relative;

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    transition:.45s ease;

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

    transform-style:preserve-3d;

}

.car-card:hover{

    transform:
    translateY(-15px)
    rotateX(4deg)
    rotateY(-4deg);

    box-shadow:
    0 25px 60px rgba(0,70,180,.20);

}

.car-image{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #eef5ff,
    #ffffff
    );

}

.car-image img{

    width:100%;

    transition:.6s;

}

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

    transform:scale(1.08);

}

.badge{

    position:absolute;

    top:18px;

    left:18px;

    background:#0057d9;

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}

.badge.new{

    background:#18c964;

}

.badge.premium{

    background:#ff9f0a;

}

.car-content{

    padding:30px;

}

.car-content h3{

    color:#002C6F;

    font-size:28px;

    margin-bottom:10px;

}

.price{

    color:#0057d9;

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}

.car-content ul{

    margin-bottom:30px;

}

.car-content li{

    padding:10px 0;

    color:#6b7280;

    border-bottom:1px solid #ececec;

}

.car-content li:last-child{

    border:none;

}

.car-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.car-buttons .btn-primary,

.car-buttons .btn-outline{

    flex:1;

    text-align:center;

}

.car-buttons .btn-outline{

    border:2px solid #0057d9;

    color:#0057d9;

}

.car-buttons .btn-outline:hover{

    background:#0057d9;

    color:#fff;

}

/*==================================================
                OFFERS
==================================================*/

.offers-section{

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

}

.offers-grid{

    display:grid;

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

    gap:30px;

}

.offer-card{

    background:#fff;

    padding:45px 30px;

    border-radius:20px;

    text-align:center;

    transition:.4s;

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

}

.offer-card:hover{

    transform:translateY(-10px);

    background:#002C6F;

    color:#fff;

}

.offer-card:hover h3,

.offer-card:hover p,

.offer-card:hover i{

    color:#fff;

}

.offer-card i{

    font-size:52px;

    color:#0057d9;

    margin-bottom:25px;

}

.offer-card h3{

    margin-bottom:15px;

    color:#002C6F;

}

.offer-card p{

    color:#6b7280;

}

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

.finance-section{

    background:#002C6F;

    color:#fff;

}

.finance-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

}

.finance-left span{

    color:#4fc3ff;

    font-weight:700;

    letter-spacing:2px;

}

.finance-left h2{

    font-size:48px;

    margin:20px 0;

}

.finance-left p{

    opacity:.85;

    margin-bottom:25px;

}

.finance-left ul{

    margin-bottom:35px;

}

.finance-left li{

    padding:12px 0;

}

.finance-left i{

    color:#00d084;

    margin-right:10px;

}

.finance-right img{

    border-radius:25px;

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

}

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

.why-us{

    background:#f6f9fd;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    transition:.4s;

    text-align:center;

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

}

.why-card:hover{

    transform:translateY(-10px);

    background:#002C6F;

}

.why-card:hover h3,

.why-card:hover p,

.why-card:hover i{

    color:#fff;

}

.why-card i{

    font-size:55px;

    color:#0057d9;

    margin-bottom:25px;

}

.why-card h3{

    color:#002C6F;

    margin-bottom:15px;

}

.why-card p{

    color:#6b7280;

}

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

.test-drive{

    background:

    linear-gradient(

    120deg,

    #002C6F,

    #0057d9

    );

    color:#fff;

}

.test-drive .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.test-content span{

    color:#4fc3ff;

    letter-spacing:2px;

    font-weight:700;

}

.test-content h2{

    font-size:48px;

    margin:20px 0;

}

.test-content p{

    opacity:.9;

    margin-bottom:35px;

}

.cta-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.test-image img{

    width:100%;

    animation:float 4s ease-in-out infinite;

}

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

.stats{

    background:#09111f;

}

.stats .container{

    display:grid;

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

    gap:25px;

}

.stat-box{

    background:#fff;

    padding:40px;

    border-radius:20px;

    text-align:center;

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-10px);

}

.stat-box h2{

    color:#0057d9;

    font-size:50px;

    margin-bottom:10px;

}

.stat-box p{

    color:#6b7280;

}

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

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

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

.testimonials{
    background:linear-gradient(180deg,#f5f9ff,#ffffff);
    position:relative;
}

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

.testimonial-card{

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

    backdrop-filter:blur(20px);

    border-radius:25px;

    padding:40px;

    border:1px solid rgba(0,87,217,.08);

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

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.testimonial-card::before{

content:'';

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#0057d9,#00AEEF);

}

.testimonial-card:hover{

transform:translateY(-12px);

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

}

.stars{

font-size:24px;

color:#ffc107;

margin-bottom:20px;

letter-spacing:3px;

}

.testimonial-card p{

color:#6b7280;

font-size:16px;

line-height:1.8;

margin-bottom:25px;

}

.testimonial-card h4{

color:#002C6F;

font-size:22px;

margin-bottom:5px;

}

.testimonial-card span{

color:#0057d9;

font-weight:600;

}

/*==================================================
            SERVICE SECTION
==================================================*/

.service-section{

background:#f6f9ff;

}

.service-content{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.service-text span{

color:#0057d9;

font-weight:700;

letter-spacing:2px;

}

.service-text h2{

font-size:48px;

margin:20px 0;

color:#002C6F;

}

.service-text p{

color:#6b7280;

margin-bottom:25px;

}

.service-text ul{

margin-top:20px;

}

.service-text li{

padding:12px 0;

font-size:17px;

color:#374151;

}

.service-form{

background:#fff;

padding:45px;

border-radius:25px;

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

}

.service-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.service-form input,

.service-form select,

.service-form textarea{

width:100%;

padding:16px 18px;

border:1px solid #dbe3ef;

border-radius:12px;

font-size:15px;

font-family:Poppins,sans-serif;

transition:.3s;

background:#fff;

}

.service-form input:focus,

.service-form select:focus,

.service-form textarea:focus{

outline:none;

border-color:#0057d9;

box-shadow:0 0 0 4px rgba(0,87,217,.12);

}

.service-form button{

border:none;

cursor:pointer;

}

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

.faq{

background:#ffffff;

}

.faq-item{

background:#f7faff;

padding:28px;

margin-bottom:20px;

border-radius:18px;

transition:.3s;

cursor:pointer;

border-left:5px solid #0057d9;

}

.faq-item:hover{

transform:translateX(8px);

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

}

.faq-item h3{

font-size:22px;

margin-bottom:12px;

color:#002C6F;

}

.faq-item p{

color:#6b7280;

line-height:1.8;

}

/*==================================================
        PREMIUM INPUT PLACEHOLDER
==================================================*/

input::placeholder,

textarea::placeholder{

color:#9ca3af;

}

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

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:46px;

font-weight:800;

color:#002C6F;

}

.section-title p{

margin-top:15px;

color:#6b7280;

}

/*==================================================
        GLASS EFFECT
==================================================*/

.glass{

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

backdrop-filter:blur(20px);

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

border-radius:25px;

}

/*==================================================
        CARD HOVER GLOW
==================================================*/

.card-glow:hover{

box-shadow:

0 0 20px rgba(0,87,217,.15),

0 0 45px rgba(0,87,217,.18),

0 0 70px rgba(0,174,239,.12);

}

/*==================================================
            FADE UP
==================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

.gradient-text{

background:linear-gradient(90deg,#0057d9,#00AEEF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

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

.zoom-img{

overflow:hidden;

border-radius:20px;

}

.zoom-img img{

transition:.6s;

}

.zoom-img:hover img{

transform:scale(1.08);

}

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

.shadow-sm{

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

}

.shadow-lg{

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

}

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

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}
/*==================================================
                CONTACT SECTION
==================================================*/

.contact{
    background:linear-gradient(180deg,#ffffff,#f4f8ff);
    position:relative;
    overflow:hidden;
}

.contact::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(0,87,217,.05);
    border-radius:50%;
    top:-180px;
    right:-150px;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.contact-info{
    position:relative;
    z-index:2;
}

.contact-info span{
    color:#0057d9;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.contact-info h2{
    font-size:48px;
    color:#002C6F;
    margin:15px 0 20px;
}

.contact-info p{
    color:#6b7280;
    line-height:1.8;
    margin-bottom:25px;
}

.contact-box{

    display:flex;

    align-items:center;

    gap:18px;

    background:#fff;

    padding:18px 22px;

    border-radius:16px;

    margin-bottom:18px;

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

    transition:.35s;

}

.contact-box:hover{

    transform:translateX(8px);

    box-shadow:0 18px 40px rgba(0,87,217,.15);

}

.contact-box i{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0057d9;

    color:#fff;

    font-size:22px;

}

.contact-box p{

    margin:0;

    font-weight:600;

    color:#374151;

}

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

.social-links{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.social-links a{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#002C6F;

    color:#fff;

    font-size:20px;

    transition:.35s;

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

}

.social-links a:hover{

    background:#0057d9;

    transform:translateY(-8px) rotate(360deg);

}

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

.contact-map{

    border-radius:25px;

    overflow:hidden;

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

}

.contact-map iframe{

    width:100%;

    height:550px;

    border:none;

    display:block;

}

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

.contact-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:#00AEEF;

    opacity:0;

    transition:.35s;

}

.contact-box{

    position:relative;

    overflow:hidden;

}

.contact-box:hover::before{

    opacity:1;

}

/*=========================================
        CONTACT IMAGE (Optional)
==========================================*/

.contact-image{

    position:relative;

}

.contact-image img{

    border-radius:25px;

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

    transition:.5s;

}

.contact-image:hover img{

    transform:scale(1.04);

}
/*==================================================
                NEWSLETTER SECTION
==================================================*/

.newsletter{

    background:
    linear-gradient(
    135deg,
    #002C6F,
    #0057D9,
    #007BFF
    );

    padding:90px 0;

    text-align:center;

    color:#fff;

    position:relative;

    overflow:hidden;

}

.newsletter::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

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

    border-radius:50%;

    top:-250px;

    left:-220px;

}

.newsletter::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

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

    border-radius:50%;

    bottom:-180px;

    right:-120px;

}

.newsletter .container{

    position:relative;

    z-index:2;

}

.newsletter h2{

    font-size:46px;

    font-weight:800;

    margin-bottom:18px;

}

.newsletter p{

    max-width:700px;

    margin:0 auto 40px;

    font-size:18px;

    opacity:.95;

}

.newsletter form{

    display:flex;

    justify-content:center;

    align-items:center;

    max-width:760px;

    margin:auto;

    gap:18px;

    flex-wrap:wrap;

}

.newsletter input{

    flex:1;

    min-width:320px;

    padding:18px 22px;

    border:none;

    border-radius:60px;

    font-size:16px;

    font-family:Poppins,sans-serif;

}

.newsletter input:focus{

    outline:none;

}

.newsletter button{

    background:#fff;

    color:#002C6F;

    border:none;

    padding:18px 40px;

    border-radius:60px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.newsletter button:hover{

    background:#00AEEF;

    color:#fff;

    transform:translateY(-4px);

}





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

footer{

    background:#09111f;

    color:#fff;

    padding:90px 0 0;

}

.footer-grid{

    display:grid;

    grid-template-columns:

    2fr

    1fr

    1fr

    1.3fr;

    gap:45px;

    margin-bottom:70px;

}

.footer-grid h3{

    margin-bottom:25px;

    font-size:24px;

    color:#fff;

}

.footer-grid p{

    color:#bfc6d4;

    line-height:1.9;

}

.footer-grid ul{

    padding:0;

    margin:0;

    list-style:none;

}

.footer-grid li{

    margin-bottom:15px;

}

.footer-grid a{

    color:#c8d0de;

    transition:.35s;

    display:inline-block;

}

.footer-grid a:hover{

    color:#00AEEF;

    transform:translateX(8px);

}





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

.footer-contact p{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}

.footer-contact i{

    color:#00AEEF;

    font-size:18px;

}





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

.footer-social{

    display:flex;

    gap:14px;

    margin-top:25px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#162235;

    color:#fff;

    transition:.35s;

}

.footer-social a:hover{

    background:#0057D9;

    transform:translateY(-8px);

}





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

.copyright{

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

    padding:25px 0;

    text-align:center;

}

.copyright p{

    color:#bfc6d4;

    font-size:15px;

}

.copyright strong{

    color:#00AEEF;

}





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

.footer-logo{

    width:180px;

    margin-bottom:20px;

}





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

.payment-icons{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.payment-icons img{

    width:55px;

    border-radius:8px;

    transition:.3s;

}

.payment-icons img:hover{

    transform:scale(1.1);

}





/*==================================================
        MINI FOOTER BADGES
==================================================*/

.footer-badge{

    display:inline-block;

    margin-top:15px;

    padding:10px 18px;

    border-radius:50px;

    background:#162235;

    color:#00AEEF;

    font-size:14px;

    font-weight:600;

}





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

.footer-divider{

    width:70px;

    height:4px;

    background:#00AEEF;

    margin:18px 0 25px;

    border-radius:10px;

}





/*==================================================
            FOOTER NEWS TAG
==================================================*/

.footer-news{

    display:flex;

    gap:12px;

    margin-bottom:18px;

}

.footer-news img{

    width:80px;

    border-radius:10px;

}

.footer-news h5{

    color:#fff;

    margin-bottom:8px;

    font-size:15px;

}

.footer-news span{

    color:#8fa3c5;

    font-size:13px;

}
/*==================================================
        KETAN HYUNDAI PREMIUM EFFECTS
        STYLE.CSS - FINAL PART
==================================================*/


/*==============================
LOADING SCREEN
==============================*/

.preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#001A45;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.6s;

}

.loader{

width:80px;

height:80px;

border-radius:50%;

border:5px solid rgba(255,255,255,.15);

border-top:5px solid #00AEEF;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


/*==============================
GLASS EFFECT
==============================*/

.glass{

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

backdrop-filter:blur(18px);

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

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

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

}


/*==============================
NEON SHADOW
==============================*/

.neon{

box-shadow:

0 0 15px rgba(0,174,239,.30),

0 0 30px rgba(0,174,239,.25),

0 0 60px rgba(0,174,239,.18);

}


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

.gradient-text{

background:linear-gradient(90deg,#00AEEF,#0057D9);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


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

.float{

animation:floating 5s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}


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

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

width:0;

height:0;

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

border-radius:50%;

left:50%;

top:50%;

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

transition:.6s;

}

.btn-primary:hover::before{

width:420px;

height:420px;

}


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

.shine{

position:relative;

overflow:hidden;

}

.shine::before{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:60%;

height:220%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:rotate(25deg);

transition:.8s;

}

.shine:hover::before{

left:180%;

}


/*==============================
CARDS
==============================*/

.card{

transition:.4s;

border-radius:22px;

overflow:hidden;

}

.card:hover{

transform:translateY(-12px);

box-shadow:

0 20px 60px rgba(0,0,0,.15);

}


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

.zoom{

overflow:hidden;

}

.zoom img{

transition:.6s;

}

.zoom:hover img{

transform:scale(1.08);

}


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

.section-title{

margin-bottom:70px;

text-align:center;

}

.section-title span{

display:inline-block;

padding:8px 20px;

background:#EAF4FF;

color:#0057D9;

border-radius:50px;

font-weight:600;

margin-bottom:20px;

}

.section-title h2{

font-size:46px;

color:#002C6F;

font-weight:800;

margin-bottom:18px;

}

.section-title p{

max-width:760px;

margin:auto;

color:#6B7280;

}


/*==============================
BACKGROUND BLUR
==============================*/

.blur-circle{

position:absolute;

width:420px;

height:420px;

background:#00AEEF;

filter:blur(180px);

opacity:.08;

border-radius:50%;

pointer-events:none;

}


/*==============================
CUSTOM SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EEF5FF;

}

::-webkit-scrollbar-thumb{

background:#0057D9;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#003F9E;

}


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

::selection{

background:#0057D9;

color:#fff;

}


/*==============================
ANIMATIONS
==============================*/

.fade-in{

animation:fade .8s ease forwards;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

.slide-up{

animation:slideUp .8s ease forwards;

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.slide-left{

animation:slideLeft .8s ease forwards;

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

.slide-right{

animation:slideRight .8s ease forwards;

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}


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

.rotate:hover{

transform:rotate(360deg);

transition:.6s;

}


/*==============================
BORDER GLOW
==============================*/

.border-glow{

border:2px solid transparent;

background:

linear-gradient(#fff,#fff) padding-box,

linear-gradient(90deg,#0057D9,#00AEEF) border-box;

}


/*==============================
SHADOWS
==============================*/

.shadow-light{

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

}

.shadow-heavy{

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

}


/*==============================
UTILITY CLASSES
==============================*/

.text-center{text-align:center;}

.text-left{text-align:left;}

.text-right{text-align:right;}

.w-100{width:100%;}

.d-flex{display:flex;}

.align-center{align-items:center;}

.justify-center{justify-content:center;}

.flex-column{flex-direction:column;}

.gap-10{gap:10px;}

.gap-20{gap:20px;}

.gap-30{gap:30px;}

.rounded{border-radius:20px;}

.rounded-circle{border-radius:50%;}

.hidden{display:none;}

.visible{display:block;}


/*==============================
SPACING
==============================*/

.pt-50{padding-top:50px;}
.pt-80{padding-top:80px;}
.pb-50{padding-bottom:50px;}
.pb-80{padding-bottom:80px;}

.mt-50{margin-top:50px;}
.mt-80{margin-top:80px;}
.mb-50{margin-bottom:50px;}
.mb-80{margin-bottom:80px;}


/*==============================
TRANSITIONS
==============================*/

.transition{

transition:.35s ease;

}


/*==============================
END OF FILE
==============================*/