*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: regularText;
    src: url(font/Assistant-Regular.ttf);
}

@font-face {
    font-family: boldText;
    src: url(font/Assistant-Bold.ttf);
}

@font-face {
    font-family: lightText;
    src: url(font/Assistant-Light.ttf);
}

@font-face {
    font-family: mediumText;
    src: url(font/Assistant-Medium.ttf);
}



body::before{
    content: "";
    display: block;
    height: 5rem;
}

.navSection{
    background-color: #f9e9aa;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    filter: drop-shadow(1px 5px 18px #856701);
}



.mainNav li{
    list-style-type: none;
    padding: 0 1rem;
}

.mainNav ul a{
    text-decoration: none;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    letter-spacing: .04rem;
    color: #c53b00;
}

.mainNav ul a:hover{
    color: #1286df;
}

@media only screen and (max-width: 991px) {
    .mainNav li{
        padding: 0 .4rem;
    }
}

@media only screen and (max-width: 768px) {
    .mainNav a{
        max-width: max-content;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 650px) {
    .mainNav li{
        padding: 0 .7rem;
    }
}

/*hero container styles*/

.heroContent{
    background-image: url('images/hero_image.jpg');
    max-width: 100%;
    min-height: 800px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.backgroundColor{
    background-color: #1c472886;
}

.backgroundColor, .heroText{
    min-height: 800px;
}

.heroText{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}

.heroText h1{
    font-family: boldText;
    font-size: clamp(1.5rem, 3vw, 3.1rem);
    font-weight: 700;
    max-width: 30ch;
    letter-spacing: .25rem;
    margin-bottom: 2rem;
}

.heroText p{
    font-family: lightText;
    font-size: clamp(1.1rem, 2.5vw, 2rem);
    font-weight: 200;
    max-width: 40ch;
    padding: 1.5rem 0;
}

.btn{
    max-width:max-content;
    padding: .5rem 1.5rem;
    background-color: #1286df;
    color: #f9e9aa;
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.btn:hover{
    background-color: #f9e9aa;
    color: #1286df;
}

@media only screen and (max-width: 768px) {
    .heroContent{
        min-height: 500px;
    }
    .backgroundColor, .heroText{
        min-height: 500px;
    }
}

/*end hero container styles*/

/*about section styles*/

main{
    background: linear-gradient(to bottom, #f9e9aa9c, white, #f9e9aa9c);
}

.aboutSection{
    padding: 3rem 0;
}

.aboutSection img{
    max-width: 100%;
}

.aboutSection h2{
    font-family: boldText;
    font-size: clamp(1.7rem, 2.5vw, 2.1rem);
    letter-spacing: .15rem;
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.aboutSection p{
    font-family: regularText;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 200;
    line-height: 2.4rem;
    letter-spacing: .12rem;
    padding-left: 2.5rem;
    padding-bottom: 3rem;
    margin: 0;
    color: #3a3a3a;
}
.moreBtn{
    max-width:fit-content;
    margin: 0 auto;
}

@media only screen and (max-width:767px) {
    .aboutSection p{
        padding-left: 0;
    }
}


@media only screen and (max-width: 600px) {
    .aboutSection p{
        line-height: 1.7rem;
        padding: 1rem 1.5rem;
    }
}
/*end about section*/

/*Sessions Preview*/

/*
===============



.sessionTitle{
    background: linear-gradient(to bottom, #f8efc952 0%, #e4cf7c52 100%), url("images/hero_image.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sessionTitle h2{
    padding: 0 .5rem;
    max-width: max-content;
    font-size: 2.4rem;
    letter-spacing: .15rem;
    font-weight: 600;
    color:white;
    background-color: #1286dfb3;
    margin-top: 1rem;
    border-radius: 0 2rem 0 2rem;
    transform: translateX(-2.5rem);
}


.sessionTitle a{
    max-width: 50%;
    margin: 0 auto;
    border-radius: 1rem;
    text-decoration: none;
    background-color: #1286df;
    color: #f9e9a9;
    font-size: 1.1rem;
    font-weight: 700;
    padding: .5rem 1.5rem;
    margin-bottom: 1rem;
}

.sessionTitle a:hover{
    background-color: #f9e9aa;
    color: #1286df;
    outline: 1px solid #255c34;
}


.sessionName{
    grid-column: 1 / 3;
    max-width: 100%;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
}

.sessionsContent img{
    max-width: 100%;
}

.sessionsContent{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}

.sessionText{
    grid-column: 3 / 5;
    align-content: center;
    max-width: 50ch;
    min-height: 450px;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 200;
    letter-spacing: .15rem;
    padding: 0 1rem;
    margin: 0 auto;
}

.odd .sessionName{
    grid-column: 3 / 5;
}

.odd .sessionText{
    grid-column: 1 / 3;
    grid-row: 1;
}



===============
*/

.sessionsHeading{
    font-family: boldText;
    padding: 2.5rem 0;
}

.sessionTitle{
    position: relative;
}

.sessionsContent img{
    max-width: 100%;
    height: 450px;
    object-fit:cover;
}

.sessionTitle h2{
    position: absolute;
    top: -1rem;
    left: 0;
    padding: 0 .5rem;
    max-width: max-content;
    font-size: 2.4rem;
    letter-spacing: .15rem;
    font-weight: 600;
    color:white;
    background-color: #1286dfb3;
    border-radius: 0 2rem 0 2rem;
    transform:translateX(-2.5rem);
}

.sessionTitle a{
    position: absolute;
    bottom: 0;
    right: 35%;
    border-radius: 1rem;
    text-decoration: none;
    background-color: #1286df;
    color: #f9e9a9;
    font-size: 1.1rem;
    font-weight: 700;
    padding: .3rem 1.5rem;
    transform: translateY(-3rem);
}

.sessionTitle a:hover{
    background-color: #f9e9aa;
    color: #1286df;
    transition: 300ms ease;
}

.sessionsContent{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}

.sessionName{
    grid-column: 1 / 3;
    grid-row: 1;
}

.sessionText {
    font-family: regularText;
    grid-column: 3 / 5;
    grid-row: 1;
    align-content: center;
    max-width: 50ch;
    min-height: 450px;
    font-size: clamp(.9rem, 2.5vw, 1.2rem);
    font-weight: 200;
    letter-spacing: .15rem;
    padding: 0 1rem;
    margin: 0 auto;
}

.odd .sessionName {
    grid-column: 3 / 5;
}

.odd .sessionText{
    font-family: regularText;
    grid-column: 1 / 3;
}



@media only screen and (max-width: 991px) {
    .sessionText{
        font-size: 1rem;
    }
}

@media only screen and (max-width: 768px) {

    .sessionText{
        align-content: start;
        min-height: max-content;
        padding-bottom: 1.5rem;
    }

    .sessionName, .odd .sessionName {
        grid-column: 1 / 5;
        grid-row: 1;
    }
    .sessionText, .odd .sessionText {
        grid-column: 1 / 5;
        grid-row: 2;
    }
    .sessionsContent figure{
        margin: 0;
    }
}

@media only screen and (max-width: 600px) {
    .sessionTitle h2{
        transform: translateX(.5rem);
        top: 0;
    }
}

/*End of Sessions*/

/*sentament section*/

.sentaments{
    min-height: 300px;
    padding: 4rem 0;
}

.border1, .border4{
    border: 2px solid #255c34;
}
.border2, .border3{
    max-width: 50%;
    margin: 0 auto;
    margin-top: 3rem!important;
    margin-bottom: 3rem!important;
    border:  2px solid #255c34;
}

.testimonialDisc{
    max-width: 50%;
    width: 40ch;
    font-size: clamp(.9, 2.5vw, 1.3rem);
    margin: 0 auto;
}

.testimonialDisc .small{
    font-size: .9rem;
}

.carousel-inner{
    background-color: #255c3450;
    min-height:300px;
    padding: 1rem 0;
}


@media only screen and (max-width: 700px) {
    .testimonialDisc{
        max-width: 70%;
    }
}

/*end of sentaments*/

/*book session preview*/

.bookSession, .bookSession img{
    border-radius: 30px;
}

.card-img-overlay{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #05621e64;
    border-radius: 30px;
}
.card-img-overlay h2{
    transform: translateY(-2.5rem);
    max-width: max-content;
    background-color: #1286dfbb;
    color: white;
}

.bookSession a{
    margin: 0 auto;
}

.bookSession a .btn{
    outline: 1px solid white;
}


/*end of session preview*/

/*newsletter area*/

.newsletter h2{
    font-family: boldText;
    padding-top: 4rem;
    padding-bottom: 2rem;
    max-width: 50%;
    width: 35ch;
    margin: 0 auto;
}

.newsletter form{
    max-width: 45%;
    margin: 0 auto;
}

.newsletter input{
    transform: translateY(-1rem);
}


/*end of newsletter*/

/*footer area*/

footer{
    font-family: mediumText;
    padding: 4rem 0;
    background-image: linear-gradient(to bottom,#f9e9aa9c, #c04c1a3d);
    overflow: auto;
}

footer h3{
    font-family: boldText;
    font-size: 2.1rem;
}

.bizEM{
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: .15rem;
    color: #089b2f;
}

.ccEmail p{
    font-size: 1.1rem;
    font-weight: 100;
}
.socialIcons{
    display: flex;
    font-size: 2.5rem;
}

.socialIcons a{
    color: #089b2f;
}
.socialIcons p{
    padding: 0 2rem;
}

.socialIcons p:nth-of-type(1) {
    padding-left: 0;
}

.socialIcons a:hover{
    color:#414141;
}

.footerGrid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}


.ccEmail{
    grid-column: 1 / 3;
}

.socialsCCP{
    grid-column: 1 / 3;
}

.copyWright{
    grid-column: 3 / 5;
    grid-row-start: 1;
    grid-row-end: 3;
}

.copyWright img{
    max-width: 300px;
    margin-bottom: 2rem;
}

.copyWright p{
    margin: 0;
    font-size: .9rem;
}


@media only screen and (max-width: 700px) {
    .socialIcons p{
        padding: 0 1rem;
    }
}



@media only screen and (max-width:600px) {
    .ccEmail,
    .socialsCCP,
    .copyWright{
        grid-column: 1 / 5;
    }

    .copyWright{
        grid-row-start: 3;
    }

    .copyWright img{
        max-width: 175px;
    }
}