:root {
    --bg--eggwhite-: #faf9f9;
    --color-pink: #d71465;
    --color-blue: #0156d3;
    --color-orange: #f8432e;
    --color-light-pink: #ffe7f1;
}

h2 span {
    font-size: 30px;
}

p {
    font-size: 14px;
}

.custom-header h1,
.custom-header h1 span {
    font-size: 2rem !important;
}

.custom-header p {
    font-size: 18px;
}

.bg-eggwhite {
    background-color: var(--bg--eggwhite-) !important;
}

.carousel-inner {
    height: 700px;
}

.panel-container {
    padding: 4% 6%;
    margin: 0;
}

.carousel-img img {
    object-fit: contain !important;
}

.carousel-item {
    min-height: 350px !important;
    max-height: 350px !important;
}

.bg-mobile {
    height: 150%;
    width: 100%;
    z-index: -999;
}

.work-panel {
    min-height: 800px;
}

.mobile-v-preview {
    height: 400px !important;
    width: 100%;
    object-fit: cover;
}

.preview-image {
    height: 500px;
    display: flex;
    width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: end;
}

.preview-image img {
    height: 100%;
    object-fit: cover;
}

.mobi-container {
    min-height: 400px;
}

.mobi5-img img {
    position: absolute;
    height: 100%;
    object-fit: cover;
}

.mobi5-img {
    min-height: 290px;
}

.mobi6-img {
    height: 170%;
    width: 100%;
    bottom: -35%;
    object-fit: cover;
    position: absolute;
}

.work-panel-bg {
    height: 84%;
}

.default-button-explore {
    font-size: 16px !important;
    border: 2px solid #828282;
    border-radius: 30px !important;
    padding: 10px 50px !important;
    text-decoration: none;
}
.mobility-preview-carousel {
    height: 500px;
    overflow: hidden;
}

.mobility-preview-carousel .slick-slide {
    height: 90%;
    width: 100% !important;
}

.mobility-preview-carousel .slick-track {
    display: flex !important;
}

.mobility-preview-carousel .slick-center,
.mobility-preview-carousel .slick-current .slick-img img {
    height: 600px !important;
    position: relative;
    bottom: 0;
    object-fit: contain;
}

.btn-header {
    z-index: 1000;
}

.slick-img {
    height: 600px !important;
    padding: 0 0.2% !important;
}

.slick-img img {
    display: flex !important;
    align-items: end !important;
    width: 100% !important;
    object-fit: contain !important;
    border-radius: 3.25 rem;
}

.text-pink {
    color: var(--color-pink) !important;
}

.bg-pink {
    background: var(--color-pink) !important;
}

.text-orange {
    color: var(--color-orange) !important;
}

.bg-orange {
    background: var(--color-orange) !important;
}

.bg-light-pink {
    background-color: var(--color-light-pink) !important;
}

.default-button-sm {
    border: none;
}

.phone-preview-container h1,
.phone-preview-container h1 span {
    font-size: 2rem;
}
@media (min-width: 576px) {
    .carousel-content {
        position: absolute;
        padding-left: 10%;
    }

    .carousel-inner {
        height: fit-content;
    }
    .mobi6-img {
        height: 100%;
        top: 0%;
    }

    .mobi5-img img {
        min-height: 60%;
    }
}

@media (min-width: 600px) {
    .mobi5-img img {
        position: absolute;
        max-width: 120%;
        height: 64%;
        left: -8%;
        object-fit: cover;
    }

    .work-panel {
        min-height: 500px;
    }
}

/* md */
@media (min-width: 768px) {
    .custom-header h1,
    .custom-header h1 span {
        font-size: 4rem !important;
    }
    .phone-preview-container h1,
    .phone-preview-container h1 span {
        font-size: 3.5rem !important;
    }

    .carousel-item {
        min-height: 450px !important;
        max-height: 450px !important;
    }

    .mobi6-img {
        height: 160%;
        top: -30%;
    }

    .work-panel {
        min-height: 500px;
    }

    .mobi5-img img {
        min-height: 55%;
    }

    .mobi5-img img {
        position: absolute;
        max-width: 120%;
        height: 80%;
        left: -8%;
        object-fit: cover;
    }
}

@media (min-width: 900px) {
    .carousel-item {
        min-height: 600px !important;
        max-height: 600px !important;
    }

    .work-panel {
        min-height: 500px;
    }

    .mobi5-img img {
        position: absolute;
        max-width: 120%;
        height: 100%;
        left: -10%;
        object-fit: cover;
    }

    .support-panel {
        min-height: 300px;
    }
}

@media (min-width: 992px) {
    .mobi6-img {
        height: 160%;
        top: -30%;
    }

    .carousel-inner {
        height: 100vh;
    }

    .preview-image img {
        height: 98%;
        object-fit: cover;
    }

    .mobility-preview-carousel .slick-center,
    .mobility-preview-carousel .slick-current .slick-img img {
        position: relative;
        bottom: 0;
        object-fit: contain;
    }

    .mobi5-img img {
        position: absolute;
        max-width: 120%;
        height: 120%;
        left: -15%;
        object-fit: cover;
    }

    .support-panel {
        min-height: 400px;
    }
}

@media (min-width: 1200px) {
    .carousel-item img {
        height: 100vh !important;
        background-color: none;
    }

    .carousel-item {
        min-height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .mobi5-img img {
        position: absolute;
        max-width: 120%;
        height: 168%;
        left: -16.8%;
        object-fit: cover;
    }

    .mobi6-img {
        height: 150%;
        top: -25%;
    }

    .support-panel {
        min-height: 400px;
    }

    .work-panel {
        min-height: 500px;
    }
}

@media (min-width: 1920px) {
    .work-panel {
        height: 900px;
    }

    .support-panel {
        min-height: 700px;
    }

    .mobi5-img img {
        position: absolute;
        min-height: 210%;
        max-height: 250%;
        left: -15%;
        object-fit: cover;
    }
}
@media (min-width: 2000px) {
    .mobi5-img img {
        position: absolute;
        max-width: 210%;
        min-height: 250%;
        max-height: 250%;
        left: -15%;
        object-fit: cover;
    }
}