body {
    background-color: #0C050A;
}

.ellipse {
    opacity: 0.6;
    position: fixed;
    top: 0;
    z-index: -999;
}

.ellipse .ellipse1 {
    position: absolute;
    left: 300px;
    top: 180px;
    width: 337px;
    height: 390px;
    background: linear-gradient(180deg, rgba(0, 15, 48, 0.4) -3%, rgba(0, 36, 153, 0.4) 100%);
    filter: blur(150px);
}

.ellipse .ellipse2 {
    position: absolute;
    left: 300px;
    top: 0px;
    border-radius: 0;
    width: 366px;
    height: 365px;
    background: linear-gradient(180deg, rgba(255, 122, 0, 0) -3%, #FF8258 100%);
    filter: blur(180px);
}

.deliveryService .titleGroup {
    margin-bottom: clamp(25.0px, 6.666666666666667vw, 128.0px);
}

.deliveryService h2 {
    font-family: Cus-Bold;
    font-size: clamp(8.59375px, 2.291666666666667vw, 44.0px);
    font-weight: 600;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.04em;
    color: #FFFFFF;
}

.deliveryService .titleGroup p {
    font-family: Cus-Light;
    font-size: clamp(4.296875px, 1.1458333333333335vw, 22.0px);
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: normal;
    color: #FFFFFF;
    margin-bottom: clamp(3.125px, 0.8333333333333334vw, 16.0px);
}

.deliveryService .container .contentGroup {
    perspective: 80rem;
}

.deliveryService .contentGroup .titleGroup h3 {
    font-family: Cus-Medium;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: normal;
    color: #FFFFFF;
}

.deliveryService .contentGroup .titleGroup p {
    font-family: Cus-Light;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    letter-spacing: normal;
    color: #FFFFFF;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: clamp(3.125px, 0.8333333333333334vw, 16.0px);
}

.deliveryService .contentGroup .col {
    width: clamp(65.8203125px, 17.552083333333336vw, 337.0px);
    height: clamp(98.6328125px, 26.302083333333336vw, 505.0px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: clamp(9.765625px, 2.604166666666667vw, 50.0px);
    will-change: transform;
    backface-visibility: hidden;
    transition: 0.5s ease-out;
    cursor: pointer;
    opacity: 0;
}

.deliveryService .contentGroup .col:nth-child(1){
    transform: translate3d(115%, 0px, -70px) rotateX(0deg) rotateY(-15deg) scale(1);
    z-index: 1;
}

.deliveryService .contentGroup .col:nth-child(1):hover{
    transform: translate3d(0px, 0px, -70px) rotateX(0deg) rotateY(-15deg) scale(1.1) !important;
}

.deliveryService .contentGroup .col:nth-child(2){
    margin: 0 clamp(10.9375px, 2.916666666666667vw, 56.0px);
    z-index: 2;
}

.deliveryService .contentGroup .col:nth-child(2):hover{
    transform: scale(1.1);
}

.deliveryService .contentGroup .col:nth-child(3){
    transform: translate3d(-115%, 0px, -70px) rotateX(0deg) rotateY(15deg) scale(1);
    z-index: 1;
}

.deliveryService .contentGroup .col:nth-child(3):hover{
    transform: translate3d(0px, 0px, -70px) rotateX(0deg) rotateY(15deg) scale(1.1) !important;
}

.deliveryService .contentGroup .col:nth-child(1) h3,
.deliveryService .contentGroup .col:nth-child(3) h3{
    font-size: clamp(2.947265625px, 0.7859375000000001vw, 15.09px);
}

.deliveryService .contentGroup .col:nth-child(2) h3{
    font-size: clamp(3.791015625px, 1.0109375vw, 19.41px);
}

.deliveryService .contentGroup .col:nth-child(1) p,
.deliveryService .contentGroup .col:nth-child(3) p{
    font-size: clamp(2.5273437499999996px, 0.6739583333333333vw, 12.94px);
}

.deliveryService .contentGroup .col:nth-child(2) p{
    font-size: clamp(2.947265625px, 0.7859375000000001vw, 15.09px);
}

.deliveryService .contentGroup .col .titleGroup {
    position: absolute;
    top: 65%;
    height: 35%;
    border-radius: 0 0 clamp(7.03125px, 1.875vw, 36.0px) clamp(7.03125px, 1.875vw, 36.0px);
    padding: clamp(4.6875px, 1.25vw, 24.0px) clamp(9.375px, 2.5vw, 48.0px) 0 clamp(9.375px, 2.5vw, 48.0px);
    background: linear-gradient(180deg, rgba(14, 17, 38, 0) 0%, rgba(12, 9, 9, 0.76) 67%);
    backdrop-filter: blur(42.44px);
    width: 100%;
    margin-bottom: 0;
}

.deliveryService .detailGroup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deliveryService .detailGroup .left {
    width: clamp(95.83789062499999px, 25.556770833333335vw, 490.69px);
    height: clamp(78.125px, 20.833333333333336vw, 400.0px);
    margin-right: clamp(21.484375px, 5.729166666666667vw, 110.0px);
}

.deliveryService .detailGroup .left p {
    font-family: Cus-Light;
    font-size: clamp(2.640625px, 0.7041666666666667vw, 13.52px);
    font-weight: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #FFFFFF;
    max-width: clamp(28.3203125px, 7.552083333333334vw, 145.0px);
    margin-bottom: clamp(3.125px, 0.8333333333333334vw, 16.0px);
}

/*TITLE*/
.deliveryService .detailGroup .left h3 {
    font-family: Cus-Bold;
    font-size: clamp(7.8125px, 2.0833333333333335vw, 40.0px);
    font-weight: normal;
    line-height: clamp(13.671875px, 3.6458333333333335vw, 70.0px);
    letter-spacing: normal;
    text-align: left;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.deliveryService .detailGroup .titleGroup {
    margin-bottom: 0;
}

/*ICON*/
.deliveryService .detailGroup .left .icon {
    width: clamp(44.921875px, 11.979166666666668vw, 230.0px);
}

.deliveryService .detailGroup .item1 .left .icon {

}

.deliveryService .detailGroup .item2 .left .icon {
    right: -30%;
    bottom: clamp(6.25px, 1.6666666666666667vw, 32.0px);
}

.deliveryService .detailGroup .item3 .left .icon {
    right: -15%;
    bottom: clamp(12.5px, 3.3333333333333335vw, 64.0px);
    width: clamp(58.59375px, 15.625vw, 300.0px);
}

.deliveryService .detailGroup .left .icon img{
    width: 100%;
}

.deliveryService .detailGroup .right .contentGroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.deliveryService .detailGroup .right .itemList{
    padding-left: 0;
    margin-bottom: clamp(7.8125px, 2.0833333333333335vw, 40.0px);
    width: 100%;
}

.deliveryService .detailGroup .right h4{
    font-family: Cus-Medium;
    font-size: clamp(5.279296875px, 1.4078125000000001vw, 27.03px);
    font-weight: normal;
    line-height: clamp(16.5px, 4.4vw, 84.48px);
    letter-spacing: normal;
    color: #FFFFFF;
    margin-bottom: clamp(7.8125px, 2.0833333333333335vw, 40.0px);
}

.deliveryService .detailGroup .right .item{
    font-family: Cus-Light;
    font-size: clamp(3.630859375px, 0.9682291666666667vw, 18.59px);
    font-weight: normal;
    line-height: clamp(5.939453125px, 1.5838541666666668vw, 30.41px);
    letter-spacing: normal;
    color: #FFFFFF;
    padding: clamp(3.125px, 0.8333333333333334vw, 16.0px);
    margin: clamp(1.5625px, 0.4166666666666667vw, 8.0px) 0;
}

/*.deliveryService .detailGroup .right .item:hover {*/
/*    border-radius: 8px;*/
/*    background: linear-gradient(90deg, #ffffff1c 0%, rgb(255 255 255 / 0%) 100%);*/
/*    cursor: pointer;*/
/*}*/

.deliveryService .detailGroup .right .order-now a{
    font-family: Cus-Light;
    font-size: clamp(4.15625px, 1.1083333333333334vw, 21.28px);
    font-weight: normal;
    line-height: clamp(5.34375px, 1.425vw, 27.36px);
    text-align: center;
    letter-spacing: normal;
    color: #000000;
    padding: clamp(0.78125px, 0.20833333333333334vw, 4.0px) clamp(0.9765625px, 0.2604166666666667vw, 5.0px) clamp(0.78125px, 0.20833333333333334vw, 4.0px) clamp(3.90625px, 1.0416666666666667vw, 20.0px);
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(90deg, #1A1F5E -27%, #464A7C 25%, #987888 63%, #FFD1B5 101%), #D8D8D8;
    border-radius: clamp(9.017578125px, 2.4046875vw, 46.17px);
}

.deliveryService .detailGroup .right .order-now img{
    width: clamp(9.765625px, 2.604166666666667vw, 50.0px);
    height: clamp(9.765625px, 2.604166666666667vw, 50.0px);
    margin-left: clamp(1.953125px, 0.5208333333333334vw, 10.0px);
}

.deliveryService .detailGroup .page-btn {
    position: absolute;
    top: calc(50% - 30px);
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 95%;
}

.deliveryService .detailGroup .page-btn img {
    width: clamp(11.71875px, 3.125vw, 60.0px);
}

.deliveryService .detailGroup .page-btn .page-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.deliveryService .detailGroup .page-btn .page-right .page-size {
    margin-right: 1rem;
    font-family: Cus-Regular;
    font-size: clamp(3.515625px, 0.9375vw, 18.0px);
    font-weight: normal;
    line-height: clamp(3.515625px, 0.9375vw, 18.0px);
    letter-spacing: 0em;
    color: #FFFFFF;
    transition: all .3s ease-out;
}

.moveInCircle {
    animation: moveInCircle .8s ease-in-out forwards;
}

@keyframes moveInCircle {
    0% {
        opacity: 0;
        filter: blur(100px);
    }

    1% {
        transform: translate(-60%, -20%) rotate(-90deg) translate(60%, 20%) rotate(90deg);
        opacity: 0;
        filter: blur(100px);
    }

    100% {
        transform: translate(-60%, -20%) rotate(0deg) translate(60%, 20%) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
}

.moveOutCircle {
    animation: moveOutCircle .8s ease-in-out forwards;
}

@keyframes moveOutCircle {
    0% {
        transform: translate(-60%, -20%) rotate(0deg) translate(60%, 20%) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: translate(-60%, -20%) rotate(90deg) translate(60%, 20%) rotate(-90deg);
        opacity: 0;
        filter: blur(100px);
    }
}

.howItWorks h3 {
    font-family: Cus-Bold;
    font-size: clamp(8.59375px, 2.291666666666667vw, 44.0px);
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    margin-bottom: clamp(13.8671875px, 3.697916666666667vw, 71.0px);
    margin-left: clamp(28.125px, 7.5vw, 144.0px);
}

.howItWorks h4 {
    font-family: Cus-Regular;
    font-size: clamp(4.6875px, 1.25vw, 24.0px);
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    margin-bottom: clamp(2.34375px, 0.625vw, 12.0px);
    position: relative;
}

.howItWorks p {
    font-family: Cus-Light;
    font-size: clamp(3.125px, 0.8333333333333334vw, 16.0px);
    font-weight: normal;
    line-height: clamp(7.03125px, 1.875vw, 36.0px);
    letter-spacing: normal;
    color: #FFFFFF;
    margin-bottom: 0;
}

.howItWorks li {
    margin-bottom: clamp(13.671875px, 3.6458333333333335vw, 70.0px);
}

.howItWorks li:last-child{
    margin-bottom: 0;
}

.howItWorks li::marker {
    content: "";
}

.howItWorks h4:before {
    content: "•";
    width: clamp(1.171875px, 0.3125vw, 6.0px);
    height: clamp(1.171875px, 0.3125vw, 6.0px);
    color: #fff;
    position: absolute;
    top: 0vw;
    left: -3.7vw;
}

.howItWorks ul {
    position: relative;
    width: clamp(156.25px, 41.66666666666667vw, 800.0px);
    margin-left: clamp(28.125px, 7.5vw, 144.0px);
    padding-left: 0;
}

.howItWorks ul::before {
    content: "";
    width: clamp(0.9765625px, 0.2604166666666667vw, 5.0px);
    height: 74%;
    background: linear-gradient(180deg, rgba(255, 88, 88, 0) 0%, #FF8F8F 46%, rgba(255, 83, 83, 0) 100%);
    position: absolute;
    left: -7vw;
    top: 12%;
}

.deliveryService .item3 .customPadding {
    padding-bottom: 0;
}

.deliveryService.customPadding{
    padding-top: clamp(46.6796875px, 12.447916666666668vw, 239.0px);
}

.footer {
    background: unset;
}

.section2 .titleGroup {
    margin-bottom: clamp(22.8515625px, 6.09375vw, 117.0px);
}

.section2 .titleGroup h2 {
    font-family: Cus-Bold;
    font-size: clamp(8.59375px, 2.291666666666667vw, 44.0px);
    font-weight: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #FFFFFF;
    margin-bottom: clamp(11.5234375px, 3.072916666666667vw, 59.0px);
}

.section2 .titleGroup p {
    font-family: Cus-Light;
    font-size: clamp(3.515625px, 0.9375vw, 18.0px);
    font-weight: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #FFFFFF;
}

.section2 .contentGroup .row .col {
    max-width: clamp(124.21875px, 33.125vw, 636.0px);
    height: clamp(65.625px, 17.5vw, 336.0px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: clamp(5.859375px, 1.5625vw, 30.0px);
    padding: clamp(10.3515625px, 2.760416666666667vw, 53.0px) clamp(8.59375px, 2.291666666666667vw, 44.0px) !important;
    margin-bottom: clamp(9.765625px, 2.604166666666667vw, 50.0px) !important;
    cursor: pointer;
}

.section2 .contentGroup .row:last-child .col{
    margin-bottom: 0 !important;
}

.section2 .contentGroup .row .col p{
    font-family: Cus-Light;
    font-size: clamp(4.296875px, 1.1458333333333335vw, 22.0px);
    font-weight: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #FFFFFF;
    margin: 0;
}

.section2 .contentGroup .row .col .line {
    width: 100%;
    padding-top: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: clamp(4.8828125px, 1.3020833333333335vw, 25.0px) 0;
}
