:root {
    --primary-color: #e7ff25;
    --secondary-color: #f5f5f5;
    --third-color: #acc200;
    --color-white: #ffffff;
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-black: #000000;
    --color-black-40: rgba(0, 0, 0, 0.4);
    --primary-10: rgba(0, 0, 0, 0.1);
    --primary-20: rgba(0, 0, 0, 0.2);
    --primary-50: rgba(0, 0, 0, 0.5);
    --primary-60: rgba(0, 0, 0, 0.6);
    --primary-70: rgba(0, 0, 0, 0.7);
    --font-family-primary: "Bebas Neue", sans-serif;
    --font-family-secondary: "DM Sans", sans-serif;
}

/* Prevent image selection */
img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

*,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--secondary-color);
    color: var(--color-black);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.alignItem-fxEnd {
    align-items: flex-end;
}

.d-none {
    display: none !important;
}

.forMobile {
    display: none !important;
}

.BGimage {
    display: flex;
    position: absolute;
    background-image: url("../images/spotBG.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 116vw;
    /* height: 82vw; */
    height: 178vh;
    margin-top: -10.5vw;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    z-index: -1;
    overflow: clip;
}

.mainContainer {
    display: flex;
    flex-direction: column;
    /* overflow-x: hidden; */
    overflow: clip;
}

.section-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* gap: 10vh; */
    gap: 0;
    /* padding: 10vh 4vw; */
    padding: 10vh 4vw 0vw 10vh;
    padding-top: 0;
    /* overflow: clip; */
    position: relative;
}

.logoContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.logo {
    background-image: url("/images/logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    font-family: var(--font-family-primary);
    /* width: 860px; */
    width: 53vw;
    height: 12vw;
    color: var(--color-black);
    text-decoration: none;
    overflow: hidden;
    text-transform: uppercase;
    margin-top: 10vw;
}

.orangeDash {
    background-color: var(--third-color);
    width: 2.5vw;
    height: 0.3vw;
    align-self: flex-start;
    margin-bottom: 1vw;
}

/*START zero view text marker and sliding text START*/
.flipingTxtContainer {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sectionDesc p:first-child {
    position: relative;
    height: 2em;
    /* adjust to text size */
    /* overflow: hidden; */
    overflow: visible;
}

    .sectionDesc p:first-child .secDesHig {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

.word-wrapper {
    display: inline-flex;
    position: relative;
    /* top: -2vh; */
    margin: .5vw 0;
    height: 3.8vw;
    width: 16ch;
    overflow: hidden;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* hidden measurer */
.measure {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
}

/*END zero view text marker and sliding text END*/
.sectionDesc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--font-family-secondary);
    font-weight: 400;
    font-size: 2.1vw;
    line-height: 3.5vw;
    text-align: center;
}

.secDesHig {
    font-family: var(--font-family-primary);
    font-size: 3.7vw;
    line-height: 4.7vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.sectionDesc p {
    padding: 0px 12vw;
}

    .sectionDesc p b {
        font-family: "Aonic_Bold", sans-serif;
    }

/* ========highlightContainer for other non animated text=========== */
.sec1-highlightContainer1 {
    display: inline-block;
    font-family: var(--font-family-primary);
    font-size: 3.7vw;
    line-height: 3.7vw;
    background-color: #e7ff25;
    transform: rotate(-1deg) skewX(-1deg);
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
}

    /* .sec1-highlightContainer1::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  height: 80%;
  z-index: -1;
  background: #e7ff25;
  transform: rotate(-1deg) skewX(-1deg);
  justify-content: center;
} */
    .sec1-highlightContainer1 span {
        rotate: 1deg;
        justify-content: center;
        align-self: center;
    }

.sec1-highlightContainer {
    display: inline-block;
    font-family: var(--font-family-primary);
    font-size: 3.7vw;
    line-height: 3.7vw;
    background-color: #e7ff25;
    padding: 0.5vw;
    rotate: -1deg;
    text-transform: uppercase;
}

    .sec1-highlightContainer span {
        display: inline-block;
        background-color: #e6ff2500;
        padding: 0.5vw;
        rotate: 1deg;
    }

    .sec1-highlightContainer:nth-child(2) {
        rotate: 1deg;
    }

        .sec1-highlightContainer:nth-child(2) span {
            rotate: -1deg;
        }

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

.appLinkChange {
    color: var(--color-black);
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: 1.4vw;
    font-weight: 600;
    border-radius: 0.5vw;
    transition: all 0.5s;
    cursor: pointer;
    text-align: center;
}

/* Right aligned start */
.animation-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 10vh;
    height: 10vh;
}

.button-wrapper {
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
    z-index: 1;
}

/* Button */
.playstore-btn,
.playstore-btn1 {
    width: 17vw;
    /* width: 19vw !important; */
    height: 5vw;
    background: transparent;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.icon {
    position: absolute;
    font-size: 26px;
    color: white;
    opacity: 0;
}

.appLinkChange span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

    .appLinkChange span:after {
        /* content: "\2197"; */
        content: "";
        background-image: url("../images/ArrowUpRight.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        font-size: 1.8vw;
        position: absolute;
        opacity: 0;
        top: 0;
        right: -2vw;
        transition: 0.5s;
        display: inline-block;
        width: 1.7vw;
        height: 1.7vw;
    }

.appLinkChange:hover span {
    padding-right: 2vw;
}

    .appLinkChange:hover span:after {
        opacity: 1;
        right: 0;
    }

.appLinkChange:hover {
    color: var(--third-color);
}

.appLink a:hover {
    color: var(--third-color);
}

.appLink a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-black);
    text-decoration: underline;
    width: 18vw;
}

.transition-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 3vw;
    width: 100%;
}

.appLink {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-family: var(--font-family-secondary);
    font-size: 1.5vw;
    /* gap: 2vw; */
    transform: translateY(-50%) translateX(-15px) scale(0.85);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    will-change: transform, opacity;
}

    .appLink div {
        width: 18vw;
    }

.floatingIcons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(-15px) scale(0.85);
    transition: all 5s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

    .floatingIcons img {
        width: 2vw;
        height: 2vw;
        padding: 1vw;
        background-color: var(--color-black);
        border-radius: 100%;
        margin: 0 0.5vw;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        transform: translateZ(0);
        will-change: transform, background-color;
        backface-visibility: hidden;
    }

        .floatingIcons img:hover {
            transform: scale(1.1);
            background-color: var(--third-color);
            box-shadow: 0 4px 12px rgba(255, 153, 51, 0.3);
        }

.main-stage {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Keeps content on the right */
    padding-right: 8%;
}

.text-row {
    display: flex;
    gap: 40px;
    z-index: 10;
}

.text-item {
    font-size: 1.5vw;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    letter-spacing: 1px;
    opacity: 1;
}

/* Icons start fixed in the same right-side position as the text */
    .icon-container {
        position: fixed;
        right: 8%;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 15px;
        z-index: 100;
        opacity: 0;
        pointer-events: none;
    }

    .store-icon {
        width: 3vw;
        height: 3vw;
        background: var(--color-black);
        padding: 0.5vw;
        border-radius: 10vw;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        border-width: 0.5vw;
    }

    .store-icon img {
        width: inherit;
        padding: 0.5vw;
    }

    .store-icon:hover {
        transform: scale(1);
        transition: all 0.3s;
        border: 0.5vw solid var(--primary-color);
    }

    .linkImg {
        align-self: center;
        width: 1.8vw;
        height: 1.8vw;
        opacity: 0;
        transform: translateY(-2px);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .appLink {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        font-family: var(--font-family-secondary);
        font-size: 1.3vw;
        gap: 0vw;
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 1;
        transform: translateX(0) scale(1);
        will-change: transform, opacity;
    }

    .appLink a:hover .linkImg {
        display: inline-block;
        align-self: center;
        opacity: 1;
        transform: translateY(0);
    }

.secH3 {
    font-family: var(--font-family-primary);
    font-size: 7.3vw;
    /* font-size: 100px; */
    line-height: 7vw;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -3px;
}

.section-2 {
    display: flex;
    flex-direction: column;
    padding: 0vh 4vw;
    padding-bottom: 25vh;
    margin-top: 39vh;
}

.section2Head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.section2Text p {
    font-family: var(--font-family-primary);
    font-size: 7vw;
    line-height: 7vw;
    letter-spacing: -3px;
    margin: 0;
}

.section2-para p {
    font-family: var(--font-family-secondary);
    font-size: 1.9vw;
    line-height: 2.9vw;
}

.gigCard {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 0.2vw solid var(--color-black);
    border-radius: 3vh;
    padding: 2vw;
    padding-right: 2vw;
    margin-top: 3vw;
}

.cardHead p {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 3.6vw; 
    line-height: 4vw;
}

.cardBottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .cardBottom div {
        display: flex;
        flex-direction: column;
    }

.cardBottomHead {
    margin: 0;
    /* margin-top: 4vh; */
    font-family: var(--font-family-primary);
    font-size: 3.6vw;
}

.cardBottomBody {
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 1.4vw;
}

.section-3 {
    display: flex;
    flex-direction: column;
    padding: 10vh 4vw;
    padding-top: 0vh;
    padding-bottom: 20vh;
}

.section3Card {
    border: 0.1vw solid var(--color-black);
    border-radius: 1vw;
    height: 60vh;
    margin-top: 7vh;
    overflow: hidden;
    position: relative;
}

/* 2. Physics Container (Medium Size) */
.physics-container {
    width: 100%;
    height: 60vh;
    max-width: 100%;
    margin-top: 2vw;
    position: relative;
    background: var(--secondary-color);
    border: 0.2vw solid var(--color-black);
    border-radius: 24px;
    overflow: hidden;
}

/* 3. The Tags (HTML Elements) */
.tag {
    display: inline-block;
    padding: 2vw 4vw;
    background-color: var(--color-black);
    color: var(--color-white);
    border: 0.1vw solid #000000;
    border-radius: 10vw;
    font-family: var(--font-family-secondary);
    font-size: 1.5vw;
    line-height: 1.5vw;
    font-weight: 400;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    visibility: hidden;
    will-change: transform;
}

.physics-container1 {
    width: 90vw;
    height: 60vh;
    max-width: 900px;
    margin: 0 auto;
    border: 2px solid #000000;
    border-radius: 24px;
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.tag1 {
    display: inline-block;
    padding: 2vw 4vw;
    background: #000000;
    border: 1px solid #000000;
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    white-space: nowrap;
    visibility: hidden;
    will-change: transform;
}

.section-4 {
    display: flex;
    flex-direction: column;
    padding: 10vh 0vw;
    padding-top: 0vh;
    padding-bottom: 20vh;
}

    .section-4 h3 {
        padding: 0vh 4vw;
    }

.carousel-container {
    overflow: hidden;
    /* margin-top: 10vh; */
    margin-top: 0vh;
    width: 100%;
}

.section4CardContainer {
    display: flex;
    flex-direction: row;
    /* width: calc(200%); */
    animation: scroll 10s linear infinite;
}

    .section4CardContainer:hover {
        cursor: pointer;
        animation-play-state: paused;
    }

.section4Card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    /* border: 0.1vw solid var(--color-black); */
    border-radius: 3vh;
    padding: 2vw;
    margin: 1vw;
    min-width: 38vw;
    transition: transform 0.3s ease;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.sec4Name {
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 1.4vw;
    font-weight: 500;
}

.sec4Job {
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 1.2vw;
    color: var(--color-black);
    opacity: 0.7;
}

.section4Head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

    .section4Head img {
        width: 4vw;
        height: 4vw;
        border-radius: 100%;
    }

.section4Dash {
    width: 24vw;
    height: 0.09vw;
    background-color: var(--primary-20);
    margin: 2vw 0;
    opacity: 0.5;
}

.section4Body p {
    margin: 0;
    /* margin-top: 5vh; */
    font-family: var(--font-family-secondary);
    font-size: 1.2vw;
    line-height: 2vw;
}

.section-5 {
    display: flex;
    flex-direction: column;
    padding: 10vh 4vw;
    padding-top: 0vh;
    padding-bottom: 25vh;
    /* padding-bottom: 0; */
    gap: 5vh;
}

.section5Points {
    display: flex;
    justify-content: flex-start;
    padding: 4vw 8vw;
    margin: 0;
    border-top: 0.2vw solid var(--color-black);
    font-family: var(--font-family-primary);
    font-size: 3.5vw;
    line-height: 4vw;
    text-transform: uppercase;
}

    .section5Points li {
        margin: 0;
    }

        .section5Points li::before {
            content: "";
            margin-left: -10px;
        }

.section-6 {
    display: flex;
    flex-direction: column;
    padding: 10vh 4vw;
    padding-top: 0vh;
    padding-bottom: 20vh;
}

.section6Container {
    /* margin-top: 5vh; */
    margin-top: 0vh;
    align-items: center;
}

.section6Card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5vh;
    background-color: var(--color-white);
    /* border: 0.2vw solid var(--color-black); */
    border-radius: 2vw;
}

.section6InnerContainer {
    display: flex;
    flex-direction: row;
    gap: 5vh;
}

.section6Card1 {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    margin-top: 5vh;
    background-color: var(--color-white);
    /* border: 0.2vw solid var(--color-black); */
    border-radius: 2vw;
}

.sec6Img {
    width: 48vw;
    height: auto;
}

.section6Text {
    padding: 1.5vw;
    /* padding-right: 0; */
}

.section6Text1 {
    position: relative;
    bottom: 8vh;
    padding: 0px 2vw;
    padding-right: 0;
}

.section6Text2 {
    padding: 2vw;
}

.section6Text3 {
    padding: 0px 2vw;
    padding-right: 0;
    justify-content: flex-end;
}

.sec6H4 {
    margin: 0;
    font-family: var(--font-family-primary);
    /* font-size: 3.7vw; */
    text-transform: uppercase;
    font-size: 3.6vw;
    font-weight: 500;
}

.sec6Txt {
    margin: 0;
    margin-top: 2vh;
    font-family: var(--font-family-secondary);
    /* font-size: 20px; */
    font-size: 1.5vw;
    line-height: 2vw;
    font-weight: 400;
}

.sec6Img1 {
    width: 46vw;
    height: auto;
}

.sec6Img2 {
    width: 35vw;
    height: auto;
}

.sec6Img3 {
    width: 846px;
    height: auto;
}

.sec6Img4 {
    content: url("../images/group4.png");
    width: 46vw;
    height: auto;
}

.section-7 {
    display: flex;
    margin-top: 10vw;
    margin-bottom: 0vw;
    padding: 10vh 4vw;
    padding-bottom: 25vh;
}

.section7Card {
    display: flex;
    flex-direction: row;
    border: 0.3vw solid var(--color-black);
    border-radius: 40px;
    position: relative;
    width: 100%;
    height: 70vh;
}

.sec7Img {
    /* flex: .4; */
    /* width: 45vw; */
    width: 43vw;
    height: auto;
}

    /* Target first image */
    .sec7Img img:nth-child(1) {
        position: absolute;
        top: -24vh;
        bottom: 0;
        left: 16vw;
        width: 30vw;
        height: auto;
    }

    /* Target second image */
    .sec7Img img:nth-child(2) {
        position: absolute;
        top: -24vh;
        bottom: 0;
        left: 0vw;
        width: 30vw;
        height: auto;
    }

[data-aos="custom-slide-right"] {
    opacity: 0;
    transform: translateX(-100px) rotate(10deg);
    transition-property: transform, opacity;
}

    [data-aos="custom-slide-right"].aos-animate {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }

[data-aos="custom-slide-left"] {
    opacity: 0;
    transform: translateX(100px) rotate(-10deg);
    transition-property: transform, opacity;
}

    [data-aos="custom-slide-left"].aos-animate {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }

.section7Text {
    display: flex;
    flex-direction: column;
    width: 45vw;
    justify-content: center;
    align-items: flex-start;
}

.sec7H4 {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 6.9vw;
    line-height: 6vw;
    font-weight: 500;
    text-transform: uppercase;
}

.sec7img1 {
    width: 12vw;
    height: auto;
}

.sec7app {
    display: flex;
    flex-direction: row;
    gap: 2vw;
    margin-top: 2vw;
}

.section-8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    padding: 15vh;
    padding: 10vh 4vw;
    padding-top: 0;
    padding-bottom: 0vh;
    /* gap: 5vh; */
}

    .section-8 p,
    h3 {
        text-align: left;
    }

.sec8body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-white);
    /* border: 0.1vw solid var(--color-black); */
    border-radius: 2vw;
    padding: 2vw;
    margin: 3vw 0vw 2vw 0vw;
}

    .sec8body div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        gap: 2vw;
    }

    .sec8body input {
        width: 40vw;
        height: 5vh;
        padding: 1.2vw 0vw;
        font-family: var(--font-family-secondary);
        /* font-size: 1.4vw; */
        font-size: 1.9vw;
        font-weight: 400;
        border: 0vw;
        border-bottom: 0.1vw solid var(--color-black);
        border-radius: 0vw;
        margin-top: 2vh;
        outline: none;
    }

    /* .sec8body input::placeholder {
  color: var(--color-black);
  opacity: 1;
  padding: 0vw 0vw;
} */

    .sec8body textarea {
        /* width: 75vw; */
        width: 100%;
        /* width: 40vw; */
        height: 10vh;
        padding: 1.2vw 0vw;
        font-family: var(--font-family-secondary);
        /* font-size: 1.4vw; */
        font-size: 1.9vw;
        font-weight: 400;
        border: 0vw;
        border-bottom: 0.1vw solid var(--color-black);
        border-radius: 0vw;
        margin: 0vw 2vw;
        margin-top: 4.2vw;
        outline: none;
        resize: none;
    }

#feedbackformSuccessSection,
#feedbackformErrorSection {
    display: none;
}

    .input-wrapper-required {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .input-wrapper-required::after {
        content: "*";
        color: red;
        position: absolute;
        left: calc(3.6ch + 1.5vw);
        top: 60%;
        transform: translateY(-50%);
        pointer-events: none;
        font-family: var(--font-family-secondary);
        font-size: 2vw;
        opacity: 0.5;
    }

    .input-wrapper-required.has-value::after {
        display: none;
    }

    .input-wrapper-required input:not(:placeholder-shown) + .input-wrapper-required::after,
    .input-wrapper-required input:focus:not(:placeholder-shown)::after {
        display: none;
    }

    .input-wrapper-required:has(textarea)::after {
        content: "*";
        color: red;
        position: absolute;
        left: calc(14ch + 2.5vw);
        top: calc(4.5vw + 2.2vw);
        pointer-events: none;
        font-family: var(--font-family-secondary);
        font-size: 2vw;
    }

    .input-wrapper-required textarea:not(:placeholder-shown) ~ .input-wrapper-required::after {
        display: none;
    }

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: antiquewhite !important;
    color: fieldtext !important;
}

.sec8body img {
    align-self: center;
    width: 1.5vw;
    height: auto;
}

.secBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw 3vw;
    margin: 0vw;
    margin-top: 5vw;
    font-family: var(--font-family-secondary);
    font-size: 1.4vw;
    color: var(--color-white);
    background-color: var(--color-black);
    border: none;
    border-radius: 0.5vw;
    text-decoration: none;
    cursor: pointer;
    gap: 1vw;
}

.button {
    border-radius: 4px;
    background-color: var(--color-black);
    border: none;
    color: #ffffff;
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: 1.4vw;
    padding: 1vw 3vw;
    border-radius: 0.5vw;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .button span:after {
            /* content: "\2197"; */
            content: "";
            background-image: url("../images/whiteArrowUpRight.svg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            font-size: 1.8vw;
            position: absolute;
            opacity: 0;
            top: 0;
            right: -2vw;
            transition: 0.5s;
            display: inline-block;
            width: 1.7vw;
            height: 1.7vw;
        }

    .button:hover span {
        padding-right: 2vw;
    }

        .button:hover span:after {
            opacity: 1;
            right: 0;
        }

.shareFeebackBtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 1vw 0vw;
    /* padding: 1vw 3vw; */
}

    .shareFeebackBtn .cta1 {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        cursor: pointer;
        color: var(--color-white);
        background-color: var(--color-black);
        padding: 1vw 3vw;
        border-radius: 0.5vw;
        overflow: visible;
        border-width: 0;
    }

    .shareFeebackBtn p {
        margin: 0;
        font-family: var(--font-family-secondary);
        font-size: 1.4vw;
        line-height: 1.4vw;
        transition: transform 500ms ease;
    }

    .shareFeebackBtn .cta1 span {
        display: inline-block;
        transition: transform 200ms ease;
    }

    /* arrow */
    .shareFeebackBtn .cta1::after {
        content: "";
        position: absolute;
        /* right: 1vw;
    width: 1.8vw;
    height: 1.8vw; */
        right: 2vw;
        width: 1.6vw;
        height: 1.6vw;
        background-image: url("../images/whiteArrowUpRight.svg");
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0;
        transform: translateX(6px);
        transition: opacity 400ms ease, transform 400ms ease;
        pointer-events: none;
    }

    /* on hover: show arrow and move only the text */
    .shareFeebackBtn .cta1:hover p {
        transition: transform 200ms ease;
        transform: translateX(-10px);
    }

    .shareFeebackBtn .cta1:hover::after {
        opacity: 1;
        transform: translateX(0);
    }

.sec8Success {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    padding: 5vw;
}

    .sec8Success img {
        width: 8vw;
        height: auto;
    }

    .sec8Success h4 {
        margin: 0;
        font-family: var(--font-family-primary);
        font-size: 5vw;
        line-height: 2vw;
        text-transform: uppercase;
    }

    .sec8Success p {
        margin: 0;
        font-family: var(--font-family-secondary);
        font-size: 1.8vw;
        line-height: 2.5vw;
        text-align: center;
    }

.section-9 {
    display: flex;
    flex-direction: column;
    padding: 10vh 4vw;
    padding-top: 0vh;
    padding-bottom: 25vh;
}

.sec9bottom {
    display: flex;
    flex-direction: row;
    /* gap: 5vw; */
    margin-top: 10vh;
}

.sec9mainblog {
    display: flex;
    flex-direction: column;
    padding-right: 3vw;
}

.sec9MainImgContainer {
    width: 40vw;
    height: 25vw;
    border-radius: 1vw;
    margin-right: 4vh;
    margin-bottom: 1vw;
    overflow: hidden;
    border-radius: 1vw;
}

    .sec9MainImgContainer img {
        width: 50vw;
        height: auto;
        border-radius: 1vw;
        margin-bottom: 4vh;
        object-fit: fill;
        transition: transform 0.3s ease;
    }

    .sec9MainImgContainer:hover img {
        transform: scale(1.1);
        cursor: pointer;
    }

.sec9ImgContainer {
    width: 15vw;
    height: 10vw;
    border-radius: 1vw;
    margin-right: 4vh;
    overflow: hidden;
    border-radius: 1vw;
}

    .sec9ImgContainer img {
        width: 15vw;
        height: 10vw;
        border-radius: 1vw;
        margin-right: 4vh;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .sec9ImgContainer:hover img {
        transform: scale(1.1);
        cursor: pointer;
    }

    .sec9blog-title {
        margin: 0;
        margin-bottom: 2vh;
        color: var(--color-black);
        text-decoration: none;
        transition: all 0.3s;
    }

    a.sec9blog-title:hover {
        transform: scale(1.04);
        transition: all 0.3s;
    }
    .sec9blog-title h4 {
        font-family: var(--font-family-secondary);
        font-size: 2.5vw;
        line-height: 3vw;
        font-weight: 400;
    }

.sec9blog-decs {
    font-family: var(--font-family-secondary);
    font-size: 1.4vw;
    line-height: 2vw;
    margin: 0;
    width: 42vw;
}

.sec9blogs {
    display: flex;
    flex-direction: row;
    margin-bottom: 5vh;
}

    .sec9blogs div {
        display: flex;
        flex-direction: column;
    }

.sec9minRead {
    font-family: var(--font-family-secondary);
    font-size: 1.3vw;
    line-height: 3vw;
    font-weight: bold;
    color: var(--color-black-40);
}

.section-10 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* padding: 10vh 4vw; */
    padding: 0vh 4vw;
    padding-bottom: 25vh;
}

.section10arrow {
    display: flex;
    justify-content: space-between;
    padding: 1.6vw 2vw;
    margin: 0;
    /* border-top: 0.2vw solid var(--color-black); */
    font-family: var(--font-family-primary);
    font-size: 3.5vw;
    line-height: 4vw;
    text-transform: uppercase;
}

.accordion-item {
    border-bottom: 0.2vw solid var(--color-black);
}

    .accordion-item:first-child .section10arrow {
        border-top: 0.2vw solid var(--color-black);
    }

.accordion-header {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* .accordion-header:hover {
  background-color: rgba(255, 153, 51, 0.1);
} */

.accordion-arrow {
    width: 1.3vw;
    transition: transform 0.3s ease;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-family: var(--font-family-secondary);
    font-size: 1.5vw;
    line-height: 2vw;
}

    .accordion-content p {
        padding: 0 2vw 2vw 2vw;
        margin: 0;
    }

.section10arrow li {
    margin: 0;
    list-style-type: none;
    /* margin-top: 5vh; */
}

.sec10Head {
    width: 30vw;
}

.sec10Body {
    width: 50vw;
    /* margin-top: 5vw; */
}

.section-11 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0vw;
    margin-top: 1vw;
    /* margin-bottom: 2vw; */
    overflow: clip;
    position: relative;
}

.footerLogo {
    /* width: 15vw; */
    /* width: 331px; */
    width: 24.2vw;
    height: auto;
    /* margin-top: 3vw; */
    margin-top: 10vw;
}

.verticalLine {
    width: 0.15vw;
    height: 2vw;
    background-color: var(--color-black);
    margin: 0 1vw;
}

.footBgImage {
    display: flex;
    position: absolute;
    background-image: url(../images/spotBG.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 50vw;
    margin-top: 0vw;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    z-index: -1;
}

.sec11Links {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 1vw;
    margin: 5vw 0vw;
    margin-top: 0;
}

    .sec11Links div {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        gap: 0vw;
    }

    .sec11Links a {
        font-family: var(--font-family-secondary);
        font-size: 2vw;
        color: var(--color-black);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.5s ease-in-out;
    }

        .sec11Links a:hover {
            color: var(--third-color);
            transition: all 0.5s ease-in-out;
        }

    .sec11Links img {
        width: 2.5vw;
        height: auto;
        margin: 1vw 0.5vw;
        /* border: .1vw solid var(--color-black); */
        border-radius: 30vw;
        padding: 0.8vw;
        margin: 0.3vw;
        /* background-color: var(--color-white); */
        /* transition: all 0.5s ease-in-out; */
        /* box-shadow: 0 0vw 1vw rgba(0, 0, 0, 0.5); */
        transition: all 0.5s;
    }

        .sec11Links img:hover {
            background-color: var(--third-color);
            /* border: .1vw solid var(--third-color); */
            /* transition: all 0.5s ease-in-out; */
            transition: all 0.5s;
            transform: scale(1.08);
            background-color: var(--third-color);
            /* box-shadow: 0 0vw 1vw rgb(255, 153, 51); */
        }

.dividerLine {
    width: 100%;
    height: 0.01vw;
    opacity: 0.2;
    background-color: var(--color-black);
}

.container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

a.norris {
    text-decoration: none;
    font-weight: bolder;
    display: flex;
    overflow: hidden;
    text-transform: uppercase;
    cursor: pointer;
}

/* Container for each individual character */
.char-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

    /* The two layers of text (top and bottom) */
    .char-container span {
        display: block;
        height: 2vw;
        pointer-events: none;
    }

/* Color of the text that slides in from below */
.char-bottom {
    color: var(--third-color);
}

/* The container for text reveals */
.text-mask {
    overflow: hidden;
    display: block;
}
.text-black{
    color:var(--color-black);
}
.text-white{
    color:var(--color-white);
}
.overlayloaderdiv{
    position:absolute;
    width:max-content;
    margin:auto;
    justify-items:center;
    align-self:center;
    
}

.loader {
    --block-size:4vw;
    --loader-size: calc(var(--block-size) / 2);
    --loader-size-half: calc(var(--loader-size) / 2);
    --loader-size-half-neg: calc(var(--loader-size-half) * -1);
    --light-color: rgba(255, 255, 255, 0.3);
    --dot-size: 10px;
    --dot-size-half: calc(var(--dot-size) / 2);
    --dot-size-half-neg: calc(var(--dot-size-half) * -1);
    display: block;
    position: relative;
    width: var(--loader-size);
    display: grid;
    place-items: center;
    color: white;
}


    .loader::before,
    .loader::after {
        content: '';
        position: absolute;
    }

/**
	loader--2
**/
.loader--2 {
    --loader-size: calc(var(--block-size) / 3);
    --anim-duration: 1s;
    height: 1px;
    background-color: var(--light-color);
}

    .loader--2::before,
    .loader--2::after {
        width: var(--dot-size);
        aspect-ratio: 1 / 1;
        background: currentColor;
        border-radius: 50%;
        top: calc(var(--dot-size-half-neg) + 1px);
        left: var(--dot-size-half-neg);
        animation: loader-2 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
    }

    .loader--2::after {
        animation-delay: calc(var(--anim-duration) / 3 * -1)
    }

@keyframes loader-2 {
    0%, 100% {
        transform: none;
    }

    44% {
        transform: translateX(calc(var(--loader-size) + var(--dot-size-half)));
    }
}

[data-gsap="slide-down"],
[data-gsap="slide-up"] {
    opacity: 0;
    transform: translateY(30px);
}

/* terms and conditions */
.termLogoSection {
    display: flex;
    flex-direction: column;
    padding: 0vw 4vw;
}

.logo-terms {
    content: "";
    font-family: var(--font-family-primary);
    width: 25vw;
    font-size: 8vw;
    color: var(--color-black);
    text-decoration: none;
    text-transform: uppercase;
    margin: 2vw 0vw;
}

.dividerLine-terms {
    width: 100%;
    height: 0.1vw;
    /* opacity: 0.2; */
    background-color: var(--color-black);
}

.HeadSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2vw 4vw;
    gap: 2vw;
}

.termTitle {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 7.5vw;
    line-height: 7vw;
    font-weight: bold;
    color: var(--color-black);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0px;
}

.termDate {
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 1.5vw;
    line-height: 1.5vw;
    color: var(--color-black);
    text-align: center;
}

.termDesc {
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 1.5vw;
    line-height: 2vw;
    color: var(--primary-60);
    text-align: center;
    padding: 0 9vw;
}

.termsContentSection {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2vw 4vw;
}

.contentSection {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    width: 50vw;
}

.contentPoints {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    scroll-margin-top: 10vw;
}

.contentSection h2 {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 5.1vh;
    line-height: 6vw;
    font-weight: bold;
    color: var(--color-black);
}

.contentSection ul {
    margin: 0;
    width: 50vw;
}

.contentSection p {
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 1.5vw;
    line-height: 2vw;
    color: var(--color-black);
    /* width: 60vw; */
}

.contentSection li {
    margin: 0;
    margin-left: 3vw;
    font-family: var(--font-family-secondary);
    font-size: 1.4vw;
    line-height: 2vw;
    color: var(--color-black);
}

.contentTable {
    /* margin-left: 5vw; */
    height: fit-content;
    /* max-height: 80vh; */
    overflow-y: auto;
    border: 0.1vw solid var(--color-black);
    border-radius: 1vw;
    padding: 1vw 2vw;
    position: sticky;
    top: 2vh;
}

    .contentTable h2 {
        margin: 0;
        margin-bottom: 2vw;
        font-family: var(--font-family-primary);
        font-size: 2.5vw;
        line-height: 3vw;
        color: var(--color-black);
        /* letter-spacing: -0.2vw; */
    }

    .contentTable a {
        font-family: var(--font-family-secondary);
        font-size: 1.2vw;
        line-height: 2vw;
        text-decoration: none;
        color: var(--primary-60);
        display: block;
        transition: color 0.3s ease;
        width: 25vw;
        margin: 0.5vw 0;
    }

        .contentTable a:hover {
            color: var(--color-black);
        }

        .contentTable a:active {
            color: var(--color-black);
            font-weight: bold;
        }

.g-recaptcha {
    /* margin: 2vw 58vw 0vw 0vw; */
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

.footerApp {
    display: none !important;
}

    .footerApp:hover {
        background-color: transparent;
    }

/* terms and Condition css */
.TCmainContainer {
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

/* 404.html page css */
.container404 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--color-white);
    overflow: clip;
}

.logo404 {
    width: 25vw;
    margin-bottom: 2vw;
}

.backgroundText404 {
    position: absolute;
    font-size: 19vw;
    font-family: var(--font-family-primary);
    color: #e0e0e0;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    z-index: -1;
    user-select: none;
    text-align: center;
}

.container404Inner {
    display: flex;
    flex-direction: column;
    gap: 5vw;
    text-align: center;
    justify-content: center;
    align-items: center;
}

    .container404Inner h1 {
        font-size: 10vw;
        font-family: var(--font-family-secondary);
        color: var(--color-black);
        margin: 0;
    }

    .container404Inner p {
        font-size: 2vw;
        color: #000000;
        font-family: var(--font-family-secondary);
        font-weight: bold;
    }

    .container404Inner .shareFeebackBtn p {
        font-size: 1.2vw;
        font-family: var(--font-family-secondary);
        color: #ffffff;
        font-weight: 500;
    }

/* Blog.html page css */
.blogBodyContainer {
    display: flex;
    flex-direction: column;
    /* padding: 0vh 3.5vw; */
}

.blogHeader {
    display: flex;
    flex-direction: column;
    padding: 3vh 3.5vw;
    margin-bottom: 2vw;
}

.blogPageTitle {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 9vw;
    line-height: 9vw;
    font-weight: 600;
    color: var(--color-black);
    text-transform: uppercase;
}

.blogBreadcrum {
    display: flex;
    flex-direction: row;
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 1.3vw;
    line-height: 2vw;
    font-weight: 500;
    color: var(--primary-50);
}

    .blogBreadcrum p:nth-child(2) {
        color: var(--color-black);
        font-weight: 600;
    }

.blogContainer {
    display: flex;
    flex-direction: column;
    padding: 0vh 3.5vw;
}

.blogCard {
    display: flex;
    flex-direction: row;
    gap: 1vw;
    padding: 4vw 0;
    border-bottom: 2px solid black;
}

    .blogCard:nth-child(1) {
        border-top: 2px solid black;
    }

.blogCardImg {
    width: 100%;
    height: 20vw;
    border-radius: 1.5vw;
}

    .blogCardImg img {
        width: 33vw;
        height: 20vw;
        border-radius: 1.5vw;
        transition: transform 0.3s ease;
    }

    .blogCardImg:hover img {
        transform: scale(1.1);
    }

.blogCardPart2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0.5vw 0;
}

.blogCardDateRead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .blogCardDateRead p {
        margin: 0;
        font-family: var(--font-family-secondary);
        font-size: 1.3vw;
        line-height: 2vw;
        color: var(--color-black);
    }

.blogCardContent {
    display: flex;
    flex-direction: column;
}

    .blogCardContent a {
        text-decoration: none;
    }

    .blogCardContent h2 {
        margin: 0;
        font-family: var(--font-family-secondary);
        font-size: 2.5vw;
        line-height: 3.5vw;
        color: var(--color-black);
        letter-spacing: -0.1vw;
    }

    .blogCardContent p {
        margin: 0;
        margin-top: 1vh;
        font-family: var(--font-family-secondary);
        font-size: 1.5vw;
        line-height: 2vw;
        color: var(--color-black);
    }

.readMoreBtn {
    color: var(--color-black);
    font-family: var(--font-family-secondary);
    font-size: 1.3vw;
    border-radius: 0.5vw;
    transition: all 0.5s;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

    .readMoreBtn span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
        padding-bottom: 5px;
    }

        .readMoreBtn span::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 77%;
            height: 0.1vw;
            background-color: currentColor;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s ease;
        }

        .readMoreBtn span:after {
            content: "";
            background-image: url("../images/ArrowBlackRight.svg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: 60%;
            transform: translateY(-60%);
            right: -2.5vw;
            opacity: 1;
            transition: 0.5s;
            display: inline-block;
            width: 2.2vw;
            height: 2.2vw;
        }

    .readMoreBtn:hover span {
        padding-right: 2vw;
    }

        .readMoreBtn:hover span::before {
            transform: scaleX(1);
        }

        .readMoreBtn:hover span:after {
            opacity: 1;
            top: 50%;
            right: -0.5vw;
            transform: translateY(-50%) rotate(-45deg);
        }

/* BlogDetail css */
.blogDetailContainer {
    display: flex;
    flex-direction: column;
}

.blogDetailHead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 3vw;
    margin: 3.5vw;
    border-bottom: 0.1vw solid var(--color-black);
}

.blogDetailLogo img {
    width: 13vw;
    height: auto;
}

.blogDetailBreadcrum {
    display: flex;
    flex-direction: row;
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 1.4vw;
    line-height: 2vw;
    font-weight: 500;
    color: var(--primary-50);
}

    .blogDetailBreadcrum p:nth-child(2) {
        color: var(--color-black);
        font-weight: 600;
    }

.blogDetailContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0vh 3.5vw;
}

.blogDetailDateRead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5vw;
}

    .blogDetailDateRead span {
        font-size: 1vw;
        line-height: 1vw;
    }

    .blogDetailDateRead p {
        margin: 0;
        font-family: var(--font-family-secondary);
        font-size: 1.4vw;
        line-height: 2vw;
        font-weight: bold;
        /* color: var(--color-black); */
        color: black;
    }

.blogDetailTitle {
    margin: 0vw 0;
    font-family: var(--font-family-primary);
    font-size: 3.5vw;
    line-height: 9vw;
    color: var(--color-black);
    text-align: center;
    letter-spacing: 0.1vw;
}

.blogDetailImg {
    margin: 3.5vw 0;
    width: 100%;
    height: 100%;
    align-self: center;
}

    .blogDetailImg img {
        width: inherit;
        height: 40vw;
        border-radius: 1.5vw;
        object-fit: cover;
    }

.blogDetail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    padding: 0 23vw;
    gap: 2vw;
}

    .blogDetail h2 {
        margin: 0;
        font-family: var(--font-family-primary);
        font-size: 3.5vw;
        line-height: 4.5vw;
        color: var(--color-black);
        text-align: left;
    }

    .blogDetail p {
        margin: 0;
        font-family: var(--font-family-secondary);
        font-size: 1.5vw;
        line-height: 2vw;
        color: var(--color-black);
    }

.interProp {
    margin-top: 3vw;
    font-family: var(--font-family-secondary);
    /* font-size: 18px; */
    font-size: 1.32vw;
    line-height: 2vw;
    font-style: italic;
    color: rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 1024px) {
    .section-2 {
        padding: 0vh 4vw;
    }

    .section6InnerContainer {
        gap: 2vh;
        flex-direction: column;
    }

    .section6Card {
        margin-top: 2vh;
    }

    .section6Card1 {
        margin-top: 2vh;
    }

    .section6Text1 {
        bottom: 0vh;
    }

    .sec7Img {
        width: 44vw;
    }

        .sec7Img img:nth-child(1) {
            top: -12vh;
        }

        .sec7Img img:nth-child(2) {
            top: -12vh;
        }

    .shareFeebackBtn .cta1 {
        padding: 2vw 4vw;
        border-radius: 2vw;
    }

    .shareFeebackBtn p {
        font-size: 1.8vw;
        line-height: 2.5vw;
        transition: transform 200ms ease;
        transform: translateX(-10px);
    }

    .shareFeebackBtn .cta1::after {
        right: 2vw;
        width: 2.3vw;
        height: 2.3vw;
        opacity: 1;
        transform: translateX(0);
    }
}

/* Tablet - 1024px */
@media screen and (max-width: 1024px) {
    .BGimage {
        display: flex;
        position: absolute;
        width: 176vw;
        height: 127vw;
        rotate: 0deg;
    }

    .logo {
        background-image: url("/images/mlogo.svg");
        width: 50vw;
        height: 30vw;
        margin-top: 30vw;
        padding: 0vh 0vw;
        padding-bottom: 5vh;
    }

    .floatingIcons img {
        width: 10vw;
        height: 10vw;
        padding: 2vw;
        margin: 0 1vw;
    }

    .section-1 {
        gap: 0vh;
        padding: 6vh 6vw;
    }

    .orangeDash {
        width: 5vw;
        height: 0.8vw;
    }

    .sectionDesc {
        font-size: 4vw;
        line-height: 6vw;
    }

        .sectionDesc p {
            padding: 0px 6vw;
        }

    .word-wrapper {
        height: 5vh;
    }

    .flipingTxtContainer {
        flex-direction: column;
    }

    /* ========highlightContainer for other non animated text=========== */
    .sec1-highlightContainer1 {
        display: inline-block;
        font-family: var(--font-family-primary);
        background-color: #e7ff25;
        padding: 0 12vw;
        rotate: -1deg;
        text-transform: uppercase;
    }

        .sec1-highlightContainer1 span {
            font-family: var(--font-family-primary);
            font-size: 7.1vw;
            line-height: 8.1vw;
            rotate: 1deg;
        }

    .sec1-highlightContainer {
        display: inline-block;
        font-family: var(--font-family-secondary);
        font-size: 3.7vw;
        line-height: 3.7vw;
        background-color: transparent;
        padding: 0.5vw;
        rotate: -1deg;
        text-transform: uppercase;
    }

        .sec1-highlightContainer span {
            display: inline-block;
            background-color: #e6ff2500;
            padding: 1px;
            rotate: 1deg;
        }

        .sec1-highlightContainer:nth-child(1) {
            rotate: -1deg;
            font-size: 4vw;
            line-height: 4vw;
            font-weight: bold;
        }

        .sec1-highlightContainer:nth-child(2) span {
            font-family: var(--font-family-secondary);
            font-size: 4vw;
            line-height: 4vw;
            rotate: -1deg;
            text-transform: lowercase;
        }

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

    .transition-container {
        min-height: 8vw;
    }

    .playstore-btn,
    .playstore-btn1 {
        width: 34vw;
        height: 5vw;
    }

    .appLink {
        flex-direction: row;
        align-items: flex-end;
        /* font-size: 3.5vw; */
        font-size: 4vw;
        /* gap: 4vw; */
    }

        .appLink a {
            width: 100%;
        }

        .appLink div {
            width: 30vw;
        }

    .appLinkChange {
        font-size: 2.5vw;
        gap: 4vw;
    }

        .appLinkChange span:after {
            width: 2.7vw;
            height: 2.7vw;
        }

        .appLinkChange:hover span:after {
            right: -1vw;
        }

    .linkImg {
        width: 2.5vw;
        height: 2.5vw;
    }

    .icon-container {
        flex-direction: row;
        bottom: 5vw !important;
    }

    .store-icon {
        /* width: 5vw;
    height: 5vw; */

        width: 9vw;
        height: 9vw;
    }

        .store-icon img {
            width: inherit;
            padding: 1.5vw;
        }

    /* .floatingIcons img {
    width: 3vw;
    height: 3vw;
    padding: 1.5vw;
    margin: 0 0.5vw;
  } */

    .section-2,
    .section-3,
    .section-5,
    .section-6 {
        padding: 8vh 3vw;
    }

    .cardSec2Container {
        margin-top: 2vh;
    }

    .cardBottom div {
        gap: 1vw;
    }

    .section-4 {
        padding: 8vh 0vw;
    }

        .section-4 h3 {
            padding: 0vh 3vw;
        }

    .secH3 {
        font-size: 10.5vw;
        line-height: 10vw;
    }

    .section-2 {
        /* margin-top: 0vh; */
        margin-top: 8vh;
    }

    .section2Text p {
        /* font-size: 15vw;
    line-height: 15vw; */

        font-size: 11vw;
        line-height: 11vw;
        letter-spacing: -3px;
    }

    .section2-para p {
        font-size: 2.5vw;
        line-height: 3.5vw;
    }

    .tag {
        padding: 3vw 3vw;
        font-size: 2.5vw;
        line-height: 3vw;
        border-radius: 25vw;
    }

    .gigCard {
        padding: 4vw;
        margin-top: 5vw;
    }

    .cardHead p {
        font-size: 7vw;
        line-height: 7vw;
    }

    .cardBottom {
        flex-direction: column;
    }

    .cardBottomHead {
        font-size: 7vw;
    }

    .cardBottomBody {
        font-size: 3.2vw;
    }

    .carousel-container {
        margin-top: 5vh;
    }

    .section4CardContainer {
        animation-duration: 10s;
    }

        .section4CardContainer:hover {
            animation-play-state: running;
        }

    .section4Card {
        margin: 2vw;
        padding: 4vw;
        min-width: 55vw;
    }

    .section4Head img {
        width: 8vw;
        height: 8vw;
    }

    .sec4Name {
        font-size: 2.5vw;
    }

    .sec4Job {
        font-size: 2.2vw;
    }

    .section4Body p {
        font-size: 2.2vw;
        line-height: 3vw;
    }

    .section5Points {
        font-size: 6vw;
        line-height: 6vw;
        padding: 4vw 6vw;
    }

    .section6Card {
        flex-direction: column-reverse;
    }

    .section6InnerContainer {
        flex-direction: column;
        gap: 0vh;
    }

    .sec6Img,
    .sec6Img1,
    .sec6Img2,
    .sec6Img3,
    .sec6Img4 {
        width: 90vw;
    }

    .sec6Img4 {
        content: url("../images/group6.png");
    }

    .sec6H4 {
        font-size: 6vw;
    }

    .sec6Txt {
        font-size: 2.8vw;
        line-height: 3.5vw;
        margin: 2vh 0px;
    }

    .secBtn {
        font-size: 2vw;
        padding: 1vw 2vw;
    }

    .section-7 {
        margin-top: 30vw;
    }

    .section7Card {
        flex-direction: column;
        height: auto;
        padding: 4vw;
    }

    .sec7Img {
        display: flex;
        width: 65vw;
        margin-bottom: 4vh;
        flex-direction: row;
    }

        .sec7Img img {
            position: static;
            margin-top: -40vw;
            width: 100%;
        }

            /* Target first image */
            .sec7Img img:nth-child(1) {
                position: relative;
                top: 0vh;
                bottom: 0;
                /* left: 35vw; */
                left: 28vw;
                width: 100%;
                height: auto;
            }

            /* Target second image */
            .sec7Img img:nth-child(2) {
                position: relative;
                top: 0vh;
                bottom: 0;
                /* left: 20vw; */
                left: -73vw;
                /* width: 100%;
    height: auto; */
                width: 66vw;
                height: 75vh;
            }

    .section7Text {
        width: 100%;
    }

    .sec7H4 {
        font-size: 9.1vw;
        line-height: 9vw;
    }

    .sec7img1 {
        width: 20vw;
    }

    .section-8 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .sec8body {
        width: 90vw;
    }

        .sec8body div {
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 2vw;
        }

        .sec8body input {
            width: 80vw;
            font-size: 3.5vw;
        }

        .sec8body textarea {
            width: 80vw;
            margin: 0;
            margin-top: 8vw;
            font-size: 3.5vw;
        }

    .input-wrapper-required::after {
        left: calc(5.6ch + 1.5vw);
        top: 60%;
    }

    .input-wrapper-required:has(textarea)::after {
        top: calc(7vh + 2.2vw);
        left: calc(23ch + 2.5vw);
    }

    .shareFeebackBtn .cta1 {
        padding: 2vw 4vw;
        border-radius: 2vw;
    }

    .shareFeebackBtn p {
        font-size: 2.5vw;
        line-height: 3vw;
        transition: transform 200ms ease;
        transform: translateX(-10px);
    }

    .shareFeebackBtn .cta1::after {
        right: 2vw;
        width: 2.6vw;
        height: 2.6vw;
        opacity: 1;
        transform: translateX(0);
    }

    .section-9 {
        padding-bottom: 0vh;
    }

    .sec9bottom {
        flex-direction: column;
        margin-top: 0vh;
    }

    .sec9mainblog {
        padding-right: 0;
        margin-bottom: 5vh;
    }

    .sec9MainImgContainer {
        width: 91vw;
        height: 53vw;
    }

        .sec9MainImgContainer img {
            width: 88vw;
            height: auto;
        }

    .sec9ImgContainer {
        width: 23vw;
        height: 16vw;
    }

        .sec9ImgContainer img {
            width: inherit;
            height: inherit;
        }

    .sec9blogs div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .sec9img {
        width: 88vw;
    }

    .sec9blog-title {
        font-size: 5vw;
        line-height: 4.5vw;
    }

        .sec9blog-title h4 {
            /* font-size: 5.5vw;
    line-height: 6vw; */
            font-size: 4.5vw;
            line-height: 5vw;
        }

    .sec9blog-decs {
        width: 88vw;
        font-size: 2.5vw;
        line-height: 2.8vw;
    }

    .sec9img1 {
        width: 25vw;
        height: 15vw;
    }

    .sec9minRead {
        font-size: 2.5vw;
    }

    .accordion-content {
        font-size: 3.5vw;
        /* line-height: 5vw; */
        line-height: 4vw;
    }

        .accordion-content p {
            margin: 2vw 0vw;
        }

    .section-10 {
        flex-direction: column;
        padding-bottom: 10vh;
    }

    .sec10Head,
    .sec10Body {
        width: 100%;
        margin-top: 5vw;
    }

    .accordion-arrow {
        width: 2vw;
    }

    .section10arrow {
        font-size: 5vw;
        line-height: 5vw;
        padding: 3vw;
    }

    .dividerLine {
        height: 0.04vw;
    }

    .footBgImage {
        width: 100vw;
        height: 60vw;
        margin-top: -5vw;
    }

    .footerLogo {
        width: 30vw;
    }

    .sec11Links {
        margin: 5vw 0vw 20vw 0vw;
    }

        .sec11Links img {
            width: 3.4vw;
            height: auto;
            margin: 0.4vw;
        }

        .sec11Links a {
            font-size: 2.4vw;
        }

    .logo-terms {
        font-size: 15vw;
    }

    .HeadSection {
        padding: 6vw 4vw;
        gap: 4vw;
    }

    .termTitle {
        font-size: 7vw;
    }

    .termDate {
        font-size: 3.5vw;
        line-height: 4vw;
    }

    .termDesc {
        font-size: 3.5vw;
        line-height: 5vw;
        padding: 0 8vw;
    }

    .termLogoSection {
        padding: 3vw 4vw;
    }

    .termsContentSection {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .contentSection {
        width: 100%;
        gap: 5vw;
    }

        .contentSection h2 {
            font-size: 5vw;
            line-height: 6vw;
        }

        .contentSection ul {
            width: 80vw;
            padding: 0 8vw;
        }

        .contentSection li {
            font-size: 4vw;
            line-height: 6vw;
        }

        .contentSection p {
            font-size: 4vw;
            line-height: 5vw;
        }

    .contentTable {
        display: none;
    }

    /* Blog page css */

    .blogPageTitle {
        font-size: 17vw;
        line-height: 17vw;
    }

    .blogBreadcrum {
        font-size: 3.5vw;
        line-height: 4vw;
    }

    .blogCard {
        flex-direction: column;
        gap: 2vw;
        padding: 9vh 4vw;
    }

    .blogCardPart2 {
        gap: 4vw;
    }

    .blogCardImg {
        width: 100%;
        height: 100%;
        border-radius: 2vw;
    }

    .blogCardImg-Inner {
        height: inherit;
    }

    .blogCardImg img {
        width: -webkit-fill-available;
        height: inherit;
        border-radius: 2vw;
        object-fit: fill;
    }

    .blogCardDateRead p {
        font-size: 2vw;
        line-height: 2vw;
    }

    .blogCardContent h2 {
        font-size: 8vw;
        line-height: 8.5vw;
    }

    .blogCardContent p {
        font-size: 2.8vw;
        line-height: 4vw;
    }

    .readMoreBtn {
        font-size: 2vw;
    }

        .readMoreBtn span {
            display: inline-block;
            position: relative;
            padding-right: 2vw;
            padding-bottom: 0px;
        }

            .readMoreBtn span::before {
                width: 83%;
                height: 0.1vw;
                transform: scaleX(1);
            }

            .readMoreBtn span:after {
                top: 60%;
                right: -2vw;
                opacity: 1;
                display: inline-block;
                width: 4vw;
                height: 4vw;
                transform: translateY(-50%) rotate(-45deg);
            }

    /* blog detail css */
    .blogDetailLogo img {
        width: 25vw;
        height: auto;
    }

    .blogDetailBreadcrum {
        font-size: 2.4vw;
        line-height: 3vw;
    }

    .blogDetailDateRead p {
        font-size: 2.4vw;
        line-height: 3vw;
    }

    .blogDetail {
        padding: 0 0vw;
        gap: 2vw;
    }

        .blogDetail h2 {
            font-size: 7.5vw;
            line-height: 7.5vw;
            text-align: left;
        }

        .blogDetail p {
            font-size: 3.5vw;
            line-height: 4vw;
        }

    .interProp {
        font-size: 1.8vh;
        line-height: 2vh;
    }
}

/* Mobile - Large (480px and below) */
@media screen and (max-width: 480px) {
    .BGimage {
        display: flex;
        position: absolute;
        /* background-image: url("../images/mspotBG.svg"); */
        background-repeat: no-repeat;
        background-size: cover;
        width: 985px;
        height: 704px;
        margin: 0;
        margin-left: 46vw;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        z-index: -1;
        overflow: clip;
        rotate: 25deg;
    }

    .logo {
        background-image: url("/images/mlogo.svg");
        width: 212px;
        height: 25vw;
        margin-top: 35vw;
    }

    .forMobile {
        display: inline-block !important;
    }

    .logo404 {
        width: 50vw;
        margin-bottom: 2vw;
    }

    .secDesHig {
        font-family: var(--font-family-secondary);
        font-size: 4.5vw;
        line-height: 4.5vw;
        font-weight: 400;
        text-transform: lowercase;
    }

    .sectionDesc p {
        padding: 0px 0vw;
    }

        .sectionDesc p:first-child {
            position: relative;
            height: 3em;
            overflow: hidden;
        }

    .word-wrapper {
        /* height: 4vh; */
        height: 3vh;
        width: 25ch !important;
        overflow: hidden;
        vertical-align: baseline;
    }

    .secDesHig:nth-child(1) {
        font-weight: bold;
        text-transform: uppercase;
    }

    .spotMarker {
        background: transparent;
        padding: 0;
    }

    .secDesHig-mark span {
        position: relative;
        white-space: nowrap;
        font-family: var(--font-family-secondary);
        text-transform: uppercase;
        padding: 0 0px;
        font-weight: bold;
        font-size: 8vw;
        line-height: 8vw;
        background: linear-gradient(transparent 50%, var(--primary-color) 20%);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        transform: skewY(2deg);
    }

    .forMarkerTilt {
        transform: skewY(-1deg);
    }

    /* ========highlightContainer for other non animated text=========== */
    .sec1-highlightContainer1 {
        display: inline-block;
        font-family: var(--font-family-primary);
        font-size: 3.7vw;
        line-height: 3.7vw;
        background-color: #e7ff25;
        /* padding: 0 8.1vw; */
        padding: 2vw 8.1vw;
        rotate: -1deg;
        text-transform: uppercase;
    }

    .sec1-highlightContainer1 span {
        font-family: var(--font-family-primary);
        font-size: 8.1vw;
        line-height: 8.1vw;
        /* rotate: 1deg;*/
        rotate: 0deg;
    }

    .sec1-highlightContainer {
        display: inline-block;
        font-family: var(--font-family-secondary);
        font-size: 3.7vw;
        line-height: 3.7vw;
        background-color: transparent;
        padding: 0.5vw;
        rotate: -1deg;
        text-transform: uppercase;
    }

    .sec1-highlightContainer span {
        display: inline-block;
        background-color: #e6ff2500;
        padding: 1px;
        rotate: 1deg;
    }

    .sec1-highlightContainer:nth-child(1) {
        rotate: -1deg;
        font-size: 5vw;
        line-height: 5vw;
        font-weight: bold;
    }

    .sec1-highlightContainer:nth-child(2) span {
        font-family: var(--font-family-secondary);
        font-size: 5vw;
        line-height: 5vw;
        rotate: -1deg;
        text-transform: lowercase;
    }

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

    .backgroundText404 {
        font-size: 37vw;
        line-height: 35vw;
        text-align: center;
        width: 70vw;
    }

    .container404Inner {
        gap: 45vw;
    }

    .container404Inner h1 {
        font-size: 20vw;
    }

    .container404Inner p {
        font-size: 5vw;
    }

    .container404Inner .shareFeebackBtn p {
        font-size: 3vw;
    }

    /* Mobile-specific: No sliding, only fade transition */
    .floatingIcons {
        flex-direction: column;
        transform: translateY(-50%) translateX(0) scale(1) !important;
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .floatingIcons.transitioning {
        transform: translateY(-50%) translateX(0) scale(1) !important;
    }

    .animation-wrapper {
        padding-right: 8vw;
        /* padding-right: 0vw; */
        height: 0vh;
    }

    .button-wrapper {
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        padding: 0;
        gap: 3vw;
    }

    .playstore-btn,
    .playstore-btn1 {
        width: 50vw;
        justify-content: flex-end;
    }

    .section-1 {
        gap: 3vw;
        padding: 6vh 3vw;
    }

    .orangeDash {
        width: 8vw;
        height: 1.2vw;
    }

    .flipingTxtContainer {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .sectionDesc {
        font-size: 5vw;
        line-height: 8vw;
        margin-bottom: 5vh;
    }

    .transition-container {
        min-height: 12vw;
    }

    .appLink {
        flex-direction: column;
        align-items: flex-end;
        /* font-size: 3.5vw; */
        font-size: 4vw;
        gap: 4vw;
    }

    .appLink a {
        width: 100%;
    }

    .appLink div {
        width: 50vw;
    }

    .appLinkChange {
        font-size: 4vw;
        line-height: 7vw;
        gap: 4vw;
    }

    .appLinkChange span:after {
        width: 5.7vw;
        height: 5.7vw;
    }

    .appLinkChange:hover span:after {
        right: -4vw;
    }

    .linkImg {
        width: 3.5vw;
        height: 3.5vw;
    }

    .store-icon {
        width: 10vw;
        height: 10vw;
        padding: 1.5vw;
    }

    .icon-container {
        flex-direction: column;
    }

    .floatingIcons img {
        width: 8vw;
        height: 8vw;
        padding: 2vw;
        margin: 0 1vw;
    }

    .section-2,
    .section-3,
    .section-5,
    .section-6,
    .section-7,
    .section-8,
    .section-9,
    .section-10 {
        /* padding: 6vh 3vw; */

        padding: 3vh 3vw;
    }

    .section-4 {
        padding: 6vh 0vw;
    }

    .section-4 h3 {
        padding: 0vh 3vw;
    }

    .secH3 {
        font-size: 10.7vw;
        line-height: 12vw;
        letter-spacing: -1.5px;
    }

    .section2Text p {
        /* font-size: 17vw;
    line-height: 17vw; */

    font-size: 12vw;
    line-height: 12vw;
    letter-spacing: -1.5px;
    }

    .section2-para p {
        /* font-size: 3.5vw;
    line-height: 5.5vw; */

    font-size: 4.3vw;
    /* font-size: 16px; */
    line-height: 5.5vw;
    }

    .tag {
        padding: 6vw 4vw;
        font-size: 3.7vw;
        line-height: 4vw;
        /* min-width: 50vw; */
        border-radius: 30vw;
    }

    .gigCard {
        padding: 5vw;
        border-radius: 2vw;
    }

    .cardHead p {
        font-size: 9.5vw;
        line-height: 10vw;
    }

    .cardBottom {
        flex-direction: column;
    }

    .cardBottomHead {
        /* font-size: 10vw;
    margin-top: 2vh; */
        font-size: 9.1vw;
        /* margin-top: 2vh; */
        margin-top: 0vh;
    }

    .cardBottomBody {
        font-size: 4.3vw;
    }

    .section4CardContainer {
        animation-duration: 10s;
    }

    .section4CardContainer:hover {
        animation-play-state: running;
    }

    .section4Card {
        padding: 5vw;
        border-radius: 3vw;
        min-width: 70vw;
        margin: 3vw;
    }

    .secBtn {
        font-size: 4vw;
        padding: 2vw 4vw;
        border-radius: 1vw;
    }

    .section4Head {
        gap: 12px;
    }

    .section4Head img {
        width: 12vw;
        height: 12vw;
    }

    .sec4Name {
        font-size: 3.2vw;
    }

    .sec4Job {
        font-size: 2.7vw;
    }

    .section4Body p {
        font-size: 3.2vw;
        line-height: 4.2vw;
        width: 70vw;
    }

    .section5Points {
        font-size: 8.1vw;
        line-height: 9vw;
        letter-spacing: -1px;
        padding: 4vh 12vw;
    }

    .section6Text1 {
        padding-top: 10vw;
    }

    .sec6H4 {
        font-size: 9.1vw;
    }

    .sec6Txt {
        font-size: 4vw;
        line-height: 5vw;
    }

    .section-7 {
        margin-top: 30vw;
    }

    .section7Card {
        border-radius: 20px;
        padding: 5vw;
    }

    .sec7H4 {
        font-size: 9.1vw;
        line-height: 9vw;
    }

    .sec7img1 {
        width: 31vw;
        height: auto;
    }

    .sec7Img {
        display: flex;
        width: 70vw;
        margin-bottom: 4vh;
        flex-direction: row;
    }

    .sec7Img img:nth-child(1) {
        left: 24vw !important;
    }

    .sec7Img img:nth-child(2) {
        left: -79vw !important;
        width: 70vw;
        height: 49vh;
    }

    .sec7app {
        gap: 3vw;
    }

    .section-8 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .sec8body {
        width: 90vw;
    }

    .sec8body div {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 2vw;
    }

    .sec8body input {
        width: 80vw;
        font-size: 4.5vw;
    }

    .sec8body textarea {
        width: 80vw;
        margin: 0;
        margin-top: 8vw;
        font-size: 4.5vw;
    }

    .sec8body img {
        width: 4vw;
        height: auto;
    }

    .input-wrapper-required::after {
        left: calc(5.5ch + 1.5vw);
        top: 60%;
        font-size: 3vw;
    }

    .input-wrapper-required:has(textarea)::after {
        left: calc(21.5ch + 2.5vw);
        top: calc(10vw + 2.2vw);
        font-size: 3vw;
    }

    .sec8Success {
        width: 84vw !important;
    }

    .shareFeebackBtn .cta1 {
        padding: 3vw 6vw;
        border-radius: 2vw;
    }

    .shareFeebackBtn p {
        font-size: 3.7vw;
        line-height: 4vw;
        transition: transform 200ms ease;
        transform: translateX(-10px);
    }

    /* .shareFeebackBtn .cta1:hover p {
    transition: transform 200ms ease;
    transform: translateX(-10px);
} */

    .shareFeebackBtn .cta1::after {
        right: 4vw;
        width: 3.6vw;
        height: 3.6vw;
        opacity: 1;
        transform: translateX(0);
    }

    .button {
        font-size: 3vw;
        line-height: 3vw;
        border-radius: 0.9vw;
        padding: 3vw 3vw;
    }

    .button:hover span:after {
        right: -8vw;
    }

    .button:hover span {
        padding-right: 0vw;
    }

    .button span:after {
        width: 5vw;
        height: 2vh;
    }

    .sec8Success {
        gap: 5vw;
        /* padding: 8vw; */
    }

    .sec8Success img {
        width: 15vw;
        height: auto;
    }

    .sec8Success h4 {
        font-size: 8vw;
        line-height: 2vw;
    }

    .sec8Success p {
        font-size: 3vw;
        line-height: 3vw;
    }

    .sec9bottom {
        margin-top: 0vh;
    }

    .sec9blog-title {
        font-size: 7vw;
        line-height: 8vw;
        margin: 0;
        margin-bottom: 3vw;
    }

    .sec9blog-title h4 {
        font-size: 5.5vw;
        line-height: 6vw;
    }

    .sec9blog-decs {
        font-size: 4vw;
        line-height: 5vw;
    }

    .sec9MainImgContainer {
        width: 93vw;
        height: 57vw;
        border-radius: 3vw;
    }

    .sec9MainImgContainer img {
        width: 100%;
        height: auto;
    }

    .sec9ImgContainer {
        width: 37vw;
        height: 25vw;
        border-radius: 2vw;
        margin-right: 2vh;
    }

    .sec9ImgContainer img {
        width: 39vw;
        height: 25vw;
        border-radius: 2vw;
        margin-right: 0vw;
    }

    .sec9img1 {
        width: 35vw;
        height: 20vw;
        margin-right: 3vh;
    }

    .sec9minRead {
        font-size: 3.2vw;
        margin-top: 2vw;
    }

    .accordion-arrow {
        width: 3.5vw;
    }

    .section10arrow {
        font-size: 8.1vw;
        line-height: 10vw;
        padding: 6vw 3vw;
    }

    .footBgImage {
        background-image: url(../images/spotBG.svg);
        width: 141vw;
        height: 115vw;
/*        margin-top: -5vw;*/
        margin-top: 0vw;
    }

    .footerLogo {
        width: 60vw;
    }

    .dividerLine {
        height: 0.1vw;
    }

    .sec11Links {
        flex-wrap: wrap;
        gap: 5vw;
        align-items: center;
        justify-content: center;
        padding: 0vw 10vw;
        margin: 5vw 0vw 30vw 0vw;
    }

    .sec11Links div {
        gap: 1.2vw;
    }

    #tandc {
        font-size: 0;
    }

    #tandc::after {
        content: "T&C";
        font-size: 5vw;
    }

    .sec11Links a {
        font-size: 5vw;
    }

    .sec11Links img {
        width: 7vw;
    }

    .verticalLine {
        width: 0.3vw;
        height: 5vw;
    }

    .logo-terms {
        font-size: 15vw;
    }

    .HeadSection {
        padding: 6vw 4vw;
        gap: 6vw;
    }

    .termTitle {
        font-size: 8.1vw;
        letter-spacing: -0.3vw;
    }

    .termDate {
        font-size: 3.5vw;
        line-height: 4vw;
    }

    .termDesc {
        font-size: 3.5vw;
        line-height: 5vw;
        padding: 0 8vw;
    }

    .termLogoSection {
        padding: 3vw 4vw;
    }

    .termsContentSection {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .contentSection {
        width: 100%;
    }

    .contentSection h2 {
        font-size: 5vw;
        line-height: 7vw;
        letter-spacing: -1px;
    }

    .contentSection ul {
        width: 80vw;
        padding: 0 8vw;
    }

    .contentSection li {
        font-size: 4vw;
        line-height: 6vw;
    }

    .contentSection p {
        font-size: 4vw;
        line-height: 5vw;
    }

    .contentTable {
        display: none;
    }

    .footerApp {
        display: flex !important;
        flex-direction: row;
    }

    .footerApp img {
        width: 30vw;
        height: auto;
        border-radius: 0;
    }

    .footerApp img:hover {
        background-color: var(--color-white);
    }

    /* Blog page css */

    .blogPageTitle {
        font-size: 17vw;
        line-height: 17vw;
    }

    .blogBreadcrum {
        font-size: 3.5vw;
        line-height: 4vw;
    }

    .blogCard {
        flex-direction: column;
        gap: 3vw;
        padding: 5vh 4vw;
    }

    .blogCardPart2 {
        gap: 4vw;
    }

    .blogCardImg {
        width: 100%;
        height: 100%;
        border-radius: 2vw;
    }

    .blogCardImg-Inner {
        height: inherit;
    }

    .blogCardImg img {
        width: -webkit-fill-available;
        height: inherit;
        border-radius: 1.5vw;
        object-fit: fill;
    }

    .blogCardDateRead p {
        font-size: 4vw;
        line-height: 4vw;
    }

    .blogCardContent h2 {
        font-size: 11vw;
        line-height: 11.5vw;
    }

    .blogCardContent p {
        font-size: 4vw;
        line-height: 5vw;
    }

    .readMoreBtn {
        color: var(--color-black);
        font-family: var(--font-family-secondary);
        font-size: 4vw;
        border-radius: 0.5vw;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        text-decoration: none;
    }

    .readMoreBtn span {
        display: inline-block;
        position: relative;
        padding-right: 2vw;
        padding-bottom: 0px;
    }

    .readMoreBtn span::before {
        width: 90%;
        height: 0.1vw;
        transform: scaleX(1);
    }

    .readMoreBtn span:after {
        top: 60%;
        right: -5vw;
        opacity: 1;
        display: inline-block;
        width: 7vw;
        height: 7vw;
        transform: translateY(-50%) rotate(-45deg);
    }

    /* blogdetail css */
    .blogDetailHead {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 6vw;
        margin: 7.5vw 3.5vw;
    }

    .blogDetailLogo img {
        width: 30vw;
        height: auto;
    }

    .blogDetailBreadcrum {
        font-size: 3.4vw;
        line-height: 5vw;
    }

    .blogDetailContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0vh 4.5vw;
        gap: 3vw;
    }

    .blogDetailDateRead {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 3vw;
    }

    .blogDetailDateRead span {
        font-size: 3vw;
        line-height: 3vw;
    }

    .blogDetailContent .blogDetailDateRead:nth-of-type(2),
    .blogDetailDateRead span:nth-child(4),
    .blogDetailDateRead p:nth-child(5) {
        display: none;
    }

    .blogDetailDateRead p {
        margin: 0;
        font-family: var(--font-family-secondary);
        font-size: 3.4vw;
        line-height: 4vw;
        font-weight: bold;
        /* color: var(--color-black); */
        color: black;
    }

    .blogDetailTitle {
        font-size: 5.5vw;
        line-height: 12vw;
        text-align: center;
    }

    .blogDetail {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        padding: 0 1vw;
        gap: 3vw;
    }

    .blogDetail h2 {
        font-size: 12vw;
        line-height: 12vw;
        text-align: left;
    }

    .blogDetail p {
        font-size: 3.5vw;
        line-height: 4vw;
    }

    .interProp {
        font-size: 1.8vh;
        line-height: 2vh;
    }
}

@media screen and (max-width: 375px) {
    .sec7Img img:nth-child(1) {
        left: 28vw !important;
        width: 70vw;
        height: 49vh;
    }

    .sec7Img img:nth-child(2) {
        left: -60vw !important;
    }
}

/* Spotlight effect */
/* .spotlight {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(
    circle,
    rgba(255, 153, 51, 1) 0%,
    rgba(255, 153, 51, 0.6) 30%,
    rgba(255, 153, 51, 0.3) 60%,
    transparent 100%
  );
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}

.spotlight.hidden {
  opacity: 0;
} */