/*==============================================================
RESOURCES PAGE
resources.css
PART 1
GLOBAL STYLES & HERO
==============================================================*/


/*==============================================================
ROOT VARIABLES
==============================================================*/

:root{

    --services-primary:#0A2B1D;

    --services-primary-light:#16452F;

    --services-secondary:#B88A44;

    --services-white:#ffffff;

    --services-text:#425466;

    --services-light:#F8FAFC;

    --services-border:#E7ECEF;

    --services-shadow:0 18px 60px rgba(0,0,0,.08);

    --services-radius:22px;

    --transition:.35s ease;

    --transition-fast:.2s ease;

}


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

.resources-page{

    background:var(--services-white);

    color:var(--services-text);

    overflow-x:hidden;

}

.section-padding{

    padding:120px 0;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

    margin:0;

    padding:0;

}

button{

    transition:var(--transition);

}


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

.section-title{

    margin-bottom:70px;

}

.section-title h2{

    font-size:46px;

    font-weight:800;

    color:var(--services-primary);

    margin-bottom:22px;

    line-height:1.2;

}

.section-title h2 span{

    color:var(--services-secondary);

}

.section-title p{

    font-size:17px;

    line-height:1.9;

    color:var(--services-text);

}


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

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:100px;

    background:rgba(10,43,29,.08);

    color:var(--services-primary);

    font-size:14px;

    font-weight:700;

    margin-bottom:24px;

}

.section-badge i{

    color:var(--services-secondary);

}


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

.btn{

    border-radius:100px;

    padding:14px 34px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--services-primary);

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

}

.btn-primary:hover{

    background:var(--services-primary-light);

    border-color:var(--services-primary-light);

}

.btn-outline-primary{

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

    color:var(--services-primary);

}

.btn-outline-primary:hover{

    background:var(--services-primary);

    color:#ffffff;

}


/*==============================================================
RESOURCES HERO
==============================================================*/

.resources-hero{

    position:relative;

    padding:170px 0 120px;

    overflow:hidden;

    background:linear-gradient(

        180deg,

        #ffffff,

        var(--services-light)

    );

}


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

.resources-shape{

    position:absolute;

    border-radius:50%;

}

.shape-one{

    width:520px;

    height:520px;

    background:rgba(10,43,29,.04);

    top:-220px;

    left:-220px;

}

.shape-two{

    width:380px;

    height:380px;

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

    right:-120px;

    top:60px;

}

.shape-three{

    width:240px;

    height:240px;

    background:rgba(10,43,29,.05);

    bottom:-80px;

    right:20%;

}


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

.resources-breadcrumb{

    margin-bottom:25px;

}

.resources-breadcrumb .breadcrumb{

    margin:0;

}

.resources-breadcrumb a{

    color:var(--services-text);

}

.resources-breadcrumb .active{

    color:var(--services-primary);

    font-weight:600;

}


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

.resources-hero-content{

    position:relative;

    z-index:5;

}

.resources-hero-content h1{

    font-size:64px;

    font-weight:800;

    line-height:1.1;

    color:var(--services-primary);

    margin-bottom:30px;

}

.resources-hero-content h1 span{

    color:var(--services-secondary);

}

.resources-hero-content p{

    font-size:18px;

    line-height:2;

    margin-bottom:35px;

}


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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:50px;

}


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

.resource-stats{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

.resource-stat{

    background:#ffffff;

    border:1px solid var(--services-border);

    border-radius:18px;

    padding:22px;

    min-width:160px;

    box-shadow:var(--services-shadow);

    transition:var(--transition);

}

.resource-stat:hover{

    transform:translateY(-8px);

}

.resource-stat h3{

    font-size:34px;

    font-weight:800;

    color:var(--services-primary);

    margin-bottom:8px;

}

.resource-stat span{

    font-size:14px;

    color:var(--services-text);

}


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

.resources-hero-image{

    position:relative;

    z-index:5;

}

.resources-hero-image img{

    width:100%;

    border-radius:32px;

    box-shadow:var(--services-shadow);

}


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

.floating-resource-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    background:#ffffff;

    padding:18px;

    border-radius:18px;

    box-shadow:var(--services-shadow);

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

}

.floating-resource-card .icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(10,43,29,.08);

}

.floating-resource-card .icon i{

    font-size:22px;

    color:var(--services-primary);

}

.floating-resource-card h5{

    margin-bottom:4px;

    color:var(--services-primary);

    font-size:16px;

}

.floating-resource-card p{

    margin:0;

    font-size:13px;

}

.card-one{

    top:10%;

    left:-35px;

}

.card-two{

    right:-35px;

    bottom:18%;

}

.card-three{

    left:10%;

    bottom:-20px;

}


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

.resources-badge{

    position:absolute;

    top:48%;

    right:-30px;

    transform:translateY(-50%);

    width:160px;

    height:160px;

    border-radius:50%;

    background:var(--services-secondary);

    color:var(--services-primary);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:var(--services-shadow);

}

.resources-badge h2{

    font-size:36px;

    font-weight:800;

    margin-bottom:6px;

}

.resources-badge span{

    font-size:14px;

    font-weight:600;

    line-height:1.4;

}


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

@keyframes resourceFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==============================================================
UTILITY
==============================================================*/

.shadow-hover{

    transition:var(--transition);

}

.shadow-hover:hover{

    transform:translateY(-10px);

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

}


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

@media(max-width:991px){

    .resources-hero{

        padding:150px 0 90px;

    }

    .resources-hero-content{

        text-align:center;

        margin-bottom:50px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .resource-stats{

        justify-content:center;

    }

    .floating-resource-card{

        display:none;

    }

}

@media(max-width:767px){

    .section-padding{

        padding:90px 0;

    }

    .section-title h2{

        font-size:34px;

    }

    .resources-hero-content h1{

        font-size:42px;

    }

    .resources-badge{

        width:120px;

        height:120px;

    }

    .resources-badge h2{

        font-size:28px;

    }

}

@media(max-width:575px){

    .resources-hero{

        padding:130px 0 80px;

    }

    .resources-hero-content h1{

        font-size:34px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

}

/*==============================================================
RESOURCES PAGE
resources.css
PART 2
SEARCH + KNOWLEDGE CATEGORIES
==============================================================*/


/*==============================================================
RESOURCE SEARCH
==============================================================*/

.resource-search-section{

    position:relative;

    overflow:hidden;

    background:var(--services-white);

}

.resource-search-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(10,43,29,.03);

    top:-220px;

    left:-180px;

}

.resource-search-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    right:-120px;

    bottom:-120px;

}


/*==============================================================
SEARCH WRAPPER
==============================================================*/

.resource-search-wrapper{

    position:relative;

    z-index:2;

    background:var(--services-white);

    border-radius:32px;

    padding:60px;

    box-shadow:var(--services-shadow);

    border:1px solid var(--services-border);

}

.resource-search-header{

    margin-bottom:45px;

}

.resource-search-header h2{

    font-size:42px;

    font-weight:800;

    color:var(--services-primary);

    margin-bottom:20px;

}

.resource-search-header p{

    color:var(--services-text);

    font-size:17px;

    line-height:1.9;

}


/*==============================================================
SEARCH INPUT
==============================================================*/

.search-input{

    position:relative;

}

.search-input i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:var(--services-primary);

    font-size:18px;

}

.search-input .form-control{

    height:60px;

    padding-left:60px;

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

    border-radius:16px;

    transition:var(--transition);

}

.search-input .form-control:focus{

    border-color:var(--services-secondary);

    box-shadow:0 0 0 .2rem rgba(255,204,0,.18);

}


/*==============================================================
SELECT
==============================================================*/

.resource-search-form .form-select{

    height:60px;

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

    border-radius:16px;

    transition:var(--transition);

}

.resource-search-form .form-select:focus{

    border-color:var(--services-secondary);

    box-shadow:0 0 0 .2rem rgba(255,204,0,.18);

}

.resource-search-form .btn{

    height:60px;

}


/*==============================================================
POPULAR TOPICS
==============================================================*/

.popular-topics{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:35px;

}

.popular-topics span{

    font-weight:700;

    color:var(--services-primary);

    margin-right:8px;

}

.popular-topics a{

    padding:10px 18px;

    border-radius:100px;

    background:var(--services-light);

    border:1px solid var(--services-border);

    color:var(--services-text);

    font-size:14px;

    transition:var(--transition);

}

.popular-topics a:hover{

    background:var(--services-primary);

    color:var(--services-white);

}


/*==============================================================
SUMMARY
==============================================================*/

.resource-summary{

    margin-top:70px;

}

.summary-card{

    background:var(--services-white);

    border:1px solid var(--services-border);

    border-radius:var(--services-radius);

    padding:35px 25px;

    text-align:center;

    box-shadow:var(--services-shadow);

    transition:var(--transition);

    height:100%;

}

.summary-card:hover{

    transform:translateY(-8px);

}

.summary-icon{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(10,43,29,.08);

    display:flex;

    justify-content:center;

    align-items:center;

}

.summary-icon i{

    color:var(--services-primary);

    font-size:30px;

}

.summary-card h3{

    font-size:36px;

    color:var(--services-primary);

    font-weight:800;

    margin-bottom:10px;

}

.summary-card p{

    margin:0;

    color:var(--services-text);

}


/*==============================================================
KNOWLEDGE CATEGORIES
==============================================================*/

.resource-categories{

    position:relative;

    background:var(--services-light);

    overflow:hidden;

}

.resource-categories::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    top:-180px;

    right:-180px;

}

.resource-categories::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(10,43,29,.03);

    bottom:-220px;

    left:-220px;

}


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

.resource-category-card{

    position:relative;

    background:var(--services-white);

    border:1px solid var(--services-border);

    border-radius:28px;

    padding:38px;

    box-shadow:var(--services-shadow);

    transition:var(--transition);

    overflow:hidden;

    height:100%;

}

.resource-category-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--services-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.resource-category-card:hover{

    transform:translateY(-10px);

}

.resource-category-card:hover::before{

    transform:scaleX(1);

}


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

.category-icon{

    width:82px;

    height:82px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(10,43,29,.08);

    margin-bottom:28px;

    transition:var(--transition);

}

.category-icon i{

    font-size:34px;

    color:var(--services-primary);

}

.resource-category-card:hover .category-icon{

    background:var(--services-primary);

}

.resource-category-card:hover .category-icon i{

    color:var(--services-secondary);

}


/*==============================================================
CATEGORY LABEL
==============================================================*/

.category-label{

    display:inline-block;

    padding:8px 16px;

    border-radius:100px;

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

    color:var(--services-primary);

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}


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

.resource-category-card h3{

    font-size:28px;

    font-weight:700;

    color:var(--services-primary);

    margin-bottom:18px;

}

.resource-category-card p{

    line-height:1.9;

    margin-bottom:28px;

}


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

.category-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:30px;

}

.category-list li{

    display:flex;

    gap:12px;

    align-items:flex-start;

    color:var(--services-text);

}

.category-list i{

    color:var(--services-secondary);

    margin-top:2px;

}


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

.category-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid var(--services-border);

    padding-top:24px;

}

.category-footer span{

    font-weight:600;

    color:var(--services-primary);

}

.category-footer a{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    color:var(--services-primary);

}

.category-footer a i{

    transition:var(--transition);

}

.category-footer a:hover i{

    transform:translateX(5px);

}


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

@media(max-width:991px){

    .resource-search-wrapper{

        padding:45px;

    }

}

@media(max-width:767px){

    .resource-search-wrapper{

        padding:30px 24px;

    }

    .resource-search-header h2{

        font-size:34px;

    }

    .popular-topics{

        justify-content:center;

    }

    .resource-category-card{

        padding:28px 22px;

    }

}


/*==============================================================
RESOURCES PAGE
resources.css
PART 3
FEATURED RESOURCE & LATEST RESOURCES
==============================================================*/


/*==============================================================
FEATURED RESOURCE
==============================================================*/

.featured-resource{

    position:relative;

    overflow:hidden;

    background:var(--services-white);

}

.featured-resource::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(10,43,29,.03);

    top:-220px;

    left:-220px;

}

.featured-resource::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    bottom:-120px;

    right:-120px;

}


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

.featured-resource-wrapper{

    position:relative;

    z-index:2;

    background:var(--services-white);

    border:1px solid var(--services-border);

    border-radius:34px;

    padding:50px;

    box-shadow:var(--services-shadow);

}


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

.featured-resource-image{

    position:relative;

    overflow:hidden;

    border-radius:28px;

}

.featured-resource-image img{

    width:100%;

    transition:.5s;

}

.featured-resource-wrapper:hover img{

    transform:scale(1.05);

}


/*==============================================================
BADGES
==============================================================*/

.featured-badge{

    position:absolute;

    left:25px;

    top:25px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:100px;

    background:var(--services-secondary);

    color:var(--services-primary);

    font-weight:700;

}

.reading-time{

    position:absolute;

    right:25px;

    bottom:25px;

    padding:12px 20px;

    border-radius:100px;

    background:rgba(10,43,29,.90);

    color:#fff;

    display:flex;

    align-items:center;

    gap:10px;

}


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

.featured-resource-content h2{

    font-size:44px;

    font-weight:800;

    color:var(--services-primary);

    line-height:1.2;

    margin-bottom:22px;

}

.featured-resource-content p{

    font-size:17px;

    line-height:1.9;

    margin-bottom:30px;

}


/*==============================================================
META
==============================================================*/

.featured-meta{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:35px;

}

.meta-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:100px;

    background:var(--services-light);

    color:var(--services-primary);

    font-size:14px;

    font-weight:600;

}

.meta-item i{

    color:var(--services-secondary);

}


/*==============================================================
HIGHLIGHTS
==============================================================*/

.resource-highlights{

    display:grid;

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

    gap:18px;

    margin-bottom:35px;

}

.highlight-item{

    display:flex;

    gap:12px;

    align-items:flex-start;

}

.highlight-item i{

    color:var(--services-secondary);

    margin-top:3px;

}

.highlight-item span{

    color:var(--services-text);

}


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

.featured-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


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

.featured-stat-card{

    background:var(--services-white);

    border:1px solid var(--services-border);

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    transition:var(--transition);

    height:100%;

    box-shadow:var(--services-shadow);

}

.featured-stat-card:hover{

    transform:translateY(-10px);

}

.featured-stat-card i{

    font-size:42px;

    color:var(--services-primary);

    margin-bottom:20px;

}

.featured-stat-card h3{

    color:var(--services-primary);

    font-size:24px;

    font-weight:700;

    margin-bottom:15px;

}

.featured-stat-card p{

    margin:0;

    line-height:1.8;

}


/*==============================================================
LATEST RESOURCES
==============================================================*/

.latest-resources{

    background:var(--services-light);

    position:relative;

    overflow:hidden;

}


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

.resource-card{

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    border:1px solid var(--services-border);

    box-shadow:var(--services-shadow);

    transition:var(--transition);

    height:100%;

}

.resource-card:hover{

    transform:translateY(-10px);

}


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

.resource-image{

    position:relative;

    overflow:hidden;

}

.resource-image img{

    width:100%;

    transition:.5s;

}

.resource-card:hover img{

    transform:scale(1.08);

}


/*==============================================================
CATEGORY
==============================================================*/

.resource-category{

    position:absolute;

    left:20px;

    top:20px;

    padding:8px 16px;

    border-radius:100px;

    background:var(--services-secondary);

    color:var(--services-primary);

    font-size:13px;

    font-weight:700;

}


/*==============================================================
BOOKMARK
==============================================================*/

.bookmark-btn{

    position:absolute;

    right:20px;

    top:20px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.bookmark-btn:hover{

    background:var(--services-primary);

}

.bookmark-btn:hover i{

    color:var(--services-secondary);

}


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

.resource-content{

    padding:30px;

}

.resource-meta{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:18px;

}

.resource-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--services-text);

    font-size:14px;

}

.resource-meta i{

    color:var(--services-secondary);

}


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

.resource-card h3{

    font-size:24px;

    color:var(--services-primary);

    line-height:1.4;

    margin-bottom:18px;

    transition:var(--transition);

}

.resource-card:hover h3{

    color:var(--services-primary-light);

}

.resource-card p{

    line-height:1.9;

    margin-bottom:25px;

}


/*==============================================================
TAGS
==============================================================*/

.resource-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.resource-tags span{

    padding:8px 15px;

    border-radius:100px;

    background:var(--services-light);

    border:1px solid var(--services-border);

    font-size:13px;

    color:var(--services-primary);

}


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

.resource-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid var(--services-border);

    padding-top:22px;

}

.resource-footer a{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--services-primary);

}

.resource-footer a i{

    transition:var(--transition);

}

.resource-footer a:hover i{

    transform:translateX(5px);

}

.resource-footer button{

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:var(--services-light);

    transition:var(--transition);

}

.resource-footer button:hover{

    background:var(--services-primary);

}

.resource-footer button:hover i{

    color:var(--services-secondary);

}


/*==============================================================
LOAD MORE
==============================================================*/

.latest-resources .btn-lg{

    padding:16px 45px;

}


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

@media(max-width:991px){

    .featured-resource-wrapper{

        padding:35px;

    }

    .featured-resource-content{

        margin-top:40px;

    }

}

@media(max-width:767px){

    .featured-resource-wrapper{

        padding:25px;

    }

    .featured-resource-content h2{

        font-size:34px;

    }

    .resource-highlights{

        grid-template-columns:1fr;

    }

    .featured-buttons{

        flex-direction:column;

    }

    .featured-buttons .btn{

        width:100%;

    }

    .resource-content{

        padding:24px;

    }

    .resource-card h3{

        font-size:22px;

    }

}

/*==============================================================
RESOURCES PAGE
resources.css
PART 4
DOWNLOADS • NEWSLETTER • CTA
==============================================================*/


/*==============================================================
DOWNLOADS CENTRE
==============================================================*/

.downloads-center{

    position:relative;

    overflow:hidden;

    background:var(--services-white);

}

.downloads-center::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    border-radius:50%;

    background:rgba(10,43,29,.03);

    top:-220px;

    right:-180px;

}

.downloads-center::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    bottom:-120px;

    left:-120px;

}


/*==============================================================
FEATURED DOWNLOAD
==============================================================*/

.featured-download{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--services-primary),
        var(--services-primary-light)
    );

    border-radius:34px;

    padding:55px;

    color:#ffffff;

    box-shadow:var(--services-shadow);

}

.featured-download::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

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

    right:-120px;

    top:-120px;

}

.featured-download-content{

    position:relative;

    z-index:2;

}

.featured-download-content span{

    display:inline-block;

    padding:8px 18px;

    border-radius:100px;

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

    color:var(--services-secondary);

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.featured-download-content h2{

    font-size:42px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:22px;

}

.featured-download-content p{

    font-size:17px;

    line-height:1.9;

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

    margin-bottom:35px;

}


/*==============================================================
DOWNLOAD META
==============================================================*/

.download-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.download-meta div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:100px;

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

}

.download-meta i{

    color:var(--services-secondary);

}


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

.download-card{

    background:#ffffff;

    border:1px solid var(--services-border);

    border-radius:26px;

    padding:35px;

    transition:var(--transition);

    box-shadow:var(--services-shadow);

    height:100%;

}

.download-card:hover{

    transform:translateY(-10px);

}


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

.download-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(10,43,29,.08);

    margin-bottom:24px;

    transition:var(--transition);

}

.download-icon i{

    font-size:34px;

    color:var(--services-primary);

}

.download-card:hover .download-icon{

    background:var(--services-primary);

}

.download-card:hover .download-icon i{

    color:var(--services-secondary);

}


/*==============================================================
DOWNLOAD TYPE
==============================================================*/

.download-type{

    display:inline-block;

    padding:8px 16px;

    border-radius:100px;

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

    color:var(--services-primary);

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}


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

.download-card h4{

    font-size:24px;

    color:var(--services-primary);

    margin-bottom:18px;

}

.download-card p{

    line-height:1.9;

    margin-bottom:28px;

}

.download-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid var(--services-border);

    padding-top:22px;

}

.download-footer small{

    color:var(--services-text);

}

.download-footer a{

    font-weight:700;

    color:var(--services-primary);

}

.download-footer a:hover{

    color:var(--services-primary-light);

}


/*==============================================================
MODULE 7
INDUSTRY INSIGHTS
(CSS WILL BE ADDED AFTER HTML MODULE IS CREATED)
==============================================================*/



/*==============================================================
NEWSLETTER
==============================================================*/

.newsletter-section{

    background:var(--services-light);

}

.newsletter-wrapper{

    background:#ffffff;

    border-radius:34px;

    padding:60px;

    box-shadow:var(--services-shadow);

}

.newsletter-content h2{

    font-size:46px;

    font-weight:800;

    color:var(--services-primary);

    line-height:1.2;

    margin-bottom:22px;

}

.newsletter-content p{

    line-height:1.9;

    margin-bottom:35px;

}


/*==============================================================
NEWSLETTER BENEFITS
==============================================================*/

.newsletter-benefits{

    display:grid;

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

    gap:18px;

}

.benefit{

    display:flex;

    align-items:center;

    gap:12px;

}

.benefit i{

    color:var(--services-secondary);

}


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

.newsletter-card{

    background:var(--services-light);

    border-radius:26px;

    padding:35px;

}

.newsletter-card h4{

    color:var(--services-primary);

    margin-bottom:15px;

}

.newsletter-card p{

    margin-bottom:25px;

}

.newsletter-card .form-control{

    height:58px;

    border-radius:15px;

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

}

.newsletter-card .form-control:focus{

    border-color:var(--services-secondary);

    box-shadow:0 0 0 .2rem rgba(255,204,0,.18);

}

.newsletter-card small{

    display:block;

    text-align:center;

    margin-top:20px;

    color:var(--services-text);

}


/*==============================================================
FINAL CTA
==============================================================*/

.resources-cta{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--services-primary),
        var(--services-primary-light)
    );

}

.resources-cta-wrapper{

    position:relative;

    z-index:2;

}

.resources-cta-wrapper h2{

    color:#ffffff;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:24px;

}

.resources-cta-wrapper p{

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

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

}


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

.cta-features{

    display:grid;

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

    gap:18px;

}

.cta-features div{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    font-weight:600;

}

.cta-features i{

    color:var(--services-secondary);

}


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

.cta-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.cta-buttons .btn{

    width:100%;

}


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

@media(max-width:991px){

    .featured-download{

        padding:40px;

    }

    .newsletter-wrapper{

        padding:40px;

    }

}

@media(max-width:767px){

    .featured-download{

        padding:30px 24px;

    }

    .featured-download-content h2{

        font-size:34px;

    }

    .newsletter-wrapper{

        padding:30px 24px;

    }

    .newsletter-content h2{

        font-size:34px;

    }

    .newsletter-benefits{

        grid-template-columns:1fr;

    }

    .cta-features{

        grid-template-columns:1fr;

    }

    .resources-cta-wrapper h2{

        font-size:36px;

    }

}

/*==============================================================
RESOURCES PAGE
resources.css
PART 5
FINAL RESPONSIVE & PRODUCTION POLISH
==============================================================*/


/*==============================================================
SECTION OVERFLOW
==============================================================*/

.resources-hero,
.resource-search-section,
.resource-categories,
.featured-resource,
.latest-resources,
.downloads-center,
.newsletter-section,
.resources-cta{

    position:relative;

    overflow:hidden;

}


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

.resources-page *{

    transition:

        color .3s ease,

        background-color .3s ease,

        border-color .3s ease,

        box-shadow .3s ease,

        transform .3s ease;

}


/*==============================================================
FOCUS STATES
==============================================================*/

button:focus-visible,

a:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible{

    outline:3px solid rgba(255,204,0,.35);

    outline-offset:3px;

}


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

::selection{

    background:var(--services-secondary);

    color:var(--services-primary);

}


/*==============================================================
ANCHOR OFFSET
==============================================================*/

#resource-search,
#resource-categories,
#featured-resource,
#latest-resources,
#downloads-center,
#newsletter{

    scroll-margin-top:120px;

}


/*==============================================================
MEDIA
==============================================================*/

.resources-page img{

    max-width:100%;

    height:auto;

}

.resources-page iframe{

    max-width:100%;

    display:block;

}


/*==============================================================
COMMON CARD PERFORMANCE
==============================================================*/

.resource-card,
.resource-category-card,
.download-card,
.summary-card,
.featured-stat-card,
.newsletter-card,
.featured-resource-wrapper{

    will-change:transform;

}


/*==============================================================
UTILITY CLASSES
==============================================================*/

.bg-brand{

    background:var(--services-primary);

}

.bg-light-brand{

    background:var(--services-light);

}

.text-brand{

    color:var(--services-primary);

}

.text-gold{

    color:var(--services-secondary);

}

.shadow-brand{

    box-shadow:var(--services-shadow);

}

.rounded-brand{

    border-radius:var(--services-radius);

}

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-shadow:hover{

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

}


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

.btn:active{

    transform:scale(.98);

}


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

.resources-page a{

    text-underline-offset:4px;

}


/*==============================================================
AOS HELPERS
==============================================================*/

[data-aos]{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}


/*==============================================================
1400PX
==============================================================*/

@media(max-width:1400px){

    .resources-hero-content h1{

        font-size:58px;

    }

    .featured-resource-content h2{

        font-size:40px;

    }

}


/*==============================================================
1200PX
==============================================================*/

@media(max-width:1199px){

    .section-padding{

        padding:100px 0;

    }

    .section-title h2{

        font-size:42px;

    }

    .resources-badge{

        width:145px;

        height:145px;

    }

}


/*==============================================================
992PX
==============================================================*/

@media(max-width:991px){

    .section-padding{

        padding:90px 0;

    }

    .section-title{

        text-align:center;

        margin-bottom:55px;

    }

    .resources-hero{

        padding:150px 0 90px;

    }

    .resources-hero-content{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .resource-stats{

        justify-content:center;

    }

    .featured-meta{

        justify-content:center;

    }

    .featured-buttons{

        justify-content:center;

    }

    .cta-buttons{

        margin-top:40px;

    }

}


/*==============================================================
768PX
==============================================================*/

@media(max-width:767px){

    .section-padding{

        padding:80px 0;

    }

    .section-title h2{

        font-size:34px;

    }

    .resources-hero-content h1{

        font-size:42px;

    }

    .resources-hero-content p{

        font-size:16px;

    }

    .resource-stats{

        flex-direction:column;

        align-items:center;

    }

    .resource-stat{

        width:100%;

        max-width:320px;

    }

    .featured-meta{

        flex-direction:column;

        align-items:flex-start;

    }

    .download-meta{

        flex-direction:column;

    }

    .featured-buttons{

        flex-direction:column;

    }

    .featured-buttons .btn{

        width:100%;

    }

}


/*==============================================================
576PX
==============================================================*/

@media(max-width:575px){

    .resources-hero{

        padding:130px 0 70px;

    }

    .resources-hero-content h1{

        font-size:34px;

    }

    .section-title h2{

        font-size:30px;

    }

    .section-badge{

        font-size:12px;

        padding:8px 18px;

    }

    .btn{

        padding:14px 24px;

    }

    .resource-content{

        padding:22px;

    }

    .download-card{

        padding:28px 22px;

    }

}


/*==============================================================
REDUCED MOTION
==============================================================*/

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==============================================================
PRINT
==============================================================*/

@media print{

    .hero-buttons,

    .floating-resource-card,

    .bookmark-btn,

    .resource-footer button,

    .newsletter-section,

    .resources-cta{

        display:none !important;

    }

    body{

        background:#ffffff;

    }

    .section-padding{

        padding:25px 0;

    }

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f3f5f7;

}

::-webkit-scrollbar-thumb{

    background:var(--services-primary);

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--services-primary-light);

}


/*==============================================================
END OF RESOURCES.CSS
==============================================================*/


/* section 7 css */
/*==============================================================
TRAINING & LEARNING CENTRE
==============================================================*/

.training-center{

    position:relative;

    overflow:hidden;

    background:var(--services-light);

}

.training-center::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(10,43,29,.03);

    top:-220px;

    left:-220px;

}

.training-center::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

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

    bottom:-140px;

    right:-120px;

}


/*==============================================================
FEATURED TRAINING
==============================================================*/

.featured-training{

    position:relative;

    background:#ffffff;

    border-radius:32px;

    padding:50px;

    border:1px solid var(--services-border);

    box-shadow:var(--services-shadow);

    overflow:hidden;

}


/*==============================================================
TRAINING VIDEO
==============================================================*/

.training-video{

    position:relative;

    overflow:hidden;

    border-radius:24px;

}

.training-video img{

    width:100%;

    transition:.5s;

}

.featured-training:hover .training-video img{

    transform:scale(1.06);

}


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

.play-button{

    position:absolute;

    left:50%;

    top:50%;

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

    width:90px;

    height:90px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.play-button i{

    font-size:34px;

    color:var(--services-primary);

}

.play-button:hover{

    background:var(--services-primary);

}

.play-button:hover i{

    color:var(--services-secondary);

}


/*==============================================================
VIDEO DURATION
==============================================================*/

.video-duration{

    position:absolute;

    right:20px;

    bottom:20px;

    padding:10px 18px;

    border-radius:100px;

    background:rgba(10,43,29,.92);

    color:#ffffff;

    font-weight:600;

}


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

.training-content h3{

    font-size:40px;

    font-weight:800;

    color:var(--services-primary);

    line-height:1.2;

    margin-bottom:22px;

}

.training-content p{

    line-height:1.9;

    margin-bottom:30px;

}


/*==============================================================
TRAINING META
==============================================================*/

.training-meta{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:35px;

}

.training-meta span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:100px;

    background:var(--services-light);

    color:var(--services-primary);

    font-size:14px;

    font-weight:600;

}

.training-meta i{

    color:var(--services-secondary);

}


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

.learning-card{

    background:#ffffff;

    border:1px solid var(--services-border);

    border-radius:26px;

    padding:35px;

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--services-shadow);

    height:100%;

}

.learning-card:hover{

    transform:translateY(-10px);

}


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

.learning-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:22px;

    background:rgba(10,43,29,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.learning-icon i{

    font-size:34px;

    color:var(--services-primary);

}

.learning-card:hover .learning-icon{

    background:var(--services-primary);

}

.learning-card:hover .learning-icon i{

    color:var(--services-secondary);

}


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

.learning-card span{

    display:inline-block;

    margin-bottom:12px;

    color:var(--services-secondary);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

}

.learning-card h4{

    color:var(--services-primary);

    margin-bottom:18px;

    font-size:24px;

    font-weight:700;

}

.learning-card p{

    line-height:1.9;

    margin-bottom:24px;

}

.learning-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--services-primary);

    font-weight:700;

}

.learning-card a i{

    transition:var(--transition);

}

.learning-card a:hover i{

    transform:translateX(6px);

}


/*==============================================================
TRAINING BENEFITS
==============================================================*/

.training-benefits{

    margin-top:70px;

}

.benefit-item{

    background:#ffffff;

    border:1px solid var(--services-border);

    border-radius:22px;

    padding:35px 20px;

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--services-shadow);

    height:100%;

}

.benefit-item:hover{

    transform:translateY(-8px);

}

.benefit-item i{

    font-size:40px;

    color:var(--services-primary);

    margin-bottom:20px;

}

.benefit-item h5{

    color:var(--services-primary);

    font-weight:700;

    margin:0;

}


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

@media(max-width:991px){

    .featured-training{

        padding:35px;

    }

    .training-content{

        margin-top:40px;

    }

}

@media(max-width:767px){

    .featured-training{

        padding:25px;

    }

    .training-content h3{

        font-size:32px;

    }

    .training-meta{

        flex-direction:column;

    }

    .play-button{

        width:70px;

        height:70px;

    }

    .play-button i{

        font-size:28px;

    }

}