/* ================= GLOBAL STYLES ================= */


body{
font-family:'Poppins',sans-serif;
}




.home-page nav{
display:flex;
gap:4px;
flex-wrap:nowrap;
align-items:center;
margin-left:8px;   /* ADDED - pushes links to right */
}
/* ================= HEADER / NAVBAR ================= */

.home-page header{
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(83, 214, 214, 0.3);
color:white;
padding:18px 10px 18px 40px; 
position:absolute;
width:100%;
top:0;
left:0;
box-sizing:border-box;
z-index:100;
overflow:hidden;
flex-wrap:nowrap;   /* ADDED - prevents header items from breaking */
}

.home-page header h2{
font-size:15px;
letter-spacing:1px;
color:rgb(251, 251, 45);
white-space:nowrap;  /* ADDED - keeps title in one line */
flex-shrink:0; 
}

.home-page nav a{
color:rgba(255,255,255,1);
margin-left:15px;
text-decoration:none;
font-size:18px;
font-weight:600;
transition:0.3s;
position:relative;
left:0px;
white-space:nowrap;   /* ADDED - keeps each link in one line */
}

/* Slightly improved nav layout */

nav{
display:flex;
gap:13px;   
flex-wrap:nowrap;   /* ADDED - prevents link wrapping */
align-items:center; /* ADDED */
margin-left:auto;   /* pushes links to right side */
padding-right:20px;
}

/* existing hover */

.home-page nav a:hover{
color:orange;
}


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

u{
color:rgb(255, 255, 255);
}

.home-page nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0%;
height:2px;
background:orange;
transition:0.3s;
}

.home-page nav a:hover::after{
width:100%;
}


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

.footer{
background:#0b2b57;
color:white;
padding:50px 20px;
}

.footer-top{
text-align:center;
margin-bottom:30px;
}



.footer-top p{
font-size:14px;
max-width:600px;
margin:auto;
color:#ccc;
}

.footer-container{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
margin-top:40px;
justify-content:center; 
}

.footer-box{
margin:20px;
text-align:center; 
}

.footer-box h3{
margin-bottom:15px;
font-size:16px;
}

.footer-box a{
display:block;
color:#ddd;
text-decoration:none;
margin-bottom:8px;
font-size:14px;
}

.footer-box a:hover{
color:orange;
}

.footer-box p{
font-size:14px;
margin-bottom:6px;
color:#ccc;
}

*/
/* SOCIAL ICONS 

.social-icons a{
display:inline-block;
margin-right:10px;
background:#1e4d8c;
padding:8px 10px;
border-radius:5px;
color:white;
font-size:14px;
}

.social-icons a:hover{
background:orange;
}
*/

/* FOOTER BOTTOM 

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.2);
margin-top:30px;
padding-top:15px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
font-size:12px;
color:#ccc;
}*/
/* ================= FOOTER ================= */

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

.footer{
background:#0b2b57;
color:white;
padding:50px 20px;
}

/* TOP TEXT */

.footer-top{
text-align:center;
margin-bottom:30px;
}

.footer-top p{
font-size:14px;
max-width:600px;
margin:auto;
color:#ccc;
}

/* STACK SECTIONS IN CENTER */

.footer-container{
display:flex;
flex-direction:column;   /* one by one */
align-items:center;      /* center horizontally */
justify-content:center;
margin-top:40px;
gap:35px;
text-align:center;
}

/* EACH SECTION */

.footer-box{
width:100%;
max-width:260px;   /* keeps sections centered */
text-align:center;
margin:auto;
}

/* HEADINGS */

.footer-box h3{
margin-bottom:15px;
font-size:18px;
}

/* LINKS */

.footer-box a{
display:block;
color:#ddd;
text-decoration:none;
margin-bottom:8px;
font-size:14px;
}

.footer-box a:hover{
color:orange;
}

/* CONTACT TEXT */

.footer-box p{
font-size:14px;
margin-bottom:6px;
color:#ccc;
}

/* SOCIAL ICONS */

.social-icons{
display:flex;
justify-content:center;
gap:10px;
margin-top:10px;
}

.social-icons a{
background:#1e4d8c;
padding:8px 10px;
border-radius:5px;
color:white;
font-size:14px;
}

.social-icons a:hover{
background:orange;
}

/* FOOTER BOTTOM */

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.2);
margin-top:30px;
padding-top:15px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
font-size:12px;
color:#ccc;
gap:6px;
}
/* ================= HOME PAGE - HERO SECTION ================= */

.hero{
background-image:url("images/homebackground.jpg");
background-size:cover;
background-position:center;
height:90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
position:relative;
}

/* dark overlay for better text visibility */

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
}

.hero-content{
position:relative;
z-index:2;
animation:fadeIn 2s;
}

.hero h1{
font-size:25px;
margin-bottom:10px;
color:rgb(255, 255, 56);
}

.hero p{
font-size:18px;
margin-bottom:20px;
}

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
}

.hero h1,
.hero p,
.hero .btn{
position:relative;
z-index:2;
animation:fadeIn 2s;
top:10px;
}


.new-car-text{
margin-top:10px;
color:hsl(0, 0%, 100%);
font-size:20px;
font-weight:bold;
animation:pulseText 1.5s infinite;

}

@keyframes pulseText{
0%{opacity:1;}
50%{opacity:0.5;}
100%{opacity:1;}
}
/* HERO CALL BUTTON */

.hero-call{
position: relative;
top: 160px;   /* move numbers down */
text-align:left;
}
.hero-call a{
color:white;
text-decoration:none;
font-size:16px;
font-weight:bold;
display:block;
margin-top:20px;
}
.hero-call a i{
margin-right:6px;
}
/* ================= OFFER BADGE ================= */

.hero{
position:relative;
}

.offer-badge{
position:absolute;
top:590px;

width:250px;
z-index:10;
animation:floatOffer 3s ease-in-out infinite;
}

.offer-badge img{
width:100%;
}

.offer-content{
position:absolute;
top:50%;
left:50%;   
transform:translate(-50%, -50%);
text-align:center;
color:black;
font-weight:bold;
}

.offer-content h3{
font-size:18px;
}

.offer-content h2{
color:red;
font-size:32px;
animation:pulsePrice 1.5s infinite;
left:50px;
}

.offer-content p{
font-size:14px;
}

/* FLOAT ANIMATION */

@keyframes floatOffer{
0%{transform:translateY(0);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0);}
}


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

.call-section{
text-align:right;
    
top:300px;
}

.phone-container{
position:relative;
display:inline-block;
animation:phoneFloat 3s ease-in-out infinite;
right:0px;
top:140px; 
}

.phone-container img{
width:380px;
max-width:8 0%;
}

/* FLOAT PHONE */

@keyframes phoneFloat{
0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}
}


/* BUBBLE TEXT */

.bubble-text{
position:absolute;
top:90px;
left:190px;
font-weight:bold;
font-size:14px;
animation:blinkText 1.5s infinite;
}

.bubble-text span{
color:red;
}


/* PHONE NUMBERS */

.phone-numbers{
position:absolute;
top:210px;
left:80px;
text-align:center;
}

.phone-numbers a{
display:block;
text-decoration:none;
color:yellow;
font-weight:bold;
font-size:16px;
animation:pulseNumber 1.5s infinite;
}
/* PRICE PULSE */

@keyframes pulsePrice{
0%{transform:scale(1);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}
}

/* TEXT BLINK */

@keyframes blinkText{
0%,100%{opacity:1;}
50%{opacity:0.5;}
}

/* PHONE NUMBER PULSE */

@keyframes pulseNumber{
0%{transform:scale(1);}
50%{transform:scale(1.05);}
100%{transform:scale(1);}
}

/* ================= MOBILE FIX FOR OFFER + PHONE ================= */

@media (max-width:768px){

/* OFFER BADGE */

.offer-badge{
position:relative;
top:0;
left:0;
right:0;
margin:30px auto;
display:block;
width:290px;
text-align:center;
}

/* PHONE SECTION */

.call-section{
text-align:center;
margin-top:20px;
}

.phone-container{
position:relative;
top:0;
right:0;
margin:auto;
display:block;
}

.phone-container img{
width:390px;
}

/* PHONE TEXT BUBBLE */

.bubble-text{
top:100px;
left:200px;
font-size:12px;
}

/* PHONE NUMBERS */

.phone-numbers{
top:200px;
left:80px;
}

}
/* ================= BUTTON STYLES ================= */

.btn{
background:orange;
padding:12px 25px;
color:white;
text-decoration:none;
border-radius:5px;
font-weight:bold;
transition:0.3s;
}

.btn:hover{
background:#ff7a00;
transform:scale(1.05);
}

/* ================= TESTIMONIAL SECTION ================= */

.testimonials{
padding:70px 25px;
text-align:center;
background:#f3f4f6;
}

.testimonials h2{
margin-bottom:20px;
font-size:22px;
letter-spacing:1px;
}

.testimonial-container{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.testimonial-card{
background:white;
width:260px;
padding:22px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
transition:0.3s;
}

.testimonial-card img{
width:50px;
height:50px;
border-radius:50%;
margin-top:15px;
}

.testimonial-card h4{
margin-top:12px;
font-size:14px;
}

.testimonial-card span{
font-size:12px;
color:gray;
}

/* center highlighted card */

.testimonial-card.active{
background:#ffffff;
color:rgb(14, 14, 14);
transform:scale(1.0);
}
/* ================= CARS PAGE ================= */
/*cars page header*/
.cars-page header{
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(4, 41, 50, 0.4);
color:white;
padding:18px 10px 18px 40px; 
position:absolute;
width:100%;
top:0;
left:0;
box-sizing:border-box;
z-index:100;
overflow:hidden;
}

.cars-page header h2{
font-size:15px;
letter-spacing:1px;
}

.cars-page nav a{
color:rgba(255,255,255,1);
margin-left:15px;
text-decoration:none;
font-size:18px;
font-weight:600;
transition:0.3s;
position:relative;
}

.cars-page nav a:hover{
color:orange;
}


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

.cars-page nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0%;
height:2px;
background:orange;
transition:0.3s;
}

.cars-page nav a:hover::after{
width:100%;
}
/*-------------------------*/
.cars{
padding:50px;
text-align:center;
margin-top:1px;
}

.car-container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
padding:40px;
width:90%;
}


.car-card{
background:white;
padding:10px;              /* increase padding */
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.4s;

max-width:420px;           /* bigger card */
margin:auto;
}

.car-card:hover{
transform:translateY(-10px) scale(1.03);
}

.car-card img{
width:100%;
height:260px;             /* bigger image */
object-fit:cover;         /* fit image inside card */
border-radius:1px;
}
@media(max-width:768px){

.car-container{
grid-template-columns:1fr;
}

.car-card:nth-child(4),
.car-card:nth-child(5){
grid-column:auto;
}
}
.car-gallery{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin:15px 0;
}

.car-gallery img{
width:100%;
border-radius:8px;
height:120px;
object-fit:cover;
}
/* IMAGE ZOOM VIEWER */

.image-viewer{

display:none;
position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.9);

justify-content:center;
align-items:center;

z-index:2000;

}

.image-viewer img{

max-width:90%;
max-height:90%;

border-radius:10px;

}

.close-viewer{

position:absolute;

top:20px;
right:40px;

font-size:40px;

color:white;

cursor:pointer;

}
.arrow{

position:absolute;
top:50%;

font-size:40px;
color:white;

cursor:pointer;

padding:10px;

transform:translateY(-50%);

}

.arrow.left{
left:40px;
}

.arrow.right{
right:40px;
}

.arrow:hover{
color:orange;
}

/* ================= CARS PAGE BACKGROUND ================= */

.cars-page{
background-image:url("images/carspageBG.webp");
background-size:cover;
background-position:center;
background-attachment:fixed;
}

/* light overlay */

.cars-page::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.4);
z-index:-1;
}
/* cars page icons*/
.service-icons{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
padding:60px 40px;
text-align:center;
background:rgba(255, 255, 255, 0.2);
}

.service-box{
background:rgb(231, 229, 229);
padding:25px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.4s;
animation:fadeUp 1s ease;
}

.service-box:hover{
transform:translateY(-10px);
}

.service-box i{
font-size:40px;
color:#0a76b5;
margin-bottom:10px;
animation:iconBounce 2s infinite;
}

.service-box h3{
margin:10px 0;
font-size:20px;
}

.service-box p{
font-size:14px;
color:#555;
}

/* icon animation */

@keyframes iconBounce{
0%{transform:translateY(0)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0)}
}

/* fade animation */

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}


/* ================= ABOUT PAGE ================= */
/* ================= HEADER ================= */

.about-page header{
display:flex;
flex-direction:column;          /* stack title and nav */
align-items:center;             /* center everything */

background:#c79ad8;             /* pink color */
color:white;

padding:15px 10px;

position:absolute;
width:100%;
top:0;
left:0;

box-sizing:border-box;
z-index:100;
}

/* TITLE */

.about-page header h2{
font-size:20px;
letter-spacing:1px;
color:rgb(210,244,100);
text-align:center;
line-height:1.3;
margin-bottom:10px;
}

/* NAVIGATION */

.about-page nav{
display:flex;
justify-content:center;
gap:25px;
}

/* LINKS */

.about-page nav a{
color:white;
text-decoration:underline;
font-size:18px;
font-weight:600;
position:relative;
transition:0.3s;
}

.about-page nav a:hover{
color:orange;
}

/* UNDERLINE ANIMATION */

.about-page nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0%;
height:2px;
background:orange;
transition:0.3s;
}

.about-page nav a:hover::after{
width:100%;
}
/* keep content above background */

.benefits > *{
position:relative;
z-index:1;
}

body{
background:#f5f5f5;
}


/* SECTION */
.benefits{
position:relative;
margin-top:140px;   /* pushes image below header */
padding:80px 10%;
text-align:center;

background-image:url("images/aboutus1.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.title{
font-size:32px;
color:lch(95.67% 5.72 19.68 / 0.997);
margin-bottom:60px;
position:relative;
}

.title:before,
.title:after{
content:"";
position:absolute;
width:80px;
height:2px;
background:#ddd;
top:50%;
}

.title:before{
left:0;
}

.title:after{
right:0;
}


/* GRID */

.benefits-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
}


/* CARD */

.benefit-card{
text-align:center;
transition:0.3s;
}

.benefit-card:hover{
transform:translateY(-8px);
}


/* ICON */

.icon{
font-size:60px;
margin-bottom:20px;
color:#ff6b00;
}


/* TEXT */

.benefit-card h3{
font-size:20px;
margin-bottom:10px;
color:#f5f2f2;
}

.benefit-card p{
color:#b3b0b0;
font-size:14px;
line-height:1.5;
max-width:220px;
margin:auto;
}


/* RESPONSIVE */

@media(max-width:900px){

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

}

@media(max-width:600px){

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

.title:before,
.title:after{
display:none;
}

}



.rent-process{
padding:100px 10%;
text-align:center;
color:white;
position:relative;
background:url("images/aboutus.2.jpeg") center/cover no-repeat;
}

/* DARK OVERLAY */

.rent-process::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
z-index:0;
}

.rent-container{
position:relative;
z-index:1;
}

.rent-title{
font-size:32px;
margin-bottom:70px;
}

/* STEPS LAYOUT */

.steps{
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
flex-wrap:wrap;
}

/* STEP CARD */

.step{
width:220px;
margin:auto;
}

/* ICON */

.step img{
width:70px;
margin-bottom:20px;
filter:brightness(0) invert(1);
}

/* TEXT */

.step h3{
color:white;
margin-bottom:10px;
}

.step p{
color:#ddd;
font-size:14px;
line-height:1.5;
}

/* RESPONSIVE */

@media(max-width:900px){

.steps{
flex-direction:column;
}

}

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

/* ================= MOBILE RESPONSIVE ================= */
/* CONTACT PAGE BACKGROUND */

.contact-page{

background:
linear-gradient(rgba(10,40,80,0.85), rgba(10,40,80,0.85)),
url("images/baleno.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

min-height:100vh;

}

@media (max-width:768px){

header{
flex-direction:column;
text-align:center;
padding:15px;
}

nav{
margin-top:10px;
}

nav a{
display:inline-block;
margin:8px;
font-size:16px;
}

/* CONTACT SECTION */

.contact-wrapper{
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px;
gap:30px;
}

/* MAP */

.map-container{
width:100%;
max-width:100%;
}

.map-container iframe{
width:100%;
height:320px;
border-radius:10px;
}

/* CONTACT CARD */

.contact-card{
width:100%;
max-width:400px;
padding:25px;
}

/* BANNER */

.contact-banner{
text-align:center;
padding:30px 20px;
margin-top:80px;
}

.banner-text h1{
font-size:30px;
}

.banner-text p{
font-size:16px;
}

/* FOOTER */

.footer-container{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:20px;
}

.footer-bottom{
flex-direction:column;
gap:10px;
text-align:center;
}

}

/* EXTRA SMALL PHONES */

@media (max-width:480px){

header h2{
font-size:14px;
}

nav a{
font-size:14px;
margin:6px;
}

.banner-text h1{
font-size:24px;
color:rgb(244, 244, 244);
}

.banner-text p{
font-size:14px;
}

.contact-text h3{
font-size:14px;
}

.contact-text p{
font-size:13px;
}

.map-container iframe{
height:260px;
}

.contact-card{
padding:20px;
}

}
/*header*/

.contact-page header{
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(83, 214, 214, 0.3);
color:rgb(248, 245, 43);
padding:18px 10px 18px 40px; 
position:absolute;
width:100%;
top:0;
left:0;
box-sizing:border-box;
z-index:100;
overflow:hidden;
}

/* MODIFIED: applied navcontact style to nav also */

.navcontact,
.contact-page nav{
display:flex;
gap:10px;   /* space between links */
justify-content:center;
flex-wrap:nowrap;   /* keeps all links in one line */
}

/* original code kept */

.contact-page header h2{
font-size:15px;
letter-spacing:2px;
}

.contact-page nav a{
color:rgb(255, 255, 255);
margin-left:15px;
text-decoration:none;
font-size:18px;
font-weight:600;
transition:0.3s;
position:relative;
white-space:nowrap;  /* prevents line break */
}

nav a:hover{
color:orange;
}

.contact-page nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0%;
height:2px;
background:orange;
transition:0.3s;
}

.contact-page nav a:hover::after{
width:100%;
}

.contact-banner{
margin-top:150px;
text-align:center;
color:white;
}

.contact-page{
color:rgb(255, 255, 255);
}

.aa{
color:#25D366;   /* green */
text-decoration:none;
}
/* ================= MOBILE VIEW ================= */

@media (max-width:768px){

header{
flex-direction:column;
align-items:flex-start;
padding:15px;
}

header h2{
font-size:14px;
margin-bottom:10px;
}

nav{
display:flex;
flex-wrap:wrap;
gap:10px;
}

nav a{
font-size:14px;
}

/* CONTACT WRAPPER */

.contact-wrapper{
flex-direction:column;
padding:20px;
gap:30px;
align-items:center;
}

/* MAP */

.map-container{
width:100%;
}

.map-container iframe{
width:100%;
height:250px;
}

/* CONTACT CARD */

.contact-card{
width:100%;
padding:25px;
}

/* FOOTER */

.footer-container{
flex-direction:column;
align-items:flex-start;
gap:30px;
}

.footer-bottom{
flex-direction:column;
text-align:center;
gap:10px;
}

}
/* ================= POPUP (CAR DETAILS) ================= */

.popup{
display:none;
position:fixed;

top:0;
left:0;

width:100%;
height:100%;
overflow-y:auto;
background:rgba(0,0,0,0.6);

z-index:1000;
}

.popup-content{
background:white;
width:320px;
padding:40px;

margin:0 auto;

border-radius:10px;
text-align:center;

position:relative;
top:0;
max-height:100vh;     /* limits height */
overflow-y:auto;     /* scroll inside popup */
animation:slideDown 0.5s ease;
}
.popup-content p{
margin:15px 0;
}
.popup-content::-webkit-scrollbar{
width:6px;
}

.popup-content::-webkit-scrollbar-thumb{
background:#888;
border-radius:10px;
}
.close{
font-size:25px;
cursor:pointer;
}
@keyframes slideDown{

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

to{
transform:translateY(100px);
opacity:1;
}

}

.book-btn{
background:orange;
color:white;
border:none;
padding:10px;
border-radius:10px;
cursor:pointer;
text-decoration:none; /* removes underline */
margin-top:30px; 
}   


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

.whatsapp{
position:fixed;
bottom:20px;
left:20px;
background:#25D366;
color:white;
font-size:28px;
padding:15px;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
transition:0.3s;
    z-index:9999;
}

.whatsapp:hover{
transform:scale(1.1);
}


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

.call{
position:fixed;
bottom:20px;
right:20px;
background:green;
color:white;
font-size:28px;
padding:15px;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
transition:0.3s;
}

.call:hover{
transform:scale(1.1);
}


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

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(-20px);
}
to{
opacity:1;
transform:translateY(0);
}
}