* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     padding: 0;
     margin: 0;
 }

 @font-face {
     font-family: 'Appetite';
     font-weight: normal;
     font-style: normal;
     src: url('../fonts/AppetiteContrast.otf') format('opentype');
 }

 #festiveNav {
     width: 100%;
     position: relative;
     overflow: hidden;
     z-index: 99999;
 }

 #festiveNav .header-holder {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 0px;
 }

 #festiveNav .header-holder .logo {
     display: flex;
     max-width: 300px;
     position: relative;
     z-index: 2;
 }

 @media screen and (min-width: 50px) and (max-width: 990px) {
     #festiveNav .header-holder .logo {
         max-width: 50vw;
     }
 }

 #festiveNav .header-holder .logo img {
     width: 100%;
     height: auto;
 }

 #festiveNav .header-holder #headerMenuBtn {
     border: 0;
     background: transparent;
     position: absolute;
     right: 5vw;
     cursor: pointer;
     z-index: 2;
     padding: 0;
     margin: 0;
 }

 @media screen and (min-width: 50px) and (max-width: 990px) {
     #festiveNav .header-holder #headerMenuBtn {
         right: 30px;
     }
 }

 #festiveNav .header-holder #headerMenuBtn #hamburger-icon {
     overflow: visible;
 }

 #festiveNav .header-holder #headerMenuBtn #hamburger-icon .line {
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
 }

 #festiveNav .header-holder #headerMenuBtn.active .line:nth-child(1) {
     transform: rotate(45deg) translate(2px, -5px);
 }

 #festiveNav .header-holder #headerMenuBtn.active .line:nth-child(2) {
     transform: translate(40vw, 0px);
 }

 #festiveNav .header-holder #headerMenuBtn.active .line:nth-child(3) {
     transform: rotate(-45deg) translate(-15px, -5px);
 }

 #festiveNav #SideNav {
     position: fixed;
     top: 0;
     right: 0;
     display: flex;
     justify-content: center;
     width: 0;
     height: 100%;
     background: #301e64f7;
     z-index: 1;
     overflow: hidden;
     backdrop-filter: blur(7px);
     will-change: transform, width, opacity;
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
 }

 #festiveNav #SideNav .menu-list {
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: 20px;
     padding: 10vw 5vw 5vw 5vw;
     opacity: 0;
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
 }

 @media screen and (min-width: 50px) and (max-width: 990px) {
     #festiveNav #SideNav .menu-list {
         padding: 50vw 5vw 5vw 5vw;
     }
 }

 #festiveNav #SideNav a {
     color: #ffffff;
     text-decoration: none;
     font-family: 'GillSansBold';
 }

 #festiveNav #SideNav a:hover {
     color: #D3B565;
 }

 #festiveNav #SideNav.active {
     width: 100%;
 }

 #festiveNav #SideNav.active .menu-list {
     transition-delay: 0.45s;
     opacity: 1;
 }


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

     html ::-webkit-scrollbar,
     body ::-webkit-scrollbar {
         width: 5px;
         height: 5px;
     }

     html ::-khtml-scrollbar,
     body ::-khtml-scrollbar {
         width: 5px;
         height: 5px;
     }

     html ::-moz-scrollbar,
     body ::-moz-scrollbar {
         width: 5px;
         height: 5px;
     }

     html ::-ms-scrollbar,
     body ::-ms-scrollbar {
         width: 5px;
         height: 5px;
     }

     html ::-o-scrollbar,
     body ::-o-scrollbar {
         width: 5px;
         height: 5px;
     }

     html ::-webkit-scrollbar-track,
     body ::-webkit-scrollbar-track {
         -webkit-box-shadow: inset 120px 120px 124px #9971CE;
     }

     html ::-khtml-scrollbar-track,
     body ::-khtml-scrollbar-track {
         -webkit-box-shadow: inset 120px 120px 124px #9971CE;
     }

     html ::-moz-scrollbar-track,
     body ::-moz-scrollbar-track {
         -webkit-box-shadow: inset 120px 120px 124px #9971CE;
     }

     html ::-webkit-scrollbar-thumb,
     body ::-webkit-scrollbar-thumb {
         -webkit-box-shadow: inset 0 0 76px #ffffff;
     }

     html ::-khtml-scrollbar-thumb,
     body ::-khtml-scrollbar-thumb {
         -webkit-box-shadow: inset 0 0 76px #ffffff;
     }
 }

 body {
     background: #402379;
     background-attachment: fixed;
     background-size: cover;
 }

 .promotion-page {
     background-color: #301e64;
 }

 .head-title {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 15px;
     color: #ffffff;
     font-family: "Gill Sans Nova";
     font-size: 10px;
     font-weight: 700;
     text-align: center;
 }

 .main-content {
     background-image: url('../assets/images/promotion-bg.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     overflow: hidden;
 }

 .header-wrapper {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
 }

 .header-wrapper {
     position: relative;

 }

 .header-wrapper::after {
     content: "";
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0) 9%, #301e64 44%);
     position: absolute;
     bottom: 0px;
     right: 0;
     z-index: 0;
 }


 .header-img-logo>img {
     width: 454px;
     height: auto;
     position: relative;
     z-index: 2;
 }

 .navbar {
     display: flex;
     gap: 120px;
     align-items: center;
 }

 .navbar-menu {
     display: none;
     z-index: 2;
     position: relative;
 }

 .navbar-link {
     display: flex;
     justify-content: space-between;
     align-items: center;
     list-style: none;
     gap: 45px;
     font: 700 14px/20.35px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
     color: rgba(255, 255, 255, 0.3);
 }

 .navbar-link li {
     cursor: pointer;
     font-family: "Gill Sans Nova";
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     color: rgba(255, 255, 255, 0.30);


 }

 .navbar-link>.active {
     color: rgba(211, 181, 101, 1);
 }

 .search-item {
     padding-right: 45px;
 }

 .content-wrapper {
     display: flex;
     justify-content: center;
     padding-bottom: 150px;
     background-image: url('../assets/images/promotions-bg.png');
     background-repeat: no-repeat;
     background-position: center;
     margin-top: -0px;
     position: relative;
 }

 .content-left-box {
     margin-right: 65px;
 }

 .shadow-dot {
     position: relative;
     z-index: 1;
 }

 .content-right-box {
     margin-left: 65px;
     margin-top: 60px;
     border-radius: 15px;
     overflow: hidden;
     padding: 20px;
     background: #451E7C;
     z-index: 1;
 }

 .show-dot {
     height: 23px;
     background-image: url('../assets/images/line-gold-dots.png');
     background-size: contain;
     background-position: bottom;
     margin-top: -10px;
     margin-left: 65px;
     border-radius: 0px 0px 20px 20px;
 }


 .position-set-img {
     position: absolute;
     background-image: url('../assets/images/promotion-position-img.png');
     background-position: bottom;
     background-repeat: no-repeat;
     background-size: 160px 499px;
     width: 161px;
     height: 499px;
     left: 0;
     top: 10%;
     z-index: 0;
 }

 .sm-step-img {
     display: none;
 }


 .bg-step-img {

     display: flex;
 }

 .position-set-img-2 {
     position: absolute;
     background-image: url('../assets/images/promotion-position-img-1.png');
     background-position: bottom;
     background-repeat: no-repeat;
     background-size: 229px 428px;
     width: 233px;
     height: 499px;
     right: 0;
     top: 30%;
 }

 .position-set-img-3 {
     position: absolute;
     background-image: url('../assets/images/promotion-gift.png');
     background-position: bottom;
     background-repeat: no-repeat;
     background-size: cover;
     width: 389px;
     height: 288px;
     right: 0;
     bottom: 0;
 }

 .position-set-img1 img {
     height: 428px;
 }

 .position-set-img1 {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: end;
     align-items: center;
 }

 .position-set-img2 img {
     height: 288px;
 }

 .position-set-img2 {
     position: absolute;
     right: 0px;
     bottom: 0px;
     top: 480px;
 }

 .promotion-thanks img {
     height: 545px;
 }

 .text-content {
     width: 824px;
     text-align: center;
     color: rgba(255, 255, 255, 0.3);
     font: 300 17.20px/32px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
 }

 .text-content p {
     font-family: "Gill Sans Nova";
     padding-bottom: 15px;
     font-size: 20px;
 }

 .content {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 20px;
     position: relative;
 }

 .btn-view {
     display: flex;
     gap: 24px;
 }



 .heart-button {
     justify-content: center;
     align-items: center;
     border-radius: 42px;
     border: 2px solid #e7cb7a;
     align-self: flex-end;
     display: flex;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 16px;
     padding: 18px 39px;
     cursor: pointer;
     letter-spacing: 0.05em;
     background: transparent;
     font-family: "Gill Sans Nova";
 }

 .text-gradient {
     background: linear-gradient(90deg, #E7CB7A 2.2%, #FBECB3 41.95%, #C4A557 70.64%, #FBECB3 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }


 .main-box {
     height: max-content;
     width: 411px;
     border: solid 2px rgba(151, 96, 212, 1);
     border-radius: 20px;
     padding: 44px 42px 29px 41px;
     position: relative;
 }


 .box-content {
     display: flex;
     align-items: center;
     flex-direction: column;
 }

 .text-img {
     width: 223px;
 }

 .star-img {
     width: 26px;
 }

 .star-img-set {
     position: absolute;
     top: 19px;
     right: 16px;
 }

 .box-img {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }

 .text-box {
     color: #FFFFFF;
     font-family: 'Gill Sans Nova';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
     text-align: center;
     margin-bottom: 5px;
 }


 .rounded-box {
     width: auto;
     background-color: rgba(151, 96, 212, 1);
     border-radius: 50px;
     color: #FFFFFF;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 18px 27px 18px 49px;
     margin-top: 18px;
 }

 .rounded-box-text p {
     color: #FFFFFF;
     font-family: 'Gill Sans Nova';
     font-weight: 700;
     font-size: 20px;
     line-height: 23px;
 }

 .rounded-box-text span {
     color: #FFFFFF;
     font-family: 'Gill Sans Nova';
     font-weight: 400;
     font-size: 16px;
     line-height: 28.8px;
 }

 .rounded-box-text-1st h1 {
     color: #FFFFFF;
     font-family: 'Gill Sans Nova';
     font-weight: 700;
     font-size: 30px;
     line-height: 16px;
 }

 .icon-up-down {
     display: flex;
     gap: 10px;
     align-self: flex-end;
     padding: 5px 20px;
     margin-top: 39px;
 }

 .icon-up-down .down-arrow {
     cursor: pointer;
     display: flex;
     align-items: center;
 }

 .icon-up-down .up-arrow {
     cursor: pointer;
     display: flex;
     align-items: center;
     transform: rotate(180deg);
 }

 .up-arrow[style="opacity: 0.4;"],
 .down-arrow[style="opacity: 0.4;"] {
     pointer-events: none;
 }

 .bannar-box-img img {
     border-radius: 30px;
 }

 .banner-line-img img {
     width: 100%;
     height: 14px;
 }

 .section-two {
     background: var(--cadbury-purple-primary-900, rgba(48, 30, 100, 1));

     height: 100vh;
 }

 .mian-section {
     background-image: url('../assets/images/text-bg.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     overflow: hidden;
     height: 853px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .step-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background:
         linear-gradient(180deg, rgba(64, 35, 121, 0) 0%, rgba(46, 23, 98, 0.7) 57.5%, #190A47 95.5%),
         var(--cadbury-purple-primary-500-main, #4B098380);
     border-radius: 20px;
     padding: 0px;
     height: 500px;
     width: 67%;
     position: relative;
 }

 .thanks-button {
     border-radius: 42px;
     border: 2px solid #e7cb7a;
     color: #e7cb7a;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 1;
     padding: 12px 39px;
     width: 289px;
     cursor: pointer;
     background: transparent;
 }

 .content-center {
     display: flex;
 }

 .content-left {
     color: #fff;
     width: 50%;
     height: 500px;
     background-image: url('../assets/images/step-1-img.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     padding: 20px;
     display: flex;
     align-items: center;
 }

 .thank-you-message {
     z-index: 2;
     padding-left: 68px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-self: end;
 }


 .thank-you-message h1 {
     font-size: 36px;
     line-height: 1.2;
     margin-bottom: 10px;
 }

 .thank-you-message p {
     margin-bottom: 20px;
     font-size: 16px;
 }


 .thank-you-message small {
     display: block;
     margin-top: 10px;
     font-size: 12px;
 }

 .content-right {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     text-align: start;
     color: #fff;
     width: 493px;
 }

 .step-details h2 {
     font-size: 60px;
     font-weight: 600;
     background: linear-gradient(90deg, #E7CB7A 2.2%, #FBECB3 41.95%, #C4A557 70.64%, #FBECB3 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent;
 }

 .step-details p {
     font: 700 20px/32px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
 }

 .step-details span {
     font: 400 18px/28px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
 }

 .pagination img {
     width: 70px;
 }

 .pagination {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .chocolate-icon {
     position: absolute;
     top: -46px;
     left: 762px;
     right: 0px;
     width: 475px;
     height: auto;
 }

 .icon-left-rigth {
     display: flex;
     gap: 15px;
 }

 .icon-left-rigth img {
     width: 48px;
 }

 .text-content-md {
     display: block;
 }

 .text-content-sm {
     display: none;
 }

 .btn-view a {
     text-decoration: none;
 }

 @media (max-width: 1440px) {
     .content-wrapper {
         display: flex;
         flex-direction: column;
         align-content: center
     }

     .content-right-box {
         margin-left: 0;
         margin-top: 23px
     }

     .shadow-dot {
         width: max-content;
         margin: auto;
     }

     .show-dot {
         margin-left: 0;
     }

     .position-set-img-3 {
         display: none;
     }

     .position-set-img-2 {
         top: 0;
     }



     .text-box {
         margin-bottom: 48px;
         max-width: 230px;
     }

     .main-box {
         padding: 26px 21px 48px 21px;
     }

     .rounded-box {
         padding: 15px 17px 10px 29px;
     }
 }

 @media (max-width: 1428px) {

     .content-left-box {
         margin-right: 0;
     }

     .header-wrapper::after {
         width: 100vw;
         bottom: 0;
     }

     .content-wrapper {
         margin-top: 0;
     }

     .position-set-img {
         top: -10%;
     }

     .header-img-logo>img {
         width: 177px;
         height: auto;
     }
 }

 @media (max-width: 1204px) {
     .navbar-menu {
         margin: 0 14px;
     }

     .navbar {
         display: none;
     }

     .navbar-menu {
         display: block;
     }

 }


 @media (max-width: 768px) {
     .promotion-thanks img {
         width: 100%;
         height: auto;
     }

     .content-left-box {
         padding: 0 60px;
     }

     .text-content {
         padding: 0 34px;
         width: 100%;
         line-height: 24px;
     }

     .heart-button {
         padding: 17px 23px;
     }

     .btn-view {
         flex-wrap: wrap;
         justify-content: center;
     }

     .main-box {
         width: 100%;
     }

     .position-set-img-2 {
         right: -33%;
     }

     .navbar {
         display: none;
     }

     .navbar-menu {
         display: block;
     }

     .text-content p {
         font-family: "Gill Sans Nova";
         font-size: 15px;
         font-weight: 400;
     }

     .heart-button {
         width: 100%;
     }



     .text-content-md {
         display: none;
     }

     .text-content-sm {
         display: block;
         font-family: "Gill Sans Nova";
         font-size: 15px;
         font-weight: 700 !important;
     }


     .rounded-box-text-1st h1 {
         font-size: 21px;
     }

     .rounded-box-text p {
         font-size: 18px;
         line-height: 10px;
     }

     .rounded-box-text span {
         font-size: 12px;
     }

     .main-box {
         padding: 26px 21px 48px 21px;
     }
 }


 @media (max-width: 695px) {
     .btn-view a {
         width: -webkit-fill-available;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .btn-view {
         padding: 0 35px;
     }
 }


 @font-face {
     font-family: 'Appetite';
     font-weight: normal;
     font-style: normal;
     src: url('../../fonts/AppetiteContrast.otf') format('opentype');
 }

 @font-face {
     font-family: 'GillSansBold';
     font-weight: normal;
     font-style: normal;
     src: url('../../fonts/gill-sans-nova-clean/GillSansNovaBold.ttf') format('truetype');
 }

 @font-face {
     font-family: 'GillSansMedium';
     font-weight: normal;
     font-style: normal;
     src: url('../../fonts/gill-sans-nova-clean/GillSansNovaMedium.ttf') format('truetype');
 }

 @font-face {
     font-family: 'GillSans';
     font-weight: normal;
     font-style: normal;
     src: url('../../fonts/gill-sans-nova-clean/GillSansNovaBook.ttf') format('truetype');
 }

 @font-face {
     font-family: 'GillSansSemiBold';
     font-weight: normal;
     font-style: normal;
     src: url('../../fonts/gill-sans-nova-clean/GillSansNovaSemiBold.ttf') format('truetype');
 }

 @font-face {
     font-family: 'GillSans-Light';
     font-weight: normal;
     font-style: normal;
     src: url('../../fonts/gill-sans-nova-clean/GillSansNovaLight.ttf') format('truetype');
 }

 article.how-to-section {
     display: block;
     flex-direction: column;
     align-items: center;
     padding: 6vw 0 2vw 0;
     /* Set the background color */
     background-image: url('../../images/map/how-to-logo-cadbury.svg');
     /* Set the background image */
     background-repeat: no-repeat;
     /* Ensure the image doesn't repeat */
     background-size: cover;
     /* Set the background image size */
     overflow: hidden;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section {
         padding: 10px 10vw 10px 10vw;
     }


     .sm-step-img {
         display: block;
     }


     .bg-step-img {

         display: none;
     }

 }

 article.how-to-section img {
     max-width: 90%;
     height: auto;
 }

 article.how-to-section .carousel-holder {
     position: relative;
     padding: 5vw 10vw;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder {
         padding: 0;
     }
 }


 article.how-to-section .carousel-holder .choco {
     position: absolute;
     z-index: 3;
     right: 130px;
     top: 45px;
     max-width: 266px;
     animation: float 7s ease-in-out infinite;
 }


 @media screen and (min-width: 1088px) and (max-width: 1600px) {
     article.how-to-section .carousel-holder .choco {
         max-width: 188px
     }

     article.how-to-section .carousel-holder .choco {
         right: 9vw;
         top: 5vw;
     }
 }

 @media screen and (min-width: 990px) and (max-width: 1088px) {
     article.how-to-section .carousel-holder .choco {
         max-width: 120px
     }
 }


 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .choco {
         right: 0;
         top: -14px;
         max-width: 17vw;
     }
 }

 article.how-to-section .carousel-holder .navigation {
     pointer-events: none;
     width: fit-content;
     height: fit-content;
     bottom: 80px;
     right: 60px;
     position: absolute;
     z-index: 9;
     display: flex;
     gap: 10px;
     align-items: center;
     justify-items: center;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next,
 article.how-to-section .carousel-holder .navigation .arrow-prev {
     position: static;
     pointer-events: all;
     cursor: pointer;
     z-index: 2;
     background: transparent;
     width: 40px;
     height: 40px;
     border-radius: 100px;
     border: 1px solid #ffffff;
     display: flex;
     align-items: center;
     justify-items: center;
     justify-content: center;
     will-change: transform;
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.25s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.25s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.25s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.25s;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next:before,
 article.how-to-section .carousel-holder .navigation .arrow-prev:before,
 article.how-to-section .carousel-holder .navigation .arrow-next:after,
 article.how-to-section .carousel-holder .navigation .arrow-prev:after {
     content: '';
     display: block;
     position: absolute;
     border-radius: 100px;
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next:before,
 article.how-to-section .carousel-holder .navigation .arrow-prev:before {
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next:after,
 article.how-to-section .carousel-holder .navigation .arrow-prev:after {
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next:hover,
 article.how-to-section .carousel-holder .navigation .arrow-prev:hover,
 article.how-to-section .carousel-holder .navigation .arrow-next:focus,
 article.how-to-section .carousel-holder .navigation .arrow-prev:focus {
     border: 1px solid transparent;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next:hover svg path,
 article.how-to-section .carousel-holder .navigation .arrow-prev:hover svg path,
 article.how-to-section .carousel-holder .navigation .arrow-next:focus svg path,
 article.how-to-section .carousel-holder .navigation .arrow-prev:focus svg path {
     fill: #402379;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next:hover:before,
 article.how-to-section .carousel-holder .navigation .arrow-prev:hover:before,
 article.how-to-section .carousel-holder .navigation .arrow-next:focus:before,
 article.how-to-section .carousel-holder .navigation .arrow-prev:focus:before {
     content: '';
     display: block;
     position: absolute;
     border-radius: 100px;
     width: 80%;
     height: 80%;
     z-index: 0;
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next:hover:after,
 article.how-to-section .carousel-holder .navigation .arrow-prev:hover:after,
 article.how-to-section .carousel-holder .navigation .arrow-next:focus:after,
 article.how-to-section .carousel-holder .navigation .arrow-prev:focus:after {
     content: '';
     display: block;
     position: absolute;
     border-radius: 100px;
     width: 100%;
     height: 100%;
     background: #ffffff;
     z-index: -1;
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.4s;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next.swiper-button-disabled:after,
 article.how-to-section .carousel-holder .navigation .arrow-prev.swiper-button-disabled:after {
     width: 100%;
     height: 100%;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next.swiper-button-disabled .arrows svg,
 article.how-to-section .carousel-holder .navigation .arrow-prev.swiper-button-disabled .arrows svg {
     opacity: 1;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next.swiper-button-disabled .arrows svg path,
 article.how-to-section .carousel-holder .navigation .arrow-prev.swiper-button-disabled .arrows svg path {
     stroke: #ffffff;
 }

 article.how-to-section .carousel-holder .navigation .arrow-next.swiper-button-disabled .arrows svg:nth-child(2),
 article.how-to-section .carousel-holder .navigation .arrow-prev.swiper-button-disabled .arrows svg:nth-child(2) {
     display: none;
 }

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

     article.how-to-section .carousel-holder .navigation .arrow-next,
     article.how-to-section .carousel-holder .navigation .arrow-prev {
         top: 58%;
     }
 }

 @media screen and (min-width: 200px) and (max-width: 990px) {

     article.how-to-section .carousel-holder .navigation .arrow-next,
     article.how-to-section .carousel-holder .navigation .arrow-prev {
         top: 55%;
         display: none;
     }
 }

 article.how-to-section .carousel-holder .navigation .arrow-next {
     right: 1.3vw;
 }

 article.how-to-section .carousel-holder .navigation .arrow-prev {
     left: 1.3vw;
 }

 article.how-to-section .carousel-holder .navigation .arrow-prev .arrows {
     transform: rotate(180deg);
 }

 @media screen and (min-width: 1920px) and (max-width: 9000px) {
     article.how-to-section .carousel-holder .navigation .arrow-next {
         right: 1.7vw;
     }

     article.how-to-section .carousel-holder .navigation .arrow-prev {
         left: 1.7vw;
     }
 }

 @media screen and (min-width: 991px) and (max-width: 1440px) {
     article.how-to-section .carousel-holder .navigation .arrow-next {
         right: 1vw;
     }

     article.how-to-section .carousel-holder .navigation .arrow-prev {
         left: 1vw;
     }
 }

 article.how-to-section .carousel-holder .how-to-carousel {
     padding: 0;
     overflow: visible !important;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper {
     padding-top: 60px;
     width: 100%;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide {
     border-radius: 30px;
     background: #301E64;
     display: flex;

 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide:after {
     content: '';
     position: absolute;
     z-index: 2;
     border-bottom-left-radius: 25px;
     border-bottom-right-radius: 25px;
     background: linear-gradient(180deg, rgba(64, 35, 121, 0) 0%, rgba(46, 23, 98, 0.7) 57.5%, #190A47 95.5%);
     width: 100%;
     height: 100%;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide:after {
         background: linear-gradient(180deg, rgba(64, 35, 121, 0) 0%, rgba(46, 23, 98, 0.7) 6.5%, #190A47 19.5%);
         height: 39%;
     }
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide:before {
     content: '';
     position: absolute;
     right: 0;
     bottom: -10px;
     height: 170px;
     width: 100%;
     border-radius: 30px;
     background: url(../../images/map/line-gold-dots.png) no-repeat bottom center;
     background-size: 100%;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide:before {
         bottom: -8px;
         height: 300px;
         background-size: 340%;
         background: none;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3 {
         justify-content: center;
     }
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero,
 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
     width: 50%;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     position: relative;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero:after {
     content: '*Ts&Cs Apply';
     font-family: "Gill Sans Nova";
     position: absolute;
     bottom: 20px;
     left: 70px;
     color: #fff;
     z-index: 4;
     font-size: 14px;
     font-style: italic;
     line-height: 160%;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero:after {
         left: 0;
         color: #fff;
         z-index: 4;
         font-size: 13px;
         width: 100%;
         text-align: center;
     }
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img {
     position: absolute;
     z-index: 1;
     bottom: 3px;
     left: 0;
     max-width: 750px;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
     left: -50px;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
     left: -50px;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
     left: -24px;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
     left: -30px;
     bottom: 23px;
 }

 @media screen and (min-width: 1534px) and (max-width: 1750px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img {
         max-width: 100%;
     }
 }

 @media screen and (min-width: 1200px) and (max-width: 1534px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img {
         position: absolute;
         z-index: 1;
         bottom: 3px;
         max-width: 725px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         left: -50px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         left: -50px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         max-width: 769px;
         left: -25px;
     }
 }

 @media screen and (min-width: 991px) and (max-width: 1200px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img {
         position: absolute;
         z-index: 1;
         bottom: 3px;
         max-width: 644px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         left: -50px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         left: -50px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         bottom: 15px;
         max-width: 644px;
         left: -25px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         max-width: 613px;
         left: -25px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details h2 {
         font-size: 25px !important;
         line-height: 140% !important;
         text-align: center;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
         justify-content: flex-start;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3:after {
         display: none;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info .Bonus:after {
         display: none;
     }

     article.how-to-section .carousel-holder .choco {
         position: absolute;
         z-index: 3;
         right: 10vw;
         top: 3vw;
         max-width: 200px;
         animation: float 7s ease-in-out infinite;
     }

     .swiper-wrapper .btn {
         padding: 17px 30px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
         top: 82% !important;
         left: 97px !important;
         pointer-events: none !important;
     }

     article.how-to-section .carousel-holder .navigation {
         bottom: 64px;
         position: absolute;
     }

 }

 @media screen and (min-width: 813px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img {
         bottom: 200px;
         left: 25%;
         height: auto;
         max-height: 90%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         bottom: 158px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         bottom: 158px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .sm-step-img {
         bottom: 200px;
         left: 45%;
         /* transform: translateX(0%); */
         height: auto;
         max-height: 100%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details {
         margin: auto;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
         margin-top: 95px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3 {
         margin-bottom: 20px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info p strong {
         margin-bottom: 34px;
     }


     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s1 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s2 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s3 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s4 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s5 {
         margin-top: 100px;
     }
 }


 @media screen and (min-width: 665px) and (max-width: 813px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img {
         bottom: 200px;
         left: 0;
         height: auto;
         max-height: 100%;
         width: 100%;
         object-fit: contain;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         bottom: 158px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         bottom: 158px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .sm-step-img {
         bottom: 200px;
         left: 45%;
         /* transform: translateX(0%); */
         height: auto;
         max-height: 100%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details {
         margin: auto;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
         margin-top: 95px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3 {
         margin-bottom: 20px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info p strong {
         margin-bottom: 34px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
         top: 46%;
     }

     .step-content {
         font-size: 16px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide:after {
         background: linear-gradient(180deg, rgba(64, 35, 121, 0) 0%, rgba(46, 23, 98, 0.7) 57.5%, #190A47 95.5%);
         height: 45%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s1 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s2 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s3 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s4 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s5 {
         margin-top: 100px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         max-height: 85%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         max-height: 85%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         max-height: 85%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-4 {
         max-height: 75%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         max-height: 85%;
     }
 }

 @media screen and (min-width: 20px) and (max-width: 665px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img {
         bottom: 200px;
         left: 64px;
         height: auto;
         max-height: 100%;
         width: 78%;
         object-fit: contain;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         bottom: 142px;
     }


     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         bottom: 174px;
     }




     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-4 {
         bottom: 158px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         bottom: 158px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
         top: 46%;
     }





     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s1 {
         margin-top: 119px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s2 {
         margin-top: 70px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s3 {
         margin-top: 70px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s4 {
         margin-top: 70px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details-s5 {
         margin-top: 70px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         max-height: 100%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         max-height: 100%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         max-height: 100%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-4 {
         max-height: 100%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         max-height: 100%;
     }
 }

 @media screen and (min-width: 20px) and (max-width: 500px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         bottom: 292px;
         left: 37px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         bottom: 240px;
         left: 50px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         bottom: 283px;
         left: 60px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-4 {
         bottom: 267px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         bottom: 250px;
     }

 }

 @media (max-width: 435px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img {
         bottom: 276px;
     }


     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-second {
         bottom: 178px;

     }
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details {
     position: relative;
     z-index: 3;
     display: flex;
     flex-direction: column;
     padding: 120px 60px 30px 60px;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details h2 {
     font-size: 50px;
     line-height: 56px;
     font-family: 'Appetite';
     font-weight: normal;
     color: #ffffff;
     margin: 0 0 0 0;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details h2 {
         font-size: 25px;
         line-height: 130%;
         text-align: center;
     }

 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details p {
     line-height: 160%;
     margin: 0 0 0 0;
     font-family: "Gill Sans Nova";
     margin-top: 6px;
     font-size: 18px;
     max-width: 585px;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details p {
         text-align: center;
     }
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details .btn {
         display: inline-flex;
         align-self: center;
     }
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
     position: relative;
     z-index: 3;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 60px;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3 {
     position: relative;
     overflow: hidden;
     width: 100%;
     display: flex;
     align-items: center;
     gap: 15px;
     font-size: 40px;
     line-height: 100%;
     font-family: 'Appetite';
     font-weight: normal;
     background: linear-gradient(90deg, #E7CB7A 2.2%, #FBECB3 31.95%, #C4A557 70.64%, #FBECB3 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 15px;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3 span {
     font-size: 60px;
     line-height: 70%;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3:after {
     content: '';
     background: url('../../images/map/icons/line.svg');
     width: 100%;
     height: 5px;
     position: absolute;
     margin-left: 150px;
     background-repeat: repeat-x;
     background-attachment: fixed;
 }


 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info .Bonus:after {
     content: '';
     background: url('../../images/map/icons/line.svg');
     width: 100%;
     height: 5px;
     position: absolute;
     margin-left: 205px;
     background-repeat: repeat-x;
     background-attachment: fixed;
     font-size: 60px;
     line-height: 70%;
 }


 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3:after {
         display: none;
     }


     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info .Bonus:after {
         display: none;
     }
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info h3.bonus:after {
     display: none;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info p strong {
     display: block;
     margin-bottom: 16px;
     font-family: "Gill Sans Nova";
     font-size: 20px;
     line-height: 32px;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info p.bonus strong {
     display: block;
     margin-top: 15px;
     margin-bottom: 0;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide:hover .card-header img,
 article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide:focus .card-header img {
     transform: translateY(-2vw);
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide {
         flex-direction: column-reverse;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero,
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
         width: -webkit-fill-available;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info,
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details {
         padding: 30px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
         padding-top: 10px;
         min-height: 270px;
         text-align: center;
         align-items: center;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero {
         margin-top: 110px;
     }
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
     top: 75%;
     left: 97px;
     pointer-events: none;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination .swiper-pagination-bullet {
     pointer-events: all;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination .swiper-pagination-bullet:before {
     opacity: 0.4;
 }

 article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
     background: #ffffff;
     opacity: 1;
 }

 @media screen and (min-width: 813px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
         top: 42%;
         left: 0;
     }
 }

 @media screen and (min-width: 665px) and (max-width: 813px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
         top: 42%;
         left: 0;
     }
 }

 @media screen and (min-width: 600px) and (max-width: 665px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
         top: 32%;
         left: 0;
     }
 }

 @media screen and (min-width: 401px) and (max-width: 600px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
         top: 35%;
         left: 0;
     }
 }

 @media screen and (min-width: 20px) and (max-width: 400px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-pagination {
         top: 39%;
         left: 0;
     }
 }

 body .btn,
 html .btn {
     font-family: 'GillSansBold';
     font-weight: normal;
     font-size: 16px;
     line-height: 16px;
     letter-spacing: 0.8px;
     text-transform: uppercase;
     text-decoration: none !important;
 }

 .btn {
     width: fit-content;
     border: 2px solid #D3B565;
     border-radius: 30px;
     padding: 18px 39px;
     background: transparent;
     position: relative;
     color: #D3B565;
     text-decoration: none;
     font-weight: normal;
     background: linear-gradient(90deg, #E7CB7A 2.2%, #FBECB3 30.95%, #C4A557 70.64%, #FBECB3 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transform-origin: center;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
 }

 .btn:after {
     content: '';
     display: block;
     position: absolute;
 }

 .btn:hover,
 .btn:focus {
     transform: scale(0.95);
 }

 .swiper-wrapper button,
 .swiper-wrapper .btn {
     margin: 30px 0;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article#map-area .world-index {
         flex-direction: column;
         border-radius: 0;
         gap: 40px;
         padding: 10vw 10vw 15vw 10vw;
     }

     article#map-area .world-index .info,
     article#map-area .world-index .wi-accordion {
         width: 100%;
     }

     article#map-area .world-index .btn {
         margin: 30px auto;
     }

     article#map-area .world-index:before,
     article#map-area .world-index:after {
         display: none;
     }
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .comp-details .btn {
         display: inline-flex;
         align-self: center;
         font-size: 14px;
         padding: 18px 20px;
     }
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper {
     width: 100%;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide {
     display: flex;
     flex-direction: column;
     background: #ffffff;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .banner {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     height: 240px;
     overflow: hidden;
     background: #402379;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .banner img {
     width: 100%;
     object-fit: cover;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .banner {
         height: 200px;
     }
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .content {
     padding: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     min-height: 240px;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .content h3,
 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .content p {
     text-align: center;
     color: #301E64;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .content h3 {
     font-size: 20px;
     line-height: 160%;
     margin-bottom: 15px;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .content p {
     margin: 0;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .content p.only-desktop {
         display: none;
     }
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .content p.only-mobi {
     display: none;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .content p.only-mobi {
         display: block;
     }
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .btn-holder {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .btn-holder button {
     border: 2px solid #301E64;
     border-radius: 30px;
     padding: 10px 15px;
     text-transform: uppercase;
     color: #ffffff;
     background: #301E64;
     font-size: 18px;
     line-height: 100%;
     font-family: 'GillSansBold';
     cursor: pointer;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .btn-holder button:hover,
 article#map-area #mapTutor .tutor-carousel .swiper-wrapper .slide .btn-holder button:focus {
     border: 2px solid #301E64;
     background: #ffffff;
     color: #301E64;
 }

 @media screen and (min-width: 20px) and (max-width: 990px) {
     article#map-area .world-index .wi-accordion {
         flex-direction: row;
         padding: 0;
         background: transparent;
         border-radius: 0;
         z-index: 1;
         gap: 0;
         overflow: visible !important;
     }

     article#map-area .world-index .wi-accordion .swiper-wrapper {
         width: 100%;
     }

     article#map-area .world-index .wi-accordion .swiper-pagination {
         bottom: -40px !important;
         left: 0;
         top: unset;
         pointer-events: none;
     }

     article#map-area .world-index .wi-accordion .swiper-pagination .swiper-pagination-bullet {
         pointer-events: all;
         background: transparent;
     }

     article#map-area .world-index .wi-accordion .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
         background: #ffffff;
     }
 }

 .swiper-pagination .swiper-pagination-bullet {
     background: transparent;
     border: 2px solid #ffffff;
     width: 10px;
     height: 10px;
     opacity: 0.7;
     margin: 0 5px 0 0 !important;
     pointer-events: all;
 }

 article#map-area #mapTutor .tutor-carousel .swiper-pagination .swiper-pagination-bullet {
     pointer-events: all;
     background: #301E6480;
 }

 article#insights-area .insights-holder .swiper-pagination .swiper-pagination-bullet {
     pointer-events: all;
     background: transparent;
 }

 .swiper-pagination .swiper-pagination-bullet-active {
     background: #ffffff;
     opacity: 1;
 }

 .step-content {
     font-family: "Gill Sans Nova";
     font-size: 18px;
     line-height: 160%;
     max-width: 414PX;
 }

 /* GeneroCity studios */
 .section-three {
     background-image: url('../images/map/promo-bg.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     overflow: hidden;
     position: relative;
     padding-bottom: 200px
 }

 .message-head {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding-top: 67px;
 }

 .message-text-img {
     width: 680px;
 }

 .message-text-collection {
     text-transform: uppercase;
     color: #FFFFFF;
     font: 400 20px/20px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
 }

 .message-text-more {
     color: #FFFFFF;
     text-align: center;
     font: 400 18px/28px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
     margin-top: 20px;
 }

 .tabs-list {
     list-style: none;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }

 .main-container {
     display: flex;
     justify-content: center;
     padding: 54px 0px;
 }

 .cards {
     width: 364px;
     border-radius: 15px;
     opacity: 0px;
 }

 .studio-img-set {
     background-image: url('../assets/images/studio-bg-img.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     overflow: hidden;
     width: 15%;
     top: 0px;
     height: 100%;
     position: absolute;
 }

 .card-container {
     padding: 85px 0px;
     display: flex;
     gap: 20px;
 }

 .crads-down {
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
     padding: 10px 25px 20px 25px;
     background-color: #ffffff;
 }

 .crads-down h1 {
     color: #301E64;
     font: 700 20px/32px Gill Sans Nova;
 }

 .crads-down p {
     color: #301E64;
     font: 400 16px/28.80px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
 }

 .DIRECTIONS-link {
     text-decoration: none;
     color: #301E64;
     font: 600 12px/24.80px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif !important;

     margin-top:20px;
     text-align:right;
 }

 .card-detail {
     display: flex;
     flex-direction: column;
     /*align-items: center;*/
     justify-content: space-between;

     align-items: unset;
 }

 .cards-up {
     display: flex;
     justify-content: center;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     padding: 19px 0px;
     background-color: var(--cadbury-purple-primary-400, #7031B4);
 }
 .cards-up .cards-img-3 {
     width:80%;
 }

 #leaderboard-container {
     width: 100%;
 }

 .head-border {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0) 9%, #301e64 44%);
     z-index: 0;
 }

 @media (max-width: 1200px) {
     .wrapper i:first-child {
         display: none !important;
     }

     .wrapper i:last-child {
         display: none !important;
     }
 }

 @media (max-width: 1100px) {


     .card-container {
         margin-bottom: 30px;
         padding: 0px;
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
     }

     .main-container {
         justify-content: center;
         align-items: center;
     }

     .message-text-img {
         width: 419px;
     }

     .message-text-more {
         margin-bottom: 39px;
     }

 }

 @media (max-width: 1300px) {
     .studio-img-set {
         display: none;
     }
 }

 @media (max-width: 800px) {
     .card-container {
         padding: 0px;
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
         gap: 46px;
         margin-bottom: 0;
     }

     .message-text-img {
         width: 389px;
     }

     .message-text-more {
         padding: 0px 20px;
         margin-bottom: 39px;
         margin-bottom: 39px;
     }

     .step-content {
         font-size: 16px;
     }
 }


 @media screen and (min-width: 100px) and (max-width: 400px) {

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
         padding-top: 68px !important;
     }



     article.how-to-section .carousel-holder .choco {
         right: -18px !important;
         top: 26px !important;
         max-width: 32vw !important;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info p strong {
         padding-bottom: 25px;
     }

 }

 @media (max-width: 600px) {
     .main-container {
         padding: 25px 0px;
     }

     article.how-to-section {
         background-image: none;
     }

     .message-text-more {
         padding: 0px 50px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .step-info {
         padding-top: 30px;
     }

     article.how-to-section .carousel-holder .choco {
         right: 0px;
         top: 15px;
         max-width: 23vw;
     }

     .studio-img-set {
         display: none;
     }

     .card-container {
         padding: 0px;
         flex-direction: column;
     }

     .message-text-img {
         width: 289px;
     }

     .message-head {
         padding-top: 52px;
     }

     .message-text-collection {
         font: 400 15px / 17px Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
     }

     .main-container {
         padding: 32px 0px;
     }

     .card-detail {
         flex-direction: column;
         align-items: start;
     }

     .text-content {
         padding: 0 30px;
     }


     .cards {
         width: 267px;
     }

     .DIRECTIONS-link {
         margin-top: 10px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide:after {
         height: 45%;
     }
 }



 @media (max-width: 425px) {

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         width: 100%;
         left: 0px;
         bottom: 267px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         width: 100%;
         left: 0px;
         bottom: 218px;
     }


     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         width: 100%;
         left: 0px;
         bottom: 259px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-4 {
         width: 100%;
         left: 0px;
         bottom: 242px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         width: 100%;
         left: 0px;
         bottom: 231px;
     }

 }

 @media (max-width: 400px) {

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         width: 100%;
         left: 0px;
         bottom: 267px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         width: 100%;
         left: 0px;
         bottom: 218px;
     }


     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         width: 100%;
         left: 0px;
         bottom: 259px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-4 {
         width: 100%;
         left: 0px;
         bottom: 242px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         width: 100%;
         left: 0px;
         bottom: 231px;
     }

 }

 @media (max-width: 390px) {

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         width: 100%;
         left: 0px;
         bottom: 314px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         width: 100%;
         left: 0px;
         bottom: 261px;
     }


     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         width: 100%;
         left: 0px;
         bottom: 297px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-4 {
         width: 100%;
         left: 0px;
         bottom: 277px;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         width: 100%;
         left: 0px;
         bottom: 284px;
     }

 }

 @media (max-width: 356px) {

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-1 {
         width: 100%;
         left: 0px;
         bottom: 64%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-2 {
         width: 100%;
         left: 0px;
         bottom: 64%;
     }


     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-3 {
         width: 100%;
         left: 0px;
         bottom: 64%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-4 {
         width: 100%;
         left: 0px;
         bottom: 64%;
     }

     article.how-to-section .carousel-holder .how-to-carousel .swiper-wrapper .slide .comp-hero .hero-img-5 {
         width: 100%;
         left: 0px;
         bottom: 64%;
     }

 }


 @media (max-width: 320px) {
     .cards {
         width: 290px;
     }
 }

 footer {
     display: flex;
     flex-direction: column;
     background-color: #301E64;
     position: relative;
     z-index: 2;
 }

 footer .footer-header {
     position: absolute;
     clip-path: ellipse(65% 80% at 50% 100%);
     height: 10vw;
     background: #301E64;
     z-index: 5;
     top: -9.635vw;
     left: 0;
     width: 100%;
 }

 footer .footer-header img {
     max-width: 19.5vw;
     width: 100%;
     height: auto;
     position: absolute;
     top: 1.927vw;
     left: 31vw;
 }

 @media screen and (min-width: 1441px) and (max-width: 1920px) {
     footer .footer-header img {
         max-width: 19.5vw;
         width: 100%;
         height: auto;
         position: absolute;
         top: 37px;
         left: 31vw;
     }
 }

 @media screen and (min-width: 200px) and (max-width: 990px) {
     footer .footer-header img {
         max-width: 33.5vw;
         width: 100%;
         height: auto;
         position: absolute;
         top: 1.927vw;
         left: 0vw;
         z-index: 4;
     }
 }

 @media screen and (min-width: 200px) and (max-width: 990px) {
     footer .footer-header {
         height: 20vw;
     }
 }

 @media screen and (min-width: 200px) and (max-width: 990px) {
     footer {
         margin-top: -15vw;
     }
 }

 footer .footer-content {
     display: flex;
     justify-content: space-between;
     padding: 0 5vw 5vw 5vw;
     position: relative;
     z-index: 5;
 }

 @media screen and (min-width: 1369px) and (max-width: 1588px) {
    footer .footer-content {
        display: flex;
        justify-content: space-between;
        padding: 0 5vw 5.2vw 5vw;
        position: relative;
        z-index: 5;
    }
  }

  @media screen and (min-width: 1589px) and (max-width: 1700px) {
    footer .footer-content {
        display: flex;
        justify-content: space-between;
        padding: 0 5vw 5.4vw 5vw;
        position: relative;
        z-index: 5;
    }
  }

  @media screen and (min-width: 1701px) and (max-width: 1900px) {
    footer .footer-content {
        display: flex;
        justify-content: space-between;
        padding: 0 5vw 5.5vw 5vw;
        position: relative;
        z-index: 5;
    }
  }

  @media screen and (min-width: 1901px) and (max-width: 2187px) {
    footer .footer-content {
        display: flex;
        justify-content: space-between;
        padding: 0 5vw 5.55vw 5vw;
        position: relative;
        z-index: 5;
    }
  }

  @media screen and (min-width: 2188px)  {
    footer .footer-content {
        display: flex;
        justify-content: space-between;
        padding: 0 5vw 5.9vw 5vw;
        position: relative;
        z-index: 5;
    }
  }

 @media screen and (min-width: 200px) and (max-width: 990px) {
     footer .footer-content span {
         font-size: 14px;
         line-height: 19.6px;
     }
 }

 @media screen and (min-width: 991px) and (max-width: 1024px) {
     footer .footer-content {
         padding: 0 2vw 5vw 2vw;
     }
 }

 @media screen and (min-width: 200px) and (max-width: 990px) {
     footer .footer-content {
         text-align: center;
         justify-content: unset;
         align-items: center;
         flex-direction: column;
         gap: 30px;
         padding: 10vw;
     }

     footer .footer-content .copyright-text {
         max-width: 310px;
         width: 100%;
         display: flex;
     }

     footer .footer-content div {
         order: 2;
     }

     footer .footer-content nav {
         order: 1;
         gap: 15px;
     }
 }

 footer nav {
     display: flex;
     gap: 30px;
 }

 footer nav a {
     color: #ffffff;
     text-decoration: none;
 }

 footer nav a:hover {
     color: #D3B565;
 }

 @media screen and (min-width: 200px) and (max-width: 640px) {
     footer nav {
         justify-content: unset;
         align-items: center;
         flex-direction: column;
     }
 }

 /*# sourceMappingURL=footer.css.map */

 .festive {
     background: #301e64;
     position: relative;
 }

 .festive-img-set {
     background-image: url('../assets/images/festive-round.png');
     width: 211px;
     right: 0;
     top: 120px;
     height: 100%;
     position: absolute;
     background-repeat: no-repeat;
 }

 .festive-text-more {
     color: #9760D4;
     text-transform: uppercase;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: 28.8px;
     margin-top: 26px;
     font-family: "Gill Sans Nova";
     display: flex;
     text-align: center;
 }

 .festive-text {
     width: 700px;
     line-height: 160%;
 }

 .festive-img {
     display: flex;
     gap: 69px;
     align-items: center;
     margin-top: 35px;
     width: 100%;
     justify-content: center;
 }

 .wrapper {
     max-width: 1100px;
     width: 100%;
     position: relative;
     margin: 50px 0 80px 0;
 }

 .wrapper i {
     height: 50px;
     width: 50px;
     background: #ffffff;
     text-align: center;
     line-height: 50px;
     border-radius: 50%;
     cursor: pointer;
     position: absolute;
     top: 50%;
     font-size: 1.25 rem;
     transform: translateY(-50%);
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
 }

 .wrapper i:first-child {
     left: -50px;
     top: 43%;
 }

 .wrapper i:last-child {
     right: -50px;
     top: 43%;
 }

 @media (max-width: 1200px) {
     .wrapper i:first-child {
         left: 0px;
     }

     .wrapper i:last-child {
         right: 0px;
     }
 }

 /* .card .img {
     background: green;
     width: 145px;
     height: 145px;
     border-radius: 50%;
 } */

 /* .card img {
     object-fit: cover;
     border-radius: 50%;
     border: 4px solid #fff;
 } */

 .card h2 {
     font-weight: 500;
     font-size: 1.56rem;
     margin: 30px 0 5px;
 }

 .card span {
     color: #6a6d78;
     font-size: 1.31rem;

 }

 .carousel {
     margin: 0 16px;
 }

 .wrapper .card {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .fa-arrow-left:before,
 .fa-arrow-right:before {
     color: #000000;
 }

 .head-text {
     background: linear-gradient(90deg, #E7CB7A 2.2%, #FBECB3 41.95%, #C4A557 70.64%, #FBECB3 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 70px;
     font-weight: 400;
     letter-spacing: 2px;
     margin-top: 7px;
     font-family: Appetite;
     font-style: normal;
     line-height: 160%;
     text-align: center;
 }


 @media (max-width: 600px) {
     .head-text {
         font-size: 40px;
         line-height: 120%;
         text-align: center;
         margin-top: 0;
     }

     .carousel {
         margin: 0 8px;
     }

     .festive-img {
         gap: 22px;
     }

     .festive-img svg {
         height: 37px;
     }

     .festive-text {
         width: 100% !important;
         line-height: 31.2px;
     }

     .content-left-box {
         padding: 0 10px;
     }


     .festive-text-more {
         margin-top: 10px;
         padding: 0 50px;
     }

     .festive-img {
         padding: 0 50px;
     }

 }

 @media (max-width: 1024px) {
     .festive-img-set {
         display: none;
     }

     .wrapper i {
         display: none;
     }
 }

 @media (max-width: 576px) {
     .sixty-img {
         width: 120px;
     }

     .asap-img {
         width: 66px;
     }

     .spar-img {
         width: 43px;
     }

     #festiveNav .header-holder {
         margin-top: 0;
     }

     .text-content {
         padding: 0 68px;
     }

     .position-set-img {
         background-image: url('../assets/images/mobile-promo.png');
         width: 100%;
         background-size: auto;
         left: -68%;
         top: -6%;
     }

     .position-set-img-2 {
         right: -45%;
         top: 138px;
     }

     .rounded-box {
         width: 100%;
     }

     .shadow-dot {
         margin: auto;
     }

     .festive-img {
         margin-top: 15px;
     }

     .festive-text-more {
         margin-top: 10px;
     }

     .wrapper {
         margin: 60px 0 38px 0;
     }

     .pagination {
         margin-top: 26px;
     }

     .head-text {
         font-size: 32px;
         line-height: 130%;
     }

     .message-text-collection {
         font-size: 15.167px;
         line-height: 27px;
     }
 }

 @media (max-width: 768px) {

     .festive-text {
         width: 100% !important;
         line-height: 31.2px;
     }

 }

 .pagination {
     display: flex;
     justify-content: center;
     margin-top: 28px;
 }

 .dot {
     height: 10px;
     width: 10px;
     margin: 0 5px;
     border: 1px solid #ffffff;
     border-radius: 50%;
     display: inline-block;
     transition: background-color 0.3s ease;
 }

 .dot.active {
     background-color: #ffffff;
 }


 .loader {
     width: 50px;
     /* Adjust size as needed */
     height: 50px;
     /* Adjust size as needed */
     background-image: url('../assets/images/icons/loading.svg');
     /* Replace with your loader image path */
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 50%;
     /* Optional, if your loader is circular */
     z-index: 10;
     /* Centering the loader if necessary */
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

     /* Rotate animation */
     animation: rotate-loader 2.5s linear infinite;
 }

 @keyframes rotate-loader {
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
         /* Rotate loader */
     }
 }

 .main-loader-div {
     height: 365px;
     position: relative;
 }

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


 .footer-link {
     text-decoration: none;
     font-family: Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: 600;
     line-height: normal;
     letter-spacing: 1.12px;
     text-align: left;
     color: #fffcf4;
 }

 .footer-contant {
     font-family: Gill Sans Nova, -apple-system, Roboto, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: 600;
     line-height: normal;
     letter-spacing: 0.08em;
     text-align: left;
     color: rgba(255, 255, 255, 1);
 }


 .footer-navbar {
     display: none;
 }

 .list-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     color: rgba(255, 255, 255, 0.27);
     font-family: "Gill Sans Nova";
     font-size: 10px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     text-decoration: none;
 }

 .list-item-active {
     display: flex;
     flex-direction: column;
     align-items: center;
     color: rgb(255, 255, 255);
     font-family: "Gill Sans Nova";
     font-size: 10px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     text-decoration: none;
 }



 @media (max-width: 1024px) {
     .footer-contant {
         text-align: center;
         margin: 20px 0;
     }

     .footer-navbar {
         display: block;
         border-top: 1.5px solid gold;
     }

     .list-style {
         display: flex;
         gap: 20px;
         list-style: none;
         font-size: smaller;
         justify-content: space-evenly;
         padding-left: 0px;
         padding: 12px 0;
     }
 }

 .dot {
     width: 12px;
     height: 12px;
     margin: 0 0px;
     display: inline-block;
     background-color: transparent;
     border: 1px solid white;
     border-radius: 50%;
 }


 .generocity-btn {
     width: fit-content;
     border: 2px solid #FFFFFF;
     border-radius: 30px;
     padding: 18px 39px;
     font-size: 16px;
     font-weight: 700;
     background: transparent;
     position: relative;
     color: #FFFFFF;
     text-decoration: none;
     background: #FFFFFF;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transform-origin: center;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     -webkit-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     -khtml-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     -moz-transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
     transition: all cubic-bezier(0.34, 0.57, 0.21, 0.99) 0.6s;
 }

 .generocity-btn:after {
     content: '';
     display: block;
     position: absolute;
 }

 .generocity-btn:hover,
 .generocity-btn:focus {
     transform: scale(0.95);
 }

 .slick-active .dot {
     background-color: #ffffff;
 }


 .slick-slide img {
     width: 96% !important;
     height: 80% !important;
     object-fit: contain;
     border-radius: 33px;
 }

 @keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-15px);
  }
  100% {
    transform: translatey(0px);
  }
}

@media screen and (min-width: 990px) {
    .menu-list a span{
      font-size: 18px;
    }
  }

 .info-text {
     display: flex;
     align-items: center;
     max-width: 50%;
     flex-direction: column;
 }
 .info-text a {
     color: var(--cadbury-gold-secondary-500, #E1B970);
     font-family: "Gill Sans Nova";
     font-weight:700;
 }
 @media screen and (min-width: 20px) and (max-width: 990px) {
     .info-text {
         max-width: 100%;
         margin-bottom: 50px;
     }
     .info-text a{
        display:none
     }
 }