@import url("https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap");


/* ---------------- Fonts & Typography ---------------- */

@font-face {
    font-family: "Caprasimo";
    src: url(../fonts/Caprasimo/Caprasimo-Regular.ttf);
}

.capri-font {
    font-family: "Caprasimo", sans-serif !important;
    font-weight: 400 !important;
    font-size: 48px !important;
    line-height: 33px !important;
    color: #ffffff !important;
}

.template-header.capri-font {
    margin-bottom: 40px;
    text-align: center;
    -webkit-line-clamp: unset;
    -webkit-box-orient: vertical;
    line-height: 1.2 !important;
}

/* Tablet */

@media (max-width: 991px) {
    .capri-font {
        font-size: 48px;
        line-height: 1.2 !important;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .capri-font {
        font-size: 42px !important;
    }
}
.mobile-breadcrumb {
top: 5px; 
}

/* ---------------- Layout & Utilities ---------------- */

.container-fluid {
    max-width: 1240px;
}

.img-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.18) 72.42%);
}

.sticky-flash-bg {
    width: 100%;
    position: sticky;
    top: 70px;
    display: flex;
    justify-content: space-between;
}

.quot-mark-top,
.quot-mark-bottom {
    max-width: 36px;
    max-height: 36px;
    vertical-align: unset;
}

.quot-mark-top {
    position: absolute;
    left: 1rem;
    top: 1rem;
}

.quot-mark-bottom {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.flex-grouped {
    position: relative;
    display: flex;
    align-items: center;
}

.searchContainer2 form {
    margin: 0 !important;
}

.mb-80 {
    margin-bottom: 80px;
}

.mt-80 {
    margin-top: 80px;
}

@keyframes wave {
    to {
        transform: translateX(-100%);
    }
}

/* ---------------- Colors & Buttons ---------------- */

.section-light-blue {
    background-color: #daf0f9;
    padding-bottom: 80px;
}

.floodwise .btn.btn-outline-primary {
    height: 48px;
    line-height: 20px;
}

.floodwise .btn-groups {
    display: flex;
    gap: 20px;
    width: fit-content;
}

.floodwise .btn-groups .btn {
    margin: 0;
    white-space: nowrap;
}

/* ---------------- Waves & Scrollspy ---------------- */

.end-of-scrollspy,
.start-of-scrollspy {
    height: 0;
}

.wave-svg-divider {
    position: absolute;
    bottom: -1px;
    left: -1px;
}

.dropdown-menu.scrollspy-menu {
    gap: 1rem;
}

.wave-group {
    animation: wave 10s linear infinite;
}

#wave2 {
    animation-duration: 12s;
}

#wave3 {
    animation-duration: 14s;
    animation-direction: reverse;
}

.gooeff {
    filter: url(#goo);
}

.wave-holder {
    position: relative;
}

.start-of-scrollspy {
    position: relative;
    background-color: #0098bf;
}

.start-of-scrollspy::after {
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: -1px;
    background-color: #0098bf;
    display: block;
    content: " ";
}

/* Tablet */

@media (max-width: 991px) {
    .scrollspy-nav {
        overflow: visible;
        background-color: #dcf1ff;
    }
}

/* ---------------- Template Content & Bottom Banner ---------------- */

.template-content .template-header {
    color: #21409a;
    font-family: "Inter";
    font-size: 40px;
    font-weight: 700;
    line-height: 60px;
}

.template-content p {
    color: #4d4f55;
    font-family: "Inter";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.template-content .btn {
    margin-top: 32px;
}

.template-content .start-container p {
    color: #000;
    text-align: center;
    /* Desktop/Paragraph/Large */
    font-size: 20px;
    font-weight: 400;
    line-height: 32px; /* 160% */
}

.page-bottom-banner-holder .page-bottom-banner-info h3 {
    font-size: 48px;
    font-weight: 700;
    line-height: 62px;
}

.careers-bottom-banner .page-bottom-banner-info {
    padding: 0 !important;
}

/* Tablet */

@media (max-width: 991px) {
    .careers-bottom-banner {
        padding: 1rem;
        padding-bottom: 2rem;
        height: 358px;
    }

    .template-two-section {
        padding-top: 60px;
    }

    .swwd-button {
        margin-bottom: -35px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .page-bottom-banner-info .container-fluid {
        padding: 0;
    }
}

@media (max-width: 567px) {
    .page-bottom-banner-holder .page-bottom-banner-info h3 {
        font-size: 32px;
        font-weight: 700;
        line-height: 48px;
    }
}

/* ---------------- Template Img Wrapper ---------------- */

.template-img-wrapper {
    position: relative;
    margin: 0;
}

.template-img-wrapper img {
    mix-blend-mode: multiply;
    max-height: 480px;
    max-width: 480px;
    min-height: 200px;
    min-width: 200px;
}

/* Desktop */

@media (min-width: 568px) {
    .template-img-wrapper {
        overflow: unset;
    }
}

/* Tablet */

@media (max-width: 991px) {
    .template-img-wrapper img {
        max-height: 20%;
    }
}

/* Mobile */

@media (max-width: 576px) {
    .template-img-wrapper img {
        max-height: 150px;
        max-width: 150px;
    }

    .template-img-wrapper {
        position: unset;
        right: 0rem;
    }
}

@media (max-width: 567px) {
    .template-img-wrapper img {
        mix-blend-mode: multiply;
        width: 100%;
    }
}

/* ---------------- Owl Carousel (base) ---------------- */

.owl-carousel {
    display: block;
}

.owl-item .owl-nav {
    display: none;
    width: 0;
}

.owl-carousel .owl-nav {
    position: absolute;
    top: 40%;
    font-size: 2rem;
    min-width: 100%;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    border-radius: 50%;
}

.owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    left: -5rem;
}

.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    right: -5rem;
}

/* Tablet */

@media (max-width: 991px) {
    .owl-carousel .owl-nav button.owl-prev {
        left: -1.5rem !important;
    }

    .owl-carousel .owl-nav button.owl-next {
        right: -1.5rem !important;
    }

    .testimonial-section .owl-nav {
        top: 3px;
    }

    .testimonial-section .owl-dots {
        margin-top: 20px;
    }

    .testimonial-section .owl-carousel .owl-nav button.owl-prev {
        left: -33px !important;
    }

    .testimonial-section .owl-carousel .owl-nav button.owl-next {
        right: -33px !important;
    }
}

/* ================================================================
   SECTION 1 - HERO / CAROUSEL / WAVES
   ================================================================ */

/* ---------------- Desktop / Base ---------------- */

.section-one {
    position: relative;
    bottom: -1px;
    background: linear-gradient(#0098bf 20%, #034c72 100%);
}

.one {
    padding-bottom: 1px;
    bottom: -2px;
}

.section-one-content {
    z-index: 5;
    position: relative;
}

.section-one h3 {
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    line-height: 62px;
    text-align: center;
    margin-bottom: 24px;
}

.section-one h4 {
    color: #f5f5f7;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 12px;
}

.section-one p {
    color: #eaeaea;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 0;
}

.section-one .vid-wrapper {
    border-radius: 12px;
    overflow: hidden;
}

.section-one iframe,
.section-one-content iframe {
    width: 100%;
    border-radius: 12px;
}

/* Waves */

.wave-svg-flash,
.front-wave {
    width: 100%;
}

.fw-holder {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 100px;
}

.wave-wrapper-flash {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

.raindrop {
    position: absolute;
    top: -10rem;
    bottom: 0;
    z-index: 4;
    width: 100%;
}

.raindrop img {
    width: 100%;
    mix-blend-mode: multiply !important;
    opacity: 0.3;
}

.unique-wave-sectioning {
    z-index: 10;
    position: relative;
}

/* Hero carousel: single source of truth */

.one .carousel,
.one .carousel-inner {
    width: 100%;
    max-height: none;
}

.one .carousel-inner {
    position: relative;
    overflow: hidden;
}

.one .carousel-item {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.one .carousel-item img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.one .carousel-caption {
    top: 22% !important;
    right: 10%;
    bottom: auto !important;
    left: 10%;
    z-index: 4;
}

.one .carousel-next-prev-group {
    z-index: 5;
}

.one .carousel-indicators {
    bottom: 1rem;
    z-index: 5;
    margin-bottom: 0;
}

/* Keep indicators above carousel imagery without forcing a global position. */
.carousel-indicators {
    z-index: 4;
}

.carousel-caption .btn-primary {
    z-index: 4;
}

/* Desktop (min-width) */

@media (min-width: 2120px) {
    .raindrop {
        top: -8rem;
    }
}

@media (min-width: 1601px) {
    .wave-wrapper-flash {
        height: 400px;
    }
}

@media (min-width: 991px) {
    .carousel-caption .cp-p {
        margin-bottom: 18px !important;
    }
   
}

@media (max-width: 1600px) {
    .one .carousel-fade .carousel-caption {
        left: 10%;
    }
}

/* Tablet */

@media only screen and (max-width: 991px) and (-webkit-device-pixel-ratio: 3) {
    .custom-text-wrapper {
        text-align: left;
    }
}

@media (max-width: 1300px) {
    .raindrop {
        top: -8rem;
    }
}

@media (max-width: 1024px) {
    .raindrop {
        top: -7rem;
    }
}

@media (max-width: 991px) {
    .raindrop {
        top: -6rem;
    }

    .wave-svg-flash {
        height: 300px;
    }
}

@media (max-width: 940px) {
    .raindrop {
        top: -6rem;
    }
}

@media (max-width: 768px) {
    .fw-holder {
        height: auto;
        bottom: 0;
    }

    .raindrop {
        top: -5rem;
    }

    .wave-svg-flash {
        height: 250px;
    }
}

/* Mobile */

@media only screen and (max-width: 568px) and (-webkit-device-pixel-ratio: 3) {
    .custom-text-wrapper {
        text-align: center;
    }
}

@media (max-width: 568px) {
    .section-one h3 {
        font-size: 24px;
        font-weight: 700;
        line-height: 33px;
    }

    .section-one p,
    .section-one h4 {
        text-align: center;
    }

    .section-one p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 0;
    }

    .section-one h4 {
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        margin-bottom: 12px;
    }

    .raindrop {
        top: -4rem;
    }

    .wave-svg-flash {
        height: 200px;
    }
}

/* Small mobile */

@media (max-width: 480px) {
    .wave-svg-flash {
        height: 150px;
    }

    .one .carousel-caption p {
        margin-bottom: 1rem;
    }

    .raindrop {
        top: -4rem;
    }
}

/* ================================================================
   SECTION 3 - QUIZ / CONTENT
   ================================================================ */

/* ---------------- Desktop / Base ---------------- */

.section-three {
    position: relative;
    background: linear-gradient(180deg, #014066 0%, #0280cc 100%);
    padding-bottom: 80px;
}

.section-three .container-fluid {
    max-width: 1024px;
   
}

.partner-obscarousel .container-fluid {
   max-width: 1130px;
}

.section-three .template-content {
    max-width: 100%;
}

.quiz-wrapper {
    border-radius: 24px;
    overflow: hidden;
    width: 100%;
    min-height: 688px;
    min-width: 100%;
    background-image: url(../images/quiz-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    padding: 40px 120px;
}

.quiz-wrapper img {
    mix-blend-mode: multiply;
    height: 366px;
}

.quiz-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.result,
.feedback,
.feedback .btn .question {
    display: none;
}

.quiz-container.active,
.result.active,
.start-container,
.question.active {
    display: block;
    width: 100%;
    text-align: center;
}

.feedback.active {
    display: flex;
    width: 100%;
    align-items: center;
}

.template-content p.question-container {
    color: #000;
    text-align: center;
    /* Desktop/Heading/H5 */
    font-family: "Inter" !important;
    font-size: 30px;
    font-weight: 700;
    line-height: 45px; /* 150% */
    max-width: 756px;
    margin-left: auto;
    margin-right: auto;
}

.feedback.active .btn {
    display: block;
    text-align: left !important;
}

.template-content .quiz-container .feedback h2,
.template-content .quiz-container .feedback p {
    text-align: left !important;
}

.feedback p {
    font-size: 20px;
    font-weight: 400;
    line-height: 32px; /* 160% */
}

.template-content .quiz-container.active:has(.feedback) {
    text-align: left;
}

.template-content .quiz-container h2,
.question h2 {
    color: #000;
    text-align: center;
    /* Desktop/Paragraph/Large */
    font-size: 30px;
    font-weight: 700;
    line-height: 45px; /* 160% */
}

.quiz-container .question .question-number {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px; /* 160% */
}

.quiz-container .result h2 {
    color: #000;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px; /* 125% */
}

.quiz-container .result h3 {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px; /* 150% */
    margin: 8px;
}

.quiz-container .result p {
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
}

.quiz-container .result .btn,
.quiz-container .question .btn {
    margin-top: 12px;
}

.quiz-container .result .btn:first-of-type,
.quiz-container .question .btn:first-of-type {
    margin-top: 20px;
}

/* Share result */

.Share-result {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.Share-result h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px; /* 160% */
}

.soc-wrapper {
    display: flex;
    gap: 12px;
}

.soc-wrapper img {
    width: 48px;
    height: 48px;
}

.soc-wrapper span {
    margin-top: 8px;
}

.soc-wrapper a {
    margin: 24px 0;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px; /* 150% */
}

.share-link-group {
    display: flex;
    gap: 24px;
    width: 100%;
    align-items: baseline;
}

.share-link-group .btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tablet */

@media (max-width: 991px) {
    .section-three {
        padding-bottom: 5px;
    }
/*
    .section-three h2 {
        margin-top: 20px;
    }
*/
    .quiz-component h2 {
        margin-top: 0px;
    }
}

/* Mobile */

@media (max-width: 568px) {
    .quiz-wrapper {
        padding: 40px;
        min-height: 430px;
    }

    .quiz-wrapper img {
        height: 160px;
    }

    .quiz-container .result h2 {
        color: #000;
        font-size: 32px;
        font-weight: 700;
        line-height: 40px; /* 125% */
    }

    .quiz-container .question h2 {
        color: #000;
        font-size: 16px !important;
        font-weight: 700;
        line-height: 24px; /* 125% */
    }

    .quiz-container .question .question-number {
        color: #000;
        font-size: 14px;
        font-weight: 700;
        line-height: 21px; /* 125% */
    }

    .quiz-container .result h3 {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 27px; /* 150% */
        margin: 8px;
    }

    .quiz-container .result p,
    .quiz-container .question p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
    }

    .feedback.active {
        display: unset;
        width: 100%;
        align-items: center;
    }

    .feedback h2,
    .template-content .start-container h2 {
        font-size: 24px;
        font-weight: 700;
        line-height: 33px; /* 137.5% */
    }

    .feedback p,
    .template-content .start-container p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
    }

    .feedback.active .btn,
    .template-content .quiz-container .feedback h2,
    .template-content .quiz-container .feedback p {
        display: block;
        text-align: center !important;
    }

    .template-content .quiz-container.active:has(.feedback) {
        text-align: center;
    }

    .feedback.active .btn {
        margin: auto;
    }

    .Share-result {
        margin: 1rem;
    }

    .soc-wrapper {
        overflow: scroll;
        gap: 12px;
        position: relative;
        display: flex;
    }

    .soc-wrapper img {
        min-width: 32px;
        max-width: 32px;
        min-height: 32px;
        max-height: 32px;
    }

    .soc-wrapper.scrollable::after {
        opacity: 1; /* Show the arrow */
    }
}


/* ================================================================
   SECTION 4 - FLASH CARDS / CAMPAIGN / OWL CAROUSEL
   ================================================================ */

/* ---------------- Desktop / Base ---------------- */

.flash-card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    padding: 0;
    cursor: pointer;
    aspect-ratio: 9/16;
    margin-bottom: 120px;
}

.flash-card .card-overlay {
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 10.57%, #000 190.63%), rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.flash-card .text-content {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    left: 0;
    padding: 20px;
    padding-bottom: 36px;
}

.flash-card .text-content .inner {
    display: grid;
    gap: 2px !important;
}

.flash-card .img-default img,
.flash-card .img-hover img,
.flash-card .img-mobile img {
    object-fit: cover;
    width: 100%;
    object-position: center;
}


.flash-card .img-hover,
.flash-card:hover .img-default,
.flash-card .img-mobile {
    display: none;
}

.flash-card:hover .img-hover {
    display: block;
}

.flash-card h3,
.flash-card p {
    margin: 0;
}

.flash-card h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px; /* 150% */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.flash-card p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.flash-card h4 {
    color: #eaeaea;
}

.flash-card span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px; /* 150% */
    text-decoration: none;
    position: relative;
    width: fit-content;
}

.flash-card span::after {
    width: 0;
    height: 2px;
    background: #ffffff;
    position: absolute;
    content: " ";
    display: block;
    transition: width 0.3s ease; /* Smooth transition for the width */
}

.flash-card:hover span::after {
    width: 100%; /* On hover, the width transitions to 100% */
}

.flash-card .stretched-link {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 3;
    pointer-events: auto;
    content: "";
    background-color: transparent;
}

/* Flash header */

.flash-header-group {
    display: grid;
    gap: 40px;
    color: #ffffff;
    padding-top: 80px;
    margin-bottom: 40px;
}

.flash-header-group .header-span {
    color: #fff;
    font-family: "Caprasimo";
    font-size: 28px;
    font-weight: 400;
    line-height: 33px;
    text-align: center;
}

.flash-header-group h2 {
    color: #fff;
    font-family: "Caprasimo";
    font-size: 64px;
    font-weight: 400;
    line-height: 33px;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
}

.flash-header-group p {
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.flash-header-group .header-subtitle {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.flash-header-group .flash-img-group {
    display: flex;
    max-width: 1366px;
    width: 100%;
    margin: auto;
}

.flash-header-group .flash-img-group p {
    color: #c1e5f6;
    margin-bottom: 0;
    text-align: center;
    font-family: "Caprasimo";
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    max-width: 180px;
}

.flash-img-group .flash-img {
    flex: 1 0;
    width: 100%;
}

.flash-img-group .flash-img:last-of-type {
    flex: 0;
}

/* Campaign */

.campaign-sticky-left {
    position: absolute;
    left: -10%;
}

.campaign-sticky-right {
    position: absolute;
    right: -10%;
}

.campaign-text-holder img {
    display: block;
    margin: auto;
}

.campaign-text-holder.f-text,
.campaign-text-holder.f-text img {
    width: 100%;
}

/* Owl flash carousel */

.owl-three .owl-dots,
.owl-flash .owl-dots {
    display: block !important;
    margin-top: 40px;
    text-align: center;
}
@media (max-width: 991px) {
.owl-three .owl-dots,
.owl-flash .owl-dots {
   
    margin-top: 0px !important;
 }   
}

.owl-three .owl-dot,
.owl-flash .owl-dot {
    background-color: #ffffff !important;
    width: 24px;
    height: 24px;
    margin-right: 24px;
}

/*
.owl-three .owl-dots .owl-dot.active,
.owl-flash .owl-dots .owl-dot.active {
    background-color: #014066 !important;
}
*/

.owl-flash .owl-prev i,
.owl-flash .owl-next i {
    color: #ffffff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
}

.owl-flash .owl-prev {
    left: -50px;
}

.owl-flash .owl-next {
    right: -50px;
}

.owl-flash .img-container {
    border-radius: 12px;
    overflow: hidden;
}

.owl-flash .img-container img {
    width: 100%;
    object-fit: fill;
    object-position: center;
    border-radius: 12px;
}

.owl-flash {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    max-width: 90%;
    margin: auto;
    margin-top: 80px;
}

.owl-flash h4 {
    font-family: "Caprasimo";
    font-size: 30px;
    font-weight: 400;
    line-height: 45px;
    margin-bottom: 8;
}

.owl-flash .btn-outline-secondary {
    margin-top: 20px;
}

.owl-flash .text-container {
    margin-top: 0px !important;
}

.owl-flash .owl-stage-outer {
    height: fit-content;
}

.obscarousel .owl-nav svg {
    color: white;
}

.obscarousel .owl-flash {
    margin-top: 40px !important;
}

/* Mid blue (section four) */

.section-mid-blue {
    background-color: #c1e5f6;
}

.section-mid-blue .template-content h3 {
    color: #21409a;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 45px;
}

.section-mid-blue h4 {
    color: #0072bc !important;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 40px !important;
    margin-top: 4px !important;
}

.section-mid-blue .slider {
    margin-bottom: 40px;
}

.section-mid-blue .template-two-section {
    padding-bottom: 0 !important;
}

.section-mid-blue .owl-nav .owl-prev i,
.section-mid-blue .owl-nav .owl-next i {
    color: #ffffff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
}

.owl-three .owl-stage-outer {
    height: fit-content;
}

.owl-three .owl-prev,
.owl-five .owl-prev {
    left: -60px;
    top: 30px;
}

.owl-three .owl-next,
.owl-five .owl-next {
    right: -60px;
    top: 30px;
}

.owl-three .item {
    box-shadow: rgba(165, 165, 165, 0.16);
    border-radius: 12px;
    padding: 32px;
    background: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #4d4f55;
    min-height: 100px;
    overflow: hidden;
    width: 100%;
}

.swm-carousel {
    display: block;
}

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



@media (max-width: 991px) {
    .flash-header-group h2 {
        font-size: 56px;
        line-height: 33px;
    }

    .flash-header-group p {
        font-size: 16px !important;
    }

    .flash-header-group .btn-groups.mx-auto {
        width: fit-content !important;
    }

    .obscarousel .owl-flash.owl-loaded.owl-drag {
        margin-top: -40px !important;
    }
/*
    .obscarousel h2 {
        margin-top: 30px;
    }
*/
    .campaingn-text-margin {
        margin-bottom: -20px;
    }

    .campaingn-text-margin h3 {
        margin-top: 0px;
    }

    .flash-card .img-mobile {
        display: block;
    }

    .flash-card .img-default,
    .flash-card .img-hover {
        display: none;
    }

    .flash-card:hover .img-hover {
        display: none;
    }

    .flash-card {
        aspect-ratio: 16/9;
        margin-bottom: 24px;
    }
/*
    .flash-card p,
    .flash-card span {
        display: none;
    }
*/
    .flash-card .text-content {
        padding: 20px;
    }

    .owl-flash .owl-prev {
        display: block;
        opacity: 1;
    }

    .flash-header-group .flash-img-group {
        display: grid;
        justify-content: center;
        gap: 40px;
        padding-top: 80px;
    }

    .campaign-sticky-left {
        position: absolute;
        left: -20%;
    }

    .campaign-sticky-right {
        position: absolute;
        right: -20%;
    }

    .owl-flash .text-container {
        text-align: left;
    }

  /*  .owl-flash .btn {
        margin-left: 1rem;
    }*/

    .owl-flash .owl-prev,
    .owl-flash .owl-next {
        display: block;
    }
/*
    .owl-flash .text-container {
        text-align: center;
    }*/

    .owl-flash .action-holder {
        width: 100%;
        display: flex;
        //justify-content: center;
        margin-bottom: 24px;
        padding-left: 16px;
    }

    .owl-flash .btn-outline-secondary {
        margin-top: 12px;
    }

    .owl-three .owl-prev,
    .owl-three .owl-next {
        display: block;
        opacity: 1;
    }
}

/* ---------------- Responsive flash card arrow icon ---------------- */

@media (max-width: 991px) { 
    .flash-card p {
        display: none;
    }

    .flash-card .text-content .inner {
        display: block;
        text-align: center;
    }

    .flash-card .inner .cp-h4 {
        display: inline;
        //text-decoration: underline;
        line-height: 0.5;
    }

    .flash-card .fom {
        display: inline;
        margin-left: 1px;
        /* vertical-align: middle; */
        font-size: 0; /* hides "Find out more" text on mobile */
        line-height: 0;
        color: #ffffff;
    }

    .flash-card .fom::after {
        display: none;
    }

    .flash-card .fom i {
        font-size: 18px;
        line-height: 1;
        color: #fcf2b0;
        font-weight: 900;
    }
}

@media (max-width: 767px) {
    .owl-flash .action-holder {
       padding-left: 0px;
    }
    .owl-carousel .cp-h3 {
    text-align: center !important;
    }
    .section-seven .action-holder {
        justify-content: center;
        text-align: center;
        padding-bottom: 16px;
    }
}

@media (max-width: 991px) and (min-width: 768px) {

.section-seven .text-container {
    text-align: left;
}
.section-seven .action-holder {
    padding-left: 16px;
}

}

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

@media (max-width: 568px) {
    .flash-header-group h2 {
        line-height: 58px;
    }
}

@media (max-width: 600px) {
    .owl-flash .owl-prev {
        left: -38px;
    }

    .owl-flash .owl-next {
        right: -38px;
    }
}

@media (max-width: 500px) {
    .owl-flash .owl-prev {
        left: -35px;
    }

    .owl-flash .owl-next {
        right: -35px;
    }
}

@media (max-width: 568px) {
    .campaign-sticky-left,
    .campaign-sticky-right {
        display: none;
    }
}

@media (max-width: 500px) {
    .owl-three .owl-next,
    .owl-flash .owl-next {
        right: -32px;
    }

    .owl-three .owl-prev,
    .owl-flash .owl-prev {
        left: -32px;
    }
}

@media (max-width: 600px) {
    .flash-header-group .btn-groups {
        display: grid;
        gap: 24px;
    }

    .flash-header-group .btn-groups .btn {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .campaign-text-holder img {
        display: block;
        margin: auto;
    }

    .campaign-text-holder.f-text img {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .owl-flash .text-container, .owl-carousel .cp-h3 {
        text-align: center;
    }
    .owl-flash .action-holder {
    justify-content: center;
    }
}

@media (max-width: 500px) {
    .campaign-text-holder img {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .owl-three .owl-dot,
    .owl-flash .owl-dot {
        width: 24px;
        height: 24px;
        margin-right: 0.5rem;
    }
}

@media (max-width: 767px) {
    .campaign-text-holder.f-text img {
        width: 100%;
        height: auto;
    }

    .obscarousel .owl-flash .owl-dots {
        margin-top: 0;
    }

    .flash-header-group .btn-groups {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .owl-three .owl-prev {
        left: -38px;
    }

    .owl-three .owl-next {
        right: -38px;
    }
}

@media (max-width: 500px) {
    .owl-three .owl-prev {
        left: -35px;
    }

    .owl-three .owl-next {
        right: -35px;
    }
}

/* ================================================================
   SECTION 7 - CTA / CONTENT
   ================================================================ */

/* ---------------- Desktop / Base ---------------- */

.section-seven {
    position: relative;
    max-width: 100%;
    padding-top: 10px;
}

.section-seven .div-mobile {
    display: flex;
}

.section-seven .container-fluid {
    margin-bottom: 40px;
}

.section-seven .btn-outline-primary {
    font-size: 1rem;
    color: #2F75B8;
    outline: #2F75B8;
    border-color: #2F75B8;
}

/* Desktop (min-width) */

@media (min-width: 991px) {
    .section-seven .cp-p {
        padding-top: 12px !important;
    }
}

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

@media (max-width: 991px) {
    .section-seven .div-mobile > div {
        width: 100% !important;
    }

    .section-seven .btn-outline-primary {
        margin-top: 15px !important;
    }

    .section-seven .btn-groups {
        width: fit-content !important;
        gap: 0px !important;
    }
}

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

@media (max-width: 500px) {
    .section-seven .template-img-wrapper img {
        width: 100%;
    }

    .section-seven.section-light-blue .template-content .btn {
        margin-top: 24px !important;
        display: block;
    }
}

@media (max-width: 767px) {
    .section-seven .div-mobile p {
        width: 100% !important;
    }

    .flex-gp-item {
        width: fit-content;
        flex: 1;
    }

    .section-seven .btn-groups {
        display: grid;
        width: 100%;
    }

    .section-seven .btn-groups button {
        text-align: center;
    }

    .section-seven .container-fluid {
        margin: auto;
        padding-right: 1rem;
    }

    .section-seven.section-light-blue .template-content .btn-groups {
        width: 100%;
    }

    .section-seven.section-light-blue .template-content .btn-groups .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 567px) {
    .section-seven {
        width: 100%;
    }

    .section-seven .container-fluid {
      //  padding-right: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    .section-seven .template-img-wrapper img {
        width: 250px;
        position: relative;
        right: 0;
    }

    .section-seven .template-content .template-header {
        -webkit-line-clamp: unset;
        margin-bottom: 8px;
        font-size: 32px;
        line-height: 48px;
    }
}

@media (max-width: 576px) {
    .section-seven .div-mobile img {
        max-height: 200px;
        max-width: 200px;
    }
}

@media (max-width: 500px) {
    .section-seven .template-img-wrapper img {
        width: 100%;
    }

    .section-seven.section-light-blue .template-content .btn {
        margin-top: 24px !important;
        display: block;
    }
}

@media (max-width: 440px) {
    .section-seven .btn-groups.d-md-none {
        display: block;
    }

    .section-seven .btn-groups.d-md-none .btn {
        display: block;
        margin-top: 32px;
    }
}

@media (max-width: 380px) {
    .section-seven .flex-gp-item {
        width: 120px;
    }

    .section-seven .template-content {
        font-size: 16px !important;
        line-height: 24px;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* ================================================================
   SECTION 8 - TEMPLATE / CONTENT
   ================================================================ */

/* ---------------- Desktop / Base ---------------- */

.template-inner-wrapping {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.section-light-grey {
    background-color: #eef6fa;
}

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

@media (max-width: 576px) {
    .template-inner-wrapping {
        height: fit-content;
        margin-bottom: 32px;
    }
}

@media (max-width: 567px) {
    .template-header .capri-font {
        text-align: center;
        line-height: 60px !important;
        margin-bottom: 40px;
    }

    .section-eight .template-content .template-header {
        margin-bottom: 8px;
    }

    .section-eight .template-content .template-header,
    .section-eight .template-content p {
        text-align: end !important;
        max-width: 250px;
        -webkit-line-clamp: unset;
    }

    .section-eight .btn {
        vertical-align: unset;
        margin-left: auto;
        display: flex;
    }

    .section-light-grey {
        padding-bottom: 64px;
    }
}

/* ================================================================
   FLOODWISE OVERRIDES
   ================================================================ */

/* ---------------- Desktop / Base ---------------- */

.floodwise .cp-h1 {
    font-size: 48px !important;
    padding-bottom: 40px;
    text-align: center;
}

.floodwise .cp-h2 {
    font-size: 40px !important;
}

.floodwise .cp-h3 {
    font-size: 30px !important;
}

.floodwise .cp-h4 {
    font-size: 24px !important;
    line-height: normal;
}

.floodwise .cp-p {
    font-size: 20px !important;
}

.floodwise div.cp-p p {
    font-size: 20px !important;
}

.floodwise .owl-item h3 {
    margin-bottom: 8px !important;
    margin-top: 0px;
}

.floodwise .carousel-caption p {
    margin-bottom: 0.5rem;
}

.floodwise .quiz-container h3 {
    color: black;
}

.floodwise .page-bottom-banner-info p.cp-p {
    padding-top: 10px;
    margin-bottom: 25px !important;
}

.floodwise .section-four h2 {
    line-height: 48px !important;
}

.floodwise .page-bottom-banner-holder .page-bottom-banner-info p {
    font-size: 16px !important;
}

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

@media (max-width: 991px) {
    .floodwise .cp-h1 {
        font-size: 40px !important;
        padding-bottom: 3px !important;
    }

    .floodwise .cp-h2 {
        font-size: 30px !important;
    }

    .floodwise .cp-h3 {
        font-size: 24px !important;
    }

    .floodwise .cp-p {
        font-size: 16px !important;
    }

    .floodwise div.cp-p p {
        font-size: 16px !important;
    }

    .floodwise .owl-item .text-container {
        font-size: 16px !important;
        padding-top: 40px;
    }

    .floodwise .carousel-caption p {
        margin-bottom: 1.5rem;
    }

    .one .carousel-indicators {
        margin-bottom: 1rem;
        }
        
    .floodwise iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9; /* force rectangular shape on mobile */
    }

    .floodwise .careers-bottom-banner .page-bottom-banner-info h2 {
        font-size: 32px !important;
        line-height: 40px;
    }
}

/* ================================================================
   MODALS / QR
   ================================================================ */

/* ---------------- Desktop / Base ---------------- */

.dark-theme-modal .modal-content {
    background-color: #2e2f33;
    color: #ffffff;
}

.dark-theme-modal .modal-header .btn-close {
    color: #ffffff !important;
}

.dark-theme-modal h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px; /* 160% */
    margin-bottom: 8px;
    margin-top: 32px;
}

.dark-theme-modal .small-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

.modal-qr {
    max-width: 698px;
}

.modal-qr .modal-body {
    max-width: 504px;
    margin: auto;
}

.modal-qr .modal-content .modal-header .btn-close {
    background: none;
}

.ios-div {
    position: relative;
    background-color: #000000;
    border-radius: 12px;
    overflow: hidden;
    padding: 1rem;
    width: fit-content;
    max-width: 200px;
}

.android-div {
    position: relative;
    background-color: #D9D9D9;
    border-radius: 12px;
    overflow: hidden;
    padding: 1rem;
    width: fit-content;
    max-width: 200px;
}

.Qr-wrapper {
    display: flex;
    justify-content: center;
    margin: auto;
    gap: 2rem;
}

.Qr-wrapper img {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.Qr-wrapper .bottom-img {
    margin-top: 1rem;
}

.android-div a,
.ios-div a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}

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

@media (max-width: 568px) {
    .modal-qr {
        margin: 1rem;
    }
}


/* ================================================================
   REDESIGN GLOBAL (Teko theme)
   ================================================================ */

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

.teko-font {
    font-family: 'Teko', sans-serif;
    text-align: center;
    text-transform: uppercase;
}

/* ---------------- Section One / Carousel ---------------- */

.raindrop {
    top: 0.5rem;
}

.section-one {
    padding-top: 80px;
}

.section-one,
.section-seven {
    background: #327893;
}

.section-one .cp-h1 {
    margin: 0;
    padding-bottom: 0 !important;
    color: #fcf2b0 !important;
    font-family: 'Teko', sans-serif;
    font-size: clamp(28px, 3.2vw, 40px) !important;
    font-weight: 800;
    text-shadow: 3px 3px 0 #d45322;
}

.section-one p {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.section-one-content {
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    max-width: 1200px;
}

.section-one .row.justify-content-center {
    padding: 20px clamp(16px, 5vw, 120px) 0;
}

/* ---------------- Flash Cards ---------------- */

.flash-card .img-hover,
.flash-card:hover .img-default,
.flash-card .img-mobile {
    display: block;
}

.flash-header-group {
    margin-bottom: 0;
    padding: 20px 16px 0;
}

.flash-header-group .teko-font.cp-h2 {
    color: #21409a !important;
    font-family: 'Teko', sans-serif !important;
    font-weight: 800;
}

.flash-card .cp-h4 {
    color: #fcf2b0 !important;
    font-family: 'Teko', sans-serif !important;
    /* text-align: center; */
    text-transform: uppercase;
}

/* ---------------- Section Three ---------------- */

.section-three {
    padding-bottom: 20px;
    background: #fcf7d1;
}

.section-three .cp-h2,
.section-three .cp-h3 {
    color: #d45322 !important;
    font-family: 'Teko', sans-serif !important;
    font-size: clamp(24px, 2.4vw, 30px) !important;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.section-three .cp-h2 {
    padding-top: 40px;
}

.section-three p {
    color: #00446d;
}

.section-three .container-fluid.mb-80 {
    margin-bottom: 0;
}

/* ---------------- Role / Partner ---------------- */

.role-subtitle,
.partner-subheading {
    padding: 16px;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1.5rem;
}

.role-subtitle {
    color: #00446d;
}

/* ---------------- Obstacle Carousel ---------------- */

.section-three.partner-obscarousel {
    padding: 40px 0 clamp(40px, 6vw, 80px);
    background: #327893;
}

.obscarousel .teko-font.cp-h2 {
    color: #fcf2b0 !important;
    font-family: 'Teko', sans-serif !important;
    font-size: clamp(30px, 3.2vw, 40px) !important;
    text-shadow: 3px 3px 0 #d45322;
}

.section-three.partner-obscarousel .cp-h3 {
    color: #fcf2b0 !important;
    font-family: 'Teko', sans-serif !important;
    font-size: clamp(24px, 2.4vw, 30px) !important;
    font-weight: 800;
    text-transform: uppercase;
}

.partner-subheading {
    color: #fff;
}

.partner-obscarousel img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---------------- Owl Carousel ---------------- */

.owl-carousel .cp-h3 {
    text-align: left;
}

@media (max-width: 576px) {
   .owl-carousel .cp-h3 {
    text-align: center;
}

}

.owl-carousel .action-holder a {
    font-family: 'Teko', sans-serif !important;
    text-align: center !important;
    text-transform: uppercase;
}

.owl-flash .owl-prev i,
.owl-flash .owl-next i {
    color: #fcf2b0 !important;
}

.owl-flash .owl-dot {
    width: 16px;
    height: 16px;
    margin-right: 12px;
}

.owl-dots .owl-dot.active {
    background-color: #fcf2b0 !important;
}

/* ---------------- Buttons ---------------- */

.floodwise .btn.btn-outline-secondary {
    border: 3px solid #fcf2b0;
}

.floodwise .btn.btn-outline-secondary:hover {
    background-color: #fcf2b0;
    color: #d45322;
}

.section-three button.btn.btn-primary,
.section-seven.dual-cta-promo button.btn.btn-primary {
    color: #fcf2b0;
    font-family: 'Teko', sans-serif !important;
    text-transform: uppercase;
    background: #d45322;
}

.section-three button.btn.btn-primary:hover,
.section-seven.dual-cta-promo button.btn.btn-primary:hover {
    color: #fcf2b0 !important;
    background: #d45322;
}

.obscarousel .btn.btn-outline-secondary,
.section-seven.cta-promov3 .btn.btn-outline-secondary,
.section-seven.cta-promov3 .btn.btn-outline-secondary:hover {
    //color: #d45322 !important;
    color: #b6471d !important;
    font-family: 'Teko', sans-serif !important;
    //font-size: 1.125rem;
    //font-weight: 700; 
    text-transform: uppercase;
    background: #fcf2b0;
}

/* ---------------- Section Seven ---------------- */

.section-seven .cp-h2 {
    color: #21409a !important;
    font-family: 'Teko', sans-serif !important;
    font-size: clamp(24px, 2.4vw, 30px) !important;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
}

.section-seven.dual-cta-promo .teko-font.cp-h2 {
    color: #d45322 !important;
    font-family: 'Teko', sans-serif !important;
    font-size: clamp(30px, 3.2vw, 40px) !important;
    font-weight: 800;
    text-align: center;
    text-shadow: 3px 3px 0 #fcf2b0;
    line-height: 1.2;
}

/* ---------------- CTA Promo ---------------- */

.cta-promov3 {
    padding: 20px clamp(16px, 9vw, 160px);
}

.dual-cta-promo {
    padding-bottom: 0 !important;
}

.dual-cta-promo .container-fluid {
    margin-bottom: 0 !important;
    padding: 20px clamp(16px, 8vw, 160px) 0;
}

.section-seven.cta-promov3 .cp-h3 {
    margin-top: 0;
    margin-bottom: 8px !important;
    color: #fcf2b0 !important;
    font-family: 'Teko', sans-serif !important;
    font-size: clamp(24px, 2.4vw, 30px) !important;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
}

.section-seven.cta-promov3 p {
    color: #fff;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 400;
    line-height: 1.6;
}

.section-seven.dual-cta-promo p {
    color: #00446d;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 400;
    line-height: 1.6;
}

.section-seven.cta-promov3 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
}

/* ---------------- Dual CTA Promo / Bottom Banner ---------------- */

.section-seven.dual-cta-promo {
    position: relative;
    height: auto;
    min-height: 0;
}

.dual-cta-promo .page-bottom-banner-holder {
    position: relative;
    min-height: 300px;
    overflow: hidden;
}

.dual-cta-promo .page-bottom-banner-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.dual-cta-promo .page-bottom-banner-img > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dual-cta-promo .page-bottom-banner-infor {
    position: relative;
    z-index: 2;
    padding: clamp(30px, 5vw, 60px) 0;
}

/* ================================================================
   REDESIGN - HERO CAROUSEL (heights, controls, caption)
   ================================================================ */

/* ---------------- Base / Desktop ---------------- */

/* Keep the decorative overlay from obscuring the image */
.one .overlay-image {
    background: none;
}

/* Keep the slide viewport stable */
.one #carouselExampleIndicators {
    position: relative;
    isolation: isolate;
}

.one .carousel-inner {
    position: relative;
    height: clamp(520px, 72vh, 760px);
    overflow: hidden;
}

.one .carousel-item {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* Keep image layers aligned to the full carousel frame */
.one .carousel-item .image-wrap,
.one .carousel-item .inner-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.one .carousel-item .inner-wave img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.one .carousel-item .custom-text-wrapper,
.one .carousel-item .carousel-caption.first .custom-text-wrapper {
    width: 100%;
}

/* Prevent Bootstrap's inner wrapper from forcing unwanted height */
.one .carousel-item .carousel-caption.first > div {
    width: 100%;
    height: auto !important;
}


.one .carousel-next-prev-group {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.one .carousel-next-prev-group .carousel-control-prev,
.one .carousel-next-prev-group .carousel-control-next {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    width: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(217, 217, 217);
    color: rgb(0, 0, 0);
    
    opacity:0.9;
    
    pointer-events: auto;
}

.one .carousel-next-prev-group .carousel-control-prev {
    left:1rem;
    
}

.one .carousel-next-prev-group .carousel-control-next {
    right: 1rem;
    
}

.one .carousel-next-prev-group .carousel-control-prev:hover,
.one .carousel-next-prev-group .carousel-control-next:hover {
    opacity: 1;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px;
    background: rgb(255, 255, 255);
    border-width: 2px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.55);
    border-image: none;
    
}

.one .carousel-next-prev-group i {
    font-size: 1rem;
    line-height: 1;
}

/* ---------------- Desktop / Tablet portrait & landscape ---------------- */

@media (min-width: 576px) and (orientation: portrait) {
    .one .carousel-inner {
        height: clamp(480px, 58svh, 680px);
    }

    .one .carousel-item .inner-wave img.d-block.d-sm-none {
        display: none !important;
    }

    .one .carousel-item .inner-wave img.d-none.d-sm-block {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 1366px)
       and (min-height: 501px) and (orientation: landscape) {
    .one .carousel-inner {
        height: clamp(420px, 68svh, 650px);
    }

    .one .carousel-item .inner-wave img.d-block.d-sm-none {
        display: none !important;
    }

    .one .carousel-item .inner-wave img.d-none.d-sm-block {
        display: block !important;
    }
}

/* Standard desktop */
@media (min-width: 1025px) and (min-height: 501px) {
    .one .carousel-inner {
        height: clamp(520px, 72vh, 760px);
    }

    .one .carousel-item .inner-wave img.d-block.d-sm-none {
        display: none !important;
    }

    .one .carousel-item .inner-wave img.d-none.d-sm-block {
        display: block !important;
    }
}

/* Large desktop */
@media (min-width: 1600px) and (min-height: 501px) {
    .one .carousel-inner {
        height: clamp(600px, 72vh, 820px);
    }
}

/* ---------------- Mobile portrait ---------------- */

@media (max-width: 575.98px) and (orientation: portrait) {
    .one .carousel-inner {
        height: clamp(380px, 52svh, 520px);
    }

    .one .carousel-item .inner-wave img.d-block.d-sm-none {
        display: block !important;
    }

    .one .carousel-item .inner-wave img.d-none.d-sm-block {
        display: none !important;
    }
/*
    .one .carousel-item .carousel-caption.first {
        padding-right: 6%;
        padding-left: 6%;
    }*/
}

/* Short landscape screens, including phones: apply after tablet/desktop rules */
@media (max-width: 950px) and (max-height: 500px)
       and (orientation: landscape) {
    .one .carousel-inner {
        height: clamp(280px, 75svh, 420px);
    }

    .one .carousel-item .inner-wave img.d-block.d-sm-none {
        display: block !important;
    }

    .one .carousel-item .inner-wave img.d-none.d-sm-block {
        display: none !important;
    }

    
}

/* Mobile controls & caption spacing */
@media (max-width: 767px) {
  /*   .one .carousel-item .carousel-caption.first {
        padding-right: 12%;
        padding-left: 12%;
    }
*/
    .one .carousel-next-prev-group .carousel-control-prev,
    .one .carousel-next-prev-group .carousel-control-next {
        width: 36px;
        height: 36px;
    }

    .one .carousel-next-prev-group i {
        font-size: 22px;
    }
}

/* ================================================================
   REDESIGN - CTA PROMO V4
   ================================================================ */

/* ---------------- Base / Desktop ----------------
   Order: Heading -> Subheading -> Text -> CTA | Image */

.section-seven.cta-promov4 {
    padding: 20px clamp(16px, 7.5vw, 160px);
    background: #327893;
}

.section-seven.cta-promov4 .container-fluid {
    margin-bottom: 0;
   
}

.section-seven.cta-promov4 .template-header.cp-h2 {
    margin: 0 0 8px;
    color: #fcf2b0 !important;
    font-family: 'Teko', sans-serif !important;
    font-size: clamp(30px, 3.2vw, 40px) !important;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #d45322;
}

.section-seven.cta-promov4 .partner-subheading {
    padding: 8px 16px 24px;
    color: #fff;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.6;
    text-align: center;
}

.section-seven.cta-promov4 .row {
    margin: 0;
}

.section-seven.cta-promov4 .row > .d-md-flex {
    width: 100%;
}

.section-seven.cta-promov4 .cp-h3 {
    margin: 0 0 8px;
    color: #fcf2b0 !important;
    font-family: 'Teko', sans-serif !important;
    font-size: clamp(24px, 2.4vw, 30px) !important;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
}

.section-seven.cta-promov4 .text-container {
    color: #fff;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.6;
    width: 100%;
}

.section-seven.cta-promov4 .text-container p {
    color: #fff;
    font-size: inherit;
    line-height: inherit;
}

.section-seven.cta-promov4 .cta-promov4-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.section-seven.cta-promov4 .text-content {
    flex: 1 1 50%;
    min-width: 0;
}

.section-seven.cta-promov4 .image-column {
    flex: 1 1 50%;
    min-width: 0;
}

.section-seven.cta-promov4 .action-holder {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

.section-seven.cta-promov4 .img-container {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.section-seven.cta-promov4 .img-container img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.section-seven.cta-promov4 .btn-outline-secondary {
    //color: #d45322 !important;
    color: #b6471d !important;
    font-family: 'Teko', sans-serif !important;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #fcf2b0;
    border: 3px solid #fcf2b0;
}

.section-seven.cta-promov4 .btn-outline-secondary:hover {
    //color: #d45322 !important;
    color: #b6471d !important;
    background: #fcf2b0;
}

/* ---------------- Tablet portrait / Mobile ----------------
   Order: Heading -> Subheading -> Text -> Image -> CTA */

@media (max-width: 1020px) and (min-width: 768px) {
    .section-seven.cta-promov4 {
            padding-left: 24px;
            padding-right: 24px;
    }
}

.section-seven.cta-promov4 img { border-radius: 12px; }

@media (max-width: 991px) {
.section-one-content, .section-three , .section-seven.cta-promov4 {

    padding-bottom: 40px;
}
}
@media (min-width: 992px) {

.section-one-content, .section-three {

    padding-bottom: 40px;
}
 .section-seven.cta-promov4 {
     padding-bottom: 80px;
}

.section-seven .raindrop {
left:0;
}
.flash-card {
margin-bottom: 40px;
}
 
}

@media (max-width: 767px) {
    .section-seven.cta-promov4 {
        padding: 28px 0 40px;
    }

    .section-seven.cta-promov4 .container-fluid {
        padding-right: 16px;
        padding-left: 16px;
    }

    .section-seven.cta-promov4 .template-header.cp-h2 {
        font-size: 30px !important;
        text-align: center;
    }

    .section-seven.cta-promov4 .partner-subheading {
        padding: 8px 0 20px;
        text-align: center;
    }

    .section-seven.cta-promov4 .cta-promov4-content {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .section-seven.cta-promov4 .text-content,
    .section-seven.cta-promov4 .image-column {
        flex: 0 0 auto;
        width: 100%;
    }

    .section-seven.cta-promov4 .cp-h3 {
        margin-top: 0;
        font-size: 24px !important;
        text-align: center;
    }

    .section-seven.cta-promov4 .text-container {
        text-align: center;
        padding-bottom: 16px;
        margin-bottom: 1.5rem;
    }

    .section-seven.cta-promov4 .action-holder {
        justify-content: center;
        
    }
}

/* ---------------- Small mobile ---------------- */

@media (max-width: 480px) {
    .section-seven.cta-promov4 .container-fluid {
        padding-right: 12px;
        padding-left: 12px;
    }

    .section-seven.cta-promov4 .template-header.cp-h2 {
        font-size: 30px !important;
    }

    .section-seven.cta-promov4 .img-container {
        border-radius: 8px;
    }

    .section-seven.cta-promov4 .action-holder .btn {
        max-width: 100%;
        white-space: normal;
    }
}

    .action-holder.d-block.d-sm-none {
        text-align: center;
    }

/* ================================================================
   REDESIGN - RESPONSIVE
   ================================================================ */

/* ---------------- Tablet ---------------- */
    
@media (max-width: 991px) {
.dual-cta-promo .template-content{
    margin-top: 0px !IMPORTANT;
    }
    }
    
@media (max-width: 991px) {
    .section-one-content {
        width: 90%;
    }

/*    .carousel-caption {
        top: auto;
    }*/

    

    .cta-promov3,
    .dual-cta-promo .container-fluid {
        padding-right: 32px;
        padding-left: 32px;
    }

    .section-one .row.justify-content-center {
        padding-right: 32px;
        padding-left: 32px;
    }
}

@media (min-width: 768px) {
    /* Bottom banner tablet height */
    .dual-cta-promo .page-bottom-banner-holder {
        min-height: 350px;
    }
}

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

@media (max-width: 767px) {
    .section-one {
        padding-top: 24px;
    }

    .section-one-content {
        width: 100%;
    }
/*
    .carousel-caption {
        top: auto;
    }*/

   

    .section-one .row.justify-content-center {
        padding: 16px;
    }

    .section-one p {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .flash-header-group {
        padding: 16px 12px 0;
    }

    .section-three .cp-h2 {
        padding-top: 24px;
    }

    .section-three.partner-obscarousel {
        padding-top: 28px;
        padding-bottom: 40px;
    }

    .cta-promov3,
    .dual-cta-promo .container-fluid {
        padding-right: 16px;
        padding-left: 16px;
    }

    .section-seven.cta-promov3 .cp-h3 {
        text-align: center;
    }

    .section-seven.cta-promov3 img {
        margin-bottom: 20px;
    }

    .section-seven.cta-promov3 p,
    .section-seven.dual-cta-promo p {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .dual-cta-promo .page-bottom-banner-infor {
        padding: 30px 0;
    }

    .owl-flash .owl-dot {
        width: 12px;
        height: 12px;
        margin-right: 8px;
    }
}

/* ---------------- Small mobile ---------------- */

@media (max-width: 480px) {
    .section-one .cp-h1 {
        font-size: 28px !important;
    }

    .section-one .row.justify-content-center {
        padding-right: 12px;
        padding-left: 12px;
    }

    .section-three .cp-h2,
    .section-three .cp-h3,
    .section-seven .cp-h2 {
        font-size: 24px !important;
    }

    .obscarousel .teko-font.cp-h2,
    .section-seven.dual-cta-promo .teko-font.cp-h2 {
        font-size: 30px !important;
    }

    .role-subtitle,
    .partner-subheading {
        padding: 12px;
        font-size: 16px;
        line-height: 1.5;
        padding-bottom: 1.5rem;
    }

    .cta-promov3,
    .dual-cta-promo .container-fluid {
        padding-right: 12px;
        padding-left: 12px;
    }

    .section-seven.cta-promov3 img {
        border-radius: 12px;
    }
    
    .section-seven.cta-promov4 img {
        border-radius: 12px;
    }
    
    .floodwise .btn {
        max-width: 100%;
        white-space: normal;
    }
}


/* Desktop */

.section-three .btn.btn-primary {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

.section-seven .btn.btn-primary {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.section-three .btn.btn-outline-secondary {
    font-size: 22px;
    font-weight: 600;
    line-height: .8;
}

.section-seven .btn.btn-outline-secondary {
    font-size: 22px;
    font-weight: 600;
    line-height: .8;
}

/* Tablet Landscape */
@media (min-width: 992px) and (max-width: 1199.98px) {
    
   .section-three .btn.btn-primary {
        font-size: 24px;
    }

.section-seven .btn.btn-primary {
        font-size: 24px;
    }
    
    .section-three .btn.btn-outline-secondary {
    font-size: 22px;
    font-weight: 600;
    line-height: .8;
}

.section-seven .btn.btn-outline-secondary {
    font-size: 22px;
    font-weight: 600;
    line-height: .8;
}
}

/* Tablet Portrait */
@media (min-width: 768px) and (max-width: 991.98px) {
   
    .section-three .btn.btn-primary {
        font-size: 22px;
    }
.section-seven .btn.btn-primary {
        font-size: 20px;
    }
    .section-three .btn.btn-outline-secondary {
    font-size: 18px;
    font-weight: 600;
    line-height: .8;
}

.section-seven .btn.btn-outline-secondary {
    font-size: 18px;
    font-weight: 600;
    line-height: .8;
}

.section-seven .btn-groups {     gap: 4px !important; }

}

/* Mobile Landscape / Large Mobile */
@media (min-width: 576px) and (max-width: 767.98px) {
   
    .section-three .btn.btn-primary {
        font-size: 24px;
    }
    
    .section-seven .btn.btn-primary {
        font-size: 20px;
    }
    .section-three .btn.btn-outline-secondary {
    font-size: 16px;
    font-weight: 600;
    line-height: .8;
}

.section-seven .btn.btn-outline-secondary {
    font-size: 16px;
    font-weight: 600;
    line-height: .8;
}
}

/* Mobile Portrait */
@media (max-width: 575.98px) {
  
    .section-three .btn.btn-primary {
        font-size: 22px;
    }
    .section-seven .btn.btn-primary {
        font-size: 20px;
    }
    .section-three .btn.btn-outline-secondary {
    font-size: 20px;
    font-weight: 600;
    line-height: .8;
}

.section-seven .btn.btn-outline-secondary {
    font-size: 20px;
    font-weight: 600;
    line-height: .8;
}
}

.one .carousel-caption { z-index:999;}

.section-three .h1-font {
font-size: clamp(28px, 3.2vw, 40px) !important;
}

.cta-promov4 .container-fluid { max-width: 1048px;}
.cta-promov3 .container-fluid { max-width: 1024px;}

@media (max-width: 480px) {
    .cta-promov3 {
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (max-width: 767px) {
    .section-seven .container-fluid {
        padding-left: 18px;
        padding-right: 18px;
    }
}
@media (max-width: 568px) {
    .section-seven.cta-promov3 .img-container {
        padding-left: 34px;
        padding-right: 34px;
    }
}

@media (max-width: 568px) {
    .section-seven.cta-promov3 .text-container {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media (max-width: 568px) {
    .section-seven.cta-promov4 .text-container {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media (max-width: 568px) {
    .section-seven.cta-promov4 .img-container {
        padding-left: 28px;
        padding-right: 28px;
    }
}
.raindrop {filter: saturate(1.4) brightness(1.15) contrast(1.1);}

@media (min-width: 992px) {
    .section-seven.dual-cta-promo p {
        padding-bottom: 40px;
    }
    .flash-header-group .header-subtitle  {padding-top: 14px;}
}
.section-three .teko-font.h1-font {padding-top: 64px;}

@media (max-width: 480px) {
    .section-three .flash-header-group .cp-h2 {
        margin-bottom: 0rem !important;
    }
}

.teko-font.cp-h2, .partner-subheading {
    z-index: 4; 
 position: relative; 
}

@media (max-width: 768px) {
    .section-one-content .teko-font, .flash-header-group .header-subtitle {
        padding-top: 16px;
    }
}
@media (max-width: 768px) {
    .section-seven .template-content .template-header {
        
        margin-bottom: 0px !important;
        
    }

    .mobile-to-top i  {
    left: 15px;
   // position: relative;
    top: 10px;
}

.section-seven.cta-promov3, .section-seven.cta-promov4, .section-seven.dual-cta-promo {margin-top:-1px;}
}
@media (max-width: 767px) {
    .section-seven .template-content .btn {
        margin-top: 18px !important;
        
    }
    .dual-cta-promo .page-bottom-banner-infor .template-content {
                padding-bottom: 24px !important;
    }
    .section-seven.cta-promov3 img {
    position: relative; 
    z-index: 99;
}
}