@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

section {
  scroll-margin-top: 80px;
}

html {
  scroll-behavior: smooth;
}

*{

    padding: 0px;

    margin: 0px;

    box-sizing: border-box;

}

body{

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(14px, 1vw, 16px);

    color: var(--Black);

}

:root{

    /* Font Family */

    --font-family-1: "Rubik", sans-serif;

    /* Color's */

    --Primary: #3B82F6;

    --Secondary: #011A24;

    --Black: #000000;

    --White: #FFFFFF;

    --Border:  #DEE2E6;

    --bg-1:  #F2F2FF;

    --bg-2:  #FCFBFF;

    --Transition: all 0.3s ease-in-out;

}

a{

    text-decoration: none;

    color: inherit;

    display: inline-block;

}

ul{

    padding: 0px;

    margin: 0px;

    list-style: none;

}

h1, h2, h3, h4, h5, h6, p{

    margin: 0px;

}

.button-style {

    padding: clamp(10px, 1vw, 12px) clamp(18px, 2vw, 24px);

    font-size: clamp(14px, 1vw, 16px);

    border: 1px solid;

    border-radius: 4px;

    text-align: center;

    outline: none;

    transition: var(--Transition);

    font-family: var(--font-family-1);

    font-weight: 400;

    background: transparent;

}

.btn-white{

    background-color: var(--White);

    border-color: var(--White);

    color: var(--Secondary);

}

.btn-white:hover{

    background-color: transparent;

    color: var(--White);

}

.btn-white-transparent{

    background-color: transparent;

    border-color: var(--White);

    color: var(--White);

}

.btn-white-transparent:hover{

    background-color: var(--White);

    color: var(--Secondary);

}

.btn-primary{

    background-color: var(--Primary);

    border-color: var(--Primary) !important;

    color: var(--White);

}

.btn-primary:hover{

    background-color: transparent;

    color: var(--Primary) !important;

}

.btn-primary-transparent{

    background-color: transparent;

    border-color: var(--Primary);

    color: var(--Primary);

}

.btn-primary-transparent:hover{

    background-color: var(--Primary);

    color: var(--White);

}





/* Pages Css Started-------------------------------------------------------------------------------------------------- */

/* HEADER START */

.sticky-header{

    position: fixed;

    top: 0px;

    width: 100%;

    z-index: 999;

    transition: var(--Transition);

}

.sticky-header.active {

    background: var(--White);

    box-shadow: 0 5px 20px rgba(0,0,0,0.1);

}

.header{

    padding: clamp(12px, 2vw, 20px) 0;

    position: static;

}

.header .logo{

    max-width: 127px;

    width: 100%;

}

.header .logo a,

.header .logo a img{

    width: 100%;

}

.header .navbars ul li a{

    color: var(--Secondary);

    transition: var(--Transition);

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(14px, 1vw, 16px);

}

.header .navbars ul li a:hover{

    color: var(--Primary);

}

.header .navbars{

    display: flex;

    align-items: center;

    gap: 24px;

}

.header .navbars nav ul{

    display: flex;

    align-items: center;

    gap: 32px;

}

.header #language{

    background-color: transparent;

    outline: none;

    border: none;

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: 16px;

    color: var(--Secondary);

    cursor: pointer;

}

button#open-toggle{

    display: none;

    height: clamp(40px, 4vw, 48px);

    width: clamp(40px, 4vw, 48px);

}

.header .navbars .menu-head{

    display: none;

}



.d-none-2{

    display: none;

}

.d-none-1{

    width: 100%;

}

@media (min-width: 1025px) {

    .d-none-1{

        display: none;

    }

    .d-none-2{

        display: block;

    }

}

/* HEADER.PHP END */

/* Responsive */

@media (max-width: 1024px) {

    /* Menu Design */

    .header .navbars {

        position: fixed;

        top: 0px;

        left: 0px;

        width: 280px;

        background: var(--White);

        height: 100%;

        z-index: 9;

        flex-direction: column;

        align-items: start;

        padding: 20px;

        overflow-y: scroll;

        transform: translateX(-100%);

        transition: var(--Transition);

    }

    body.menu-open .header .navbars{

        transform: translateX(0%);

    }

    .header .navbars nav{

        width: 100%;

    }

    .header .navbars a.button_1{

        width: 100%;

        text-align: center;

    }

    .header .navbars nav ul li,

    .header .navbars nav ul li a{

        width: 100%;

        color: var(--Secondary);

    }

    .header .navbars nav ul {

        display: flex;

        align-items: start;

        gap: 16px;

        flex-direction: column;

    }

    button#open-toggle{

        display: block;

        border-radius: 100px;

        height: 48px;

        width: 48px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 1px solid var(--Secondary);

        color: var(--White);

        background-color: var(--Secondary);

    }

    .header .navbars .menu-head {

        display: flex;

        align-items: center;

        gap: 8px;

        border-bottom: 1px solid ;

        width: 100%;

        padding-bottom: 10px;

    }

    body.menu-open {

        overflow: hidden;

    }

    body.menu-open .header .navbars a.btn-white {

        background: var(--Secondary);

        width: 100%;

        color: var(--White);

    }

    #overlay {

        display: none;

        position: fixed;

        top: 0px;

        left: 0px;

        bottom: 0px;

        right: 0px;

        background-color: var(--Black);

        opacity: 0.5;

        width: 100%;

        height: 100%;

        z-index: 9;

    }

    body.menu-open #overlay {

        display: block;

    }

    #close-toggle{

        background-color: transparent;

        border: none;

    }

}

/* @media (max-width: 575px) {

    .header .logo {

        max-width: 150px;

    }

} */





/* Main Start --------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------- */

.hero-banner{

    /* background: linear-gradient(110.65deg, var(--bg-2) 0%, #FFE9EE 50.19%, #FFFDFE 100%); */

    min-height: 372px;

    padding-top: calc(90px + clamp(20px, 4vw, 32px));

    display: flex;

    align-items: center;

    background-position: bottom center;

    background-repeat: no-repeat;

    background-size: cover;

}

.hero-banner .content{

    max-width: 588px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 32px;

}

.hero-banner .content h1{

    font-family: var(--font-family-1);

    font-weight: 600;

    font-size: clamp(28px, 5vw, 48px);

    text-align: center;

    color: var(--Secondary);

}

.hero-banner .content h1 span{

    color: var(--Primary);

}

.hero-banner .content p{

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(14px, 1.2vw, 16px);

    text-align: center;

    color: var(--Secondary);

    opacity: 0.6;

}

.check-availability .vcard-alias-search{

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--Secondary);

    background-color: var(--White);

    padding: 4px;

    border-radius: 4px;

}

.check-availability .vcard-alias-search label{

    display: block;

    width: 100%;

}

.check-availability .vcard-alias-search input{

    height: clamp(44px, 5vw, 50px);

    font-size: clamp(14px, 1vw, 16px);

    width: 100%;

    border: none;

    outline: none;

    background-color: transparent;

    padding: 12px;

    font-family: var(--font-family-1);

    font-weight: 400;

}

.check-availability .vcard-alias-search button{

    white-space: nowrap;

}

.card-banner {

    min-height: 627px;

    padding-top: 32px;

    display: flex;

    align-items: center;

    background-position: top center;

    background-repeat: no-repeat;

    background-size: cover;

    margin-top: -1px;

}

.card-banner .image {
    text-align: center;
    max-width: 350px;
    margin: auto auto 40px;
    position: relative;
}

.card-banner .image img{
    max-width: 350px;
}
.card-banner .image .card-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}
.card-banner .image .card-content h4 {
    font-size: 15px;
    text-align: start;
    color: var(--White);
    font-weight: 500;
}
.card-banner .image .card-content p {
    font-size: 12px;
    text-align: start;
    color: var(--White);
    font-weight: 300;
}
.card-banner .image .card-content .chip{
    height: 34px;
    width: 34px;
    min-width: 34px;
    object-fit: contain;
    aspect-ratio: 34 / 34;
    border-radius: 4px;
}
.card-banner .image .card-content .card-logo{
    width: 130px;
    height: 36px;
    min-width: 130px;
    object-fit: contain;
    aspect-ratio: 130 / 36;
}


/* section title */

.section-title{

    margin-bottom: clamp(16px, 2vw, 24px);

}

.section-title h2{

    display: inline-block;

    position: relative;

    color: var(--Black);

    padding: 0px 4px;

    font-size: clamp(22px, 3vw, 32px);

}

.section-title h2::before{

    content: "";

    position: absolute;

    width: 100%;

    left: 0px;

    right: 0px;

    bottom: 0px;

    background-color: var(--Primary);

    height: clamp(10px, 1.5vw, 16px);

}

.section-title h2 span{

    position: relative;

    z-index: 1;

}

.section-title p{

    opacity: 0.6;

    font-size: clamp(14px, 1.2vw, 16px);

    margin-top: clamp(6px, 1vw, 8px);

    color: var(--Black);

}



/* vCard Section */

.vcard-section .tabs {

    width: 100%;

}

.vcard-section .tab-buttons {

    display: flex;

    gap: clamp(8px, 2vw, 16px);

    background-color: var(--bg-1);

    padding: clamp(4px, 1vw, 8px);

    border-radius: 6px;

    overflow-x: scroll;

    white-space: nowrap;

}

.vcard-section .tab-buttons::-webkit-scrollbar{

    display: none;

}

.vcard-section .tab-btn {

    padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 20px);

    border: none;

    background: transparent;

    cursor: pointer;

    position: relative;

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(13px, 1.2vw, 16px);

    border-radius: 6px;

}

.vcard-section .tab-btn.active {

    color: var(--Secondary);

    background: var(--bg-2);

    box-shadow: 0px 0px 14px 0px #00000026;

}

.vcard-section .tab-content {

    display: none;

    padding: clamp(16px, 3vw, 40px) 0;

}

.vcard-section .tab-content.active {

    display: block;

}

.vcard-section .tab-content .image img{

    border-radius: clamp(16px, 3vw, 30px);

}

.vcard-section .tab-content .content p{

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(18px, 3vw, 32px);

    color: var(--Secondary);

    margin-bottom: clamp(16px, 3vw, 32px);

}

.vcard-section .tab-content .content .name{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(16px, 2vw, 24px);

    color: var(--Secondary);

}

.vcard-section .tab-content .content .categories{

    opacity: 0.6;

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(13px, 1.5vw, 16px);

    color: var(--Secondary);

}



/* Services Section */

.services-section{

    background-color: var(--bg-1);

}

.services-section .service-card {

    background: var(--White);

    padding: clamp(14px, 2vw, 16px);

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

    height: 100%;

    min-height: 240px;

}

.services-section .service-card h4 {

    margin-top: 8px;

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(15px, 1.2vw, 16px);

}

.services-section .service-card p {

    font-size: 14px;

    opacity: 0.6;

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(13px, 1vw, 14px);

    margin-top: 4px;

}

.services-section .icon {

    width: clamp(40px, 4vw, 50px);

    height: clamp(40px, 4vw, 50px);

    font-size: clamp(16px, 2vw, 20px);

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;
    overflow: hidden;

}

.services-section .icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-section .service-prev,

.services-section .service-next {

    position: absolute;

    bottom: -40px;

    left: 0;

    background: #0f172a;

    color: #fff;

    border: none;

    width: clamp(34px, 4vw, 40px);

    height: clamp(34px, 4vw, 40px);

    border-radius: 50%;

}

.services-section .service-next {

    left: 50px;

}



/* card section */

.card-section .content{

    background-color: var(--White);

    box-shadow: 0px 0px 10px 0px #00000026;

    border-radius: 10px;

    overflow: hidden;

    height: 100%;

}

.card-section .content .image {

    overflow: hidden;

}

.card-section .content .image img{

    aspect-ratio: 424/248;

    object-fit: cover;

    transition: var(--Transition);

}

.card-section .content:hover .image img{

    transform: scale(1.04);

}

.card-section .content h3{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(16px, 2vw, 20px);

    color: var(--Secondary);

    margin-bottom: 8px;

}

.card-section .content p{

    opacity: 0.6;

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(14px, 1.8vw, 16px);

    color: var(--Black);

}



/* plans */

/* .plans .content{

    background-color: var(--White);

    border-radius: 10px;

    border: 1px solid var(--Border);

}

.plans .content h3{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(22px, 4vw, 32px);

    text-transform: uppercase;

    color: var(--Secondary);

}

.plans .content p{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(14px, 2vw, 16px);

    color: var(--Secondary);

    text-align: end;

}

.plans .content h4{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(14px, 2vw, 16px);

    color: var(--Secondary);

    margin-bottom: 4px;

}

.plans .content span{

    font-family: var(--font-family-1);

    font-weight: 300;

    font-size: clamp(13px, 1.8vw, 16px);

    color: var(--Secondary);

} */



/* FAQ */

.faq-section{

    background-color: var(--bg-1);

}

.faq-wrapper {

    max-width: 850px;

    margin: auto;

    background: var(--White);

    border-radius: 20px;

    box-shadow: 0px 0px 14px 0px #00000024;

    overflow: hidden;

}

.faq-item {

    border-bottom: 1px solid var(--Border);

}

.faq-item:last-child {

    border-bottom: none;

}

.faq-question {

    width: 100%;

    padding: clamp(14px, 2vw, 18px) clamp(16px, 3vw, 22px);

    background: transparent;

    border: none;

    outline: none;

    text-align: left;

    font-size: clamp(14px, 2vw, 16px);

    font-weight: 500;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: var(--Transition);

}

.faq-answer {

    display: none;

    padding: 0 clamp(16px, 3vw, 22px) clamp(14px, 2vw, 18px);

    font-size: clamp(13px, 1.8vw, 15px);

    color: var(--Secondary);

}

.faq-question .icon {

    width: 8px;

    height: 8px;

    border-right: 2px solid var(--Secondary);

    border-bottom: 2px solid var(--Secondary);

    transform: rotate(45deg);

    transition: 0.3s;

}

.faq-item.active .faq-answer {

    display: block;

}

.faq-item.active .icon {

    transform: rotate(-135deg);

}



/* contact-section */

.contact-section h2{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(18px, 3vw, 24px);

    color: var(--Secondary);

}

.contact-section .content a .icon{

    height: 52px;

    width: 52px;

    min-width: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 100%;

    background-color: var(--Secondary);

    color: var(--White);

    font-size: 20px;

    transition: var(--Transition);

}

.contact-section .content a:hover .icon{

    background-color: var(--Primary);

}

.contact-section .content a span{

    font-family: var(--font-family-1);

    font-weight: 300;

    font-size: clamp(14px, 2vw, 16px);

    color: var(--Black);

}

.contact-section .content a span b{

    font-weight: 500;

    transition: var(--Transition);

}

.contact-section .content a:hover span b{

    color: var(--Primary);

}

.contact-section .form-content{

    background-color: var(--bg-1);

    padding: clamp(16px, 3vw, 20px);

    border-radius: 10px;

}

.contact-section .form-content label{

    display: block;

}

.contact-section .form-content label input,

.contact-section .form-content label textarea{

    background-color: var(--White);

    padding: clamp(10px, 2vw, 12px) clamp(14px, 2vw, 16px);

    border-radius: 4px;

    border: 1px solid var(--Border);

    width: 100%;

    outline: none;

    font-family: var(--font-family-1);

    font-weight: 400;

    font-size: clamp(14px, 2vw, 16px);

    color: var(--Secondary);

    transition: var(--Transition);

}

.contact-section .form-content label input::placeholder,

.contact-section .form-content label textarea::placeholder{

    color: var(--Secondary);

}

.contact-section .form-content label input:focus,

.contact-section .form-content label textarea:focus{

    border: 1px solid var(--Primary);

}



/* Footer */

footer{

    background: linear-gradient(98.94deg, #FFFFFF 0%, rgba(59, 130, 246, 0.2) 49.66%, #FFFDFE 100%);

}

footer .copyright{

    border-top: 1px solid var(--Black);

}

footer .copyright p{

    font-weight: 300;

    font-size: clamp(13px, 1.8vw, 16px);

    color: var(--Black);

}

footer .copyright .right{

    font-weight: 300;

    font-size: clamp(13px, 1.8vw, 16px);

    color: var(--Black);

}

footer .copyright .right a{

    transition: var(--Transition);

}

footer .copyright .right a:hover{

    color: var(--Primary);

}

footer .logo{

    max-width: 127px;

    width: 100%;

}

footer .logo a,

footer .logo a img{

    width: 100%;

}

footer  .content .site-word{

    font-family: var(--font-family-1);

    font-weight: 300;

    font-size: clamp(22px, 5vw, 36px);

    color: var(--Black);

    margin-top: 16px;

}

footer  .content h3{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(14px, 2vw, 16px);

    color: var(--Black);

    margin-bottom: 16px;

}

footer  .content ul li{

    font-family: var(--font-family-1);

    font-weight: 300;

    font-size: clamp(18px, 4vw, 32px);

    color: var(--Black);

}

footer  .content h4{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(22px, 5vw, 36px);

    color: var(--Secondary);

    margin-bottom: 8px;

}

footer  .content h5{

    font-family: var(--font-family-1);

    font-weight: 500;

    font-size: clamp(14px, 2vw, 16px);

    color: var(--Black);

    margin-bottom: 8px;

}

footer  .content p{

    font-family: var(--font-family-1);

    font-weight: 300;

    font-size: clamp(16px, 3vw, 24px);

    color: var(--Black);

    margin-bottom: 16px;

}

footer  .content .follow-icon a{

    font-size: 20px;

    color: var(--Secondary);

    transition: var(--Transition);

    margin-right: 8px;

}

footer  .content .follow-icon a:hover{

    color: var(--Primary);

}

/* vcards-section */
.vcards-section .vcards-prev,
.vcards-section .vcards-next {
    position: absolute;
    bottom: -40px;
    left: 0;
    background: #0f172a;
    color: #fff;
    border: none;
    width: clamp(34px, 4vw, 40px);
    height: clamp(34px, 4vw, 40px);
    border-radius: 50%;
}
.vcards-section .vcards-next {
    left: 50px;
}
.vcards-section .vcards-card {
    max-height: 550px;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(64, 60, 72, .1);
}
.vcards-section .vcards-card::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}
.vcards-section .vcards-card p{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 24px;
    text-align: center;
    color: var(--White);
    font-size: 24px;
    font-weight: 500;
    font-family: var(--font-family-1);
    z-index: 1;
}
.vcards-section .vcards-card .image{
    height: 100%;
}
.vcards-section .vcards-card .image img{
    height: 550px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
    transition: all 8s ease;
    width: 100%;
}
.vcards-section .vcards-card:hover .image img {
    -o-object-position: left;
    object-position: left;
    transform-origin: 50% 50%;
    transition-duration: .5s;
    transition: all 8s ease;
}
.vcards-section .vcards-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 991px) {
    .vcards-section .vcards-slider {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (max-width: 575px) {
    .vcards-section .vcards-slider {
        grid-template-columns: repeat(1, 1fr);
    }
}
.center-slider .slick-slide {
    border-radius: 20px;
    height: 600px;
    margin: 0 10px;
    opacity: .5;
    overflow: hidden;
    transform: scale(.8);
    transition: all .4s ease-in-out;
}
.center-slider .slick-current.slick-active+.slick-active,
.center-slider .slick-active:has(+.slick-current) {
    opacity: .8;
    transform: scale(.9);
}
.center-slider .slick-current.slick-active {
    border-radius: 20px;
    opacity: 1;
    overflow: hidden;
    transform: scale(1);
}
.center-slider .slick-arrow {
    align-items: center;
    background-color: var(--Secondary);
    border: none;
    border-radius: 50%;
    box-shadow: 0 5px 10px #00000026;
    color: var(--White);
    display: flex;
    font-size: 20px;
    height: 50px;
    justify-content: center;
    min-width: 50px;
    position: absolute;
    width: 50px;
    z-index: 5;
}
.center-slider .next-arrow {
    right: 25px;
    top: 45%;
}
.center-slider .prev-arrow {
    left: 25px;
    top: 45%;
}

.hero-inner{
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-position: center;
    background-size: contain;
    position: relative;
}
.hero-inner::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
}
.hero-inner .content{
    position: relative;
    z-index: 1;
}
.hero-inner .content h2{
    color: var(--White);
}











/* ===========================
   PRICING PLANS STYLE
   Compact like Profyle
=========================== */

.plans{
    background: var(--bg-1);
    position: relative;
}

/* CARD */
.pricing-card{
    background: var(--White) !important;
    border-radius: 18px !important;
    border: 1px solid var(--Border) !important;
    box-shadow: none;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    padding: 26px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pricing-card.active-card{
    border: 2px solid var(--Secondary) !important;
}

/* TITLE */
.pricing-card h3{
    font-size: clamp(18px,1.8vw,26px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--Secondary);
    margin-bottom: 6px;
}

.pricing-card h3 span{
    color: var(--Primary);
}

/* SUBTITLE */
.plan-subtitle{
    font-size: 14px !important;
    color: var(--Primary) !important;
    font-weight: 500 !important;
    text-align: left !important;
    margin-bottom: 14px !important;
}

/* DIVIDER */
.pricing-card hr{
    border-color: var(--Border);
    margin: 16px 0;
}

/* DESCRIPTION */
.plan-description{
    font-size: 14px !important;
    line-height: 1.55;
    color: var(--Secondary) !important;
    font-weight: 400 !important;
    margin-bottom: 0;
}

/* SECTION HEADING */
.plan-list h4{
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--Secondary) !important;
    margin-bottom: 12px;
}

.plan-list h4.optional{
    color: #777777 !important;
}

/* PRICE ROW */
.price-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.price-row span{
    font-size: 14px !important;
    color: var(--Secondary) !important;
    font-weight: 400 !important;
    line-height: 1.45;
}

.price-row strong{
    font-size: 14px;
    color: var(--Secondary);
    font-weight: 600;
    white-space: nowrap;
}

/* STRIKE PRICE */
.old-price strong{
    text-decoration: line-through;
}

/* LIGHT OPTIONAL TEXT */
.light-text span,
.light-text strong{
    color: #8b8b8b !important;
}

/* TOTAL BOX */
.total-box{
    margin-bottom: 22px;
}

.subtotal span,
.subtotal strong{
    color: var(--Primary) !important;
    font-weight: 600;
}

.savings span,
.savings strong{
    color: #4caf50 !important;
    font-weight: 600;
}

.total{
    margin-top: 8px;
}

.total span,
.total strong{
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--Secondary) !important;
}

/* BUTTONS */
.buy-btn,
.trial-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
}

.buy-btn{
    background: var(--Primary);
    color: var(--White);
    margin-bottom: 10px;
}

.buy-btn:hover{
    background: var(--Primary);
    color: var(--White);
}

.trial-btn{
    background: #f2f1ef;
    color: var(--Secondary);
}

.trial-btn:hover{
    background: #e8e6e3;
    color: var(--Secondary);
}

/* FOOTNOTE */
.pricing-card small{
    display: block;
    text-align: center;
    font-size: 10px;
    color: #8a8a8a;
    margin-top: 12px;
    line-height: 1.3;
}

/* BEST SELLER BADGE */
.best-seller{
    display: inline-block;
    background: #dff0c8;
    color: #7bb91b;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

/* RESPONSIVE */
@media(max-width:991px){

    .pricing-card{
        padding: 22px !important;
    }

    .pricing-card h3{
        font-size: 24px;
    }

    .plan-description{
        font-size: 14px !important;
    }
}

@media(max-width:767px){

    .pricing-card h3{
        font-size: 22px;
    }

    .price-row{
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .price-row strong{
        white-space: normal;
    }

    .total span,
    .total strong{
        font-size: 16px !important;
    }

    .buy-btn,
    .trial-btn{
        height: 42px;
        font-size: 13px;
    }
}