*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#0f172a;
    color:#fff;
    overflow-x:hidden;
}

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

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

#mainHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 80px;
    background:#ffffff;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);

    overflow:hidden;
}

/* Thicker Rotating Gradient Border */
#mainHeader::before{
    content:"";
    position:absolute;
    inset:-15px;   /* Border mota kiya */
    background:conic-gradient(
        #3b82f6,
        #facc15,
        #f97316,
        #3b82f6
    );
    animation:rotateBorder 6s linear infinite;
    z-index:-1;
}

/* Inner White Layer */
#mainHeader::after{
    content:"";
    position:absolute;
    inset:5px;   /* Border thickness match */
    background:#ffffff;
    z-index:-1;
}

/* Animation */
@keyframes rotateBorder{
    100%{
        transform:rotate(360deg);
    }
}

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

#mainHeader .logo img{
    height:75px;
}

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

#mainNav{
    display:flex;
    align-items:center;
}

#mainNav a{
    color:#111827;
    text-decoration:none;
    margin-left:30px;
    font-weight:600;
    position:relative;
    transition:0.3s;
}

/* underline animation */
#mainNav a::after{
    content:'';
    position:absolute;
    width:0%;
    height:5px;
    background:#facc15;
    left:0;
    bottom:-5px;
    transition:0.4s;
}

#mainNav a:hover{
    color:#facc15;
}

#mainNav a:hover::after{
    width:100%;
}

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

#hamburgerBtn{
    display:none;
    flex-direction:column;
    cursor:pointer;
}

#hamburgerBtn span{
    height:3px;
    width:25px;
    background:#111827;
    margin:4px 0;
    transition:0.4s;
}

/* animation when active */
#hamburgerBtn.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

#hamburgerBtn.active span:nth-child(2){
    opacity:0;
}

#hamburgerBtn.active span:nth-child(3){
    transform:rotate(-45deg) translate(5px,-5px);
}

/* ================= MOBILE VIEW ================= */

@media (max-width: 768px){

    #mainNav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#ffffff;
        flex-direction:column;
        align-items:center;
        max-height:0;
        overflow:hidden;
        transition:0.4s ease;
        box-shadow:0 10px 20px rgba(0,0,0,0.1);
    }

    #mainNav a{
        margin:15px 0;
        font-size:18px;
    }

    #mainNav.active{
        max-height:400px;
        padding:20px 0;
    }

    #hamburgerBtn{
        display:flex;
    }
}

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

.slider{
    position:relative;
    height:90vh;
    overflow:hidden;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:1s ease-in-out;
}

.slide.active{
    opacity:1;
}

/* Banner Images */
.slide:nth-child(1){
    background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
    url('assets/banner/1.jpeg');
    background-size:cover;
    background-position:center;
}

.slide:nth-child(2){
    background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
    url('assets/banner/2.jpeg');
    background-size:cover;
    background-position:center;
}

.slider h1{
    font-size:52px;
    margin-bottom:20px;
    animation:fadeDown 1.2s ease;
}

.slider p{
    font-size:18px;
    margin-bottom:30px;
    color:#e5e7eb;
    animation:fadeUp 1.2s ease;
}

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

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

/* Button */

.btn{
    padding:12px 30px;
    background:#facc15;
    color:#000;
    text-decoration:none;
    font-weight:600;
    border-radius:5px;
    transition:0.3s;
}

.btn:hover{
    background:#eab308;
    transform:translateY(-3px);
}

/* Slider Controls */

.controls{
    position:absolute;
    width:100%;
    top:50%;
    display:flex;
    justify-content:space-between;
    transform:translateY(-50%);
    padding:0 30px;
}

.controls span{
    font-size:45px;
    cursor:pointer;
    color:#fff;
    transition:0.3s;
}

.controls span:hover{
    color:#facc15;
}

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

.section{
    padding:80px 100px;
    text-align:center;
}

.section h2{
    margin-bottom:20px;
    font-size:36px;
    color:#facc15;
}

.section p{
    color:#d1d5db;
    max-width:700px;
    margin:auto;
}

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

footer{
    background:#111827;
    padding:40px;
    text-align:center;
    color:#9ca3af;
}

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

@media(max-width:992px){

    header{
        padding:15px 30px;
    }

    nav{
        position:absolute;
        top:100%;
        right:0;
        background:#ffffff;
        flex-direction:column;
        width:220px;
        text-align:left;
        padding:20px;
        display:none;
        box-shadow:0 5px 15px rgba(0,0,0,0.2);
    }

    nav a{
        margin:15px 0;
    }

    nav.active{
        display:flex;
    }

    .hamburger{
        display:flex;
    }

    .slider h1{
        font-size:32px;
    }

    .section{
        padding:60px 20px;
    }
}


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

.about-section{
    background:linear-gradient(rgba(139,0,0,0.95), rgba(139,0,0,0.95)),
    url('../assets/banner/about-bg.jpg');
    background-size:cover;
    background-position:center;
    padding:100px 80px;
}

.about-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.about-left img{
    width:100%;
    background-color: #fff;
    max-width:600px;
    border:5px solid #facc15;
}

.about-right{
    max-width:600px;
}

.about-right h2{
    font-size:42px;
    color:#ffffff;
    margin-bottom:20px;
    letter-spacing:2px;
}

.tagline{
    font-size:18px;
    color:#facc15;
    margin-bottom:20px;
    font-weight:600;
}

.about-right p{
    color:#f3f4f6;
    margin-bottom:20px;
    line-height:1.6;
}

/* Responsive */

@media(max-width:992px){

    .about-container{
        flex-direction:column;
        text-align:center;
    }

    .about-section{
        padding:60px 20px;
    }
}

/* ===== JOURNEY SECTION ===== */

.journey-section{
    background:#7c2d12;
    padding:100px 0;
    overflow:hidden;
    position:relative;
}

.journey-slider{
    display:flex;
    transition:0.6s ease;
}

.journey-item{
    min-width:33.33%;
    padding:60px;
    color:#fff;
    text-align:center;
    background:rgba(0,0,0,0.2);
    transition:0.5s;
    opacity:0.5;
}

.journey-item.active{
    background:rgba(255,255,255,0.08);
    opacity:1;
    transform:scale(1.05);
}

.journey-item h2{
    font-size:40px;
    margin-bottom:20px;
}

.highlight{
    color:#facc15;
    font-weight:600;
    margin-bottom:15px;
}

/* Controls */

.journey-controls{
    text-align:center;
    margin-top:40px;
}

.journey-controls button{
    background:#facc15;
    border:none;
    padding:10px 20px;
    margin:0 10px;
    font-size:20px;
    cursor:pointer;
}

/* ===== CONNECT SECTION ===== */

.connect-section{
    background:#7c2d12;
    padding:100px 5%;
}

.connect-wrapper{
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
}

.connect-box{
    background:#f3f3f3;
    padding:50px 40px;
    border-radius:25px;
    width:600px;        /* size bada */
    text-align:center;
}

.connect-title{
    font-size:32px;
    font-weight:700;
    margin-bottom:40px;
    color:#000;         /* title black */
}

.connect-cards{
    display:flex;
    justify-content:center;
    gap:25px;
}

.connect-card{
    width:160px;        /* card width bada */
    height:260px;       /* same height for all */
    padding:20px;
    border-radius:15px;
    text-align:center;
    transition:0.3s;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}

/* TEXT BLACK */
.connect-card h3{
    font-size:15px;
    margin-top:10px;
    color:#000;
    font-weight:600;
}

/* SAME IMAGE ALIGNMENT */
.connect-card img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    padding:6px;
    display:block;
    margin:0 auto;
}

/* Colors */

.blue{
    background:#3b82f6;
}

.yellow{
    background:#facc15;
}

.orange{
    background:#f97316;
}

/* Hover */

.connect-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 25px rgba(0,0,0,0.2);
}

/* Responsive */

@media(max-width:992px){
    .connect-wrapper{
        flex-direction:column;
        align-items:center;
    }

    .connect-box{
        width:100%;
        max-width:600px;
    }
}

/* SECTION */

.three-card-section{
    background:#e5e7eb;
    padding:100px 5%;
}

.card-wrapper{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

/* CARD */

.info-card{
    width:300px;
    padding:40px 25px;
    text-align:center;
    color:#fff;
    border-radius:10px;
    position:relative;
}

.info-card h3{
    font-size:18px;
    margin-bottom:25px;
    font-weight:700;
}

.info-card p{
    font-size:14px;
    line-height:1.6;
    margin-top:25px;
}

/* COLORS */

.blue{ background:#3b82f6; }
.yellow{ background:#facc15; color:#000; }
.orange{ background:#f97316; }

/* CIRCLE IMAGE */

.circle{
    width:160px;
    height:160px;
    margin:0 auto;
    border-radius:50%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.circle img{
    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    z-index:2;
}

/* ROTATING BORDER ANIMATION */

.circle::before{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    border-radius:50%;
    border:6px dashed #fff;
    animation:rotate 8s linear infinite;
}

/* Animation */

@keyframes rotate{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

/* Hover Effect */

.info-card:hover{
    transform:translateY(-10px);
    transition:0.3s;
    box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

/* Responsive */

@media(max-width:992px){
    .card-wrapper{
        flex-direction:column;
        align-items:center;
    }
}


.team-section{
    background:#f3f4f6;
    padding:80px 5%;
    text-align:center;
}

.team-title{
    background:#facc15;
    padding:15px;
    font-size:32px;
    font-weight:700;
    margin-bottom:60px;
}

.team-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.team-wrapper {
    display: flex;
    gap: 30px;
    transition: transform 0.8s linear;
    will-change: transform;
}



/* CARD */

.team-card{
    width:300px;
    padding:30px 20px;
    border-radius:15px;
    color:#fff;
    text-align:center;
    flex-shrink:0;
}

.yellow{ background:#facc15; color:#000; }
.blue{ background:#3b82f6; }
.orange{ background:#f97316; }


.team-img {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #ffffff;   /* White background */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Rotating border effect */
.team-img::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: conic-gradient(
        #facc15,
        #ff6b00,
        #3b82f6,
        #facc15
    );
    animation: rotateBorder 4s linear infinite;
    z-index: 0;
}

/* Inner white circle cover */
.team-img::after {
    content: "";
    position: absolute;
    width: 165px;
    height: 165px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 1;
}

/* Image styling */
.team-img img {
    width: 120px;
    position: relative;
    z-index: 2;
}

/* Animation */
@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.team-card h3{
    margin-bottom:5px;
}

.team-card span{
    font-size:14px;
    display:block;
    margin-bottom:15px;
}

.team-card p{
    font-size:14px;
    line-height:1.6;
}

/* Buttons */

.team-btn{
    background:#000;
    color:#fff;
    border:none;
    padding:10px 15px;
    cursor:pointer;
    position:absolute;
    z-index:10;
}

.team-btn.left{ left:0; }
.team-btn.right{ right:0; }

/* Responsive */



.contact-section {
    padding: 80px 10%;
    background: #f4f4f4;
}

.contact-card {
    display: flex;
    gap: 40px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 50px;
    flex-wrap: wrap;
}

/* Left Side */
.contact-info {
    flex: 1;
}

.contact-info h2 {
    font-size: 32px;
    margin-bottom: 15px;
    color: #f97316;
}

.contact-info p {
    margin-bottom: 25px;
    color: #555;
}

.info-item {
    margin-bottom: 15px;
}

.info-item strong {
    display: block;
    color: #111;
}

.info-item span {
    color: #555;
}

/* Right Side Form */
.contact-form {
    flex: 1;
}

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

.contact-form input,
.contact-form textarea {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.contact-form button {
    padding: 12px;
    background: linear-gradient(90deg, #facc15, #f97316);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.contact-form button:hover {
    opacity: 0.9;
}

/* Responsive */
@media(max-width:768px) {
    .contact-card {
        flex-direction: column;
        padding: 30px;
    }
}



.services-section {
    padding: 80px 10%;
    background: #e5e7eb;
    text-align: center;
    color: #fff;
}

.section-title {
    font-size: 36px;
    margin-bottom: 50px;
    font-weight: bold;
}

.services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
}

/* Base Card */
.service-card {
    padding: 40px 25px;
    border-radius: 20px;
    transition: 0.4s ease;
    position: relative;
    color: #fff;
}

/* Color Pattern 1 - Blue */
.services-container .service-card:nth-child(3n+1) {
    background: #3b82f6;
}

/* Color Pattern 2 - Yellow */
.services-container .service-card:nth-child(3n+2) {
    background: #facc15;
    color: #000;
}

/* Color Pattern 3 - Orange */
.services-container .service-card:nth-child(3n+3) {
    background: #f97316;
}

/* Hover Effect */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

/* CIRCLE DESIGN */
.service-img {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ROTATING BORDER */
.service-img::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(#facc15, #f97316, #3b82f6, #facc15);
    animation: rotateService 5s linear infinite;
    z-index: -1;
}

/* Emoji */
.service-img span {
    font-size: 55px;
}

/* Text */
.service-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 14px;
    opacity: 0.8;
    line-height: 1.6;
}

/* Animation */
@keyframes rotateService {
    100% {
        transform: rotate(360deg);
    }
}

.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#fff;
    text-decoration:none;
    z-index:1000;
    background:#ffffff;
}

/* Rotating Gradient Border */
.whatsapp-float::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background:conic-gradient(
        #3b82f6,
        #facc15,
        #f97316,
        #3b82f6
    );
    animation:rotateWhatsApp 4s linear infinite;
    z-index:-1;
}

/* Inner Circle */
.whatsapp-float::after{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:#3b82f6;
    z-index:-1;
}

/* Animation */
@keyframes rotateWhatsApp{
    100%{
        transform:rotate(360deg);
    }
}

/* Hover Effect */
.whatsapp-float:hover{
    transform:scale(1.1);
}


/* ================= GLOBAL MOBILE FIX ================= */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    /* HEADER */
    #mainHeader{
        padding:12px 20px;
    }

    #mainHeader .logo img{
        height:55px;
    }

    /* NAV */
    #mainNav{
        width:100%;
        text-align:center;
    }

    #mainNav a{
        font-size:16px;
        margin:12px 0;
    }

    /* SLIDER */
    .slider{
        height:75vh;
    }

    .slider h1{
        font-size:26px;
        padding:0 15px;
    }

    .slider p{
        font-size:14px;
        padding:0 20px;
    }

    .controls span{
        font-size:30px;
    }

    /* SECTION */
    .section{
        padding:50px 20px;
    }

    .section h2{
        font-size:26px;
    }

    /* ABOUT */
    .about-section{
        padding:60px 20px;
    }

    .about-container{
        flex-direction:column;
        text-align:center;
        gap:30px;
    }

    .about-left img{
        max-width:100%;
    }

    .about-right h2{
        font-size:26px;
    }

    /* JOURNEY */
    .journey-item{
        min-width:100%;
        padding:40px 20px;
    }

    .journey-item h2{
        font-size:26px;
    }

    /* CONNECT SECTION */
    .connect-section{
        padding:60px 20px;
    }

    .connect-box{
        width:100%;
        padding:30px 20px;
    }

    .connect-cards{
        flex-direction:column;
        gap:20px;
    }

    .connect-card{
        width:100%;
        height:auto;
    }

    /* THREE CARD SECTION */
    .three-card-section{
        padding:60px 20px;
    }

    .card-wrapper{
        flex-direction:column;
        gap:30px;
    }

    .info-card{
        width:100%;
    }

    .circle{
        width:120px;
        height:120px;
    }

    .circle img{
        width:100px;
        height:100px;
    }

    /* TEAM SECTION */
    .team-section{
        padding:60px 20px;
    }

    .team-title{
        font-size:24px;
        margin-bottom:40px;
    }

    .team-wrapper{
        gap:15px;
    }

    .team-card{
        width:85%;
        margin:auto;
    }

    .team-img{
        width:140px;
        height:140px;
    }

    .team-img::before{
        width:170px;
        height:170px;
    }

    .team-img::after{
        width:120px;
        height:120px;
    }

    .team-img img{
        width:90px;
    }

    /* CONTACT */
    .contact-section{
        padding:60px 20px;
    }

    .contact-card{
        flex-direction:column;
        padding:25px;
        gap:25px;
    }

    .contact-info h2{
        font-size:24px;
    }

    /* SERVICES */
    .services-section{
        padding:60px 20px;
    }

    .section-title{
        font-size:26px;
    }

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

    .service-img{
        width:110px;
        height:110px;
    }

    .service-img::before{
        width:140px;
        height:140px;
    }

    .service-img span{
        font-size:40px;
    }

    /* WHATSAPP BUTTON */
    .whatsapp-float{
        width:60px;
        height:60px;
        font-size:24px;
        bottom:20px;
        right:20px;
    }
}