:root {
     --color-primary: hsl(26, 100%, 55%);
     --color-primary2: hsl(0, 0%, 100%);
     --color-dark: #2f2f2f;
     --transition: all 0.4s ease-in-out;
     font-family: 'Popins', sans-serif;
     font-size: 20px;
     background-color: #ececec;
     color: var(--color-dark);
}
#preloader{
     position: fixed;
     height: 100vh;
     width: 100vw;
     background-color: #ececec;
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
}
.loader{
     height: 100px;
     width: 100px;
     border: 10px solid ;
     border-bottom: 10px solid var(--color-primary);
     border-radius: 50%;
     animation-name: rotate;
     animation-duration: 1s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
}
html {
     scroll-behavior: smooth;
}

body {
     overflow-x: hidden;
}

.section {
     width: 100%;
     max-width: 1300px;
     margin: 0 auto;
     padding-top: 10vh;
}

.container {
     width: 100%;
     max-width: 1300px;
     margin: 0 auto;
}

a {
     text-decoration: none;
}

ul {
     list-style: none;
}

img {
     width: 100%;
}

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

header {
     position: relative;
     height: 100vh;
}

header::after {
     position: absolute;
     content: "";
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--color-dark);
     opacity: 0.85;
     z-index: 0;
}

#carousel {
     overflow: hidden;
     white-space: nowrap;
     width: 100vw;
     height: 100vh;
}

.slide-image {
     width: 100vw;
     height: 100vh;
     background-position: center;
     background-size: cover;
     display: inline-block;
}


#slide1 {
     background-image: url('../img/img1.png');
}

#slide2 {
     background-image: url('../img/img2.png');
}

#slide3 {
     background-image: url('../img/IMG-20230829-WA0016.jpg');
}

#slide4 {
     background-image: url('../img/img4.png');
}

#slide5 {
     background-image: url('../img/IMG-20230829-WA0010.jpg');
}

nav {
     width: 100%;
     position: fixed;
     display: flex;
     align-items: center;
     justify-content: space-around;
     padding: 1rem 2rem;
     z-index: 2;
     background-color: var(--color-primary2);
     height: 8vh;
     left: 0;
     top: 0;
}

.nav.container {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.logo {
     display: flex;
     align-items: center;
     gap: 0.5rem;
}

.logo img {
     width: 8rem;
}

.logo h2 {
     color: var(--color-primary);
     font-size: 1.1rem;
}

.logo span {
     opacity: 0.3;
     font-size: 0.8rem;
}

.nav_menu {
     display: flex;
     gap: 2rem;
}

.nav_link {
     color: var(--color-primary);
     font-size: 0.9rem;
     transition: var(--transition);
}

.nav_link:hover {
     color: var(--color-dark);
}

.hamburger {
     display: none;
}

.bar {
     display: block;
     height: 3px;
     width: 25px;
     background-color: var(--color-primary);
     margin: 5px auto;
     transition: var(--transition);
}

.wrapper_banner {
     position: absolute;
     width: 280px;
     top: calc(50% + 5vh);
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1;

}

.wrapper_banner h1 {
     color: var(--color-primary2);
     font-size: 60px;
     text-align: center;
     margin-bottom: 1rem;
}

.btn {
     display: block;
     width: 10rem;
     height: 50px;
     text-align: center;
     background-color: var(--color-primary);
     color: var(--color-primary2);
     margin: 0 auto;
     line-height: 50px;
     border: 1px solid var(--color-primary);
     transition: var(--transition);
}

.btn:hover {
     border-color: var(--color-primary2);
     background-color: transparent;
}

#about_us {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 2rem;
     align-items: center;
     padding: 10vh 1rem 0;
}

#about_us h2 {
     margin-bottom: 1rem;
}

#about_us p {
     margin-bottom: 0.5rem;
}

.procedure_container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     background: linear-gradient(45deg, var(--color-dark)50%, var(--color-primary) 50%), url(../img/img2.png) center center/cover;
     height: 40vh;
     align-items: center;
     padding: 2rem;
}

.procedure {
     display: flex;
     align-items: center;
     gap: 1rem;
     color: var(--color-primary2);
}

.projects_container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     grid-gap: 2rem;
     margin-top: 1rem;
}

.projects {
     height: 300px;
     position: relative;
     overflow: hidden;
     cursor: pointer;
}

.projects div {
     height: 100%;
     width: 100%;
}

.after {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     top: -100%;
     transition: var(--transition);
}

.projects:hover .after {
     top: 0;
}

.projects img {
     object-fit: cover;
     height: 100%;
     width: 100%;
}

#review_us {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 0rem;
     align-items: center;
     color: var(--color-primary2);
}

.review {
     padding: 2rem;
     background-color: var(--color-dark);
}

.review h4,
.review p,
.review h3 {
     text-align: center;
     margin: 0.5rem;
}

.image {
     height: 300px;
}

.review img {
     display: block;
     object-fit: cover;
     height: 100%;
     filter: saturate(0.1);
     width: 80%;
     margin: auto;
}

.why_choose_us {
     display: flex;
     flex-direction: column;
     justify-content: center;
     background-color: var(--color-primary);
     padding: 2rem;
     height: 100%;
     color: var(--color-primary2);
}

.why_choose_us h2 {
     text-align: center;
}

.why_choose_us ul li {
     list-style-type: circle;
}

.why_choose_us div {
     display: flex;
     justify-content: space-between;
     margin-top: 2rem;
}

#services {
     padding:10vh 1em 0;
}

#services h2 {
     margin-bottom: 1rem;
}

.services_container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     grid-gap: 2rem;
}

.services {
     background-color: var(--color-primary);
     color: var(--color-primary2);
}

.services .top {
     display: grid;
     grid-template-columns: 45% 55%;
     height: 200px;
}

.services .top .left {
     background-color: var(--color-dark);
     position: relative;
     display: flex;
     align-items: center;
     padding: 1.5rem;
}

.number {
     display: block;
     position: absolute;
     width: 40px;
     height: 40px;
     background-color: var(--color-primary2);
     color: var(--color-dark);
     text-align: center;
     line-height: 40px;
     border-radius: 50%;
     top: 50px;
}

.services img {
     height: 200px;
}

.services p {
     padding: 1rem;
}

#contact_us {
     padding: 10vh 1rem;
}

.map_address_container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     margin-bottom: 2rem;
     height: 50vh;
     align-items: center;
     gap: 2rem;
}

.map_address_container .map {
     height: 100%;
     width: 100%;
}

.map_address_container .map iframe {
     object-fit: cover;
     height: 100%;
     width: 100%;
}

.map_address_container .address {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.contact_details li {
     display: flex;
     margin-bottom: 0.5rem;
}

.contact_details li i {
     font-size: 1rem;
     margin-right: 1rem;
}

.contact {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
}

.contact_option {
     text-align: center;
}

.contact_option a {
     color: var(--color-dark);
     opacity: 0.5;
     transition: var(--transition);
}

.contact_option a:hover {
     color: var(--color-primary);
     opacity: 1;
}

footer {
     background-color: var(--color-dark);
     color: var(--color-primary2);
     height: 100px;
     text-align: center;
     line-height: 100px;
     font-size: 0.8rem;
}

footer span {
     color: var(--color-primary);
}

.side_menu {
     position: fixed;
     padding: 4rem 2rem;
     width: 60%;
     right: -100%;
     top: 0;
     height: 100%;
     background-color: var(--color-primary2);
     z-index: 99;
     transition: var(--transition);
}

.side_menu .nav_menu {
     display: flex;
     flex-direction: column;
     align-items: center;
}

@media screen and (max-width:820px) {
     nav {
          padding: 0 1rem;
     }

     nav .nav_menu {
          display: none;
     }

     .hamburger {
          display: block;
     }

     #about_us {
          grid-template-columns: 1fr;
     }

     #review_us {
          grid-template-columns: 1fr;
     }

     .review img {
          width: 100%;
     }

     .procedure_container {
          display: grid;
          grid-template-columns: 1fr;
          background: linear-gradient(45deg, var(--color-dark)50%, var(--color-primary) 50%), url(../img/img2.png) center center/cover;
          height: 40vh;
          align-items: center;
          padding: 2rem;
     }

     .why_choose_us div {
          flex-direction: column;
     }

     .map_address_container {
          grid-template-columns: 1fr;
          height: auto;
     }

     .map_address_container .map {
          height: 40vh;
     }

     .contact {
          flex-direction: column;
          gap: 2rem;
     }
}

.overlay {
     position: fixed;
     left: 0;
     top: 0;
     z-index: 11;
     width: 40%;
     height: 100%;
     background-color: var(--color-dark);
     opacity: 0.5;
}

.close {
     background-color: var(--color-primary);
     color: var(--color-primary2);
     width: 50px;
     height: 50px;
     position: absolute;
     text-align: center;
     line-height: 50px;
     top: 0;
     left: -50px;
}

.show {
     right: 0;
}

@keyframes rotate {
     from{
          transform: rotate(0deg);
     }
     to{
          transform: rotate(360deg);
     }
}