body{
    margin:0;
    font-family:'Segoe UI',sans-serif;
    background:#000;
    color:white;
    font-weight:bold; /* bold text */
    font-size: 20px;
}


/* Top Bar */
.topbar{
    background:#724B20;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 30px;
    font-weight:600;
    gap:40px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}
 /* .topbar .txt:first-child{
    margin-left: 200px;
} */
.txt{
    text-decoration:none;
    
      background-color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.5); */
}
.topbar .txt:last-child{
    margin-right: 200px;
}
/* Hero Section */
/*.hero{
    height:100vh;
    /*background:url('images/logo.jpeg') center/cover no-repeat;*/
/*    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
}*/
.header{
    background:#000;
    display:flex;
    flex-direction:column;   /* 👈 important */
    align-items:center;      /* 👈 center */
    padding:55px 20px 0px;
    text-align:center;
    margin-top: 20px;
}

.logo img{
    height:200px;
    width:auto;
}

.header-text{
    background-color: #724B20;
    
    margin-top:10px;
   padding: 10px 10px;
   border-radius: 20px;
    align-items:center;
}

.header-text h1{
    margin:0;
    font-size:28px;
    color:#82CDE9;
}

.header-text p{
    margin:5px 0 0;
    color:#08abe6;
}

section{
    padding:10px 10px;
}

h2{
    color:#d4af37;
    text-align: center;
    margin-bottom:10px;
}
.hero{
    background:#000000;
    margin-top:60px;
    min-height:60vh;
    display:flex;
    align-items:center;
    /*justify-content:space-between;*/
    padding:0px 8%;
    gap:40px;
    border-radius:20px;
}

.hero-left{
    flex:1;
}

.hero-left img{
    height: 400px;
    width:80%;
    max-width:500px;
    border-radius:20px;
}

.hero-right{
    flex:1;
    display:flex;
    justify-content:center;
}
.overlay{
    background:rgba(0,0,0,0.6);
    padding:40px;
    border-radius:20px;
    width:350px;
}

.overlay h2{
    color:#d4af37;
    text-align:center;
}
.overlay{
    background:rgba(0,0,0,0.6);
   
}

/*.overlay:hover{
    background:linear-gradient(135deg,#d4af37,#b8962e);
    color:#000;
}*/
input{
    width:100%;
    padding:10px;
    margin:10px 0;
    border:none;
    border-radius:8px;
}

button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:25px;
    background:#e30613;
    color:white;
    font-weight:bold;
    cursor:pointer;
}

button:hover{
    opacity:0.9;
}


.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;

}

.card{
    background:url('images/bg1.jpg') center/cover no-repeat;
    /*background:#151515;*/
    padding:15px;
    border-radius:16px;
    cursor:pointer;
    transition:0.3s;
}
.cardssec{
    display:grid;
    grid-template-columns:1fr 1fr; /* 👈 2 columns */
    gap:20px;
}

/* each box */
.row-box{
    display:flex;
    align-items:center;
    background: #32324A;
    /*background:#494A6B;*/
    padding:10px;
    border-radius:12px;
    gap:0px;
}

/* inside split */
.row-text,
.row-image{
    flex:1;
}

.row-image{
    display:flex;
    justify-content:flex-end;
}

.row-image img{
    padding: auto;
    width:auto;
    max-width:220px;
    height:auto;
    object-fit:contain;
    border-radius:10px;
}
.card1{
    background:url('images/sec1.jpg') center/cover no-repeat;
    /*background:#151515;*/
    padding:25px;
    border-radius:16px;
    cursor:pointer;
    transition:0.3s;
    height: 300px;
}
.card2{
    background:url('images/sushi.jpg') center/cover no-repeat;
    /*background:#151515;*/
    padding:25px;
    border-radius:16px;
    cursor:pointer;
    transition:0.3s;
}
.card3{
    background:url('images/state-library-melbourne.jpg') center/cover no-repeat;
    /*background:#151515;*/
    padding:25px;
    border-radius:16px;
    cursor:pointer;
    transition:0.3s;
}
.hero:hover{
     transform: translateY(-6px);
    background: linear-gradient(135deg,#d4af37,#b8962e); /* golden */
    color:#000; /* text black ho jayega */
    box-shadow: 0 0 25px rgba(212,175,55,0.7);
    border: 1px solid #d4af37;
}
.card:hover{
    transform: translateY(-6px);
    background: linear-gradient(135deg,#d4af37,#b8962e); /* golden */
    color:#000; /* text black ho jayega */
    box-shadow: 0 0 25px rgba(212,175,55,0.7);
    border: 1px solid #d4af37;
}
.card1:hover{
    transform: translateY(-6px);
   color: #000;
    background: linear-gradient(135deg,#d4af37,#b8962e);
    border: 1px solid #d4af37;
}
.card2:hover{
    transform: translateY(-6px);
    color: #000;
    background: linear-gradient(135deg,#d4af37,#b8962e);
    box-shadow: 0 0 25px rgba(212,175,55,0.7);
    border: 1px solid #d4af37;
}
.card3:hover{
    transform: translateY(-6px);
   color: #000;
    background: linear-gradient(135deg,#d4af37,#b8962e); 
    box-shadow: 0 0 25px rgba(212,175,55,0.7);
    border: 1px solid #d4af37;
}
.footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 5%;
    background:#e30613;
}

.footer-left{
    flex:1;
}

.footer-center{
    flex:1;
    display:flex;
    justify-content:center;
     color: #000000;

}

.footer-right{
    flex:1;
    display:flex;
    justify-content:flex-end;
}

.footer-left img{
    width:120px;
    height: 120px;
    /*border-radius:10px;*/
}

.footer-right{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;

}

.footer-right .links{
    display:flex;
    justify-content:center;
    gap:20px;
}

.footer-right .links a{
    color:white;
    text-decoration:none;
}

.footer-right .social a{
    margin:0 8px;
    font-size:20px;
    text-decoration:none;
}
.footer-center .links{
    display:flex;
    gap:25px; /* space between links */
}

.footer-center .links a{
    text-decoration:none; /* remove underline */
    color:#000;
}

.card img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:15px;
}
.tech-wrapper .tech-section{
    display:flex;
    align-items:center;

    justify-content:space-between;
    gap:30px;
    padding:40px 8%;
}

/* ✅ Correct alternating */
.tech-wrapper .tech-section:nth-of-type(even){
    flex-direction: row-reverse;
}

.tech-left{
    flex:1;
    text-align:center;
}

.tech-left h2{
    color:#d4af37;
    margin-bottom:10px;
}

.tech-left p{
    font-size:18px;
    text-align:center;
}

.tech-right{
    flex:1;
    display:flex;
    justify-content:center;
}

.tech-right img{
    width:100%;
    max-width:500px;   /* fix big image */
    border-radius:20px;
}
.tech-left ul{
    display:inline-block;   /* 👈 important for perfect centering */
    text-align:left;        /* 👈 text readable rahe */
    padding:0;
    margin-top:15px;
}

.tech-left ul li{
    margin-bottom:8px;
}
/* Title */
.main-title{
    text-align:center;
    margin:40px 0 10px;
    color:#fff;
}
h3{
    color: #F5D77A;
}
/* Accordion container */
.accordion-item{
    margin-bottom:10px;
    border-radius:8px;
    overflow:hidden;
    background:#1a1a1a; /* dark card */
    border:1px solid #333;
}

/* Button */
.accordion-btn{
    width:100%;
    padding:14px 15px;
    text-align:left;
    border:none;
    background:#222;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    color:#fff; /* white text */
    transition:0.3s;
}

.accordion-btn:hover{
    background:#2c2c2c;
}

/* Content */
.accordion-content{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
    padding:0 15px;
    background:#1a1a1a;
}

/* Text inside */
.accordion-content p{
    margin:10px 0;
    color:#ccc; /* light gray text */
    font-size:14px;
}

/* Links */
.accordion-content a{
    display:inline-block;
    margin:5px 0 10px;
    color:#4da6ff; /* highlight blue */
    text-decoration:none;
    font-size:14px;
}

.accordion-content a:hover{
    text-decoration:underline;
}

/* Active open */
.accordion-item.active .accordion-content{
    max-height:200px;
    padding:10px 15px;
}

/* Optional: heading color fix */
.tech-left h2,
.tech-left p{
    color:#fff;
}


.loader {
    margin-top:10px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.success-msg {
    margin-top:10px;
    color: green;
    font-size: 14px;
}

/* ============================= */
/* 📱 MOBILE RESPONSIVE */
/* ============================= */

@media (max-width: 768px){
.tech-section{
        flex-direction:column !important;   /* vertical layout */
        text-align:center;
        gap:0px;                           /* proper spacing */
        padding:0px 0px;
    }

    .tech-left{
        order:1;   /* text first */
        width:100%;
    }

    .tech-right{
        order:2;   /* image below */
        width:100%;
        margin-top:0px;
        justify-content:center;
    }

    .tech-right img{
        width:100%;
        max-width:90%;      /* mobile perfect fit */
        height:auto;
        border-radius:15px;
    }

    .tech-left h2{
        font-size:22px;
        margin-bottom:0px;
    }

    .tech-left p{
        font-size:16px;
        line-height:1.6;
        padding:0 0px;     /* side breathing space */
    }


    body{
        font-size:16px;
    }

    /* Topbar */
    .topbar{
        flex-direction:column;
        gap:5px;
        padding:10px;
        text-align:center;
    }

    .topbar .txt:first-child,
    .topbar .txt:last-child{
        margin:0;
    }

    .txt{
        margin-right: 40px;
    }

    /* Header */
    .header{
        flex-direction:column;
        text-align:center;
        padding:70px 20px 20px;
        margin-top: 70px;
    }

    .logo img{
        height:230px;
        margin-bottom:0px;
    }

    /* Sections */
    section{
        padding:5px 5px;
    }

    /* Cards Grid */
    .cards{
        grid-template-columns:1fr;
    }

    /* Row Box (Image + Text) */
    .cardssec{
        grid-template-columns:1fr;
    }

    .row-box{
        flex-direction:column;
        text-align:center;
    }

    .row-image{
        justify-content:center;
        margin-top:1px;
    }

    .row-image img{
        max-width:150px;

    }

    /* Tech Sections */
    .tech-section{
        flex-direction:column;
        text-align:center;
        padding:0px 0px;
    }

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

    .tech-right img{
        max-width:100%;
    }

    /* Hero Section */
    .hero{
        flex-direction:column;
        padding:20px;
        gap:20px;
    }

    .hero-left img{
        width:100%;
        height:auto;
    }

    .overlay{
        width:100%;
    }

    /* Footer */
    .footer{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .footer-left img{
        width:80px;
        height:auto;
    }

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

    /* Project Cards */
    .card1, .card2, .card3{
        height:auto;
        min-height:200px;
    }


}