@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Quicksand:wght@300..700&display=swap');

@keyframes moveBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

body {
    background-image: url('https://kassar.dev/Fablea/img/fablea-bg.jpg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-color: #1E1921;
    color: #C3C3C3;
    font-family: 'Plus Jakarta Sans', sans-serif;
    animation: moveBackground 180s linear infinite;
}

@media (min-width: 1199.99px) and (max-width: 2009px) {

    body {
    background-image: url('https://kassar.dev/Fablea/img/fablea-bg-2x.jpg');
    }

}


/*Sections*/



/* Colors */
.orange-txt {
    color: #EE7103
}

.orange-bg {
    background-color: #EE7103;
    color: #ffffff
}

.footer {
    background-color: #2D2731;
    text-align: center;
    padding: 50px 20px;
}

/* Fonts */
p {line-height: 1.5em;}
h1.hero {
    font-size: 3.5em;
    text-transform: uppercase;
    font-family: 'Quicksand';
    font-weight:600;
    padding-top:100px;


}

h2 { color: #000000;
    font-size:2.5em;
    text-transform: uppercase;
    text-align: center;
}

h3 {
    color: #EE7103;
    font-family: 'Quicksand';
    font-weight:500;
    font-size:2.5em;
}


h4 {
    font-family: 'Quicksand';
    color: #FDC54F;
    font-size:2em;
}


h4.benefits{
    font-size: 1.5em;

} 

h5 {
    line-height: 1.5em;
}

.features {
        color:#C3C3C3;
        font-size: 1.2em;
}

.benefits {
    color:#C3C3C3;
    font-size: 1.2em;
}

.benefit-boxes{
    padding: 23px 75px !important;
}

p.benefits {
        color:#C3C3C3;
        font-size: 1.2em;
}

p.lead {font-size:1.6em}

/* Navigation */
.navbar-toggler {
    border-color: #ffffff;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Custom spacing for navigation items */
.navbar-nav .nav-item:not(:last-child) {
    margin-right: 1rem;
    font-family: 'Plus Jakarta Sans';

}


.navbar-nav .nav-link {
    color: #ffffff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    font-family: 'Plus Jakarta Sans';

}

.navbar-nav .nav-link:hover {
    color: #EE7103;
}

.active-link {
    color: #EE7103 !important;
}

.active-link:hover{
    color: #FDC54F !important;
}

.footer-link {
    color: #C3C3C3;
    font-weight: 600;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.footer-link:hover {
    color: #EE7103;
}

.footer-text {
    font-size: .7em;
}

.dropdown-menu {
    background-color: #1E1921;
}

.dropdown-item {
    color: #ffffff;
}

.dropdown-item:hover {
    background-color: #EE7103;
    color: #ffffff;
}

 /* Buttons */
 .btn-custom {
    background-color: #EE7103;
    border-color: #EE7103;
    color: #ffffff;
    border-radius:100px;
    font-family: 'Plus Jakarta Sans';
    padding: 5px 40px 8px 40px;
    text-transform: uppercase;
    font-size:.95em;
    font-weight:600;
    
}

.btn-custom:hover {
    background-color: #d86603;
    border-color: #d86603;
    color: #ffffff;
}

.btn-custom-white {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #EE7103;;
    border-radius:100px;
    font-family: 'Plus Jakarta Sans';
    padding: 5px 40px 8px 40px;
    text-transform: uppercase;
    font-size:.95em;
    font-weight:600;
    
}

.btn-custom-white:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff;
}

.btn-close {
        background: rgba(255,255,255,0.5) !important;
        color:#ffffff;
    
        padding-top: 5px;
        padding-bottom: 15px;
    }
}

/* Updated Custom Testimonial Carousel Styles */
.testimonial-carousel {
    padding: 50px 0;
    overflow: hidden;
}

.testimonial-container {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial-card {
    flex: 0 0 33.333%;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

@media (max-width: 767px) {
    .testimonial-card {
        flex: 0 0 100%;
    }
}

.testimonial-name { 
    color: #FDC54F;
}

.testimonial-card-inner {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    border: 2px solid #9C9494;
}

.testimonial-card.active .testimonial-card-inner {
    transform: scale(1.05);
    background-color: rgba(149, 133, 163, 0.5);
}

@media (max-width: 767px) {
    .testimonial-card.active .testimonial-card-inner {
        transform: scale(1);
    }
}

.testimonial-card:not(.active) .testimonial-card-inner {
    opacity: 0.6;
}

.testimonial-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* Navbar Styles */
.navbar {
    transition: background-color 0.3s ease;
}

.navbar .navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar.scrolled {
    background-color: white !important;
}

.navbar.scrolled.scrolling-up .navbar-nav .nav-link,
.navbar.scrolled.scrolling-up .navbar-brand {
    color: rgb(255, 255, 255) !important;
}

.navbar.scrolled.scrolling-up .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled.scrolling-down .navbar-nav .nav-link,
.navbar.scrolled.scrolling-down .navbar-brand {
    color: white !important;
}

.navbar.scrolled.scrolling-down .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled.scrolling-down {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.navbar.menu-expanded {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.navbar.menu-expanded .navbar-nav .nav-link,
.navbar.menu-expanded .navbar-brand {
    color: white !important;
}

.navbar.menu-expanded .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
    .navbar.menu-expanded .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        padding: 1rem;
        border-radius: 0.25rem;
    }
}

/* Carousel Styles */
.testimonial-carousel {
    padding: 50px 0;
    overflow: hidden;
}

.testimonial-container {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial-card {
    flex: 0 0 33.333%;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

@media (max-width: 767px) {
    .testimonial-card {
        flex: 0 0 100%;
    }
}

.testimonial-card-inner {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    border: 2px solid #9C9494;
}

.testimonial-card.active .testimonial-card-inner {
    transform: scale(1.05);
    background-color: rgba(149, 133, 163, 0.5);
}

@media (max-width: 767px) {
    .testimonial-card.active .testimonial-card-inner {
        transform: scale(1);
    }
}

.testimonial-card:not(.active) .testimonial-card-inner {
    opacity: 0.6;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 64%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

@media (min-width: 768px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}


.card-ctr{
    border-radius: 32px;
    background: var(--Orange, #EE7103);
    box-shadow: 0px 0px 32px 10px #EE7103;
    min-height:300px;
}

.card-ctr h2 {padding-top:80px}


.subtitle-group{
    padding-left:0px;
    padding-right:0px;
}

/* Mobile & Tablet */
@media (max-width: 767.99px) {
   
    h1.hero {font-size:1.75em !important; text-align:center; padding: 8px; padding-top:10px !important;padding-bottom:10px !important;}
    .hero-img{padding:50px;padding-bottom:0px !important}
    .testimonial-card {    flex: 0 0 100%;}
    .hero-txt-padding {padding-top:0px !important;padding-bottom:50px}
    h2 {font-size:2em}
    p.lead {text-align:center; font-size:1.5em}
    .btn-custom {width:100%; margin: 0 auto}
    .features-padding {padding-right: 0px;}
    .card-ctr{padding-top:25px}
    .card-ctr h2 {padding-top:5px}
    .subtitle-group{
        padding-left:20px;
        padding-right:20px;
    }
    
    .benefit-boxes{
        padding: 23px 1px !important;
    }



}

@media (min-width: 768px) {
    .hero-txt-padding {padding-left:100px;padding-bottom:50px}
    .features-padding {padding-right: 50px;}
   


}


@media (min-width: 767.99px) and (max-width: 991.99px) {

    h1.hero {font-size:2.5em !important;}
    .hero-txt-padding {padding-left:30px}

}


@media (max-width: 991.98px) {
    .navbar-nav .nav-item:not(:last-child) {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

.navbar {
    transition: background-color 0.3s ease;
}

.navbar .navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(13, 10, 11, .9) !important; }
}

.navbar.scrolled.scrolling-up .navbar-nav .nav-link,
.navbar.scrolled.scrolling-up .navbar-brand {
    color: black !important;
}

.navbar.scrolled.scrolling-up .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled.scrolling-down .navbar-nav .nav-link,
.navbar.scrolled.scrolling-down .navbar-brand {
    color: white !important;
}

.navbar.scrolled.scrolling-down .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled.scrolling-down {
    background-color: rgba(13, 10, 11, .9) !important;
    padding: 15px 0px;
}

/* Styles for expanded menu */
.navbar.menu-expanded {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.navbar.menu-expanded .navbar-nav .nav-link,
.navbar.menu-expanded .navbar-brand {
    color: white !important;
}

.navbar.menu-expanded .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.modal-content {
    background-color: #1E1921;
    color: #ffffff;
}
.modal-header {
    border-bottom: 1px solid #3d3d3d;
}
.modal-footer {
    border-top: 1px solid #3d3d3d;
}


@media (max-width: 991.98px) {
    .navbar.menu-expanded .navbar-collapse {
        background-color: rgba(13, 10, 11, .9) !important; }
        padding: 1rem;
        border-radius: 0.25rem;
    }
}



.step-title {
    font-weight: bold;
    margin-bottom: 0px;
    color: #EE7103
}

.faq-title {
    font-weight: bold;
    margin-bottom: 0px;
    color: #EE7103
}

.about-title {
    font-weight: bold;
    margin-bottom: 0px;
    color: #FDC54F
}

.card {
    background-color: rgba(10, 8, 11, 0.5) !important;
    margin-bottom: 25px;
    padding: 20px;
    border: 1px;
    color: #ffffff;
    border-style: solid;
    border-color: #533a62
}