@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montagu+Slab:opsz,wght@16..144,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    cursor: url("../images/cursor/cursor.png"), none;
    font-family: var(--Font-Poppins);
}
#body h1{
    font-family: var(--Font-Montagu);
    font-size: 36px;
    color: var(--Primary-Color);
    font-weight: 400;
}
h1{
    font-size: 24px;
    font-weight: 600;
    color: var(--Primary-Color);
    margin-bottom: 5px;
}
:root{
    --Primary-Color: #464646;
    --Secondary-Color: #929292;
    --bg-Color: #F2F2F2;
    --White-Color: #ffffff;
    --Font-Poppins: "Poppins", sans-serif;
    --Font-Montagu: "Montagu Slab", serif;
}
a, .navLink > *{
    display: inline-block;
    cursor: url("../images/cursor/cursor-hover.png"), none;
    line-height: 100%;
}
.active-tab{
    color: var(--Primary-Color) !important;
}
.mtop40{
    margin-top: 40px !important;
}
.mtop20{
    margin-top: 20px !important;
}
.m40{
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}
.mb40{
    margin-bottom: 40px !important;
}
.mb20{
    margin-bottom: 20px !important;
}
.mt0{
    margin-top: 0px !important;
}
.ads img{
    width: 100% !important;
}
.btn{
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
}
.btn-fill{
    background-color: var(--Primary-Color);
    color: var(--White-Color);
    position: relative;
    z-index: 0;
    border: 1px solid transparent;
    overflow: hidden;
    transition: color 400ms ease;
}
.btn-fill:hover::after{
    bottom: 50%;
}
.btn-fill:hover{
    color: var(--Primary-Color);
    border: 1px solid var(--Primary-Color);
}
.btn-fill::after{
    content: "";
    position: absolute;
    height: 50px;
    width: 150%;
    background-color: white;
    left: 50%;
    z-index: -1;
    bottom: -100%;
    transform: translate(-50%,50%);
    border-radius: 50%;
    transition: bottom 400ms ease;
}
.btn-outline{
    position: relative;
    z-index: 0;
    border: 1px solid var(--Primary-Color);
    color: var(--Primary-Color);
    overflow: hidden;
    transition: color 400ms ease;
}
.btn-outline::after{
    content: "";
    position: absolute;
    height: 50px;
    width: 150%;
    background-color: var(--Primary-Color);
    left: 50%;
    z-index: -1;
    bottom: -100%;
    transform: translate(-50%,50%);
    border-radius: 50%;
    transition: bottom 400ms ease;
}
.btn-outline:hover{
    color: white;
}
.btn-outline:hover::after{
    bottom: 50%;
}
.btn-link{
    display: flex;
    gap: 5px;
    position: relative;
    align-items: center;
    text-decoration: none;
    color: var(--Primary-Color);
    width: fit-content;
}
.btn-link::after{
    content: "";
    position: absolute;
    height: 100%;
    left: -10%;
    width: 10px;

    background-image: 
      linear-gradient(135deg, 
        rgba(255,255,255,0),
        rgba(255,255,255,.8),
        rgba(255,255,255,0)
      );
    
    transform: rotate(10deg);
    transition: left 300ms ease;
}
.btn-link:hover::after{
    left: 100%;
}
.btn-link span{
    font-size: 14px;
}
.btn-link svg{
    width: 20px;
    height: 20px;
}
.container-lg{
    width: 1240px;
    margin: auto;
}
.container-md{
    width: 1040px;
    margin: auto;
}
.mid-wrapper{
    max-width: 400px;
    margin: auto;
    padding: 40px;
    border: 1px solid var(--bg-Color);
    border-radius: 20px;
}
.hero-content p{
    color: var(--Secondary-Color);
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: 400;
}
#menuBarWrap{
    background-color: #eaeaea9f;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: relative;
}
#menuBar{
    width: 20px;
    position: absolute;
    height: 2px;
    border-radius: 4px;
    background-color: var(--Secondary-Color);
}
#menuBarB{
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 4px;
    top: 7px;
    background-color: var(--Secondary-Color);
    transition: top 100ms linear, transform 100ms linear;
}
#menuBarA{
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 4px;
    bottom: 7px;
    background-color: var(--Secondary-Color);
    transition: bottom 100ms linear, transform 100ms linear;
}

#menuBarWrap:active #menuBar{
    visibility: hidden;
}
#menuBarWrap:active #menuBarA{
    top: 50%;
    transform: rotate(-45deg);
}
#menuBarWrap:active #menuBarB{
    top: 50%;
    transform: rotate(45deg);
}
/* mobile navbar section  */
.navbarMobile{
    width: 100vw;
    height: 100vh;
    top: 0px;
    right: 0px;
    background-color: #ffffff;
    position: fixed;
    /* display: none; */
    z-index: 100;
    transition: right 400ms ease;
}
.hide{
    right: -150vw;
}
.navbarMobile .footer{
    margin: 0px;
    padding: 0px 20px;
}
.mobileNavLinks{
    margin-top: 80px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100vh - 80px - 130px);
}
.mobileNavLinks a{
    font-size: 16px;
}
.navtopMobile{
    position: fixed !important;
    left: 20px;
    top: 24px;
    width: calc(100% - 40px);
}
.handlescroll{
    overflow: hidden;
    height: 100vh;
}
.navtopMobile #menuBar{
    visibility: hidden;
}
.navtopMobile #menuBarA{
    transform: rotate(-45deg);
    top: 50%;
}
.navtopMobile #menuBarB{
    transform: rotate(45deg);
    top: 50%;
}

/* hero section  */
.logo{
    height: 50px;
}
.hero{
    background-image: url('../images/background/bg-grid.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-top: 24px;
}
.heroBadge{
    display: flex;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 30px;
    background: linear-gradient(90deg, #F1F1F1 0%, #F9F9F9 100%);
    font-size: 14px;
    width: fit-content;
    color: var(--Primary-Color);
    margin-bottom: 5px;
}
.heroBadge span:nth-child(1){
    font-weight: 500;
}
.btn-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
main{
    padding: 90px 0px;
    display: flex;
    align-items: center;
    gap: 50px;
}
.heroImage{
    position: relative;
    z-index: 0;
}
.heroImgCTA{
    font-size: 14px;
    font-weight: 500;
    background-color: var(--Primary-Color);
    color: var(--White-Color);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 16px 0px 16px 0px;
    position: absolute;
    bottom: 7px;
    right: 0px;
}
.heroImgCTA img{
    position: absolute;
    right: 20px;
    top: 20px;
}
.heroIcons{
    position: absolute;
    z-index: -1;
    top: 15%;
    left: 45%;
    scale: 0;
    opacity: 0;
    transition: left 500ms linear, top 500ms linear, opacity 500ms linear, scale 500ms linear;
}
.circle{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: #e8e8e880;
    position: absolute;
    left: 49%;
    opacity: 0;
    filter: blur(1px);
    transform: translateX(-50%);
    top: -5%;
    z-index: -2;
    transition: opacity 1000ms linear;
}
.circle::after{
    content: "";
    width: 220px;
    height: 220px;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    /* filter: blur(1px); */
    border: 1px solid #E8E8E8;
    position: absolute;
}
.circle::before{
    content: "";
    width: 270px;
    height: 270px;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    /* filter: blur(1px); */
    border: 1px solid #E8E8E8;
    position: absolute;
    z-index: -1;
}
.heroImage:hover .circle{
    opacity: 1;
}
.heroImage:hover .heroIcons:nth-child(1){
    top: 30%;
    left: 20%;
    scale: 1;
    opacity: 1;
}
.heroImage:hover .heroIcons:nth-child(2){
    top: 14%;
    left: 13%;
    scale: 1;
    opacity: 1;
}
.heroImage:hover .heroIcons:nth-child(3){
    top: -3%;
    left: 18%;
    scale: 1;
    opacity: 1;
}
.heroImage:hover .heroIcons:nth-child(8){
    top: -17%;
    left: 34%;
    scale: 1;
    opacity: 1;
}
.heroImage:hover .heroIcons:nth-child(7){
    top: -17%;
    left: 55%;
    scale: 1;
    opacity: 1;
}
.heroImage:hover .heroIcons:nth-child(6){
    top: -3%;
    left: 70%;
    scale: 1;
    opacity: 1;
}
.heroImage:hover .heroIcons:nth-child(5){
    top: 14%;
    left: 75%;
    scale: 1;
    opacity: 1;
}
.heroImage:hover .heroIcons:nth-child(4){
    top: 30%;
    left: 70%;
    scale: 1;
    opacity: 1;
}
.heroMainIcon :nth-child(2){
    left: calc(42% - 30px);
}
.heroImage:hover .heroMainIcon1{
    scale: 1.2;
    opacity: 1;
    left: calc(42% - 100px);
}
.heroImage:hover .heroMainIcon2{
    scale: 1.2;
    opacity: 1;
    left: calc(42% + 125px);
}
/* navbar section  */
.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 101;
    position: relative;
}
.navbarRight{
    display: flex;
    align-items: center;
    gap: 20px;
}
.navbarLinks{
    display: flex;
    align-items: center;
    gap: 20px;
}
.navLink{
    font-size: 14px;
    text-decoration: none;
    font-weight: 400;
    color: var(--Secondary-Color);
    transition: color 300ms;
}
.navLink:hover{
    color: var(--Primary-Color); 
}
.watchYoutube{
    display: flex;
    align-items: center;
    gap: 8px;
}
.youtubeIcon{
    padding: 8px 18px;
    border-radius: 16px;
    background-color: var(--White-Color);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    width: fit-content;
    height: fit-content;
}
.youtubeIcon svg{
    height: 10px;
    width: auto;
}

/* Tools and Technique section  */
.tools_technique h2{
    font-size: 14px;
    font-weight: 400;
    color: var(--Secondary-Color);
    text-align: center;
}
.tools_technique > section > div > .iconWrap {
    min-width: fit-content;
}
.tools_technique > section > div > .iconWrap > h3{
    width: fit-content;
}
.tools_technique > section > div{
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.iconWrap{
    display: flex;
    gap: 10px;
    align-items: center;
    width: 150px;
}
.iconWrap img{
    width: 36px;
    height: auto;
}
.iconWrap h3{
    font-size: 16px;
    font-weight: 500;
    color: var(--Secondary-Color);
}

/* my products section  */
.products{
    margin-top: 40px;
}
.product-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}
.product-content .left{
    width: 50%;
}
.product-content .left h2{
    font-size: 24px;
    font-weight: 600;
    color: var(--Primary-Color);
    margin-bottom: 10px;
}
.product-content img{
    height: 180px;
    width: auto;
}
.product-content .left p{
    color: var(--Secondary-Color);
    font-weight: 400;
    margin-bottom: 20px;
}
.cardWrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card h3{
    font-size: 16px;
    color: var(--Primary-Color);
    font-weight: 500;
    margin-bottom: 10px;
}
.card h3 a{
    color: var(--Primary-Color) !important;
    line-height: 140% !important;
}
.card p{
    font-size: 14px;
    color: var(--Secondary-Color);
    margin-bottom: 20px;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}
.products .card img{
    width: 100%;
    height: 172px;
    margin-bottom: 10px;
    object-fit: cover;
}

/* book appointment section  */
.book-appointment{
    margin-top: 100px;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
    background-color: var(--bg-Color);
}
.book-appointment img{
    height: 150px;
    width: auto;
    margin-bottom: 10px;
}
.book-appointment h3{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--Primary-Color);
    margin-bottom: 20px;
}
.book-appointment h3 span{
    position: relative;
    z-index: 0;
}
.book-appointment h3 span:hover::after{
    height: 100%;
}
.book-appointment h3 span::after{
    position: absolute;
    content: "";
    z-index: -1;
    bottom: 1px;
    left: 0px;
    height: 8px;
    width: 100%;
    background-color: #dfdfdf;
    transition: height 200ms ease;
}
.book-appointment .btn-wrapper{
    margin-bottom: 10px;
}
.book-appointment p{
    text-align: center;
    font-size: 14px;
    color: var(--Secondary-Color);
}

/* experience tech section */
.experience-tech {
    margin-top: 100px;
}
.experience-tech .card img{
    width: auto;
    height: 60px;
    margin-bottom: 10px;
}
.experience-tech .card p{
    font-size: 14px;
    color: var(--Secondary-Color);
    margin-bottom: 0px;
}

/* what I do section  */
.whatIdo{
    margin-top: 40px;  
}
.whatIdo .left p{
    margin-bottom: 0px;
}
.queries{
    display: flex;
    row-gap: 20px;
    flex-wrap: wrap;
}
.queries > div{
    flex: 50%;
}
.queries > div:nth-child(odd){
    padding-right: 20px;
}
.queries h3{
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--Primary-Color);
}
.queries p{
    font-size: 14px;
    font-weight: 400;
    color: var(--Secondary-Color);
}

/* subscribe section  */
.subscribe{
    margin-top: 100px;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-Color);
}
.subscribe img{
    height: 80px;
    width: auto;
    margin-bottom: 10px;
}
.subscribe p{
    font-size: 16px;
    text-align: center;
    color: var(--Primary-Color);
    margin-bottom: 20px;
}
.subscribe form{
    padding: 2px 2px 2px 16px;
    background-color: white;
    border-radius: 30px;
}
.subscribe form input{
    height: 40px;
    border: none;
    outline: none;
}
.subscribe form input[type=submit]{
    border: 1px solid transparent;
    transition: background-color 400ms ease-in-out;
}
.subscribe form input[type=submit]:hover{
    background-color: white;
    border: 1px solid black;
}
.subscribe form input[type=email]{
    width: 230px;
}
.subscribe form label{
    position: relative;
    display: inline-block;
    width: 30px;
    height: 10px;
}
.subscribe form label svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.subscribe form input::placeholder{
    color: var(--Secondary-Color);
    font-size: 14px;
}

/* footer section  */
.footer{
    margin-top: 100px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer h4{
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--Secondary-Color);
}
.footer h4 span{
    color: var(--Primary-Color);
}
.footer-links{
    display: flex;
    gap: 20px;
}

/* contact form */
.contact-form{
    display: flex;
    gap: 15px;
    flex: 1;
    width: 100%;
    flex-direction: column;
    /* background-color: #929292; */
}
.text-field{
    padding: 8px 16px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--bg-Color);
    outline: none;
    background-color: var(--bg-Color);
}
.text-field:focus{
    border: 1px solid #dfdfdf;
}
.field-wrapper{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.field-wrapper label{
    font-size: 14px;
    color: var(--Primary-Color);
}
input[type=checkbox]{
    height: 18px;
    width: 18px;
}
.service-wrapper{
    display: flex;
    gap: 10px;
    align-items: center;
}
.field-wrapper .queries{
    row-gap: 5px;
}
textarea{
    resize: none;
}
.form-section{
    display: flex;
    gap: 20px;
}
.contact-img{
    /* padding: 10px; */
    width: 100%;
    flex: 1;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
    position: relative;
}
.contact-img .main-img{
    width: 200px;
    height: auto;
}
.supporting-img{
    width: 80px;
    position: absolute;
}
.img1{
    left: 60px;
    top: 60px;
}
.img2{
    right: 60px;
    top: 60px;
}
.img3{
    left: 60px;
    bottom: 60px;
}
.img4{
    right: 60px;
    bottom: 60px;
}

/* card  */
.card{
    width: calc(33.5% - 15.12px);
}
.course-badge{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
}
.course-badge span{
    padding: 4px 8px;
    border-radius: 15px;
    background-color: #e5e5e5;
    font-size: 12px;
}

/* portfolio  */
.map{
    margin-top: 40px;
    position: relative;
}
.experience-title{
    width: 50%;
    margin: auto;
    /* position: absolute; */
    /* transform: translateX(50%); */
}
.map h1{
    color: var(--Primary-Color);
}
.map p{
    color: var(--Secondary-Color);
    font-size: 14px;
}
.about-me-section{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.about-me-section .left, .about-me-section .right{
    flex: 1;
}
.heroPhoto{
    width: 90%;
    margin: auto;
}
.experience-company{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    background: white;
}
.experience-company span{
    font-size: 14px;
    color: var(--Secondary-Color);
}
.experience-company p{
    font-size: 14px;
    color: var(--Primary-Color);
}
.experience-company h3{
    font-size: 16px;
    font-weight: 600;
    color: var(--Primary-Color);
    margin-bottom: 0px;
}
.experience-company img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    mix-blend-mode: luminosity;
}
.experience-company img:hover{
    mix-blend-mode: normal;
}
.exp-wid{
    width: 200px;
}
.exp-wid:first-child{
    text-align: end;
}


/* resource detail  */
.pagination{
    font-size: 14px;
    margin-bottom: 15px;
}
.pagination a{
    font-weight: 500;
    text-decoration: none;
    color: var(--Secondary-Color);
    transition: color 300ms;
}
.pagination a:hover{
    color: var(--Primary-Color);
}
.pagination span{
    font-weight: 400;
    color: var(--Primary-Color);
}
.table-of-content{
    width: 300px;
    position: sticky;
    top: 0px;
    height: fit-content;
    background-color: white;
    padding-top: 10px;
}
.table-of-content h3{
    font-size: 14px;
    font-weight: 400;
    color: var(--Secondary-Color);
}
.table-of-content-filter{
    margin-bottom: 10px;
    width: fit-content;
    transition: background-color 300ms;
}
.content-list{
    display: block;
    text-decoration: none;
    height: 36px !important;
    overflow: hidden;
}
.active-unit{
    height: auto !important;
}
.active-unit .unit{
    color: var(--Primary-Color) !important;
}
.active-unit .unit:hover{
    background-color: white !important;
}
.active-unit i{
    rotate: 0deg !important;
}
.unit{
    display: flex;
    padding: 10px;
    text-decoration: none;
    transition: background-color 300ms;
    color: var(--Secondary-Color)
}
.unit:hover{
    background-color: var(--bg-Color)
}
.unit span{
    flex: 1;
}
.unit i{
    rotate: -90deg;
}
.topics{
    padding-left: 10px;
}
.topic-list{
    padding: 10px;
    border-radius: 6px;
    /* background-color: #e7e7e7; */
    display: block;
    text-decoration: none;
    color: var(--Secondary-Color);
    font-size: 14px;
}
.topic-list:hover{
    background-color: #f3f3f3ae;
}
.topics .active-topic{
    color: var(--Primary-Color);
    background-color: var(--bg-Color);
}

.content-section{
    display: flex;
    gap: 20px;
}
.content-section article{
    flex: 1;
}
.detail-title{
    padding: 20px;
    border-radius: 10px;
    background-color: var(--bg-Color);
    margin-bottom: 20px;
}
.detail-title h2{
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--Primary-Color);
}
.detail-title p{
    color: var(--Secondary-Color);
    font-size: 14px;
}
.detail-title span{
    color: var(--Primary-Color);
}
.course-detail p{
    color: var(--Primary-Color);
    font-weight: 400;
    font-size: 15px;
    line-height: 160%;
}
.course-detail h2{
    font-size: 20px;
    font-weight: 500;
    color: var(--Primary-Color);
    margin-bottom: 10px;
}
.course-detail h3{
    font-size: 18px;
    font-weight: 500;
    color: var(--Primary-Color);
    margin: 10px 0px;
}

.topic-pagination{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.course-pagin{
    display: flex;
    gap: 10px;
    border-radius: 6px;
    text-decoration: none;
    align-items: center;
    padding: 10px 20px;
    width: 30%;
    transition: background-color 300ms;
}
.course-pagin:hover{
    background-color: var(--bg-Color);
}
.prev i{
    color: var(--Primary-Color);
    rotate: 90deg;
}
.next i{
    color: var(--Primary-Color);
    rotate: -90deg;
}
.next{
    text-align: end;
    justify-content: end;
}
.course-pagin p{
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--Primary-Color);
}
.course-pagin span{
    font-size: 14px;
    color: var(--Secondary-Color);
}


/* process */
.start{
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px dotted var(--Primary-Color);
    color: var(--Primary-Color);
    font-size: 14px;
    font-weight: 500;
    width: fit-content;
    margin: auto;
    margin-bottom: 40px;
}
.process-icon{
    width: 56px;
    height: 56px;
    padding: 6px;
    border-radius: 50%;
    border: 1px dotted var(--Primary-Color);
}
.process-icon img{
    width: 100%;
}
.step-wrapper{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}
.step-wrapper>div:not(:nth-child(2n)){
    flex: 1;
    max-width: 400px;
}

.step-wrapper>div:first-child{
    text-align: end;
}
.step-wrapper h3{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--Primary-Color);
}
.step-wrapper p{
    font-size: 14px;
    color: var(--Secondary-Color);
}

/* student */
.student-wrapper{
    display: flex;
    flex-wrap: wrap;
    background-color: white;
}
.student-wrapper>div:hover>img{
    mix-blend-mode:normal;
}
.student-wrapper>div{
    padding: 20px;
    width: 20%;
}
.student-wrapper>div>h2{
    font-size: 16px;
    font-weight: 500;
    color: var(--Primary-Color);
}
.student-wrapper>div>h2>a{
    line-height: 140%;
    color: var(--Primary-Color);
}
.student-wrapper>div>p{
    font-size: 14px;
    font-weight: 400;
    color: var(--Secondary-Color);
    margin-bottom: 10px;
}
.student-wrapper>div>img{
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 5px;
    mix-blend-mode: luminosity;
}
.student-detail{
    display: flex;
    gap: 40px;
}
.student-detail h2{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--Primary-Color);
}
.student-detail img{
    width: 300px;
    flex-shrink: 0;
    height: fit-content;
    position: sticky;
    top: 10px;
}
.student-detail h3{
    font-size: 16px;
    font-weight: 500;
    color: var(--Primary-Color);
    margin-bottom: 10px;
}
.student-detail a{
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    text-decoration: none;
    color: var(--Secondary-Color);
}
.student-detail a:hover{
    color: var(--Primary-Color);
}
.student-badge{
    font-size: 14px;
    display: block;
    width: fit-content;
    background-color: #ededed;
    color: var(--Primary-Color);
    padding: 4px 8px;
    border-radius: 20px;
    margin-bottom: 5px;
}
.student-badge2{
    font-size: 14px;
    font-weight: 500;
    display: block;
    width: fit-content;
    background-color: #c7e8b87d;
    color: #1f5a04;
    padding: 4px 8px;
    border-radius: 20px;
    margin-bottom: 15px;
}
.student-detail p{
    font-size: 14px;
    color: var(--Secondary-Color);
    font-weight: 400;
}
.student-desc{
    margin-bottom: 10px;
}

@media screen and (max-width: 899px) {
    .container-md, .container-lg{
        width: calc(100% - 40px);
    }
    main{
        flex-direction: column-reverse;
    }
    .navbarLinks > a:not(:last-child){
        display: none;
    }
    .student-wrapper>div{
        padding: 20px;
        width: 33.3%;
    }

}
@media screen and (max-width: 700px) {
    .product-content > img{
        display: none;
    }
    .product-content .left{
        width: 100%;
    }
    .tools_technique > section{
        overflow: hidden;
        position: relative;
        height: 77px;
        mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
    }
    .tools_technique > section > div{
        width: 100%;
        animation: scroll-horizontal 10s linear infinite;
        animation-delay: -20s;
        position: absolute;
        
    }
    .tools_technique > section > div:hover{
        animation-play-state: paused;
    }
    @keyframes scroll-horizontal {
        from {
            left: 0px;
        }
        to {
            left: -100%;
        }
    }
    .cardWrapper{
        flex-wrap: wrap;
    }
    .cardWrapper > article{
        width: calc(50% - 10px);
    }
    .form-section{
        flex-direction: column-reverse;
    }
    .contact-img{
        padding: 50px;
    }
    .img1 {
        left: 20px;
        top: 20px;
    }
    .img2 {
        right: 20px;
        top: 20px;
    }
    .img3 {
        left: 20px;
        bottom: 20px;
    }
    .img4 {
        right: 20px;
        bottom: 20px;
    }
    .experience-title{
        width: 100%;
    }
    .heroPhoto{
        width: 100%;
    }
    .step-wrapper{
        justify-content: start;
    }
    .step-wrapper>div:first-child {
        text-align: start;
    }
    .step-wrapper:not(:nth-child(2n)){
        flex-direction: column-reverse;
    }
    .start{
        margin-left: 0px;
    }
    .step-wrapper{
        flex-direction: column;
        gap: 10px;
    }
    .step-wrapper>div:not(:nth-child(2n)) {
        flex: 1;
        max-width: 500px;
    }
    .student-detail{
        flex-direction: column;
    }
    .student-detail img{
        position: static;
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 670px) {
    .footer{
        flex-direction: column;
        gap: 20px;
    }
    .experience-company{
        gap: 10px;
    }
    .student-wrapper>div{
        padding: 20px;
        width: 50%;
    }
}
@media (min-width: 900px) and (max-width: 1200px) {
    .container-md, .container-lg{
        width: 90%;
    }
    .student-wrapper>div{
        padding: 20px;
        width: 25%;
    }
}
@media (min-width: 900px) {
    #menuBarWrap{
        display: none;
    }
    
}
@media (max-width: 899px) {
    .table-of-content-filter:hover{
        background-color: #dddddd;
    }
    .content-section{
        flex-direction: column;
    }
    .table-of-content{
        height: 57px;
        overflow: hidden;
    }
    .table-of-content-filter{
        background-color: var(--bg-Color);
        padding: 8px 16px;
        border-radius: 6px;
    }
    .table-of-content-show{
        height: auto;
    }
    .table-of-content{
        width: 100%;
    }
}
@media (min-width: 400px) and (max-width: 899px) {
    .container-md, .container-lg{
        width: calc(100% - 40px);
    }
    main{
        flex-direction: column-reverse;
    }
    .navbarLinks > a:not(:last-child){
        display: none;
    }
    
}
@media screen and (max-width: 499px) {
    .subscribe form input[type=email] {
        width: calc(100% - 40px);
    }
    .HeroAnil{
        width: 100%;
    }
    .subscribe{
        padding: 30px 10px;
    }
    .subscribe form{
        width: 100%;
        overflow: hidden;
        border-radius: 10px 10px 24px 24px;
        padding: 4px
    }
    .subscribe form input[type=submit] {
        width: 100%;
        margin-top: 10px;
    }
    .cardWrapper{
        flex-wrap: wrap;
    }
    .cardWrapper > article{
        width: 100%;
    }
    .queries{
        flex-direction: column;
    }
    .queries > div:nth-child(odd) {
        padding-right: 0px;
    }
    .student-wrapper>div{
        padding: 20px;
        width: 100%;
    }
}
@media screen and (max-width: 399px) {
    .container-md, .container-lg{
        width: calc(100% - 20px);
    }
    .heroPhoto{
        width: 100%;
    }
    .navbarLinks > a:last-child span{
        display: none;
    }
    .btn-outline, .btn-fill{
        width: 100%;
    }
    
}
@media screen and (max-width: 350px) {
    .heroBadge{
        flex-wrap: wrap;
        padding-left: 20px;
        gap: 1px;
    }
    .btn-wrapper{
        flex-wrap: wrap;
    }
    .btn-wrapper a{
        width: 100%;
    }
}