body{
    background-color: var(--primary-color);
}
#home-page-main-contents{
    position: relative;
    width: 100%;
}
#home-page-main-contents>#page-intro-section{
    position: relative;
    width: 100%;
    min-height: 85vh;
    background-image: linear-gradient(to top right, var(--primary-color) 70%, var(--secondary-color) 100%);
    /* background-image: url(../images/whatwedoPhotos/computer-training-photo2.jpg); */
    background-image: url(../images/hamtech-computer-school.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 4rem 1rem;
    margin-bottom: 200px;

    opacity: 0;
    transform: scale(0.2);
    backdrop-filter: bur(30px);
    transition: all 3s linear;
    animation: animateIntroSectionBgImg 3s linear;
    animation-fill-mode: forwards;
}
#page-intro-section::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background-color: rgba(0,0,0,0.4);
}

@-webkit-keyframes animateIntroSectionBgImg{
    0%{
        opacity: 0;
        transform: scale(0.2);
        backdrop-filter: bur(30px);
    }

    80%{
        opacity: 1;
        transform: scale(2);
        backdrop-filter: bur(0);
    }
    100%{
        opacity: 1;
        transform: scale(1);
        backdrop-filter: bur(0);
    }
}
@keyframes animateIntroSectionBgImg{
    0%{
        opacity: 0;
        transform: scale(0.2);
        backdrop-filter: bur(10px);
    }
    100%{
        opacity: 1;
        transform: scale(1);
        backdrop-filter: bur(0);
    }
}

#page-intro-section>.intro-text-wrapper{
    position: relative;
    width: 70%;
    margin: 2rem auto;
    margin-top: 0;
}
.intro-text-wrapper>.welcome-text{
    position: relative;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-white);
    font-style: italic;

    opacity: 1;
    left: -1000%;
    backdrop-filter: blur(30px);
    transition: all 3s linear;
    animation: animateWelcomeText 3s linear;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}
@keyframes animateWelcomeText {
    0%{
        opacity: 0;
        left: -1000%;
        backdrop-filter: blur(30px);
    }
    100%{
        opacity: 1;
        left: 0%;
        backdrop-filter: blur(0px);
    }
}
.intro-text-wrapper>.page-heading, .intro-text-wrapper>.page-heading>span{
    position: relative;
    font-size: 5rem;
    font-weight: bold;
    text-align: center;
    max-width: 100%;
    margin: 2rem 0;
    text-transform: capitalize;
    font-family: "Lato", sans-serif;
    color: var(--color-white);
}

.intro-text-wrapper>.page-heading>span{
    color: var(--secondary-color);
}
.intro-text-wrapper>.intro-text{
    position: relative;
    width: 70%;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--color-grey1);
    margin: 2rem auto;
}

.animationSlideItems{
    opacity: 0;
    transform: translateY(300px);
    backdrop-filter: blur(30px);
    transition: all 3s linear;
    animation: animateSlideItems 3s linear;
    animation-delay: 6s;
    animation-fill-mode: forwards;
}
@keyframes animateSlideItems {
    0%{
        opacity: 0;
        transform: translateY(300px);
        backdrop-filter: blur(30px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
        backdrop-filter: blur(0px);
    }
}
.call-to-action-button-wrapper{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 1rem;
}
.call-to-action-button-wrapper>#know-more-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
#know-more-btn button{
    display: inline-block;
    outline: none;
    border: none;
    background-color: var(--primary-color);
    border-radius: 5px;
    transition: back-ground-color, color 0.4s ease-in;
}

#know-more-btn button a{
    display: inline-block;
    width: 100%;
    padding: 0.7rem 1.5rem;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    color: #f8f8f8;
    text-transform: capitalize;
}
#know-more-btn-icon-wrapper{
    position: relative;
    width: 35px;
    height: 35px;
     display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    box-shadow: 0 0 7px 0 rgba(4, 228, 176, 0.893);
     box-shadow: 0 0 7px 0 rgba(228, 228, 0, 0.893);
    border-radius: 50%;
    margin-left: 0.5rem;
    border-right: 2px solid #f00;
    border-bottom: 2px solid #f00;
    transform: translateY(0.7rem);
    animation: animate-know-more-btn 1s linear infinite;
    transition: transform 1s ease-in;
}
@keyframes animate-know-more-btn {
    from{
        transform: translateY(0.7rem);
    }
    to{
        transform: translateY(0rem);
    }
}
#know-more-btn-icon-wrapper>i{
   font-size: 1.3rem;
   font-weight: bold;
   color: var(--color-grey1);
}
#know-more-btn button:hover{
    background-color: var(--color-white);
}
#know-more-btn button:hover a{
    color: var(--primary-color);
}
#know-more-btn button:hover #know-more-btn-icon-wrapper>i{
    box-shadow: 0 0 7px 0 rgba(0,0,0,0.5);
}
.call-to-action-button-wrapper>.call-to-action-btn{
    outline: none;
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    padding: 1rem 1.5rem;
    border-radius: 20px 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;
}
.call-to-action-button-wrapper>.call-to-action-btn.reg-btn>a{
    color: var(--primary-color);
}
.call-to-action-button-wrapper>.call-to-action-btn.login-btn{
    background-color: transparent;
    border: 2px solid var(--color-white);
}
.call-to-action-button-wrapper>.call-to-action-btn>a{
    text-decoration: none;
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: bold;
    text-transform: capitalize;
}
.call-to-action-button-wrapper>.call-to-action-btn.reg-btn:hover{
    background-color: transparent;
    border: 2px solid var(--color-white);
}
.call-to-action-button-wrapper>.call-to-action-btn.login-btn:hover{
    background-color: var(--color-white);
    border: 2px solid var(--color-white);
}

/* #know-more-btn call-to-action-btn reg-btn */

#know-more-btn{
    opacity: 0;
    backdrop-filter: blur(30px);
    transform: translateY(100px);
    animation: animateKnowMoreBtn 3s linear;
    animation-delay: 9s;
    animation-fill-mode: forwards;
}

@keyframes animateKnowMoreBtn {
    0%{
        opacity: 0;
        backdrop-filter: blur(30px);
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        backdrop-filter: blur(0px);
        transform: translateY(0px);
    }
}

.call-to-action-btn.reg-btn{
    opacity: 0;
    backdrop-filter: blur(30px);
    transform: translateY(100px);
    animation: animateRegActionBtn 3s linear;
    animation-delay: 12s;
    animation-fill-mode: forwards;
}

@keyframes animateRegActionBtn {
    0%{
        opacity: 0;
        backdrop-filter: blur(30px);
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        backdrop-filter: blur(0px);
        transform: translateY(0px);
    }
}

.call-to-action-btn.login-btn{
    opacity: 0;
    backdrop-filter: blur(30px);
    transform: translateY(100px);
    animation: animateLoginActionBtn 3s linear;
    animation-delay: 15s;
    animation-fill-mode: forwards;
}

@keyframes animateLoginActionBtn {
    0%{
        opacity: 0;
        backdrop-filter: blur(30px);
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        backdrop-filter: blur(0px);
        transform: translateY(0px);
    }
}

.courses-we-offer-section{
    position: relative;
    width: 100%;
    background-color: var(--color-grey1);
    padding: var(--general-padding);
    border-radius: 30px 30px 0 0;
    background-image: url('../images/home-page-bg-banner-hamtech-computer-school2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
}
.courses-we-offer-section>h2{
    position: relative;
    margin: 2rem 0;
    text-transform: uppercase;
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
    color: var(--primary-color);
}
.courses-we-offer-section>.courses-cont{
    position: relative;
    width: 100%;
    margin: 4rem auto;
    /* display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.courses-cont>.course{
    position: relative;
    width: 400px;
    height: 250px;
    overflow-y: auto;
    padding: var(--general-padding);
    padding-top: 0.3rem;
    border-radius: 20px;
    border-right: 5px solid var(--primary-color);
    border-bottom: 5px solid var(--primary-color);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    margin: 1rem 0;
}
.courses-cont>.course::-webkit-scrollbar{
    width: 5px;
}
.courses-cont>.course::-webkit-scrollbar-thumb{
    border-radius: 5px;
    background: var(--primary-color);
}
.courses-cont>.course::-webkit-scrollbar-track{
    border: 7px solid #ccc;
    box-shadow: inset 0px 0px 2.5px 2px rgba(0,0,0,0.4);
}


.courses-cont>.course::-moz-scrollbar{
    width: 5px;
}
.courses-cont>.course::-moz-scrollbar-thumb{
    border-radius: 5px;
    background: var(--primary-color);
}
.courses-cont>.course::-moz-scrollbar-track{
    border: 7px solid #ccc;
    box-shadow: inset 0px 0px 2.5px 2px rgba(0,0,0,0.4);
}



.courses-cont>.course::-ms-scrollbar{
    width: 5px;
}
.courses-cont>.course::-ms-scrollbar-thumb{
    border-radius: 5px;
    background: var(--primary-color);
}
.courses-cont>.course::-ms-scrollbar-track{
    border: 7px solid #ccc;
    box-shadow: inset 0px 0px 2.5px 2px rgba(0,0,0,0.4);
}


.courses-cont>.course::-o-scrollbar{
    width: 5px;
}
.courses-cont>.course::-o-scrollbar-thumb{
    border-radius: 5px;
    background: var(--primary-color);
}
.courses-cont>.course::-o-scrollbar-track{
    border: 5px solid #ccc;
    box-shadow: inset 0px 0px 2.5px 2px rgba(0,0,0,0.4);
}


.courses-cont.list-view{
    height: auto;
}
.courses-cont.list-view>.course{
    width: 100%;
    height: 100%;
}
.course>.course-title{
    position: relative;
    width: 100%;
    margin: 1rem 0;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 1rem;
    margin-bottom: 0;
    border-radius: 20px 20px 0 0;
    font-size: 1rem;
    font-family: "Lato", sans-serif;
    font-weight: bold;
    text-transform: capitalize;
}
.course>.course-img-wrapper{
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
}
.course>.course-img-wrapper::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background-color: rgba(0,0,0,0.4);
}
.course-img-wrapper>.course-img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.course-img-wrapper>.course-title-display, .course-img-wrapper>.course-title-display-extra-info{
    position: absolute;
    width: 100%;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    font-family: "Lato", sans-serif;
    color: var(--color-white);
}
.course-img-wrapper>.course-title-display-extra-info{
     font-size: 1rem;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);
    color: var(--secondary-color);
}
.courses-we-offer-section>.course-img-wrapper{
    position: relative;

}
.course>.course-content-wrapper{
    position: relative;
    width: 100%;
}
.course-content-wrapper>.content-data-tabulation-toggler-control{
    position: relative;
    width: 100%;
    padding: 1.3rem 1rem;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.course-content-wrapper>.content-data-tabulation-toggler-control .course-view-icon{
    font-size: 1.5rem;
    font-weight: bold;
}


.content-data-tabulation-toggler-control span{
    font-size: 1rem;
    color: var(--primary-color);
    text-transform: capitalize;
    font-weight: bold;
}
.view-mode-contrl-btn-wrapper{
    position: absolute;
    bottom: 10px;
    right: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    justify-content: space-between;
}

.view-mode-contrl-btn-wrapper>.view-mode-contrl-btn{
    display: inline-block;
    width: 20px;
    height: 20px;
    outline: none;
    border: 1px solid var(--primary-color);
    cursor: pointer;
}

.view-mode-contrl-btn-wrapper>.view-mode-contrl-btn>.view-mode-btn-icon{
    position: relative;
    font-weight: bold;
    color: var(--primary-color);
}
.course-content-wrapper>.content-data-tabulation-wrapper{
    position: relative;
    width: 100%;
    display: none;
}
.content-data-tabulation-wrapper>.data-tabulation-table{
    position: relative;
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background-color: var(--color-white);
}
.data-tabulation-table th{
    position: relative;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 0.7rem 1rem;
    text-transform: capitalize;
}
.data-tabulation-table tbody tr{
    position: relative;
    transition: background-color, color 0.4s ease-in;
}
.data-tabulation-table tbody tr:nth-child(even){
    background-color: var(--color-grey1);
}
.data-tabulation-table tbody tr:hover{
    background-color: var(--primary-color);
    color: var(--color-white);
}
.data-tabulation-table tbody td{
    position: relative;
    font-size: 14px;
    text-align: left;
    padding: 0.7rem 1rem;
}
.data-tabulation-table th, .data-tabulation-table tbody td{
    border: 1px solid #ccc;
}
.data-tabulation-table tbody td>span, .data-tabulation-table tbody td>strong{
    font-weight: bold;
}
.data-tabulation-table tbody tr>td:first-child>i{
    color: var(--primary-color);
}
.content-data-tabulation-wrapper .course-phase{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    font-family: "Lato", sans-serif;
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 1rem 0;
}

.content-data-tabulation-wrapper .who-this-program-for-cont{
    position: relative;
    width: 100%;
    padding: 1rem;
    background-color: var(--color-white);
    border: 1px solid #ccc;
}
.who-this-program-for-cont>h3{
    position: relative;
    width: 100%;
    margin: 1rem 0;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 1rem;
    font-size: 1.5rem;
    font-family: "Lato", sans-serif;
    font-weight: bold;
    text-transform: capitalize;
}

.end-of-course-achievements-cont{
    position: relative;
    width: 100%;
    padding: 1rem 0;
    margin: 1rem 0;
}
.end-of-course-achievements-cont>h3{
    position: relative;
    width: 100%;
    margin: 1rem 0;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 1rem;
    font-size: 1.5rem;
    font-family: "Lato", sans-serif;
    font-weight: bold;
    text-transform: capitalize;
}
.end-of-course-achievements-cont>p{
    position: relative;
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
}
.end-of-course-achievements-cont>ul{
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--primary-color);
}
.end-of-course-achievements-cont>ul>li{
    position: relative;
    width: 100%;
    margin: 0.7rem 0;
    padding: 0.7rem;
    list-style-type: none;
    color: var(--secondary-color);
    font-size: 14x;
    border-bottom: 1px solid var(--color-grey2);
    padding: 0.7rem;
}
.end-of-course-achievements-cont>ul>li>i{
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-white);
}
.course-track-overview-cont{
    position: relative;
    max-width: 100%;
    overflow-x: auto;
}
.course-track-overview-cont>.track-overview-course{
    position: relative;
    width: 100%;
    margin: 1rem 0;
    color: var(--primary-color);
    padding: 1rem;
    margin-bottom: 0;
    font-size: 1.7rem;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-weight: bold;
    text-transform: capitalize;
}

.course-track-overview-cont>.tracks-overview-tabulation-table{
    position: relative;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background-color: var(--color-white);
    border-radius: 0 0 20px 20px;
}
/* .course-track-overview-cont>.overflow-concern{
    max-width: 100%;
}
.course-track-overview-cont>.overflow-concern>.tracks-overview-tabulation-table{
    max-width: 100%;
} */
.tracks-overview-tabulation-table th{
    position: relative;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 0.7rem 1rem;
    text-transform: capitalize;
}
.tracks-overview-tabulation-table tbody tr{
    position: relative;
    transition: background-color, color 0.4s ease-in;
}
.tracks-overview-tabulation-table tbody tr:nth-child(even){
    background-color: var(--color-grey1);
}
.tracks-overview-tabulation-table tbody tr:hover{
    background-color: var(--primary-color);
    color: var(--color-white);
}
.tracks-overview-tabulation-table tbody td{
    position: relative;
    font-size: 14px;
    text-align: left;
    padding: 0.7rem 1rem;
}
.tracks-overview-tabulation-table th, .tracks-overview-tabulation-table tbody td{
    border: 1px solid #ccc;
}
.tracks-overview-tabulation-table td .tracks-overview-tabulation-list{
    margin-left: 1rem;
}

.client-testimonial-section{
    position: relative;
    width: 100%;
    margin: 7rem 0;
    margin-bottom: 0;
    padding: 6rem 0;
    padding-top: 0;
    background-color: var(--primary-color);
}
.client-testimonial-section>.our-client-testimonies-intro-wrapper{
    position: relative;
    width: 80%;
    margin: 1rem auto;
    border-bottom: 1px solid #ccc;
    padding-bottom: 1rem;
    text-align: center;
}

.our-client-testimonies-intro-wrapper>h4{
    font-size: 2.2rem;
    color: var(--secondary-color);
    text-align: center;
    max-width: 100%;
    margin-bottom: 3rem;
    text-transform: uppercase;
}

.our-client-testimonies-intro-wrapper>p{
    font-size: 1.2rem;
    line-height: 1.2;
    width: 100%;
    color: #f6f6f6;
}
.bolded-text{
    font-weight: bolder;
    font-size: 1.3rem;

}
.client-testimonies-container{
    position: relative;
    width: 80%;
    margin: 4rem auto;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    box-shadow: 1px 1px 15px 10px rgba(0,0,0,0.1);
    overflow-x: hidden;
}
.client-testimonies-container .client-testimonies{
    position: relative;
    width: 600%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    gap: 0.7rem;
}
.client-testimonies .client-testimony{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.client-testimonies-container .client-testimonies.transitioned, .client-testimonies .client-testimony.transitioned{
    transition: all 0.3s ease-in;
}

.client-details-wrapper{
    position: relative;
    max-width: 500px;
}
.client-details-wrapper .client-testimony-img-wrapper{
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    margin-bottom: 1rem;
}
.client-details-wrapper .client-testimony-img-wrapper>.client-testimony-img{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}
.client-details-wrapper>.client-details{
    position: relative;
    width: 100%;
    text-align: center;
}
.client-details-wrapper>.client-details>.client-name{
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin: 1.2rem 0;
    text-transform: capitalize;
}
.client-details-wrapper>.client-details>.client-desc{
    font-weight: normal;
    font-size: 1.2rem;
    color: var(--color-grey2);
    margin: 0.2rem 0;
    text-transform: capitalize;
}
.client-testimony .client-testimony-wrapper{
    position: relative;
    max-width: 500px;
    padding: 1rem;
}
.client-testimony .client-testimony-wrapper>p{
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--color-grey2);
    line-height: 1.2;
    text-align: center;
}
.client-testimony .client-testimony-wrapper>.left-quote-icon, .client-testimony .client-testimony-wrapper>.right-quote-icon{
    display: inline-block;
    font-size: 2rem;
    color: var(--primary-color-light);
    margin-left: 4rem;
    margin-bottom: 1.5rem;
}
.client-testimony-wrapper>.right-quote-icon{
    display: inline-block;
    position: absolute;
    left: 80%;
}

.client-testimony-navigation-btns-wrapper{
    position: absolute;
    z-index: 5;
    width: 100%;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0 1rem;
}
.client-testimony-navigation-btns-wrapper .buttn{
    outline: none;
    border: none;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* background-color: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,1); */
    background-color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s ease-in;
}
.client-testimony-navigation-btns-wrapper .buttn .view-nav-icon{
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--color-white);
}
.client-testimony-navigation-btns-wrapper .buttn:hover, .client-testimony-navigation-btns-wrapper .buttn:focus{
    background-color: var(--color-white);
    color: var(--secondary-color);
}
.client-testimony-navigation-btns-wrapper .buttn:hover .view-nav-icon, .client-testimony-navigation-btns-wrapper .buttn:focus .view-nav-icon{
    color: var(--secondary-color);
}

.client-testimony-navigation-btns-wrapper #slide-stop-control{
    transform: rotate(-90deg);
}

.client-testimony-navigation-btns-wrapper #slide-play-control{
    display: none;
}

.client-testimony-indicator-wrapper{
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    gap: 0.7rem;
    padding: 1rem;
}
.client-testimony-indicator-wrapper .client-testimony-indicator{
    position: relative;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    transition: all 0.4s ease-in;
}
.client-testimony-indicator-wrapper .client-testimony-indicator.active--indicator{
    background-color: var(--primary-color-light);
}

#call--to-action-section{
    position: relative;
    width: 100%;
    padding: 2rem 1rem;
}
#call--to-action-section>h4{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}
#call--to-action-section>h4>span:last-child{
    position: relative;
    margin: 1.5rem 0;
    font-size: 3.8rem;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    background-image: linear-gradient(to right, #fff 30%, gold 90%);
    background-clip: text;
    color: transparent;
}
#call--to-action-section .question-icon-wrapper{
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color);
    border-top: 5px solid #f00;
    border-bottom: 5px solid #f00;
    border-radius: 50%;
}
#call--to-action-section .question-icon-wrapper>i{
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-white);
}

.why-not-join-hamtech-comp-sch-reasons-cont{
    position: relative;
    width: 100%;
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 3rem;
}
.why-not-join-reason{
    position: relative;
    width: 250px;
    height: 430px;
    overflow-y: auto;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    /* border-radius: 0 0 20px 20px; */
    border-radius: 20px;
}
.why-not-join-reason-img-wrapper{
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 20px;
}
.why-not-join-reason-img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    height: 200px;
    border-radius: 20px;
}

.why-not-join-reason-content-wrapper{
    position: relative;
    width: 100%;
    /* padding: 0 0.2rem; */
   padding: 0.7rem;
}
.why-not-join-reason-content-wrapper>h3{
    position: relative;
    width: 100%;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--secondary-color);
    margin: 1rem 0;
    padding: 0 0.5rem;
    text-align: center;
}
.why-not-join-reason-content-wrapper>p{
    position: relative;
    width: 100%;
    font-size: 14px;
    text-align: justify;
    line-height: 1.2;
    color: #f1f1f1;
}

#summary-section-cont{
    position: relative;
    z-index: 700;
    width: 100%;
    background-color: #f1f1f1;
    padding: 6rem 0.7rem;
}
#summary-section-inner-cont{
    position: relative;
    width: 80%;
    margin: auto;
    background-color: #fff;
    padding: 3rem 1.5rem;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.12);
}
#summary-section-inner-cont>p{
    color: #777;
    text-align: justify;
    font-size: 1.2rem;
    line-height: 1.2;
    width: 100%;
}

#final-call-action-section-cont{
    position: relative;
    width: 100%;
}
#final-call-action-section-cont>h4{
    position: relative;
    width: 100%;
    font-size: 2.1rem;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--color-white);
    margin: 2rem 0;
    text-align: center;
    text-shadow: -7px 7px 0 black;
}
#final-call-action-section-cont>p{
    color: #f1f1f1;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.2;
    width: 70%;
    margin: auto;
}

#call--to-action-btn-wrapper{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 1.5rem 0;
}
#call--to-action-btn-wrapper>#call--to-action-btn{
    outline: none;
    padding: 1.2rem 1.5rem;
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-right: 3px solid #f00;
    border-bottom: 3px solid #f00;
    border-radius: 5px;
    transition: opacity 0.4s ease-in;
}
#call--to-action-btn-wrapper>#call--to-action-btn>a{
    position: relative;
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-white);
}
#call--to-action-btn-wrapper>#call--to-action-btn:hover{
    opacity: 0.75;
}



/* OPTIMIZATION FOR TABLETS MOBILE DEVICES */

@media(max-width:950px){
    .intro-text-wrapper>.welcome-text{
        font-size: 1.3rem;
    }
    .intro-text-wrapper>.page-heading, .intro-text-wrapper>.page-heading>span{
        font-size: 4rem;
    }

    .intro-text-wrapper>.intro-text{
        font-size: 1.1rem;
    }
     #call--to-action-section>h4>span:last-child{
        font-size: 2.9rem;
    }

}

@media(max-width:820px){
    .intro-text-wrapper>.intro-text{
        width: 85%;
        
    }
    .emphasized-phrase{
        font-size: 1.3rem;
    }



}

@media(max-width:700px){
    .intro-text-wrapper>.welcome-text{
        font-size: 1.1rem;
    }
    .intro-text-wrapper>.page-heading, .intro-text-wrapper>.page-heading>span{
        font-size: 3rem;
    }
    .intro-text-wrapper>.intro-text{
        width: 95%;
        font-size: 1rem;
        
    }

}

@media(max-width:685px){
     #call--to-action-section>h4>span:last-child{
        font-size: 2rem;
    }

}


@media(max-width:600px){
    .intro-text-wrapper>.welcome-text{
        font-size: 1rem;
    }
    .intro-text-wrapper>.page-heading, .intro-text-wrapper>.page-heading>span{
        font-size: 3rem;
    }

    #know-more-btn button a{
        padding: 0.5rem 1rem;
    }
    #know-more-btn-icon-wrapper{
        width: 30px;
        height: 30px;
    }
    
    #know-more-btn-icon-wrapper>i{
        font-size: 1.1rem;
    }
    
    .call-to-action-button-wrapper>.call-to-action-btn{
        padding: 0.7rem 1.2rem;
    }
}

@media(max-width:514px){
    .intro-text-wrapper>.welcome-text{
        font-size: 0.8rem;
    }
    .intro-text-wrapper>.page-heading, .intro-text-wrapper>.page-heading>span{
        font-size: 2.3rem;
    }

    .intro-text-wrapper>.intro-text{
        width: 100%;
        font-size: 0.8rem;
    }
}

@media (max-width:470px){
    .client-testimonial-section>.our-client-testimonies-intro-wrapper{
        width: 92%;
    }

    .client-testimonies-container{
        width: 92%;
    }

    .client-testimonies .client-testimony{
        flex-direction: column;
    }
    .client-testimonies-container .client-testimonies.transitioned, .client-testimonies .client-testimony.transitioned{
        transition: all 0.3s ease-in;
    }

    .client-details-wrapper{
        max-width: 100%;
    }
    .client-details-wrapper .client-testimony-img-wrapper{
        width: 190px;
        height: 190px;
    }
    .client-details-wrapper .client-testimony-img-wrapper>.client-testimony-img{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 50%;
    }
    .client-details-wrapper>.client-details{
        position: relative;
        width: 100%;
        text-align: center;
    }
    .client-details-wrapper>.client-details>.client-name{
        font-size: 1.2rem;
    }
    .client-details-wrapper>.client-details>.client-desc{
        font-size: 1rem;
    }
    .client-testimony .client-testimony-wrapper{
        max-width: 100%;
    }
    .client-testimony .client-testimony-wrapper>p{
        font-size: 1rem;
    }
    .client-testimony .client-testimony-wrapper>.left-quote-icon, .client-testimony .client-testimony-wrapper>.right-quote-icon{
        font-size: 1.7rem;
    }
    .client-testimony-wrapper>.right-quote-icon{
        left: 60%;
    }

    .client-testimony-navigation-btns-wrapper{
        top: 95%;
        transform: translate(-50%, -95%);
    }


    .client-testimony-navigation-btns-wrapper .buttn{
        width: 35px;
        height: 35px;
    }
    .client-testimony-navigation-btns-wrapper .buttn .view-nav-icon{
        font-size: 1.7rem;
    }

    .our-client-testimonies-intro-wrapper>h4{
        font-size: 1.7rem;
    }

    .our-client-testimonies-intro-wrapper>p{
        font-size: 1rem;
    }

}

@media(max-width:405px){
    #page-intro-section>.intro-text-wrapper{
        width: 80%;
    }

}

@media(max-width:357px){
    #page-intro-section>.intro-text-wrapper{
        width: 100%;
    }
     .our-client-testimonies-intro-wrapper>h4{
        font-size: 1.3rem;
    }

    .our-client-testimonies-intro-wrapper>p{
        font-size: 0.8rem;
    }
}

@media(max-width:320px){
    #summary-section-inner-cont{
        width: 90%;
    }

    #final-call-action-section-cont>h4{
        font-size: 1.7rem;
    }
    #final-call-action-section-cont>p{
        width: 95%;
        font-size: 14px;
    }

    #call--to-action-btn-wrapper>#call--to-action-btn{
        padding: 0.7rem 1rem;
    }
    #call--to-action-btn-wrapper>#call--to-action-btn>a{
       font-size: 12px;
    }

}


@media(max-width:294px){
    .intro-text-wrapper>.page-heading, .intro-text-wrapper>.page-heading>span{
        font-size: 2rem;
    }
    .our-client-testimonies-intro-wrapper>h4{
        font-size: 1.1rem;
    }

}

@media(max-width:260px){
    .intro-text-wrapper>.page-heading, .intro-text-wrapper>.page-heading>span{
        font-size: 1.5rem;
    }

    .emphasized-phrase{
        font-size: 1rem;
    }

}