@font-face {

  font-family: play-regular;

  src: url("../fonts/Play-Regular.ttf");

  font-display: swap;

}



@font-face {

  font-family: play-bold;

  src: url("../fonts/Play-Bold.ttf");

  font-display: swap;

}



@font-face {

  font-family:jost-regular;

  src: url("../fonts/Jost-Regular.ttf");

  font-display: swap;

}



@font-face {

  font-family:jost-medium;

  src: url("../fonts/Jost-Medium.ttf");

  font-display: swap;

}



@font-face{

  font-family: jost-semibold;

  src: url("../fonts/Jost-SemiBold.ttf");

  font-display: swap;

}



@font-face {

  font-family:jost-light;

  src: url("../fonts/Jost-Light.ttf");

  font-display: swap;

}



@font-face {

  font-family:jost-bold;

  src: url("../fonts/Jost-Bold.ttf");

  font-display: swap;

}


@font-face { 
  font-family: Cruyff Sans; 
  src: url('../fonts/CruyffSans-Medium.woff2'); 
}

@font-face {
  font-family: Cruyff Sans Bold;
  src: url("../fonts/CruyffSans-Bold.woff2");
  font-display: swap;
}

@font-face {
  font-family: Cruyff Sans Light;
  src: url("../fonts/CruyffSans-Light.woff2");
  font-display: swap;
}

@font-face {
  font-family: Cruyff Sans Regular;
  src: url("../fonts/CruyffSans-Regular.woff2");
  font-display: swap;
}

@font-face {
  font-family: Cruyff Sans Medium;
  src: url("../fonts/CruyffSans-Medium.woff2");
  font-display: swap;
}





body,h1,h2,h3,h4,h5,h6,p,ul,li,ol,a{

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}



a{

  text-decoration: none;

}



.common-section-padding{

  padding: 4rem 0;

}



.common-section-heading{

  font-size: 150%;

}



.common-section-small-heading{

  font-size: 280%;

}



.common-section-para{

  font-size: 100%;

}



.banner-large-text{

  font-size: 370%;

}



.banner-small-text{

  font-size: 180%;

}





/*heading css*/

.heading-wrapper h2{

  color: #000;

  font-family: "Poppins", sans-serif !important;

  position: relative;

  padding-bottom: 2rem;

  text-transform: uppercase;

  letter-spacing: 2px;

}



.mob-banner{

  display: none;

}



.heading-wrapper h3{

  color: #000;

  font-family: play-bold;

  padding-bottom: 1rem;

  width: 100%;

  max-width: 1000px;

  text-transform: capitalize;

}



/*.heading-wrapper h2:before{

 content: "";

 background-color: #000;

 height: 35px;

 width: 1.5px;

 position: absolute;

 top: 52px;

 left: 5px;

}*/



/*home banner section*/

.contact-banner-section{

  position: relative;

}



.contact-heading-wrapper h2{

  color: #002A2D;

  font-family: Cruyff Sans Bold;

  margin-bottom: 2rem;

}



.contact-banner-img-wrapper img{

  width: 100%;

  height: auto;

  aspect-ratio: auto 1440/832 ;

}



.contact-banner-text-wrapper{

  position: absolute;

  bottom: 30%;

  left: 8%;

  width: 100%;

  max-width: 650px;

}



.contact-banner-text-wrapper h2{

  color: #fff;

  text-transform: uppercase;

}



.contact-banner-text-wrapper h3{

  color: #fff;

  font-family: Cruyff Sans Bold;

}



.contact-banner-text-wrapper .heading-wrapper h2:before{

  background-color: #fff;

}



.contact-main-content-wrapper{

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 3rem;

}



.contact-content-inner-wrapper{

  width: calc((100% - 30px) / 3);

  margin-right: 15px;

}

.contact-content-inner-wrapper:last-child {

  margin-right: 0px;

}

.content-heading-wrapper h3{

  color: #777777;

  font-family: Cruyff Sans Bold;

  font-size: 130%;

  padding-bottom: 1rem;

}



.content-heading-wrapper h4{

  font-size: 130%;

  color: #000;

  font-family: jost-semibold;

}



.content-heading-wrapper p{

  font-size: 120%;

  font-family: Poppins;

  color: #000;

}

.content-heading-wrapper p a {

  color: #000;

}

.content-heading-wrapper p.view-map-btn-wrapper a {

  color: #FF792B;

}

.view-map-btn-wrapper a{

  color: #FF792B;

  font-size: 90%;

  font-family: Cruyff Sans Bold;

}



/*form ection*/

.form-main-content-container{

  display: flex;

  flex-wrap: wrap;

  margin: 5rem 0 0;

}



.work-with-us-content-wrapper{

  width: 40%;

  padding-right: 6rem;

}



.form-outer-wrapper-flex{

  width: 60%;

  background-color: #ECF9FA;

  padding: 2rem;

}



.form-control-flex{

  display: flex;

  justify-content: space-between;

}



.work-with-us-content-wrapper h2{

  font-family: Cruyff Sans Bold;

  color: #000;

  padding-bottom: 1rem;

}



.work-with-us-content-wrapper p{

  line-height: 1.75;
  font-family: 'Poppins';
  padding-bottom: 1rem;

}



.work-with-us-content-wrapper span{

  font-family: Cruyff Sans Regular;

}



.form-label{

  color: #000;

  text-transform: uppercase;

  font-size: 100%;

  font-family: Cruyff Sans Bold;

  letter-spacing: 2px;

}



.input-wrapper{

  margin-bottom: 1.5rem;

}



.form-control{

  border-radius: 0;

  border: 1px solid #C1EAEE;

  padding: 12px 15px;

}



input::placeholder{

  color: #777777;

  font-size: 90%;

  font-family:Cruyff Sans Regular;

}



.form-submit-btn input[type=submit] {

  color: #F4881F;

  border: 2px solid #F4881F;

  border-radius: 50px;

  font-size: 105%;

  font-family: Cruyff Sans Bold;

  padding:15px 50px;

  text-transform: uppercase;

}



.form-submit-btn{

  margin-top: 1rem;

}



.form-submit-btn input[type=submit]:hover{

  background-color: #F4881F;

  color: #fff;

}



.view-map-btn-wrapper {

  margin-top: 1rem;

}

#map-viwer {

  padding:2rem 0;

  scroll-margin-top:100px;

}

#map-viwer iframe {

  width: 100%;

}

@media screen and (min-width: 320px) and (max-width: 568px) {

  .common-section-heading{

    font-size: 130%;

  }
  .heading-wrapper h2:before{
    top: 38px;
  }

  .contact-content-inner-wrapper{

    width: 100%;

    padding: 0;

    margin-bottom: 2rem;

  }



  .mob-banner{

    display: block;

  }

  .desktop-banner{

    display: none;

  }



  .common-section-padding{

    padding: 2rem 0;

  }

  .work-with-us-content-wrapper{

    width: 100%;

    padding: 0;

    margin-bottom: 2rem;

  }

  .form-outer-wrapper-flex{

    width: 100%;

    padding: 1rem;

  }

  .form-label{

    font-size: 80%;

  }

  .contact-banner-text-wrapper {

    max-width: 330px;

    left: 4%;

  }

  .input-wrapper{

    margin-bottom: 1rem;

  }

  .form-submit-btn a{

    padding: 8px 35px;

    font-size: 80%;

  }

  .contact-main-content-wrapper{

    margin-bottom: 1rem;

  }

  .common-section-para{

    font-size: 100%;

  }

  .content-heading-wrapper p{

    font-size: 100%;

  }

  .content-heading-wrapper h3{

    font-size: 100%;

  }

  .view-map-btn-wrapper a{

    font-size: 100%;

  }

  .content-heading-wrapper h4{

    font-size: 100%;

  }

  .common-section-small-heading{

    font-size: 200%;

  }

  .form-main-content-container{

    margin:0 0;

  }

}





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

  .common-section-heading{

    font-size: 200%;

  }

  .contact-content-inner-wrapper{

    width: 100%;

    padding: 0;

    margin-bottom: 2rem;

  }

  .common-section-padding{

    padding: 2rem 0;

  }



  .mob-banner{

    display: block;

  }

  .desktop-banner{

    display: none;

  }



  .work-with-us-content-wrapper{

    width: 100%;

    padding: 0;

    margin-bottom: 2rem;

  }

  .form-outer-wrapper-flex{

    width: 100%;

    padding: 2rem;

  }

  .form-label{

    font-size: 100%;

  }

  .contact-banner-text-wrapper {

    max-width: 530px;

  }

  .input-wrapper{

    margin-bottom: 1rem;

  }

  .form-submit-btn a{

    padding: 8px 35px;

    font-size: 80%;

  }

  .contact-main-content-wrapper{

    margin-bottom: 1rem;

  }

  .common-section-para{

    font-size: 150%;

  }

  .content-heading-wrapper p{

    font-size: 150%;

  }

  .content-heading-wrapper h3{

    font-size: 150%;

  }

  .view-map-btn-wrapper a{

    font-size: 150%;

  }

  .content-heading-wrapper h4{

    font-size: 150%;

  }

  .form-main-content-container{

    margin:0 0;

  }



}



@media screen and (min-width: 769px) and (max-width: 991px){

 .common-section-heading{

  font-size: 200%;

}

.contact-content-inner-wrapper{

  width: 100%;

  padding: 0;

  margin-bottom: 2rem;

}

.common-section-padding{

  padding: 2rem 0;

}

.work-with-us-content-wrapper{

  width: 100%;

  padding: 0;

  margin-bottom: 2rem;

}

.form-outer-wrapper-flex{

  width: 100%;

  padding: 2rem;

}

.form-label{

  font-size: 100%;

}

.contact-banner-text-wrapper {

  max-width: 530px;

}

.input-wrapper{

  margin-bottom: 1rem;

}

.form-submit-btn a{

  padding: 8px 35px;

  font-size: 80%;

}

.contact-main-content-wrapper{

  margin-bottom: 1rem;

}

.common-section-para{

  font-size: 150%;

}

.content-heading-wrapper p{

  font-size: 150%;

}

.content-heading-wrapper h3{

  font-size: 150%;

}

.view-map-btn-wrapper a{

  font-size: 150%;

}

.content-heading-wrapper h4{

  font-size: 150%;

}

.form-main-content-container{

  margin:0 0;

}

}



@media screen and (min-width: 992px) and (max-width: 1024px){

  .common-section-heading{

    font-size: 150%;

  }

  .contact-banner-text-wrapper {

    left: 5%;

  }

  .contact-content-inner-wrapper:first-child{

    width:43%;

  }

  .contact-content-inner-wrapper:nth-child(2),

  .contact-content-inner-wrapper:nth-child(3) {

    width:26%;

  }

  .content-heading-wrapper h3 {

    font-size: 125%;

  }

  .form-label {

    font-size: 95%;

  }

}



@media screen and (min-width: 1025px) and (max-width: 1280px){

  .content-heading-wrapper h3 {

    font-size: 120%;

  }
  .common-section-small-heading{
    font-size: 240%;
  }


  .contact-banner-text-wrapper {

    left: 6%;

  }

}



@media screen and (min-width: 1600px) and (max-width: 1999px) { 

  body {

    font-size: 18px;

  }

  .content-heading-wrapper h3{

    font-size: 150%;

  }

  .content-heading-wrapper h4{

    font-size: 150%;

  }
  .heading-wrapper h2:before{
    top: 58px;
  }

  .content-heading-wrapper p{

    font-size: 150%;

  }

  .common-section-para{

    font-size: 150%;

  }

  .view-map-btn-wrapper a{

    font-size: 150%;

  }

  .form-label{

    font-size: 110%;

  }

  .form-submit-btn a{

    font-size: 110%;

  }

  input::placeholder{

    font-size: 100%;

  }

  .contact-banner-text-wrapper {

    left: 13.5%;

  }

  .contact-content-inner-wrapper:first-child{

    width:43%;

  }

  .contact-content-inner-wrapper:nth-child(2),

  .contact-content-inner-wrapper:nth-child(3) {

    width:26%;

  }

  .contact-banner-text-wrapper {

    max-width: 800px;

  }

} 



@media screen and (min-width: 2000px) and (max-width: 2499px) {

  body {

    font-size: 18px;

  }

  .content-heading-wrapper h3{

    font-size: 150%;

  }

  .content-heading-wrapper h4{

    font-size: 160%;

  }

  .content-heading-wrapper p{

    font-size: 160%;

  }

  .common-section-para{

    font-size: 160%;

  }

  .view-map-btn-wrapper a{

    font-size: 160%;

  }

  .form-label{

    font-size: 120%;

  }

  .form-submit-btn a{

    font-size: 120%;

  }

  input::placeholder{

    font-size: 110%;

  }

  .contact-banner-text-wrapper {

    left: 20.5%;

  }

  .contact-content-inner-wrapper:first-child{

    width:43%;

  }

  .contact-content-inner-wrapper:nth-child(2),

  .contact-content-inner-wrapper:nth-child(3) {

    width:26%;

  }

  .contact-banner-text-wrapper {

    max-width: 800px;

  }

} 



@media screen and (min-width: 2500px) { 

  .content-heading-wrapper h3{

    font-size: 180%;

  }

  .content-heading-wrapper h4{

    font-size: 180%;

  }

  .content-heading-wrapper p{

    font-size: 180%;

  }

  .common-section-para{

    font-size: 180%;

  }

  .view-map-btn-wrapper a{

    font-size: 180%;

  }

  .form-label{

    font-size: 130%;

  }

  .form-submit-btn a{

    font-size: 130%;

  }

  input::placeholder{

    font-size: 120%;

  }

}