*{
    /* border: 1px solid red; */
    box-sizing: border-box;
    font-weight: 300;
    /* letter-spacing: 1px; */
    font-size: 16px;
    scroll-behavior: smooth;
    font-family: var(--font-family-sans);
}

:root {
    --primary-offset-color: #A5ADC4;
    --primary-color: #D8DEE1;
    --light-primary-color: #FFF;

    --secondary-color: #0B2240;
    --dark-secondary-color: #345DAE;

    --font-family-sans: "Work Sans", serif;
}

/* Hero Index */
.hero-index {
    width: 100%;
    height: 100vh; 
    background-color: var(--secondary-color);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}


.hero-index::after {
    content: "";
    position: absolute;
    background: linear-gradient(to bottom, #000, transparent, #000);
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0; 
    z-index: 1; 
}

.hero-index video{
    object-fit: contain;
}


.hero-index-content{
    width: 70%;
    margin: auto auto;
    position: absolute;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-index-content h1{
    width: 100%;
    letter-spacing: 3px;
    text-align: center;
    font-size: 60px;
    font-family: var(--font-family-sans);
    font-weight: 500;
    margin: 30px auto;
    color: var(--primary-color);
}

.hero-cta{
    width: 30%;
    background-color: var(--dark-secondary-color);
    color: var(--primary-color);
    text-align: center;
    padding: 16px 16px;
    margin: 30px auto;
}


/* Mobile */
@media screen and (max-width: 900px) {
    
    .hero-index-content, 
    .hero-cta{
        width: 90%;
    }

    .hero-cta{
        margin: 30px auto;
    }

    .hero-index-content h1{
        font-size: 36px;
    }
}

/* Intro */

.intro{
    width: 100%;
    height: auto;
    padding: 60px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
}

.intro-details{
    width: 70%;
    height: auto;
}

.intro-details h2, 
.intro-details p{
    width: 100%;
    text-align: center;
    color: var(--secondary-color);
}


.intro-overview{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.intro-overview-card{
    width: 100%;
    margin: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.intro-overview-card i{
    width: 50px;
    height: 50px;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.intro-overview-card p{
    width: 100%;
    text-align: center;
    color: var(--secondary-color);
}

/* Mobile */
@media screen and (max-width: 900px) {
    
    .intro-details,
    .intro-overview{
        width: 100%;
    }

    .intro-details p,
    .intro-overview-card p{
        font-size: 14px;
    }
}


/* choice */
.choice{
    width: 100%;
    height: auto;
    padding: 60px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--secondary-color);
}

.choice-img{
    width: 40%;
    height: 80vh;
    margin: 0 8px 0 0;
    background-color: var(--dark-secondary-color);
    background-image: url('../../assets/imgs/elite.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.choice-details{
    width: 50%;
    height: auto;
    margin: 0 0 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.choice-details h1{
    width: 100%;
    text-align: left;
    color: var(--light-primary-color);
}

.choice-details p{
    width: 90%;
    text-align: left;
    color: var(--primary-color);
}

/* Mobile */
@media screen and (max-width: 900px) {
    .choice{
        flex-direction: column;
    }

    .choice-img{
        width: 100%;
        height: 60vh;
    }

    
    .choice-details{
        width: 100%;
        margin: 16px 0 0 0;
    }

    .choice-details p{
        width: 96%;
        font-size: 14px;
    }

}

/* services */
.services{
    width: 100%;
    height: auto;
    padding: 60px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
}

.services h2,
.services h1{
    width: 70%;
    text-align: center;
    color: var(--secondary-color);
}

.services p{
    width: 70%;
    text-align: center;
    color: var(--secondary-color);
}

.services-topbar{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.services-topbar h3{
    color: var(--secondary-color);
    text-align: left;
}

.services-topbar a{
    width: 15%;
    padding: 16px 16px;
    text-decoration: none;
    color: var(--secondary-color);
    text-align: center;
    border: 1px solid var(--primary-offset-color);
    transition: all 0.3s ease-in-out;
}

.services-topbar a:hover{
    border: 1px solid var(--secondary-color);
}

.services-holder{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.services-card{
    width: 100%;
    height: auto;
    margin: 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--light-primary-color);
    text-decoration: none;
}

.services-card-img-holder{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.services-card-img{
    width: 100%;
    height: 50vh;
    background-color: var(--dark-secondary-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.services-card:hover .services-card-img{
    transform: scale(1.2);
}

.services-card-name{
    width: 100%;
    height: auto;
    text-align: center;
    padding: 16px 0;
    font-weight: 500;
    color: var(--secondary-color);
}


/* Mobile */
@media screen and (max-width: 900px) {
    .services h2,
    .services h1,
    .services p{
        width: 100%;
    }

    .services-topbar{
        width: 100%;
    }
    
    .services-topbar h3{
        width: 50%;
    }

    .services-topbar a{
        width: 50%;
    }

    .services-holder{
        width: 100%;
        flex-direction: column;
    }

    .services p,
    .services-topbar a,
    .services-card-name{
        font-size: 14px;
    }
}

/* projects */
.projects{
    width: 100%;
    height: auto;
    padding: 60px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color);
}

.projects h2,
.projects h1{
    width: 70%;
    text-align: center;
    color: var(--light-primary-color);
}

.projects p{
    width: 70%;
    text-align: center;
    color: var(--primary-color);
}

.projects-topbar{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.projects-topbar h3{
    color: var(--light-primary-color);
    text-align: left;
}

.projects-topbar a{
    width: 15%;
    padding: 16px 16px;
    text-decoration: none;
    color: var(--primary-color);
    text-align: center;
    border: 1px solid var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.projects-topbar a:hover{
    border: 1px solid var(--primary-offset-color);
}

.projects-holder{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.projects-card{
    width: 100%;
    height: auto;
    margin: 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    text-decoration: none;
}

.projects-card-img-holder{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.projects-card-img{
    width: 100%;
    height: 50vh;
    background-color: var(--dark-secondary-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.projects-card:hover .projects-card-img{
    transform: scale(1.2);
}

.projects-card-name{
    width: 100%;
    height: auto;
    text-align: center;
    padding: 16px 0;
    font-weight: 500;
    color: var(--secondary-color);
}


/* Mobile */
@media screen and (max-width: 900px) {
    .projects h2,
    .projects h1,
    .projects p{
        width: 100%;
    }

    .projects-topbar{
        width: 100%;
    }
    
    .projects-topbar h3{
        width: 50%;
    }

    .projects-topbar a{
        width: 50%;
    }

    .projects-holder{
        width: 100%;
        flex-direction: column;
    }

    .projects p,
    .projects-topbar a,
    .projects-card-name{
        font-size: 14px;
    }
}

/* 

TESTIMONIALS

*/

.testimonials{
    width: 100%;
    height: 100%;
    padding: 60px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--primary-color);
    position: relative;
    overflow: hidden;
}

.testimonials h2{
    color: var(--secondary-color);
}

.testimonials h1{
    color: var(--secondary-color);
}

.testimonials button{
    width: 50px;
    height: 50px;
    padding: 16px 16px;
    position: absolute;
    border-radius: 50%;
    bottom: 50%;
    z-index: 3;
    cursor: pointer;
    background-color: transparent;
    background-color: var(--primary-offset-color);
}

.testimonials button i{
    width: auto;
    margin: auto auto;
    color: var(--secondary-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.prev{
    left: 6px;
}

.next{
    right: 6px;
}

.testimonials-carousel{
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    animation: slide-left 1s ease-in-out;
    z-index: 2;
}

.testimony{
    min-width: 100%;
    height: 100%;
    border-radius: 5px;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    z-index: 2;
}

.testimony-profile-img{
    width: 150px;
    height: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    background-color: var(--primary-offset-color);
    z-index: 2;
}

.testimony-profile-position {
    font-weight: 900;
    padding: 30px 30px;
    z-index: 2;
    text-align: center;
    color: var(--secondary-color);

}

.testimony-profile-position strong{
    text-align: center;
    z-index: 2;
    color: var(--secondary-color);

}

.testimony-profile-text{
    width: 50%;
    height: auto;
    text-align: center;
    color: var(--secondary-color);
}

.counter,
.counter-number{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.counter{
    width: 90%;
    justify-content: flex-start;
    overflow: auto;
}

.counter-card{
    width: 100%;
    height: auto;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;

}

.counter-number i{
    width: 50px;
    height: 50px;
    font-size: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    color: var(--secondary-color);
    background: linear-gradient(to bottom right, var(--dark-secondary-color), transparent 60%);
}

.counter-digits{
    width: 50%;
    color: var(--secondary-color);
    text-align: center;
    z-index: 2;
    margin: 16px 0;
    font-size: 30px;
    font-weight: 900;
}

.counter-number p{
    width: 100%;
    text-align: center;
    z-index: 2;
    color: var(--secondary-color);
}



/* Mobile */
@media screen and (max-width: 900px) {

    .testimonials h1,
    .testimonials h2{
        text-align: center;
    }

    .testimonials button{
        width: 30px;
        height: 30px;
        padding: 0 0 0 0;
    }

    .testimonials-carousel{
        margin: 9% auto;
    }

    .testimony{
        min-width: 100%;
        height: auto;
        padding: 3px 3px;
    }

    .testimony-profile-img{
        width: 150px;
        height: 150px;
    }

    
    .testimony-profile-position strong{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .testimony-profile-position {
        font-weight: 900;
        padding: 30px 3px;
    }

    .testimony-profile-text{
        width: 100%;
        font-size: 14px;
    }

    .counter{
        width: 100%;
    }

    .counter-card{
        min-width: 50vw;
    }

    .counter-number{
        margin: 0 auto;
        justify-content: center;
    }

    .counter-card p{
        margin: 0 auto;
        font-size: 14px;
    }
    
    .counter-digits{
        margin: 8px auto;
        font-size: 24px;
    }
}

/* Cta */
.cta{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-color);
}

.cta-img{
    width: 100%;
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.cta-img::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.cta-img h1{
    width: 70%;
    text-align: center;
    color: var(--light-primary-color);
    z-index: 2;
}

.cta-img a{
    width: 20%;
    padding: 16px 16px;
    margin: 8px 8px;
    text-align: center;
    text-transform: uppercase;
    color: var(--primary-color);
    letter-spacing: 3px;
    background-color: var(--dark-secondary-color);
    text-decoration: none;
    z-index: 2;
    transition: all 0.3s ease-in-out;
}

.cta-img a:hover{
    background-color: var(--secondary-color);
    color: var(--light-primary-color);
}


/* Mobile */
@media screen and (max-width: 900px) {
    .cta-img a{
        width: 80%;
    }
}

/* 

/* 

FAQs

*/

.faqs{
    width: 100%;
    height: 100%;
    padding: 60px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--secondary-color);
}

.faqs h2{
    text-align: center;
    color: var(--light-primary-color);
}

.faqs h1{
    text-align: center;
    color: var(--light-primary-color);
}

.faqs-content{
    width: 70%;
    height: 100%;
    margin: 3% auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    z-index: 2;
}

.faqs-card{
    width: 100%;
    height: auto;
    margin: 16px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 1px solid;
    border-image: linear-gradient(to bottom, var(--dark-secondary-color), transparent);
    border-image-slice: 6;
}

.faqs-details{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.faqs-question{
    width: 100%;
    padding: 16px 8px;
    font-weight: 500;
    color: var(--primary-color);
    z-index: 2;
}

.faqs-btn{
    cursor: pointer;
    padding: 16px 12px;
    background-color: var(--dark-secondary-color);
}

.faqs-btn i{
    color: var(--primary-offset-color);
    transition: all 0.3s ease-in-out;
}

.faqs-btn:hover i{
    color: var(--light-primary-color);
}


.faqs-answer{
    width: 96%;
    text-align: left;
    padding: 8px 8px;
    margin: 6px auto;
    display: none;
    color: var(--light-primary-color);    
}


/* Mobile */
@media screen and (max-width: 900px) {

    .faqs h1,
    .faqs h2{
        width: 100%;
    }

    .faqs-question{
        font-size: 14px;
    }

    .faqs-content{
        width: 100%;
        margin: 9% auto;
    }

    .faqs-answer,
    .faqs-answer li{
        font-size: 14px;
    }
}


/* Blogs */
.blogs{
    width: 100%;
    padding: 60px 16px;
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.blogs h2,
.blogs h1{
    width: 70%;
    text-align: center;
    color: var(--secondary-color);
}

.blogs p{
    width: 70%;
    text-align: center;
    color: var(--secondary-color);
}

.blogs-topbar{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.blogs-topbar h3{
    color: var(--secondary-color);
    text-align: left;
}

.blogs-topbar a{
    width: 15%;
    padding: 16px 16px;
    text-decoration: none;
    color: var(--secondary-color);
    text-align: center;
    border: 1px solid var(--primary-offset-color);
    transition: all 0.3s ease-in-out;
}

.blogs-topbar a:hover{
    border: 1px solid var(--secondary-color);
}

.blogs-holder{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.blogs-card{
    width: 100%;
    height: auto;
    margin: 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--light-primary-color);
    text-decoration: none;
}

.blogs-card-img-holder{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.blogs-card-img{
    width: 100%;
    height: 50vh;
    background-color: var(--dark-secondary-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.blogs-card:hover .blogs-card-img{
    transform: scale(1.2);
}

.blogs-card-name{
    width: 100%;
    height: auto;
    text-align: left;
    padding: 16px 16px 0 16px;
    font-weight: 500;
    color: var(--secondary-color);
}

.blogs-card p{
    width: 90%;
    height: 80px;
    max-height: 80px; 
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    color: var(--secondary-color);
    margin: 16px auto;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Mobile */
@media screen and (max-width: 900px) {
    .blogs h2,
    .blogs h1,
    .blogs p{
        width: 100%;
    }

    .blogs-topbar{
        width: 100%;
    }
    
    .blogs-topbar h3{
        width: 50%;
    }

    .blogs-topbar a{
        width: 50%;
    }

    .blogs-holder{
        width: 100%;
        flex-direction: column;
    }

    .blogs p,
    .blogs-topbar a,
    .blogs-card-name{
        font-size: 14px;
    }

    .blogs-card p{
        width: 90%;
    }
}