@import url("https://fonts.googleapis.com/css2?family=Italiana&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Imprima&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inria+Serif&display=swap");

* {
  padding: 0;
  margin: 0;
  user-select: none;
  scroll-behavior: smooth;
}

body{
  overflow-x: hidden;

}

:root {
  --primary-color: #db3c73;
  --footer-color: #372d5d;
  --back-color: rgba(99, 99, 99, 0.25);
  --secondary-color: #ffe5f7;
  --white-text: #fff;
  --cursive-font: "Italianno", cursive;
  --heading-font: "Italiana", sans-serif;
  --para-font: "Imprima", sans-serif;
  --number-font: "Inria Serif", serif;

  /* service Section Roots */
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: 35s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

.display-flex {
  display: flex !important;
  transition: all 0.45s ease-in-out;
  z-index: 1000;
  overflow-x: hidden;
  animation: fadeIn 300ms ease 0s 1 normal none;
}

.display-none{
  display: flex !important;
  transition: all 0.45s ease-in-out;
  z-index: 1000;
  overflow-x: hidden;
  animation: fadeOut 300ms ease 0s 1 normal none;
}

@keyframes fadeOut {
  0% {
    transform: scaleX(1);
    transform-origin: 100% 100%;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 100%;
    display: none !important;
  }
}

@keyframes fadeIn {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 100%;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 100%;
  }
}


  /* Developed by */

  section-8 > .develop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:  5vh 10vw 20vh 10vw;  
    background-color: var(--footer-color);
    color: var(--white-text);
  }

  section-8 .develop  a{
    color: var(--white-text);
  }

/* ============================================================================= */
/* Galaxy Fold and Folding Phones */
/* ============================================================================= */
@media (min-width: 120px) and (max-width: 360px) {
    /* section 1  */
    body > header > .navbar > .bg {
      /* background: var(--primary-color); */
      background-color: #de3b74;
      display: flex;
      position: relative;
      color: var(--white-text);
      z-index: 900 !important;
      justify-content: space-between;
      align-items: center;
      height: 7vh;
    }
  
    .navbar {
      width: 100%;
      z-index: 1000;
    }
  
    .logo {
      text-align: center;
      padding: 2vw;
      display: flex;
      z-index: 1000;
      justify-content: start;
      align-items: start;
      background-color: transparent;
      transition: all 0.45s ease-in-out;
    }
  
    .logo > a {
      text-decoration: none;
      background-color: transparent;
      color: var(--white-text);
      transition: all 0.45s ease-in-out;
      z-index: 1000;
      padding: 0;
    }
  
    .logo > a > h1 {
      background-color: transparent;
      font-family: var(--cursive-font);
      font-weight: 100;
      font-size: 1.2rem;
      z-index: 1000;
      padding: 0;
    }
  
    .logo > a > h2 {
      font-family: var(--para-font);
      background-color: transparent;
      font-weight: 100;
      font-size: 0.5em;
      z-index: 1000;
    }
  
    .navbar > ul {
      display: none;
      position: absolute;
      left: 0;
      z-index: 100000;
      width: 100vw;
      height: 50vh;
      justify-content: center;
      flex-direction: column;
      background-color: var(--primary-color);
      align-items: center;
      transition: all 0.45s ease-in-out;
    }
  
    .navbar > ul > li {
      text-decoration: none;
      list-style: none;
      background: transparent;
      z-index: 1000;
      /* height: 2rem; */
      padding: 2vh;
      margin-top: 1%;
      font-size: 1rem;
      font-family: var(--para-font);
    }
  
    .navbar > ul > li > a {
      text-decoration: none;
      background: transparent;
      z-index: 1000;
      color: var(--white-text);
      transition: all 0.45s ease-in-out;
    }
  
    .hamburgir {
      width: 70px;
      height: 70px;
      /* display: block; */
      transition: all 0.45s ease-in-out;
      z-index: 1000;
      padding-bottom: 2vh;
    }
  
    .hamburgir > svg {
      width: 100%;
      height: 100%;
    }
  
    section-1 {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      overflow-x: hidden !important;
      justify-content: space-between;
      width: 100vw;
      height: 100vh;
      top: 0;
    }
  
    section-1 > .left {
      position: relative;
      /* height: 10vh; */
      width: 100%;
      height: 24vh;
      margin-left: 2vw;
      font-family: var(--heading-font);
      color: var(--primary-color);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: capitalize;
    }
    section-1 > .left > h1 {
      font-size: 2rem;
      z-index: 900;
      padding: 0 2vw 0 2vw;
      background-color: transparent;
    }
  
    section-1 > .right {
      overflow: hidden !important;
      position: relative;
      width: 100vw;
      max-width: 100vw;
      height: 76vh;
      display: flex;
      flex-direction: column;
    }
  
    section-1 > .right > img:nth-child(1) {
      position: absolute;
      /* overflow-x: hidden; */
      width: 96vw;
      z-index: 1;
      top: -16vh;
      right: -50vw;
      transform: rotate(274deg);
      background: transparent;
    }
  
    section-1 > .right > img:nth-child(2) {
      position: absolute;
      width: 79vw;
      top: -16vh;
      /* overflow-x: hidden; */
      right: -15vw;
      transform: rotate(302deg);
      background-color: transparent;
    }
  
    section-1 > .right > img:nth-child(3) {
      width: 49vw;
      position: absolute;
      /* overflow-x: hidden; */
      right: 65vw;
      top: 48vh;
      transform: rotate(176deg);
      background-color: transparent;
    }
    section-1 > .right > img:nth-child(4) {
      display: block;
      width: 50vw;
      position: absolute;
      right: 53vw;
      overflow-x: hidden;
      top: -3vh;
      transform: rotate(358deg);
      background-color: transparent;
    }
  
    section-1 > .right > .homeCarousal {
      width: 70vw;
      box-shadow: 4px 4px 20px 1px #d4becd;
      height: 57vh;
      background: #000;
      border-radius: 40px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: absolute;
      z-index: 11;
      top: 15vh;
      right: 15vw;
      overflow: hidden;
      transition: background-image 1s ease-in-out;
      box-shadow: 4px 4px 20px 1px #d4becd;
    }
  
    section-2 {
      position: relative;
      display: flex;
      flex-direction: column;
      /* align-items: center; */
      /* height: 100vh; */
      max-width: 100vw;
    }
  
    section-2 .head2 {
      text-align: center;
      overflow: hidden;
      font-family: var(--heading-font);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  
    section-2 .head h1 {
      width: 100vw;
      text-align: center;
    }
  
    section-2 .head2 .front {
      position: absolute;
      /* left: 44.1vw;
      top: 6vh; */
      text-align: center;
      font-size: 1.9rem;
      z-index: 13;
      background-color: transparent;
      color: var(--primary-color);
    }
  
    section-2 .head2 .back {
      position: relative;
      text-align: center;
      font-weight: 500;
      font-size: 4rem;
      color: var(--back-color);
    }
  
    .body2 {
      display: grid;
      align-content: center;
      overflow: hidden;
      gap: var(--gap);
      width: 100%;
      padding-top: 1.7rem;
      padding-bottom: 1.7rem;
      font-family: system-ui, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--color-text);
      background-color: var(--color-bg);
    }
  
    /* hair */
    .one_hair {
      background-image: url(../images/home1.png);
    }
  
    .two_hair {
      background-image: url(../images/home2.jpeg);
    }
    .three_hair {
      background-image: url(../images/home1.png);
    }
  
    .four_hair {
      background-image: url(../images/home2.jpeg);
    }
    .five_hair {
      background-image: url(../images/home1.png);
    }
  
    .six_hair {
      background-image: url(../images/home2.jpeg);
    }
    .seven_hair {
      background-image: url(../images/home1.png);
    }
  
    .eight_hair {
      background-image: url(../images/home2.jpeg);
    }
  
    /* Nail */
    .one_nail {
      background-image: url(../images/home1.png);
    }
  
    .two_nail {
      background-image: url(../images/home2.jpeg);
    }
    .three_nail {
      background-image: url(../images/home1.png);
    }
  
    .four_nail {
      background-image: url(../images/home2.jpeg);
    }
    .five_nail {
      background-image: url(../images/home1.png);
    }
  
    .six_nail {
      background-image: url(../images/home2.jpeg);
    }
    .seven_nail {
      background-image: url(../images/home1.png);
    }
  
    .eight_nail {
      background-image: url(../images/home2.jpeg);
    }
  
    /* make Up Image */
    .one_make {
      background-image: url(../images/home1.png);
    }
  
    .two_make {
      background-image: url(../images/home2.jpeg);
    }
    .three_make {
      background-image: url(../images/home1.png);
    }
  
    .four_make {
      background-image: url(../images/home2.jpeg);
    }
    .five_make {
      background-image: url(../images/home1.png);
    }
  
    .six_make {
      background-image: url(../images/home2.jpeg);
    }
    .seven_make {
      background-image: url(../images/home1.png);
    }
  
    .eight_make {
      background-image: url(../images/home2.jpeg);
    }
  
    .img {
      object-fit: cover;
      background-size: cover;
      background-position: top;
      background-repeat: no-repeat;
      display: grid;
      place-items: center;
      width: var(--size);
      aspect-ratio: 16/9;
      border-radius: 0.5rem;
    }
  
    .marquee {
      display: flex;
      overflow: hidden;
      user-select: none;
      gap: var(--gap);
      /* mask-image: linear-gradient(
          var(--mask-direction, to right),
          hsl(0 0% 0% / 0),
          hsl(0 0% 0% / 1) 20%,
          hsl(0 0% 0% / 1) 80%,
          hsl(0 0% 0% / 0)
        ); */
    }
  
    .marquee__group {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: var(--gap);
      min-width: 100%;
      animation: scroll-x var(--duration) linear infinite;
    }
  
    .marquee--reverse .marquee__group {
      animation-direction: reverse;
      animation-delay: -3s;
    }
  
    @keyframes scroll-x {
      from {
        transform: translateX(var(--scroll-start));
      }
      to {
        transform: translateX(var(--scroll-end));
      }
    }
  
    /* Parent wrapper */
    .wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      margin: auto;
      max-width: 100vw;
    }
  
    /* section 3 */
  
    section-3 {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100vw;
      max-width: 100vw;
    }
  
    section-3 .head3 {
      text-align: center;
      overflow: hidden;
      font-family: var(--heading-font);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  
    section-3 .head3 h1 {
      width: 100vw;
      text-align: center;
    }
  
    section-3 .head3 .front {
      position: absolute;
      /* left: 44.1vw;
            top: 6vh; */
      text-align: center;
      font-size: 1.5rem;
      z-index: 13;
      background-color: transparent;
      color: var(--primary-color);
    }
  
    section-3 .head3 .back {
      position: relative;
      text-align: center;
      font-weight: 500;
      font-size: 3rem;
      color: var(--back-color);
    }
  
    .body3 > .container {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      text-align: center;
    }
  
    .body3 > .container > .card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 2rem;
      align-items: center;
    }
  
    .body3 > .container > .card > .box {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
      width: 27vh;
      height: 27vh;
      border-radius: 30px;
    }
  
    /* happy Customer */
    .happyCustomer {
      background-color: rgba(254, 138, 183, 1);
      box-shadow: 4px 6px 15px #c1adbb;
    }
  
    .websiteVisit {
      background-color: rgba(254, 138, 183, 0.3);
      box-shadow: 4px 6px 15px #c1adbb;
    }
  
    .coursesEnrolled {
      background-color: rgba(255, 181, 181, 1);
      box-shadow: 4px 6px 15px #c1adbb;
    }
  
    .body3 > .container > .card > .box > .icon,
    .number {
      background-color: transparent;
      font-family: var(--number-font);
    }
  
    .body3 > .container > .card > .box > .icon {
      width: 6vh;
      height: 6vh;
      overflow: hidden;
      object-fit: contain;
    }
  
    .body3 > .container > .card > .box > .icon > img {
      width: 100%;
      height: 100%;
      background: transparent;
    }
  
    .body3 > .container > .card > .box > .number > span {
      background: transparent;
      font-size: 1.5rem;
    }
  
    .body3 > .container > .card > .text {
      background-color: transparent;
      font-family: var(--para-font);
    }
  
    .body3 > .container > .card > .text > h3 {
      font-size: 2.4rem;
      margin-top: 2vh;
      background-color: transparent;
    }
  
    /* section 4 */
  
    section-4 {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100vw;
      max-width: 100vw;
    }
  
    section-4 .head4 {
      text-align: center;
      overflow: hidden;
      font-family: var(--heading-font);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  
    section-4 .head4 h1 {
      width: 100vw;
      text-align: center;
    }
  
    section-4 .head4 .front {
      position: absolute;
      /* left: 44.1vw;
            top: 6vh; */
      text-align: center;
      font-size: 1.9rem;
      z-index: 13;
      background-color: transparent;
      color: var(--primary-color);
    }
  
    section-4 .head4 .back {
      position: relative;
      text-align: center;
      font-weight: 500;
      font-size: 4rem;
      color: var(--back-color);
    }
  
    section-4 > .body4 {
      display: flex;
      flex-direction: column;
      padding-top: 2vh;
      justify-content: space-around;
      align-content: center;
      font-family: var(--para-font);
    }
  
    section-4 > .body4 > .left {
      overflow: hidden;
      width: 100vw;
      height: 50vh; /* Assuming 9:16 aspect ratio */
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 30px;
    }
  
    section-4 > .body4 > .left > video {
      border-radius: 30px;
      width: 100%;
      height: 100%;
    }
  
    section-4 > .body4 > .right {
      width: 100vw;
      display: flex;
      justify-content: center;
      align-content: center;
    }
    section-4 > .body4 > .right > ul {
      padding: 2vw;
      align-items: center;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  
    section-4 > .body4 > .right > ul > li {
      font-size: 0.8rem;
      padding: 1.5%;
      color: var(--primary-color);
    }
  
    /* section 5 */
  
    section-5 {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100vw;
      max-width: 100vw;
    }
  
    section-5 .head5 {
      text-align: center;
      overflow: hidden;
      font-family: var(--heading-font);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  
    section-5 .head5 h1 {
      width: 100vw;
      text-align: center;
    }
  
    section-5 .head5 .front {
      position: absolute;
      /* left: 44.1vw;
            top: 6vh; */
      text-align: center;
      font-size: 1.9rem;
      z-index: 13;
      background-color: transparent;
      color: var(--primary-color);
    }
  
    section-5 .head5 .back {
      position: relative;
      text-align: center;
      font-weight: 500;
      font-size: 4rem;
      color: var(--back-color);
    }
  
        
    section-5 > .body5 {
      /* display: flex; */
      position: relative;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 100vw;
      height: 100vh;
    }
  
     section-5 > .body5 > .PackageCard {
      display: flex;
      position: relative;
      justify-content: space-between;
      align-items: center;
      border-radius: 500px;
      background: #ffb5b5;
      width: 90vw;
      height: 12vh;
      flex-shrink: 0;
      transition: all 0.2s ease-in-out;
      /* overflow: hidden; */
    }
  
    .body5 > .PackageCard:hover {
      transform: translateY(-4px);
      box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.25);
    }
  
    .body5 > .PackageCard > .left {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #db3c73;
      border-radius: 50%;
      padding: 5%;
      margin: 2%;
      box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25);
      color: white;
      width: 12vw;
    }
  
    .body5 > .PackageCard  p{
      font-size: 0.7rem;
    }
    
    .body5 > .PackageCard > .center {
      width: 75vw;
      padding-left: 2vw;
      color: #db3c73;
    }
  
    .body5 > .PackageCard > .center > ul {
      list-style-type: disc;
      font-size: 0.6rem;
    }
  
    .body5 > .PackageCard > .right {
      position: absolute;
      font-size: 0.4rem;
      right: 5vw;
      top: -2vh;
      z-index: 111;
      color: var(--white-text);
      background-color: #db3c73;
      padding: 2vw;
      border-radius: 20px;
      box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25);
    }
  
    
  
    .body5 > .PackageCardReverse {
      display: flex;
      flex-direction: row-reverse;
      position: relative;
      justify-content: space-between;
      align-items: center;
      border-radius: 500px;
      background: rgba(231, 185, 169, 1);
      width: 40vw;
      height: 20vh;
      flex-shrink: 0;
    }
  
    .body5 > .PackageCard > .PackageCardReverseRight {
      position: absolute;
      left: 5vw;
      top: -2vh;
      font-size: 0.4rem;
      color: var(--white-text);
      background-color: #db3c73;
      padding: 2vw;
      border-radius: 20px;
      box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25);
    }
  
    .body5 > .PackageCard > .PackageCardReverseCenter {
      padding:2vh 0 0 10vw;
    }
  
    .body5 > .PackageExplore{
      overflow: hidden;
      height: 5vh !important;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      text-align: center;
      transition: all 0.2s ease-in-out;
    }
  
    .body5 > .PackageExplore:hover{
      /* box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25); */
      transform: translateY(-5px);
    }
  
    .body5 > .PackageExplore > a{
      background-color: var(--primary-color);
      color: var(--white-text);
      padding:  0 2vw;
      border-radius: 12px;
      font-size: 1.2rem;
      overflow: hidden;
      text-decoration: none;
    }
  
    /* section 6 */
  
    section-6 {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100vw;
      max-width: 100vw;
    }
  
    section-6 .head6 {
      text-align: center;
      overflow: hidden;
      font-family: var(--heading-font);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  
    section-6 .head6 h1 {
      width: 100vw;
      text-align: center;
    }
  
    section-6 .head6 .front {
      position: absolute;
      /* left: 44.1vw;
            top: 6vh; */
      text-align: center;
      font-size: 1.9rem;
      z-index: 13;
      background-color: transparent;
      color: var(--primary-color);
    }
  
    section-6 .head6 .back {
      position: relative;
      text-align: center;
      font-weight: 500;
      font-size: 4rem;
      color: var(--back-color);
    }
  
    .body6 {
      display: grid;
      align-content: center;
      overflow: hidden;
      gap: var(--gap);
      width: 100%;
      height: 65vh;
      min-height:65vh;
      font-family: system-ui, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--color-text);
      background-color: var(--color-bg);
    }
  
    .wrapper--vertical {
      flex-direction: row;
      height: 100vh;
      margin: 2vw;
    }
    
    .marquee img{
      display: grid;
      place-items: center;
      width: var(--size);
      fill: var(--color-text);
      background: var(--color-bg-accent);
      aspect-ratio: 16/9;
      padding: calc(var(--size) / 50);
      border-radius: 2rem;
    }
  
    .marquee--vertical img{
      aspect-ratio: 1;
      width: calc(var(--size) / 1.5);
      /* padding: calc(var(--size) / 6); */
    }
  
    .marquee--vertical {
      --mask-direction: to bottom;
    }
    
    .marquee--vertical,
    .marquee--vertical .marquee__group {
      flex-direction: column;
    }
    
    .marquee--vertical .marquee__group {
      animation-name: scroll-y;
    }
    
    .marquee--reverse .marquee__group {
      animation-direction: reverse;
      animation-delay: -3s;
    }
  
    @keyframes scroll-y {
      from {
        transform: translateY(var(--scroll-start));
      }
      to {
        transform: translateY(var(--scroll-end));
      }
    }
  
    
    /* section 7 */
  
    section-7 {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100vw;
      max-width: 100vw;
    }
  
    section-7 .head7 {
      text-align: center;
      overflow: hidden;
      font-family: var(--heading-font);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  
    section-7 .head7 h1 {
      width: 100vw;
      text-align: center;
    }
  
    section-7 .head7 .front {
      position: absolute;
      /* left: 44.1vw;
            top: 6vh; */
      text-align: center;
      font-size: 1.9rem;
      z-index: 13;
      background-color: transparent;
      color: var(--primary-color);
    }
  
    section-7 .head7 .back {
      position: relative;
      text-align: center;
      font-weight: 500;
      font-size: 4rem;
      color: var(--back-color);
    }
  
    section-7 .body7{
      display: flex;
      flex-direction: column-reverse;
      position: relative;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 90vh;
      /* margin: 0 10vw 0  10vw; */
    }
  
    section-7 > .body7 > .left {
      width: 80vw;
      height: 55vh;
      background-color: var(--primary-color);
      font-family: var(--para-font);
      color: var(--white-text);
      border-radius: 40px;
      align-items: center;
      display: flex;  
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }
  
    section-7 > .body7 > .left > h1{
      width: 100%;
      font-family: var(--heading-font);
      text-align: center;
      overflow: hidden;
      font-size: 2rem;
    }
  
    section-7 > .body7 > .left > p{
      text-align: center;
      width:80%;
      font-size: 0.7rem;
      padding: 2vw;
    }
  
  
    section-7 > .body7 > .right {
      font-family: var(--para-font);
      color: var(--white-text);
      overflow: hidden;
      /* width: 30vw; */
    }
    
    section-7 > .body7 > .right > .circle{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 76vw;
      height: 50vh;
      z-index: 1000;
      overflow: hidden;
      top: 7.5vh;
      right: 0vw;
    }
    
    /* owner */
    section-7 > .body7 > .right > .circle > img{
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 100;
    }
  
  /*  muskara & Brush */
    section-7 > .body7 > .right > img{
      position: absolute;
      transform: rotate(180deg);
      width: 82vw;
      top: 0vh;
      left: -33vw;
    }
  
    section-7 > .body7 > .right > img:nth-child(4){
      width: 13vw;
      transform: rotate(-40deg);
      top: 0vh;
      right: 0vw !important;
    }
  
    section-8 > .container{
      background-color: var(--primary-color);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      width: 100%;
      margin-top: 7vh;
      padding-bottom: 3vh;
      /* height: 30vh; */
      color: var(--white-text);
    }
  
    section-8 .container  h3 {
      font-family: var(--heading-font);
      padding-top: 3vh;
    }
  
    section-8 .container a{
      text-decoration: none;
      color: var(--white-text);
      transition: all 0.2s ease-in-out;
    }
  
    section-8 .container a:hover{
      border-bottom: 1px solid var(--white-text);
    }
  
  
    section-8 > .container > .service , .find , .address{
      gap: 1vh;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
  
    section-8 > .container  p{
      display: flex;
      justify-content: space-around;
      align-items: center;
      overflow: hidden;
    }
    
    section-8  p {
      font-size: 0.8rem;
    }
  
    section-8 .container img {
      width: 2vw;
      margin-left: 0.5vw;
    }
  }