/* =========================================
   NESAM FOUNDATION
   STYLE.CSS
   PART 1
========================================= */

/* =========================================
   GLOBAL
========================================= */

body{
    font-family:'Poppins',sans-serif;
    background:#f8f9fa;
    color:#333;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    transition:.3s;
}

img{
    max-width:100%;
}

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

.top-header{
    background:#fff;
    border-bottom:2px solid #eaeaea;
    padding:10px 0;
}

.main-logo{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
}

.school-name-main{
    font-family:'Cinzel',serif;
    color:#1a528f;
    font-size:2.4rem;
    font-weight:700;
    letter-spacing:1px;
    line-height:.95;
    margin:0;
}

.school-sub-main{
    color:#1a528f;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:2px;
    margin-top:6px;
}

/* Donate Button */

.btn-success{
    background:#2fa184;
    border-color:#2fa184;
    font-weight:600;
}

.btn-success:hover{
    background:#237c66;
    border-color:#237c66;
}

.btn-outline-success{
    color:#2fa184;
    border-color:#2fa184;
}

.btn-outline-success:hover{
    background:#2fa184;
    border-color:#2fa184;
}

/* =========================================
   NAVBAR
========================================= */

.navbar{
    background:#1a528f;
    padding:0;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.navbar-nav{
    width:100%;
    justify-content:center;
}

.nav-link{
    color:#fff !important;
    font-weight:500;
    padding:16px 22px !important;
}

.nav-link:hover,
.nav-link.active{
    background:#123c69;
    color:#2fa184 !important;
}

.donate-link{
    font-weight:700;
}

/* =========================================
   HERO CAROUSEL
========================================= */

#heroCarousel{
    border-radius:15px;
    overflow:hidden;
}

#heroCarousel .carousel-item{
    background:#fff;
}

#heroCarousel img{
    width:100%;
    height:430px;
    object-fit:fit;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-size:75%;
}

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

.section-title,
.welcome-title{
    font-family:'Cinzel',serif;
    color:#1a528f;
    font-weight:700;
    border-bottom:3px solid #2fa184;
    display:inline-block;
    padding-bottom:8px;
}

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

.welcome-title{
    font-size:2rem;
}

.welcome-box{
    background:#fff;
    border-radius:15px;
    padding:30px;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.welcome-box p{
    line-height:1.9;
    color:#555;
}

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

.card{
    border:none;
    border-radius:15px;
    overflow:hidden;
    transition:.35s;
}

.card img{
    height:220px;
    object-fit:cover;
}

.card-body{
    padding:25px;
}

.card h5{
    color:#1a528f;
    font-weight:700;
    margin-bottom:15px;
}

.card p{
    color:#666;
    line-height:1.7;
}

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

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

.display-4{
    color:#1a528f;
    font-weight:700;
}

section:nth-of-type(even){
    background:#ffffff;
}

section:nth-of-type(odd){
    background:#f8f9fa;
}

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

.gallery-preview img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:12px;
    transition:.35s;
}

.gallery-preview img:hover{
    transform:scale(1.03);
    box-shadow:0 12px 25px rgba(0,0,0,.18);
}

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

.donate-section{
    text-align:center;
    padding:70px 20px;
}

.donate-section h2{
    color:#1a528f;
    font-family:'Cinzel',serif;
    margin-bottom:20px;
}

.donate-section p{
    color:#555;
    max-width:750px;
    margin:auto;
    line-height:1.8;
    margin-bottom:30px;
}

.btn-lg{
    padding:12px 28px;
    border-radius:50px;
    font-weight:600;
}

/* =========================================
   WHATSAPP
========================================= */

.whatsapp-float{
    position:fixed;
    width:60px;
    height:60px;
    right:30px;
    bottom:30px;
    border-radius:50%;
    background:#25d366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    z-index:999;
    animation:whatsappGlow 2s infinite;
}

.whatsapp-float:hover{
    color:#fff;
    transform:scale(1.08);
}

@keyframes whatsappGlow{

0%{
box-shadow:0 0 0 0 rgba(37,211,102,.7);
}

70%{
box-shadow:0 0 0 15px rgba(37,211,102,0);
}

100%{
box-shadow:0 0 0 0 rgba(37,211,102,0);
}

}

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

.main-footer{
    background:#1a528f;
    color:#fff;
    padding-top:50px;
    margin-top:60px;
}

.main-footer h5{
    font-family:'Cinzel',serif;
    color:#fff;
    border-bottom:2px solid #2fa184;
    display:inline-block;
    padding-bottom:8px;
    margin-bottom:20px;
}

.main-footer p,
.main-footer li,
.main-footer span{
    color:#fff;
    line-height:1.8;
    font-size:.92rem;
}

.main-footer ul{
    list-style:none;
    padding-left:0;
}

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

.main-footer a{
    color:#fff;
}

.main-footer a:hover{
    color:#2fa184;
}

.main-footer hr{
    border-color:rgba(255,255,255,.15);
}

/* =========================================
   SOCIAL ICONS
========================================= */

.social-icons{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:20px;
}

.social-icons a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.15rem;
    transition:.3s;
}

.social-icons a:hover{
    background:#2fa184;
    color:#fff;
    transform:translateY(-4px);
}

/* =========================================
   BUTTONS
========================================= */

.btn{
    transition:.3s;
}

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

/* =========================================
   IMAGES
========================================= */

.img-fluid{
    border-radius:15px;
}

.shadow{
    box-shadow:0 10px 25px rgba(0,0,0,.12)!important;
}

.rounded{
    border-radius:15px!important;
}

/* =========================================
   SPACING
========================================= */

section{
    padding-top:70px;
    padding-bottom:70px;
}

.container{
    position:relative;
}

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

h1,h2,h3,h4,h5,h6{
    font-weight:700;
}

p{
    font-size:.97rem;
    line-height:1.8;
}

.text-primary{
    color:#1a528f!important;
}

.text-success{
    color:#2fa184!important;
}

/* =========================================
   SMALL ANIMATIONS
========================================= */

.card,
img,
.btn,
.nav-link,
.social-icons a{
    transition:all .35s ease;
}

.fade-up{
    animation:fadeUp .7s ease;
}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(25px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

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

@media(max-width:992px){

#heroCarousel img{
height:420px;
}

.school-name-main{
font-size:2rem;
}

.school-sub-main{
font-size:.72rem;
letter-spacing:1px;
}

}

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

@media(max-width:768px){

.top-header{
text-align:center;
}

.main-logo{
width:58px;
height:58px;
margin-bottom:10px;
}

.school-name-main{
font-size:1.65rem;
}

.school-sub-main{
font-size:.60rem;
letter-spacing:.8px;
}

.navbar-nav{
text-align:center;
}

.nav-link{
padding:12px!important;
}

#heroCarousel img{
height:240px;
object-fit:cover;
}

.welcome-title{
font-size:1.6rem;
}

.card img{
height:200px;
}

.display-4{
font-size:2.3rem;
}

.btn-lg{
width:100%;
margin-bottom:15px;
}

.social-icons{
justify-content:center;
}

.main-footer{
text-align:center;
}

.whatsapp-float{
width:55px;
height:55px;
font-size:28px;
right:18px;
bottom:18px;
}

}

/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media(max-width:576px){

.container{
padding-left:18px;
padding-right:18px;
}

.card-body{
padding:20px;
}

.card h5{
font-size:1.1rem;
}

.card p{
font-size:.92rem;
}

section{
padding-top:50px;
padding-bottom:50px;
}

}

/* =========================================
   DESKTOP ENHANCEMENTS
========================================= */

@media(min-width:1200px){

.container{
max-width:1180px;
}

.card:hover img{
transform:scale(1.05);
}

.gallery-preview img:hover{
transform:scale(1.05);
}

}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#eef2f5;
}

::-webkit-scrollbar-thumb{
background:#1a528f;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#123c69;
}

/* =========================================
   SELECTION
========================================= */

::selection{
background:#1a528f;
color:#fff;
}

/* =========================================
   REMOVE FOCUS OUTLINES ON BUTTONS
========================================= */

button:focus,
.btn:focus,
.navbar-toggler:focus{
box-shadow:none!important;
}

/* =========================================
   NAVBAR TOGGLER
========================================= */

.navbar-toggler{
border:none;
padding:10px;
}

.navbar-toggler-icon{
filter:brightness(0) invert(1);
}

/* =========================================
   SMOOTH SCROLL
========================================= */

html{
scroll-behavior:smooth;
}

/* Founder Image */

.founder-img{
    width: 190px;
    height: 260px;
    object-fit: contain;
    object-position: center;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform .3s ease;
}

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

@media (max-width:768px){
    .founder-img{
        width: 200px;
        height: 200px;
    }
}

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

.gallery-img{
    width:100%;
    height:300px;
    object-fit:contain;
    cursor:pointer;
    transition:.3s;
}

.gallery-img:hover{
    transform:scale(1.02);
}

.gallery-preview .card{
    border:none;
    border-radius:15px;
    overflow:hidden;
    transition:.3s;
}

.gallery-preview .card:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.gallery-preview .card-body{
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery-preview h5{
    margin:0;
    font-size:1.1rem;
    font-weight:600;
}

#galleryModal img{
    max-height:90vh;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 15px;
}