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

    REFO DIGITAL PLATFORM
    ------------------------------------------------------------------------
    File        : refo-brand.css
    Layer       : Presentation
    Module      : Brand System

    Purpose
    ------------------------------------------------------------------------
    Defines the official visual identity of the REFO Digital Platform.

    Responsibilities
    ------------------------------------------------------------------------
    • Brand Colours
    • Typography
    • Spacing
    • Border Radius
    • Shadows
    • Animation
    • Transitions
    • Z-Index Standards

    Architecture
    ------------------------------------------------------------------------
    Every stylesheet within the platform MUST consume variables defined
    in this file.

    Hardcoded colours are prohibited unless technically unavoidable.

    Version
    ------------------------------------------------------------------------
    REFO Brand System 1.0

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


/*==========================================================================
    BRAND COLOURS
===========================================================================*/

:root{

    /*--------------------------------------------------------------
        Primary Brand Colours
    --------------------------------------------------------------*/

    --refo-primary:#2E7D32;

    --refo-primary-dark:#1B5E20;

    --refo-secondary:#215DAA;

    --refo-secondary-dark:#184B8C;


    /*--------------------------------------------------------------
        Neutral Colours
    --------------------------------------------------------------*/

    --refo-white:#FFFFFF;

    --refo-light:#F7F9F8;

    --refo-light-gray:#F2F4F5;

    --refo-border:#E4E8E5;

    --refo-text:#2F3A3D;

    --refo-text-light:#6C757D;


    /*--------------------------------------------------------------
        Status Colours
    --------------------------------------------------------------*/

    --refo-success:#2E7D32;

    --refo-warning:#F5A623;

    --refo-danger:#C62828;

    --refo-info:#215DAA;


    /*--------------------------------------------------------------
        Typography
    --------------------------------------------------------------*/

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

    --refo-font-size-xs:.75rem;

    --refo-font-size-sm:.875rem;

    --refo-font-size-md:1rem;

    --refo-font-size-lg:1.125rem;

    --refo-font-size-xl:1.5rem;

    --refo-font-size-xxl:2.5rem;

    --refo-line-height:1.7;


    /*--------------------------------------------------------------
        Font Weight
    --------------------------------------------------------------*/

    --refo-fw-normal:400;

    --refo-fw-medium:500;

    --refo-fw-semibold:600;

    --refo-fw-bold:700;


    /*--------------------------------------------------------------
        Border Radius
    --------------------------------------------------------------*/

    --refo-radius-sm:8px;

    --refo-radius-md:15px;

    --refo-radius-lg:30px;

    --refo-radius-xl:50px;


    /*--------------------------------------------------------------
        Shadows
    --------------------------------------------------------------*/

    --refo-shadow-sm:
        0 3px 10px rgba(0,0,0,.05);

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

    --refo-shadow-lg:
        0 18px 45px rgba(0,0,0,.12);


    /*--------------------------------------------------------------
        Spacing
    --------------------------------------------------------------*/

    --refo-space-xs:.5rem;

    --refo-space-sm:1rem;

    --refo-space-md:2rem;

    --refo-space-lg:3rem;

    --refo-space-xl:5rem;


    /*--------------------------------------------------------------
        Transition
    --------------------------------------------------------------*/

    --refo-transition:
        all .30s ease;


    /*--------------------------------------------------------------
        Z-Index
    --------------------------------------------------------------*/

    --refo-z-header:1000;

    --refo-z-dropdown:1100;

    --refo-z-modal:1200;

    --refo-z-loader:9999;

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

    HEADER BRANDING
    ------------------------------------------------------------------------
    Layer       : REFO Brand System
    Module      : Primary Navigation
    Purpose     : Applies the official REFO visual identity to the
                  public website header while preserving the vendor
                  architecture.

    Engineering Rules
    ------------------------------------------------------------------------
    • Never modify header.css
    • Never modify vendor styles
    • Override appearance only
    • Preserve responsive behaviour
    • Preserve dropdown functionality
    • Preserve sticky navigation

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


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

.header-style-one{

    background: transparent;

}


.header-style-one .header-lower .outer-box{

    background: var(--refo-secondary);

    border-radius: 70px;

    box-shadow: var(--refo-shadow-md);

    transition: var(--refo-transition);

}


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

.header-style-one .logo-box{

    position: relative;

    z-index: 10;

}


/*==========================================================================
    PRIMARY NAVIGATION
===========================================================================*/

.main-menu .navigation > li > a{

    color: var(--refo-white);

    font-weight: var(--refo-fw-semibold);

    letter-spacing: .3px;

    transition: var(--refo-transition);

}


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

.main-menu .navigation > li:hover > a{

    color: var(--refo-white);

}


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

.main-menu .navigation > li.current > a{

    color: var(--refo-white);

    position: relative;

}


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

.main-menu .navigation > li.current > a::after{

    content: "";

    position: absolute;

    left: 50%;

    bottom: 18px;

    width: 28px;

    height: 3px;

    transform: translateX(-50%);

    background: var(--refo-primary);

    border-radius: 20px;

}


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

.main-menu .navigation > li.dropdown > a:before{

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

}


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

.main-header .menu-right-content .search-toggler{

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

    color: var(--refo-white);

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

    transition: var(--refo-transition);

}


.main-header .menu-right-content .search-toggler:hover{

    background: var(--refo-primary);

    border-color: var(--refo-primary);

    color: var(--refo-white);

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

    HEADER BRANDING (PART 2)
    ------------------------------------------------------------------------
    Sticky Header
    Dropdown Menus
    Call-To-Action
    Mobile Navigation
    Accessibility
    Version : 1.0

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


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

.sticky-header{

    background: var(--refo-secondary);

    box-shadow: var(--refo-shadow-md);

}


.sticky-header .main-menu .navigation > li > a{

    color: var(--refo-white);

    font-weight: var(--refo-fw-semibold);

}


.sticky-header .main-menu .navigation > li.current > a{

    color: var(--refo-white);

}


.sticky-header .main-menu .navigation > li.current > a::after{

    content: "";

    position: absolute;

    left: 50%;

    bottom: 18px;

    transform: translateX(-50%);

    width: 28px;

    height: 3px;

    background: var(--refo-primary);

    border-radius: 20px;

}


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

.main-menu .navigation > li > ul{

    background: var(--refo-white);

    border-top: 4px solid var(--refo-primary);

    border-radius: var(--refo-radius-md);

    box-shadow: var(--refo-shadow-lg);

}


.main-menu .navigation > li > ul > li > a{

    color: var(--refo-text);

    transition: var(--refo-transition);

}


.main-menu .navigation > li > ul > li:hover > a{

    color: var(--refo-primary);

    padding-left: 28px;

}


.main-menu .navigation > li > ul > li{

    border-bottom: 1px solid var(--refo-border);

}


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

.btn-one{

    background: var(--refo-primary);

    border-color: var(--refo-primary);

    color: var(--refo-white);

    transition: var(--refo-transition);

}


.btn-one:hover{

    background: var(--refo-primary-dark);

    border-color: var(--refo-primary-dark);

    color: var(--refo-white);

}


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

.mobile-menu{

    background: var(--refo-secondary);

}


.mobile-menu .navigation li a{

    color: var(--refo-white);

}


.mobile-menu .navigation li.current > a{

    color: var(--refo-primary);

}


.mobile-menu .navigation li a:hover{

    color: var(--refo-primary);

}


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

.main-menu .navigation > li > a:focus{

    outline: 2px solid var(--refo-primary);

    outline-offset: 4px;

}


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

.main-header,
.header-style-one,
.sticky-header,
.main-menu .navigation > li > a,
.btn-one{

    transition: var(--refo-transition);

}


/*==========================================================================
    END HEADER BRANDING
===========================================================================*/

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

    HERO BANNER
    ------------------------------------------------------------------------
    Official REFO Homepage Hero Branding

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

    HERO BRANDING
    ------------------------------------------------------------------------
    Layer       : REFO Brand System
    Module      : Homepage Hero Banner

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


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

.banner-style-four .slide-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        rgba(33,93,170,.72) 0%,
        rgba(33,93,170,.58) 50%,
        rgba(33,93,170,.48) 100%
    );

    z-index:1;

}


.banner-style-four .content-box{

    position:relative;

    z-index:2;

    max-width:900px;

}


/*==========================================================================
    HERO SUBTITLE
===========================================================================*/

.banner-style-four .content-box .sub-title{

    color:var(--refo-primary);

    font-weight:var(--refo-fw-semibold);

    letter-spacing:1px;

    text-transform:uppercase;

}


/*==========================================================================
    HERO TITLE
===========================================================================*/

.banner-style-four .content-box h1{

    color:var(--refo-white);

    font-weight:700;

    line-height:1.15;

    text-shadow:0 3px 12px rgba(0,0,0,.25);

}


/*==========================================================================
    HERO DESCRIPTION
===========================================================================*/

.banner-style-four .content-box p{

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

    max-width:700px;

    font-size:18px;

    line-height:1.8;

}
/*==========================================================================
    HERO BRANDING - FINAL POLISH
===========================================================================*/

/*
|--------------------------------------------------------------------------
| Hero Content Spacing
|--------------------------------------------------------------------------
*/

.banner-style-four .content-box{

    padding-top:40px;

}

/*
|--------------------------------------------------------------------------
| Hero Main Heading
|--------------------------------------------------------------------------
*/

.banner-style-four .content-box h1{

    font-size:72px;

    line-height:1.15;

    letter-spacing:-1px;

}

/*
|--------------------------------------------------------------------------
| Hero Subtitle
|--------------------------------------------------------------------------
*/

.banner-style-four .content-box .sub-title{

    color:var(--refo-primary);

    font-size:22px;

    font-weight:700;

    text-transform:uppercase;

}

/*
|--------------------------------------------------------------------------
| Hero Primary Button
|--------------------------------------------------------------------------
*/

.banner-style-four .btn-one{

    background:var(--refo-primary);

    border-color:var(--refo-primary);

    color:var(--refo-white);

}

.banner-style-four .btn-one:hover{

    background:var(--refo-primary-dark);

    border-color:var(--refo-primary-dark);

}

/*
|--------------------------------------------------------------------------
| Large Desktop Refinement
|--------------------------------------------------------------------------
*/

@media (min-width:1400px){

.banner-style-four .content-box{

    max-width:900px;

}

.banner-style-four .content-box h1{

    font-size:72px;

}

}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width:991px){

.banner-style-four .content-box h1{

    font-size:54px;

}

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:767px){

.banner-style-four .content-box{

    padding-top:20px;

}

.banner-style-four .content-box h1{

    font-size:42px;

    line-height:1.25;

}

.banner-style-four .content-box .sub-title{

    font-size:16px;

}

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

    FOOTER BRANDING
    ------------------------------------------------------------------------
    Layer       : REFO Brand System
    Module      : Global Footer

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


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

.main-footer{

    background:var(--refo-secondary);

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

}


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

.main-footer h2,
.main-footer h3,
.main-footer h4,
.main-footer h5,
.main-footer .widget-title{

    color:var(--refo-white);

    font-weight:700;

}


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

.main-footer p{

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

    line-height:1.9;

}


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

.main-footer a{

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

    transition:var(--refo-transition);

}


.main-footer a:hover{

    color:var(--refo-primary);

}


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

.main-footer ul li{

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

}
/*==========================================================================
    CONTACT ICONS
===========================================================================*/

.main-footer .icon-box{

    background:var(--refo-primary);

    color:var(--refo-white);

    border-radius:50%;

}


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

.main-footer .btn-one{

    background:var(--refo-primary);

    border-color:var(--refo-primary);

}


.main-footer .btn-one:hover{

    background:var(--refo-primary-dark);

}


/*==========================================================================
    COPYRIGHT
===========================================================================*/

.footer-bottom{

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

}


.footer-bottom p{

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

}


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

.main-footer .social-links li a{

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

    color:var(--refo-white);

}


.main-footer .social-links li a:hover{

    background:var(--refo-primary);

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

    REFO DIGITAL PLATFORM
    ------------------------------------------------------------------------
    HERO BANNER BRANDING
    Layer       : REFO Brand System
    Module      : Homepage Hero Banner
    Version     : 1.0

    Purpose
    ------------------------------------------------------------------------
    Applies the official REFO branding to the homepage hero
    while preserving the vendor banner architecture.

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


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

.banner-style-four .slide-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(33,93,170,.78) 0%,
        rgba(33,93,170,.62) 50%,
        rgba(33,93,170,.52) 100%
    );

    z-index:1;

}


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

.banner-style-four .content-box{

    position:relative;

    z-index:2;

    max-width:900px;

    padding-top:40px;

}


/*==========================================================================
    HERO SUBTITLE
===========================================================================*/

.banner-style-four .sub-title,
.banner-style-four .content-box .sub-title,
.banner-style-four .content-box .upper-text,
.banner-style-four .content-box .upper-text span{

    color:var(--refo-primary) !important;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}


/*==========================================================================
    HERO TITLE
===========================================================================*/

.banner-style-four .content-box h1{

    color:var(--refo-white);

    font-size:72px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:-1px;

    text-shadow:0 4px 18px rgba(0,0,0,.25);

}


/*==========================================================================
    HERO DESCRIPTION
===========================================================================*/

.banner-style-four .content-box p{

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

    font-size:18px;

    line-height:1.8;

    max-width:720px;

}


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

.banner-style-four .btn-one{

    background:var(--refo-primary);

    border-color:var(--refo-primary);

    color:var(--refo-white);

}

.banner-style-four .btn-one:hover{

    background:var(--refo-primary-dark);

    border-color:var(--refo-primary-dark);

}


/*==========================================================================
    HERO CONTROLS
===========================================================================*/

.banner-style-four .owl-nav .owl-prev,
.banner-style-four .owl-nav .owl-next{

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

    color:var(--refo-white);

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

}

.banner-style-four .owl-nav .owl-prev:hover,
.banner-style-four .owl-nav .owl-next:hover{

    background:var(--refo-primary);

    border-color:var(--refo-primary);

}


/*==========================================================================
    HERO PAGINATION
===========================================================================*/

.banner-style-four .owl-dots .owl-dot span{

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

}

.banner-style-four .owl-dots .owl-dot.active span{

    background:var(--refo-primary);

}


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

@media (max-width:991px){

.banner-style-four .content-box{

    max-width:100%;

    padding-top:25px;

}

.banner-style-four .content-box h1{

    font-size:54px;

}

}

@media (max-width:767px){

.banner-style-four .content-box h1{

    font-size:40px;

    line-height:1.25;

}

.banner-style-four .content-box p{

    font-size:16px;

}

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

    REFO DIGITAL PLATFORM
    ------------------------------------------------------------------------
    INTERNAL PAGE BANNERS
    Layer       : REFO Brand System
    Module      : Page Title Banner

    Applies to:
        • About Us
        • What We Do
        • Events
        • Contact
        • Future Internal Pages

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


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

.page-title{

    position:relative;

    overflow:hidden;

}

.page-title::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        rgba(33,93,170,.78) 0%,

        rgba(33,93,170,.65) 55%,

        rgba(33,93,170,.55) 100%

    );

    z-index:1;

}


/*==========================================================================
    PAGE TITLE CONTENT
===========================================================================*/

.page-title .content-box{

    position:relative;

    z-index:2;

}


/*==========================================================================
    PAGE TITLE
===========================================================================*/

.page-title h1{

    color:var(--refo-white);

    font-weight:700;

    font-size:56px;

    line-height:1.2;

    text-shadow:0 3px 12px rgba(0,0,0,.20);

}


/*==========================================================================
    BREADCRUMB
===========================================================================*/

.page-title .bread-crumb li{

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

}

.page-title .bread-crumb li a{

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

    transition:var(--refo-transition);

}

.page-title .bread-crumb li a:hover{

    color:var(--refo-primary);

}


/*==========================================================================
    ACTIVE BREADCRUMB
===========================================================================*/

.page-title .bread-crumb li:last-child{

    color:var(--refo-primary);

    font-weight:600;

}


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

@media (max-width:991px){

.page-title h1{

    font-size:42px;

}

}


@media (max-width:767px){

.page-title{

    padding:120px 0 80px;

}

.page-title h1{

    font-size:34px;

    line-height:1.3;

}

}

/*==============================================================================
    SIMAMA NASI ORGANIZATION
    BRAND DESIGN SYSTEM
    Version : 2.0
    Author  : ChatGPT
    Purpose : Complete branding override
==============================================================================*/


/*==============================================================================
    BRAND VARIABLES
==============================================================================*/

:root{

    --theme-color:#993300;

    --theme-color-two:#7a2900;

    --theme-color-light:#b34700;

    --title-color:#1d1d1d;

    --text-color:#666666;

    --white:#ffffff;

    --light:#fafaf8;

    --light-two:#f8f8f6;

    --border:#ececec;

}


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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--light);

    color:var(--text-color);

    font-family:var(--text-font);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}


/*==============================================================================
    TYPOGRAPHY
==============================================================================*/

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

    color:var(--title-color);

    font-weight:700;

    letter-spacing:-0.4px;

}

p{

    color:var(--text-color);

    line-height:1.85;

}

.sec-title{

    margin-bottom:25px;

}

.sec-title h2{

    font-weight:700;

}

.sec-title .sub-title{

    color:var(--theme-color);

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

}


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

.pt_120{

    padding-top:110px !important;

}

.pb_120{

    padding-bottom:110px !important;

}


/*==============================================================================
    LINKS
==============================================================================*/

a{

    transition:.35s;

}

a:hover{

    text-decoration:none;

}


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

.theme-btn{

    border-radius:50px;

    overflow:hidden;

    transition:.35s;

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

}

.theme-btn:hover{

    transform:translateY(-3px);

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

}


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

.inner-box,
.single-item{

    transition:.35s;

}

.inner-box:hover,
.single-item:hover{

    transform:translateY(-6px);

}


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

.image-box{

    overflow:hidden;

    border-radius:20px;

}

.image-box img{

    transition:.55s;

}

.image-box:hover img{

    transform:scale(1.08);

}


/*==============================================================================
    FORM ELEMENTS
==============================================================================*/

input,
textarea,
select{

    border-radius:14px;

    transition:.3s;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--theme-color)!important;

    box-shadow:0 0 0 4px rgba(153,51,0,.08);

}


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

.header-style-one{

    top:18px;

    z-index:999;

}

.header-style-one .header-lower .outer-box{

    background:var(--theme-color)!important;

    border-radius:60px;

    padding:0 24px;

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

}


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

.logo-box img{

    max-height:64px;

    transition:.35s;

}

.logo-box img:hover{

    transform:scale(1.04);

}


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

.main-menu .navigation>li{

    margin:0 18px;

}

.main-menu .navigation>li>a{

    color:#ffffff!important;

    font-size:15px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

    position:relative;

}

.main-menu .navigation>li>a:after{

    content:"";

    position:absolute;

    left:50%;

    bottom:18px;

    width:0;

    height:3px;

    background:#ffffff;

    transform:translateX(-50%);

    transition:.35s;

    border-radius:30px;

}

.main-menu .navigation>li:hover>a,

.main-menu .navigation>li.current>a{

    color:#ffffff!important;

}

.main-menu .navigation>li:hover>a:after,

.main-menu .navigation>li.current>a:after{

    width:30px;

}


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

.menu-right-content .theme-btn{

    border-radius:40px;

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

}


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

.mobile-nav-toggler{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#ffffff;

    color:var(--theme-color);

}


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

.sticky-header{

    background:var(--theme-color)!important;

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

}

.sticky-header .main-menu .navigation>li>a{

    color:#ffffff!important;

}


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

.main-footer{

    background:var(--theme-color)!important;

}

.main-footer *{

    color:#ffffff;

}

.main-footer h2,
.main-footer h3,
.main-footer h4,
.main-footer h5{

    color:#ffffff;

}

.main-footer a{

    color:#ffffff;

}

.main-footer a:hover{

    color:#ffe8d5;

}

.main-footer .newsletter-form input{

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

    border:none;

    color:#ffffff;

}

.main-footer .newsletter-form input::placeholder{

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

}

.main-footer .theme-btn{

    background:#ffffff;

    color:var(--theme-color);

}

.main-footer .theme-btn:hover{

    background:#f7f7f7;

}


/*==============================================================================
    COPYRIGHT
==============================================================================*/

.footer-bottom{

    background:#7a2900;

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

}

.footer-bottom *{

    color:#ffffff;

}


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

.footer-social li a,
.social-links a{

    transition:.35s;

}

.footer-social li a:hover,
.social-links a:hover{

    transform:translateY(-4px);

}


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

@media(max-width:1200px){

.header-style-one{

    top:0;

}

.header-style-one .header-lower .outer-box{

    border-radius:0;

}

}

@media(max-width:991px){

.pt_120{

    padding-top:90px!important;

}

.pb_120{

    padding-bottom:90px!important;

}

}

@media(max-width:767px){

.pt_120{

    padding-top:70px!important;

}

.pb_120{

    padding-bottom:70px!important;

}

.logo-box img{

    max-height:50px;

}

}

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

.about-section,
.about-style-two,
.team-section{

    padding-top:50px !important;

    padding-bottom:50px !important;

}

.about-section{

    background:var(--light);

}

.about-style-two{

    background:#ffffff;

}

.content_block_one .content-box,
.content_block_two .content-box{

    padding-top:0 !important;

}

.content_block_one .content-box p,
.content_block_two .content-box p{

    margin-bottom:18px;

    line-height:1.9;

}


/*==============================================================================
    TEAM SECTION
==============================================================================*/

.team-section{

    background:var(--light);

}


/*------------------------------------------------------------------------------
TEAM CARD
------------------------------------------------------------------------------*/

.team-block-one .inner-box{

    background:#ffffff;

    border:none;

    border-radius:24px;

    overflow:hidden;

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

    transition:all .35s ease;

}

.team-block-one .inner-box:hover{

    transform:translateY(-10px);

    box-shadow:0 24px 60px rgba(0,0,0,.16);

}


/*------------------------------------------------------------------------------
TEAM IMAGE
------------------------------------------------------------------------------*/

.team-block-one .image-box{

    position:relative;

    width:100%;

    height:300px;

    overflow:hidden;

    border-radius:20px;

    background:#f4efe9;

}

.team-block-one .image-box img{

    width:100% !important;

    height:100% !important;

    display:block;

    object-fit:cover;

    object-position:center top;

    transition:transform .5s ease;

}

.team-block-one:hover .image-box img{

    transform:scale(1.05);

}


/*------------------------------------------------------------------------------
CONTENT PANEL
------------------------------------------------------------------------------*/

.team-block-one .content-box{

    background:#ffffff;

    border-top:4px solid var(--theme-color);

    border-radius:18px;

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

    transition:all .35s ease;

}


/*------------------------------------------------------------------------------
NAME
------------------------------------------------------------------------------*/

.team-block-one .content-box h3{

    font-size:22px;

    font-weight:700;

    color:var(--title-color);

    transition:.35s;

}

.team-block-one .content-box h3 a{

    color:inherit;

}


/*------------------------------------------------------------------------------
JOB TITLE
------------------------------------------------------------------------------*/

.team-block-one .designation{

    color:var(--theme-color);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    transition:.35s;

}


/*------------------------------------------------------------------------------
HOVER PANEL
------------------------------------------------------------------------------*/

.team-block-one:hover .content-box{

    background:var(--theme-color);

    border-top-color:#ffffff;

}


/* Name becomes white */

.team-block-one:hover .content-box h3,

.team-block-one:hover .content-box h3 a{

    color:#ffffff !important;

}


/* Designation becomes white */

.team-block-one:hover .designation{

    color:#ffffff !important;

}


/* Any paragraph becomes white */

.team-block-one:hover .content-box p{

    color:#ffffff !important;

}


/* Icons become white */

.team-block-one:hover .content-box i{

    color:#ffffff !important;

}


/*------------------------------------------------------------------------------
SECTION TITLE
------------------------------------------------------------------------------*/

.team-section .sec-title{

    margin-bottom:55px;

}

.team-section .sec-title h2{

    font-weight:700;

}

.team-section .sub-title{

    color:var(--theme-color);

    letter-spacing:2px;

}


/*------------------------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------------------------*/

@media(max-width:991px){

    .team-block-one .content-box{

        opacity:1 !important;

        visibility:visible !important;

        bottom:20px !important;

    }

}


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

.gallery-block-one .inner-box{

    border-radius:22px;

    overflow:hidden;

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

    transition:.35s;

}

.gallery-block-one .inner-box:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(0,0,0,.16);

}

.gallery-block-one img{

    transition:.5s;

}

.gallery-block-one:hover img{

    transform:scale(1.08);

}


/*==============================================================================
    WHAT WE DO
==============================================================================*/

.service-section{

    background:var(--light);

}

.service-block-two .inner-box{

    background:#ffffff;

    border:none;

    border-radius:24px;

    overflow:hidden;

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

    transition:.35s;

}

.service-block-two .inner-box:hover{

    transform:translateY(-10px);

    box-shadow:0 24px 60px rgba(0,0,0,.16);

}

.service-block-two .icon-box{

    background:#f4efe9;

    border-radius:50%;

}

.service-block-two h3{

    font-size:24px;

    font-weight:700;

    color:var(--title-color);

}

.service-block-two h3:hover{

    color:var(--theme-color);

}

.service-block-two p{

    line-height:1.9;

}

.service-page .image-box{

    overflow:hidden;

}

.service-page .image-box img{

    transition:.5s;

}

.service-page .inner-box:hover img{

    transform:scale(1.08);

}

.service-page .lower-content{

    padding:30px;

}


/*==============================================================================
    IMPACT COUNTERS
==============================================================================*/

.funfact-block-one .inner-box{

    background:#ffffff;

    border-radius:22px;

    padding:35px 20px;

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

    transition:.35s;

}

.funfact-block-one .inner-box:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(0,0,0,.16);

}

/* Counter Number */

.funfact-block-one .count-outer,
.funfact-block-one .count-text,
.funfact-block-one .counter{

    color:#000000 !important;

    font-weight:700;

}

/* Counter Title */

.funfact-block-one h3,
.funfact-block-one h4{

    color:#000000 !important;

    font-weight:700;

}

/* Counter Description */

.funfact-block-one p,
.funfact-block-one .text{

    color:#444444 !important;

}

/* Icons */

.funfact-block-one i,
.funfact-block-one .icon{

    color:var(--theme-color);

}

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

.contact-section{

    background:var(--light);

}

.contact-section .single-item{

    background:#ffffff;

    border-radius:20px;

    padding:25px;

    border:none;

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

    transition:.35s;

}

.contact-section .single-item:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(0,0,0,.16);

}


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

.contact-section .icon-box{

    background:var(--theme-color)!important;

    color:#ffffff!important;

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

}

.contact-section .single-item:hover .icon-box{

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

}


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

.contact-section h2,
.contact-section h3,
.contact-section h4{

    color:var(--title-color);

    font-weight:700;

}

.contact-section p{

    color:#555555;

}

.contact-section a{

    color:#555555;

}

.contact-section a:hover{

    color:var(--theme-color);

}


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

.contact-section .form-inner{

    background:#ffffff;

    border-radius:24px;

    border:none;

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

}

.contact-section input,
.contact-section textarea{

    background:#f7f7f7;

    border:1px solid #e6e6e6;

    border-radius:14px;

    padding:16px 18px;

}

.contact-section input:focus,
.contact-section textarea:focus{

    background:#ffffff;

    border-color:var(--theme-color);

    box-shadow:0 0 0 4px rgba(153,51,0,.08);

}

.contact-section textarea{

    min-height:180px;

    resize:vertical;

}


/*==============================================================================
    GOOGLE MAP
==============================================================================*/

.map-section iframe{

    border-radius:24px;

    overflow:hidden;

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

}


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

.gallery-block-one .inner-box{

    overflow:hidden;

}

.gallery-block-one img{

    width:100%;

    display:block;

}


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

.theme-btn{

    border-radius:45px;

    font-weight:600;

}

.theme-btn:hover{

    letter-spacing:.3px;

}


/*==============================================================================
    SHADOW SYSTEM
==============================================================================*/

.form-inner,
.service-block-two .inner-box,
.team-block-one .inner-box,
.event-block-one .inner-box,
.funfact-block-one .inner-box,
.contact-section .single-item{

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

}

.form-inner:hover,
.service-block-two .inner-box:hover,
.team-block-one .inner-box:hover,
.event-block-one .inner-box:hover,
.funfact-block-one .inner-box:hover,
.contact-section .single-item:hover{

    box-shadow:0 24px 60px rgba(0,0,0,.16);

}


/*==============================================================================
    MICRO ANIMATIONS
==============================================================================*/

.theme-btn,
.inner-box,
.single-item,
.image-box img,
.clients-logo,
.footer-social a,
.social-links a{

    transition:all .35s ease;

}


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

.main-footer{

    position:relative;

}

.main-footer .footer-widget{

    margin-bottom:35px;

}

.main-footer h3,
.main-footer h4{

    margin-bottom:25px;

}

.main-footer ul li{

    margin-bottom:10px;

}

.main-footer .logo-widget img{

    max-width:180px;

}

.main-footer .copyright,
.footer-bottom p{

    color:#ffffff;

}


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

@media(max-width:1199px){

    .header-style-one{

        top:0;

    }

}

@media(max-width:991px){

    .contact-section .single-item{

        margin-bottom:20px;

    }

    .pt_120{

        padding-top:90px!important;

    }

    .pb_120{

        padding-bottom:90px!important;

    }

}

@media(max-width:767px){

    h2{

        font-size:34px;

    }

    .pt_120{

        padding-top:70px!important;

    }

    .pb_120{

        padding-bottom:70px!important;

    }

    .theme-btn{

        width:auto;

    }

}


/*==============================================================================
    FINAL COLOR OVERRIDES
==============================================================================*/

/* White text only inside header and footer */

.header-style-one,
.header-style-one *,
.sticky-header,
.sticky-header *,
.main-footer,
.main-footer *,
.footer-bottom,
.footer-bottom *{

    color:#ffffff;

}

/* Keep content sections readable */

.about-section *,
.team-section *,
.event-section *,
.event-page-section *,
.service-section *,
.contact-section *{

    color:inherit;

}

/* Restore heading colors */

.about-section h1,
.about-section h2,
.about-section h3,
.team-section h1,
.team-section h2,
.team-section h3,
.event-section h1,
.event-section h2,
.event-section h3,
.service-section h1,
.service-section h2,
.service-section h3,
.contact-section h1,
.contact-section h2,
.contact-section h3{

    color:var(--title-color);

}

/* Restore paragraph colors */

.about-section p,
.team-section p,
.event-section p,
.service-section p,
.contact-section p{

    color:#555555;

}

/*==============================================================================
    STAFF PORTAL
    Module : Staff Portal
    Purpose:
        Premium branding for the SIMAMA NASI Staff Portal.

    Version:
        1.0.0

    Status:
        Production
==============================================================================*/


/*=========================================================
    Staff Portal Page
=========================================================*/

.staff-portal-page{

    background:#f8f9fa;

    padding:100px 0;

}


/*=========================================================
    Hero Section
=========================================================*/

.staff-hero-section{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    margin-bottom:60px;

    min-height:520px;

    background:url("../images/team/staff-portal-banner.jpg");

    background-position:center center;

    background-repeat:no-repeat;

    background-size:cover;

    background-attachment:scroll;

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

}


/* Hide the dark overlay */

.staff-hero-section::before{

    display:none;

}


/* Hide all hero content */

.staff-hero-content{

    display:none;

}

/* Decorative overlay */

.staff-hero-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.08),
            transparent 45%
        );

    pointer-events:none;

}


/* Keep content above overlay */

.staff-hero-content{

    position:relative;

    z-index:2;

}

/* Portal Badge */

.staff-portal-badge{

    display:inline-block;

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

    backdrop-filter:blur(6px);

    color:#ffffff;

    padding:10px 30px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:30px;

}


/* Title */

.staff-portal-title{

    color:#ffffff;

    font-size:58px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

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

}


/* Description */

.staff-portal-description{

    max-width:860px;

    margin:0 auto 35px;

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

    font-size:21px;

    line-height:36px;

}


/* Introduction */

.staff-portal-introduction{

    max-width:900px;

    margin:auto;

}

.staff-portal-introduction p{

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

    line-height:32px;

    margin-bottom:15px;

}


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

.staff-email-card,
.staff-security-card,
.staff-support-box{

    background:#ffffff;

    border-radius:18px;

    padding:50px;

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

    margin-bottom:50px;

    transition:.35s;

}

.staff-email-card:hover,
.staff-security-card:hover,
.staff-support-box:hover{

    transform:translateY(-6px);

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

}


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

.staff-email-icon,
.staff-support-icon,
.staff-security-icon,
.staff-future-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    background:#993300;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin:0 auto 25px;

}


/*=========================================================
    Titles
=========================================================*/

.staff-email-title,
.staff-security-title,
.staff-support-title{

    color:#222;

    font-weight:700;

    margin-bottom:20px;

}


.staff-email-description,
.staff-security-description,
.staff-support-description{

    color:#555;

    line-height:30px;

}


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

.staff-email-action{

    margin-top:35px;

    text-align:center;

}

.staff-email-action .theme-btn{

    background:#993300;

    border:2px solid #993300;

    color:#ffffff;

    padding:15px 40px;

    border-radius:50px;

    transition:.35s;

}

.staff-email-action .theme-btn:hover{

    background:#7a2900;

    border-color:#7a2900;

    color:#ffffff;

}


/*=========================================================
    Future Services
=========================================================*/

.staff-future-card{

    background:#ffffff;

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

    margin-bottom:30px;

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

    transition:.35s;

}

.staff-future-card:hover{

    transform:translateY(-8px);

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

}

.staff-future-card h4{

    margin:20px 0;

    color:#222;

}

.staff-future-card p{

    color:#666;

    line-height:28px;

}

.coming-soon{

    display:inline-block;

    margin-top:20px;

    padding:8px 18px;

    background:#f4f4f4;

    color:#993300;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

}


/*=========================================================
    Security Items
=========================================================*/

.staff-security-item{

    display:flex;

    align-items:flex-start;

    gap:25px;

    margin-bottom:35px;

}

.staff-security-text h4{

    color:#222;

    margin-bottom:10px;

}

.staff-security-text p{

    color:#666;

    margin-bottom:0;

}


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

.staff-support-card{

    background:#fafafa;

    border-radius:15px;

    padding:35px;

    text-align:center;

    transition:.35s;

    height:100%;

}

.staff-support-card:hover{

    background:#ffffff;

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

}

.staff-support-card a{

    color:#993300;

    font-weight:700;

    text-decoration:none;

}

.staff-support-card a:hover{

    text-decoration:underline;

}

.staff-support-footer{

    text-align:center;

    margin-top:50px;

}

.staff-support-footer h4{

    color:#993300;

    margin-top:15px;

}


/*=========================================================
    Responsive
=========================================================*/

@media(max-width:991px){

    .staff-hero-section{

        padding:60px 30px;

    }

    .staff-portal-title{

        font-size:40px;

    }

    .staff-email-card,
    .staff-security-card,
    .staff-support-box{

        padding:35px;

    }

}


@media(max-width:767px){

    .staff-portal-page{

        padding:70px 0;

    }

    .staff-hero-section{

        padding:45px 20px;

    }

    .staff-portal-title{

        font-size:32px;

    }

    .staff-security-item{

        flex-direction:column;

        text-align:center;

    }

}