/* RESET */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial;}
html{scroll-behavior:smooth;}


/* CONTAINER */
.container{
    width:90%;
    max-width:1100px;
    margin:auto;
}


/* TOP BAR */
.top-bar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background:linear-gradient(90deg,#c40000,#ff2d2d);
    z-index:1000;

	

}

.top-bar-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
}

/* LEFT SIDE */
.top-left a{
    color:#fff;
    text-decoration:none;
    margin-right:15px;
    display:inline-flex;
    align-items:center;
}

.top-left i{
    margin-right:6px;
}

/* RIGHT SIDE */
.top-right a{
    color:#fff;
    margin-left:10px;
    font-size:16px;
    transition:0.3s;
}

.top-right a:hover{
    color:#000;
}
@keyframes phonePulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.05);}
    100%{transform:scale(1);}
}
@media(max-width:768px){

    /* CENTER TOP BAR */
    .top-bar-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    /* HIDE EMAIL */
    .top-left a:nth-child(2){
        display:none;
    }

    /* PHONE STYLE (HIGHLIGHT) */
    .top-left a{
        font-size:16px;
        font-weight:bold;
        background:#000;
        padding:6px 15px;
        border-radius:20px;
        color:#fff;
		animation:phonePulse 1.5s infinite;

    }

    /* ICON SPACE */
    .top-left i{
        margin-right:5px;
    }

    /* OPTIONAL: HIDE SOCIAL ICONS FOR CLEAN LOOK */
    .top-right{
        display:none;
    }
}


/* HEADER */
.header{
    position:fixed;
    top:40px; /* below top bar */
    left:0;
    width:100%;
    height:80px;
    background:#111;
    z-index:999;

}

.header-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo img{
	height:80px;   /* increased size */
    
    display:block;
object-fit:contain;
    max-width:200px;

}


.logo{
    font-size:22px;
    font-weight:bold;
    color:#fff;
    letter-spacing:1px;
}

nav{
    display:flex;
}

nav a{
    color:#fff;
    margin-left:20px;
    text-decoration:none;
}

/* HAMBURGER */
.menu-toggle{
    display:none;
    width:30px;
    cursor:pointer;
}

.menu-toggle span{
    display:block;
    height:3px;
    background:#fff;
    margin:5px 0;
}

@media(max-width:768px){

    .header{
        height:70px;
    }

    .logo img{
        height:55px;
	    border-radius:2px;
    }

}

@media(max-width:992px){
    .logo img{
        height:55px;
		  border-radius:2px;
    }
}

/* HERO (FIXED PROPERLY) */
.hero{
    height:100vh;
    min-height:600px;
    background:url('images/banner.jfif') center/cover no-repeat;
    display:flex;
    align-items:center;
    padding-top:70px; /* IMPORTANT FIX */
    position:relative;
}

.hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:rgba(0,0,0,0.65); /* dark overlay */
    
    z-index:1;
}


.hero-inner{
    position:relative;
    z-index:2;
}

.hero-text{
    max-width:600px;
    color:#fff;
}

.hero-text h1{
    font-size:42px;
    line-height:1.2;
}

.hero-text p{
    margin:15px 0;
}

/* BUTTON FIX */
.hero-btns{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn{
    padding:12px 20px;
    text-decoration:none;
    border-radius:5px;
}

.primary-btn{
    background:#ecba16;
    color:#000;
}

.whatsapp-btn{
    background:#25D366;
    color:#fff;
}

.menu-toggle span{
    display:block;
    height:3px;
    background:#fff;
    margin:6px 0;
    transition:0.4s;
}

/* ANIMATE TO X */
.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}
.menu-toggle.active span:nth-child(2){
    opacity:0;
}
.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}

/* MOBILE PERFECT FIX */
@media(max-width:768px){

    .menu-toggle{display:block;}

    nav{
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#111;
        flex-direction:column;

        /* animation setup */
        opacity:0;
        transform:translateY(-20px);
        pointer-events:none;
        transition:0.4s ease;
    }

   nav.active{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    nav a{
        padding:15px;
        border-top:1px solid #333;
    }


    .hero{
        height:auto;
        padding:120px 0 80px;
    }

    .hero-text h1{
        font-size:26px;
    }

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

    .hero-btns .btn{
        width:100%;
        text-align:center;
    }
}




/* SECTION */
.section{padding:80px 0;}
.light{background:#f9f9f9;}

/* GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* CARD */


/* SERVICES PREMIUM BACKGROUND */
#services{
    background: linear-gradient(-45deg, #111, #1a1a1a, #222, #000);
    background-size: 400% 400%;
    animation: gradientMove 10s ease infinite;
    color:#fff;
	padding:100px 0 80px; /* more top space */
    position:relative;

}

#services h2{
    margin-bottom:40px;
    position:relative;
    z-index:2;
}
@keyframes gradientMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* SERVICES GRID */
/* SERVICES GRID FIX */
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px; /* increased gap prevents collision */
    position:relative;
    z-index:1;
	margin-top:20px; /* pushes cards down */
}

/* GLASS CARD */
/* SERVICE CARD */
.service-card{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    padding:25px;
    border-radius:15px;
    text-align:center;
    border:1px solid rgba(255,255,255,0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position:relative;
    z-index:1;
}

/* HOVER SAFE */
.service-card:hover{
    transform: translateY(-8px); /* removed scale */
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
    z-index:5; /* brings card above others */
}
/* ICON */
.service-card i{
    font-size:35px;
    color:#ecba16;
    margin-bottom:10px;
}

/* TEXT */
.service-card h3{
    margin:10px 0;
}

.service-card p{
    font-size:14px;
    opacity:0.9;
}

/* BUTTON */
.service-card button{
    margin-top:15px;
    padding:10px 20px;
    background:#ecba16;
    border:none;
    border-radius:5px;
    cursor:pointer;
    transition:0.3s;
}

.service-card button:hover{
    background:#ffd84d;
}

@media(max-width:768px){
    .services-grid{
        grid-template-columns:1fr;
    }
}

/* WHY SECTION */

/* SECTION */
.why-pro{
    padding:80px 20px;
    background:#fff;
}

/* GRID */
.why-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

/* IMAGE */
.why-img img{
    width:100%;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

/* CONTENT */
.why-content h2{
    margin-bottom:10px;
}

.why-sub{
    margin-bottom:25px;
    color:#555;
}

/* POINTS GRID */
.why-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

/* BOX */
.why-box{
    display:flex;
    gap:12px;
    background:#f9f9f9;
    padding:15px;
    border-radius:10px;
    transition:0.3s;
}

.why-box:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* ICON */
.why-box i{
    font-size:22px;
    color:#ecba16;
}

/* TEXT */
.why-box h4{
    margin-bottom:4px;
    font-size:15px;
}

.why-box p{
    font-size:13px;
    color:#666;
}

/* ================= TABLET ================= */
@media(max-width:992px){
    .why-grid{
        grid-template-columns:1fr;
    }
}

/* ================= MOBILE ================= */
@media(max-width:576px){

    .why-points{
        grid-template-columns:1fr;
    }

    .why-box{
        padding:12px;
    }

}

/* PROCESS SECTION */
.process h2{
    text-align:center;
}

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

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.step{
    background:#fff;
    padding:25px;
    text-align:center;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    transition:0.3s;
}

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

.step-icon{
    font-size:30px;
    color:#ecba16;
    margin-bottom:10px;
}

/* RESPONSIVE */
@media(max-width:768px){

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

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

@media(max-width:480px){
    .process-grid{
        grid-template-columns:1fr;
    }
}

/* FORM */
.form input,.form textarea{width:100%;padding:10px;margin:10px 0;}
button{background:#ecba16;padding:10px;border:none;}

/* IMAGE */
img{width:100%;border-radius:10px;}

/* MODAL */
.modal{
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.6);justify-content:center;align-items:center;
}
.modal-box{
    background:#fff;padding:20px;border-radius:10px;width:300px;
}

/* WHATSAPP */
.whatsapp{
    position:fixed;bottom:20px;right:20px;background:#25D366;
    padding:15px;border-radius:50%;color:#fff;font-size:20px;
}

/* MOBILE */
@media(max-width:768px){

    .menu-toggle{display:block;}
    nav{
        position:absolute;top:60px;left:0;width:100%;
        background:#111;flex-direction:column;display:none;
    }
    nav.active{display:flex;}
    nav a{padding:15px;border-top:1px solid #333;}

    .grid-2,.services-grid{grid-template-columns:1fr;}

    .hero{height:auto;padding:100px 0;}
}

/* FOOTER */
.footer{
    background:#111;
    color:#fff;
    padding:60px 0 20px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

/* COLUMN */
.footer-col h3,
.footer-col h4{
    margin-bottom:15px;
}

.footer-col p{
    font-size:14px;
    line-height:1.6;
}

/* LINKS */
.footer-col ul{
    list-style:none;
}

.footer-col ul li{
    margin-bottom:10px;
}

.footer-col ul li a{
    color:#ccc;
    text-decoration:none;
    transition:0.3s;
}

.footer-col ul li a:hover{
    color:#ecba16;
}

/* SOCIAL */
.social-icons{
    margin-top:10px;
}

.social-icons a{
    display:inline-block;
    margin-right:10px;
    font-size:18px;
    color:#fff;
    transition:0.3s;
}

.social-icons a:hover{
    color:#ecba16;
}

/* BOTTOM */
.footer-bottom{
    text-align:center;
    margin-top:30px;
    border-top:1px solid #333;
    padding-top:15px;
    font-size:14px;
}

/* RESPONSIVE */
@media(max-width:768px){
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .social-icons{
        justify-content:center;
    }
}
/* CONTACT */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

/* INFO */
.contact-info h2{
    margin-bottom:10px;
}

.contact-info p{
    margin-bottom:20px;
}

/* INFO BOX */
.info-box{
    display:flex;
    align-items:flex-start;
    margin-bottom:20px;
}

.info-box i{
    font-size:22px;
    color:#ecba16;
    margin-right:15px;
    margin-top:5px;
}

/* TEXT */
.info-box h4{
    margin-bottom:3px;
}

.info-box a{
    text-decoration:none;
    color:#333;
}

/* FORM */
.contact-form form{
    display:flex;
    flex-direction:column;
}

.contact-form input,
.contact-form textarea{
    padding:12px;
    margin-bottom:10px;
    width:100%;
}

.contact-form button{
    padding:12px;
    background:#ecba16;
    border:none;
    cursor:pointer;
}

/* RESPONSIVE */
@media(max-width:768px){
    .contact-grid{
        grid-template-columns:1fr;
    }
}

/* CONTAINER */
.floating-left{
    position:fixed;
    left:15px;
    bottom:100px;
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:999;
}

/* COMMON BUTTON */
.float-btn{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    text-decoration:none;
    transition:0.3s;
}

/* WHATSAPP */
.whatsapp-btn{
    background:#25D366;
}

/* CALL BUTTON (HIGHLIGHT) */
.call-btn{
    background:#ff3b3b;
    animation:pulse 1.5s infinite;
}

/* PULSE ANIMATION */
@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(255,59,59,0.7);
    }
    70%{
        box-shadow:0 0 0 15px rgba(255,59,59,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(255,59,59,0);
    }
}

/* HOVER EFFECT */
.float-btn:hover{
    transform:scale(1.1);
}

/* MOBILE FIX */
@media(max-width:480px){
    .floating-left{
        bottom:80px;
    }

    .float-btn{
        width:50px;
        height:50px;
        font-size:20px;
    }
}

/* ================= ABOUT SECTION ================= */
.about{
    padding:80px 20px;
    background:#f9f9f9;
}

/* GRID LAYOUT */
.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

/* ================= IMAGE ================= */
.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

/* EXPERIENCE BADGE */
.experience-box{
    position:absolute;
    bottom:20px;
    left:20px;
    background:#ecba16;
    padding:15px 20px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.experience-box h3{
    font-size:24px;
    margin-bottom:3px;
}

.experience-box p{
    font-size:13px;
}

/* ================= CONTENT ================= */
.about-content h2{
    font-size:32px;
    margin-bottom:15px;
}

.about-content p{
    margin-bottom:12px;
    color:#444;
    line-height:1.6;
}

/* ================= POINTS ================= */
.about-points{
    margin:20px 0;
}

.point{
    display:flex;
    align-items:center;
    margin-bottom:10px;
    font-size:15px;
}

.point i{
    color:#ecba16;
    margin-right:10px;
    font-size:18px;
}

/* ================= CTA ================= */
.about-cta{
    margin-top:15px;
}

.btn{
    padding:10px 20px;
    border-radius:5px;
    text-decoration:none;
    margin-right:10px;
    display:inline-block;
}

.primary-btn{
    background:#ecba16;
    color:#000;
}

.call-btn{
    background:#ff3b3b;
    color:#fff;
}

/* ================= STATS ================= */
.about-stats{
    width:100%;
    margin-top:60px;

    padding:50px 20px;

    background:linear-gradient(90deg,#c40000,#ff2d2d);
    color:#fff;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    text-align:center;

}

/* STAT BOX */

.stat-box:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,0.08);
}

.stat-box{
    padding:25px 15px;
    border-right:1px solid rgba(255,255,255,0.3);
}

/* REMOVE LAST BORDER */
.stat-box:last-child{
    border:none;
}

/* NUMBER */
.stat-box h3{
    font-size:32px;
    font-weight:bold;
    margin-bottom:5px;
}

/* TEXT */
.stat-box p{
    font-size:14px;
    opacity:0.9;
}
/* ================= TABLET ================= */
@media(max-width:992px){

    .about-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .about-content h2{
        font-size:28px;
    }

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

    .stat-box h3{
        font-size:28px;
    }
}

/* ================= MOBILE ================= */
@media(max-width:576px){

    .about{
        padding:60px 15px;
    }

    .about-content h2{
        font-size:24px;
    }

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

    .point{
        font-size:14px;
    }

    .btn{
        display:block;
        width:100%;
        margin-bottom:10px;
        text-align:center;
    }

    .about-stats{
        grid-template-columns:1fr;
        padding:40px 15px;
        gap:15px;
    }

    .stat-box{
        padding:20px;
    }

    .stat-box h3{
        font-size:24px;
    }

    .stat-box p{
        font-size:13px;
    }

    .experience-box{
        bottom:10px;
        left:10px;
        padding:10px 15px;
    }

    .experience-box h3{
        font-size:18px;
    }
}

/* FAQ SECTION */
.faq{
background:linear-gradient(135deg, #f8f9fb, #eef2f7);
    padding:80px 20px;
	
}

.faq-title{
    text-align:center;
    margin-bottom:40px;
}

/* ITEM */
.faq-item{
    background:#fff;
    border-radius:10px;
    margin-bottom:15px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    transition:0.3s;
}

/* QUESTION */
.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;
    cursor:pointer;
}

.faq-question h3{
    font-size:16px;
}

.faq-question .icon{
    font-size:22px;
    transition:0.3s;
}

/* ANSWER */
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
    padding:0 20px;
}

.faq-answer p{
    padding-bottom:15px;
    font-size:14px;
    color:#555;
}

/* ACTIVE */
.faq-item.active .faq-answer{
    max-height:200px;
}

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

/* HOVER */
.faq-item:hover{
    transform:translateY(-3px);
}

/* RESPONSIVE */
@media(max-width:768px){
    .faq-question h3{
        font-size:15px;
    }
}

/* MODAL BACKGROUND */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

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

    display:none; /* hidden by default */
    align-items:center;
    justify-content:center;

    z-index:9999;
}

/* MODAL BOX */
.modal-box{
    background:#fff;
    width:90%;
    max-width:400px;
    padding:25px;
    border-radius:10px;
    position:relative;

    animation:popup 0.3s ease;
}

/* ANIMATION */
@keyframes popup{
    from{
        transform:scale(0.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

/* CLOSE BUTTON */
.close-btn{
    position:absolute;
    top:10px;
    right:15px;
    font-size:20px;
    cursor:pointer;
}

/* FORM */
.modal-box input,
.modal-box textarea{
    width:100%;
    padding:10px;
    margin:10px 0;
}

.modal-box button{
    width:100%;
    padding:12px;
    background:#ecba16;
    border:none;
}