@import "fonts/Roboto/font.css";

:root { --bs-primary-rgb: 109, 148, 249; --bs-primary: #6D94F9; --bs-body-color: #383838; --bs-body-bg: #fefefe; }
.btn-primary {
    --bs-btn-bg: #6D94F9;
    --bs-btn-border-color: #6D94F9;
    --bs-btn-hover-bg: #7b9ffd;
    --bs-btn-hover-border-color: #7b9ffd;
    --bs-btn-focus-shadow-rgb: 109, 148, 249;
    --bs-btn-active-bg: #5884f1;
    --bs-btn-active-border-color: #5884f1;
    --bs-btn-disabled-bg: #6D94F9;
    --bs-btn-disabled-border-color: #6D94F9;
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-color: #6D94F9;
    --bs-btn-hover-color: #6D94F9;
    --bs-btn-active-bg: #6D94F9;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #6D94F9;
}
.btn-danger { --bs-btn-bg: #ED3237; --bs-btn-border-color: #ED3237; }
.btn-outline-primary {
    --bs-btn-border-color: #6D94F9;
    --bs-btn-color: #6D94F9;
    --bs-btn-hover-bg: #6D94F9;
    --bs-btn-hover-border-color: #6D94F9;
    --bs-btn-active-bg: #6D94F9;
    --bs-btn-active-border-color: #6D94F9;
}

body { font-family: 'Roboto', monospace; }
h2 { font-size: 45px; }

header {
    background-image: url("../images/bg.png");
    background-repeat: no-repeat;
    background-position: center right;
    padding: 80px 0 160px;
}
header h1 { color: #6D94F9; font-size: 85px; }
header p { font-size: 22px; line-height: 26px; margin-bottom: 30px; position: relative; }
header .last-p { margin-bottom: 75px; }
header p::before {
    background-image: url("../images/icons/check.svg");
    background-repeat: no-repeat;
    background-position: center;
    content: ' ';
    width: 25px; height: 26px;
    position: absolute;
    left: 0;
}

#about { padding: 125px 0 95px; }
#about h2, #join-us h2, #profile h2, #brands h2, #brands h2 + p, #contact h2 { margin-bottom: 40px; }
#about .last-p { margin-bottom: 60px; }
#about img { max-height: 235px; }

#join-us { padding: 160px 0 80px; }
#join-us .card.shadow {
    -webkit-box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
    -moz-box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
    box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
}

#profile, #brands, #how-work, #services, #calculation, #examples, #advantages, #any-questions, #faq { padding: 80px 0; }
#profile .btn-light {
    --bs-btn-color: #6A6A6A;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
    font-size: 22px;
}

#profile .btn-light .bi { color: #6D94F9 }
#profile .btn-light.active .bi { color: #fff !important; }

#brands .card.shadow {
    -webkit-box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
    -moz-box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
    box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
}
#brands .card:not(.bg-primary) p.card-text { font-size: 22px }
#brands .card { margin-top: 125px; }
#brands .card:not(.bg-primary) .card-body { padding-top: 125px; }
#brands .card .card-body img { top: -125px; left: 0; right: 0; }
#brands #carousel .carousel-control-prev, #brands #carousel .carousel-control-next,
#brands #carouselMobile .carousel-control-prev, #brands #carousel .carousel-control-next { color: #6D94F9; }
#brands #carousel .carousel-control-prev,
#brands #carouselMobile .carousel-control-prev { right: 0; width: 100%; }
#brands #carousel .carousel-control-next,
#brands #carouselMobile .carousel-control-next { left: 0; width: 100%; }

#how-work h2, #services h2 { margin-bottom: 60px; }
#how-work .fs-1 { font-size: 70px !important; line-height: 86px; margin-bottom: 30px; }
#how-work p { margin-bottom: 20px; }
#how-work p.fw-bold { font-size: 22px; }

#services #filters .btn.shadow {
    -webkit-box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
    -moz-box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
    box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
}
#services #filters { margin-bottom: 40px; }
#services .price { color: #6D94F9; }
#services .card-body > .col-lg { font-size: 22px; }
#services div:not(#modal8, #modal20, #modal21, #modal32, #modal33, #modal34) > .modal-dialog {
    --bs-modal-width: 70%;
}
#services .modal-header .btn { width: 40px; height: 40px; }
#services .modal-body .options .col:last-child { color: #6D94F9; }

#examples h2, #advantages h2 { margin-bottom: 70px; }
#carousel1 .carousel-control-prev { right: 0; width: 100%; }
#carousel1 .carousel-control-next { left: 0; width: 100%; }
#carousel1 .carousel-indicators { bottom: -50px; margin: 0 }
#carousel1 .carousel-dark .carousel-indicators [data-bs-target] { background-color: var(--bs-primary); width: 80px; height: 10px; }

#advantages .card.shadow {
    -webkit-box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
    -moz-box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
    box-shadow: 1px 4px 8px rgba(138, 151, 186, 0.25) !important;
}

#any-questions .description { margin-bottom: 70px; }
#any-questions .form-control::placeholder { color: #6A6A6A; }
#any-questions select { color: #6A6A6A; }

#faq h2 { margin-bottom: 50px; }
#faq .accordion-button::after {
    width: 40px; height: 40px;
    background-color: #6D94F9;
    background-position: center;
    border-radius: 10px;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3e%3c/svg%3e");
}
#faq .accordion-item:not(:last-child) { margin-bottom: 40px; }
#faq .accordion-item.shadow {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
}
#faq .accordion-button:not(.collapsed) { box-shadow: none !important; background-color: transparent; color: inherit; }
#faq .accordion-button, #faq .accordion-body { padding: 40px; }
#faq .accordion-body { padding-top: 0 }
#faq .accordion-header { font-size: 22px; }

#contact { padding: 160px 0; }
#contact iframe { position: absolute; bottom: 0 }
#contact .card.shadow {
    -webkit-box-shadow: 0 9px 25px rgba(0, 0, 0, 0.25) !important;
    -moz-box-shadow: 0 9px 25px rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 9px 25px rgba(0, 0, 0, 0.25) !important;
}
#contact .card-body { padding: 70px 50px; }
#contact .email { margin-bottom: 5px; }
#contact .phone, #contact .address { margin: 30px 0 5px; }
#contact .address + p { color: #6D94F9; }
#contact a { text-decoration: none; color: #6D94F9; }
#contact a:hover { opacity: 0.7; }

footer { background-color: #383838; padding: 70px 0 160px; }
footer a { color: #6D94F9; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid #6D94F9 }
footer a:hover { opacity: 0.7 }
footer ul { margin: 0; padding: 0 }
footer ul li a { text-decoration: none; color: #fff; border: 0; padding: 0 }
footer ul li a:hover { opacity: 0.7; }
footer ul li:first-child { margin-bottom: 10px }

/* CSS for mobile */
@media (max-width: 991px) {
    .navbar { text-align: center; }
    .navbar .navbar-nav { margin-top: 80px; }
    .navbar .navbar-toggler {
        border: none;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
        background-color: #fff;
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236D94F9' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    header { background-image: none; padding-top: 20px; }
    header h1 { font-size: 45px; margin-bottom: 20px !important; }
    h2 { font-size: 35px; }
    header .btn { width: 100%; }
    header .btn.btn-outline-primary { margin-top: 20px; }
    header .ratio, header p:not(.last-p)  { margin-bottom: 30px; }
    header .last-p { margin-bottom: 50px; }

    header .btn, #about .btn, #calculation .btn, #any-questions .btn {
        --bs-btn-padding-y: 0.5rem;
        --bs-btn-padding-x: 1rem;
        --bs-btn-font-size: 1.25rem;
        --bs-btn-border-radius: 0.5rem;
    }
    #about .btn { width: 100% !important; }

    #join-us .col-12:nth-child(1), #join-us .col-12:nth-child(2), #join-us .col-12:nth-child(3) { margin-bottom: 20px; }
    #join-us .card { height: 100%; }
    #join-us .card img { width: 40%; }
    #carousel { display: none; }

    #brands p.w-50 { width: 100% !important; }

    #services .card-body > .col-lg { text-align: center; }
    #services .card-body > .col-lg-auto > .btn { width: 100%; }
    #services .modal-dialog { --bs-modal-width: 100% }
    #services .modal-header .btn { width: 45px; height: 45px; }
    #services .modal-title { margin-top: 60px; }

    #carousel1 .ratio-16x9 { --bs-aspect-ratio: 100%; }

    #calculation img { display: block; margin: 0 auto; }

    #advantages .col-12, #any-questions .col-12:not(:last-child) { margin-bottom: 20px; }

    #faq .accordion-header { font-size: inherit !important; }
    #faq .accordion-button, #faq .accordion-body { padding: 15px !important; }

    #any-questions .btn { width: 100%; }

    #contact { padding: 160px 0 600px; }
    #contact a.card-link {margin-left: 0; display: block}
    footer { text-align: center; }
    footer ul { display: inline-block; margin: 30px 0; }
}