*{
  margin: 0%;
  padding: 0%;
  text-decoration: none;
  list-style: none;
  flex-wrap: wrap;
}

body{
  box-sizing: border-box;
  background-color: #F5D3AB;
}

.header{
  height: 58px;
  width: 100%;
  background-color: #171B1B;
  position: relative;
}

.header-svg{
  position: absolute;
  top: 0%;
  left: 53%;
}

.container{
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.header-box{
  display: flex;
  align-items: center;
  margin-top: 10px;
  height: 48px;
}

.logo-box{
  width: 106px;
  height: 48px;
}

.logo{
  color: #FFF;
  font-family: Ultra;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 120% */
}

.nav{
  margin-left: 73px;
  margin-top: 16px;
}

.navigation{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 289px;
}

.item{
  color: #FFF;
  text-align: right;
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
}

.contact{
  width: 138px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 550px;
}

.contact-us{
  color: #FFF;
  text-align: center;
  font-family: Oswald;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

.first-section{
  width: 100%;
  height: 822px;
  background: #171B1B;
  position: relative;
}

.first-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.left-grid{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.white-span{
  color: #FFF;
  font-family: Oswald;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 191px;
}

.white-heading{
  color: #FFF;
  font-family: Ultra;
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 80px; /* 111.111% */
  margin-top: 21px;
}

.white-text{
  color: #FFF;
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 160% */
  margin-top: 27px;
}

.right-grid{
  position: relative;
}

.first-grid-svg-1{
  width: 341px;
  height: 346px;
  transform: rotate(-48deg);
  flex-shrink: 0;
  position: absolute;
  top: 140px;
  left: 150px;
}

.first-grid-svg-2{
  width: 154px;
  height: 134px;
  transform: rotate(8deg);
  position: absolute;
  top: 221px;
  left: 80px;
}

.first-grid-svg-3{
  width: 278px;
  height: 211px;
  transform: rotate(-155deg);
  position: absolute;
  top: 105px;
  right: 5px;
}

.first-grid-svg-4{
  width: 343px;
  height: 343px;
  position: absolute;
  top: 6px;
  right: 165px;
}

.first-grid-svg-5{
  width: 420px;
  height: 420px;
  position: absolute;
  top: 244px;
  right: 0px;
}

.human-figure{
  width: 356px;
  height: 501px;
  position: absolute;
  top: 218px;
  right: 14px;
}

.first-section-svg-1{
  position: absolute;
  right: 0%;
  top: 40%;
}

.first-section-svg-2{
  position: absolute;
  left: 45%;
  bottom: -10%;
}

.down-button{
  position: absolute;
  bottom: 0%;
  left: 49%;
}

.second-section{
  background-color: #F5D3AB;
}

.second-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

.second-left{
  position: relative;
}

.II-left-svg-1{
  width: 512px;
  height: 519px;
  transform: rotate(151deg);
  top: 203px;
  left: -35px;
  position: absolute;
}

.II-left-svg-2{
  width: 154px;
  height: 134px;
  transform: rotate(40deg);
  position: absolute;
  left: 344px;
  top:234px;
}

.II-image-box-1{
  width: 370px;
  height: 304px;
  position: absolute;
  top:160px;
  left: 0%;
}

.II-image-box-2{
  width: 400px;
  height: 400px;
  position: absolute;
  top: 384px;
  left: 70px;
}

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

.right-grid{
  display: grid;
  grid-template-columns: repeat(4. 1fr);
  grid-template-areas: 
  "right-grid-box-1 right-grid-box-1 right-grid-box-1 right-grid-box-1"
  "right-grid-box-2 right-grid-box-3 right-grid-box-3 right-grid-box-3"
  "right-grid-box-2 right-grid-box-4 right-grid-box-4 right-grid-box-4"
  ;
}

.right-grid-box-1{
  grid-area: right-grid-box-1;
  margin-top: 153px;
}

.black-text{
  color: #171B1B;
  font-family: Oswald;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.black-heading{
  color: #171B1B;
  font-family: Ultra;
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 64px; /* 114.286% */
}

.right-grid-box-2{
  grid-area: right-grid-box-2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 114px;
}

.up-circle{
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
  background-color: #171B1B;
  display: flex;
  align-items: center;
  justify-content: center;
}

.down-circle{
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
  background-color: #171B1B;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-grid-box-3{
  grid-area: right-grid-box-3;
  display: flex;
  flex-direction: column;
  margin-top: 59px;
  margin-left: 52px;
}

.black-text-3{
  color: #171B1B;
  font-family: Oswald;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
  letter-spacing: 3px;
  text-transform: uppercase;
}

.text-3{
  color: #171B1B;
  font-family: Oswald;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 133.333% */
  margin-top: 12px;
}

.description-3{
  color: rgba(51, 51, 51, 0.50);
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
  margin-top: 22px;
}

.right-grid-box-4{
  grid-area: right-grid-box-4;
  display: flex;
  flex-direction: column;
  margin-top: 35px;
  margin-left: 52px;
  gap: 16px;
}

.text-4{
  color: #171B1B;
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
}

.third-section-text-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 255px;
}

.third-section-heading{
  color: #171B1B;
  text-align: center;
  font-family: Ultra;
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 64px; /* 114.286% */
}

.third-grid{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden; 
  margin-top: 69px;
}

.third-grid-box{
  position: relative;
  width: 33.1%;
  min-height: 384px;
  transition: all;
  transition-duration: 0.3s;
  background-color: #FFF;
}

.third-grid-box:hover{
  background: #9EAD8D;
  transform: scale(1.04);
}

.third-grid-box:hover .grid-box-circle{
  opacity: 1;
}

.third-grid-inner-box{
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 64px;
  top:56px;
}

.grid-box-circle{
  position: absolute;
  top: 0px;
  right: 0px;
  opacity: 0;
  transition: all;
  transition-duration: 0.3s;
}

.third-grid-heading{
  color: #171B1B;
  font-family: Ultra;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 120% */
  margin-top: 58px;
}

.third-grid-description{
  color: rgba(51, 51, 51, 0.50);
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
  margin-top: 18px;
}

.menu{
  display: none;
}

.fourth-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

.fourth-section{
  background-color: #171B1B;
  width: 100%;
  height: 480px;
  margin-top: 192px;
  position: relative;
}

.fourth-top-svg{
  position: absolute;
  top: 0%;
  right: 0%;
}

.fourth-bottom-svg{
  position: absolute;
  left: 43%;
  bottom: 0%;
}

.fourth-left{
  display: flex;
  position: relative;
}

.forth-left-svg-1{
  position: absolute;
  left: 81px;
  top:56px;
}

.forth-left-svg-2{
  position: absolute;
  left: 155px;
  top:160px;
}

.fourth-right{
  display: flex;
  flex-direction: column;
}

.fourth-span{
  color: #FFF;
  font-family: Oswald;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 138px;
}

.fourth-heading{
  color: #FFF;
  font-family: Ultra;
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 64px; /* 114.286% */
  margin-top: 18px;
}

.third-container{
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width:375px){
  .container{
    max-width: 329px;
    margin: 0 auto;
  }

  .header-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav{
    display: none;
  }

  .contact{
    display: none;
  }

  .menu{
    width: 48px;
    height: 48px;
    margin-left: 175px;
    display:block;
  }

  .header-svg{
    display: none;
  }

  .first-grid{
    grid-template-columns: 1fr;
  }

  .left-grid{
    width: 329px;
    height: 100%;
    flex-shrink: 0;
    order: 2;
  }

  .right-grid{
    width: 329px;
    height: 100%;
    order:1;
  }

  .grid-content{
    display: none;
  }

  .white-span{
    margin-top: 22px;
    color: #FFF;
    font-family: Oswald;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 200% */
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  .white-heading{
    color: #FFF;
    font-family: Ultra;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 114.286% */
    margin-top: 2px;
  }

  .white-text{
    color: #FFF;
    font-family: DM Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
    margin-top: 14px;
  }

  .first-section-svg-1{
    display: none;
  }

  .first-section-svg-2{
    display: none;
  }

  .down-button{
    left: 40%;
    scale: 0.8;
  }

  .second-grid{
    grid-template-columns: 1fr;
    margin-top: 96px;
  }

  .second-left-content{
    display: none;
  }

  .black-heading{
    color: #171B1B;
    font-family: Ultra;
    font-size: 40px;
    line-height: 48px; /* 120% */
  }

  .third-container{
    width: 100%;
  }

  .third-section-heading{
    font-size: 40px;
  }

  .third-grid-box{
    min-width: 332px;
  }

  .fourth-section{
    height: 560px;
  }

  .fourth-grid{
    grid-template-columns: 1fr;
    height: 560px;
  }

  .forth-left-svg-1{
    top:41px;
    left: 35px;
  }

  .forth-left-svg-2{
    top: 144px;
    left: 108px;
  }
  

  .fourth-heading{
    font-size: 40px;
  }

  .fourth-right{
    margin-top: 50px;
  }
  .fourth-bottom-svg{
    left: 15%;
  }

}

@media (min-width:1280px) {
  .photo{
    display: none;
  }
}