/* ===============================
   ANNA BRIGADE PROFESSIONAL UI
================================ */


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


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


body{

background:#f4f6f9;
color:#222;

}



html{

scroll-behavior:smooth;

}



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


header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:1000;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 7%;


background:rgba(255,255,255,0.95);

backdrop-filter:blur(15px);


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

}




.logo{

display:flex;

align-items:center;

gap:15px;

}



.logo img{

width:65px;

height:65px;

border-radius:50%;

}



.logo h2{

font-size:26px;

color:#ff6b00;

}


.logo p{

font-size:13px;

color:#777;

}



nav{

display:flex;

gap:30px;

}



nav a{

text-decoration:none;

font-weight:600;

color:#333;

transition:.3s;

}



nav a:hover{

color:#ff6b00;

}



.login{

background:#ff6b00;

padding:12px 30px;

border-radius:30px;

color:white!important;

}

/* ================= HERO FOUNDER ================= */

.hero-founder {
    font-size: 26px;
    font-weight: 600;
    color: #FFD54F;
    margin: 15px 0 20px;
    text-shadow: 0 5px 20px rgba(0,0,0,.5);
}


/* MOBILE */

@media (max-width: 768px) {

    .hero-founder {
        font-size: 18px;
        line-height: 1.5;
        margin: 12px 0 15px;
    }

}



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

.hero{
    position:relative;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(10,20,45,.80),
        rgba(18,35,65,.70),
        rgba(8,15,35,.82)
    ),
    url("images/banner.jpg");

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

    color:#fff;
}

/* Elegant animated light */
.hero::before{
    content:"";
    position:absolute;
    inset:-20%;

    background:
        radial-gradient(circle at 20% 20%,rgba(255,140,0,.18),transparent 30%),
        radial-gradient(circle at 80% 30%,rgba(255,255,255,.10),transparent 28%),
        radial-gradient(circle at 60% 80%,rgba(255,193,7,.12),transparent 32%);

    animation:heroLight 14s ease-in-out infinite alternate;
}

@keyframes heroLight{

    0%{
        transform:scale(1) rotate(0deg);
    }

    100%{
        transform:scale(1.15) rotate(8deg);
    }

}

/* Content */

.hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    padding:20px;
}

.hero h3{
    color:#FFD54F;
    font-size:24px;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.hero h1{
    font-size:110px;
    font-weight:700;
    line-height:1.1;
    text-shadow:0 12px 35px rgba(0,0,0,.55);
}

.hero p{
    font-size:24px;
    color:#F5F5F5;
    margin:30px auto;
    max-width:700px;
    line-height:1.8;
}

/* Buttons */

.btn,
.btn2{

display:inline-block;
padding:16px 42px;
margin:12px;
border-radius:50px;
font-weight:600;
text-decoration:none;
transition:.35s;

}

.btn{

background:#ff6b00;
color:#fff;
box-shadow:0 15px 35px rgba(255,107,0,.35);

}

.btn:hover{

transform:translateY(-5px);

}

.btn2{

border:2px solid rgba(255,255,255,.7);
color:#fff;

}

.btn2:hover{

background:#fff;
color:#111;

}
@media (max-width: 900px){

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

}

@media (max-width: 500px){

    .hero h1{
        font-size:42px;
    }

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



section{

padding:90px 8%;

}



.title{

text-align:center;

font-size:42px;

margin-bottom:50px;

color:#ff6b00;

}

/* Founder */

/* ================= FOUNDER ================= */

.founder-section {
    width: 90%;
    max-width: 1250px;
    margin: 80px auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;
    gap: 70px;
}


/* ================= LEFT = IMAGE ================= */

.founder-photo {
    order: 1;

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.founder-photo img {
    display: block;

    width: 100%;
    max-width: 520px;

    height: auto;

    /* IMPORTANT: don't crop image */
    object-fit: contain;
    object-position: center;

    border-radius: 25px;

    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}


/* ================= RIGHT = TEXT ================= */

.founder-text {
    order: 2;

    text-align: left;
}

.founder-text h2 {
    font-size: 22px;
    color: #ff6b00;
    margin-bottom: 15px;
}

.founder-text h3 {
    font-size: 36px;
    line-height: 1.35;
    color: #222;
    margin-bottom: 25px;
}

.founder-text p {
    font-size: 18px;
    line-height: 1.9;
    color: #666;
    margin-bottom: 30px;
}


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

.founder-btn {
    display: inline-block;

    padding: 15px 32px;

    background: #ff6b00;
    color: #fff;

    border-radius: 30px;

    text-decoration: none;
    font-weight: 600;

    transition: .3s;
}

.founder-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(255,107,0,.30);
}


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

@media (max-width: 900px) {

    .founder-section {
        width: 92%;

        display: flex;
        flex-direction: column;

        gap: 40px;
        margin: 50px auto;
    }

    /* IMAGE FIRST */
    .founder-photo {
        order: 1;
        width: 100%;
    }

    .founder-photo img {
        width: 100%;
        max-width: 520px;

        height: auto;

        object-fit: contain;
    }

    /* TEXT SECOND */
    .founder-text {
        order: 2;

        width: 100%;
        text-align: center;
    }

    .founder-text h3 {
        font-size: 28px;
    }

    .founder-text p {
        font-size: 16px;
        text-align: left;
    }
}

.signature{

margin-top:35px;

border-top:2px solid #eee;

padding-top:20px;

}

.signature h3{

color:#ff6b00;

font-size:28px;

margin-bottom:5px;

}

.signature span{

color:#666;

font-size:16px;

}

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


.about{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.about img{

width:100%;

border-radius:30px;


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

}




.about p{

font-size:18px;

line-height:1.8;

margin-top:20px;

}




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



.cards{

display:grid;

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

gap:25px;

}



.card{

background:white;

padding:35px;

text-align:center;

border-radius:25px;


box-shadow:

0 15px 35px rgba(0,0,0,.08);


transition:.4s;

}



.card:hover{

transform:translateY(-15px);

}



.card i{

font-size:50px;

color:#ff6b00;

margin-bottom:20px;

}



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



.stats{

background:

linear-gradient(
135deg,
#ff6b00,
#ff9800
);


display:grid;

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

gap:25px;

}



.stats .box{


background:white;

padding:40px;

border-radius:25px;

text-align:center;

}



.stats h2{

font-size:55px;

color:#ff6b00;

}





/* ================= GALLERY ================= */



.gallery{

display:grid;

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

gap:25px;

}



.gallery img{

width:100%;

height:280px;

object-fit:cover;

border-radius:25px;

transition:.4s;

}



.gallery img:hover{

transform:scale(1.07);

}




/* ================= EVENTS ================= */



#homeEvents{

display:grid;

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

gap:25px;

}



.event{

background:white;

padding:30px;

border-radius:25px;


box-shadow:

0 15px 35px rgba(0,0,0,.1);

}





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


form{

max-width:600px;

margin:auto;

}


input,
textarea{


width:100%;

padding:16px;

margin:12px 0;

border-radius:15px;

border:1px solid #ddd;

}



textarea{

height:150px;

}



button{

background:#ff6b00;

color:white;

border:none;

padding:15px 40px;

border-radius:30px;

font-weight:bold;

}




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



footer{

background:#171717;

color:white;

text-align:center;

padding:50px;

}



footer i{

font-size:32px;

margin:15px;

color:#ff6b00;

}



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



@media(max-width:900px){


nav{

display:none;

}


.about{

grid-template-columns:1fr;

}


.cards{

grid-template-columns:1fr 1fr;

}


.stats{

grid-template-columns:1fr 1fr;

}


.gallery{

grid-template-columns:1fr;

}


#homeEvents{

grid-template-columns:1fr;

}


.hero h1{

font-size:45px;

}


}


.developer{

margin-top:20px;

font-size:14px;

color:#ddd;

letter-spacing:.5px;

}


.developer strong{

color:#ff6b00;

font-weight:700;

}

/* =====================================================
   PROFESSIONAL ORGANIZATION ANIMATIONS
===================================================== */

/* ---------- HERO ANIMATION ---------- */

.hero-content h3 {
    animation: fadeDown 1s ease both;
}

.hero-content h1 {
    animation: fadeUp 1.1s ease .15s both;
}

.hero-content p {
    animation: fadeUp 1.1s ease .3s both;
}

.hero-content .btn,
.hero-content .btn2 {
    animation: fadeUp 1.1s ease .45s both;
}


/* ---------- FOUNDER SECTION ---------- */

.founder-photo {
    animation: founderImageReveal 1.2s ease both;
}

.founder-text {
    animation: founderTextReveal 1.2s ease .2s both;
}


/* ---------- CARD ANIMATION ---------- */

.card {
    animation: cardReveal .8s ease both;
}

.card:nth-child(1) {
    animation-delay: .1s;
}

.card:nth-child(2) {
    animation-delay: .2s;
}

.card:nth-child(3) {
    animation-delay: .3s;
}

.card:nth-child(4) {
    animation-delay: .4s;
}


/* ---------- GALLERY ---------- */

.gallery img {
    animation: imageReveal .8s ease both;
}


/* ---------- EVENTS ---------- */

.event {
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.event:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0,0,0,.15);
}


/* ---------- FOUNDER IMAGE HOVER ---------- */

.founder-photo img {
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.founder-photo img:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 65px rgba(0,0,0,.22);
}


/* ---------- FOUNDER BUTTON ---------- */

.founder-btn {
    position: relative;
    overflow: hidden;
}

.founder-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform: skewX(-20deg);
    transition: .6s;
}

.founder-btn:hover::after {
    left: 130%;
}


/* ---------- NORMAL BUTTON SHINE ---------- */

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: "";
    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform: skewX(-20deg);
    transition: .6s;
}

.btn:hover::after {
    left: 130%;
}


/* ---------- KEYFRAMES ---------- */

@keyframes fadeDown {

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

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes fadeUp {

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

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes founderImageReveal {

    from {
        opacity: 0;
        transform: translateX(-60px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}


@keyframes founderTextReveal {

    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes cardReveal {

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

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes imageReveal {

    from {
        opacity: 0;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* =====================================================
   HERO LIGHT ANIMATION
===================================================== */

.hero::before {

    animation:
        heroLight 14s ease-in-out infinite alternate,
        heroGlow 6s ease-in-out infinite alternate;

}


@keyframes heroGlow {

    0% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }

}


/* =====================================================
   PROFESSIONAL MOBILE
===================================================== */

@media (max-width: 900px) {

    .hero-content h1 {
        font-size: 55px;
    }

    .hero-content {
        padding: 20px;
    }

    .founder-photo img {
        transform: none;
    }

    .founder-photo img:hover {
        transform: scale(1.01);
    }

}


/* SMALL MOBILE */

@media (max-width: 500px) {

    .hero-content h1 {
        font-size: 40px;
    }

    .hero-content h3 {
        font-size: 17px;
        letter-spacing: 2px;
    }

    .hero-content p {
        font-size: 17px;
        line-height: 1.6;
    }

    .founder-text h3 {
        font-size: 26px;
    }

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;

    }

}
/* =========================================================
   POSTER GENERATOR SECTION
========================================================= */

.poster-generator-section {

    margin-top: 45px;

    padding: 55px 25px;

    text-align: center;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #071a35,
            #0d294c
        );

}


/* Orange decorative line */

.poster-generator-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #ff6b00,
            #ffd166,
            #ff6b00
        );

}


/* Content */

.poster-generator-content {

    max-width: 750px;

    margin: auto;

    position: relative;

    z-index: 2;

}


/* Badge */

.poster-badge {

    display: inline-block;

    margin-bottom: 15px;

    padding: 7px 15px;

    border:
        1px solid
        rgba(255,209,102,.45);

    border-radius: 30px;

    color: #ffd166;

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* Heading */

.poster-generator-content h2 {

    margin-bottom: 12px;

    color: #ffffff;

    font-family:
        "Noto Sans Devanagari",
        sans-serif;

    font-size: clamp(
        25px,
        4vw,
        40px
    );

    font-weight: 900;

    line-height: 1.4;

}


/* Description */

.poster-generator-content p {

    max-width: 620px;

    margin: 0 auto 25px;

    color:
        rgba(255,255,255,.78);

    font-family:
        "Noto Sans Devanagari",
        sans-serif;

    font-size: 15px;

    line-height: 1.8;

}


/* Button */

.poster-generator-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        14px 28px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #e84f00
        );

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Noto Sans Devanagari",
        sans-serif;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 10px 25px
        rgba(255,107,0,.30);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.poster-generator-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 32px
        rgba(255,107,0,.42);

}


.poster-generator-btn i {

    font-size: 16px;

}


/* Mobile */

@media (max-width: 600px) {

    .poster-generator-section {

        padding:
            45px 18px;

    }


    .poster-generator-content p {

        font-size: 13px;

    }


    .poster-generator-btn {

        width: 100%;

        max-width: 300px;

    }

}
.member-id-generator-content {
    margin-top: 25px;
    padding: 35px 30px;
    text-align: center;

    background: linear-gradient(
        135deg,
        #0b2d50,
        #164f7d
    );

    border-radius: 20px;

    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(11,45,80,.15);
}

.member-id-badge {
    display: inline-block;

    padding: 7px 14px;

    margin-bottom: 12px;

    border-radius: 20px;

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

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;
}

.member-id-generator-content h2 {
    margin: 5px 0 12px;

    font-family:
        "Noto Sans Devanagari",
        sans-serif;

    font-size: 27px;

    font-weight: 800;
}

.member-id-generator-content p {
    max-width: 650px;

    margin: 0 auto 22px;

    font-size: 15px;

    line-height: 1.8;

    opacity: .92;
}

.member-id-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 24px;

    border-radius: 10px;

    background: #e67e22;

    color: #ffffff;

    text-decoration: none;

    font-weight: 700;

    transition: .2s;
}

.member-id-btn:hover {
    transform: translateY(-2px);

    background: #d96d16;
}