/* TOP BAR */
.top-bar {
  background: #eb5f00;
  padding: 30px;
  /* display: flex; */
  align-items: center;
}

.abount-container {
  padding: 70px 58px;
  padding-bottom: 35px;
}
.brand-text {
  font-weight: 800;
  color: #000;
}

/* MAIN WRAPPER */
.main-wrapper {
  background: #fece2a;
}

/* CONTENT BOX */
.content-box {
  background: #eb5f00;
  position: relative;
  border: 4px solid #5c2027;

  color: #000;

  opacity: 1;
  border-radius: 40px;
  border-width: 9px;
  padding: 21px 55px 55px 55px;
  border-bottom: 18px solid #5c2027;
}

.content-box-1 p, .first-para ,.more-content {
  font-family: "SegoeUI" !important;
  font-weight: 400;
  color: #fff;
  font-size: 28px;

  line-height: 32px;
  /* letter-spacing: 3%; */
}

.content-box-1 {
  padding: 37px;
}

.about-image-asset7 {
  position: absolute;
  top: -65px;
  left: 86px;
}

/* TITLES */
.section-title-about {
  font-family: "Marvin", cursive;
  font-weight: 400;
  font-size: 93px;
  color: #ffffff;
  letter-spacing: 2px;
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: 1px #aa2222;
  text-shadow:
    /* RED OUTLINE (CLEAN & EVEN) */ -4px -4px 0 #aa2222,
    0px -4px 0 #aa2222, 4px -4px 0 #aa2222, -4px 0px 0 #aa2222,
    4px 0px 0 #aa2222, -4px 4px 0 #aa2222, 0px 4px 0 #aa2222, 4px 4px 0 #aa2222,
    /* BOTTOM DARK SHADOW (FIGMA TYPE) */ 6px 6px 0 #5c2027, 7px 7px 0 #5c2027;

  position: absolute;
  top: -78px;
  position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
        left: 50%;
    transform: translateX(-50%);

}
.why-quacky-box {
  background: #fece2a;

  border: 4px solid #5c2027;

  color: #000;

  opacity: 1;
  border-radius: 40px;
  border-width: 9px;
 padding: 35px 55px;
  margin-top: 100px;
  margin-bottom: 90px;
  position: relative;
  border-bottom: 18px solid #5c2027;
}
.why-quacky-main {
  background: #ff9622;
}
.section-title-why {
  font-family: "Marvin", cursive;
  font-weight: 400;
     font-size: 87px;
  color: #ffffff;
  letter-spacing: 8px;
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: 1px #aa2222;
  text-shadow:
    /* RED OUTLINE (CLEAN & EVEN) */ -4px -4px 0 #aa2222,
    0px -4px 0 #aa2222, 4px -4px 0 #aa2222, -4px 0px 0 #aa2222,
    4px 0px 0 #aa2222, -4px 4px 0 #aa2222, 0px 4px 0 #aa2222, 4px 4px 0 #aa2222,
    /* BOTTOM DARK SHADOW (FIGMA TYPE) */ 6px 6px 0 #5c2027, 7px 7px 0 #5c2027;
  position: absolute;
    top: -73px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  text-align: center;
}

/* TITLE */
.why-title {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: -4px -4px 0 #b3201d, 4px -4px 0 #b3201d, -4px 4px 0 #b3201d,
    4px 4px 0 #b3201d, 6px 6px 0 #7a1513;
}

/* ROWS */
.why-row {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 0;
  /* flex-wrap: wrap; */
}

/* ITEMS */
.why-item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #5c2027;
  white-space: nowrap;
  font-family: "Marvin";
  font-weight: 600;
    font-size: 30px;
  line-height: 100%;
}
.why-item img {
  width: 85px;
}
.why-item .icon {
  font-size: 42px;
  filter: drop-shadow(2px 2px 0 #a14a1c);
}
.about-image-asset8 {
  position: absolute;
  left: -33px;
  bottom: 0px;
}
.about-image-leftsite-duck-phone-view{
  display: none;
} 
.about-image-leftsite-duck {
    position: absolute;
      right: 4px;
    bottom: -12px;
    width: 185px;

}
.about-image-leftsite-duck-phone-view{
    width: 185px;
}
.about-image-asset10 {
  position: absolute;
  right: -14px;
  top: 227px;
  width: 100px;
}
.about-image-asset9 {
  position: absolute;

  width: 78px;
  right: -42px;
  top: 300px;
}
/* {
    font-family: SF Compact Rounded;
font-weight: 800;
font-style: Heavy;
font-size: 28px;
leading-trim: NONE;
line-height: 32px;
letter-spacing: 3%;

} */
/* FEATURES */
/* FOOTER */
.qs-footer {
  background: #5c2027;
}

@media (max-width: 1440px) {
  .why-row {
    gap: 8px;
  }
  .why-item{
        gap: 1px;
            font-size: 25px;
  }
  .why-item img {
    width: 76px;
}
.about-image-asset7 {
    position: absolute;
    top: -70px;
    left: 46px;
}
.section-title-about{
      font-size: 83px;
          top: -66px;
    /* left: 22%; */
}
}

@media (max-width: 1024px) {
  .about-text-content.expanded .about-image-leftsite-duck-phone-view{
  display: block;
} 
  .about-image-leftsite-duck{
    display: none;
  }
  .abount-container {
    padding: 49px 58px;
    padding-bottom: 35px;
  }
  .section-title-about {
    top: -52px;
     /* left: 18%; */
    font-size: 67px;
  }

  .about-image-asset7 {
    top: -51px;
    left: 22px;
    width: 100px;
  }
  .content-box-1 p {
    font-size: 24px;
  }
  .content-box {
    padding: 22px;
  }

     .why-row {
        gap: 9px;
    }
  .why-quacky-box {
    margin-top: 63px;
    margin-bottom: 41px;
  }

  .section-title-why {
    top: -54px;
    font-size: 69px;
  }
  .why-item {
    font-size: 33px;
  }
  .qs-footer-title {
    font-size: 44px;
  }
  .cs-social-icons {
    margin-top: 30px;
    gap: 40px !important;
    padding-bottom: 12px;
  }
  .why-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .why-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .why-quacky-box {
    padding: 37px;
  }
  .why-row {
    margin-bottom: 0px;
  }
}

@media (max-width: 768px) {
  .about-image-leftsite-duck {
    display: none;
  }

  .section-title-about {
    top: -42px;
     left: 52%;
    font-size: 50px;
  }
  .content-box-1 {
    padding: 22px 37px;
}
  .section-title-why {
    top: -48px;
    font-size: 57px;
  }
  .why-item {
    font-size: 27px;
  }
  .why-item img {
    width: 76px;
  }
  .qs-footer {
    padding: 51px 0 16px;
  }
  .qs-footer-title {
    font-size: 36px;
  }
  .cs-social-icons {
    margin-top: 27px;
  }
  .cs-social-icons a img {
    width: 46px;
  }
}

@media (max-width: 425px) {
  .about-image-asset7,
  .about-image-asset8 {
    display: none;
  }
  .cs-social-icons {
    gap: 25px !important;
  }
  .abount-container {
    padding: 30px 18px;
  }

  .section-title-about {
    top: -70px;
    /* left: 0px; */
    font-size: 42px;
  }
  .content-box-1 {
    padding: 16px 10px 0px 10px;
  }
  .main-wrapper {
    padding-bottom: 10px !important;
  }
  .our-flavors-h1 {
    font-size: 46px;
  }
  .our-flavors-h1-subtitle {
    font-size: 17px;
    margin-top: 17px;
    margin-bottom: 10px !important;
  }
  .qs-card-art-new-yellow img,
  .qs-card-art-new-red img,
  .qs-card-art-new-orange img {
    width: 300px !important;
  }
  .explore-our-flavors {
    margin-top: 0;
  }
  .content-box-1 p {
    font-size: 19px;
    line-height: 26px;
  }

  .section-title-why {
    top: -74px;
    font-size: 45px;
    line-height: 49px;
  }
  .why-quacky-box {
    margin-top: 103px;
  }
  .why-item {
    font-size: 21px;
  }

  .why-item img {
    width: 50px;
  }
     .why-item {
        font-size: 20px;
    }
    .why-row {
        gap: 2px;
    }
  .why-item {
    gap: 6px;
  }
  .why-quacky-box {
    padding: 42px 27px;
  }
  .why-row {
    margin-bottom: 0px;
  }
  .qs-footer-title {
    font-size: 29px;
  }
  .cs-social-icons a img {
    width: 39px;
  }
}

@media (max-width: 320px) {
  .section-title-about {
    top: -61px;
    /* left: 0px; */
  }
  .section-title-why {
    top: -78px;
    font-size: 41px;
  }

  .qs-footer-title {
    font-size: 37px;
    line-height: 45px;
  }
  .cs-social-icons {
    margin-top: 20px;
    gap: 38px !important;
  }

  .cs-social-icons a img {
    width: 45px;
  }
  .why-item {
    font-size: 18px;
  }
  .section-title-about {
    font-size: 42px;
  }
      .why-item {
        font-size: 16px;
    }
}