@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=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap');

:root {
--text-color: #666;
--heading-font-family: "MuseoModerno", sans-serif;
--text-font-family:"Poppins", sans-serif;
--theme-color1: #124e73;
--theme-color2: #222;
--bs-breadcrumb-divider: '\e628';
}

/**,::after,::before{
  transition: .4s;
  -webkit-transition: .4s;
  -moz-transition: .4s;
}*/

.offcanvas{
transition: all .7s ease;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
}

body{
overflow-x: hidden;
background: #fffcf5;
}

a{
text-decoration: none;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--heading-font-family);
}

p{
  font-family: var(--text-font-family);
  color: rgba(43,65,80);
}

.container-fluid{
max-width: 1300px;
}



.sec-1{
padding: 150px 0;
background:url(../images/sec1-bg.jpg) center;
position: relative;
z-index: 9;
background-size: cover;
}

.sec-1::before{
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:rgba(0,0,0, 0.8); 
  z-index: -1;
}

.sec-1 h1{
color: #9b55d7;
font-weight: 300;
font-size: 48px;
}

.sec-1 h2{
    color: var(--bs-white);
    padding: 15px 0;
    font-weight: 200;
font-size: 48px;
}

.sec-1 p{
  color: var(--bs-white);
  font-family: var(--text-font-family);
}


.sec1-in{
padding: 0px 50px;
}

.sec-1 a{
font-family: var(--text-font-family);
background: #6ea3c4;
border-radius: 4px;
padding: 10px 16px;
display: inline-block;
color: #222;
font-weight: 500;
margin-right: 12px;
}


.sec-2{
padding: 50px 0;
}

.sec-2 h2{
color: var(--theme-color1);
font-weight: 200;
line-height: 50px;
font-size: 36px;
}

.sec-2 h4{
  color: var(--theme-color1);
  font-size: 20px;
  font-weight: 300;
}

.sec-2 p{
color: rgba(43,65,80);
}


.sec2-bx{
padding: 50px 0 30px;
}


.sec-3 h2{
color: var(--theme-color1);
font-weight: 200;
font-size: 40px;
margin-bottom: 50px;
padding-top: 40px;
}

.sec3-bx{
  padding: 20px 25px;
}

.sec3-bx h4{
font-weight: 300;
color: rgba(43,65,80);
}

.sec3-bx p{
line-height: 26px;
margin: 0;
}

.sec-4{
padding: 50px 0;
}

.sec4-title{
padding-bottom: 30px;
}

.sec4-title h2{
color: var(--theme-color1);
font-weight: 200;
font-size: 40px;
margin-bottom: 50px;
}

.sec4-bx span{
background: #f3eee3;
clip-path: polygon(0 0, 95% 0, 100% 50%, 96% 100%, 0 100%, 5% 51%);
-webkit-clip-path: polygon(0 0, 95% 0, 100% 50%, 96% 100%, 0 100%, 5% 51%);
-moz-clip-path: polygon(0 0, 95% 0, 100% 50%, 96% 100%, 0 100%, 5% 51%);
width: 100%;
display: flex;
padding: 9px 12px;
justify-content: center;
}

.sec4-bx span img{
  width: 40px;
}


.sec4-bx h4{
font-weight: 300;
color: rgba(43,65,80);
padding-top: 20px;
}


.sec4-bx p{
line-height: 26px;
}

.sec-5{
  position: relative;
overflow: hidden;
}

.sec5-left img{
  position: absolute;
  z-index: -1;
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 45%;
}



.sec5-right{
background: #000;
padding: 70px 40px 50px;
}

.sec5-right h2{
  color: var(--bs-white);
  margin-bottom: 25px;
    font-weight: 300;
}

.why-bx{
display: flex;
margin-bottom: 20px;
}

.why-bx span{
clip-path: polygon(50% 8%, 100% 0, 100% 92%, 50% 100%, 0 91%, 0 0);
background: #f3eee3;
font-family: var(--heading-font-family);
width: 80px;
margin-right: 12px;
font-size: 21px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}




.why-bx h4{
  font-weight: 200;
}

.why-bx h4, .why-bx p{
color: var(--bs-white);
}

.why-bx p{
  font-size: 15px;
  margin: 0;
}

.why-bx div{
  width: 100%;
}


.sec-6{
  position: relative;
  overflow: hidden;
}

.sec6-left h2{
color: var(--theme-color1);
font-weight: 200;
font-size: 40px;
margin-bottom: 50px;
padding-top: 40px;
}

.enq-form{
  background: var(--bs-white);
}

.enq-form h2{
font-weight: 300;
color: var(--theme-color1);
margin-bottom: 25px;
}


.enq-form .form-control, .enq-form .form-select{
  font-size: 15px;
  font-family: var(--text-font-family);
  padding: 12px 18px;
margin-bottom: 20px;
}


.form-select:focus, .form-control:focus {
  border-color: var(--theme-color1);
  box-shadow: none;
}


.enq-form .btn {
  background: var(--theme-color1);
  color: var(--bs-white);
  text-transform: uppercase;
  font-family: var(--text-font-family);
  padding: 12px 30px;
  font-size: 15px;
  border-radius: 30px;
  transition: .4s;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  position: relative;
  overflow: hidden;
  z-index: 9;
  border: none;
  text-decoration: none;
  transition: .4s;
  -webkit-transition: .4s;
  -moz-transition: .4s;
}

.enq-form .btn:hover {
  background: var(--theme-color2);
}

.enq-form .btn i{
  padding-left: 4px;
}


@media only screen and (min-width:0px) and (max-width:390px){ 
}



@media only screen and (min-width:0px) and (max-width:575px){ 


}

@media only screen and (min-width:576px) and (max-width:767px){ 

}


@media only screen and (min-width:768px) and (max-width:991px){

}

@media only screen and (min-width:992px) and (max-width:1199px){ 

}

@media (width:1024px){

}


@media only screen and (min-width:1200px) and (max-width:1399px){ 

}

@media (min-width:1400px){ 

}