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







/* hero */
.hero{
    overflow: hidden;
    background-color: #f1ead1;
}


.ceckerLine{
    position: relative;
    bottom: -1px;
}

.heromainimg{
    width: 85%;
}

.imageSection{
    z-index: 2;
    width: 100%;
    margin: auto;
}



.hero h1{
    text-align: center;
    font-size: 194px;
    color:#097d4c;
  font-family: "Londrina Solid", sans-serif;
  font-weight: 900;
  font-style: normal;
	letter-spacing: 5px;
    padding-top: 40px;
}

.hero h2{
    text-align:center;
    font-family: "La Belle Aurore", cursive;
	font-weight: 400;
    color:#097d4c;
    font-size: 90px;
}

.perticulerimageWrapper {
    position: relative;
    bottom: -76px;
    z-index: 2;
}

.floatingimageOne{
    position: absolute;
    width: 10%;
    left: 6%;
}

.floatingimageTwo{
    position: absolute;
    width: 10%;
    right: 10%;
    bottom: 50%;
}
/* hero */




/* portfolio section */
.portfolioSection{
    background-color: #097d4c;
    padding-top: 110px;
    padding-bottom: 30px;
}

.portfolioSection h1{
    color: #f1ead1;
    font-family: "Averia Serif Libre", serif;
    font-size: 100px;
    font-weight: 800;
    line-height: 110px;
    letter-spacing: -4px;
}

.portfolioSection p{
    color: #f1ead1;
    font-size: 23px;
	  font-family: "Nunito", sans-serif;
  font-weight: 300;

}
.textwithImage{
    position: relative;
}

.portfoliofloatingimageone{
    width: 6%;
    position: absolute;
    top: -16%;
    left: -5%;
    transform: rotate(30deg);
}

.yellowMark{
    transform: rotate(47deg);
    width: 25%;
    position:absolute;
    top: 78%;
    left: 5%;
}

.portfolioSectiontext{
    padding-top: 80px;
}

.portfolioSectiontext2{
    display: none;
}

.portfolioImagewrapper{
    position: relative;
}

.portfoliofloatingimagetwo{
    position: absolute;
    width: 13%;
    top: -10%;
    right: 0;
}

.portfolioImage {
    border-radius: 20px;
}

/* portfolio section */




/* video section */

.videoSection {
    background-color: #f1ead1;
    padding-top: 20px;
    padding-bottom: 20px;
}

.videoToptext {
    position: relative;
}

.videoToptext h2 {
    text-align: center;
    font-family: "Averia Serif Libre", serif;
    font-size: 70px;
    font-weight: 400;
	color: #097d4c;
    letter-spacing: -4px;
	
}

.videosectionfloationimageOne {
    width: 3%;
    transform: rotate(30deg);
    position: absolute;
    left: 3%;
    top: 40%;
}

.videosectionfloationimagetwo {
    width: 3%;
    transform: rotate(30deg);
    position: absolute;
    right: 3%;
    top: 60%;
}

.videosectionfloationimagethree {
    width: 3%;
    transform: rotate(50deg);
    position: absolute;
    left: 12%;
    top: 60%;
}

.videosectionfloationimagefour {
    width: 3%;
    transform: rotate(90deg);
    position: absolute;
    right: 9%;
    top: 20%;
}

.col-12.px-0 {
    padding-left: 0;
    padding-right: 0;
}
/* video section */





/* client section */
.clientSection {
    text-align: center;
    background-color: #097d4c;
    padding-top: 20px;
    padding-bottom: 0;
}

.clientSection h1 {

	text-align: center;
    font-family: "Averia Serif Libre", serif;
    font-size: 70px;
    font-weight: 400;
    color: #f1ead1;
    letter-spacing: -4px;
}


.whitestartSection{
    position: relative;
}

.whitestartSection img{
    width: 3%;
}

.clientstarOne{
    position: absolute;
    left: 3%;
    top: 0%;
}

.clientstarTwo{
    position: absolute;
    left: 17%;
    top: 9%;
}

.clientstarThree{
    position: absolute;
    right: 3%;
    top: 0%;
}

.clientstarFour{
    position: absolute;
    right: 17%;
    top: 9%;
}



/* client */



/* offer section */

.offerSection{
    background-color: #097d4c;
    margin-top: -2px;
    padding-bottom:0px;
    padding-top: 40px;
}


.offerSectionWrapper{
    background-color: #f1ead1;
    position: relative;
    width: 100%;
}


.offerSection h1{
    font-size: 130px;
    color:#097d4c;
    font-family: "Averia Serif Libre", serif;
    padding-top: 50px;
    font-weight: 900;
    line-height: 110px;
    letter-spacing: -5px;
    padding-bottom: 30px;
}

.offerinfoWrapper{
    padding-top:60px;
    padding-bottom: 0px;
}

.offerinfoWrapper p{
    color: #097d4c;
    font-size: 45px;
	  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  margin-top: -12px;
}

.offerinfoWrapper a{
    text-decoration: none;
    color: #097d4c;
    font-weight: 400;
    font-size: 30px;
}

.socialMdia img{
    width: 40px;
	padding-right: 5px;
}


.mobileonly{
    display: none;
}

.checkerline2{
    position: relative;
    bottom: -2px;
}

.showafter9911{
    display: none;
}


/* offer section */
@media (max-width: 1399px){
    .perticulerimageWrapper {
        bottom: -59px;
    }
    .hero h1 {
        font-size: 166px;
    }
}

@media (max-width: 1366px){
    .offerinfoWrapper a {
        font-size: 32px;
    }
}


@media (max-width: 1199px){
    .hero h1 {
        font-size: 137px;
    }
    .offerinfoWrapper p {
        margin-top: -15px;
    }

    .clientstarOne{
        position: absolute;
        left: 3%;
        top: 0%;
    }
    
    .clientstarTwo{
        position: absolute;
        left: 15%;
        top: 9%;
    }
    
    .clientstarThree{
        position: absolute;
        right: 3%;
        top: 0%;
    }
    
    .clientstarFour{
        position: absolute;
        right: 15%;
        top: 9%;
    }
    .logoContainer {
        padding: 10px 40px;
    }
    .portfolioSection h1 {
        font-size: 93px;
    }
    .offerinfoWrapper a {
        font-size: 27px;
    }
}

@media (max-width: 1024px){

    .hero h2 {
        font-size: 80px;
    }

    .portfolioSection h1 {
        font-size: 90px;
        line-height: 90px;
    }

    .portfolioSectiontext {
        padding-top: 50px;
    }
    .portfolioSection p {
        font-size: 20px;
    }

    .offerSection h1 {
        font-size: 90px;
        color: #097d4c;
        font-family: "Averia Serif Libre", serif;
        padding-top: 50px;
        font-weight: 900;
        line-height: 90px;
        letter-spacing: -5px;
        padding-bottom: 30px;
    }

    .offerinfoWrapper a {
        font-size: 28px;
    }

    .socialMdia img {
        width: 40px;
    }


}

@media (max-width: 991px){

    .hero h1 {
        font-size: 99px;
    }

    .clientstarOne{
        position: absolute;
        left: 3%;
        top: 0%;
    }
    
    .clientstarTwo{
        position: absolute;
        left: 12%;
        top: 9%;
    }
    
    .clientstarThree{
        position: absolute;
        right: 3%;
        top: 0%;
    }
    
    .clientstarFour{
        position: absolute;
        right: 12%;
        top: 9%;
    }

    
    

    .logoContainer {
        padding: 10px 0px;
    }

    /* .hiddenafter991{
        display: none;
    } */
    .showafter991{
        display: block;
        display: flex;
    }

    .showafter9911{
        display: block;
        display: flex;
    }

    .desktoponly{
        display: none;
    }

    .mobileonly{
        display: block;
    }
    .perticulerimageWrapper {
        position: relative;
        bottom: -40px;
        z-index: 2;
    }

    .hero h2 {
        font-size: 60px;
    }
    .portfolioSection h1 {
        font-size: 65px;
        line-height: 70px;
    }
    .portfolioSection p {
        font-size: 18px;
    }

    .videoToptext h2 {
        font-size: 60px;
    }
    .clientSection h1 {
        font-size: 60px;
    }

    
}

@media (max-width: 768px){

    .hero h2 {
        font-size: 60px;
    }

    .perticulerimageWrapper {
        position: relative;
        bottom: -40px;
        z-index: 2;
    }

    .portfolioSection h1 {
        font-size: 65px;
        line-height: 65px;
    }

    .videoToptext h2 {
        font-size: 60px;
    }

    .clientSection h1 {
        font-size: 60px;
    }

    .clientSection h1 {
        padding-bottom: 35px;
    }
}

@media (max-width: 767px){

    .hero h1 {
        font-size: 70px;
    }
    .portfoliofloatingimageone {
        top: -7%;
    }

    .portfolioSection {
        background-color: #097d4c;
        padding-top: 60px;
        padding-bottom: 0px;
    }
    .offerinfoWrapper p {
        margin-top: -11px;
    }
    .offerinfoWrapper p {
        font-size: 35px;
    }

    .hero h2 {
        font-size: 50px;
    }
    .ceckerLine {
        position: relative;
        bottom: -5px;
    }

    .perticulerimageWrapper {
        position: relative;
        bottom: -34px;
        z-index: 2;
    }

    .portfolioSection h1 {
        font-size: 50px;
        line-height: 55px;
        padding-top: 30px;
    }

    .portfolioSectiontext {
        padding-top: 25px;
    }

    .videoToptext h2 {
        font-size: 50px;
    }

    .clientSection h1 {
        font-size: 45px;
    }


    


.offerSection h1 {
    font-size: 65px;
    line-height: 70px;
    letter-spacing: -5px;
    padding-bottom: 0px;
}

.offerinfoWrapper {
    padding-top: 30px;
}

.offerinfoWrapper a {
    font-size: 22px;
}

.portfolioSectiontext{
    display: none;
}

.portfolioSectiontext2{
    padding-top: 30px;
    display: block;
}

.checkerline2 {
    position: relative;
    bottom: -4px;
}
.yellowMark {
    top: 84%;
}
}


@media (max-width: 575px){
    .perticulerimageWrapper {
        bottom: -30px;
    }
}


@media (max-width: 534px){
    .hero h1 {
        font-size: 69px;
    }
}

@media (max-width: 528px){
    .hero h1 {
        font-size: 68px;
    }
}

@media (max-width: 522px){
    .hero h1 {
        font-size: 67px;
    }
}

@media (max-width: 520px){

    .videoToptext h2 {
        font-size: 35px;
    }


    .clientSection h1 {
        padding-bottom: 25px;
    }
    .offerinfoWrapper a {
        font-size: 20px;
    }

    .clientSection h1 {
        padding-top: 0px;
    }

    .clientSection h1 {
        font-size: 35px;
    }
}


@media (max-width: 515px){
    .hero h1 {
        font-size: 66px;
    }
}


@media (max-width: 509px){
    .hero h1 {
        font-size: 65px;
    }
}

@media (max-width: 503px){
    .hero h1 {
        font-size: 64px;
    }
}
@media (max-width: 496px){
    .hero h1 {
        font-size: 63px;
    }
}
@media (max-width: 490px){
    .hero h1 {
        font-size: 62px;
    }
}

@media (max-width: 484px){
    .hero h1 {
        font-size: 61px;
    }
}

@media (max-width: 478px){
    .hero h1 {
        font-size: 60px;
    }
}

@media (max-width: 471px){
    .hero h1 {
        font-size: 59px;
    }
}




@media (max-width: 470px){
    .offerinfoWrapper p {
        font-size: 30px;
        margin-top: -8px;
    }

    .portfolioSection h1 {
        font-size: 40px;
        line-height: 47px;
    }
}



@media (max-width: 465px){
    .hero h1 {
        font-size: 58px;
    }
}
@media (max-width: 459px){
    .hero h1 {
        font-size: 57px;
    }
}
@media (max-width: 452px){
    .hero h1 {
        font-size: 56px;
    }
}
@media (max-width: 446px){
    .hero h1 {
        font-size: 55px;
    }
}
@media (max-width: 446px){
    .hero h1 {
        font-size: 54px;
    }
}




@media (max-width: 449px){
    .offerSection h1 {
        font-size: 55px;
        line-height: 65px;
    }
    .socialMdia img {
        width: 35px;
    }
}


@media (max-width: 433px){
    .hero h1 {
        font-size: 53px;
    }
}
@media (max-width: 427px){
    .hero h1 {
        font-size: 52px;
    }
}




@media (max-width: 430px){
    .offerinfoWrapper p {
        font-size: 25px;
    }
    .socialMdia img {
        width: 30px;
    }
    .offerinfoWrapper a {
        font-size: 18px;
    }
    .offerinfoWrapper p {
        margin-top: -5px;
    }
}

@media (max-width: 427px){
    .hero h1 {
        font-size: 52px;
    }
}

@media (max-width: 425px){


    .offerinfoWrapper p {
        margin-top: 0px;
    }
    
    .showafter991{
        display: none;
    }

    .showafter425{
        display: block;
    }


}


@media (max-width: 425px){

    .hero h2 {
        font-size: 30px;
    }

    .offerinfoWrapper a {
        font-size: 16px;
    }
    .socialMdia img {
        width: 25px;
    }

    .offerinfoWrapper p {
        font-size: 20px;
    }

    .imgEighteen {
        width: 340px;
        height: 54px;
    }

    .offerSection h1 {
        font-size: 45px;
        line-height: 43px;
        letter-spacing: -2px;
    }
    .socialMdia{
        padding-left: 10px;
    }
    .ceckerLine {
        position: relative;
        bottom: -8px;
    }
    .checkerline2 {
        position: relative;
        bottom: -6px;
    }

    .portfolioSection {
        padding-top: 35px;
        padding-bottom: 0px;
    }
    .clientSection {
        padding-top: 20px;
    }

}
@media (max-width: 422px){
    .hero h1 {
        font-size: 51px;
    }
}
@media (max-width: 415px){
    .hero h1 {
        font-size: 50px;
    }
}
@media (max-width: 408px){
    .hero h1 {
        font-size: 49px;
    }
}
@media (max-width: 402px){
    .hero h1 {
        font-size: 48px;
    }
}
@media (max-width: 396px){
    .hero h1 {
        font-size: 47px;
    }
}
@media (max-width: 389px){
    .hero h1 {
        font-size: 46px;
    }
}

@media (max-width: 383px){
    .hero h1 {
        font-size: 45px;
    }
}
@media (max-width: 377px){
    .hero h1 {
        font-size: 44px;
    }
}
@media (max-width: 371px){
    .hero h1 {
        font-size: 43px;
    }
}
@media (max-width: 364px){
    .hero h1 {
        font-size: 42px;
    }
}
@media (max-width: 358px){
    .hero h1 {
        font-size: 41px;
    }
}
@media (max-width: 358px){
    .hero h1 {
        font-size: 40px;
    }
}






@media (max-width: 350px){
    .offerinfoWrapper a {
        font-size: 15px;
    }
}


@media (max-width: 330px){
    .videoToptext h2 {
        font-size: 33px;
    }
    .clientSection h1 {
        font-size: 31px;
    }
    .yellowMark {
        top: 88%;
    }

    .portfolioSection h1 {
        font-size: 35px;
    }
    .offerSection h1 {
        font-size: 38px;
        line-height: 43px;
        letter-spacing: -2px;
    }
    .offerinfoWrapper p {
        font-size: 18px;
    }
    .offerinfoWrapper a {
        font-size: 15px;
    }
}


@media (max-width: 320px){
    .offerinfoWrapper a {
        font-size: 13px;
    }
}

@media (max-width: 300px){

    .portfolioSection h1 {
        font-size: 33px;
    }
    .portfolioSection h1 {
        font-size: 28px;
        line-height: 35px;
        letter-spacing: -1px;
    }
    .portfolioSection p {
        font-size: 14px;
    }

    .videoToptext h2 {
        font-size: 31px;
    }

    .clientSection h1 {
        font-size: 37px;
    }
    .socialMdia img {
        width: 21px;
    }
    .offerinfoWrapper a {
        font-size: 14px;
    }

}