@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Merriweather&display=swap');
:root{
    --primary-color:    #00aeb1;
    --accent-color:     #7450b8;
    --heading-color:    #263238;
    --font-color:       #4d5052;
}
body{
    scroll-behavior: smooth;
    font-family: 'IBM Plex Sans', sans-serif;
}

/* landing page css */
.text-primary   {color: var(--primary-color) !important;}
.text-accent    {color: var(--accent-color) !important;}
.bg-primary     {background: var(--primary-color) !important;}
.bg-accent      {background: var(--accent-color) !important;}
.avatar         {width: 52px;height: 52px;border-radius: 52px;margin-left: -16px;border: 4px solid var(--bs-white);}
.font-heading   {font-family: 'Merriweather', serif;}
.section        {padding: 60px 0 0 0;}

/* Bootstrap overwite css */
.btn-link{color: var(--primary-color);font-size: 20px;text-decoration: none;}
.btn-link:hover{color: var(--primary-color);font-size: 20px;}
.btn-primary{background-color: var(--primary-color);}
.btn-accent{background-color: var(--accent-color);color: var(--bs-white);}


/* Handcrafted Pages Swiper */
.section-swiper {position: relative;width: 100%;margin-inline: auto;overflow: hidden;}
.swiper {width: calc(min(1300px, 90%));margin: 0 auto;min-height: 560px;overflow: visible;}
.swiper-button-next:after,
.swiper-button-prev:after{ color: var(--accent-color);font-size: 28px;}
@media screen and (min-width: 500px) {
    .swiper {
        display: grid;
    }
}
.swiper-slide {
    width: 300px;
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: height 0.5s ease-in-out !important;
    overflow: hidden;
    position: relative;
    background: url("../images/slide/slide-1.png") no-repeat 50% 50%/cover;
}
.swiper-slide:nth-of-type(2) {background: url("../images/slide/slide-2.png") no-repeat 50% 50%/cover;}
.swiper-slide:nth-of-type(3) {background: url("../images/slide/slide-3.png") no-repeat 50% 50%/cover;}
.swiper-slide:nth-of-type(4) {background: url("../images/slide/slide-4.png") no-repeat 50% 50%/cover;}
.swiper-slide:nth-of-type(5) {background: url("../images/slide/slide-5.png") no-repeat 50% 50%/cover;}

.swiper-slide.swiper-slide-active {height: 360px;overflow: visible;}
.swiper-slide:hover {height: 360px;overflow: visible;}
.swiper-slide .btn-more { cursor: pointer; background: var(--accent-color); display: inline-block; width: 50px; height: 50px; display: grid; place-content: center; border-radius: 50%; letter-spacing: 2px; font-size: 0.7rem; position: absolute; right: 15px; top: 15px; transition: 0.8s ease-in-out; opacity: 0; visibility: hidden; color: var(--bs-white);}
.swiper-slide .swiper-content {background: var(--bs-white);transform: translatey(100px);transition: transform 0.7s;overflow: hidden;visibility: hidden;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
.swiper-slide .swiper-content-inner { padding: 24px 16px; }
.swiper-slide.swiper-slide-active .swiper-content { transform: translatey(100px); visibility: visible; }
.swiper-slide:hover .swiper-content { transform: translatey(100px); visibility: visible; }
.swiper-slide:hover .btn-more { opacity: 1; visibility: visible; }
.swiper-slide.swiper-slide-active .btn-more { opacity: 1; visibility: visible; }

#key_features svg{min-width: 40px;}
.client-logo img{filter: grayscale(100%);opacity: 0.7;}
.client-logo li:hover img{filter: none;opacity: 1;}

/* main{background: var(--bs-gray-200);} */
main .faqs{padding: 120px 0;}
main .faqs .accordion-button:focus{outline: none;box-shadow: none;}
main .faqs .accordion-button:not(.collapsed){color: var(--primary-color);background-color: #000;border-color: var(--primary-color);}

#Plan .bb{border-bottom: 8px solid var(--accent-color);}
.f-link a{font-size: 18px; color: var(--dynamic-color); text-decoration: none;padding:6px 8px;}
.f-link a:hover{background-color: var(--dynamic-color);color: var(--bs-white);}

@media (min-width: 992px) { 
    .section        {padding: 80px 0 20px 0;}
}