/* Safari viewport fix */
html, body {
    overflow-x: hidden;
}

/* General declarations */
h1, h2, h3, h4, h5, h6, p, div{color: #1e3464}
hr{
    border-top:1px solid #1e3464 !important;
    margin: 40px auto !important;
    width: 94% !important;
}
@media (max-width: 474px) {
    .hidden-xxs {
        display: none !important;
    }
    .col-xxs-12 {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
    .xss-center{
        text-align: center;
        margin: 0 auto;
    }
}
@media (max-width: 768px) {
    .xs-center{
        text-align: center;
        margin: 40px auto;
    }
}
@media (max-width: 991px) {
    .slide-images {
        margin:0 auto;
        text-align: center;
        width:69%;
    }

}
.mobile-card{
    background-color: #fbf8f4;
    border: 1px solid #cccccc;
    border-radius: 10px;
    padding: 20px 30px;
}
#mobile-store{
    position: relative;
    z-index: 0;
    padding: 40px 20px;
}
#mobile-store h1{
    font-size: 2.2em;
    font-weight: 400;
}
#mobile-store h2{
    color:#805196;
    font-size: 2.2em;
    font-weight: 800;
    text-align: right;
    margin: 0;
}
#mobile-qrcode{padding: 40px 20px 0;}
#mobile-qrcode input#phone-input{
    margin-top: 20px;
    height: 40px !important;
    border: 1px solid #1e3464 !important;
    border-radius: 20px;
    text-align: center;
}
#mobile-qrcode #send-sms{
    margin-bottom: 40px;
    height: 40px;
    border-radius: 20px;
}
#mobile-discount{padding: 60px 20px;}
#mobile-faq{
    background-color: #f9eacd;
    margin: 0 -14px;
    padding: 40px 30px 60px;
}
#mobile-faq h1{
    margin: 40px auto 20px;
}
#mobile-trustpilot{
    padding: 60px 20px;
}
#mobile-more{
    background-color:#1e3464;

}
#mobile-more,
#mobile-more h1,
#mobile-more h2,
#mobile-more h3,
#mobile-more h4,
#mobile-more p{
    color:#ffffff;
}
.tdd-logo-small img{
    height: 16%;
    margin: 80px auto 40px;
}
#mobile-more .get-more{
    font-family: 'Caprasimo', cursive;
    margin: 40px auto 0;
}
#mobile-more .discount-on-deals{
    font-family: 'Caprasimo', cursive;
    margin: 0 auto 40px;
}
#mobile-more img.reward-coin{
    width:81px;
    margin: 5% auto 0;
}
#mobile-more .rewards{
    font-family: 'Caprasimo', cursive;
    margin: 0 auto 40px;
}
#mobile-more h2.uppercase{
    text-transform: uppercase;
    font-size: 2.1em;
    font-weight: 200;
    margin: 0 auto;
}
#mobile-more h3{
    font-size: 1.4em;
    font-weight: 700;
    margin: 0 auto;
}

#mobile-CTA{
    position: relative;
    z-index: 0;
    padding: 100px 20px;
}
#mobile-CTA h1{
    text-align: left;
    font-weight: 400;
}
#mobile-CTA h2{
    text-align: right;
    font-weight: 800;
    font-size: 2.4em;
    color:purple;
}
p{font-family: 'Poppins', Helvetica, sans-serif;}


/* Start ** Ovals animation */
.background-ovals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.animated-oval-largest,
.animated-oval-medium,
.animated-oval-small,
.animated-oval-smallest {
    position: absolute;
    border-radius: 50%;
    animation: morph 10s ease-in-out infinite alternate;
    transform-origin: center;
    opacity: 0.6;
}

/* === Largest Oval === */
.animated-oval-largest {
    width: 85%;
    height: 98%;
    bottom: -20px;
    left: 4%;
    background: radial-gradient(circle at center, #ffffff 14%, #f4ede4 100%);
    transform: rotate(356deg) scaleX(1.09);
    animation-delay: 0s;
    animation: morphA 12s ease-in-out infinite;
}

/* === Medium Oval === */
.animated-oval-medium {
    width: 65%;
    height: 75%;
    bottom: 6%;
    left: 12%;
    background: radial-gradient(circle at center, #ffffff 14%, #ede3dd 100%);
    transform: rotate(15deg) scaleX(1.065);
    animation-delay: 2s;
    animation: morphB 14s ease-in-out infinite;
}

/* === Small Oval === */
.animated-oval-small {
    width: 38%;
    height: 52%;
    bottom: 14%;
    left: 14%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.10) 10%, rgba(128,81,150,0.2) 100%);
    transform: rotate(-11deg) scaleX(1.45);
    animation-delay: 4s;
    animation: morphC 8s ease-in-out infinite;
}

/* === Smallest Red Rounded Square === */
.animated-oval-smallest {
    width: 10%;
    aspect-ratio: 1/1;
    bottom: 22%;
    left: 22%;
    background-color: #fd5e53;
    border-radius: 20px;
    transform: translateX(-50%) rotate(2deg) scale(1.1);
    opacity: 1;
    animation-delay: 6s;
    animation: morphD 14s ease-in-out infinite;
}

/* === Morphing Animation Keyframes === */
@keyframes morphA {
    0%   { width:85%; height: 97%; border-radius: 90% / 95%; transform: scaleX(1.09) rotate(-4deg); }
    50%  { width:83%; height: 99%; border-radius: 50% / 55%; transform: scaleX(1.06) rotate(1deg); }
    100% { width:85%; height: 97%; border-radius: 90% / 95%;transform: scaleX(1.09) rotate(-4deg); }
}

@keyframes morphB {
    0%   { width: 65%; height: 75%; border-radius: 50% 50% 48% 52% / 60% 40% 55% 45%; transform: scaleX(1.065) rotate(15deg); }
    50%  { width: 68%; height: 80%; border-radius: 53% 47% 45% 55% / 58% 42% 52% 48%; transform: scaleX(1.08) rotate(24deg); }
    100% { width: 65%; height: 75%; border-radius: 50% 50% 48% 52% / 60% 40% 55% 45%; transform: scaleX(1.065) rotate(15deg); }
}

@keyframes morphC {
    0%   { width: 38%; height: 52%; border-radius: 45% 55% 50% 50% / 65% 50% 60% 40%; transform: scaleX(1.45) rotate(-11deg); }
    50%  { width: 37%; height: 51%; border-radius: 50% 50% 55% 45% / 60% 40% 50% 50%; transform: scaleX(1.52) rotate(-8deg); }
    100% { width: 38%; height: 52%; border-radius: 45% 55% 50% 50% / 65% 50% 60% 40%; transform: scaleX(1.45) rotate(-11deg); }
}

@keyframes morphD {
    0%   { border-radius: 20px; transform: scale(1.1) rotate(4deg); }
    50%  { border-radius: 18px; transform: scale(1.15) rotate(-2deg); }
    100% { border-radius: 24px; transform: scale(1.1) rotate(4deg); }
}
/* /End ** Ovals animation */
.arrows{
    background-image: url("/images/mobile/think_fast_separator.png");
    background-repeat: repeat-x;        /* or repeat, repeat-y */
    background-position: center right;    /* or adjust as needed */
    background-size: auto;              /* ensures image is not scaled/cropped */
    /*width: 100%;*/
    height: 8px;
    vertical-align: middle;
}
.red-dot::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #fd5e53;
    border-radius: 50%;
    vertical-align: top;
    margin-left: -1px;
    margin-right: -5px;
    margin-top: 13px;
}
.dot-style {
    position: relative;
    display: inline-block;
}

.dot-style::after {
    content: '';
    position: absolute;
    top: 29px;
    left: 51%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #90be6d;
    border-radius: 50%;
    z-index: 1;
}


/* Start ** Shapes animation */
.decoration-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.shape {
    position: absolute;
    opacity: 0.6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation-name: popFade;
}

.circle-stroke {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
    animation-name: floatFade;
}

.rombus {
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    animation-name: shake;
    animation-duration: 2.5s;
}

.star {
    width: 28px;
    height: 20px;
    clip-path: polygon(
            50% 0%,
            57% 30%, 80% 20%,
            65% 45%, 90% 50%,
            65% 55%, 80% 80%,
            57% 70%, 50% 100%,
            43% 70%, 20% 80%,
            35% 55%, 10% 50%,
            35% 45%, 20% 20%,
            43% 30%
    );
    animation-name: pulse;
    animation-duration: 2s;
}

.line {
    width: 4px;
    height: 40px;
    animation-name: rotateLine;
    animation-duration: 8s;
}

.square-filled {
    width: 12px;
    height: 12px;
    animation-name: drift;
}

/* === Animations === */

@keyframes popFade {
    0%, 100% { opacity: 0; transform: scale(0.8) translateY(0); }
    50% { opacity: 1; transform: scale(1.2) translateY(-10px); }
}

@keyframes floatFade {
    0% { opacity: 0; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-15px); }
    100% { opacity: 0; transform: translateY(0); }
}

@keyframes shake {
    0%, 100% { transform: rotate(45deg) translateX(0); }
    25% { transform: rotate(45deg) translateX(-2px); }
    75% { transform: rotate(45deg) translateX(2px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

@keyframes rotateLine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes drift {
    0% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(-10px) scale(1.2); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 0.7; }
}
/* /End ** Shapes animation */

/* Colors ******** */
.brick-red{color:#fd5e53}
.brick-red-fill{background-color: #fd5e53}
.brick-red-stroke{border:4px solid #fd5e53}

.lightgreen{color:#90be6d}
.lightgreen-fill{background-color: #90be6d}
.lightgreen-stroke{border:4px solid #90be6d}

.orange{color:#ffb347}
.orange-fill{background-color: #ffb347}
.orange-stroke{border:4px solid #ffb347}

.lightblue{color:#00a8e8}
.lightblue-fill{background-color: #00a8e8}
.lightblue-stroke{border:4px solid #00a8e8}

.blue{color:#3c65bd}
.blue-fill{background-color: #3c65bd}
.blue-stroke{border:4px solid #3c65bd}

.yellow{color:#f7db4f}
.yellow-fill{background-color: #f7db4f}
.yellow-stroke{border:4px solid #f7db4f}

.purple{color:#805196}
.purple-fill{background-color: #805196}
.purple-stroke{border:4px solid #805196}
/* ****** ********  */

/* Start - Slider - How it works ******** */
.how-it-works-slider {
    margin-top: 40px;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.step {
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.step.active {
    opacity: 1;
}

.step .circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #003366;
    color: white;
    text-align: center;
    line-height: 36px;
    font-weight: bold;
    font-size: 16px;
}

.step .text {
    font-size: 16px;
    color: #333;
}

.slide-images {
    position: relative;
}

.slide-images .slide {
    display: none;
    width: 100%;
}

.slide-images .slide.visible {
    opacity: 1;
    z-index: 1;
    display: block;
}
/* /End - Slider - How it works ******** */

/* Store buttons */
.app-store-buttons-wrapper {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.store-badge {
    height: 60px;
    object-fit: contain;
    vertical-align: middle;
}
/* / END - Store buttons */