#travel-banner {   
    position: relative;
}

.lockup {
    position: absolute;
    top: 30px;
    left: 30px;
    background-image: url('../images/lockup.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 242px;
    height: 190px;
    display: flex;
    justify-content: center;
}

.lockup span {
    align-self: flex-end;
    font-size: 21px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: center;
    color: #1A49BE;
}

.grey-bg {
    background-color: #EBEBEB;
}

.sandshape-bg {
    background-image: url('../images/yellow-swirl-top.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    background-color: #F4EFE9;
}

.greenbottom-bg {
    background-image: url('../images/green-swirl-bottom.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    background-color: #F4EFE9;
}

.sandtop-bg {
    background-image: url('../images/content-bg-top.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    background-color: #F4EFE9;
}

.sandbottom-bg {
    background-image: url('../images/sand-bottom-bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    background-color: #F4EFE9;
}

.sand-bg {
    background-color: #F4EFE9;
}

.sky-bg {
    background-image: url('../images/city-scape.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    background-color: #8ECDFB;
    height: 500px;
}

.quiz-sky-bg {
    background-image: url('../images/blue-swirl.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.people {
    margin-top: -300px;
}


.backpacks {
    margin-left: -100px;
}

.video-size {
    width: 560px; 
    height: 395px;
}

.video-container {
    width: 560px; 
}

.text-blue {
    color: #255BE3;
}

.text-black {
    color: #000;
}

.text-darkblue {
    color: #1A49BE;
}

.white-card {
    background-color:#F0F5F7;
    box-shadow: 4px 4px 5px 0px #0000001A;
    border-radius: 1rem;
    min-height: 200px;
    padding: 40px 28px;
    display: block;
}

.blue-card {
    background-color: #F0F5F7;
    border: 1px solid #F0F5F7;
    box-shadow: 3px 3px 5px 0px #0000001A;
    border-radius: 1rem;
    padding: 40px 28px;
}

.blue-card-transparent {
    background-color: #8FCDFB33;
    border: 1px solid #8FCDFB33;
    box-shadow: 3px 3px 5px 0px #0000001A;
    border-radius: 1rem;
    padding: 40px 28px;
}


.content-link {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 200% */
    letter-spacing: 0.72px;
    text-decoration-line: underline;
    color:#000 !important;
}




.plus{
    position: relative;
}

.plus::after{
    content: '';
    display: block;
    position: absolute;
    right:15px;
    bottom: 15px;
    background-image: url('../images/plus.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 11px;
    height: 16px;
}

.top-product-card {
    min-height: 190px;
}

.l-h-45 {
    line-height: 45px;
}

.blue-img-border {
    border: 10px solid #97C5E7;
}

.yellow-border {
    border-radius: 1rem;
}

.ballon-cloud {
    position: absolute;
    bottom: -3px;
    right: 5%;
    z-index: 999;
}

.card-text {
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0em;
    text-align: left;
}

.subtitle {
    font-weight: 400;
}

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

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

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

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

.mb-85 {
    margin-bottom: 75px;
}

.pb-75 {
    padding-bottom: 75px;
}

.py-85 {
    padding: 85px 0;
}

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


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

.read {
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-align: left;
}

.red-btn {    
    background: #F9586D;
    border: #F9586D ;
    color: #FCF2D9 !important;
}

.blue-btn {
    background: #73C2FC;
    border: #73C2FC ;
    color: #000 !important;
}

.blue-btn:hover {
    color: #fff;
    background-color: #F0F5F7;
    border-color: #F0F5F7;
}

.header-text {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: center;
    padding: 0 200px;
    margin-top: 2rem;
}

h1 {
    font-size: 36px;
    font-weight: 400;
    line-height: 42px;
    letter-spacing: -0.01em;
    text-align: center;
}

h5 {
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.01em;
    text-align: center;
}

h6 {
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.01em;
    text-align: left;
}

h3 {
    font-size: 42px;
    font-weight: 400;
    line-height: 50px;
    letter-spacing: -0.01em;
    text-align: left;
}

.link-text {
    text-decoration: underline;
    font-weight: 700;
}

/************ Modal ********************/

.clickable {
    cursor: pointer;
}

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #C5E1F0;
    background-clip: padding-box;
    box-shadow: 4px 4px 5px 0px #0000001A;
    border: none;
    border-radius:1rem;
    outline: 0;
}

.modal-header {
    border-bottom: none;
    padding: 0 1.5rem;
    margin-top: 8px;
    justify-content: end;
}

.modal-header .close {
    padding: 0;
    margin: 0;
    opacity: 1;
    cursor: pointer;
}

.modal-body {
    padding: 0 2rem 2rem 2rem;
}

.product-card {
    border: 1px solid rgba(37, 91, 227, 0.16);
    background: rgba(37, 91, 227, 0.16);
    border-radius: 1rem;
    box-shadow: 4px 4px 5px 0px #0000001A;
    /* background: #255BE3;
    border: 1px solid #255BE3;
    box-shadow: 6px 6px 30px 0px #FFFFFF1A; */
    border-radius: 1rem;
    padding: 30px 38px;
}




/**************** QUIZ *****************/

.quiz-start-screen {
    margin: 200px 100px;
    
    position: relative;
    z-index: 10;
}

.quiz-start-inner {
    background: #F3EFEA;
    box-shadow: 4px 4px 5px 0px #0000001A;    
    padding: 100px;
    position: relative;
}

.quiz-char {
    position: absolute;
    left: -150px;
    bottom: -1px;
    z-index: 50;
}

.quiz-sun {
    position: absolute;
    right: -100px;
    top: -100px;
    z-index: -50;
}

.quiz-questions-state {
    background: #F3EFEA;
    box-shadow: 4px 4px 5px 0px #0000001A; 
    border-radius: 1rem;
    padding: 100px;
}

.quiz-counter::before {
    content: "What kind of traveller are you?";
    display: block;
    font-size: 51px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0em;
    margin-bottom: 36px;
    text-align: center;
    color: #1A49BE;
}

.quiz-counter {
    padding-top: 100px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: center;
    color: #1A49BE;
    margin-bottom: 60px;
}

.quiz-controls {
    background: none;
    padding: 0;
    text-align: center;
    border-radius: 10px;
}

.questions {
    margin-bottom: 100px;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    color: #1A49BE;
}

.answers {
    margin-top: 36px;
}

.answers a {
    display: block;
    padding: 1.5em 1em;
    margin-bottom: 0.5em;
    background-color:  #F0F5F7;
    box-shadow: 4px 4px 5px 0px #0000001A; 
    border-radius: 10px;
    color: #000;
}

.answers a.incorrect {
    color: #000;
    background-color:  #73C2FC;
    box-shadow: 4px 5px 5px 0px rgba(0, 0, 0, 0.10) inset;
}

.answers a.correct {
    color: #000;
    background-color:  #73C2FC;
    box-shadow: 4px 5px 5px 0px rgba(0, 0, 0, 0.10) inset;
}

.quiz-response {
    display: none;
}

.quiz-link {
    font-weight: 700;
    text-decoration-line: underline !important;
    color: #255be3 !important;
}

.result-bg {
    position: absolute;
    bottom: 0;
    right: 20px;
}

.mb-10 {
    margin-bottom: 60px;
}

.top-content-article {
    margin-top: 75px;
}

.quiz-container {
    margin: 100px 0;
    max-width: 100%;
}

a.quiz-next-btn, a.quiz-finish-btn {
    display: block;
    padding: 1.5em 1em;
    margin-bottom: 0.5em;
    background: #73C2FC;
    border-radius: 10px;
    color: #000;
}

.quiz-results-state .quiz-buttons a {
    display: block;
    padding: 1.5em 1em;
    margin-bottom: 0.5em;
    background-color:  #73C2FC;
    box-shadow: 4px 4px 5px 0px #0000001A; 
    border-radius: 10px;
    color: #000;
}


/* .carousel-control-next, .carousel-control-prev {
    align-items:start;  
    margin-top: 62%;
} */

.carousel-indicators {
    bottom: -15px;
}

.carousel-indicators li {
    background-color: #1A49BE;
}

.carousel-control-prev {
    opacity: 1;
}

.carousel-control-prev-icon {
    transform: rotate(180deg);
    background-image: url('data:image/svg+xml,<svg width="38" height="63" viewBox="0 0 38 63" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 3L33 31.7857L2 60.5714" stroke="%23255BE3" stroke-width="5.58604"/></svg>');
    width: 30px;
    height: 50px;
}

.carousel-control-next {
    opacity: 1;
}

.carousel-control-next-icon {
    background-image: url('data:image/svg+xml,<svg width="38" height="63" viewBox="0 0 38 63" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 3L33 31.7857L2 60.5714" stroke="%23255BE3" stroke-width="5.58604"/></svg>');
    width: 30px;
    height: 50px;
}


.details {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 14px;
    text-align: center;
    
}

.min-height {
    min-height: 100px;
}


.disclaimer-text {
    color:rgba(30, 82, 129, 1);
    font-size: 15px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0em;
    text-align: left;
}

.disclaimer-text > p {
    margin-bottom: 30px;
}

.disclaimer-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0em;
    text-align: left;
}

.lh-105 {
    line-height: 105%;
}

.desktop-hide {
    display: none;
}

.quiz-mobile-padding {
    padding-bottom: 100px;
}


.quiz-product-link {
    display: -moz-inline-grid;
    display: inline-grid;
    color: #000;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 12px; /* 97.105% */
}

.small-image {
    width: 100%;
}



  @media (min-width: 1240px) {
    .sandshape-bg, .sandbottom-bg, .sandtop-bg, .greenbottom-bg {
        background-size: cover;
    }
    

    .min-height {
        min-height: 70px;
    }
  }


  @media (max-width: 1180px) {

    .white-card {
        min-height: 240px;
    }
  }

  @media (max-width: 1150px) {
    .people {
        margin-top: -200px;
        width: 85%;
    }

    .header-text {
        padding: 0 100px;
    }

    .backpacks {
        margin-left: 0px;
    }

    .quiz-counter::before {
        font-size: 46px;
        line-height: 37px;
    }

    .quiz-mobile-padding {
        padding-bottom: 200px;
    }
  }
  

  @media (max-width: 780px) {

    .content-link {
        position: relative;
        bottom: 0;
        left: 0;
    }

    .sky-bg {
        height: 300px;
    }

    .min-height {
        min-height:min-content;
    }

    .people {
        margin-top: -90px;
        width: 75%;
    }

    .backpacks {
        margin-left: 0px;
        width: 40%;
    }

    .header-text {
        padding: 0 50px;
    }

    .mobile-hide {
        display: none !important;
    }

    .desktop-hide {
        display: block;
      }


    /********* Mobile quiz **********/

    .quiz-questions-state {
        padding: 20px;
    }

    .quiz-start-screen {
        margin: 50px 10px;
    }
    
    .quiz-start-inner { 
        padding: 100px 50px 200px 50px;
    }

    

    .quiz-counter {
        padding-top: 50px;
        margin-bottom: 30px;
    }

    .questions {
        margin-bottom: 50px;
    }

    .quiz-char {
        display: none;
    }
    
    .quiz-sun {
        display: none;
    }




    /******* Mobile Video *********/

    .video-size {
        width: 460px; 
        height: 324px;
    }
    
    .video-container {
        width: 460px; 
    }
    
  } 

  @media (max-width: 576px) {
    .lockup {
        position: absolute;
        top: 20px;
        left: 10px;
        background-image: url('../images/lockup.png');
        background-repeat: no-repeat;
        background-size: contain;
        width: 180px;
        height: 160px;
    }

    .small-image {
        width: 75%;
    }

    .top-content-article {
        margin-top: 16px;
    }

    .video-size {
        width: 350px; 
        height: 247px;
    }
    
    .video-container {
        width: 350px; 
    }


    .quiz-counter::before {
        font-size: 37px;
        line-height: 37px;
    }

    


}