/* ---ABOUT STYLES--- */

.about_section {
  position: relative;
  padding: 13% 8% 5% 8%;
}

.about_section .about_box {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.about_section .title_box {
  display: flex;
  align-items: center;
}

.about_section h1 {
  color: var(--gray);
  font-size: 70px;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.about_section h1 .first_span {
  color: var(--gray);
  font-size: 130px;
  margin: 0;
}

.about_section h1 .second_span {
  color: var(--orange);
  font-size: 250px;
  margin: 0;
  line-height: .7;
}

.about_section .media_box {
  width: 25%;
  height: 25%;
  position: relative;
  border: 15px solid var(--orange);
  border-radius: 50%;
  overflow: hidden;
}

.about_section .networks_box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  padding: 50px 10px;
  border-radius: 0 50px 50px 0;
  transform: translateY(-50%);
  background: white;
  box-shadow: 5px 5px 10px #00000020;
  transition: 0.25s;
}

.about_section .networks_box:hover {
  padding: 50px 10px 50px 15px;
}

.about_section .networks_box a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about_section .networks_box i {
  font-size: 18px;
  color: var(--orange);
}

.about_section .networks_box a:hover i {
  color: var(--yellow);
}

.about_section #blob_01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 32%;
  z-index: -1;
}

.about_section #blob_02 {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6%;
  z-index: -1;
}

@media (max-width: 996px) {
  .about_section {
    padding: 30% 10% 0 10%;
  }
  .about_section .about_box {
    display: flex;
    justify-content: center;
  }
  .about_section h1 {
    font-size: 30px;
  }
  .about_section h1 .first_span {
    font-size: 35px;
  }
  .about_section h1 .second_span {
    font-size: 75px;
  }
  .about_section h1 span {
    font-size: 70px;
  }
  .about_section .media_box {
    width: 50%;
    border: 5px solid var(--orange);
  }
  .about_section .networks_box {
    top: 75%;
  }
  .about_section #blob_01 {
    width: 65%;
  }
  .about_section #blob_02 {
    top: 150%;
    width: 20%;
  }
}

@media (max-width: 1800px) and (min-width: 996px) {
  .about_section h1 .first_span {
    font-size: 100px !important;
  }

  .about_section h1 .second_span {
    font-size: 200px !important;
  }
}

/* ---PARAGRAPH STYLES--- */

.paragraph_section {
  padding: 0 8% ;
  position: relative;
}

.paragraph_section .paragraph_box {
 
}

.paragraph_section .info_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 996px) {
  .paragraph_section {
    padding: 10% 0 0 0;
  }
  .paragraph_section .paragraph_box {
    grid-template-columns: 100%;
  }
  .paragraph_section .info_box {
    padding: 0 10%;
  }
  .paragraph_section .media_box img {
    width: 50%;
  }
}

/* ---APP STYLES--- */

.app_section {
  position: relative;
  padding: 5% 10%;
}

.app_section .app_box {
  display: grid;
  grid-template-columns: 50% 50%;
  position: relative;
}

.app_section .app_box::before {
  position: absolute;
  content: "";
  left: 10%;
  z-index: -1;
  top: 8%;
  width: 90%;
  height: 80%;
  background-color: var(--yellow);
  border-radius: 25px;
}

.app_section .media_box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app_section .media_box img:not(.app_man) {
  position: absolute;
}

.app_section .app_man {
  width: 70%;
}

.app_section .app_fries {
  width: 32%;
  bottom: 0;
  left: 0;
  z-index: 1;
  animation: app_rotation 5s alternate-reverse infinite;
}

.app_section .app_chicken {
  width: 25%;
  top: 0;
  left: 0;
  z-index: 1;
  animation: app_rotation 3s alternate infinite;
  animation-delay: 3s;
}

.app_section .app_soda {
  width: 13%;
  top: 35%;
  left: -15%;
  z-index: 1;
  animation: app_rotation 3s alternate infinite;
}

.app_section .app_juice {
  width: 17%;
  top: 7%;
  right: 10%;
  z-index: -1;
  animation: app_rotation 2s alternate infinite;
}

.app_section .info_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.app_section h2 {
  color: var(--orange);
  font-size: 100px;
  display: flex;
  z-index: 1;
  flex-direction: column;
}

.app_section h2 span {
  color: var(--gray);
  align-self: center;
}

.app_section .slide_btn {
  width: fit-content;
  border-radius: 25px;
  background: var(--orange);
}

.app_section .slide_btn:hover span {
  color: var(--orange);
}

.app_section .slide_btn::after {
  background: white;
}

.app_section .slide_btn span {
  color: white;
  font-size: 30px;
  padding: 10px 20px;
}

.app_section .store_box {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 5px;
}

.app_section .store_box img {
  width: 100%;
}

@media (max-width: 1800px) and (min-width: 996px) {
  .app_section h2 {
    font-size: 70px !important;
  }

  .app_section .slide_btn span {
    font-size: 25px !important;
  }
}

@media (max-width: 996px) {
  .app_section {
    padding: 30% 10%;
  }
  .app_section::before {
    top: 50%;
    width: 90%;
    height: 70%;
  }
  .app_section .slide_btn span{
    color: white;
    font-size: 18px;
    padding: 10px 20px;
  }
  .app_section .app_box {
    grid-template-columns: 100%;
    gap: 30px;
  }
  .app_section .app_box::before {
    position: absolute;
    content: "";
    left: 0%;
    z-index: -1;
    top: 8%;
    width: 100%;
    height: 100%;
    background-color: var(--yellow);
    border-radius: 25px;
  }
  .app_section .media_box {
    justify-content: flex-end;
  }
  .app_section .app_fries {
    left: 5%;
  }
  .app_section .app_chicken {
    left: 5%;
  }
  .app_section .app_soda {
    width: 15%;
    left: -5%;
  }
  .app_section .app_juice {
    right: -5%;
  }
  .app_section h2 {
    font-size: 30px;
  }
  .app_section .store_box img {
    width: 100%
  }
}

/* ---last content STYLES--- */

.last_content_box {
  padding: 0% 8% 25% 8%;
}

@media (max-width: 996px) {
  .last_content_box {
    padding: 0 8% 25% 8%;
  }
}