@import "partials";
@import "common";

.banner {
    background: transparent linear-gradient(180deg, #e6eaff 0%, #f8f8ff 100%);
    .banner-middle {
        @extend .align-center;
        @extend .display-flex;
    }
    .txt {
        padding: 100px 0;
        max-width: 550px;
        .logo {
            max-width: 150px;
            margin: 0 0 15px 0;
            @media($sm-1679)
            {
                max-width: 110px;
            }
        }
        .title {
            color: $lightBlue;
            font-size: 52px;
            font-weight: 700;
            margin: 0 0 10px 0;
            line-height: 1.2;
            @media($sm-1679)
            {
                font-size:38px;
            }
        }
        .para {
            color: $lightGrey;
            font-size: 24px;
            padding: 0;
            margin: 0 0 30px 0;
            @media($sm-1679)
            {
                font-size: 19px;
            }
        }
        .btn {
            padding: 0;
            margin: 0;
            .button {
                cursor: pointer;
                border-radius: 30px;
                border: 0;
                background: $primary;
                padding: 15px 30px 14px 30px;
                color: $white;
                font-weight: 500;
                font-size: 20px;
                min-width: 260px;
                @extend .display-flex;
                @extend .align-center;
                justify-content: space-between;
                @media($sm-1679)
                {
                    font-size: 17px;
                }
            }
        }
    }
    .banner-img {
        padding: 100px 0;
        margin: 0;
        @extend .display-flex;
        @extend .align-center;
        @extend .justfi-center;
        .img {
            height:450px;
            @media($sm-1679)
            {
                height:350px;
            }
        }
    }
    .bannerSlider {
        .slick-dots {
            margin: 0;
            padding: 0;
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 0;
            position: relative;
            top: -30px;
            li {
                width: 25px;
                height: 4px;
                background: #27d045;
                border-radius: 10px;
                list-style: none;
                cursor: pointer;
                button {
                    display: none;
                }
                &.slick-active {
                    background: $whiteLight;
                }
            }
        }
    }
    &.sub-bnr{
        .txt{
            padding: 41px 0 45px;
            max-width: 100%;
            justify-content: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
    &.sub-bnr-dtl{
        .txt{
            padding: 26px 0;
            max-width: 100%;
            justify-content: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            .title{
                font-weight: 600;
            }
            .features-list{
                display: flex;
                list-style: none;
                padding: 0px;
                margin: 0px;
                flex-wrap: wrap;
                li{
                    font-size: 16px;
                    color: #5A6277;
                    font-weight: 400;
                    border-right: 1px solid #BCC2E6;;
                    padding-right: 20px;
                    padding-left: 13px;
                    &:last-child{
                     border-right: none;
                    }
                }
            }
        }
        .breadcrumb{
            padding: 19px 0;
            align-items: center;
            justify-content: center;
            margin-bottom: 0;
            border: 1px solid #CCc;
        }
    }
    .breadcrumb{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .nav-link{
            color: #5A6277;
            font-size: 14px;
            line-height: 18px;
            display: flex;
            align-items: center;
            margin-right: 11px;
            &::after{
                content: "";
                    width: 7px; 
                    height: 11px; 
                    background:url(../img/arrow-sign-crumbs.svg);
                    background-size: contain;
                    display: inline-block;
                    margin-left: 12px;
            }
            &:last-child{
                color: #6DADED;
                &::after{
                    display: none;
                }
            }
        }
    }
}

.adv-banner {
    background: linear-gradient(91deg, $lightBlue 0%, $primary 100%);
    position: relative;
    overflow: hidden;
    min-height: 420px;
    .txt {
        padding: 80px 0;
        max-width: 415px;
        .title {
            font-size: 52px;
            color: $white;
            font-weight: 700;
            margin: 0;
            padding: 0 0 10px 0;
        }
        .offer {
            @extend .display-flex;
            gap: 10px;
            @extend .align-center;
            margin: 0 0 30px 0;
            .img {
                max-width: 17px;
            }
            .para {
                font-size: 24px;
                color: $white;
            }
        }
        .btn {
            padding: 0;
            margin: 0;
            .button {
                cursor: pointer;
                border-radius: 30px;
                border: 0;
                background: $primary;
                padding: 15px 30px 14px 30px;
                color: $white;
                font-weight: 500;
                font-size: 20px;
                min-width: 260px;
                @extend .display-flex;
                @extend .align-center;
                justify-content: space-between;
            }
        }
    }
    .main-img {
        max-width: 840px;
        position: absolute;
        bottom: 0;
        margin: auto;
        inset: 0 0 0 800px;
    }
}

.card-row-wrap {
    border: 1px solid $whiteLight;
    background: $white;
    padding: 13px 13px 35px 13px;
    max-width: 385px;
    border-radius: 15px;
    .img-carouel-wrap {
        width: 100%;
        height: 269px;
        border-radius: 12px;
        background: #f7f9fd;
        margin: 0 0 35px 0;
        padding: 10px;
        position: relative;
        img {
            max-width: 100%;
            max-height: 230px;
        }
        .thumbImgSlider .slick-slide {
            margin-left: 0px !important;
        }
    }
    .content-wrap {
        .logo {
            max-width: 90px;
            margin: 0 0 10px 0;
        }
        .sub-title {
            color: $lightBlue;
            font-size: 18px;
            font-weight: 600;
            margin: 0 0 10px 0;
            @media($sm-1679)
            {
                font-size: 15px;
            }
        }
        .sub-para {
            color: $lightGrey;
            font-size: 13px;
            margin: 0 0 10px 0;
            @media($sm-1679)
            {
                font-size: 12px;
            }
        }
        .price {
            @extend .display-flex;
            align-items: start;
            gap: 15px;
            margin: 0 0 20px 0;
            .large {
                color: $primary;
                font-size: 24px;
                font-weight: 700;
                line-height: 1;
                @media($sm-1679)
                {
                    font-size: 20px;
                }
            }
            .cross {
                color: $lightGrey;
                font-size: 13px;
                font-weight: 600;
                text-decoration: line-through;
            }
        }
        .offer {
            display: flex;
            gap: 10px;
            align-items: center;
            .off {
                background: $primary;
                border-radius: 30px;
                display: inline-flex;
                @extend .align-center;
                padding: 5px 10px;
                gap: 10px;
                color: $white;
                font-size: 13px;
                font-weight: 600;
                max-height: 26px;
                @media($sm-1679)
                {
                    font-size: 12px;
                }
                img
                {
                    height: 13px;
                }
            }
            .end {
                color: #e70036;
                font-size: 13px;
                font-weight: 600;
                line-height: 1;
                @media($sm-1679)
                {
                    font-size: 12px;
                }
            }
        }
    }
    &.card-col-wrap {
        display: flex;
        max-width: 460px;
        padding: 13px;
        align-items: center;
        .img-carouel-wrap {
            flex: 0 0 180px;
            width: 180px;
            margin: 0;
            height: 250px;
            @media($sm-1679)
            {
                flex: 0 0 160px;
                width: 160px;
            }
            img {
                max-height: 190px;
                @media($sm-1679)
                {
                    max-height: 155px;
                }
            }
            .thumbImgSlider {
                height: 210px;
            }
        }
        .content-wrap {
            padding-left: 20px;
            .logo {
                max-height: 20px;
                max-width: inherit;
                @media($sm-1679)
                {
                    max-height: 16px;
                }
            }
        }
    }
}

.thumbImgSlider {
    width: 100%;
    height: 230px;
    display: flex;
    align-items: center;
    .slick-dots {
        position: absolute;
        bottom: 0;
        margin: 0 0 -15px 0;
        padding: 0;
        display: flex;
        gap: 5px;
        inset: auto 0 0 0;
        justify-content: center;
        li {
            list-style: none;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #b3b8c7;
            cursor: pointer;
            button {
                display: none;
            }
            &.slick-active {
                background: $primary;
            }
        }
    }
    .slick-slide,
    .slick-track {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.deal-badge {
    background: $lightBlue;
    border-radius: 12px 0 12px 0;
    display: flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px 11px 4px 8px;
    z-index: 9;
    .icon {
        width: 12px;
    }
    .txt {
        font-size: 14px;
        font-weight: 500;
        color: $white;
        @media($sm-1679)
        {
            font-size: 12px;
        }
    }
    &.trending {
        background: $secondary;
    }
    &.hot {
        background: #e23e00;
    }
    &.new
    {
        background:#22BB63;
    }
}

.signup-wrap {
    margin: 0 0 70px 0;
    .bg-wrap {
        background: linear-gradient(91deg, $lightBlue 0%, $primary 100%);
        min-height: 380px;
        padding: 0 80px 0 90px;
        border-radius: 30px;
    }
    .content {
        .title {
            font-size: 52px;
            color: $white;
            font-weight: 700;
            margin: 0 0 10px 0;
            @media ($sm-1679){
                font-size: 32px;
                max-width: 74%;
            }
            @media ($sm-1441){
                font-size: 32px;
            }
        }
        .para {
            font-size: 20px;
            color: $white;
        }
    }
    .email-wrap {
        border: 1px solid $white;
        background: rgba(0, 0, 0, 0.05);
        width: 590px;
        height: 87px;
        border-radius: 50px;
        backdrop-filter: blur(30px);
        padding: 15px;
        position: relative;
        @media ($sm-1679){
            height: 64px;
            padding: 10px;
        }
        .txt {
            border: 0;
            color: $white;
            font-size: 20px;
            font-weight: 500;
            background: none;
            outline: 0;
            position: absolute;
            inset: 0;
            padding: 0 230px 0 45px;
            &::placeholder {
                color: $white;
            }
        }
        .button {
            cursor: pointer;
            border-radius: 30px;
            border: 0;
            background: $white;
            padding: 15px 30px 14px 30px;
            color: $lightBlue;
            font-weight: 500;
            font-size: 20px;
            min-width: 205px;
            @extend .display-flex;
            @extend .align-center;
            justify-content: space-between;
            position: absolute;
            inset: auto 15px auto auto;
            margin: auto;
            @media ($sm-1679){
                height: 43px;
            }
        }
    }
}

.all-deal-wrap {
    padding: 120px 0 60px 0;
    &.dtl-list{
        padding: 80px 0 68px;
    }
    .title {
        text-align: center;
        color: $lightBlue;
        font-size: 32px;
        font-weight: 700;
        margin: 0;
        padding: 0 0 60px 0;
        @media ($sm-1679){
            padding-bottom: 40px;
        }
    }
    .card-row-wrap {
        max-width: 100%;
        margin-bottom: 40px;
    }
    .btn-wrap {
        text-align: center;
        padding: 30px 0 0 0;
        .button {
            cursor: pointer;
            border-radius: 30px;
            border: 1px solid #c5c9d9;
            background: #f0f3fd;
            padding: 15px 35px 14px 35px;
            color: $lightBlue;
            font-weight: 500;
            font-size: 20px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
    }
    &.deal-by-day-wrap {
        background: #f9fafc;
        .title-wrap {
            display: flex;
            align-items: center;
            gap: 30px;
            justify-content: center;
            padding-bottom: 40px;
            .title {
                padding: 0;
            }
            .endtime {
                padding: 9px 30px 9px 9px;
                border-radius: 30px;
                background: $lightBlue;
                display: flex;
                align-items: center;
                gap: 15px;
                max-height: 40px;
                .ico {
                    width: 24px;
                }
                .time {
                    color: $primary;
                    font-size: 28px;
                    font-weight: 700;
                    line-height: 1;
                }
            }
        }
    }
}

.logo-listing-wrap {
    padding:10px 0 20px;
    position: relative;
    .slick-slide {
        padding: 0 10px;
    }
    .logo-listing {
        height: 70px;
        min-width: 185px;
        border: 1px solid #c1c7d5;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 15px;
        @media(max-width:1679px)
        {
            height: 57px;
        }
        img {
        }
    }
    &:after {
        height: 100%;
        width: 640px;
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF00 100%) 0% 0%;
        z-index: 9;
        pointer-events: none;
    }
    &:before {
        height: 100%;
        width: 640px;
        position: absolute;
        right: 0;
        top: 0;
        content: "";
        background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF00 100%) 0% 0%;
        z-index: 9;
        pointer-events: none;
    }
}

.featured-deal-wrap {
    padding: 50px 0 100px 0;
    .title {
        color: $lightBlue;
        font-size: 32px;
        font-weight: 700;
        margin: 0;
        padding: 0 0 60px 0;
    }
    .featured-wrap {
        width: 100%;
        .img-carouel-wrap
        {
            .slick-dots {
                position: absolute;
                bottom: 0;
                margin: 0 0 -15px 0;
                padding: 0;
                display: flex;
                gap: 5px;
                inset: auto 0 0 0;
                justify-content: center;
                li {
                    list-style: none;
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    background: #b3b8c7;
                    cursor: pointer;
                    button {
                        display: none;
                    }
                    &.slick-active {
                        background: $primary;
                    }
                }
            }
            .slick-slide,
            .slick-track {
                display: flex;
                justify-content: center;
                align-items: center;
            }
           
          
        }
        .slick-slide
        {
            margin-left: 13px; 
        }
        .price
        {
            align-items: center;
        }
        button.custom-prev.slick-arrow, button.custom-next.slick-arrow
        {
            background: none;
            width:42px;
            height:42px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e0d3d3;

            &:hover
            {
                background-color:#6DADED;
                img
                {
                    filter: brightness(0) invert(1);
                }
            }
           
        }
        button.custom-prev.slick-arrow {
            position: absolute;
            right: 108px;
            top: -101px;
           
        }
        button.custom-next.slick-arrow {
            position: absolute;
            top: -99px;
            right: 35px;
            background: none;
          img {
                rotate: 180deg;
            }
        }
        .slick-dots {
            margin: 0;
            padding: 0;
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 0;
            position: relative;
            top: 60px;
            li {
                width: 25px;
                height: 4px;
                background:$whiteLight;
                border-radius: 10px;
                list-style: none;
                cursor: pointer;
                button {
                    display: none;
                }
                &.slick-active {
                    background: #6DADED;
                }
            }
        }
    }
}