body{overflow-x: hidden; padding: 0;}
h1{color: #e6a27a ; font-family: "Playfair Display", serif;}
h2{ font-size: 2.3em; font-weight:600; color: #2c5685 ;}
.color-orange{color: #e6a27a;}
.color-light-orange{color: #f5ceb7;}
.color-blue{color:#376aa5;}
.color-light-gray{color: #c4c4c4;}
.border-right{border-right: 2px solid #e6a27a;}
p{color: #1e2a36; font-size: 18px;}
.txt22{font-size: 22px; font-weight: 600;}
a{text-decoration: none;}

/* nav */
.btn-color:hover{color: #016993; }



/* new-nav */


*, *:before, *:after 
{ box-sizing: border-box; }
 /* right: -40px;
  top: -100px;
  z-index: 100;
  width: 130px;
  height: 180px; */
label .menu {
  position: absolute;
  right: 50px;
  top: 40px;
  z-index: 100;
  width: 85px;
  height: 85px;
 
  border-radius:  0% ;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
  
}
/* right: 0px;
  top: 50px;
 background:rgba(230, 162, 122, .7); */

label .hamburger {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 40px;
  height: 4px;
  background: #ffffff;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

label input:checked + .menu {
  box-shadow: 0 0 0 100vw rgba(255, 255, 255,  .70), 0 0 0 100vh rgba(255, 255, 255,  .70);
  border-radius: 0;
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}

label input:checked + .menu + ul { opacity: 1; 
bottom: 0px;}

label ul {
  z-index: 200;
  position: absolute;
  top: 50%;
  right: 10%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}
label ul li {
   list-style-type: none;}

label a {
  margin-bottom: 1em;
  display: block;
  color: #1b97c5;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 600;}



/* new header */
@import url(//fonts.googleapis.com/css?family=Lato:300:400);

h1 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
}
.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color:white;
}

.inner-header {
  height:62vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}




/* ___________ */



/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  h1 {
    font-size:24px;
  }
}
/* hero */
.sec0-color{background-color: #e6a27a;opacity: .9;}
.hero{background-size:cover; background-position: center center; height:auto; }
.parent{position: relative;}
.main{color: white; }
.main-title{ border-radius: 10px; }
.main-title h1 { font-size:4em ; color: white;}
.main-title h1 span { font-size:1em ; font-weight: 600 ;}
.main-title button{border:#ffffff 2px solid; color: #ffffff;width: auto; font-size: 1.5em;transition: 1s; background-color: transparent; }
.main-title .btn2 {background-color:#e6a27a ; color: #ffffff;width: auto; font-size: 1.5em;transition: 1s;border-color:#e6a27a; }
.main-title button:hover {background-color: #e6a27a; transition: 1s;border-color: #e6a27a; color: white;}

  /* section0 */
.section0{position: absolute;right: 0px; bottom: -80px; height: 200px; z-index: 10;}
.section0 i{font-size:2em; margin-bottom: 20px; opacity: .8; transition: s;}
.section0 i:hover {opacity: 1; transition: s; color: white;}

/* section1 */
.section1 {margin-top: 150px; margin-bottom: 150px;}
.before{position: absolute; width: 100%;}
.section1 .li-color { color: #467cac;}
.section1 p img {width:10%;}



/* sticky-icon */
.sticky-icon  {
	z-index:1;
	position:fixed;
	top:7%;
	right:0%;
	width:220px;
	display:flex;
	flex-direction:column;}  
.sticky-icon a  {
	transform:translate(160px,0px);
	border-radius:50px 0px 0px 50px;
	text-align:left;
	margin:2px;
	text-decoration:none;
	text-transform:uppercase;
	padding:8px;
	font-size:20px;
	font-family:'Oswald', sans-serif;
	transition:all 0.8s;}
.sticky-icon a:hover  {
	color:#FFF;
	transform:translate(0px,0px);}	
.sticky-icon a:hover i  {
	transform:rotate(360deg);}
/*.search_icon a:hover i  {
	transform:rotate(360deg);}*/
.Facebook  {
	background-color:rgba(53, 55, 80, 0.3);
	color:#FFF;}
	
.Youtube  {
	background-color:rgba(53, 55, 80, 0.3);
	color:#FFF;}
	
.Twitter  {
	background-color:rgba(53, 55, 80, 0.3);
	color:#FFF;}
	
.Instagram  {
	background-color:rgba(53, 55, 80, 0.3);
	color:#FFF;}
	
.Google  {
	background-color:rgba(53, 55, 80, 0.3);
	color:#FFF;}						
.sticky-icon a i {
	background-color:#FFF;
	height:40px;
	width:40px;
	color:#000;
	text-align:center;
	line-height:40px;
	border-radius:50%;
	margin-right:20px;
	transition:all 0.5s;}
.sticky-icon a i.fa-facebook-f  {
	background-color:#FFF;
	color:#2C80D3;}
	
.sticky-icon a i.fa-google-plus-g  {
	background-color:#FFF;
	color:#d34836;}
	
.sticky-icon a i.fa-instagram  {
	background-color:#FFF;
	color:#FD1D1D;}
	
.sticky-icon a i.fa-youtube  {
	background-color:#FFF;
	color:#fa0910;}
	
.sticky-icon a i.fa-twitter  {
	background-color:#FFF;
	color:#53c5ff;}
.fas fa-shopping-cart  {
	background-color:#FFF;}	
#myBtn {
	height:50px;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  text-align:center;
  padding:10px;
  text-align:center;
	line-height:40px;
  border: none;
  outline: none;
  background-color: #1e88e5;
  color: white;
  cursor: pointer;
  border-radius: 50%;
}
.fa-arrow-circle-up  {
	font-size:30px;}

#myBtn:hover {
  background-color: #555;
}			


/* section002 */
/* Bootstrap 5 Card Styles https://codepen.io/cvbijoy */
.section002 .card-effects .card-effect {
  border: none;
  background: #dee2e6;
}
.section002 .card-effects .card-effect .card-body {
  box-shadow: 0px 5px 24.25px 0.75px rgba(0,0,0,0.1);
  background: #fff;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px
}
.section002 .card-effects .card-effect .card-img {
  position: relative;
  overflow: hidden;
}
.section002 .card-effects .card-effect:hover .card-img {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important
}
.section002 .card-effects .card-effect .card-img img {
  width: 100%;
  transition: .6s
}
.section002 .card-effects .card-effect:hover .card-img img {
  transform: scale(1.2);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.section002 .card-effects .img-hover {
    position: relative;
    overflow: hidden
}
.section002 .card-effects .img-hover img {
  transition: all 2s ease;
  transform: scale(1)
}
.section002 .card-effects .img-hover:after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 1;
  z-index: 3
}
.section002 .card-effects .img-hover:before {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 1;
  z-index: 3;
  top: -10%;
  right: 51%;
  bottom: -10%;
  left: 50%;
  background: rgba(255,255,255,0.3)
}
.section002 .card-effects .img-hover:after {
  top: 50%;
  right: -10%;
  bottom: 50%;
  left: -10%;
  background: rgba(255,255,255,0.6)
}
.section002 .card-effects .card-effect:hover .img-hover:before {
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 900ms linear
}
.section002 .card-effects .card-effect:hover .img-hover:after {
  top: 0;
  bottom: 0;
  opacity: 0;
  transition: all 900ms linear
}
.section002 .card-effects .card-effect:hover .img-hover img {
    transform: scale(1.2)
}
.section002 .card-effects .text-tb-lines {
    display: grid;
    align-items: center;
    text-align: center;
    gap: 10px;
    color: #2c5685 ;
}
.section002 .card-effects .text-tb-lines::before, .text-tb-lines::after {
  content: '';
  border-top: 6px double;
  color: #e6a27a;
  opacity: .5;
}
/* Bootstrap 5 Card Styles https://codepen.io/cvbijoy */
.custom-btn {
  color: #fff;
  border-radius: 0px;
  padding: 10px 25px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 1px 1px 1px 0px rgba(255,255,255,.2),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.btn-5 {
  width: 170px;
  height: 50px;
  line-height: 42px;
  padding: 0;
  border: none;
  background: #e6a27a;
background: linear-gradient(0deg, rgba(230,162,122,1) 0%, rgba(230,162,122,1) 100%);
margin: 15px 0px;
}
.btn-5c {
  width: 170px;
  height: 50px;
  line-height: 42px;
  padding: 0;
  border: none;
  background: #2c5685;
background: linear-gradient(0deg, rgb(44, 86, 133) 0%, rgba(44, 86, 133,1) 100%);
margin: 15px 0px;
}
.btn-5:hover, .btn-5c :hover, .custom-btn:hover {
  color:#bd7e5a;
  background: transparent;
   box-shadow:none;
}
.btn-5:before,.btn-5c:before,
.btn-5:after, .btn-5c:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #e6a27a;
  box-shadow:
   -1px -1px 5px 0px #fff,
   7px 7px 20px 0px #0003,
   4px 4px 5px 0px #0002;
  transition:400ms ease all;
}
.btn-5:after, .btn-5c:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after,.btn-5c:hover:before,
.btn-5c:hover:after{
  width:100%;
  transition:800ms ease all;
}





/* sec02 */
.sec02 {  background-position: center top; background-size: cover; background-repeat: no-repeat; background-color: white; padding:  150px 0 0px 0;}
.sec02 p{color: white;}
.p-appear{display: none;}

/* section2 */

.section2 .sec-2-txt, .section07 .sec-2-txt{padding: 50px 100px ;}
.section2 {margin-top: 0;}
/* <!-- Section3 --> */


/* section4 */

.timeline-main .timeline-wrap::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 0;
  background-color: #20395c;
  transition: height 5s ease;
}

.timeline-main.line-animate .timeline-wrap::before {
  height: calc(100% - 10px);
}

.timeline-main {
  width: 100%;
  padding: 25px;
}

.timeline-main .timeline-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.timeline-card {
  width: 50%;
  margin-right: auto;
  position: relative;
}

@media (max-width: 767px) {
  .timeline-main .timeline-wrap::before {
    left: 95%;
  }
  .timeline-card {
    width: 95%;
  }
}

.timeline-card::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #1b97c5;
  opacity: 0;
  transition: all .5s ease;
}

.timeline-card .timeline-card-wrap {
  opacity: 0;
  transform: translateX(20px);
  transition: all .8s ease;
  background-color: #1a3255;
  border-radius: 10px 0;
  padding: 30px;
  margin-right: 35px;
  position: relative;
}

.timeline-card.timeline-animate .timeline-card-wrap {
  opacity: 1;
  transform: translateX(0);
}

.timeline-card.timeline-animate::after {
  opacity: 1;
}

.timeline-card .timeline-card-wrap::before {
  content: "";
  position: absolute;
  left: 30px;
  top: -8px;
  height: 8px;
  width: calc(100% - 60px);
  background-color: #1a3255;
  border-radius: 5px 5px 0 0;
  opacity: 0.3;
}

.timeline-card .timeline-card-wrap::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: #1a3255;
  border-radius: 5px;
  transform: rotate(45deg);
}

.card-head-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.timeline-card-head {
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0;
}

.timeline-card-text {
  line-height: 24px;
  font-weight: 400;
  color: #a2adb3;
  margin: 25px 0 0;
}

@media (max-width: 1199px) {
  .card-head-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .timeline-card-head {
    font-size: 18px;
    line-height: 28px;
  }

  .timeline-card-text {
    font-size: 12px;
    line-height: 22px;
  }
}

@media (min-width: 768px) {
  .timeline-card:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
  }

  .timeline-card:nth-child(even)::after {
    right: unset;
    left: -10px;
  }

  .timeline-card:nth-child(even) .timeline-card-wrap {
    margin-left: 35px;
    margin-right: 0;
    transform: translateX(-20px);
  }

  .timeline-card.timeline-animate:nth-child(even) .timeline-card-wrap {
    transform: translateX(0);
  }

  .timeline-card:nth-child(even) .timeline-card-wrap::after {
    right: unset;
    left: -8px;
    border-right: 10px solid #1a3255;
    border-left: none;
  }
}


/* section5 */
.section5{background-size: cover;background-repeat: no-repeat; background-position: right top;background-attachment: fixed;}

/* contact */
form .form-control{margin-top: 10px;padding-top: 10px; padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.3); color: #bbbbbb;padding-left: 70px; border-bottom: #726359 2px solid;}
.form-control::placeholder{color: #bbbbbb}
.contact h3{margin-top: 30px; color:  #ffffff;}
.contact p{color:  #b9b9b9;}
.contact h3 span{color: #e6a27a;}
form .btn-color {color: white; background-color: #e6a27a;padding-top: 5px;padding-bottom: 5px;margin-top: 15px;}
.spam{display: none;}
.contact .send{background-color: #e6a27a; border-radius: 0; padding-top: 5px;padding-bottom: 5px;margin-top: 15px;border:solid 2px #e6a27a;padding-right: 60px;padding-left: 60px;transition: .8s;}
.contact .send:hover{background-color: transparent;border:solid 2px #ffffff;padding-right: 60px;padding-left: 60px;color: white;transition: .8s;}
form .reset{color:#e6a27a; padding-top: 5px;padding-bottom: 5px;margin-top: 15px;border-radius: 0; border:solid 2px #e6a27a;padding-right: 60px;padding-left: 60px;transition: .8s; }
form .reset:hover{background-color:#e6a27a;transition: .8s; }


/* secton7 */
.section7{background-color:  #1a3255;background-image: url(../img/f.a.qs.webp);background-size: cover; background-position: left top; background-attachment: fixed;}
.section7c{background-color:  #ffffff;}
.section7 h2  {color: white; margin-top: -20px;}
.section7 p {color:#e6a27a}
.section7.accordion-container .panel {
  margin: 10px 0;
  border: 1px solid #e6a27a;
  
}

.section7 .panel-heading.collapsed {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #bbbbbb;
  font-size: 17px;
  
}

.section7.accordion-container .panel-heading {
  padding: 0 !important;
  border-radius: 5px;
 
}

.section7.accordion-container .accordion {
  padding: 0 !important;
}

.section7 .accordion-container .accordion .panel-group {
  margin-bottom: 0;
  
}

.section7 .accordion-container .accordion .panel {
  background-color: transparent;
  box-shadow: none;
  border-bottom: 10px solid transparent;
  border-radius: 0;
  margin: 0;
}

.section7 .accordion-container .accordion .panel-default {
  margin: 50px 0;
  border-bottom : 1px   solid #e6a27a; border-top: none; border-left: none ; border-right: none;
  border-radius: 5px;
  z-index: 100;
 
}

.section7 .panel-heading table {
  border: none;
  width: 100%;
}

.section7 .panel-heading table td {
  width: 100%;
  padding: 12px 0px 12px 20px;
  color: white;
}

.section7 .panel-heading table td.icon {
  width: 100%;
  font-weight: bold;
  padding: 20px 20px 20px 0px !important;
}

.section7 .icon:after {
  content: "\2212";
  font-weight: bold;
  font-size: 20px;
  color: #e6a27a;
  display: block;
  width: 21px;
}

.section7 .panel-heading.collapsed .icon:after {
  content: "+";
  font-weight: bold;
  font-size: 20px;
  color: #e6a27a;
  display: block;
  width: 21px;
}

.section7 .accordion-container .accordion .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid #e6a27a;
  padding-top: 0;
  padding: 20px 20px 20px 30px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 17px;
  line-height: 24px;
  border-radius: 0 0 5px 5px;
}




/* section8 */


 .is-help-tip {
	 position: relative;
	 text-align: left;
	 background-color: #1b97c5;
	 padding: 20px;
	 border-radius: 3px;
	 box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
	 right: -4px;
	 color: #fff;
	 line-height: 1.4;
	 margin-bottom: 20px;
}
 .is-help-tip:before {
	 position: absolute;
	 content: '';
	 width: 0;
	 height: 0;
	 border: 6px solid transparent;
	 border-bottom-color: #1b97c5;
}
 .is-help-tip.is-left:before {
	 -webkit-transform: rotate(-90deg);
	 -moz-transform: rotate(-90deg);
	 -o-transform: rotate(-90deg);
	 -ms-transform: rotate(-90deg);
	 transform: rotate(-90deg);
	 left: -12px;
	 top: 15px;
}
 .is-help-tip.is-right:before {
	 -webkit-transform: rotate(90deg);
	 -moz-transform: rotate(90deg);
	 -o-transform: rotate(90deg);
	 -ms-transform: rotate(90deg);
	 transform: rotate(90deg);
	 right: -12px;
	 top: 15px;
}
 .is-help-tip.is-top-left:before {
	 left: 15px;
	 top: -12px;
}
 .is-help-tip.is-top-right:before {
	 right: 15px;
	 top: -12px;
}
 .is-help-tip.is-bottom-left:before {
	 -webkit-transform: rotate(180deg);
	 -moz-transform: rotate(180deg);
	 -o-transform: rotate(180deg);
	 -ms-transform: rotate(180deg);
	 transform: rotate(180deg);
	 left: 15px;
	 bottom: -12px;
}
 


/* coupon */

 
/* footer */
.footer{background: linear-gradient(#70533b , #3a2920); background-position: center; background-size: cover; }
.areas a{color: white ; text-decoration: none;}
.areas h3{color: #e6a27a;}
.areas p{color: white;margin-top:10px;}
.areas p span{color: #e6a27a;}
.areas i{color: #e6a27a; font-size: 2em;}
.footer .tel{text-decoration: none; font-size: 1.5em;color:#ffffff ;padding: 8px 40px;border:#e6a27a 1px solid;color:#ffffff ; }
.footer .tel:hover{background-color: #e6a27a ; transition: 1s; }
.location{border-top: 1px solid  rgb(124, 113, 100);}
.map{background-color: #1a3255;}
.zip {color:#9b9b9b; padding-bottom: 20px; }
.zip strong{color: #e6a27a;}
.copyright{color: white;}
  
.offers{position: relative; align-items: start; }
.offers img {position: absolute;top: 0px;left:0; width: 12%;}
.offers .img-2 {position: absolute;top: 0px;left:15%; width: 12%;}
.offers h3 {
  /*   color: white; */
    font-size:70px;
    font-weight: 800;
    position:absolute;
    top:70px;
    left: 50px;
    transform: translate(0%, -50%);
    margin: 0;
  }
  .offers2 h3 {
  /*   color: white; */
    font-size:70px;
    font-weight: 800;
    position:absolute;
    top:70px;
    left: 20%;
    transform: translate(0%, -50%);
    margin: 0;
  }
 .first {
    color: transparent;
    -webkit-text-stroke: 2px #3768b3;
  }
  
  .second {
    color: rgba(0, 176, 245, .7);
    -webkit-text-stroke: 2px #3768b3;
    animation: waves 4s ease-in-out infinite;
  }
  
  @keyframes waves {
   0%,
      100% {
          clip-path: polygon(
              0% 45%,
              16% 44%,
              33% 50%,
              54% 60%,
              70% 61%,
              84% 59%,
              100% 52%,
              100% 100%,
              0% 100%
          );
      }
  
      50% {
          clip-path: polygon(
              0% 60%,
              15% 65%,
              34% 66%,
              51% 62%,
              67% 50%,
              84% 45%,
              100% 46%,
              100% 100%,
              0% 100%
          );
      } 
  }

@media (max-width: 1300px)
 { 
   .section3 .container2 {
  position: absolute;top: 50%; width: 600px; height: 400px;}

}


@media (max-width: 1200px)
 {
    .areas{text-align: center;}

}


@media (max-width: 992px)
 { .p-hide{display: none;}
 .p-appear{display: block ;}
    .main-title{width: 70%; margin-top: 100px}
}
@media (max-width: 900px)
 { 
    .main-title button, .main-title .btn2{font-size: 1.2em;}
}


@media (max-width: 850px)
 { 
    .main-title{width: 90%;}


} 
@media (max-width: 800px)
 {  .section0{ right:20%;bottom: -170px;max-width: 70%;}
 .bg-form{width: 90%;}
}  
@media (max-width: 775px)
 {
.section1{margin-top: 420px;}
 .section3 .container2 { width: 450px; height: 300px;}
 h2{ font-size: 1.8em; font-weight:600;}
  }

@media (max-width: 750px)
 {  .section0{ max-width: 50%;}
.main {margin-top:0px ; padding-top: 0;}
  .btn2{margin-bottom: 15px;}
  .areas i {text-align: start; display: block;} 
}
@media (max-width: 650px)
 { .areas{width: 100%;}
  .main-title h1 { font-size: 3em;}
  .section3 .container2 {position: absolute;top: 60%; width: 450px; height: 300px;}
  .main-title button, .main-title .btn2{font-size: 1em;padding-right: 1rem !important;padding-left: 1rem !important;}
  .sticky-icon a i {height:33px;width:33px;line-height:30px;}
.footer .tel {font-size: 1.5em;padding: 4px 30px;  width: 90%; display: block; margin-top: 20px; text-align: center;}
}

@media (max-width: 550px)
 { .section0 {margin-top: -50px; }
 .section2 .sec-2-txt, .section07 .sec-2-txt{width: 80%;padding: 50px 10px ;}
 label ul { right:-10%;}
 label a {font-size: 1em;font-weight: 600;}
    .main, .main-title{padding: 0; margin: 0;}
      .main-title button, .main-title .btn2{font-size: 1em;padding-right: 1rem !important;padding-left: 1rem !important;}

.footer a  {width: 90%;}
.sticky-icon {top:1%;}
.nav-img{max-width: 60%;}
.footer p{font-size: 16px;}


}
@media (max-width: 450px)
 { 
      .main-title button, .main-title .btn2{font-size: .8em;}

}



:root{
  --background-dark: #2d3548;
  --text-light: rgba(255,255,255,0.6);
  --text-lighter: rgba(255,255,255,0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}

.card{
  background-color: transparent;
  list-style: none;
  position: relative;
  border: none;

}

/* .card:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
  
} */

.card-grid:hover > .card:not(:hover) .card__background{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}


* {
  box-sizing: border-box;
}
.section3{position: relative; height: 100vh; background-position: center; background-size: cover; background-attachment: fixed;}
.container2 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 750px;
  height: 500px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.25);
  overflow: hidden;
 }
.bg-waves{position: absolute; bottom: 0; width: 100%;} 
.before,
.after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  overflow: hidden;
  pointer-events: none;
}
.before img,
.after img {
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.scroller {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 5px solid white;
  border-radius: 50%;
  opacity: 0.8;
  cursor: pointer;
  pointer-events: auto;
}
.scroller svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
}
.scroller:hover {
  opacity: 1;
}