/* attractions */

:root{
  --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;
}
.hero-section .head-sec{
  margin-bottom: var(--m30);
}
.hero-section{
  align-items: flex-start;
  display: flex;
  min-height: 100%;
  justify-content: center;
  background: var(--white-color);
}

.hero-section .card-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .hero-section .card-grid{
    grid-template-columns: repeat(1, 1fr); 
  }
}

@media(min-width: 960px){
  .hero-section   .card-grid{
    grid-template-columns: repeat(2, 1fr); 
  }
}

.hero-section .card{
  list-style: none;
  position: relative;
  border: none;
  overflow: hidden;
  border-radius: 20px;
  height: 500px;
}

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

.hero-section .card__background{
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear;
}

.hero-section .card:hover .card__background{
  transform: scale(1.05) translateZ(0);
}

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

.hero-section  .card__content{
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
}

.hero-section .card__category{
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}

.hero-section .card__heading{
  color: var(--text-lighter);
  font-size: 1.9rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.4;
  word-spacing: 0vw;
  text-transform: capitalize;
}
.hero-section .hero-btn a.main-btn{
  display: block;
  width: 150px;
  text-align: center;
  margin: auto;
}
.hero-btn {
  text-align: center;
  margin-top: 30px;
}

.ser-card{
border: 4px solid var(--secondary-color);
padding: 40px;
height: 350px;
}

.ser-card ul li{
list-style: disc;
}

.bg-ser-img {
background-image: url('../images/ser-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 720px;
width: 100%;

}

.video-button{
position: absolute;
top: -408px;
right: 47%;;

}
.fas.fa-play{
color: #2fa1cd;
background: white;
height: 100px;
width: 100px;
text-align: center;
padding-top: 35px;
font-size: 30px;
border-radius: 50px;
}



.how-we-value-heading .head {
text-align: center;
color: var(--secondary-color);
}
.how-we-value-heading p{
text-align: center;
}
.how-we-value-heading {
text-align: center;
}

.req-form-label{
margin-bottom: 10px;
}

button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.request-form .ui-selectmenu-button.ui-button, .request-form .form-group input, .request-form .form-group select, .request-form .form-group textarea {
position: relative;
display: block;
width: 100%;
height: 45px;
font-size: 13px;
color: #060606;
line-height: 31px;
font-weight: 400;
border-radius: 0;
padding: 10px 20px 10px 20px;
background: #ffffff;
border: 1px solid #e0e0e0;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
}

.request-form .clearfix{
margin-top: 60px;
} 
.form-group{
margin-top: 30px;
}

.request-form .form-group {
position: relative;
display: block;
width: 50%;
margin-bottom: 15px;
}

.form-group.w-full{
width: 100%;
}

.banner .guides {
position: absolute;
height: 350px;
top: 230px;
left: 50px;
width: 100%;
z-index: 1;
display: block;
}

.guides p{
color: white;
}

.banner{
  background-image: url('../images/banner-ser.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 600px;
}


.overlay{
  background-color: #363636;
    opacity: 0.65;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
.ser-con{
text-align: center;
}
.ser-con p{
text-align: center;
color: white;
}
.ser-con h2{
color: white;
}


section.cta.bottom-ser-section .overlay {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: transparent;
  background-image: linear-gradient(180deg, #00233DDE 0%, #7a7a7a 100%);
  opacity: 1;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
section.cta {background-image: url('../images/ser-bottom.jpg');padding-left: 0;position: relative;padding-right: 0;background-attachment: fixed;background-position: center;background-size: cover;height: 500px;}
section.cta .container {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-top: 103px;
}

.bottom-bg .elementor-shape-top svg {
height: 50px;
transform: translateX(-50%) rotateY(180deg);
}


.bootom-text h2{
  color: white;
}
.bootom-text p{
  color: white;
}
/* banner */
.elementor-shape-bottom {
  top: 92%;
}

.elementor-shape {
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  direction: ltr;
  /* height: 46px; */
}
.elementor-1874 .elementor-element.elementor-element-9096bd8 > .elementor-shape-bottom svg {
  height: 30px;
}

.elementor-shape svg {
  display: block;
  width: calc(100% + 1.3px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.elementor-shape .elementor-shape-fill {
  fill: #fff;
  transform-origin: center;
  transform: rotateY(0deg);
}

.elementor-1874 .elementor-element.elementor-element-9096bd8 > .elementor-shape-bottom svg {
  height: 30px;
}