body.page-template-summer-2025 header.header,
body.page-template-summer-2025 .banner-home {
    display: none !important;
}

/* body { */
/* margin: 0; */
/* background: linear-gradient(0deg, rgba(5, 9, 44, 0.20) 0%, rgba(5, 9, 44, 0.20) 100%), linear-gradient(180deg, #7789CE 0%, #405493 39.41%, #4B5E9C 100%); */
/* } */


.summer-container {
    /* height: 100%; */
    position: relative;
}

/* === Fixed Background Elements (Scuba, Light, Coral) === */
.summer-container #scuba-diver {
    /* width: 200px; */
    transform: rotateY(180deg) rotate(5deg);
    filter: brightness(26%);
    transform-style: preserve-3d;
    position: relative;
    top: 0;
    left: -200px;
}

/* 
    #torchlight { 
        transform-origin: 0%;
        width: 1620px;
        height: 730px;
        position: absolute;
        inset: -201% auto auto 89%;
        transform: rotate(0);
        max-width: none;
    } */
.summer-container #torchlight {
    transform-origin: 0%;
    width: 85vw;
    height: 730px;
    position: absolute;
    inset: -203% auto auto 43%;
    max-width: none;
    text-align: left;
}

.summer-container #torchlight img {
    width: 100%;
    height: 100%;
}



.summer-container .undersea-deco {
    z-index: 2;
    width: 208px;
    height: 798px;
    height: 65vh;
    display: block;
    position: absolute;
    inset: 0% 0% 0% auto;
    object-fit: contain;
    object-position: right;
}

/* === Content Popup === */
body.loaded.logged-in,
body.logged-in #ocean-campaign-screen {
    min-height: calc(100vh - 32px);
    /* height: calc(95vh - 32px); */
}

.summer-container #ocean-campaign-screen {
    position: relative;
    min-height: 100vh;
    /* height: 95vh; */
    padding: 100px 20px;
    color: white;
    text-align: center;
    background: transparent;
}

.summer-container #ocean-campaign-screen .campaign-content {
    max-width: 800px;
    margin: auto;
    z-index: 2;
    position: relative;
}

.summer-container .campaign-content h1 {
    color: #FFF;
    font-family: "HelveticaNeue";
    font-size: clamp(26px, 2.9vw, 42px);
    font-style: normal;
    font-weight: 400;
    line-height: 119.444%;
    margin-bottom: 14px;
    text-align: center;
}

/* .campaign-content h1 span {
        font-family: Merriweather;
        font-style: normal;
        font-weight: 500;
        line-height: 119.444%;
        background: linear-gradient(135deg, #ED89FF, #999AFF, #B9CFFF, #84A8FC);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    } */

body.rtl .summer-container .campaign-content h1 span {
    font-weight: 900 !important;
}

.summer-container .campaign-content h1 span {
    font-family: Merriweather;
    font-style: normal;
    font-weight: 500;
    line-height: 119.444%;
    /* background: linear-gradient(135deg, #ED89FF, #999AFF, #B9CFFF, #84A8FC); */
    /* background: linear-gradient(to right, #E95125, #FFF06B, #84A0EA, #FFA287, #E95125); */
    text-align: center;

}

.txt-gradient-shine {
    background: linear-gradient(to right, #F08E0E, #ED89FF, #B9CFFF, #FFF7B6, #84A8FC, #FFF7B6, #B9CFFF, #ED89FF, #F08E0E);
    background-size: 500%;
    background-position: 0%;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 6s infinite alternate;
}

@keyframes shine {

    /* from {
    background-position: -100%;
  } */
    to {
        background-position: 100%;
    }
}



.summer-container .campaign-content>p {
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-family: "HelveticaNeueeThin";
    font-size: clamp(16px, 1.46vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 155.556%;
    width: 700px;
    max-width: 90%;
    display: block;
    margin: auto;
}

.summer-container #close-campaign {
    font-family: "HelveticaNeue";
    color: #FFF;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    background: none;
    border-radius: 21px;
    border: 1px solid rgba(255, 255, 255, 0.50);
    padding: 15.5px 18px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.summer-container #close-campaign img {
    width: clamp(12px, 1vw, 16px);
}

/* #close-campaign img.emoji {
        filter: brightness(10);
    } */

.summer-container .logoHome img {
    width: 250px;
}

.summer-container .summer-campaign-header {
    margin-top: 20px;
    /* position: fixed; */
    position: absolute;
    width: 100%;
    /* z-index: 11; */
}

.summer-container .summer-campaign-header a.logoHome,
.summer-container #close-campaign {
    z-index: 11;
}

.summer-container .summer-campaign-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summer-container .background-items {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    height: 100%;
    /* height: 100svh; */
    /* background: linear-gradient(0deg, rgba(5, 9, 44, 0.20) 0%, rgba(5, 9, 44, 0.20) 100%), linear-gradient(180deg, #143996 0%, #000A60 39.41%, #11306E 100%); */
    /* background: url(/wp-content/themes/ecapital/assets/imgs/summer-25/bg-buble-1.jpg); */
    /* background: url(/wp-content/themes/ecapital/assets/imgs/summer-25/bg-buble-1.webp); */
    /* background-size: 100% 100%; */
    overflow: hidden;
    background: blue;
    background: linear-gradient(0deg, rgba(5, 9, 44, 0.20) 0%, rgba(5, 9, 44, 0.20) 100%), linear-gradient(180deg, #0C3FBF 0%, #031580 39.41%, #00027A 100%);
}


.bg-hero {
    position: relative;
    height: 100vh;
    /* background: url(/wp-content/themes/ecapital/assets/imgs/summer-25/bg-buble-1.webp);
    background-size: cover; */
}

.bg-hero .bg-bubbles {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-video,
.bg-map {
    position: relative;
    height: 100vh;
}

.bg-map .bg-map-1 {
    position: absolute;
    top: -310px;
    filter: brightness(0.6);
    left: 0;
}


.bg-map img.bg-map-2 {
    position: absolute;
    right: 0;
    top: 60%;
    filter: brightness(0.45);
    z-index: 2;
}

/* .page-template-summer-2025 .summer-container .background-items,
    .page-id-95746 .summer-container .background-items {
        position: fixed;
    } */


/* @supports (height: 100svh) {
        .background-items {
            height: 100svh;
        }
    } */

.summer-container .scuba {
    position: absolute;
    top: 50%;
    width: 630px;
    height: 158px;
    left: 0;
    text-align: left;
}


.summer-container .decor-diver01-container {
    z-index: 1;
    pointer-events: auto;
    width: 100vw;
    height: 798px;
    height: 65vh;
    position: absolute;
    inset: 50% auto auto 0%;
    transform: translateY(-50%);
}


.summer-container .decor-coral01-container {
    /* pointer-events: none; */
    /* width: 208px; */
    width: 260px;
    position: absolute;
    inset: 0% 0% 0% auto;
    /* aspect-ratio: 137 / 525; */
}

.summer-container .coral01-frame-light {
    z-index: 10;
    border-radius: 100%;
    width: 100%;
    height: 90%;
    position: absolute;
    /* inset: 0% 0% 0% auto; */
    overflow: hidden;
}

.summer-container .coral01-frame-light.blur {
    filter: blur(10px);
}


.summer-container .coral01-contents-container {
    /* width: 300px;
        height: 620px; */
    width: 100%;
    position: relative;
}

.summer-container .coral01-contents-containerdark {
    z-index: 0;
    filter: brightness(20%);
    /* width: 300px; */
    /* height: 620px; */
    position: absolute;
    inset: 0% 0% 0% auto;
    aspect-ratio: 137 / 525;
}




.summer-container img.coral-left {
    position: absolute;
    left: 0;
    top: -258px;
    filter: brightness(0.6);
}

.summer-container img.coral-bottom-left {
    position: absolute;
    bottom: -120px;
    left: -160px;
    filter: brightness(0.9);
}

.summer-container img.coral-bottom-right {
    position: absolute;
    bottom: -370px;
    right: -210px;
    filter: brightness(0.5);
}


.summer-container img.bg-middle-line {
    position: absolute;
    inset: 0 0 0 50%;
    transform: translateX(-50%);
    height: 100%;
}

.summer-container img.bg-gred-1 {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    width: 770px;
    filter: blur(132px);
}

.summer-container img.bg-gred-2 {
    position: absolute;
    inset: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 550px;
    filter: blur(112px);
}

.summer-container img.bg-gred-3 {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translateY(-50%);
    width: 7;
    filter: blur(132px);
}

.summer-container img.bg-gred-4 {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    mix-blend-mode: multiply;
    height: 50%;
    filter: blur(104px);
}

/* .summer-articles {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10%;
        margin-top: 70px;
    } */

.summer-container .summer-articles {

    margin-top: 70px;
    width: 90%;
    margin-inline: auto;
    justify-items: center;
}

.summer-container .articles-grid {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px;
}

.summer-container .summer-item {
    width: clamp(250px, 20vw, 350px);
    border-radius: 31px;
    border: 1px solid rgba(4, 35, 99, 0.15);
    background: rgba(4, 22, 58, 0.22);
    width: 100%;
}

.summer-container .summer-item .post-article,
.summer-container .summer-item .link-article,
.summer-container .summer-item .video-article,
.summer-container .summer-item .youtube-article {
    padding: 20px;
    width: 100%;
    display: block;
    cursor: pointer;
}

.summer-container .summer-item img {
    width: 100%;
    border-radius: 22px;
    border: 3px solid rgba(4, 35, 99, 0.23);
    background: lightgray -12.79px -6.916px / 175.125% 105.105% no-repeat;
    margin-bottom: 20px;
    transition: .3s;
    aspect-ratio: 1;
    object-fit: cover;
}

.summer-container .summer-item:hover img {
    border: 3px solid rgba(255, 255, 255, 0.16);
}

.summer-container .summer-item p {
    color: #FFF7B6;
    text-align: center;
    font-family: Merriweather;
    font-size: clamp(14px, 1vw, 18px);
    /* font-style: italic; */
    font-weight: 300;
    line-height: 175%;
    letter-spacing: 0.13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.summer-container img.fish-1 {
    position: absolute;
    top: 37%;
    right: 190px;
    z-index: 2;
    transform: rotateY(180deg);
    width: clamp(50px, 3vw, 70px);
}

.summer-container img.fish-2 {
    position: absolute;
    top: 32%;
    right: 90px;
    z-index: 2;
    width: clamp(50px, 4.5vw, 80px);
    filter: brightness(38%);
}

.summer-container img.fish-3 {
    position: absolute;
    top: 55%;
    right: 20px;
    z-index: 2;
    width: clamp(50px, 3.3vw, 70px);
}

.summer-container img.fish-4 {
    position: absolute;
    top: 86%;
    right: 15px;
    z-index: 2;
    width: clamp(50px, 4.5vw, 60px);
}

.summer-container img.fish-5 {
    position: absolute;
    top: 30%;
    left: 50px;
    z-index: 2;
    width: clamp(70px, 5vw, 100px);
}

.summer-container img.fish-6 {
    position: absolute;
    top: 10%;
    right: 30px;
    z-index: 2;
    width: clamp(60px, 4.5vw, 80px);
}

.summer-container img.fish-7 {
    position: absolute;
    bottom: 4%;
    width: 180px;
    left: -10px;
    /* transform: rotate(12deg); */
}


.summer-container svg#motionPath {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


.summer-container #video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 1, 61, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.summer-container .popup-content {
    position: relative;
    width: 80%;
    height: 80vh;
    border-radius: 20px;
    border: 11px solid rgba(4, 10, 60, 0.45);
}

.summer-container #youtube-video,
.summer-container #mp4-video {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: black;
}

.summer-container h6.title-video {
    font-family: Merriweather;
    position: absolute;
    top: 18px;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 143.738%;
    width: 100%;
    padding-inline: 30px;
}

.summer-container .close-popup {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 30px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    font-family: 'HelveticaNeue';
    filter: brightness(40);
    font-weight: 600;
}

/* #menu {
        display: none;
    } */

.summer-container section.video-section {
    position: relative;
    width: 100%;
    /* height: 100vh; */
    height: 110vh;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}


.summer-container h1.video-title {
    z-index: 1111;
    position: relative;
    margin-bottom: 50px;
    color: #C9E6ED;
    font-family: "Ponte TRIAL SilkType";
    font-size: clamp(26px, 2.9vw, 42px);
    font-style: normal;
    font-weight: 500;
    line-height: 126%;
    text-align: center;
}

.summer-container section.map-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-top: 100px;
}

.summer-container #scroll-video {
    position: relative;
    display: block;
    z-index: 1;
    width: 65%;
    /* aspect-ratio: 1920 / 920; */
    height: 100%;
    margin: auto;

    /* border-radius: 50px; */
    /* transform-origin: center center; */
}

.summer-container #scroll-video video {
    object-fit: cover;
    background: black;
    width: 100%;
    height: 100%;
    /* mask: url(/wp-content/themes/ecapital/assets/imgs/summer-25/hero-mask-2.png); */
    mask: url(/wp-content/themes/ecapital/assets/imgs/summer-25/hero-mask-5.webp);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
}

.summer-container .sound {
    position: absolute;
    bottom: clamp(50px, 7.15vw, 100px);
    right: clamp(30px, 7.15vw, 100px);
}

.summer-container .sound button {
    background: rgba(255, 255, 255, 0.14);
    border: none;
    width: clamp(50px, 4vw, 100px);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.summer-container .sound img {
    width: auto;
    height: auto;
}

.summer-container .map-section .numbers-content {
    position: relative;
    z-index: 1;
    width: 570px;
    max-width: 90%;
    margin: auto;
    text-align: center;
}

.summer-container .map-section .numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.summer-container .map-section .number-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.summer-container .map-section span.value {
    color: #68DDF8;
    font-family: Verdana;
    font-size: clamp(45px, 5.8vw, 80px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.summer-container .map-section .txt {
    color: rgba(201, 230, 237, 0.80);
    font-family: Verdana;
    font-size: clamp(16px, 1.4vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 238.889%;
    text-align: center;
    line-height: 1;
}

.summer-container .map-section .numbers-content p {
    color: rgba(201, 230, 237, 0.70);
    text-align: center;
    font-family: Verdana;
    font-size: clamp(14px, 1.3vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 193.75%;
    letter-spacing: 0.16px;
}

.summer-container .map-section .numbers-content .voir-sites {
    border-radius: 30px;
    background: #FFF7B6;
    color: #443D04;
    font-family: Verdana;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.14px;
    padding: 13px 22px;
    margin-block: 15px;
    display: block;
    width: max-content;
    margin-inline: auto;
    text-align: center;
}

.summer-container .map-section .map-content {
    position: relative;
    z-index: 2;
    width: 65%;
    margin-inline: auto;
    text-align: center;
    margin-top: 60px;
    /* padding-bottom: 700px; */
}

.summer-container section.map-section h1 {
    color: #C9E6ED;
    font-family: "Ponte TRIAL SilkType";
    font-size: clamp(26px, 2.9vw, 42px);
    font-style: normal;
    font-weight: 500;
    line-height: 126%;
    margin-block: 0 16px;
    text-align: center;
}

.summer-container .fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover;
    z-index: 9999;
    border-radius: 0 !important;
}


.summer-container .video-fullscreen {
    position: absolute;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
}



.summer-container .footer-rockets {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    height: 600px;
}

/* .footer-rockets img.footer-bg {
        z-index: 2;
        height: auto;
    }

    img.footer-back-layer-bg {
        z-index: 3;
        height: auto;
        mix-blend-mode: darken;
    } */

.summer-container .footer-rockets .footer-bg {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.summer-container .footer-rockets .content {
    z-index: 1;
    position: relative;
    width: 700px;
    margin: auto;
}

.summer-container .footer-rockets .content h3 {
    text-align: center;
    font-family: Merriweather;
    font-size: clamp(20px, 3.5vw, 44px);
    font-style: normal;
    font-weight: 400;
    line-height: 131.8%;
    /* background: linear-gradient(to bottom right, #ED89FF 0%, #999AFF 19%, #B9CFFF 38%, #84A8FC 39%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, #ED89FF 0%, #999AFF 19%, #B9CFFF 38%, #84A8FC 39%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, #ED89FF 0%, #999AFF 19%, #B9CFFF 38%, #84A8FC 39%) top left / 50% 50% no-repeat, linear-gradient(to top right, #ED89FF 0%, #999AFF 19%, #B9CFFF 38%, #84A8FC 39%) top right / 50% 50% no-repeat; */
    /* background-clip: text; */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    margin-bottom: 70px;
    max-width: 90%;
    margin-inline: auto;
    direction: ltr;
}

.summer-container .footer-rockets .content a {
    color: #0B1C3F;
    /* font-family: "Helvetica Neue"; */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.28px;
    border-radius: 39px;
    background: #FFF7B6;
    padding: 20px 45px;
    margin: auto;
    display: block;
    width: fit-content;
}

.summer-container .footer-credit {
    position: absolute;
    bottom: 0;
    z-index: 11;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    padding-inline: 40px;
}

.summer-container .fc-left p {
    color: rgba(201, 230, 237, 0.70);
    font-family: Verdana;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 31px;
    letter-spacing: 0.14px;
}

.summer-container .fc-right p {
    color: #C9E6ED;
    text-align: right;
    font-family: Verdana;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 31px;
    letter-spacing: 0.14px;
}

.summer-container .fc-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.summer-container .fc-right .sc {
    display: flex;
    gap: 10px;
    align-items: center;
}

#summer-popup {
    display: none;
}

.summer-container .hero-section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    z-index: 1;
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.summer-container .hero-section .hero-content {
    width: 700px;
}

.summer-container .hero-section .hero-title {
    font-family: Merriweather;
    text-align: center;
    font-size: clamp(25px, 3.8vw, 60px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-block: 0 24px;
}

.summer-container .hero-section .hero-subtitle {
    color: #E8F7FB;
    font-size: clamp(15px, 1.7vw, 28px);
    font-style: normal;
    line-height: normal;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0;
}

.summer-container .grid-section {
    /* background: gray; */
    width: 100%;
    height: 100vh;
    /* position: absolute; */
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

/* h1.grid-title {
    margin: 0;
    color: currentColor;
    font-weight: bold;
    font-size: 6vw;
    display: flex;
    line-height: 1.2;
    gap: 10px;
  } */


.summer-container h1.grid-title {
    margin: 0;
    color: currentColor;
    font-size: 4.5vw;
    display: flex;
    justify-content: center;
    gap: 10px;
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #C9E6ED; */
    font-family: "Ponte TRIAL SilkType";
    font-weight: 500;
    /* line-height: 1; */
    /* color: transparent; */
}

body.rtl .summer-container h1.grid-title {
    color: white;
    line-height: 170%;
}

.summer-container .grid-subtitle {
    color: #ffffff94;
    font-family: "Abhaya Libre";
    font-size: clamp(16px, 1.9vw, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    text-align: center;
    transition: .3s color;
}


.summer-container .slide-item-current .grid-subtitle {
    color: #ffffff;
    transition: .3s color;
}


.summer-container h1.grid-title>div {
    display: flex !important;
}

/* .summer-container .slide-item-current {
    transform: scale(1.05);
    z-index: 2;
} */

/* .summer-container .slide-item-current h1.grid-title {
    color: white;
    -webkit-text-stroke: transparent;
} */

.summer-container .letter__inner {
    display: block;
    will-change: transform;
}

.summer-container .slide-item-current .letter__inner {
    transform: translate3d(-100%, 0, 0);
}

.summer-container .letter__inner.letter__inner--stroke {

    -webkit-text-stroke: 1.2px #ffffff94;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

span.letter__inner.letter__inner--filled {
    color: white;
    position: absolute;
    left: 100%;
    top: 0;
}

.summer-container .grid-content {
    display: flex;
    height: 100vh;
    justify-content: space-between;
    align-items: center;
    width: max-content;
    margin-inline-start: 20%;
    position: absolute;
    z-index: 1 !important;
}

.summer-container .slide {
    position: relative;
    text-align: center;
    margin: 0 20vw 0 0;
}




.summer-container .grid {
    position: absolute;
    --gridgap: 1vw;
    --gridwidth: 100%;
    --gridheight: 100vh;
    display: grid;
    width: var(--gridwidth);
    height: var(--gridheight);
    grid-template-rows: repeat(12, calc(var(--gridheight) / 12 - var(--gridgap)));
    grid-template-columns: repeat(12, calc(var(--gridwidth) / 12 - var(--gridgap)));
    grid-gap: var(--gridgap);
    align-content: center;
    justify-content: center;
    /* z-index: -1; */
    opacity: 0;
}

.summer-container .grid.grid-item-current {
    /* z-index: 0; */
    pointer-events: auto;
    opacity: 1;
}

.summer-container .grid__item-wrap {
    position: relative;
    /* overflow: hidden; */
    display: flex;
    align-items: center;
}



.grid-wrap.view--grid .grid__item-wrap,
.grid-wrap.view--grid .image-inner {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}


.summer-container .grid__item-wrap .image-inner {
    width: 100%;
    height: 100%;
    transition: .5s;
    margin: auto;
    position: relative;
}

.summer-container .img-content {
    position: absolute;
    width: 100%;
    height: 100%;
}

.summer-container .grid__item-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    mask: url(/wp-content/themes/ecapital/assets/imgs/summer-25/hero-mask.png);
    /* -webkit-mask-image: url(/wp-content/themes/ecapital/assets/imgs/summer-25/hero-mask.png); */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    user-select: none;
}

.summer-container .grid-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
}


.summer-container .grid-item-1 {
    grid-area: 2 / 3 / 5 / 6;
    opacity: .6;
}

.summer-container .grid-item-2 {
    grid-area: 5 / 3 / 9 / 6;
    opacity: .69;
}

.summer-container .grid-item-3 {
    grid-area: 3 / 6 / 6 / 8;
}

.summer-container .grid-item-4 {
    grid-area: 6 / 6 / 11 / 8;
    opacity: .8;
}

.summer-container .grid-item-5 {
    grid-area: 2 / 8 / 7 / 11;
    opacity: .5;
}

.summer-container .grid-item-6 {
    grid-area: 7 / 8 / 12 / 10;
    opacity: .8;
}


.summer-container .grid {
    /* opacity: 0; */
    pointer-events: none;
    /* transition: opacity 0.4s ease; */
}

/* .grid-item-current {
  opacity: 1;
  pointer-events: auto;
  z-index: 0;
} */


.summer-container button.grid-cta {
    color: #FFF;
    text-align: center;
    font-family: Verdana;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 31px;
    letter-spacing: 0.39px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
    background: transparent;
    border: none;
    padding: 0;
}



.summer-container .grid-title .letter-mask,
.summer-container .grid-title .letter {
    position: relative;
    display: inline-block;
    overflow: hidden;
    /* margin-inline-end: 6px; */
}


.summer-container .scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(15, 26, 68, 0.50);
    font-size: clamp(14px, 1.1375vw, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    gap: clamp(6px, 0.4875vw, 30px);
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    filter: invert(1);
}

.summer-container .scroll-down img {
    width: clamp(50px, 1.95vw, 80px);
}

.summer-container .scroll-down p {
    margin: 0;
    color: #EAEDF3;
    font-size: clamp(14px, 1vw, 17px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
}


.summer-container button.remove-view-grid {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 50%;
    border: none;
    width: 40px;
    aspect-ratio: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summer-container button.remove-view-grid img {
    filter: invert(1);
    width: 17px;
}


.summer-container .view--grid button.remove-view-grid {
    display: flex;
}

.summer-container button.remove-view-grid {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 50%;
    border: none;
    width: 40px;
    aspect-ratio: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    display: none;
    transition: .3s;
}

.summer-container .follow-cursor {
    position: absolute;
    width: 86px;
    aspect-ratio: 1;
    background: #FFF7B6;
    color: #0B1C3F;
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.28px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* user-select: none;    */
    display: none;
    pointer-events: none;
    z-index: 1;
}


.grid-wrap.view--grid .follow-cursor {
    display: none !important;
}

.grid-wrap.view--grid .grid__item-wrap {
    opacity: 1 !important;
}

.summer-container .overlay-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #00000080;
    mask: url(/wp-content/themes/ecapital/assets/imgs/summer-25/hero-mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    user-select: none;
    transition: .3s opacity;
    opacity: 0;
}

.summer-container .img-content:hover .overlay-img {
    opacity: 1;
}

.summer-container .overlay-img p {
    color: white;
    padding: 2px 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 13px;
    text-align: center;
}

@media only screen and (min-width: 992px) {
    .v-mobile {
        display: none;
    }
}

@media only screen and (max-width: 991px) {

    .summer-container .hero-section .hero-title {
        margin-block: 0 14px;
    }

    .summer-container .hero-section .hero-content {
        width: 80%;
    }

    .summer-container section.video-section {
        height: 100vh;
    }

    .summer-container section.map-section {
        padding-top: 0;
    }

    .summer-container #ocean-campaign-screen {
        height: auto !important;
    }

    .summer-container #scroll-video {
        height: 600px !important;
    }

    .v-desktop {
        display: none;
    }

    .summer-container .popup-content {
        height: 400px;
        width: 95%;
    }

    .summer-container .background-items {
        height: 100%;
        background-size: cover;
        background-position: top;
    }

    .summer-container .map-section .map-content {
        margin-top: 0;
        width: 100%;
    }

    .summer-container .map-section .numbers-content p {
        margin-bottom: 20px;
    }

    /* .background-items:before {
            content: '';
            background: url('/wp-content/themes/ecapital/assets/imgs/summer-25/bg-buble-1.jpg');
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            height: 1200px;
            position: absolute;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top;
        } */


    .summer-container .grid-cta {
        display: none;
    }

    /* .grid {
            grid-template-rows: repeat(13, calc(var(--gridheight) / 13 - var(--gridgap)));
            grid-template-columns: repeat(13, calc(var(--gridwidth) / 13 - var(--gridgap)));
        } */

    /* .grid-item-1 {
            grid-area: 2 / 3 / 6 / 6;
        }

        .grid-item-2 {
            grid-area: 6 / 3 / 12 / 6;
        }

        .grid-item-3 {
            grid-area: 2 / 6 / 7 / 9;
        }

        .grid-item-4 {
            grid-area: 7 / 6 / 12 / 9;
        }

        .grid-item-5 {
            grid-area: 2 / 9 / 8 / 12;
        }

        .grid-item-6 {
            grid-area: 8 / 9 / 12 / 12;
        } */


    .summer-container .grid {
        grid-template-rows: repeat(22, calc(var(--gridheight) / 22 - var(--gridgap)));
        grid-template-columns: repeat(27, calc(var(--gridwidth) / 27 - var(--gridgap)));
    }

    .summer-container .grid__item-wrap {
        opacity: 1;
    }



    .summer-container .grid-item-1 {
        grid-area: 3 / 3 / 9 / 10;
    }

    .summer-container .grid-item-2 {
        grid-area: 15 / 3 / 21 / 10;
    }

    .summer-container .grid-item-3 {
        grid-area: 4 / 11 / 10 / 18;
    }

    .summer-container .grid-item-4 {
        grid-area: 14 / 11 / 20 / 18;
    }

    .summer-container .grid-item-5 {
        grid-area: 3 / 19 / 9 / 26;
    }

    .summer-container .grid-item-6 {
        grid-area: 15 / 19 / 21 / 26;
    }

    .summer-container .scroll-down {
        bottom: 8%;
    }
}

@media only screen and (max-width: 767px) {

    .summer-container h1.video-title {
        margin-bottom: 30px;
    }

    .summer-container h1.grid-title {
        font-size: 25px;
    }

    .summer-container .letter__inner.letter__inner--stroke {
        -webkit-text-stroke: 1px white;
    }

    .summer-container .footer-rockets .content h3 {
        margin-bottom: 20px;
    }

    .summer-container .summer-articles {
        grid-template-columns: repeat(1, 1fr);
    }

    .summer-container h6.title-video {
        font-size: 15px;
    }

    .summer-container .scuba {
        top: 45%;
        width: 300px;
        height: 100px;
    }

    .summer-container #scuba-diver {
        left: -180px;
    }

    .summer-container #torchlight {
        width: 85vw;
        height: 450px;
        inset: -198% auto auto 34%;
    }

    .summer-container .decor-diver01-container,
    .summer-container .undersea-deco {
        height: 50vh;
    }


    .summer-container .footer-rockets {
        height: 400px;
    }

    .summer-container .footer-rockets .footer-bg {
        height: 500px;
        object-fit: cover;
    }

    .summer-container .footer-rockets .content a {
        padding: 15px 25px;
    }

    .summer-container .map-section .numbers {
        gap: 10px;
    }
}

@media only screen and (max-width: 500px) {


    .summer-container .grid-subtitle { 
        font-size: 14px; 
        line-height: 150%; 
    }
    .summer-container .slide { 
        margin: 0 40px 0px 0;
    }

    .summer-container #close-campaign {
        border-radius: 50%;
        padding: 11px;
    }

    .summer-container #close-campaign span {
        display: none;
    }

    .summer-container .summer-item img {
        aspect-ratio: 3 /2;
    }

    .summer-container .logoHome img {
        width: 170px;
    }
}