@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 16px;
}
body {padding-top:6.2rem;}
a {text-decoration: none;transition: 0.5s;}
h1, h2, h3, h4, h5 {text-transform: uppercase;color: #072f37; font-weight: 700;}
h1 {font-size: 60px; }
h2 {font-size: 38px;}
.bg-dark {background-color: #334e3b !important;}
.navbar-dark .navbar-nav .nav-link {
  color: rgb(255 255 255);
  font-size: 18px;
  text-transform: uppercase;
  transition: 0.2s;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: rgb(255 255 255);
  font-weight: 700;
}
.navbar-brand img {max-width:95px;}
.callus {text-align: right; padding-right: 0.5rem;}
.callus a {font-size: 26px; color: #fff; font-weight: 700; text-decoration: none;}
.callus a:hover {font-weight: 900;}
.callus i {width: 34px; height: 34px; border-radius: 50%; color: #334e3b; text-align: center; line-height: 34px; background-color: #fff; font-size: 20px;}
footer .footer-bottom a {color: #f8f9fa;}
footer .footer-logo {max-width: 40px; margin-left: 10px;}

.section-pt {padding-top: 60px !important;}
.section-pb {padding-bottom: 60px !important;}
.section-py {padding-top: 60px !important;padding-bottom: 60px !important;}

.section-mt {margin-top: 60px !important;}
.section-mb {margin-bottom: 60px !important;}
.section-my {margin-top: 60px !important;margin-bottom: 60px !important;}

.form-head-text {text-align: center;margin-bottom: 20px;}
.form-head-text h6 {font-size: 24px;font-weight: 400;color: #334e3b;}
.form-group {margin-bottom: 20px;}
.form-control, .form-select {border-radius: 0; border-color: rgb(122 122 122);padding: 1rem .75rem;}
.form-control:focus, .form-select:focus {border-color: #334e3b;box-shadow: 0 0 0 0.25rem rgb(51 78 59 / 10%);}

.form-control::-webkit-input-placeholder {opacity: 0.4;font-size: 18px;}
select option:first-child {opacity: 0.4;}
.hero-img img {height: 100% !important; width: auto; overflow: hidden;}

.btn-primary {background-color: #bd7523; border: 0px; border-radius: 0px;}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus{background-color:#334e3b; box-shadow: none; outline: none;}
.consultform-btn .btn-primary {font-size: 24px; text-transform: uppercase; line-height: 100%;}
.info-section .container {padding-left: 100px; padding-right: 100px;}
.info-section p {font-size: 24px;}
.heading-text {text-align: center;}
.heading-text h2 {position: relative; padding-bottom: 15px;margin-bottom: 10px;}
.heading-text h2::before {content: ""; height: 5px; background-color: #bd7523; left: 0; right: 0; bottom: 0; width: 40%; position: absolute; margin: 0 auto;}
.heading-text p {font-size: 30px;color: #334e3b;}
.our-services {background-color: #65806d;}
.heading-white h2 {color: #fff; position: relative;padding-bottom: 15px;margin-bottom: 10px;}
.heading-white h2::before {content: ""; height: 5px; background-color: #bd7523; left: 0; bottom: 0; width: 30%; position: absolute;}
.service-box {position: relative; overflow: hidden; margin-bottom: 20px;}
.service-box a {display: block;}
.service-box .service-text {background-color: rgb(189 117 35 / 75%); color: #fff; text-transform: uppercase; padding: 10px 15px; position: absolute; left: 0; right: 0; bottom: 30px; font-size: 20px;}
.proccess-section {background-color: #c8cbc0;}
.process-box {margin-bottom: 30px; cursor: pointer;}
.process-circle {background: #fff;border-radius: 50%;height: 250px;width: 250px;margin: 0 auto;  box-shadow: 0 0 20px rgb(0 0 0 / 23%);text-align: center;display: flex;justify-content: center;  align-items: center;transition:all .5s ease-in;-webkit-transition: -webkit-transform all .5s ease-in;}
.process-circle p {font-weight: 700; color: #334e3b; font-size: 24px; margin-bottom: 0px;}
.step-text {font-size: 30px; text-align: center; margin-top: 15px; color: #334e3b; text-transform: uppercase;}
.circle-text img {height: 90px;margin-bottom: 10px;}
.process-box a {display: block;}
.process-circle:hover {transform:rotate(360deg);-webkit-transform:rotate(360deg);background: #334e3b;}
.process-circle:hover p {color: #fff;}
.process-circle:hover img {filter: brightness(0) invert(1);}
.gall-box {cursor: pointer; overflow: hidden;transition: transform .2s; margin-bottom: 20px;}
.gall-box:hover {box-shadow:0 0 20px rgb(0 0 0 / 36%);}
.gall-box img { max-width: 100%;}
.gall-box:hover {transform: scale(1.05);}

@media (min-width: 768px) {
  .navbar-expand-md .navbar-collapse {display: block!important;flex-basis: inherit;margin-left: auto;     flex-grow: revert;}
  h2 {font-size: 40px;}
  .form-head-text h6 {font-size: 25px;}
  .punch-card::before {right: 12px !important;top: -22px !important;left: unset !important;}
}

@media (max-width:991px) {
  .consult-form {margin-top: 30px;}
  .info-section .container {padding-left: 15px;padding-right: 15px;}
}

@media (max-width: 767px) {
  h2 {font-size: 28px;}
  .form-head-text h6, .heading-text p {font-size: 18px;}
  .consultform-btn .btn-primary {font-size: 18px; line-height: 26px;}
  .info-section p {font-size: 16px;}
  .callus {text-align: left; padding: 15px 0;}
  .navbar-brand img {max-width: 70px;}
  body {padding-top: 0.9rem;}
  footer p, footer a, footer {font-size: 14px;}
  footer .footer-logo {max-width: 30px;}
  .punch-card{top: 302px !important;right: 29px !important;}
  .punch-card::before {left: 1px !important;top: -22px !important;}
}
@media screen 
  and (min-device-width: 1020px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    h6 {
          font-size: 19px !important;
    }
    h2 {
      font-size: 28px !important;
  }
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1020px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
    h6 {
          font-size: 19px !important;
    }
    h2 {
      font-size: 28px !important;
  }
}
.punch-card{
  width: 320px;
  background-color: #7ba387;
  color: white;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 119px;
  right: 10px;
}
.punch-card::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px;
  left: 196px;
  top: -22px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 22px solid #7ba387;
  border-top: transparent;
}
.contact:hover + .punch-card {
  display: block;
}
.show{
  display: block;
}
.hide{
  display: none;
}
.error,.error:focus {
  border-radius: 0;
  border-color: red;
  padding: 1rem 0.75rem;
}