@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
@font-face {
  src: url(../fonts/FontsFree-Net-Dream-Avenue.ttf);
  font-family: "Dream Avenue";
}
@font-face {
  src: url(../fonts/optima-roman.otf);
  font-family: "opatima";
}
* {margin: 0;padding: 0;box-sizing: border-box;}
h1,
h2,
h3,
h4,
h5,
h6 {margin: 0;}
p {margin: 0;}
ul {margin: 0;padding: 0;}
li {list-style: none;}
a {text-decoration: none;font-weight: 600;}
a:hover {transition: 0.5s;}
.section-spacing {margin-bottom: 80px;}
.container-fluid {padding: 0 50px;}
/*  */
.heading {color: #1c1b17;margin-bottom: 20px;font-size: 30px;font-weight: 600;font-family: "Dream Avenue";letter-spacing: 3px;}
.description {color: #52443b;font-size: 18px;margin-bottom: 20px;font-weight: 400;font-family: "Montserrat", sans-serif;}
/*  */
header nav .desktop-menu {display: flex;align-items: center;justify-content: space-between;width: 100%;column-gap: 50px;}
header nav .menu {display: flex;align-items: center;justify-content: space-between;width: 100%;}
header nav .menu li a {color: #52443b;text-transform: uppercase;font-family: "Dream Avenue";letter-spacing: 2.7px;}
header nav .logo a img {max-width: 130px;}
.video-mobile {display: none;}
.video {position: relative;}
.video header {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;}
/*  */
.about-box {background-color: #f7f3f2;padding: 30px;display: flex;height: 100%;flex-direction: column;justify-content: center;}
.about-box .heading {color: rgb(28, 27, 23);margin-bottom: 20px;font-size: 30px;font-weight: bold;font-family: "Dream Avenue";letter-spacing: 2px;}
.contact-form .heading {color: rgb(28, 27, 23);margin-bottom: 20px;font-size: 30px;font-weight: bold;font-family: "Dream Avenue";letter-spacing: 2px;}
.intrest-form .heading {color: rgb(28, 27, 23);margin-bottom: 20px;font-size: 30px;font-weight: bold;font-family: "Dream Avenue";letter-spacing: 2px;}
.link {color: #52443b;transition: 0.5s;border: 1px double #52443b;outline: 1px solid #52443b;outline-offset: 2px;display: inline-block;padding: 10px 20px;width: 156px;border-radius: 50px;font-family: "Dream Avenue";text-transform: uppercase;letter-spacing: 2px;}
.link:hover {color: #1c1b17;}
/*  */
.portfolio-section .heading {border-bottom: 2px solid #52443b;padding-bottom: 20px;text-align: center;}
.poster-box {position: relative;overflow: hidden;border-radius: 10px;margin-bottom: 30px;}
.image {display: block;width: 100%;height: auto;transition: 0.5s ease;}
.poster-box .sub-heading {position: absolute;bottom: 0;left: 0;color: #e4e2dd;background-color: #52443b;padding: 20px 10px;width: 100%;font-size: 20px;transition: 0.5s ease;text-align: center;font-family: "Dream Avenue";letter-spacing: 3px;font-weight: 600;}
.overlay {position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: 0.5s ease;background-color: #52443b;text-align: center;backdrop-filter: blur(2px);}
.overlay.color-one {background-color: #f6f3f1;}
.overlay.color-two {background-color: #fcd4ba;}
.overlay.color-three {background-color: #774422;}
.overlay.color-four {background-color: #774422;}
.overlay.color-five {background-color: #774422;}
.poster-box .sub-heading.heading-one {background-color: #774422;color: #fff;}
.poster-box .sub-heading.heading-two {background-color: #774422;color: #fff;}
.poster-box .sub-heading.heading-three {background-color: #774422;}
.poster-box .sub-heading.heading-four {background-color: #774422;}
.poster-box .sub-heading.heading-five {background-color: #774422;}
.poster-heading {color: #e4e2dd;font-size: 24px;font-weight: 600;text-align: center;margin-bottom: 15px;font-family: "Dream Avenue";letter-spacing: 3px;font-weight: 600;}
.text {color: #e4e2dd;font-size: 16px;text-align: center;width: 100%;margin-bottom: 10px;font-family: "Montserrat", sans-serif;}
.portfolio {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 100%;}
.overlay .common-btn {color: #e4e2dd;transition: 0.5s;border: 1px double #e4e2dd;outline: 1px solid #e4e2dd;outline-offset: 2px;display: inline-block;padding: 10px 20px;width: 156px;border-radius: 50px;font-family: "Dream Avenue";text-transform: uppercase;letter-spacing: 2px;background-color: transparent;}
.poster-box:hover .sub-heading {opacity: 0;}
.poster-box:hover .image {scale: 1.2;}
.poster-box:hover .overlay {opacity: 1;}
.church {border: 1px solid #52443b;}
/*  */
footer {background-color: #e4e2dd;padding: 30px 0;}
.footer-link {color: #52443b;text-transform: uppercase;margin-bottom: 15px;font-family: "Dream Avenue";letter-spacing: 4px;font-weight: 600;}
.contact-details {font-size: 18px;color: #1c1b17;font-weight: bold;transition: 0.5s;font-family: "Dream Avenue";letter-spacing: 1.5px;}
.contact-details:hover {color: #52443b;}
.contact-details a {color: #52443b;}
.follow {font-size: 20px;margin-bottom: 0;margin-right: 10px;}
.follow-us-text a {position: relative;}
.follow-us-text a::before {content: "";width: 150%;height: 2px;position: absolute;top: 50%;left: 50%;transform: translateX(-50%);background-color: #7a9488;opacity: 0;transition: 0.5s;}
.follow-us-text a:hover::before {opacity: 1;}
.footer-logo {padding: 20px 0;max-width: 30%;}
.follow-us-text a img {vertical-align: baseline;transition: 0.5s;position: relative;}
.follow-us {text-align: center;display: flex;align-items: center;justify-content: space-between;border-top: 1px solid #52443b;padding-top: 20px;margin-top: 20px;}
.follow-us-text {display: flex;}
/*  */
.banner img {width: 100%;}
/*  */
.form-check-label {font-family: "Montserrat", sans-serif;}
.header-bg {background-color: #e4e2dd;}
.intrest-form {background-color: #e4e2dd50;padding: 80px 0;}
.intrest-form .form-group {margin-bottom: 25px;}
.label {color: #52443b;font-size: 16px;margin-bottom: 10px;font-weight: 600;font-family: "Montserrat", sans-serif;}
.form-control {height: 50px;}
.intrest-form .link {font-weight: 800;}
.common-btn {padding: 10px 30px;background-color: #52443b;color: #e4e2dd;display: inline-block;border-radius: 10px;border: none;}
/*  */
.contact-form {padding: 80px 0;background-color: #e4e2dd50;}
.contact .form-group {margin-bottom: 25px;}
.contact .form-group label {color: #52443b;margin-bottom: 10px;font-weight: 600;font-family: "Montserrat", sans-serif;}
.contact .form-group .texarea {height: 150px;}
.contact .form-group .form-control {border: none;border-bottom: 1px solid #52443b;background-color: transparent;}
.contact .form-group .form-control:focus {box-shadow: none;border-bottom: 1px solid #1c1b17;}
.contact-form-detais {margin-bottom: 15px;}
.contact-form-detais a {margin-bottom: 10px;}
.contact .link {font-weight: 800;}
.mobile-menu {display: none;}
.toggle {width: 38px;height: 38px;cursor: pointer;right: 0;position: relative;margin-left: 0;z-index: 1;display: none !important;}
.toggle-icon {
  width: 100%;
  height: 2px;
  background: #52443b;
  position: absolute;
  top: 0;
  display: block;
  transition: 0.3s ease-in-out;
}
/* .toggle-icon{
  position: absolute;top: 0;right: 0;height: 5px;width: 100%;background: #52443b;transition: 0.3s linear;
} */
.toggle-icon::before, .toggle-icon::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 0;
  height: 100%;
  width: 100%;
  background: #52443b;
  transition: .3s linear;
}
.toggle-icon::before {
  transform: translateX(0);
}
.toggle-icon::after {
  top: 20px;
  width: 100%;
}
/* .toggle-icon::before,
.toggle-icon::after {content: "";position: absolute;top: 0;right: 0;height: 10%;width: 100%;background: #52443b;transition: 0.3s linear;}
.toggle-icon::before {transform: translateX(0);}
.toggle-icon::after {top: 13px;width: 100%;}
.closeMenu .toggle-icon::after {width: 100%;} */

@media (min-width: 1200px) and (max-width: 1600px) {
  .about-box .heading {font-size: 22px;}
  .about-box .description {font-size: 14px;margin-bottom: 13px;}
}
@media (min-width: 768px) and (max-width: 1199px) {
  .about-box .heading {font-size: 22px;}
  header nav .desktop-menu {display: none;}
  .mobile-menu {display: flex;text-align: center;justify-content: space-between;}
  .toggle {display: block !important;z-index: 6;top: 30px;}
  .closeMenu .toggle-icon::before {visibility: visible;opacity: 1;top: 0;transition: 0.3s linear;transform: rotate(135deg);background-color: #fff;}
  .closeMenu .toggle-icon::after {top: 0;transition: 0.3s linear;transform: rotate(42deg);background-color: #fff;}
  .main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;height: 100vh;width: 100%;justify-content: flex-start;align-items: flex-start;row-gap: 25px;transition: 0.3s;overflow: hidden;background-color: #000;padding: 30px 0 0 30px;}
  .main-menu li a {color: #fff;font-size: 16px;text-transform: uppercase;font-family: "Dream Avenue";letter-spacing: 2.7px;}
  .main-menu li {padding-left: 0;margin-bottom: 15px;text-align: left;}
  .main-menu.show-menu {left: 0;z-index: 4;}
  /* .video header {position: inherit;margin-bottom: 0;background-color: #e4e2dd;} */
  .description {font-size: 14px;}
  .about-box {padding: 20px;}
}
@media (min-width: 320px) and (max-width: 767px) {
.video-div {display: none;}
.video-mobile {display: block;}
.video-mobile video{
  width: 100%;
  height: 100vh;
  object-fit: cover; 
  display: block;
}
header nav .desktop-menu {display: none;}
.mobile-menu {display: flex;text-align: center;justify-content: space-between;align-items: center;}
.mobile-menu a {width: 100%;margin-left: 50px;}
.mobile-menu a img {text-align: center;padding: 10px 0;}
.toggle {display: block !important;z-index: 6;top: -80px;}
.closeMenu .toggle-icon {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.closeMenu .toggle-icon::before {
  visibility: hidden;
  opacity: 0;
  top: 0;
  transition: .3s linear;
  transform: rotate(135deg);
}
.closeMenu .toggle-icon::after {
  top: 0;
  transition: .3s linear;
  transform: rotate(90deg);
}
/* .closeMenu .toggle-icon::before {visibility: visible;opacity: 1;top: 0;transition: 0.3s linear;transform: rotate(135deg);background-color: #fff;}
.closeMenu .toggle-icon::after {top: 0;transition: 0.3s linear;transform: rotate(42deg);background-color: #fff;} */
.main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;height: 100vh;width: 100%;justify-content: flex-start;align-items: flex-start;row-gap: 25px;transition: 0.3s;overflow: hidden;background-color: #000;padding: 30px 0 0 30px;}
.main-menu li a {color: #fff;font-size: 16px;text-transform: uppercase;font-family: "Dream Avenue";letter-spacing: 2.7px;}
.main-menu li {padding-left: 0;margin-bottom: 15px;text-align: left;}
.main-menu.show-menu {left: 0;z-index: 4;}
.section-spacing {margin-bottom: 40px;}
.container-fluid {padding: 0 20px;}
.heading {font-size: 20px;}
.video .mobile {position: absolute;margin-bottom: 0;background-color: transparent;}
.about-box {padding: 20px;}
.description {font-size: 14px;}
.poster-box .sub-heading {font-size: 16px;padding: 10px;}
.portfolio {padding: 0 10px;}
.portfolio.mobile-portfolio {padding: 0;}
.poster-heading {font-size: 16px;margin-bottom: 10px;}
.text {font-size: 14px;}
.contact-details {font-size: 14px;}
.follow-us {flex-direction: column;row-gap: 20px;}
.link {outline-offset: 2px;padding: 6px 13px 3px;width: 142px;font-size: 12px;text-align: center;}
.overlay .common-btn {padding: 5px 20px;width: 120px;}
.footer-link {margin-bottom: 8px;font-size: 18px;}
.mobile-image-one {max-width: 100%;}
.mobile-image {max-width: 80%;}
.about-box .heading {font-size: 22px;}
.footer-logo{
  max-width:50%
}
}