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

:root{

    --primary:#0D6EFD;
    --secondary:#0B1F3A;
    --accent:#00C6FF;
    --white:#ffffff;
    --light:#f8f9fa;
    --dark:#212529;
    --gray:#6c757d;
    --border:#e5e5e5;

    --shadow:0 10px 30px rgba(0,0,0,.08);
    --transition:.35s ease;

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:var(--light);
    color:var(--dark);
    overflow-x:hidden;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    transition:var(--transition);
}

ul{
    list-style:none;
    padding:0;
    margin:0;
}

section{
    padding:100px 0;
}

.container{
    max-width:1200px;
}

h1,h2,h3,h4,h5,h6{

    font-family:'Poppins',sans-serif;
    font-weight:700;
    color:var(--secondary);

}

p{

    color:#555;
    line-height:1.8;

}


/*======================================
    PRELOADER
======================================*/

#preloader{

    position:fixed;
    inset:0;
    background:#fff;
    z-index:99999;

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

}

#preloader::after{

    content:"";

    width:60px;
    height:60px;

    border-radius:50%;

    border:6px solid #ddd;
    border-top-color:var(--primary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


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

.navbar{

    background:#fff;
    box-shadow:var(--shadow);
    padding:18px 0;
    transition:.4s;

}

.navbar-brand{

    font-size:30px;
    font-weight:700;
    color:var(--primary)!important;

}

.navbar-nav .nav-link{

    color:var(--dark);
    font-weight:600;
    margin-left:20px;
    position:relative;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

.navbar-nav .nav-link.active{

    color:var(--primary);

}

.navbar-nav .nav-link::after{

    content:"";
    position:absolute;

    left:0;
    bottom:-5px;

    width:0;
    height:2px;

    background:var(--primary);

    transition:.35s;

}

.navbar-nav .nav-link:hover::after{

    width:100%;

}


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

.btn-primary-custom{

    background:var(--primary);
    color:#fff;

    border-radius:50px;

    padding:14px 30px;

    border:none;

    font-weight:600;

    transition:.35s;

}

.btn-primary-custom:hover{

    background:#0b5ed7;
    color:#fff;

    transform:translateY(-3px);

}

.btn-outline-custom{

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:50px;

    padding:14px 30px;

    font-weight:600;

    transition:.35s;

}

.btn-outline-custom:hover{

    background:var(--primary);

    color:#fff;

}


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

.section-title{

    text-align:center;
    margin-bottom:70px;

}

.section-title h2{

    font-size:40px;

    margin-bottom:15px;

}

.section-title p{

    max-width:700px;
    margin:auto;

}


/*======================================
    GLASS CARD
======================================*/

.glass-card{

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

    backdrop-filter:blur(10px);

    border-radius:20px;

    box-shadow:var(--shadow);

    padding:30px;

    transition:.35s;

}

.glass-card:hover{

    transform:translateY(-8px);

}


/*======================================
    BACK TO TOP
======================================*/

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;
    height:50px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:none;

    z-index:999;

    transition:.35s;

}

#backToTop:hover{

    transform:translateY(-5px);

}


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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

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

#home{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    padding-top:140px;
    background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%);
}

/* Background Shapes */

#home::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(13,110,253,.08);
    border-radius:50%;
    top:-120px;
    right:-120px;
}

#home::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(0,198,255,.10);
    border-radius:50%;
    left:-100px;
    bottom:-80px;
}

/* Hero Content */

.hero-content{
    position:relative;
    z-index:2;
}

.hero-subtitle{

    display:inline-block;
    padding:8px 18px;

    background:#EAF2FF;

    color:var(--primary);

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:58px;
    line-height:1.15;
    margin-bottom:20px;

}

.hero-content h1 span{

    color:var(--primary);

}

.hero-designation{

    font-size:22px;

    font-weight:600;

    color:var(--secondary);

    margin-bottom:10px;

}

.hero-organization{

    font-size:18px;

    color:var(--gray);

    margin-bottom:25px;

}

.hero-tagline{

    font-size:18px;

    line-height:1.8;

    max-width:620px;

    margin-bottom:35px;

}

/* Hero Buttons */

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:20px;

}

/* Hero Image */

.hero-image{

    position:relative;

    z-index:2;

    text-align:center;

}

.hero-image img{

    width:430px;

    max-width:100%;

    border-radius:25px;

    border:8px solid #fff;

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

    transition:.5s;

}

.hero-image img:hover{

    transform:translateY(-8px);

}

/* Floating Card */

.hero-card{

    position:absolute;

    bottom:35px;

    left:-20px;

    background:#fff;

    padding:18px 22px;

    border-radius:16px;

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

    animation:floatCard 3s ease-in-out infinite;

}

.hero-card h5{

    margin-bottom:5px;

    font-size:18px;

}

.hero-card p{

    margin:0;

    font-size:14px;

}

/* Social Icons */

.hero-social{

    display:flex;

    gap:12px;

    margin-top:35px;

}

.hero-social a{

    width:48px;

    height:48px;

    background:#fff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    box-shadow:var(--shadow);

    transition:.35s;

}

.hero-social a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-5px);

}

/* Floating Animation */

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

/* Hero Responsive */

@media(max-width:991px){

    #home{

        text-align:center;

        padding-top:120px;

    }

    .hero-content{

        margin-bottom:60px;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-designation{

        font-size:20px;

    }

    .hero-tagline{

        margin:auto;
        margin-bottom:30px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-social{

        justify-content:center;

    }

    .hero-card{

        display:none;

    }

}

@media(max-width:576px){

    .hero-content h1{

        font-size:34px;

    }

    .hero-designation{

        font-size:18px;

    }

    .hero-organization{

        font-size:16px;

    }

    .hero-tagline{

        font-size:16px;

    }

    .hero-image img{

        width:300px;

    }

}

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

.contact-card{

    display:block;

    background:#fff;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    color:var(--dark);

    box-shadow:var(--shadow);

    transition:.35s;

    height:100%;

}

.contact-card:hover{

    transform:translateY(-10px);

    color:var(--primary);

}

.contact-icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background:#eef5ff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:var(--primary);

    margin-bottom:20px;

    transition:.35s;

}

.contact-card:hover .contact-icon{

    background:var(--primary);

    color:#fff;

}

.contact-card h5{

    margin-bottom:10px;

    font-size:22px;

}

.contact-card span{

    font-size:15px;

    color:#666;

    word-break:break-word;

}

/*======================================
        BIOGRAPHY
======================================*/

.bio-tabs .nav-link{

    padding:14px 30px;

    margin:8px;

    border-radius:50px;

    font-weight:600;

    color:var(--secondary);

    background:#fff;

    border:2px solid #e8e8e8;

    transition:.35s;

}

.bio-tabs .nav-link.active{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

.bio-card{

    background:#fff;

    padding:45px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.bio-card h3{

    margin-bottom:25px;

    color:var(--secondary);

}

.bio-card p{

    text-align:justify;

    margin-bottom:20px;

    line-height:1.9;

    color:#555;

}

@media(max-width:768px){

    .bio-card{

        padding:25px;

    }

}

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

.photo-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    height:100%;

}

.photo-card:hover{

    transform:translateY(-10px);

}

.photo-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.4s;

}

.photo-card:hover img{

    transform:scale(1.05);

}

.photo-content{

    padding:25px;

    text-align:center;

}

.photo-content h5{

    margin-bottom:20px;

}

.photo-buttons{

    display:flex;

    gap:10px;

    justify-content:center;

    flex-wrap:wrap;

}

.photo-buttons .btn{

    border-radius:30px;

}

@media(max-width:768px){

    .photo-card img{

        height:280px;

    }

}

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

.download-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

    height:100%;

}

.download-card:hover{

    transform:translateY(-10px);

}

.download-icon{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:34px;

    margin-bottom:25px;

}

.download-card h4{

    margin-bottom:15px;

    font-size:24px;

}

.download-card p{

    color:#666;

    min-height:70px;

    margin-bottom:25px;

}

.download-card .btn{

    border-radius:40px;

    padding:12px 28px;

}

.bg-primary{

    background:#0D6EFD !important;

}

.bg-success{

    background:#198754 !important;

}

.bg-warning{

    background:#ffc107 !important;

    color:#222;

}

.bg-danger{

    background:#dc3545 !important;

}

.bg-secondary{

    background:#6c757d !important;

}

.bg-info{

    background:#0dcaf0 !important;

}

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

#footer{

    background:#0B1F3A;

    color:#fff;

    padding:80px 0 30px;

}

.footer-title{

    color:#fff;

    margin-bottom:25px;

    font-size:24px;

}

#footer p{

    color:#d8d8d8;

    line-height:1.9;

}

.footer-links{

    padding:0;

}

.footer-links li{

    margin-bottom:15px;

}

.footer-links a{

    color:#d8d8d8;

    transition:.3s;

}

.footer-links a:hover{

    color:#fff;

    padding-left:8px;

}

.footer-contact p{

    margin-bottom:15px;

}

.footer-contact i{

    color:var(--primary);

    width:25px;

}

.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}

.footer-social a{

    width:45px;

    height:45px;

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

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}

#footer hr{

    border-color:rgba(255,255,255,.12);

    margin:50px 0 25px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom p{

    margin:0;

}

.footer-bottom a{

    color:#fff;

    font-weight:600;

}

.footer-bottom a:hover{

    color:var(--accent);

}

@media(max-width:768px){

    .footer-bottom{

        text-align:center;

        justify-content:center;

    }

}

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

.navbar{

    transition:.35s;

}

.navbar.shadow{

    background:#fff;

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

}

/*======================================
        ACTIVE MENU
======================================*/

.navbar .nav-link.active{

    color:var(--primary);

    font-weight:700;

}
/*======================================
        Selection Colour
======================================*/
::selection{

background:#0D6EFD;

color:#fff;

}
/*======================================
        Focus
======================================*/
a:focus,
button:focus{

outline:none;

box-shadow:none;

}
/*======================================
        Print
======================================*/
@media print{

.navbar,
#backToTop,
.footer-social{

display:none;

}

}