/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height:auto;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

body{
  font-family: "Poppins", sans-serif;
  font-size:16px;
  background:#fff;
  --color-main: #AF7037;
  --color-secondary: #D0B69A;
  --color-main-bg:#E6DDD3;
  --color-grey:#505051;
}
.container{
  max-width: 1200px;
  margin: 0 auto;
  width:100%;
  padding: 0 15px;
}
.flex{
  display:flex;
}

.items-center{
  align-items: center;
}
.justify-between{
  justify-content: space-between;
}
.top-menu{
  display:flex;
  list-style:none;
}
.top-menu li a{
  text-transform: uppercase;
  font-weight:bold;
  text-decoration: none;
  color:var(--color-grey);
  padding:4px 16px;
  display:block;
}
.header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding-top:8px;
  padding-bottom:8px;
  right:0;
}
.header .logo{
  max-width:220px;
}
.hero{
  height:750px;
  background:url('../images/hero.jpg') right center / contain no-repeat;
}
.h1-title{
  text-transform: uppercase;
  font-weight:700;
  font-size:3em;
  line-height:1.1;
}
.hero-content{
  height:100%;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap:32px;
}
.hero-content p{
  max-width:640px;
  font-weight:300;
}
.top-phone a{
  text-decoration: none;
  font-weight:800;
  font-size:1.5em;
  background:var(--color-main);
  display:inline-block;
  padding:4px 24px;
  color:#fff;
  border-radius: 4px;
}
a.btn{
  display:inline-block;
  padding:12px 36px;
  border:2px solid var(--color-main);
  text-decoration: none;
  color:var(--color-main);
  text-transform: uppercase;
  font-weight:700;
}
.section{
  padding-top:60px;
  padding-bottom:60px;
}
.h2-title{
  margin-top:36px;
  margin-bottom:16px;
  font-size:1.3em;
  color:#101010
}
.h2-title span{
  display:inline-block;
  padding:4px 16px;
  position:relative;
  font-weight:800;
  text-transform: uppercase;
  font-size:2em;
  
}
.h2-title span:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:60%;
  height:3px;
  background:var(--color-main);
}
.h2-title span:after{
  content:'';
  position:absolute;
  bottom:0;
  right:-5%;
  width:50%;
  height:3px;
  background:var(--color-main);
}
.footer{
  background:rgba(17,10,1,0.95);
  color:#fff;
}
.footer a{
  color:#fff;
  font-weight:600;
}
.footer .contact{
  padding-top:60px;
  padding-bottom:30px;
}
.contact .h2-title{
  text-align: center;
  color:#fff;
}
.contact p{
  color:rgba(255,255,255,0.58);
  text-align:center;
  margin:32px auto;
}
.contact-info{
  display:flex;
  font-size:1.3em;
  justify-content: center;
  align-items: flex-start;
  list-style:none;
}
.contact-info li{
  width:33%;
  padding:16px;
}
.contact-info li strong{
  display:block;
  color:rgba(255,255,255,0.58);
  margin-bottom:8px;
}
.copyright{
  text-align: center;
  border-top:1px solid rgba(255,255,255,0.58);
  padding:32px;
  color:rgba(255,255,255,0.58);
}
.about .about_info{
  width:55%;
}
.about .about_image{
  width:30%;
}
.about .about_image img{
  width:100%;
}
.about_info p{
  margin-top:30px;
  font-size:1.15em;
  margin-bottom:30px;
}
.services{
  background:url('../images/bg-line.jpg') center center / cover no-repeat;
}
.service-grid{
  margin:60px 0 0;
  display:flex;
  flex-wrap:wrap;
}
.service-item{
  width:33%;
  padding:16px;
}
.service-item .service_image{
  height:200px;
  overflow: hidden;
  margin-bottom:15px;
}
.service-item .service_image img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
}
.service-item h3{
  font-size:1.3em;
  line-height:1.2;
  margin-bottom:15px;
}
.service-item p{
  font-size:1em;
  font-weight:300;
}
.mission .mission_image{
  width:100%;
}
.mission_info{
  width:60%;
  margin-left:-30%;
  background:#fff;
  padding:60px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.mission_info .h2-title{
  margin-top:0;
  font-size:0.75em;
}
.why-grid{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:60px 0 0;
}
.why-item{
  width:calc(33.3% - 24px);
  padding:16px;
  background:#fff;
}
.why-item .number{
  font-size:6em;
  line-height:1;
  font-weight:900;
  opacity:0.3;
  margin-bottom:-30px;
  color:var(--color-secondary);
}
.why-item h3{
  position:relative;
  z-index: 2;
  font-size:1.5em;
  line-height:1.25;
  margin-bottom:16px;
  text-transform: uppercase;
}
.why-item p{
  font-weight:300;
  color:#443b36
}
.core-values .h2-title{
  text-align: center;
}
.values-grid{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  margin-top:60px;
}
.value-item{
  width:20%;
  text-align: center;
  padding:8px;
}
.value-item .icon{
  width:64px;
  margin:0 auto;
}
.value-item p{
  font-size:0.875em;
  font-weight:300;
  color:#443b36
}
@media screen and (max-width:1280px) {
  .container{
    max-width:1000px;
  }
  .hero{
    height:600px;
  }
  body{
    font-size:14px;
  }
}

@media screen and (max-width:1024px) {
  .container{
    max-width:1000px;
  }
  .hero{
    background-position: calc(100% + 250px) center;
  }
  .values-grid{
    flex-wrap:wrap;
    justify-content: center;
    gap:16px;
  }
  .value-item{
    width:calc(33.3% - 16px)
  }
  .top-menu{
    display:none;
  }
}

@media screen and (max-width:840px) {
.contact-info{
  flex-wrap:wrap;
  padding:0;
  justify-content: center;
  align-items: center;
}
.contact-info li{
  width:100%;
  text-align: center;
}
}
@media screen and (max-width:640px) {
  .hero{
    height:80vh;
  }
  .flex{
    flex-wrap:wrap;
  }
  .about .about_info{
    width:100%;
  }
  .about .about_image{
    width:100%;
    margin:30px auto 0;
    max-width:320px;
  }
  .service-item{
    width:100%;
  }
  .value-item{
    width:calc(50% - 16px);
  }
  .mission_info{
    width:100%;
    margin-left:0;
    box-shadow:none;
  }
  .section{
    padding-top:30px;
    padding-bottom:30px;
  }
  .why-item{
    width:calc(50% - 16px);
  }
  body{
    font-size:16px;
  }
  .h1-title{
    font-size:2em;
  }
  .h2-title{
    font-size:1em;
  }
  .about_info p{
    font-size:1em;
  }
  .why-item h3{
    font-size:1.3em;
  }
  .why-item .number{
    font-size:4.5em;
  }
  .hero{
    background-position:25% center;
    background-size:cover;
  }
  .top-phone a{
    font-size:1em;
  }
  .header .logo{
    width:140px;
  }
}
@media screen and (max-width:480px) {
.why-item{
  width:100%;
}
}