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

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');


html, body {
    font-family: 'Comfortaa', cursive;
    color: #7c7c7c;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, div {
    font-family: 'Comfortaa', cursive;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity));
}

.list-checked-item {
    font-family: 'Roboto', sans-serif !important;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity));
}

#heroNav {    
    height: 91vh !important;
    background-color: #7c7c7c;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 900px) {
    #heroNav {    
        height: 94vh !important;
    }
}

@media(max-width: 600px) {
    #heroNav {    
        background-position: 62% 50% !important;
    }
}

#heroNavHome {    
    height: 91vh !important;
    background-color: #7c7c7c;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 900px) {
    #heroNavHome {    
        height: 94vh !important;
        background-position: 75% 50% !important;
    }
}

#heroNavWeMake {    
    height: 91vh !important;
    background-color: #7c7c7c;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 900px) {
    #heroNavWeMake {    
        height: 94vh !important;
        background-position: 90% 50% !important;
    }
}

#heroNavWe {    
    height: 91vh !important;
    background-color: #7c7c7c;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 900px) {
    #heroNavWe {    
        height: 94vh !important;
        background-position: 65% 50% !important;
    }
}

.navbar-brand-logo{
    width: 100%;
    min-width: 10rem !important;
    max-width: 10rem !important;
}

#statement {    
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar .dropdown-menu {
    border-top: 0.1875rem solid #ea580c !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (max-width: 600px) {
    .navbar .dropdown-menu {
        border-top: 0rem !important;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

/*Containers e-learning and behaviors*/

@media(min-width: 600px) and (max-width: 800px) {
    #training .container{
        margin-left: 24px !important;
    }
}

@media(min-width: 800px) and (max-width: 840px) {
    #training .container{
        margin-left: 50px !important;
    }
}

@media(min-width: 840px) and (max-width: 900px) {
    #training .container{
        margin-left: 88px !important; 
    }
}

@media(min-width: 900px) and (max-width: 950px) {
    #training .container{
        margin-left: 96px !important;
    }
}

@media(min-width: 950px) and (max-width: 1030px) {
    #training .container{
        margin-left: 32px !important;
    }
}

@media(min-width: 1031px) and (max-width: 1368px) {
    #training .container{
        margin-left: 104.5px !important;
    }
}

@media(min-width: 1400px) {
    #training .container{
        margin-left: 188px !important;
    }
}

/* Card Methodology */
.h-methodology {
    height: 350px;
    overflow-y: scroll;
}

@media(max-width: 600px) {
    #methodology .icon {
        width: 3.6rem !important;
        height: 3.6rem !important;
    }
}

/* Swiper */
.swiper-pagination-bullet:hover {
    border-color: rgba(255, 68, 0, 0.507);
}

.swiper-pagination-bullet:hover::before {
    background-color: rgba(255, 68, 0, 0.507);
}

.swiper-pagination-bullet-active {
    border-color: orangered;
}

.swiper-pagination-bullet-active:hover {
    border-color: rgba(255, 68, 0, 0.507);
}

.swiper-pagination-bullet-active::before {
    background-color: orangered;
}

.swiper-pagination-bullet-active:hover::before {
    border-color: rgba(255, 68, 0, 0.507);
}

.swiper-button-next, .swiper-button-prev {
    background-color: rgba(236, 236, 236, 0.61);
}

/* Backgrounds */
.bg-white-soft{
    background-color: rgba(240, 248, 255, 0.78);
}

.bg-black-soft{
    background-color: rgba(0, 0, 0, 0.616);
}

.bg-black-opacity{
    background-color: rgba(0, 0, 0, 0.8);
}

.bg-sky-soft{
    background-color: rgba(56, 191, 248, 0.677);
}

.bg-orange-soft{
    background-color: rgba(234, 90, 12, 0.514) ;
}

.bg-orange-overlay {
    background-color: rgba(255, 68, 0, 0.8);
}

.bg-orange-soft-coach{
    background-color: rgba(190, 67, 0, 0.493) ;
}

.bg-select-coach {    
    height: 75vh !important;
    background-color: #e4dada;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(min-width: 600px) and (max-width: 900px) {
    .bg-select-coach {
        background-position: 90% 50% !important;
    }
}

@media(max-width: 600px) {
    .bg-select-coach {
        background-position: 80% 50% !important;
    }
}

.bg-benefit {
    background-color: rgba(255, 68, 0, 0.8);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(min-width: 600px) and (max-width: 900px) {
    .bg-benefit {
        background-position: 10% 50% !important;
    }
}

@media(max-width: 600px) {
    .bg-benefit {
        background-position: 20% 22% !important;
    }
}

.bg-card {
    background-color: #7c7c7c;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Faq */
#accordionFAQ .accordion-button:not(.collapsed) {
    color: white !important;
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity)) !important;
}

@media (max-width: 600px) {
    #accordionFAQ .accordion-button::after {
        margin-left: 10px !important;
    }
}

.accordion-button::after {
    background-image: url('/static/assets/svg/components/chevron-down.svg') !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('/static/assets/svg/components/chevron-up.svg') !important;
}

.nav-segment.nav-pills .nav-link {
    border-radius: 50rem;
}

.nav-segment .nav-link {
    color: #ea580c !important;
    font-weight: 600;
}

.nav-segment .nav-link.active {
    color: white !important;
    background-color: #ea580c;
}

#soft-skills .nav-segment .nav-link {
    background-color: #ea580c;
    color: white !important;
    font-weight: 600;
    border: 2px solid white;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

#soft-skills .nav-segment .nav-link.active {
    color: white !important;
    background-color: #f97316;
    border-left: 2px solid white;
    border-right: 2px solid white;
    border-top: 2px solid white;
    border-bottom: 2px solid #f97316;
}

#soft-skills .card.bg-orange-500{
 margin-left: 2px;
 margin-right: 2px;
}

@media (max-width: 600px) {
    #soft-skills .card.bg-orange-500{
        margin-right: 0px;
    }
}

/* Card Animation Soft Skills */

#soft-skills .card .card .card-title {
    animation: fadeIn; 
    animation-duration: 0.9s; 
}

#soft-skills .card .card:hover .card-title {
    display: none!important;
}

#soft-skills .card .card .card-text {
    display: none!important;
    animation: fadeOut; 
    animation-duration: 0.9s; 
}

#soft-skills .card .card:hover .card-text {
    display: block!important;
    animation: fadeIn; 
    animation-duration: 0.9s; 
}

/* Card Animation */

.card .title-card {
    animation: fadeIn; 
    animation-duration: 0.9s; 
}

.card:hover .title-card{
    display: none!important;
}

.card .text-card{
    display: none!important;
    animation: fadeOut; 
    animation-duration: 0.9s; 
}

.card:hover .text-card{
    display: block!important;
    animation: fadeIn; 
    animation-duration: 0.9s; 
}

/* Scrollbar */
.overflow-y-auto::-webkit-scrollbar {
    width: 5px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgb(212, 212, 212); 
    border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #b4b4b4; 
}

.scroll-bar::-webkit-scrollbar {
    width: 5px;
}

.scroll-bar::-webkit-scrollbar-track {
    border-radius: 10px;
}

.scroll-bar::-webkit-scrollbar-thumb {
    background: rgb(0, 0, 0); 
    border-radius: 10px;
}

.scroll-bar::-webkit-scrollbar-thumb:hover {
    background: #b4b4b4; 
}

/* Steps */
@media(max-width: 600px) {
    #steps .icon {
        width: 2.7rem !important;
        height: 2.7rem !important;
    }
}

/* Buttons Menu*/
@media(max-width: 900px) {
    .shadow-m {
        box-shadow: 0 1px 3px 0 #e5e7eb, 0 1px 2px -1px #e5e7eb !important;
    }
}

@media(max-width: 600px) {
    #navbarNavDropdown .btn-sm {
        font-weight: 400;
        line-height: 1.5;
        border: 0.0625rem solid transparent;
        padding: 0.6125rem 1rem;
        font-size: 1rem;
    }
}

/*Coaching*/
#heroCoachingHome {    
    height: 91vh !important;
    background-color: #7c7c7c;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 900px) {
    #heroCoachingHome {    
        height: 94vh !important;
    }
}

@media(max-width: 600px) {
    #heroCoachingHome {    
        background-position: 62% 50% !important;
    }
}

.line-h-title {
    line-height: 4.5rem !important;
}

@media(max-width: 600px) {
    .line-h-title {
        line-height: 3rem !important;
    }
}

.bg-dev {    
    height: 75vh !important;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 600px) {
    .bg-dev {    
        height: 20vh !important;
        background-position: 45% 50% !important;
    }
}

@media(max-width: 900px) {
    .bg-dev {    
        height: 30vh !important;
        background-position: 45% 50% !important;
    }
}

#heroCoaches {    
    height: 45vh !important;
    background-color: #7c7c7c;
    background-position: 62% 62% !important;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 600px) {
    #heroCoaches {    
        background-position: 62% 50% !important;
    }
}

#biography {    
    background-color: #b1aeae;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width: 600px) {
    #biography {    
        background-position: 62% 50% !important;
    }
}

.line-h-coaches {
    line-height: 3.5rem !important;
}

@media (max-width: 600px) {
    .line-h-coaches {
        line-height: 2.5rem !important;
    }
}

#coach-filter .dropdown-item.active, .dropdown-item:active {
    color: white !important;
    text-decoration: none;
    background-color: rgb(56 189 248) !important;
}

/*#accordionTimePref .accordion-button:not(.collapsed) {
    color: white !important;
    --tw-bg-opacity: 1;
    background-color: rgb(56 189 248/ var(--tw-bg-opacity)) !important;
}

@media (max-width: 600px) {
    #accordionTimePref .accordion-button::after {
        margin-left: 10px !important;
    }
}*/

/*#select-currency .form-select {
    background-image: url('/static/assets/svg/components/caret-down-fill.svg') !important;
}*/

/*Request-Demo */

#request-demo ul li {
    list-style-type: none;
    position: relative;
    padding-left: 1.5em; 
}

#request-demo ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    margin-right: 10px;
}

/* ---------------------------------------- */
/*              INDICATOR HTMX
/* ---------------------------------------- */

.htmx-indicator{
    display:none !important;
}

.htmx-request.htmx-indicator{
    display:inline-flex !important;
}