﻿.fs-home-container {
    position: relative;
    top: -40%;
    left: 0;
    z-index: 1;
}

    .fs-home-container section {
        padding-right: clamp(20px, 3vw, 60px)
    }

        .fs-home-container section:nth-child(even) {
            flex-direction: row-reverse;
            padding-right: unset;
            padding-left: clamp(20px, 3vw, 60px)
        }

.fs-home-section-image {
    position: relative;
    width: 55%;
}

section:nth-child(even) .fs-home-cta-image img {
    left: unset;
}

.fs-home-cta-image{
    width:clamp(150px,60vw,950px);
    flex:1;
}

.fs-home-cta-text {
    width: 35%;
    padding: clamp(30px, 3vw,60px);
}

.fs-home-cta-btns-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.fs-home-mobile-categories-container{
    display:none;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
}

.fs-download-app-action-btn {
    width: clamp(150px, 6vw, 220px);
}

.fs-home-download-app-image{
    width:70%;
}

.fs-home-download-app-title {
    font-size: clamp(25px,3vw,50px);
    text-align: center;
    width: 90%;
}

section.fs-sub-plans-container {
    width: 100%;
    background: transparent url("/images/site/fs-sub-plans-bg.png") no-repeat center center;
    background-size: 100% 90%;
    padding: unset;
}


.fs-modal:has(.fs-sub-plans-container) {
    margin-top:clamp(100px,6vw,200px);
}



.fs-sub-plans-swiper{
    width: 90%;
    height: clamp(550px,35vw,700px);
    margin-inline: auto;
}

.fs-modal-sub-plans-swiper {
    width: 90%;
    height: clamp(400px,30vw,600px);
    margin-inline: auto;
    margin-bottom:20px;
}

.fs-sub-plans-swiper .swiper-wrapper{
    padding: 10px;
    box-sizing:border-box;
}

.fs-modal:has(.fs-sub-plans-container) .swiper-wrapper {
    padding: 20px;
    box-sizing: border-box;
}

.fs-sub-plans-swiper .swiper-slide, .fs-modal-sub-plans-swiper .swiper-slide {
    box-shadow: 0px 0px 10px #0000004D;
}

.fs-sub-plan-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--fs-white);
    padding: clamp(20px,2vw,60px);
    padding-top:20px;
    margin-inline: auto;
}

    .fs-sub-plan-card.fs-vas-sub-plan-card {
        width:clamp(250px,25vw,450px);
    }

.fs-sub-plan-card-title {
    width: 100%;
    font-size: clamp(30px,3vw, 60px);
    text-align: center;
    color: var(--fs-dark-brown);
    box-sizing: border-box;
    font-family: roboto-light;
    font-weight: 200;
    margin-top: unset;
    margin-bottom: 20px;
}

.fs-modal:has(.fs-modal-sub-plans-swiper) .fs-sub-plan-card-title {
    width: 100%;
    font-size: clamp(20px,2vw, 40px);
    margin-bottom: 15px;
}

.fs-sub-plan-card-title.orange {
    color: var(--fs-orange);
}

.fs-sub-plan-card-features {
    flex: 1;
    width:80%;
    overflow-y:auto;
}

    .fs-sub-plan-card-features::-webkit-scrollbar {
        width: 4px;
    }

/* Track */
    .fs-sub-plan-card-features::-webkit-scrollbar-track {
        background: rgba(0,0,0,.3);
        border-radius: 2px;
    }

/* Handle */
    .fs-sub-plan-card-features::-webkit-scrollbar-thumb {
        background: var(--fs-orange);
        opacity: .2;
        transition: opacity linear 0.3s;
        border-radius: 2px;
    }

    /* Handle on hover */
        .fs-sub-plan-card-features::-webkit-scrollbar-thumb:hover {
            opacity: .1;
        }


    
.fs-sub-plan-card-features li{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    color:var(--fs-gray);
    gap:30px;
    width:100%;
    font-size:clamp(11px,3vw,18px);
    font-family:roboto-medium;
    font-weight:200;
    letter-spacing:1px;
    padding-block:4%;
}

.fs-modal:has(.fs-modal-sub-plans-swiper) .fs-sub-plan-card-features li {
  
    gap: clamp(5px,1vw,20px);
    font-size: clamp(11px,1vw,16px);
    padding-block: 2%;
}

    .fs-sub-plan-card-features li:before {
        content: '';
        padding: 20px;
        box-sizing: border-box;
    }

.fs-modal:has(.fs-modal-sub-plans-swiper) .fs-sub-plan-card-features li:before {
    padding: clamp(8px,1vw,15px);
}
    .fs-sub-plan-card-features li.fs-available:before {
        background: transparent url("/images/site/fs-checkmark.png") no-repeat center center;
        background-size: 80%;
    }

    .fs-sub-plan-card-features li.fs-unavailable:before {
        background: transparent url("/images/site/fs-xmark.png") no-repeat center center;
        background-size: 75%;
    }

.fs-sub-plan-card-price {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 40px;
    font-size: clamp(30px,3vw,60px);
    font-family:roboto-light;
    font-weight:100;
}

.fs-modal:has(.fs-modal-sub-plans-swiper) .fs-sub-plan-card-price {
    padding-bottom: 20px;
    font-size: clamp(20px,2vw,40px);
}

    .fs-sub-plan-card-price:before {
        content: attr(data-currency);
    }
    .fs-sub-plan-card-price:after {
        content: attr( data-period);
        position: absolute;
        top: 60%;
        font-size: clamp(8px,1.5vw,18px);
        font-family:roboto-medium;
    }

.fs-sub-plan-card .fs-primary-btn {
    padding: 10px 20%;
    font-weight: 200;
    margin-top:10px;
}

.fs-modal:has(.fs-modal-sub-plans-swiper) .fs-sub-plan-card .fs-primary-btn {
    padding: 15px 15%;
    height: clamp(30px,2.5vw,40px);
    box-sizing: border-box;
    border-radius: 20px;
    font-size: clamp(14px,1vw,20px);
}

.fs-home-cta-btn{
    margin:3% auto;
}

.fs-home-mobile-categories-wrapper {
    width: 100%;
    display: grid;
    gap: max(20px,5%);
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(140px,25vw));
    padding: clamp(15px,2vw,40px);
    margin-inline: auto;
}

.fs-home-mobile-category {
    display: flex;
    flex-direction: column;
    gap: max(10px,2%);
    border:1.3px solid var(--fs-dark-brown);
    border-radius:clamp(10px,1vw,20px);
    justify-content: flex-start;
    align-items: center;
    width:100%;
    padding: max(10px,2%);
    box-sizing:border-box;
}

.fs-home-mobile-category-title{
    color:var(--fs-orange);
    font-family:roboto-bold;
    font-size:clamp(14px,3vw,25px);
    margin:0;
}

.fs-home-mobile-category-image {
    width:100%;
    min-width:100px;
}

    .fs-home-mobile-category-image img{
        width:100%;
    }

    @media screen and (max-width:1200px) {
        .fs-sub-plan-card-features {
        width: 68%;
    }

        .fs-sub-plan-card-features li {
            gap: 15px;
        }

            .fs-sub-plan-card-features li:before, .fs-sub-plan-card-features li.fs-available:before, .fs-sub-plan-card-features li.fs-unavailable:before {
                padding: 10px;
            }
}

@media screen and (max-width:900px) {
    .fs-sub-plan-card-features {
        width: 85%;
    }
}


@media screen and (max-width:768px) {

        section {
            flex-wrap: wrap;
            padding: unset;
        }

    .fs-home-container section:nth-child(even), .fs-home-container section:nth-child(odd) {
        padding: unset;
    }

        .fs-home-cta-text {
            width: 100%;
            padding: clamp(15px, 3vw,30px);
            text-align: center;
        }

        .fs-home-section-image {
            position: relative;
            width: 90%;
        }

    .fs-home-cta-image {
        width: 70%;
        flex:unset;
    }

        section.fs-sub-plans-container {
            margin-top: 20px;
        }

    .fs-sub-plans-swiper {
        width: 100%;
        height: clamp(350px,85vw,550px);
        margin-inline: auto;
    }

            .fs-sub-plans-swiper .swiper-wrapper {
                padding-inline: 0;
            }

        .fs-sub-plan-card-title {
            margin-block: 5px;
        }

        .fs-sub-plan-card-features li {
            padding-block: 3%;
        }

        .fs-sub-plan-card-price {
            padding-bottom: 20px;
        }

            .fs-sub-plan-card-price:after {
                top: 33px;
                font-size: 10px;
            }

        .fs-home-download-app-title{
            width:100%;
        }

        .fs-home-mobile-categories-container{
            display:flex;
        }
    }

@media screen and (max-width:480px){

    .fs-home-cta-image{
        margin-top:15%;
    }

    .fs-sub-plans-swiper {
        height: clamp(350px,100vw,450px);
    }

    .fs-modal-sub-plans-swiper {
        width: 100%;
        height: clamp(350px,30vw,450px);
        margin-bottom:10px;
    }

    .fs-modal:has(.fs-modal-sub-plans-swiper) {
       border-radius:20px;
    }

        .fs-modal-sub-plans-swiper .fs-sub-plan-card-features{
            width:100%;
        }
}