@font-face {
     font-family: 'Grandstander Bold';
     src: url('../fonts/Grandstander-Bold.woff2') format('woff2'), url('../fonts/Grandstander-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Grandstander Medium';
     src: url('../fonts/Grandstander-Medium.woff2') format('woff2'), url('../fonts/Grandstander-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Livvic SemiBold';
     src: url('../fonts/Livvic-SemiBold.woff2') format('woff2'), url('../fonts/Livvic-SemiBold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
}

.bannerSlider .main-slide.t-tale-banner {
     background: rgba(255, 246, 224, 1);
     padding: 0 0 0 150px;
     display: flex;
     justify-content: center;
     height: 100%;
     align-items: center;
}

.main-banner .t-tale-banner .banner-content {
     padding: 60px 0 0;
}

.t-tale-banner .total-img-main {
     margin-top: 30px;
}

.main-slide.t-tale-banner .banner-content,
.t-tale-banner .total-img-main {
     display: flex;
     justify-content: center;
     flex-direction: column;
}

.t-tale-banner .title-highlight,
.popup-banner .title-highlight {
     font-family: 'Grandstander Bold';
     -webkit-text-fill-color: #FFC34D;
     text-transform: uppercase;
     -webkit-text-stroke: 1px #000;
     filter: drop-shadow( 4px 0px 0px #000000);
}

.t-tale-banner .banner-content h1 {
     font-size: 128px;
     line-height: 1;
     margin-top: 30px;
}

.t-tale-banner .banner-content h2 {
     font-size: 64px;
     font-family: 'Grandstander Medium';
}

.t-tale-banner .banner-content h4 {
     font-family: 'Grandstander Medium';
     color: rgba(102, 102, 102, 1);
     width: 55%;
     font-size: 32px;
     line-height: 1.2;
     margin-bottom: 48px;
}

.t-main-btn {
     font-family: 'Grandstander Medium';
     font-size: 20px;
     color: #000;
     background: #FFC34D;
     border: 1.5px solid #000000;
     padding: 16px 40px;
     border-radius: 50px;
     display: inline-block;
     text-transform: uppercase;
     position: relative;
     transform: translateY(0);
     transition: transform .3s cubic-bezier(.5, 2.5, .7, .7), box-shadow .3s cubic-bezier(.5, 2.5, .7, .7);
}

.t-main-btn:hover {
     box-shadow: 0.3rem 0.4rem 0rem 0 #1f1f1f, 0 0.1em #1f1f1f;
     transform: translateY(-0.4em);
}

.t-tale-banner .banner-content,
.t-tale-banner .total-img-main {
     width: 50%;
     height: 100%;
}

.sand-saga .t-tale-banner.saga-banner {
     background-image: url('../images/sand-saga-banner.jpg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     padding: 0;
}

.sand-saga .t-tale-banner.saga-banner .t-main-btn {
     background-color: #FFF619;
}

.t-tale-banner.saga-banner .banner-content h4 {
     margin-bottom: 30px;
}

.main-slide.t-tale-banner.saga-banner .banner-content img {
     width: 85%;
     margin-left: 70px;
}

.close-ic {
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
     z-index: 99;
}

.mini-passport-popup.close-popup {
     display: none;
}


/***Passport Popup******/

.mini-passport-popup {
     position: fixed;
     right: auto;
     right: 1%;
     bottom: 15%;
     width: 300px;
     height: 300px;
     z-index: 999;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     background: #FAF4E6;
}

.mini-passport-popup .popup-banner {
     width: 100%;
     height: auto;
     text-align: center;
     padding: 0 0 0;
     background: url(../images/passport-bg.png);
     position: relative;
     z-index: 2;
     margin-bottom: 15px;
}

.mini-passport-popup h6 {
     font-size: 15px;
     font-family: 'Livvic SemiBold';
     text-transform: uppercase;
     color: #3C8AFF;
}

.mini-passport-popup .title {
     font-size: 18px;
     line-height: 1;
     font-family: 'Grandstander Bold';
     margin-bottom: 10px;
}

.popup-banner .title-highlight {
     filter: drop-shadow(1px 0px 0px #906969);
}

.mini-passport-popup .t-main-btn {
     font-size: 14px;
     padding: 10px 20px;
}

.popup-banner img {
     height: 150px;
}

@media(max-width:1600px) {
     .t-tale-banner .banner-content h1 {
          font-size: 90px;
          margin-top: 20px;
     }
     .bannerSlider .main-slide.t-tale-banner {
          padding: 0 0 0 100px;
     }
     .bannerSlider .main-slide.t-tale-banner.saga-banner {
          padding: 0;
     }
     .t-tale-banner .banner-content h4 {
          width: 65%;
          font-size: 28px;
     }
     .t-tale-banner .banner-content h2 {
          font-size: 54px;
     }
}

@media(max-width:1350px) {
     .bannerSlider .main-slide.t-tale-banner {
          padding: 0 0 0 60px;
     }
     .t-tale-banner .banner-content h4 {
          width: 70%;
     }
}

@media(max-width:1199px) {
     .t-tale-banner .banner-content h1 {
          font-size: 75px;
     }
     .t-tale-banner .banner-content h4 {
          width: 90%;
     }
}

@media(max-width:1024px) {
     .bannerSlider .main-slide.t-tale-banner {
          padding: 0 0 0 30px;
     }
     .main-slide.t-tale-banner.saga-banner .banner-content img {
          margin-left: 40px;
     }
}

@media(max-width:991px) {
     .t-tale-banner .banner-content h1 {
          font-size: 55px;
          margin-top: 0;
     }
     .t-tale-banner .banner-content h4 {
          width: 100%;
          font-size: 21px;
     }
     .t-tale-banner .banner-content h2 {
          font-size: 30px;
     }
}

@media(max-width:767px) {
     .sand-saga .t-tale-banner.saga-banner {
          background-image: url('../images/saga-banner-mobile.png');
     }
     .main-slide.t-tale-banner.saga-banner .banner-content img {
          width: 100%;
          margin-left: 0;
     }
     .t-tale-banner .banner-content h1 {
          margin-top: 10px;
     }
     .total-img-main {
          display: none;
     }
     .t-tale-banner .banner-content {
          padding: 0px 0 0;
     }
     .t-tale-banner .banner-content h4 {
          line-height: 1.3;
     }
     .main-banner .banner-two {
          background: #FEC0F1;
          /* height: 100%; */
     }
     .main-banner .t-tale-banner .banner-content {
          padding: 0 0 0;
     }
     .t-tale-banner .banner-content h1 {
          font-size: 48px;
     }
     .mini-passport-popup {
          bottom: 2%;
     }
}

@media(max-width:650px) {
     .main-slide.t-tale-banner.saga-banner .banner-content img {
          margin-top: 70px;
     }
}

@media(max-width:575px) {
     .main-banner .t-tale-banner.saga-banner .banner-content img {
          width: 70%;
     }
     .t-tale-banner.saga-banner .banner-content h4 {
          margin-bottom: 10px;
     }
     .t-tale-banner.saga-banner .banner-content h4 {
          margin-top: 0;
     }
     .t-tale-banner .total-img-main {
          display: none;
     }
     .t-tale-banner .banner-content {
          width: 100%;
     }
     .main-banner .t-tale-banner .banner-content {
          align-items: center;
     }
     .bannerSlider .main-slide.t-tale-banner {
          padding: 0 0 0 0;
     }
     .main-banner .t-tale-banner .banner-content {
          padding: 0 15px;
          text-align: center;
     }
     .t-tale-banner .banner-content h4 {
          margin-bottom: 35px;
          margin-top: 15px;
     }
     .t-tale-banner .banner-content h1 {
          font-size: 35px;
     }
     .t-tale-banner .title-highlight {
          filter: drop-shadow(2px 0px 0px #000000);
     }
}

@media(max-width:400px) {
     .popup-banner img {
          height: 110px;
     }
     .mini-passport-popup .title {
          font-size: 16px;
     }
     .mini-passport-popup h6 {
          font-size: 13px;
     }
     .mini-passport-popup .t-main-btn {
          font-size: 13px;
     }
     .mini-passport-popup {
          width: 250px;
          height: 250px;
     }
     .main-banner .t-tale-banner.saga-banner .banner-content img {
          width: 75%;
     }
     .saga-banner .t-main-btn {
          font-size: 18px;
          line-height: 1;
          padding: 15px 30px;
          margin-top: 10px;
     }
     .main-slide.t-tale-banner.saga-banner .banner-content img {
          margin-top: 80px;
     }
     .saga-banner .t-main-btn {
          font-size: 18px;
          line-height: 1;
          padding: 16px 30px;
          margin-top: 10px;
     }
}