:root {
    --primary-background-color: #062241;
    --primary-color: #00c593;
    --secondary-color: #bb6bd9;
    --gradient-start: #e1bdec;
    --gradient-end: #bb6bd9;
}

*,
:after,
:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000
}

/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}

:after,
:before {
    --tw-content: ""
}

:host,
html {
    scroll-behavior: smooth;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: 'Rubik', sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}


a {
    color: inherit;
    text-decoration: inherit
}

b {
    font-weight: bolder
}

button {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    /* font-size: 100%; */
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    /* padding: 0 */
}

button {
    text-transform: none
}

button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0
}

menu,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

li {
    list-style: disc;
    list-style-position: inside;
    margin-inline-start: 8px;
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

img,
svg {
    display: block;
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    inset: 0
}

.z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.mx-2 {
    margin-left: .5rem;
    margin-right: .5rem
}

.-ml-\[2px\] {
    margin-left: -2px
}

.-mt-\[2px\] {
    margin-top: -2px
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-8 {
    margin-bottom: 2rem
}

.mb-\[43px\] {
    margin-bottom: 43px
}

.mb-\[45px\] {
    margin-bottom: 45px
}

.ml-7 {
    margin-left: 1.75rem
}

.ml-\[6px\] {
    margin-left: 6px
}

.mt-2 {
    margin-top: .5rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-\[100px\] {
    margin-top: 100px
}

.mt-\[4px\] {
    margin-top: 4px
}

.flex {
    display: flex
}

.h-\[12px\] {
    height: 12px
}

.h-\[14px\] {
    height: 14px
}

.h-\[18px\] {
    height: 18px
}

.h-\[1px\] {
    height: 1px
}

.h-\[24px\] {
    height: 24px
}

.h-\[32px\] {
    height: 32px
}

.h-\[9px\] {
    height: 9px
}

.h-auto {
    height: auto
}

.w-\[14px\] {
    width: 14px
}

.w-\[18px\] {
    width: 18px
}

.w-\[26px\] {
    width: 26px
}

.w-\[32px\] {
    width: 32px
}

.w-\[33px\] {
    width: 33px
}

.w-\[60px\] {
    width: 60px
}

.w-\[78px\] {
    width: 78px
}

.w-auto {
    width: auto
}

.w-full {
    width: 100%
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-4xl {
    max-width: 56rem
}

.max-w-\[600px\] {
    max-width: 600px
}

.cursor-pointer {
    cursor: pointer
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-8 {
    gap: 2rem
}

.gap-\[100px\] {
    gap: 100px
}

.overflow-hidden {
    overflow: hidden
}

.rounded-\[16px\] {
    border-radius: 16px
}

.rounded-\[3px\] {
    border-radius: 3px
}

.rounded-\[4px\] {
    border-radius: 4px
}

.rounded-\[6px\] {
    border-radius: 6px
}

.rounded-b-\[16px\] {
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px
}

.border {
    border-width: 1px
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity, 1))
}

.bg-\[\#00daa3\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 218 163/var(--tw-bg-opacity, 1))
}

.bg-\[\#062241\] {
    --tw-bg-opacity: 1;
    background-color: rgb(6 34 65/var(--tw-bg-opacity, 1))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.bg-\[url\(\'\.\.\/assets\/images\/img_ellipse_60\.png\'\)\] {
    background-image: url(../assets/images/img_ellipse_60.webp)
}

.bg-\[url\(\'\.\.\/assets\/images\/img_ellipse_61\.png\'\)\] {
    background-image: url(../assets/images/img_ellipse_61.webp)
}

.from-white {
    --tw-gradient-from: var(--gradient-start, #e1bdec);
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: 50%
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-\[15px\] {
    padding-left: 15px;
    padding-right: 15px
}

.px-\[24px\] {
    padding-left: 24px;
    padding-right: 24px
}

.px-\[25px\] {
    padding-left: 25px;
    padding-right: 25px
}

.px-\[28px\] {
    padding-left: 28px;
    padding-right: 28px
}

.px-\[8px\] {
    padding-left: 8px;
    padding-right: 8px
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-\[30px\] {
    padding-top: 30px;
    padding-bottom: 30px
}

.py-\[4px\] {
    padding-top: 4px;
    padding-bottom: 4px
}

.py-\[6px\] {
    padding-top: 6px;
    padding-bottom: 6px
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.font-\[\'Lexend_Deca\'\] {
    font-family: Lexend Deca
}

.text-\[12px\] {
    font-size: 12px
}

.text-\[16px\] {
    font-size: 16px
}

.text-\[18px\] {
    font-size: 18px
}

.text-\[24px\] {
    font-size: 24px
}

.text-\[31px\] {
    font-size: 31px
}

.text-\[32px\] {
    font-size: 32px
}

.font-black {
    font-weight: 800
}

.font-bold {
    font-weight: 700
}

.font-extrabold {
    font-weight: 800
}

.font-medium {
    font-weight: 500
}

.font-normal {
    font-weight: 400
}

.font-semibold {
    font-weight: 600
}

.leading-\[17px\] {
    line-height: 17px
}

.leading-\[18px\] {
    line-height: 18px
}

.leading-\[20px\] {
    line-height: 20px
}

.leading-\[22px\] {
    line-height: 22px
}

.leading-\[24px\] {
    line-height: 24px
}

.leading-\[26px\] {
    line-height: 26px
}

.leading-\[30px\] {
    line-height: 30px
}

.leading-\[38px\] {
    line-height: 38px
}

.leading-\[39px\] {
    line-height: 39px
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity, 1))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.underline {
    text-decoration-line: underline
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.hover\:bg-\[\#00c593\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 197 147/var(--tw-bg-opacity, 1))
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.hover\:text-\[\#00daa3\]:hover {
    --tw-text-opacity: 1;
    color: rgb(0 218 163/var(--tw-text-opacity, 1))
}

.hover\:text-\[\#062241\]:hover {
    --tw-text-opacity: 1;
    color: rgb(6 34 65/var(--tw-text-opacity, 1))
}

.hover\:opacity-80:hover {
    opacity: .8
}

@media (min-width:640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .sm\:text-\[30px\] {
        font-size: 30px
    }

    .sm\:text-\[40px\] {
        font-size: 40px
    }

    .sm\:leading-\[36px\] {
        line-height: 36px
    }

    .sm\:leading-\[48px\] {
        line-height: 48px
    }
    /* .md\:w-\[44\%\] {
        width: 44% !important
    } */
     .sm\:w-\[250px\] {
        width: 250px
    }
}

@media (min-width:1024px) {
    .latest-blogs {
        flex-basis: 30% !important;
    }

    .lg\:mx-\[8px\] {
        margin-left: 8px;
        margin-right: 8px
    }

    .lg\:mb-0 {
        margin-bottom: 0
    }

    .lg\:mb-\[42px\] {
        margin-bottom: 42px
    }

    .lg\:mb-\[52px\] {
        margin-bottom: 52px
    }

    .lg\:mb-\[86px\] {
        margin-bottom: 86px
    }

    .lg\:mb-\[90px\] {
        margin-bottom: 90px
    }

    .lg\:ml-\[28px\] {
        margin-left: 28px
    }

    .lg\:mr-24 {
        margin-right: 6rem
    }

    .lg\:mt-\[10px\] {
        margin-top: 10px
    }

    .lg\:mt-\[16px\] {
        margin-top: 16px
    }

    .lg\:mt-\[908px\] {
        margin-top: 908px
    }

    .lg\:h-\[12px\] {
        height: 12px
    }

    .lg\:h-\[16px\] {
        height: 16px
    }

    .lg\:h-\[18px\] {
        height: 18px
    }

    .lg\:h-\[22px\] {
        height: 22px
    }

    .lg\:h-\[24px\] {
        height: 24px
    }

    .lg\:h-\[280px\] {
        height: 280px
    }

    .lg\:h-\[320px\] {
        height: 320px
    }

    .lg\:h-\[32px\] {
        height: 32px
    }

    .lg\:h-\[40px\] {
        height: 40px
    }

    .lg\:w-\[104px\] {
        width: 104px
    }

    .lg\:w-\[16\%\] {
        width: 16%
    }

    .lg\:w-\[18\%\] {
        width: 18%
    }

    .lg\:w-\[18px\] {
        width: 18px
    }

    .lg\:w-\[20\%\] {
        width: 20%
    }

    .lg\:w-\[22px\] {
        width: 22px
    }

    .lg\:w-\[250px\] {
        width: 250px
    }

    .lg\:w-\[34px\] {
        width: 34px
    }

    .lg\:w-\[38\%\] {
        width: 38%
    }

    .lg\:w-\[40px\] {
        width: 40px
    }

    .lg\:w-\[44\%\] {
        width: 44%
    }

    .lg\:w-\[44px\] {
        width: 44px
    }

    .lg\:w-\[46\%\] {
        width: 46%
    }

    .lg\:w-\[80px\] {
        width: 80px
    }

    .lg\:w-\[94\%\] {
        width: 94%
    }

    .lg\:w-auto {
        width: auto
    }

    .lg\:max-w-\[836px\] {
        max-width: 836px
    }

    .lg\:flex-1 {
        flex: 1 1 0%
    }

    .lg\:flex-row {
        flex-direction: row
    }

    .lg\:items-center {
        align-items: center
    }

    .lg\:justify-between {
        justify-content: space-between
    }

    .lg\:gap-0 {
        gap: 0
    }

    .lg\:gap-7 {
        gap: 1.75rem
    }

    .lg\:gap-11 {
        gap: 2.75rem
    }

    .lg\:gap-\[10px\] {
        gap: 10px
    }

    .lg\:gap-\[14px\] {
        gap: 14px
    }

    .lg\:gap-\[16px\] {
        gap: 16px
    }

    .lg\:gap-\[1730px\] {
        gap: 1730px
    }

    .lg\:gap-\[18px\] {
        gap: 18px
    }

    .lg\:gap-\[20px\] {
        gap: 20px
    }

    .lg\:gap-\[46px\] {
        gap: 46px
    }

    .lg\:gap-\[4px\] {
        gap: 4px
    }

    .lg\:gap-\[90px\] {
        gap: 90px
    }

    .lg\:rounded-r-2xl {
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem
    }

    .lg\:p-12 {
        padding: 3rem
    }

    .lg\:p-14 {
        padding: 3.5rem
    }

    .lg\:px-11 {
        padding-left: 2.75rem;
        padding-right: 2.75rem
    }

    .lg\:px-14 {
        padding-left: 3.5rem;
        padding-right: 3.5rem
    }

    .lg\:px-3 {
        padding-left: .75rem;
        padding-right: .75rem
    }

    .lg\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .lg\:px-\[12px\] {
        padding-left: 12px;
        padding-right: 12px
    }

    .lg\:px-\[14px\] {
        padding-left: 14px;
        padding-right: 14px
    }

    .lg\:px-\[30px\] {
        padding-left: 30px;
        padding-right: 30px
    }

    .lg\:px-\[34px\] {
        padding-left: 34px;
        padding-right: 34px
    }

    .lg\:px-\[50px\] {
        padding-left: 50px;
        padding-right: 50px
    }

    .lg\:px-\[56px\] {
        padding-left: 56px;
        padding-right: 56px
    }

    .lg\:py-1 {
        padding-top: .25rem;
        padding-bottom: .25rem
    }

    .lg\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .lg\:py-\[16px\] {
        padding-top: 16px;
        padding-bottom: 16px
    }

    .lg\:py-\[48px\] {
        padding-top: 48px;
        padding-bottom: 48px
    }

    .lg\:py-\[50px\] {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .lg\:text-\[16px\] {
        font-size: 16px
    }

    .lg\:text-\[17px\] {
        font-size: 17px
    }

    .lg\:text-\[18px\] {
        font-size: 18px
    }

    .lg\:text-\[20px\] {
        font-size: 20px
    }

    .lg\:text-\[21px\] {
        font-size: 21px
    }

    .lg\:text-\[22px\] {
        font-size: 22px
    }

    .lg\:text-\[24px\] {
        font-size: 24px
    }

    .lg\:text-\[29px\] {
        font-size: 29px
    }

    .lg\:text-\[32px\] {
        font-size: 32px
    }

    .lg\:text-\[34px\] {
        font-size: 34px
    }

    .lg\:text-\[36px\] {
        font-size: 36px
    }

    .lg\:text-\[41px\] {
        font-size: 41px
    }

    .lg\:text-\[48px\] {
        font-size: 48px
    }

    .lg\:leading-\[19px\] {
        line-height: 19px
    }

    .lg\:leading-\[22px\] {
        line-height: 22px
    }

    .lg\:leading-\[24px\] {
        line-height: 24px
    }

    .lg\:leading-\[25px\] {
        line-height: 25px
    }

    .lg\:leading-\[26px\] {
        line-height: 26px
    }

    .lg\:leading-\[29px\] {
        line-height: 29px
    }

    .lg\:leading-\[30px\] {
        line-height: 30px
    }

    .lg\:leading-\[35px\] {
        line-height: 35px
    }

    .lg\:leading-\[41px\] {
        line-height: 41px
    }

    .lg\:leading-\[43px\] {
        line-height: 43px
    }

    .lg\:leading-\[52px\] {
        line-height: 52px
    }

    .lg\:leading-\[57px\] {
        line-height: 57px
    }
}

@media (min-width:1280px) {
    .xl\:px-\[100px\] {
        padding-left: 100px;
        padding-right: 100px
    }
}
@media (min-width:1035px) {
    .md\:flex-row {
        flex-direction: row !important
    }
}

.drivago-logo {
    height: 45px !important
}

.ltr {
    direction: ltr
}

.rtl {
    direction: rtl
}

button:hover>span {
    color: var(--primary-color, #00c593);
}

button:hover>.icon {
    color: unset !important;
}

button:hover>img {
    filter: invert(52%) sepia(24%) saturate(4523%) hue-rotate(131deg) brightness(101%) contrast(101%);
}

a:hover>span {
    color: var(--primary-color, #00c593);
}

a:hover>img {
    filter: invert(52%) sepia(24%) saturate(4523%) hue-rotate(131deg) brightness(101%) contrast(101%);
}

.hover-text:hover {
    color: #00Daa3;
}

.hover-bg:hover {
    background-color: var(--primary-color, #00c593);
}

.text-blue {
    color: var(--primary-background-color, #062241);
}

.text-blue-important {
    color: var(--primary-background-color, #062241) !important;
}

.hover-text-blue:hover {
    color: var(--primary-background-color, #062241);
}

.bg-blue {
    background: var(--primary-background-color, #062241);
}

.absolute-mask {
    position: absolute;
    top: 0;
    height: 100%;
    width: 20%;
    left: 0;
}

.we-offer-container {
    padding-bottom: 52px;
}

@media screen and (max-width:1024px) {
    .steps-section {
        padding-top: 0;
    }
    .sticky-side {
        position: unset !important;
        width: 100% !important;
    }
}

@media screen and (min-width:1024px) and (max-width:1260px) {
    .we-offer-image {
        width: 25% !important;
    }
}
@media screen and (max-width:1260px) {
    .blog-most-read img {
        max-height: 300px !important;
        width: 100%;
    }
}

.main-team-members,
.latest-blog-section {
    scrollbar-width: none;
}

.latest-blog-section img {
    min-width: 350px;
}

.is-util-blog-buttons button:hover {
    background: var(--primary-background-color, #062241);
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.scroll-buttons-container button {
    border: 2px solid black;
}

.scroll-buttons-container button:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.scroll-buttons-container button:hover svg {
    fill: white;
}

/* .partner-container {
    padding-inline: 70px;
} */

/* Style for the answer content to transition smoothly */
.answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

/* When expanded, the answer will show with max-height */
.answer.show {
    max-height: 500px;
    /* Adjust as needed for max content height */
    opacity: 1;
    padding-top: calc(var(--spacing) * 3);
    ;
    margin-bottom: 2rem;
}

.border-b {
    border-bottom-width: 1px;
}

.our-mission {
    line-height: 140%;
}

@media (max-width: 436px) {
    .gradient-line {
        height: 75%;
        width: 4px !important;
        top: 3.6rem;
        left: 60px;
        transform: translateX(-50%);
    }
}

@media (max-width: 937px) {
    .steps-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    [dir="ltr"] .gradient-line {
        height: 80% !important;
        width: 4px !important;
        top: 1.3rem !important;
        left: 45px !important;
        transform: translateX(-50%) !important;
    }

    [dir="rtl"] .gradient-line {
        height: 80% !important;
        width: 4px !important;
        top: 1.3rem !important;
        right: 40px !important;
        transform: translateX(-50%) !important;
    }

    [dir="ltr"] .step-container {
        flex-direction: row !important;
        text-align: left !important;
        /* margin-left:36px !important; */
        padding-right: 36px !important;
        margin-bottom: 2rem !important;

    }

    [dir="rtl"] .step-container {
        flex-direction: row !important;
        text-align: left !important;
        /* margin-left:36px !important; */
        padding-left: 36px !important;
        margin-bottom: 2rem !important;

    }

    [dir="ltr"] .step-icon {
        margin-right: 1rem;
        margin-bottom: 0;
    }

    [dir="rtl"] .step-icon {
        margin-left: 1rem;
        margin-bottom: 0;
    }
}

.gradient-line {
    height: 4px;
    background: linear-gradient(to right, #3b82f6, #10b981);
    width: 80%;
    position: absolute;
    top: 25px;
    inset-inline-start: 1.3rem;
    transform: translateY(-50%);
    z-index: -1;
}

[dir="rtl"] .gradient-line {
    background: linear-gradient(to left, #3b82f6, #10b981) !important;
}

.gradient-line {
    /* background: linear-gradient(90deg, rgba(96, 165, 250, 1), rgba(16, 185, 129, 1)); */
    /* height: 2px; */
    /* width: 100%; */
    position: absolute;
    /* top: 50%; */
    transform: translateY(-50%);
    z-index: 0;
}

/* .gradient-line {
    background: linear-gradient(90deg, rgba(96, 165, 250, 1), rgba(16, 185, 129, 1));
    height: 2px;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
} */

/* @media (max-width: 937px) {
    .steps-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
} */

.step-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 2rem;
}

.step-icon {
    margin-bottom: 1rem;
}



.relative {
    position: relative;
}

.step-container>div {
    min-width: 48px;
}

.money_back_subtext {
    margin-top: 20px !important;
}

.pass-guarantee {
    margin-left: auto;
    margin-right: auto;

    width: 200px;
    height: 100px;
}


.get-your-money-back {
    /* margin-left: auto !important;
            margin-right: auto !important; */
    background-image: url(../assets/images/fluid-yellow-animated-bgr-no-opacity.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    margin-top: 50px;
}

[dir="rtl"] .step-container {
    margin-right: 20px;
    margin-left: 0;
}

.bg-secondary {
    background-color: #63ECBC;
}
.bg-secondary1 {
    background-color: #3b82f6;
}
.bg-secondary2 {
    background-color: #bb6bd9;
}

.bg-onsurface {
    background-color: #ECECEC;
}

.latest-blogs {
    flex-basis: 45%;
}

@media screen and (max-width: 640px) {
    .latest-blogs {
        flex-basis: 100%;
        max-width: none !important;
    }
}


/* hide native triangle on WebKit */
summary::-webkit-details-marker {
    display: none;
}

/* hide default marker on Firefox */
summary::marker {
    content: "";
}

/* summary styles */
.faq-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 0.75rem;
    list-style: none;
}

/* icon container */
.faq-details .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    transition: transform 0.25s ease;
    transform-origin: center;
}

/* rotate when details is open */
.faq-details[open] .icon {
    transform: rotate(180deg);
}

/* small link list inside details */
.faq-details .links {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-details .links a {
    /* color: #475569; */
    /* font-size: 0.95rem; */
    text-decoration: none;
    /* direction: rtl; */
}

.faq-details .links a:hover {
    text-decoration: underline;
}

.sticky-side {
    position: sticky;
    top: 20px;
}

.submit-btn {
    border: 2px solid var(--primary-background-color, #062241);
}

.submit-btn:hover {
    color: var(--primary-background-color, #062241);
    background-color: white;
}

#contactForm input {
    background-color: #F7F4EE !important;
}

.drivago-logo-using-phone {
    max-width: 180px;
}

.-translate-x-full {
    transform: translateX(-100%);
}

.burger-menu {
    display: none;
}

@media screen and (max-width: 1110px) {
    .burger-menu {
        display: inline !important;
    }

    nav,
    .enter,
    .use-phone {
        display: none !important;
    }
}

span>a:hover,
a:hover>span,
.hover-primary-color:hover,
.hover-primary-color:hover>svg {
    color: var(--primary-color, #00c593) !important;
    fill: var(--primary-color, #00c593) !important;
}

#splash-screen {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgb(2, 0, 36); */
    /* background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 32, 68, 1) 27%, rgba(5, 52, 124, 1) 68%, rgba(1, 76, 189, 1) 100%); */
    background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary-background-color) 90%, white 5%) 0%,
    var(--primary-background-color) 60%,
    color-mix(in srgb, var(--primary-background-color) 80%, var(--primary-color) 20%) 100%
    );

    z-index: 99999;
    pointer-events: none;
}

#splash-screen .center {
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#splash-screen .logo {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

#splash-screen .logo img {
    filter: drop-shadow(0px 10px 6px rgba(0, 0, 0, 0.2));
}

#splash-screen .spinner-wrapper {
    display: block;
    position: relative;
    width: 100%;
    min-height: 100px;
    height: 100px;
}

#splash-screen .spinner-wrapper .spinner {
    position: absolute;
    overflow: hidden;
    left: 50%;
    margin-left: -50px;
    animation: outer-rotate 2.91667s linear infinite;
}

#splash-screen .spinner-wrapper .spinner .inner {
    width: 100px;
    height: 100px;
    position: relative;
    animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
}

#splash-screen .spinner-wrapper .spinner .inner .gap {
    position: absolute;
    left: 49px;
    right: 49px;
    top: 0;
    bottom: 0;
    border-top: 10px solid;
    box-sizing: border-box;
}

#splash-screen .spinner-wrapper .spinner .inner .left,
#splash-screen .spinner-wrapper .spinner .inner .right {
    position: absolute;
    top: 0;
    height: 100px;
    width: 50px;
    overflow: hidden;
}

#splash-screen .spinner-wrapper .spinner .inner .left .half-circle,
#splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 10px solid #4285f4;
    border-bottom-color: transparent;
    border-radius: 50%;
}

#splash-screen .spinner-wrapper .spinner .inner .left {
    left: 0;
}

#splash-screen .spinner-wrapper .spinner .inner .left .half-circle {
    left: 0;
    border-right-color: transparent;
    animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
    -webkit-animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
}

#splash-screen .spinner-wrapper .spinner .inner .right {
    right: 0;
}

#splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
    right: 0;
    border-left-color: transparent;
    animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
    -webkit-animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
}

@keyframes outer-rotate {
    0% {
        transform: rotate(0deg) scale(0.5);
    }

    100% {
        transform: rotate(360deg) scale(0.5);
    }
}

@keyframes left-wobble {

    0%,
    100% {
        transform: rotate(130deg);
    }

    50% {
        transform: rotate(-5deg);
    }
}

@keyframes right-wobble {

    0%,
    100% {
        transform: rotate(-130deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

@keyframes sporadic-rotate {
    12.5% {
        transform: rotate(135deg);
    }

    25% {
        transform: rotate(270deg);
    }

    37.5% {
        transform: rotate(405deg);
    }

    50% {
        transform: rotate(540deg);
    }

    62.5% {
        transform: rotate(675deg);
    }

    75% {
        transform: rotate(810deg);
    }

    87.5% {
        transform: rotate(945deg);
    }

    100% {
        transform: rotate(1080deg);
    }
}
@media screen and (max-width: 824px) {
    .about-us-images > img {
        width: 50% !important;
    }
    
    
}

@media screen and (max-width: 1023px) {
    .sm\:hidden {
        display: none !important;
    }
    .we-offer-container {
        border-radius: var(--radius-2xl);
    }
}
.hide-on-mobile {
    display: block;
}
.show-on-mobile {
    display: none;
}
.partner-logos-container {
    max-width: 250px;
}
@media screen and (max-width: 574px) {
    .partner-container {
        flex-direction: column;
    }
    .hide-on-mobile {
        display: none !important;
    }
    .show-on-mobile {
        display: block !important;
    }
    .partner-container img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
        width: 100%;
        max-height: 200px;
    }
    .partner-logos-container {
        width: 100% !important;
        max-width: none !important;
    }
}
@media screen and (max-width: 1024px) {
    .-sm-hidden {
        display: none !important;
    }
    
}

#imageTrack > img {
    min-width: 100%;
}
#prev, #next {
    width: 30px;
    height: 30px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.h-\[220px\] {
    height: 220px !important;
}

.blog {
    /* overflow-x: hidden !important; */
}