@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.montserrat_reg {
 font-family: "Montserrat", sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Montserrat", sans-serif;
}

body {
 /* padding-top: 77px; */
 /* background-color: rgba(249, 246, 239, .8); */
 font-family: "Montserrat", sans-serif;
 font-weight: light;
}

.bg-body {
 background-color: rgb(255, 247, 227) !important;
}

.libre {
 font-family: "Montserrat", sans-serif;
}

.nav-link {
 font-size: 23px;
 font-weight: 700;
 font-family: "Montserrat", sans-serif;
}

.navbar-brand {
 font-size: xx-large;
 font-family: "Montserrat", sans-serif;
 font-weight: 700;
}

.navbar {
 box-shadow: 0 -8px 10px 0 rgba(0, 0, 0, 0.3);
 z-index: 100;
 /* background-color: blue-100 !important; */
}

.newsLetterBG1 {
 background-image: url("../img/bgs/newsLetterBG1.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 background-attachment: fixed;
 /* This creates the parallax effect */
 /* height: 100vh; */
 /* Adjust height based on your requirement */
 position: relative;
 width: 100%;
}

.newsLetterBG1 .container {
 position: relative;
 z-index: 1;
 /* Ensures content appears above the background and overlay */
 color: white;
 /* Ensure content is visible over the dark overlay */
}

.newsLetterBG1::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
 background-color: rgba(0, 0, 0, 0.4);
 backdrop-filter: blur(5px);
}

.sections {
 min-height: calc(100vh - 101px);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding-top: 100px;
 padding-bottom: 100px;
}

.bgLight {
 background-color: rgba(249, 246, 239, .8);
}

.index-service-card {
 position: relative;
 overflow: hidden;
 /* Ensure that the child doesn't overflow */
}

.index-service-card div {
 position: absolute;
 padding: 15px;
 background-color: white;
 border-radius: 10px;
 width: 70%;
 top: 5px;
 bottom: 5px;
 left: 15px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 transition: all 0.8s ease;
 opacity: 0;
 transform: scale(0.2);
 z-index: 1;
}

.index-service-card:hover div {
 width: calc(100% - 30px);
 opacity: 1;
 transform: scale(1);
 z-index: 2;
}

.service-banner {
 position: relative;
 overflow: hidden;
}


/* .service-banner img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: 0;
} */

.service-banner h2 {
 position: absolute;
 color: aliceblue;
 border-radius: 10px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 4rem;
 text-align: center;
 color: white;
 text-shadow: 0 0 5px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.4);
}

@media only screen and (max-width: 993px) {
 .navbar {
  background-color: white !important;
 }
}

@media only screen and (max-width: 600px) {
 .sections {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
 }
}