/*==========================
RESET
==========================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#F7FAFC;
    color:#2D3748;
}

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

.ssf-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:#F8FCFF;

    border-bottom:1px solid #E6EEF5;

    transition:.4s;

}

/* Shadow when scrolling */

.ssf-header.scrolled{

    background:#ffffff;

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

}

/*==========================
CONTAINER
==========================*/

.ssf-container{

    max-width:1320px;

    margin:auto;

    padding:0 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*==========================
LOGO
==========================*/

.ssf-logo{

    display:flex;

    align-items:center;

    text-decoration:none;

    gap:15px;

}

.ssf-logo img{

    height:90px;

    width:auto;

    display:block;

    transition:.3s;

}

.ssf-logo:hover img{

    transform:scale(1.05);

}

.ssf-logo-text{

    display:flex;

    flex-direction:column;

}

.ssf-logo-text h2{

    font-size:26px;

    color:#1565C0;

    font-weight:700;

    line-height:1.2;

}

.ssf-logo-text span{

    font-size:13px;

    color:#6B7280;

    margin-top:4px;

}

/*==========================
DESKTOP NAVIGATION
==========================*/

.ssf-navbar{

    margin-left:auto;

}

.ssf-navbar>ul{

    display:flex;

    align-items:center;

    list-style:none;

    gap:35px;

}

.ssf-navbar>ul>li{

    position:relative;

}

.ssf-navbar>ul>li>a{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#243B53;

    font-size:16px;

    font-weight:600;

    padding:38px 0;

    transition:.35s;

    position:relative;

}

/*==========================
UNDERLINE ANIMATION
==========================*/

.ssf-navbar>ul>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:22px;

    width:0;

    height:3px;

    border-radius:50px;

    background:#2196F3;

    transition:.35s;

}

.ssf-navbar>ul>li>a:hover{

    color:#2196F3;

}

.ssf-navbar>ul>li>a:hover::after{

    width:100%;

}

/*==========================
DROPDOWN
==========================*/

/*==============================
DESKTOP DROPDOWN
==============================*/

.has-dropdown{
    position:relative;
}

.has-dropdown > .dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:260px;

    background:#fff;

    border-radius:12px;

    padding:12px 0;

    list-style:none;

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

    display:block;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:99999;

}

.has-dropdown:hover > .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    display:block;

    width:100%;

}

.dropdown-menu li a{

    display:block;

    width:100%;

    padding:14px 22px;

    color:#2D3748;

    text-decoration:none;

    transition:.3s;

}

.dropdown-menu li a:hover{

    background:#EDF6FF;

    color:#1976D2;

    padding-left:30px;

}

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

.donate-btn{

    margin-left:35px;

    text-decoration:none;

    background:linear-gradient(135deg,#FF9800,#FF6A00);

    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 8px 20px rgba(255,106,0,.20);

}

.donate-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(255,106,0,.35);

}

/*==========================
HAMBURGER

Hidden on Desktop

==========================*/

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:#EDF5FF;

    cursor:pointer;

    position:relative;

    transition:.3s;

}

.mobile-toggle:hover{

    background:#2196F3;

}

.mobile-toggle span{

    position:absolute;

    left:12px;

    width:24px;

    height:2px;

    background:#1565C0;

    transition:.35s;

}

.mobile-toggle:hover span{

    background:#fff;

}

.mobile-toggle span:nth-child(1){

    top:15px;

}

.mobile-toggle span:nth-child(2){

    top:23px;

}

.mobile-toggle span:nth-child(3){

    top:31px;

}
/* Active Menu */

.ssf-navbar a.active{

    color:#1976D2;

}

.ssf-navbar a.active::after{

    width:100%;

}
/*===================================
OVERLAY
===================================*/

.mobile-overlay{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.mobile-overlay.active{

    opacity:1;
    visibility:visible;

}

/*===================================
SIDEBAR
===================================*/

.mobile-sidebar{

    position:fixed;

    top:0;
    left:-320px;

    width:300px;
    max-width:90%;

    height:100vh;

    background:#ffffff;

    overflow-y:auto;

    transition:.40s ease;

    z-index:9999;

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

}

.mobile-sidebar.active{

    left:0;

}

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

.sidebar-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px;

    border-bottom:1px solid #EAEAEA;

}

.sidebar-header img{

    height:65px;
    width:auto;

}

.sidebar-header button{

    width:40px;
    height:40px;

    border:none;

    background:#EEF6FF;

    border-radius:10px;

    cursor:pointer;

    color:#1565C0;

    font-size:20px;

    transition:.3s;

}

.sidebar-header button:hover{

    background:#1565C0;
    color:#fff;

}

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

.mobile-menu{

    list-style:none;

    padding:15px 0;

}

.mobile-menu li{

    border-bottom:1px solid #F0F0F0;

}

.mobile-menu li a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 22px;

    text-decoration:none;

    color:#2D3748;

    font-weight:500;

    transition:.30s;

}

.mobile-menu li a i{

    width:22px;

    color:#1976D2;

}

.mobile-menu li a:hover{

    background:#F5FAFF;

    color:#1976D2;

}

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

.mobile-drop-btn{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 22px;

    cursor:pointer;

    font-weight:500;

    color:#2D3748;

}

.mobile-drop-btn span{

    display:flex;

    align-items:center;

    gap:15px;

}

.mobile-drop-btn span i{

    color:#1976D2;

    width:22px;

}

.mobile-drop-btn .arrow{

    transition:.35s;

}

.mobile-dropdown.active .arrow{

    transform:rotate(180deg);

}

.mobile-submenu{

    display:none;

    list-style:none;

    background:#F8FBFF;

}

.mobile-dropdown.active .mobile-submenu{

    display:block;

}

.mobile-submenu li a{

    padding:14px 58px;

    font-size:15px;

}

/*===================================
DONATE
===================================*/

.mobile-footer{

    padding:20px;

}

.mobile-donate{

    display:block;

    text-align:center;

    padding:14px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:linear-gradient(135deg,#FF9800,#FF6A00);

    transition:.3s;

}

.mobile-donate:hover{

    transform:translateY(-2px);

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

}

/*===================================
TABLET
===================================*/

@media(max-width:991px){

.ssf-navbar{

    display:none;

}

.donate-btn{

    display:none;

}

.mobile-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

}

.ssf-logo img{

    height:72px;

}

.ssf-logo-text h2{

    font-size:20px;

}

.ssf-logo-text span{

    display:none;

}

.ssf-container{

    padding:10px 18px;

}

}

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

@media(max-width:576px){

.ssf-logo img{

    height:60px;

}

.ssf-logo-text h2{

    font-size:16px;

}

.mobile-sidebar{

    width:280px;

}

}

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

.mobile-sidebar::-webkit-scrollbar{

    width:6px;

}

.mobile-sidebar::-webkit-scrollbar-thumb{

    background:#D5DDE5;

    border-radius:30px;

}

/*===================================
ANIMATION
===================================*/

@keyframes FadeIn{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.dropdown-menu{

animation:FadeIn .35s;

}

.mobile-submenu{

animation:FadeIn .35s;

}

/*=========================================================
    SIMPLE PREMIUM NGO FOOTER
=========================================================*/

.ssf-footer{

    position:relative;

    overflow:hidden;

    color:#fff;

    background:url('../img/a11.jpeg') center center/cover no-repeat;

}



.ssf-footer::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(8,20,40,.90);

    z-index:-1;

}


.footer-overlay{

    background:rgba(10,22,42,.92);

    width:100%;

    height:100%;

}

/*==================================
CONTAINER
==================================*/

.footer-container{

    max-width:1320px;

    margin:auto;

    padding:80px 20px 60px;

    display:grid;

    grid-template-columns:2fr 1.3fr 1.6fr 1.5fr;

    gap:50px;

}

/*==================================
COLUMNS
==================================*/

.footer-col h3{

    font-size:34px;

    margin:18px 0;

    font-weight:700;

}

.footer-col h4{

    font-size:24px;

    margin-bottom:30px;

    position:relative;

}

.footer-col h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:55px;

    height:3px;

    background:#2196F3;

    border-radius:20px;

}

.footer-logo{

    width:95px;

    transition:.4s;

}

.footer-logo:hover{

    transform:rotate(-5deg) scale(1.08);

}

.footer-col p{

    color:#D5DCE7;

    line-height:1.9;

    margin-bottom:30px;

    max-width:360px;

}

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

.footer-donate{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    background:linear-gradient(135deg,#FF9800,#FF6A00);

    color:#fff;

    text-decoration:none;

    border-radius:40px;

    font-weight:600;

    transition:.35s;

}

.footer-donate:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(255,106,0,.35);

}

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

.footer-col ul{

    list-style:none;

}

.footer-col ul li{

    margin-bottom:18px;

}

.footer-col ul li a{

    color:#D5DCE7;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.35s;

}

.footer-col ul li a i{

    color:#4FC3F7;

    transition:.35s;

}

.footer-col ul li a:hover{

    color:#fff;

    transform:translateX(10px);

}

.footer-col ul li a:hover i{

    color:#FF9800;

}

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

.footer-contact li{

    display:flex;

    gap:15px;

    margin-bottom:22px;

    color:#D5DCE7;

    line-height:1.8;

}

.footer-contact i{

    color:#4FC3F7;

    margin-top:4px;

    font-size:18px;

}

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

.footer-social{

    margin-top:30px;

    display:flex;

    gap:15px;

}

.footer-social a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#2196F3;

    transform:translateY(-6px) rotate(360deg);

    box-shadow:0 10px 20px rgba(33,150,243,.40);

}

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

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

    background:transparent;

}

.footer-bottom-container{

    max-width:1320px;

    margin:auto;

    padding:22px 20px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.footer-bottom p{

    margin:0;

    color:#fff;

    font-size:15px;

    letter-spacing:.3px;

}

.footer-bottom a{

    color:#D5DCE7;

    text-decoration:none;

    margin-left:25px;

    transition:.3s;

}

.footer-bottom a:hover{

    color:#2196F3;

}
/*==============================
Large Laptop
==============================*/

@media(max-width:1200px){

.footer-container{

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

    gap:45px;

}

.footer-col p{

    max-width:100%;

}

}

/*==============================
Tablet
==============================*/

@media(max-width:991px){

.footer-container{

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

    gap:40px;

    padding:70px 20px 50px;

}

.footer-col h3{

    font-size:28px;

}

.footer-col h4{

    font-size:22px;

}

.footer-logo{

    width:85px;

}

.footer-bottom-container{

    flex-direction:column;

    text-align:center;

}

.footer-bottom a{

    margin:0 10px;

}

}

/*==============================
Mobile
==============================*/

@media(max-width:768px){

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

    gap:45px;

}

.footer-col p{

    margin:auto auto 30px;

}

.footer-col h4::after{

    left:50%;

    transform:translateX(-50%);

}

.footer-col ul li a{

    justify-content:center;

}

.footer-contact li{

    justify-content:center;

}

.footer-social{

    justify-content:center;

}

.footer-donate{

    margin:auto;

}

.footer-bottom-container{

    text-align:center;

}

}

/*==============================
Small Mobile
==============================*/

@media(max-width:480px){

.footer-container{

    padding:60px 18px 40px;

}

.footer-logo{

    width:75px;

}

.footer-col h3{

    font-size:24px;

}

.footer-col h4{

    font-size:20px;

}

.footer-col p{

    font-size:15px;

    line-height:1.8;

}

.footer-col ul li{

    margin-bottom:15px;

}

.footer-col ul li a{

    font-size:15px;

}

.footer-contact li{

    font-size:15px;

}

.footer-social a{

    width:42px;

    height:42px;

}

.footer-bottom{

    padding-bottom:10px;

}

.footer-bottom p{

    font-size:14px;

    line-height:1.7;

}

.footer-bottom a{

    display:inline-block;

    margin:6px 10px;

    font-size:14px;

}

}

/*=========================================================
    HOVER EFFECTS
=========================================================*/

.footer-col{

    transition:.35s;

}

.footer-col:hover{

    transform:translateY(-6px);

}

.footer-col h4{

    transition:.35s;

}

.footer-col:hover h4{

    color:#4FC3F7;

}

.footer-col h4::after{

    transition:.35s;

}

.footer-col:hover h4::after{

    width:80px;

    background:#FF9800;

}

.footer-logo{

    transition:.4s;

}

.footer-logo:hover{

    transform:scale(1.08) rotate(-5deg);

}

.footer-col ul li{

    transition:.3s;

}

.footer-col ul li:hover{

    padding-left:8px;

}

.footer-contact li{

    transition:.3s;

}

.footer-contact li:hover{

    color:#ffffff;

}

.footer-contact li:hover i{

    color:#FF9800;

}

/*=========================================================
    FADE ANIMATION
=========================================================*/

.footer-col{

    opacity:0;

    transform:translateY(35px);

    animation:FooterFade .8s ease forwards;

}

.footer-col:nth-child(2){

    animation-delay:.2s;

}

.footer-col:nth-child(3){

    animation-delay:.4s;

}

.footer-col:nth-child(4){

    animation-delay:.6s;

}

@keyframes FooterFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
                HERO SLIDER
=========================================================*/

.hero-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    background:#08162d;

}

.hero-wrapper{

    position:relative;

    width:100%;

    height:85vh;

    min-height:520px;

    max-height:760px;

    overflow:hidden;

}

/*==================================
SLIDES
==================================*/

.hero-slide{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    opacity:0;

    visibility:hidden;

    z-index:0;

    pointer-events:none;

    transition:opacity .8s ease;

}

.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

    pointer-events:auto;

}

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

.hero-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:HeroZoom 12s linear infinite;

}

@keyframes HeroZoom{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.12);

    }

}

/*==================================
OVERLAY
==================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(6,18,40,.82) 0%,

        rgba(6,18,40,.60) 45%,

        rgba(6,18,40,.35) 100%

    );

}

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

.hero-content{

    position:relative;

    z-index:5;

    max-width:1320px;

    height:100%;

    margin:auto;

    padding:0 25px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

}



/*==================================
HEADING
==================================*/

.hero-content h1{

    font-size:55px;

    line-height:1.12;

    color:#fff;

    font-weight:700;

    max-width:760px;

    margin-bottom:20px;

    animation:FadeUp 1s;

}

.hero-content h1 span{

    display:block;

    color:#FF9800;

}

/*==================================
PARAGRAPH
==================================*/

.hero-content p{

    max-width:640px;

    color:#E6EEF8;

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;

    animation:FadeUp 1.2s;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    animation:FadeUp 1.4s;

}

.hero-btn{

    text-decoration:none;

    padding:17px 34px;

    border-radius:50px;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.hero-primary{

    background:#ff8c00;

    color:#fff;

}

.hero-primary:hover{

    background:#ff7300;

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(255,140,0,.35);

}

.hero-secondary{

    border:2px solid rgba(255,255,255,.45);

    color:#fff;

    backdrop-filter:blur(8px);

}

.hero-secondary:hover{

    background:#fff;

    color:#1565C0;

    transform:translateY(-5px);

}

/*==================================
DOTS
==================================*/

.hero-dots{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    gap:14px;

    z-index:20;

}

.hero-dot{

    width:14px;

    height:14px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.35s;

}

.hero-dot.active{

    width:42px;

    border-radius:30px;

    background:#ff9800;

}





@keyframes ScrollDown{

    0%{

        opacity:1;

        top:10px;

    }

    100%{

        opacity:0;

        top:28px;

    }

}

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

@keyframes FadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*=========================================================
            HERO SLIDER RESPONSIVE
=========================================================*/

/*==================================
Floating Shapes
==================================*/

.hero-wrapper::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,152,0,.12);

    left:-70px;

    top:120px;

    animation:FloatOne 8s ease-in-out infinite;

    z-index:3;

}

.hero-wrapper::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(33,150,243,.10);

    right:-100px;

    bottom:60px;

    animation:FloatTwo 10s ease-in-out infinite;

    z-index:3;

}

@keyframes FloatOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-30px);

    }

}

@keyframes FloatTwo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(25px);

    }

}

/*==================================
Large Laptop
==================================*/

@media(max-width:1400px){

.hero-content{

    max-width:1180px;

}
.hero-content p{

    max-width:580px;

}

}

/*==================================
Laptop
==================================*/

@media(max-width:1200px){

.hero-wrapper{

    height:75vh;

}

.hero-content h1{

    font-size:52px;

}

.hero-content p{

    font-size:17px;

}

}

/*==================================
Tablet
==================================*/

@media(max-width:991px){

.hero-wrapper{

    height:650px;

}

.hero-content{

    align-items:center;

    text-align:center;

    padding:0 30px;

}

.hero-content h1{

    font-size:44px;

    max-width:700px;

}

.hero-content p{

    font-size:16px;

    max-width:620px;

}

.hero-buttons{

    justify-content:center;

}
.hero-wrapper::before,
.hero-wrapper::after{

    z-index:1;

    pointer-events:none;

}

}

/*==================================
Mobile
==================================*/

@media(max-width:768px){

.hero-wrapper{

    height:560px;

    min-height:560px;

}

.hero-content{

    padding:0 22px;

}



.hero-content h1{

    font-size:34px;

    line-height:1.25;

}

.hero-content p{

    font-size:15px;

    line-height:1.8;

    margin-bottom:28px;

}

.hero-btn{

    padding:14px 26px;

    font-size:15px;

}
.hero-dots{

    bottom:22px;

}

}

/*==================================
Small Mobile
==================================*/

@media(max-width:576px){

.hero-wrapper{

    height:520px;

    min-height:520px;

}

.hero-content{

    padding:0 18px;

}



.hero-content h1{

    font-size:28px;

}

.hero-content h1 span{

    display:inline;

}

.hero-content p{

    font-size:14px;

    line-height:1.7;

}

.hero-buttons{

    width:100%;

    flex-direction:column;

    gap:14px;

}

.hero-btn{

    width:100%;

    text-align:center;

}
.hero-dot{

    width:12px;

    height:12px;

}

.hero-dot.active{

    width:34px;

}

}

/*==================================
Extra Small Devices
==================================*/

@media(max-width:380px){

.hero-wrapper{

    height:500px;

}

.hero-content h1{

    font-size:24px;

}

.hero-content p{

    font-size:13px;

}



.hero-btn{

    font-size:14px;

    padding:13px 18px;

}

}

/*==================================
Button Animation
==================================*/

.hero-btn{

    position:relative;

    overflow:hidden;

}

.hero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.hero-btn:hover::before{

    left:130%;

}
/*==================================
Dot Hover
==================================*/

.hero-dot:hover{

    background:#ffffff;

    transform:scale(1.15);

}

/*==================================
Text Shadow
==================================*/

.hero-content h1{

    text-shadow:0 6px 20px rgba(0,0,0,.35);

}

.hero-content p{

    text-shadow:0 2px 10px rgba(0,0,0,.25);
}

/*=========================================================
                    ABOUT US SECTION
=========================================================*/

.about-section{

    position:relative;

    padding:110px 0 70px;

    background:#F8FBFF;

    overflow:hidden;

}

.about-container{

    max-width:1320px;

    margin:auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

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

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:30px;

    display:block;

    object-fit:cover;

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

    transition:.45s;

}

.about-image:hover img{

    transform:scale(1.03);

}

/*==================================
BADGE
==================================*/

.about-badge{

    position:absolute;

    right:-20px;

    bottom:35px;

    width:150px;

    height:150px;

    border-radius:50%;

    background:linear-gradient(135deg,#1565C0,#2196F3);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:0 20px 45px rgba(33,150,243,.30);

    animation:FloatBadge 4s ease-in-out infinite;

}

.about-badge h3{

    font-size:42px;

    margin-bottom:5px;

}

.about-badge span{

    font-size:15px;

    line-height:1.5;

}

/*==================================
SHAPES
==================================*/

.shape-one{

    position:absolute;

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(255,152,0,.18);

    left:-25px;

    top:-25px;

    z-index:-1;

}

.shape-two{

    position:absolute;

    width:140px;

    height:140px;

    border-radius:20px;

    background:rgba(33,150,243,.10);

    right:-30px;

    top:60px;

    transform:rotate(18deg);

    z-index:-1;

}

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

.section-subtitle{

    display:inline-block;

    color:#1565C0;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

    position:relative;

}

.section-subtitle::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:60px;

    height:3px;

    background:#FF9800;

    border-radius:30px;

}

.about-content h2{

    font-size:48px;

    color:#1E293B;

    line-height:1.25;

    margin:25px 0;

    font-weight:700;

}

.about-content h2 span{

    color:#1565C0;

}

.about-content p{

    color:#5C677D;

    line-height:1.9;

    font-size:17px;

    margin-bottom:22px;

}

/*==================================
FEATURES
==================================*/

.about-features{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    background:#fff;

    padding:16px 20px;

    border-radius:15px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    transition:.35s;

}

.feature-item i{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#EAF4FF;

    color:#1565C0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    transition:.35s;

}

.feature-item span{

    font-weight:600;

    color:#253858;

}

.feature-item:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.10);

}

.feature-item:hover i{

    background:#1565C0;

    color:#fff;

}

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

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    background:linear-gradient(135deg,#FF9800,#FF6A00);

    color:#fff;

    font-weight:600;

    transition:.35s;

    overflow:hidden;

    position:relative;

}

.about-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(255,106,0,.30);

}

.about-btn i{

    transition:.35s;

}

.about-btn:hover i{

    transform:translateX(6px);

}

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

.about-stats{

    max-width:1320px;

    margin:80px auto 0;

    padding:0 20px;

    display:grid;

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

    gap:25px;

}

.stat-box{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-8px);

}

.stat-box h3{

    font-size:44px;

    color:#1565C0;

    margin-bottom:10px;

    font-weight:700;

}

.stat-box p{

    color:#64748B;

    font-size:16px;

}

/*==================================
ANIMATION
==================================*/

@keyframes FloatBadge{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}
/*=========================================================
            ABOUT US RESPONSIVE
=========================================================*/

/*==================================
Large Laptop
==================================*/

@media(max-width:1200px){

.about-container{

    gap:55px;

}

.about-content h2{

    font-size:42px;

}

.about-content p{

    font-size:16px;

}

.about-stats{

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

}

}

/*==================================
Tablet
==================================*/

@media(max-width:991px){

.about-section{

    padding:90px 0 60px;

}

.about-container{

    grid-template-columns:1fr;

    gap:60px;

}

.about-image{

    max-width:650px;

    margin:auto;

}

.about-content{

    text-align:center;

}

.section-subtitle::before{

    left:50%;

    transform:translateX(-50%);

}

.about-content h2{

    font-size:38px;

}

.about-features{

    max-width:700px;

    margin:35px auto;

}

.about-btn{

    margin:auto;

}

.about-badge{

    width:130px;

    height:130px;

    right:10px;

    bottom:20px;

}

.about-badge h3{

    font-size:34px;

}

.about-badge span{

    font-size:14px;

}

}

/*==================================
Mobile
==================================*/

@media(max-width:768px){

.about-section{

    padding:70px 0 50px;

}

.about-container{

    gap:40px;

    padding:0 18px;

}

.about-image img{

    border-radius:20px;

}

.about-content h2{

    font-size:32px;

    line-height:1.35;

}

.about-content p{

    font-size:15px;

    line-height:1.8;

}

.about-features{

    grid-template-columns:1fr;

    gap:15px;

}

.feature-item{

    justify-content:flex-start;

}

.about-btn{

    width:220px;

    justify-content:center;

}

.about-stats{

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

    gap:18px;

    margin-top:60px;

}

.stat-box{

    padding:28px 18px;

}

.stat-box h3{

    font-size:34px;

}

.stat-box p{

    font-size:15px;

}

.shape-one,

.shape-two{

    display:none;

}

}

/*==================================
Small Mobile
==================================*/

@media(max-width:576px){

.about-section{

    padding:60px 0 40px;

}

.about-content h2{

    font-size:28px;

}

.about-content p{

    font-size:14px;

}

.section-subtitle{

    font-size:13px;

}

.about-badge{

    width:110px;

    height:110px;

}

.about-badge h3{

    font-size:28px;

}

.about-badge span{

    font-size:12px;

}

.about-btn{

    width:100%;

}

.about-stats{

    grid-template-columns:1fr;

}

.stat-box{

    padding:30px 20px;

}

}

/*==================================
Hover Effects
==================================*/

.about-image{

    overflow:hidden;

}

.about-image img{

    transition:transform .6s ease;

}

.about-image:hover img{

    transform:scale(1.05);

}

.feature-item{

    position:relative;

    overflow:hidden;

}

.feature-item::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(21,101,192,.08),
        transparent
    );

    transition:.6s;

}

.feature-item:hover::before{

    left:100%;

}

.stat-box{

    position:relative;

    overflow:hidden;

}

.stat-box::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:#FF9800;

    transition:.4s;

}

.stat-box:hover::before{

    width:100%;

}

.stat-box:hover h3{

    color:#FF9800;

}

.about-btn::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.about-btn:hover::before{

    left:120%;

}

/*==================================
Fade Animation
==================================*/

.about-image{

    animation:AboutFadeLeft .9s ease;

}

.about-content{

    animation:AboutFadeRight .9s ease;

}

@keyframes AboutFadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes AboutFadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
                    OUR FOCUS AREAS
=========================================================*/

.focus-section{

    position:relative;

    padding:110px 0;

    background:#F8FBFF;

    overflow:hidden;

}

/* Background Shapes */

.focus-section::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(21,101,192,.06);

    left:-180px;

    top:-120px;

}

.focus-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(255,152,0,.07);

    right:-120px;

    bottom:-120px;

}

.focus-container{

    position:relative;

    z-index:2;

    max-width:1320px;

    margin:auto;

    padding:0 20px;

}

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

.section-title{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:#1565C0;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-title h2{

    font-size:48px;

    color:#1D3557;

    line-height:1.25;

    margin-bottom:20px;

    font-weight:700;

}

.section-title h2 span{

    color:#FF9800;

}

.section-title p{

    color:#6B7280;

    line-height:1.9;

    font-size:17px;

}

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

.focus-grid{

    display:grid;

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

    gap:35px;

}

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

.focus-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:45px 35px;

    text-align:center;

    overflow:hidden;

    transition:.45s;

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

}

/* Top Border Animation */

.focus-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:5px;

    background:linear-gradient(90deg,#1565C0,#FF9800);

    transition:.45s;

}

.focus-card:hover::before{

    width:100%;

}

.focus-card:hover{

    transform:translateY(-12px);

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

}

/*=========================================================
                    ICON
=========================================================*/

.focus-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#1565C0,#2196F3);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    transition:.45s;

    position:relative;

}

.focus-icon::after{

    content:"";

    position:absolute;

    width:105px;

    height:105px;

    border:2px dashed rgba(21,101,192,.25);

    border-radius:50%;

    transition:.45s;

}

.focus-icon i{

    color:#fff;

    font-size:34px;

}

.focus-card:hover .focus-icon{

    transform:rotateY(180deg);

    background:linear-gradient(135deg,#FF9800,#FF6A00);

}

.focus-card:hover .focus-icon::after{

    transform:rotate(180deg);

}

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

.focus-card h3{

    font-size:24px;

    color:#1D3557;

    margin-bottom:18px;

    font-weight:700;

}

.focus-card p{

    color:#6B7280;

    line-height:1.9;

    font-size:16px;

}

/*=========================================================
                READ MORE EFFECT
=========================================================*/

.focus-card::after{

    content:"Read More →";

    display:block;

    margin-top:25px;

    color:#1565C0;

    font-weight:600;

    opacity:0;

    transition:.35s;

}

.focus-card:hover::after{

    opacity:1;

}

/*=========================================================
                SHINE EFFECT
=========================================================*/

.focus-card{

    overflow:hidden;

}

.focus-card span{

    position:relative;

}

.focus-card:hover{

    background:#ffffff;

}

.focus-card:hover .focus-icon{

    box-shadow:0 15px 35px rgba(255,152,0,.30);

}

/*=========================================================
                HOVER GLOW
=========================================================*/

.focus-card:hover h3{

    color:#1565C0;

}

/*=========================================================
            OUR FOCUS AREAS RESPONSIVE
=========================================================*/

/*==============================
Large Laptop
==============================*/

@media(max-width:1200px){

.focus-grid{

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

    gap:25px;

}

.section-title h2{

    font-size:42px;

}

.focus-card{

    padding:38px 28px;

}

}

/*==============================
Tablet
==============================*/

@media(max-width:991px){

.focus-section{

    padding:90px 0;

}

.focus-grid{

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

    gap:25px;

}

.section-title{

    margin-bottom:55px;

}

.section-title h2{

    font-size:36px;

}

.section-title p{

    font-size:16px;

}

.focus-card{

    padding:35px 25px;

}

.focus-icon{

    width:80px;

    height:80px;

}

.focus-icon::after{

    width:95px;

    height:95px;

}

.focus-icon i{

    font-size:30px;

}

.focus-card h3{

    font-size:22px;

}

}

/*==============================
Mobile
==============================*/

@media(max-width:768px){

.focus-section{

    padding:70px 0;

}

.focus-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:30px;

    line-height:1.35;

}

.section-title p{

    font-size:15px;

}

.focus-card{

    text-align:left;

    padding:30px 25px;

}

.focus-icon{

    margin:0 0 22px;

}

.focus-card h3{

    font-size:21px;

}

.focus-card p{

    font-size:15px;

    line-height:1.8;

}

.focus-card::after{

    opacity:1;

    margin-top:18px;

}

.focus-section::before,

.focus-section::after{

    display:none;

}

}

/*==============================
Small Mobile
==============================*/

@media(max-width:480px){

.focus-section{

    padding:60px 0;

}

.focus-container{

    padding:0 18px;

}

.section-title span{

    font-size:13px;

}

.section-title h2{

    font-size:26px;

}

.section-title p{

    font-size:14px;

}

.focus-card{

    padding:26px 20px;

}

.focus-icon{

    width:72px;

    height:72px;

}

.focus-icon::after{

    width:86px;

    height:86px;

}

.focus-icon i{

    font-size:26px;

}

.focus-card h3{

    font-size:20px;

}

.focus-card p{

    font-size:14px;

}

}

/*=========================================================
                PREMIUM ANIMATIONS
=========================================================*/

/* Floating Card */

.focus-card{

    animation:focusFadeUp .8s ease;

}

/* Hover Glow */

.focus-card:hover{

    background:#fff;

}

.focus-card:hover{

    box-shadow:
    0 25px 60px rgba(21,101,192,.10),
    0 10px 25px rgba(255,152,0,.10);

}

/* Icon Pulse */

.focus-card:hover .focus-icon{

    animation:iconPulse .6s ease;

}

@keyframes iconPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

/* Card Shine */

.focus-card::before{

    overflow:hidden;

}

.focus-card{

    position:relative;

}

.focus-card .shine{

    display:none;

}

.focus-card:hover{

    overflow:hidden;

}

.focus-card:hover::selection{

    background:transparent;

}

/* Fade Up */

@keyframes focusFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Section Title Animation */

.section-title{

    animation:titleFade .8s ease;

}

@keyframes titleFade{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Card Content */

.focus-card h3{

    transition:.35s;

}

.focus-card p{

    transition:.35s;

}

.focus-card:hover p{

    color:#4B5563;

}

/* Icon Ring Animation */

.focus-icon::after{

    animation:ringRotate 12s linear infinite;

}

@keyframes ringRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* Read More Animation */

.focus-card::after{

    transition:.35s;

}

.focus-card:hover::after{

    transform:translateX(6px);

}

/* Smooth Transition */

.focus-card,
.focus-icon,
.focus-card h3,
.focus-card p,
.focus-card::before,
.focus-card::after{

    transition:all .35s ease;
}

/*=========================================================
                    OUR VISION
=========================================================*/

.vision-section{

    position:relative;

    padding:75px 0;

    background:#F5FBFD;

    overflow:hidden;

}

/* Background Shape */

.vision-section::before{

    content:"";

    position:absolute;

    right:-120px;

    bottom:-80px;

    width:650px;

    height:420px;

    background:url('../../Html/img/pattern.png') no-repeat center;

    background-size:contain;

    opacity:.05;

    pointer-events:none;

}

.vision-container{

    max-width:1320px;

    margin:auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/*=========================================================
                    VIDEO AREA
=========================================================*/

.vision-video-area{

    position:relative;

}

.video-border{

    position:absolute;

    left:-18px;

    bottom:-18px;

    width:100%;

    height:100%;

    background:#FF9800;

    z-index:1;

}

.vision-video{

    position:relative;

    z-index:2;

    overflow:hidden;

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.25);

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

    transition:.45s;

}

.vision-video:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 70px rgba(0,0,0,.18);

}

.vision-video video{

    width:100%;

    height:500px;

    display:block;

    object-fit:cover;

    transition:transform .8s;

}

.vision-video:hover video{

    transform:scale(1.08);

}

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

.video-play{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:85px;

    height:85px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:5;

    transition:.35s;

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

}

.video-play i{

    color:#1565C0;

    font-size:28px;

    transition:.35s;

}

.video-play:hover{

    transform:translate(-50%,-50%) scale(1.1);

    background:#FF9800;

}

.video-play:hover i{

    color:#fff;

}

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

.vision-content{

    position:relative;

}

.vision-tag{

    display:inline-block;

    color:#1565C0;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

    font-size:15px;

}

.vision-content h2{

    font-size:35px;

    line-height:1.12;

    color:#0F2342;

    margin-bottom:28px;

    font-weight:700;

}

.vision-content h2 span{

    display:block;

    color:#FF9800;

}

.vision-content p{

    font-size:17px;

    color:#5F6B7A;

    line-height:1.9;

    margin-bottom:35px;

}

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

.vision-list{

    list-style:none;

    margin-bottom:40px;

}

.vision-list li{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    color:#22354A;

    font-size:17px;

    transition:.35s;

}

.vision-list li i{

    color:#1565C0;

    font-size:20px;

    transition:.35s;

}

.vision-list li:hover{

    transform:translateX(10px);

    color:#1565C0;

}

.vision-list li:hover i{

    color:#FF9800;

}

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

.vision-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    background:#FF9800;

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    transition:.4s;

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

}

.vision-btn:hover{

    background:#1565C0;

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(21,101,192,.30);

}
/*=========================================================
            OUR VISION RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.vision-container{

    gap:60px;

}

.vision-content h2{

    font-size:48px;

}

.vision-video video{

    height:450px;

}

}

@media(max-width:991px){

.vision-section{

    padding:90px 0;

}

.vision-container{

    grid-template-columns:1fr;

    gap:60px;

}

.vision-video-area{

    order:2;

}

.vision-content{

    order:1;

}

.vision-content{

    text-align:center;

}

.vision-content h2{

    font-size:40px;

}

.vision-content h2 span{

    display:inline;

}

.vision-content p{

    max-width:700px;

    margin:0 auto 30px;

}

.vision-list{

    display:inline-block;

    text-align:left;

}

.vision-video video{

    height:420px;

}

.video-border{

    left:-12px;

    bottom:-12px;

}

}

@media(max-width:768px){

.vision-section{

    padding:70px 0;

}

.vision-container{

    gap:45px;

    padding:0 18px;

}

.vision-content h2{

    font-size:32px;

}

.vision-content p{

    font-size:15px;

    line-height:1.8;

}

.vision-list li{

    font-size:15px;

    margin-bottom:15px;

}

.vision-video video{

    height:320px;

}

.video-play{

    width:70px;

    height:70px;

}

.video-play i{

    font-size:24px;

}

.vision-btn{

    padding:14px 30px;

    font-size:15px;

}

}

@media(max-width:480px){

.vision-section{

    padding:60px 0;

}

.vision-content h2{

    font-size:28px;

    line-height:1.3;

}

.vision-tag{

    font-size:13px;

}

.vision-content p{

    font-size:14px;

}

.vision-list li{

    font-size:14px;

}

.vision-video video{

    height:260px;

}

.video-play{

    width:60px;

    height:60px;

}

.video-play i{

    font-size:20px;

}

.video-border{

    left:-8px;

    bottom:-8px;

}

.vision-btn{

    width:100%;

    justify-content:center;

}

}

/*=========================================================
                PREMIUM ANIMATIONS
=========================================================*/

/* Floating Animation */

.vision-video{

    animation:videoFloat 5s ease-in-out infinite;

}

@keyframes videoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/* Fade Up */

.vision-content{

    animation:visionFade .8s ease;

}

@keyframes visionFade{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Ripple Effect */

.video-play::before{

content:"";

position:absolute;

width:100%;

height:100%;

border-radius:50%;

border:2px solid rgba(255,255,255,.8);

animation:ripple 2.5s infinite;

}

.video-play::after{

content:"";

position:absolute;

width:100%;

height:100%;

border-radius:50%;

border:2px solid rgba(255,255,255,.4);

animation:ripple 2.5s infinite .8s;

}

@keyframes ripple{

0%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(1.8);

opacity:0;

}

}

/* Image Zoom */

.vision-video:hover video{

transform:scale(1.08);

}

/* Button Shine */

.vision-btn{

position:relative;

overflow:hidden;

}

.vision-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

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

transform:skewX(-25deg);

transition:.7s;

}

.vision-btn:hover::before{

left:150%;

}

/* List Hover */

.vision-list li{

transition:.35s;

}

.vision-list li:hover{

padding-left:8px;

}

/* Smooth Transitions */

.vision-video,
.vision-video video,
.video-play,
.vision-btn,
.vision-list li{

transition:all .35s ease;

}

/*=========================================================
                    OUR JOURNEY
=========================================================*/

.ssf-journey-section{

    position:relative;

    padding:20px 0;

    background:#F7FBFE;

    overflow:hidden;

}

/*==============================
Background Decorations
==============================*/

.ssf-journey-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:rgba(21,101,192,.05);

}

.ssf-journey-section::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    right:-160px;

    bottom:-160px;

    border-radius:50%;

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

}

/*==============================
Container
==============================*/

.ssf-journey-container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1920px;

    margin:auto;

}

/*==============================
Heading
==============================*/

.ssf-journey-heading{

    max-width:780px;

    margin:auto;

    text-align:center;

    padding:0 20px;

    margin-bottom:55px;

}

.ssf-journey-heading span{

    display:inline-block;

    color:#1565C0;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.ssf-journey-heading h2{

    font-size:50px;

    color:#183153;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:700;

}

.ssf-journey-heading h2 span{

    color:#FF9800;

}

.ssf-journey-heading p{

    font-size:17px;

    color:#687789;

    line-height:1.9;

}

/*==============================
Slider
==============================*/

.ssf-slider{

    width:100%;

    overflow:hidden;

    margin-bottom:24px;

    position:relative;

}

/*==============================
Track
==============================*/

.ssf-track{

    display:flex;

    width:max-content;

    gap:20px;

}

/*==============================
Cards
==============================*/

.ssf-item{

    position:relative;

    width:360px;

    height:250px;

    overflow:hidden;

    border-radius:18px;

    flex-shrink:0;

    cursor:pointer;

    background:#ddd;

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

    transition:.45s;

}

.ssf-item:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

/*==============================
Image
==============================*/

.ssf-item img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}

.ssf-item:hover img{

    transform:scale(1.12);

}

/*==============================
Overlay
==============================*/

.ssf-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:flex-start;

    padding:26px;

    background:linear-gradient(

        rgba(0,0,0,.05),

        rgba(0,0,0,.20),

        rgba(8,35,70,.90)

    );

    opacity:0;

    transition:.45s;

}

.ssf-item:hover .ssf-overlay{

    opacity:1;

}

/*==============================
Title
==============================*/

.ssf-overlay h3{

    color:#fff;

    font-size:23px;

    font-weight:600;

    line-height:1.4;

    margin-bottom:18px;

    transform:translateY(35px);

    transition:.45s;

}

.ssf-item:hover .ssf-overlay h3{

    transform:translateY(0);

}

/*==============================
Button
==============================*/

.ssf-view{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    background:#1565C0;

    padding:12px 24px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    transition:.35s;

    transform:translateY(35px);

}

.ssf-item:hover .ssf-view{

    transform:translateY(0);

}

.ssf-view:hover{

    background:#FF9800;

}

/*==============================
Premium Shine
==============================*/

.ssf-item::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    z-index:5;

    transition:.8s;

}

.ssf-item:hover::before{

    left:150%;

}

/*==============================
Glow
==============================*/

.ssf-item:hover{

    box-shadow:

    0 15px 40px rgba(21,101,192,.18),

    0 10px 30px rgba(255,152,0,.15);

}
/*=========================================================
            CONTINUOUS SLIDER ANIMATION
=========================================================*/

/* Top Row */

.ssf-track-left{

    animation:ssfSlideLeft 45s linear infinite;

}

/* Bottom Row */

.ssf-track-right{

    animation:ssfSlideRight 45s linear infinite;

}

/* Pause on Hover */

.ssf-slider:hover .ssf-track{

    animation-play-state:paused;

}

/*=========================================================
                    KEYFRAMES
=========================================================*/

@keyframes ssfSlideLeft{

    0%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(-50%);

    }

}

@keyframes ssfSlideRight{

    0%{

        transform:translateX(-50%);

    }

    100%{

        transform:translateX(0);

    }

}

/*=========================================================
                PREMIUM ANIMATIONS
=========================================================*/

.ssf-item,
.ssf-item img,
.ssf-overlay,
.ssf-view{

    transition:all .45s ease;

}

.ssf-item:hover{

    z-index:20;

}

.ssf-item:hover img{

    transform:scale(1.12);

}

.ssf-item:hover .ssf-overlay{

    opacity:1;

}

.ssf-item:hover h3{

    transform:translateY(0);

}

.ssf-item:hover .ssf-view{

    transform:translateY(0);

}

/* Glow Effect */

.ssf-item:hover{

    box-shadow:

        0 18px 40px rgba(21,101,192,.18),

        0 12px 35px rgba(255,152,0,.15);

}

/* Button Shine */

.ssf-view{

    position:relative;

    overflow:hidden;

}

.ssf-view::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.ssf-view:hover::before{

    left:150%;

}

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

/* Large Laptop */

@media(max-width:1400px){

.ssf-item{

    width:320px;

    height:220px;

}

}

/* Laptop */

@media(max-width:1200px){

.ssf-journey-heading h2{

    font-size:42px;

}

.ssf-item{

    width:290px;

    height:200px;

}

.ssf-track-left,
.ssf-track-right{

    animation-duration:38s;

}

}

/* Tablet */

@media(max-width:991px){

.ssf-journey-section{

    padding:90px 0;

}

.ssf-journey-heading{

    margin-bottom:45px;

}

.ssf-journey-heading h2{

    font-size:36px;

}

.ssf-journey-heading p{

    font-size:16px;

}

.ssf-item{

    width:250px;

    height:170px;

    border-radius:15px;

}

.ssf-overlay{

    opacity:1;

    background:linear-gradient(

        transparent,

        rgba(8,35,70,.75)

    );

}

.ssf-overlay h3{

    transform:none;

    font-size:18px;

}

.ssf-view{

    transform:none;

    padding:10px 18px;

    font-size:13px;

}

.ssf-track-left,
.ssf-track-right{

    animation-duration:30s;

}

}

/* Mobile */

@media(max-width:768px){

.ssf-journey-section{

    padding:70px 0;

}

.ssf-journey-heading h2{

    font-size:30px;

}

.ssf-journey-heading p{

    font-size:15px;

}

.ssf-item{

    width:220px;

    height:150px;

}

.ssf-overlay{

    padding:18px;

}

.ssf-overlay h3{

    font-size:16px;

}

.ssf-view{

    padding:9px 16px;

    font-size:12px;

}

.ssf-track-left,
.ssf-track-right{

    animation-duration:24s;

}

}

/* Small Mobile */

@media(max-width:480px){

.ssf-journey-section{

    padding:60px 0;

}

.ssf-journey-heading span{

    font-size:13px;

}

.ssf-journey-heading h2{

    font-size:26px;

}

.ssf-journey-heading p{

    font-size:14px;

}

.ssf-item{

    width:180px;

    height:120px;

}

.ssf-overlay{

    padding:14px;

}

.ssf-overlay h3{

    font-size:14px;

    margin-bottom:10px;

}

.ssf-view{

    padding:8px 14px;

    font-size:11px;

}

.ssf-track-left,
.ssf-track-right{

    animation-duration:18s;

}

}
/*==============================
        Video Box
==============================*/

.ssf-video-box{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.ssf-video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==============================
        Play Button
==============================*/

.ssf-video-btn{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

   width: 40px;
  height: 31px;

    border:none;

    border-radius:50%;

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

    color:#1565C0;

    /*font-size:26px;*/

    cursor:pointer;

    transition:.35s;

    z-index:20;

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

}

.ssf-video-btn:hover{

    background:#FF9800;

    color:#fff;

    transform:translate(-50%,-50%) scale(1.1);

}
/*=========================================================
                    PREMIUM CTA
=========================================================*/

.ssf-cta-section{

    position:relative;

    padding:110px 0;

    background:linear-gradient(135deg,#FFF8EE,#FFF3E0);

    overflow:hidden;

}

/*==============================
Container
==============================*/

.ssf-cta-container{

    position:relative;

    max-width:1400px;

    margin:auto;

    padding:0 25px;

    z-index:2;

}

/*==============================
Content
==============================*/

.ssf-cta-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:70px;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.55);

    border-radius:28px;

    padding:70px;

    box-shadow:

        0 20px 50px rgba(0,0,0,.06);

}

/*==============================
Left
==============================*/

.ssf-cta-left{

    flex:1;

}

.ssf-cta-subtitle{

    display:inline-block;

    color:#1565C0;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.ssf-cta-left h2{

    font-size:54px;

    line-height:1.15;

    color:#183153;

    margin-bottom:22px;

    font-weight:700;

}

.ssf-cta-left h2 span{

    color:#FF9800;

}

.ssf-cta-left p{

    max-width:620px;

    color:#667085;

    font-size:17px;

    line-height:1.9;

}

/*==============================
Right
==============================*/

.ssf-cta-right{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*==============================
Buttons
==============================*/

.ssf-btn-primary,

.ssf-btn-secondary{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:260px;

    padding:18px 34px;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    border-radius:60px;

    transition:.4s;

    overflow:hidden;

}

/* Primary */

.ssf-btn-primary{

    background:#FF9800;

    color:#fff;

    box-shadow:

        0 15px 30px rgba(255,152,0,.35);

}

.ssf-btn-primary:hover{

    background:#F57C00;

    transform:translateY(-6px);

    box-shadow:

        0 22px 40px rgba(255,152,0,.40);

}

/* Secondary */

.ssf-btn-secondary{

    background:#fff;

    color:#1565C0;

    border:2px solid #1565C0;

}

.ssf-btn-secondary:hover{

    background:#1565C0;

    color:#fff;

    transform:translateY(-6px);

}

/*==============================
Button Shine
==============================*/

.ssf-btn-primary::before,

.ssf-btn-secondary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;

}

.ssf-btn-primary:hover::before,

.ssf-btn-secondary:hover::before{

    left:150%;

}

/*==============================
Decorative Shapes
==============================*/

.ssf-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

/* Blue */

.ssf-shape1{

    width:280px;

    height:280px;

    left:-120px;

    top:-80px;

    background:rgba(21,101,192,.08);

}

/* Orange */

.ssf-shape2{

    width:220px;

    height:220px;

    right:-80px;

    bottom:-80px;

    background:rgba(255,152,0,.12);

}

/* White */

.ssf-shape3{

    width:120px;

    height:120px;

    right:180px;

    top:40px;

    border:18px solid rgba(255,255,255,.35);

}

/*==============================
Icons
==============================*/

.ssf-btn-primary i,

.ssf-btn-secondary i{

    transition:.35s;

}

.ssf-btn-secondary:hover i{

    transform:translateX(6px);

}

.ssf-btn-primary:hover i{

    transform:scale(1.2);

}
/*=========================================================
                CTA ANIMATIONS
=========================================================*/

.ssf-cta-section{

    animation:ssfFadeUp .9s ease;

}

@keyframes ssfFadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Floating Shapes */

.ssf-shape1{

    animation:ssfFloat1 8s ease-in-out infinite;

}

.ssf-shape2{

    animation:ssfFloat2 10s ease-in-out infinite;

}

.ssf-shape3{

    animation:ssfRotate 20s linear infinite;

}

@keyframes ssfFloat1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

}

@keyframes ssfFloat2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(18px);

    }

}

@keyframes ssfRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.ssf-btn-primary,
.ssf-btn-secondary{

    transition:all .35s ease;

}

.ssf-btn-primary:hover{

    letter-spacing:.5px;

}

.ssf-btn-secondary:hover{

    letter-spacing:.5px;

}

.ssf-btn-primary:active,
.ssf-btn-secondary:active{

    transform:scale(.96);

}

/*=========================================================
                GLASS PANEL
=========================================================*/

.ssf-cta-content:hover{

    box-shadow:

        0 35px 80px rgba(21,101,192,.12);

}

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

/* Large Laptop */

@media(max-width:1200px){

.ssf-cta-left h2{

    font-size:46px;

}

.ssf-cta-content{

    padding:60px;

    gap:50px;

}

}

/* Laptop */

@media(max-width:991px){

.ssf-cta-content{

    flex-direction:column;

    text-align:center;

    padding:55px 40px;

}

.ssf-cta-left{

    width:100%;

}

.ssf-cta-left p{

    margin:auto;

}

.ssf-cta-right{

    width:100%;

    align-items:center;

}

.ssf-btn-primary,
.ssf-btn-secondary{

    width:320px;

}

.ssf-shape3{

    display:none;

}

}

/* Tablet */

@media(max-width:768px){

.ssf-cta-section{

    padding:80px 0;

}

.ssf-cta-content{

    padding:40px 30px;

    border-radius:22px;

}

.ssf-cta-left h2{

    font-size:36px;

}

.ssf-cta-left p{

    font-size:15px;

    line-height:1.8;

}

.ssf-btn-primary,
.ssf-btn-secondary{

    width:280px;

    padding:16px 28px;

    font-size:15px;

}

}

/* Mobile */

@media(max-width:576px){

.ssf-cta-section{

    padding:60px 0;

}

.ssf-cta-container{

    padding:0 15px;

}

.ssf-cta-content{

    padding:35px 22px;

    border-radius:18px;

}

.ssf-cta-subtitle{

    font-size:12px;

    letter-spacing:1px;

}

.ssf-cta-left h2{

    font-size:30px;

    line-height:1.25;

}

.ssf-cta-left p{

    font-size:14px;

}

.ssf-btn-primary,
.ssf-btn-secondary{

    width:100%;

    min-width:auto;

    padding:15px 20px;

    font-size:14px;

}

.ssf-shape1{

    width:170px;

    height:170px;

}

.ssf-shape2{

    width:140px;

    height:140px;

}

}

/* Small Mobile */

@media(max-width:380px){

.ssf-cta-left h2{

    font-size:26px;

}

.ssf-cta-content{

    padding:28px 18px;

}

}