.elementor-33 .elementor-element.elementor-element-a8add7e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-33 .elementor-element.elementor-element-a3241d5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33 .elementor-element.elementor-element-e799125{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-33 .elementor-element.elementor-element-d75fcdb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:30px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-33 .elementor-element.elementor-element-406e2f9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33 .elementor-element.elementor-element-bd28b6d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33 .elementor-element.elementor-element-69b9436{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33 .elementor-element.elementor-element-cb94ce4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33 .elementor-element.elementor-element-1b04b57{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33 .elementor-element.elementor-element-678677c{padding:50px 0px 0px 0px;}.elementor-33 .elementor-element.elementor-element-b211425{--display:flex;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-33 .elementor-element.elementor-element-e563c09{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-33 .elementor-element.elementor-element-6dda20d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-33 .elementor-element.elementor-element-a3241d5{--width:50%;}.elementor-33 .elementor-element.elementor-element-e799125{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-32d7685 *//* ==========================================================
   MEDIA SKILLZ EDUCATION — HERO SECTION
   ========================================================== */

:root {
    --ms-primary: #0E5E6F;
    --ms-secondary: #1695A3;
    --ms-text: #535353;
    --ms-accent: #E9B949;
    --ms-primary-hover: #084B59;
    --ms-accent-hover: #D89F2F;

    --ms-light-bg: #F8FAFB;
    --ms-soft-teal: #EEF7F8;
    --ms-dark: #1C2733;
    --ms-white: #FFFFFF;
}


/* ==========================================================
   1. MAIN HERO CONTAINER
   Add class "ms-hero" to main Elementor hero container
   ========================================================== */

/* =========================================
   HERO TITLE — GREEN + YELLOW
========================================= */

.ms-hero-title {
    margin: 0 0 22px;

    font-size: 45px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -1.2px;

    color: #1C2733;
}

/* Primary Green Highlight */

.ms-hero-title .ms-green {
    color: #0E5E6F;
}

/* Yellow / Gold Highlight */

.ms-hero-title .ms-yellow {
    color: #E9B949;
    position: relative;
    display: inline-block;
}

/* Premium underline below Impact */

.ms-hero-title .ms-yellow::after {
    content: "";

    position: absolute;
    left: 2px;
    bottom: -4px;

    width: 55%;
    height: 4px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #E9B949,
        #D89F2F
    );
}

/* Tablet */

@media (max-width: 1024px) {
    .ms-hero-title {
        font-size: 38px;
        letter-spacing: -0.8px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .ms-hero-title {
        font-size: 33px;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }
}
/* subtle decorative circle */

.ms-hero::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    right: -190px;
    top: -180px;

    border-radius: 50%;

    border: 1px solid rgba(22, 149, 163, 0.12);

    z-index: -1;
}


/* gold decorative glow */

.ms-hero::after {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    left: -130px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(233, 185, 73, 0.07);

    filter: blur(2px);

    z-index: -1;
}


/* ==========================================================
   2. LEFT CONTENT
   ========================================================== */

.ms-hero-content {
    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.ms-hero-copy {
    position: relative;
    max-width: 620px;
}


/* ==========================================================
   3. SMALL TOP TAG
   ========================================================== */

.ms-tag {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin: 0 0 22px;
    padding: 9px 16px;

    border-radius: 50px;

    background: rgba(22, 149, 163, 0.09);

    border: 1px solid rgba(14, 94, 111, 0.09);

    color: var(--ms-primary);

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}


/* gold dot before tag */

.ms-tag::before {
    content: "";

    width: 7px;
    height: 7px;

    margin-right: 9px;

    border-radius: 50%;

    background: var(--ms-accent);

    box-shadow:
        0 0 0 4px rgba(233, 185, 73, 0.14);
}


/* ==========================================================
   4. HERO H1
   H1 MAX SIZE = 45PX
   ========================================================== */

.ms-hero h1,
.ms-hero-copy h1 {

    margin: 0 0 22px;

    max-width: 650px;

    font-size: 45px;
    font-weight: 700;

    line-height: 1.16;

    letter-spacing: -1.2px;

    color: var(--ms-dark);

    text-wrap: balance;
}


/* highlighted H1 words */

.ms-hero h1 span,
.ms-hero-copy h1 span {

    color: var(--ms-primary);
}


/* Optional class for gold highlighted word */

.ms-hero h1 .ms-accent-text {

    color: var(--ms-accent);
}


/* ==========================================================
   5. HERO DESCRIPTION
   ========================================================== */

.ms-desc {

    max-width: 590px;

    margin: 0 0 30px;

    color: var(--ms-text);

    font-size: 17px;

    font-weight: 400;

    line-height: 1.75;
}


/* ==========================================================
   6. BUTTON GROUP
   ========================================================== */

.ms-hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 30px;
}


/* base button */

.ms-html-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 15px 25px;

    border-radius: 12px;

    overflow: hidden;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}


/* ==========================================================
   7. PRIMARY BUTTON
   ========================================================== */

.ms-html-btn-primary {

    background: var(--ms-primary);

    color: var(--ms-white) !important;

    border: 1px solid var(--ms-primary);

    box-shadow:
        0 10px 28px rgba(14, 94, 111, 0.20);
}


.ms-html-btn-primary:hover {

    background: var(--ms-primary-hover);

    border-color: var(--ms-primary-hover);

    color: var(--ms-white) !important;

    transform: translateY(-3px);

    box-shadow:
        0 17px 38px rgba(14, 94, 111, 0.27);
}


/* button shine */

.ms-html-btn-primary::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0.22) 50%,
        transparent 100%
    );

    transform: skewX(-22deg);

    transition: left 0.65s ease;
}


.ms-html-btn-primary:hover::before {

    left: 140%;
}


/* arrow */

.ms-btn-arrow {

    position: relative;

    z-index: 2;

    display: inline-block;

    font-size: 18px;

    transition: transform 0.3s ease;
}


.ms-html-btn-primary:hover .ms-btn-arrow {

    transform: translateX(4px);
}


/* ==========================================================
   8. OUTLINE BUTTON
   ========================================================== */

.ms-html-btn-outline {

    background: rgba(255,255,255,0.75);

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

    border: 1.5px solid rgba(14,94,111,0.65);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


.ms-html-btn-outline:hover {

    background: var(--ms-soft-teal);

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

    color: var(--ms-primary-hover) !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(14,94,111,0.10);
}


/* ==========================================================
   9. TRUST INDICATORS
   ========================================================== */

.ms-trust-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px 22px;
}


.ms-trust-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--ms-text);

    font-size: 13px;

    font-weight: 500;

    line-height: 1.4;
}


.ms-trust-dot {

    display: block;

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--ms-accent);

    box-shadow:
        0 0 0 4px rgba(233,185,73,0.12);
}


/* divider between trust items */

.ms-trust-item:not(:last-child)::after {

    content: "";

    width: 1px;

    height: 16px;

    margin-left: 14px;

    background: rgba(83,83,83,0.18);
}


/* ==========================================================
   10. RIGHT IMAGE CONTAINER
   Add class "ms-hero-image" to right Elementor container
   ========================================================== */

.ms-hero-image {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* decorative teal shape */

.ms-hero-image::before {

    content: "";

    position: absolute;

    width: 82%;

    height: 88%;

    right: -18px;

    top: 7%;

    border-radius:
        45% 20% 42% 25% /
        30% 40% 25% 45%;

    background:
        linear-gradient(
            135deg,
            rgba(14,94,111,0.12),
            rgba(22,149,163,0.05)
        );

    transform: rotate(4deg);

    z-index: -1;
}


/* gold accent circle */

.ms-hero-image::after {

    content: "";

    position: absolute;

    width: 95px;

    height: 95px;

    right: 0;

    bottom: 6%;

    border-radius: 50%;

    background: var(--ms-accent);

    opacity: 0.95;

    z-index: -1;
}


/* ==========================================================
   11. MAIN HERO IMAGE
   Add class "ms-main-image" to Elementor image widget
   ========================================================== */

.ms-main-image {

    position: relative;

    width: 100%;

    z-index: 3;
}


.ms-main-image img {

    display: block;

    width: 100%;

    min-height: 510px;

    object-fit: cover;

    border-radius:
        32px 32px 90px 32px;

    box-shadow:
        0 30px 70px rgba(14,94,111,0.15);

    transition:
        transform 0.6s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.6s ease;
}


.ms-main-image:hover img {

    transform: scale(1.015);

    box-shadow:
        0 35px 85px rgba(14,94,111,0.20);
}


/* ==========================================================
   12. FLOATING STAT CARDS
   For next/right-side HTML
   ========================================================== */

.ms-floating-card {

    position: absolute;

    z-index: 10;

    min-width: 170px;

    padding: 15px 18px;

    border-radius: 16px;

    background:
        rgba(255,255,255,0.90);

    border:
        1px solid rgba(255,255,255,0.70);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 15px 40px rgba(14,94,111,0.14);

    animation:
        ms-card-float 5s ease-in-out infinite;
}


.ms-floating-card strong {

    display: block;

    margin-bottom: 3px;

    color: var(--ms-primary);

    font-size: 25px;

    font-weight: 700;

    line-height: 1.1;
}


.ms-floating-card span {

    color: var(--ms-text);

    font-size: 12px;

    font-weight: 500;
}


/* top card */

.ms-floating-card.card-1 {

    top: 12%;

    left: -35px;
}


/* bottom card */

.ms-floating-card.card-2 {

    right: -15px;

    bottom: 12%;

    animation-delay: 1.2s;
}


@keyframes ms-card-float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-9px);

    }

}


/* ==========================================================
   13. ACCESSIBILITY
   ========================================================== */

.ms-html-btn:focus-visible {

    outline:
        3px solid rgba(233,185,73,0.55);

    outline-offset: 4px;
}


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

    .ms-floating-card {

        animation: none;

    }

    .ms-html-btn,
    .ms-main-image img {

        transition-duration: 0.01ms;

    }

}


/* ==========================================================
   14. TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .ms-hero {

        min-height: auto;

        padding-top: 70px;

        padding-bottom: 70px;

    }

    .ms-hero h1,
    .ms-hero-copy h1 {

        font-size: 38px;

        line-height: 1.2;

        letter-spacing: -0.8px;

    }

    .ms-desc {

        font-size: 16px;

    }

    .ms-main-image img {

        min-height: 430px;

        border-radius:
            26px 26px 70px 26px;

    }

    .ms-floating-card.card-1 {

        left: -10px;

    }

}


/* ==========================================================
   15. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .ms-hero {

        min-height: auto;

        padding-top: 55px;

        padding-bottom: 55px;

    }

    .ms-hero-copy {

        max-width: 100%;

    }

    .ms-tag {

        margin-bottom: 18px;

        padding: 8px 13px;

        font-size: 10px;

        letter-spacing: 0.8px;

    }

    .ms-hero h1,
    .ms-hero-copy h1 {

        margin-bottom: 19px;

        font-size: 33px;

        line-height: 1.2;

        letter-spacing: -0.6px;

    }

    .ms-desc {

        margin-bottom: 25px;

        font-size: 16px;

        line-height: 1.7;

    }

    .ms-hero-buttons {

        flex-direction: column;

        align-items: stretch;

        gap: 11px;

        margin-bottom: 27px;

    }

    .ms-html-btn {

        width: 100%;

        min-height: 50px;

    }

    .ms-trust-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 11px;

    }

    .ms-trust-item:not(:last-child)::after {

        display: none;

    }

    .ms-hero-image {

        margin-top: 35px;

    }

    .ms-main-image img {

        min-height: 380px;

        border-radius:
            24px 24px 55px 24px;

    }

    .ms-hero-image::after {

        width: 65px;

        height: 65px;

        right: -8px;

    }

    .ms-floating-card {

        min-width: 145px;

        padding: 12px 14px;

    }

    .ms-floating-card strong {

        font-size: 21px;

    }

    .ms-floating-card.card-1 {

        top: 8%;

        left: -5px;

    }

    .ms-floating-card.card-2 {

        right: -5px;

        bottom: 8%;

    }

}


/* ==========================================================
   16. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .ms-hero h1,
    .ms-hero-copy h1 {

        font-size: 30px;

    }

    .ms-main-image img {

        min-height: 330px;

    }

    .ms-floating-card {

        min-width: 130px;

    }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a8add7e *//*====================================================

MEDIA SKILLZ HERO

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

.ms-hero{

position:relative;

padding:110px 0;

overflow:hidden;

background:linear-gradient(180deg,#ffffff 0%,#F8FAFB 100%);

}


/***************************

LEFT CONTENT

***************************/

.ms-hero-content{

display:flex;

flex-direction:column;

justify-content:center;

z-index:5;

}


/***************************

TAG

***************************/

.ms-tag{

display:inline-flex;

align-items:center;

width:fit-content;

padding:10px 18px;

border-radius:50px;

background:#EEF7F8;

color:#0E5E6F;

font-size:13px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:28px;

border:1px solid rgba(14,94,111,.08);

}


/***************************

HEADINGS

***************************/

.ms-hero h1{

font-size:45px;

font-weight:700;

line-height:1.18;

letter-spacing:-1px;

margin-bottom:28px;

color:#1C2733;

}

.ms-hero h1 span{

color:#0E5E6F;

}


/***************************

DESCRIPTION

***************************/

.ms-desc{

font-size:17px;

line-height:1.9;

color:#5E6B75;

max-width:560px;

margin-bottom:35px;

}


/***************************

BUTTON GROUP

***************************/

.ms-hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:35px;

}


/***************************

PRIMARY BUTTON

***************************/

.ms-btn-primary .elementor-button{

background:#0E5E6F!important;

color:#fff!important;

padding:16px 34px!important;

border-radius:14px;

font-weight:600;

transition:.35s ease;

box-shadow:0 10px 25px rgba(14,94,111,.18);

}

.ms-btn-primary .elementor-button:hover{

background:#084B59!important;

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(14,94,111,.28);

}


/***************************

OUTLINE BUTTON

***************************/

.ms-btn-outline .elementor-button{

background:#fff!important;

border:2px solid #0E5E6F!important;

color:#0E5E6F!important;

padding:16px 34px!important;

border-radius:14px;

transition:.35s ease;

}

.ms-btn-outline .elementor-button:hover{

background:#0E5E6F!important;

color:#fff!important;

transform:translateY(-4px);

}


/***************************

IMAGE SIDE

***************************/

.ms-hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}


/***************************

MAIN IMAGE

***************************/

.ms-main-image img{

width:100%;

border-radius:32px;

box-shadow:

0 30px 80px rgba(0,0,0,.10);

transition:.6s ease;

position:relative;

z-index:5;

}

.ms-main-image img:hover{

transform:scale(1.02);

}


/***************************

BACKGROUND SHAPES

***************************/

.ms-hero::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:rgba(22,149,163,.06);

right:-120px;

top:-80px;

}

.ms-hero::after{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:rgba(233,185,73,.08);

left:-120px;

bottom:-80px;

}


/***************************

FLOATING ANIMATION

***************************/

@keyframes msFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

.ms-main-image{

animation:msFloat 6s ease-in-out infinite;

}


/***************************

TRANSITIONS

***************************/

.ms-hero *{

transition:.35s ease;

}


/***************************

RESPONSIVE

***************************/

@media(max-width:1024px){

.ms-hero{

padding:90px 0;

}

.ms-hero h1{

font-size:38px;

}

}

@media(max-width:767px){

.ms-hero{

padding:70px 0;

}

.ms-tag{

font-size:12px;

}

.ms-hero h1{

font-size:32px;

line-height:1.25;

}

.ms-desc{

font-size:16px;

}

.ms-hero-buttons{

flex-direction:column;

}

.ms-btn-primary,

.ms-btn-outline{

width:100%;

}

}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-edf5b1b *//* ==========================================================
   MEDIA SKILLZ EDUCATION
   DYNAMIC STORIES / BLOG / NEWS CARDS
========================================================== */

.ms-stories-section{

    --ms-primary:#0E5E6F;
    --ms-primary-hover:#084B59;
    --ms-secondary:#1695A3;
    --ms-text:#535353;
    --ms-accent:#E9B949;
    --ms-accent-hover:#D89F2F;

    position:relative;

    width:100%;

    padding:90px 20px;

    background:#FFFFFF;

    overflow:hidden;
}


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

.ms-story-card{

    position:relative;

    height:100%;

    display:flex;
    flex-direction:column;

    background:#FFFFFF;

    border:
        1px solid rgba(14,94,111,.09);

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 8px 28px rgba(14,94,111,.07);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/* GOLD BOTTOM ACCENT */

.ms-story-card::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--ms-accent),
            var(--ms-accent-hover)
        );

    transform:
        translateX(-50%);

    transition:
        width .45s ease;
}


/* CARD HOVER */

.ms-story-card:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(233,185,73,.35);

    box-shadow:
        0 22px 50px rgba(14,94,111,.13),
        0 6px 20px rgba(233,185,73,.07);
}


.ms-story-card:hover::after{

    width:100%;
}


/* ==========================================================
   FEATURED IMAGE CONTAINER
========================================================== */

.ms-story-image-wrap{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#EEF7F8;
}


/* ELEMENTOR IMAGE */

.ms-story-image-wrap img{

    display:block;

    width:100% !important;
    height:100% !important;

    object-fit:cover;

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}


/* IMAGE OVERLAY */

.ms-story-image-wrap::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(8,75,89,.20) 100%
        );

    pointer-events:none;
}


/* IMAGE ZOOM */

.ms-story-card:hover
.ms-story-image-wrap img{

    transform:
        scale(1.055);
}


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

.ms-story-category{

    position:absolute !important;

    left:16px;
    top:16px;

    z-index:5;

    width:auto !important;
}


/* Elementor Post Terms */

.ms-story-category a{

    display:inline-flex;

    align-items:center;

    padding:7px 12px;

    border-radius:50px;

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

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

    font-size:10px;

    font-weight:700;

    line-height:1;

    letter-spacing:.7px;

    text-transform:uppercase;

    text-decoration:none !important;

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

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        background .3s ease,
        color .3s ease;
}


/* Category hover */

.ms-story-card:hover
.ms-story-category a{

    background:
        var(--ms-accent);

    color:
        var(--ms-primary-hover) !important;
}


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

.ms-story-content{

    position:relative;

    flex:1;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    padding:23px 23px 25px;
}


/* ==========================================================
   DATE
========================================================== */

.ms-story-date{

    margin-bottom:9px;

    color:
        #7A858A;

    font-size:12px;

    font-weight:500;

    line-height:1.4;
}


/* Optional gold date dot */

.ms-story-date::before{

    content:"";

    display:inline-block;

    width:5px;
    height:5px;

    margin-right:7px;

    vertical-align:middle;

    border-radius:50%;

    background:
        var(--ms-accent);
}


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

.ms-story-card-title{

    margin-bottom:10px;
}


.ms-story-card-title,
.ms-story-card-title a{

    color:
        #1C2733 !important;

    font-size:20px;

    font-weight:700;

    line-height:1.35;

    letter-spacing:-.25px;

    text-decoration:none !important;

    transition:
        color .3s ease;
}


.ms-story-card:hover
.ms-story-card-title,

.ms-story-card:hover
.ms-story-card-title a{

    color:
        var(--ms-primary) !important;
}


/* ==========================================================
   POST EXCERPT
========================================================== */

.ms-story-excerpt{

    margin-bottom:20px;

    color:
        var(--ms-text);

    font-size:14px;

    font-weight:400;

    line-height:1.65;
}


/* Limit excerpt visually */

.ms-story-excerpt p{

    display:-webkit-box;

    margin:0;

    overflow:hidden;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;
}


/* ==========================================================
   READ STORY LINK
========================================================== */

.ms-story-link{

    margin-top:auto;
}


/* Elementor Button */

.ms-story-link .elementor-button{

    padding:0 !important;

    background:transparent !important;

    border:none !important;

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

    font-size:13px !important;

    font-weight:700 !important;

    box-shadow:none !important;

    text-decoration:none !important;

    transition:
        color .3s ease,
        transform .3s ease;
}


.ms-story-link .elementor-button:hover{

    color:
        var(--ms-accent-hover) !important;

    transform:
        translateX(4px);
}


/* ==========================================================
   LOOP GRID SPACING
========================================================== */

.ms-stories-loop .elementor-loop-container{

    gap:25px;
}


/* Make cards equal height */

.ms-stories-loop
.e-loop-item{

    height:100%;
}


.ms-stories-loop
.e-loop-item > div{

    height:100%;
}


/* ==========================================================
   OPTIONAL VIEW ALL BUTTON
========================================================== */

.ms-stories-view-all{

    display:flex;

    justify-content:center;

    margin-top:38px;
}


.ms-stories-view-all .elementor-button{

    padding:
        14px 25px !important;

    border-radius:
        11px !important;

    background:
        var(--ms-primary) !important;

    color:
        #FFFFFF !important;

    font-size:
        14px !important;

    font-weight:
        600 !important;

    box-shadow:
        0 10px 25px rgba(14,94,111,.16);

    transition:
        .3s ease;
}


.ms-stories-view-all
.elementor-button:hover{

    background:
        var(--ms-primary-hover) !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px rgba(14,94,111,.22);
}


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

@media(max-width:1024px){

    .ms-stories-section{

        padding:
            75px 20px;
    }


    .ms-story-content{

        padding:
            20px 19px 23px;
    }


    .ms-story-card-title,
    .ms-story-card-title a{

        font-size:18px;
    }

}


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

@media(max-width:767px){

    .ms-stories-section{

        padding:
            60px 16px;
    }


    .ms-story-card{

        border-radius:
            18px;
    }


    .ms-story-content{

        padding:
            20px 18px 22px;
    }


    .ms-story-card-title,
    .ms-story-card-title a{

        font-size:18px;
    }


    .ms-story-excerpt{

        font-size:
            13.5px;
    }


    .ms-stories-loop
    .elementor-loop-container{

        gap:20px;
    }

}


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

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

    .ms-story-card,
    .ms-story-image-wrap img,
    .ms-story-link .elementor-button{

        transition:none;
    }

}/* End custom CSS */