/* =========================================
COMMON PAGE STYLING
NatFoE 2026 Theme Style
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

    background:#f4f6fa;
    color:#222;

    overflow-x:hidden;
}

/* =========================================
PAGE BANNER
========================================= */

.page-banner{

    height:320px;

    background:
    linear-gradient(
    rgba(0,20,70,.85),
    rgba(0,20,70,.88)
    ),

    url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1600");

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

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

    text-align:center;

    color:white;

    padding:0 5%;

}

.page-banner h4{

    
    color: #ffc107;
    font-size: 20px;
    margin-bottom: 15px;
    line-height: 1.7;
}



.page-banner h1{

    font-size:62px;
    font-weight:800;

    margin-bottom:18px;

    line-height:1.1;

}

.breadcrumb{

    font-size:18px;
    color:#ddd;

}

.breadcrumb span{

    color:#ffc107;
    font-weight:600;

}

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

.about-main{

    padding:90px 6%;

}

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

.about-wrapper{

    display:grid;

    grid-template-columns:
    1.1fr 1fr;

    gap:50px;

    align-items:center;

    margin-bottom:60px;

}

/* =========================================
LEFT CONTENT
========================================= */

.about-left h2{

    font-size:42px;
    color:#001845;

    margin-bottom:10px;

    line-height:1.3;

}

.line{

    width:85px;
    height:4px;

    background:#ffc107;

    border-radius:50px;

    margin:18px 0 30px;

}

.about-left p{

    font-size:18px;

    line-height:2;

    color:#555;

    margin-bottom:25px;

    text-align:justify;

}

/* =========================================
RIGHT IMAGE
========================================= */

.about-right{

    position:relative;

}

.about-right img{

    width:100%;

    border-radius:25px;

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

}

/* =========================================
INFO BAR
========================================= */

.info-bar{

    background:#001845;

    color:white;

    display:flex;
    justify-content:space-around;
    align-items:center;

    gap:20px;

    padding:22px;

    border-radius:
    20px 20px 20px 20px;

    margin-top:-4px;

    font-size:17px;
    font-weight:500;

}

.info-bar div{

    display:flex;
    align-items:center;
    gap:10px;

}

.info-bar i{

    color:#ffc107;

}

/* =========================================
BOTTOM GRID
========================================= */

.bottom-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

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

.card{

    background:white;

    padding:35px;

    border-radius:24px;

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

    transition:.4s ease;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.12);

}

.card h3{

    font-size:24px;

    color:#001845;

    margin-bottom:28px;

}

/* =========================================
OBJECTIVES
========================================= */

.objective{

    display:flex;

    gap:18px;

    margin-bottom:22px;

    align-items:flex-start;

}

.objective i{

    min-width:50px;
    height:50px;

    background:#001845;

    color:white;

    border-radius:50%;

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

    font-size:18px;

}

.objective div{

    line-height:1.8;
    color:#444;

}

/* =========================================
QUOTE BOX
========================================= */

.quote{

    margin-top:30px;

    background:#fff5d8;

    border-left:5px solid #ffc107;

    padding:20px;

    border-radius:12px;

    line-height:1.8;

    font-weight:700;

    color:#333;

}

/* =========================================
LIST CARD
========================================= */

.card ul{

    list-style:none;

}

.card ul li{

    margin-bottom:18px;

    font-size:17px;

    color:#444;

    display:flex;
    align-items:center;

}

.card ul li i{

    color:#ffc107;

    margin-right:12px;

    font-size:15px;

}

/* =========================================
DARK CARD
========================================= */

.card.dark{

    background:#001845;

    color:white;

}

.card.dark h3{

    color:#ffc107;

}

.card.dark p{

    color:#ddd;

    line-height:2;

}

.card.dark h2{

    margin-top:15px;

    font-size:36px;

    line-height:1.4;

    color:white;

}

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

.inae-section{

    margin-top:80px;

    background:#001845;

    padding:60px;

    border-radius:30px;

    display:grid;

    grid-template-columns:
    250px 1fr;

    gap:50px;

    align-items:center;

    color:white;

}

.inae-left{

    text-align:center;

}

.inae-left img{

    width:190px;

    

    padding:20px;

    border-radius:20px;

}

.inae-right h2{

    font-size:38px;

    color:#ffc107;

}

.inae-right p{

    line-height:2;

    color:#ddd;

    margin-bottom:22px;

}

.inae-btn{

    display:inline-flex;

    align-items:center;
    gap:10px;

    padding:15px 30px;

    background:#ffc107;

    color:#001845;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}

.inae-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 10px 25px rgba(255,193,7,.35);

}

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

.iit-section{

    margin-top:60px;

    background:white;

    padding:60px;

    border-radius:30px;

    display:grid;

    grid-template-columns:
    250px 1fr;

    gap:50px;

    align-items:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}

.iit-left{

    text-align:center;

}

.iit-left img{

    width:190px;

}

.iit-right h2{

    font-size:38px;

    color:#001845;

}

.iit-right p{

    line-height:2;

    color:#555;

    margin-bottom:22px;

}

.iit-btn{

    display:inline-flex;

    align-items:center;
    gap:10px;

    padding:15px 30px;

    background:#001845;

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}

.iit-btn:hover{

    background:#ffc107;

    color:black;

    transform:translateY(-5px);

}

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

@media(max-width:991px){

    .about-wrapper,
    .bottom-grid,
    .inae-section,
    .iit-section{

        grid-template-columns:1fr;

    }

    .page-banner{

        height:260px;
        padding-top:60px;

    }

    .page-banner h1{

        font-size:40px;

    }

    .about-left h2,
    .inae-right h2,
    .iit-right h2{

        font-size:32px;

    }

    .about-main{

        padding:70px 5%;

    }

    .inae-section,
    .iit-section{

        padding:40px 30px;

        text-align:center;

    }

    .info-bar{

        flex-direction:column;

    }

}

@media(max-width:600px){

    .page-banner h1{

        font-size:32px;

    }

    .page-banner h4{

        font-size:15px;

    }

    .about-left p{

        font-size:16px;

    }

    .card{

        padding:28px;

    }

}