.primary--title{
  h2 {
   color: $c-second;
   --minFontSize: 18px;
   --maxFontSize: 26px;
   --scaler: 7vw;
   font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
   position: relative;
   word-spacing: 0;
   font-weight: 700;

   @media (max-width: 1366px){
    --minFontSize: 16px;
    --maxFontSize: 24px;
    --scaler: 3vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 700;
  }

   &:after {
     background: $c-second;
     // background: linear-gradient(
     //   135deg,
     //   adjust-hue($c-second, -20deg),
     //   $c-main
     // );
     display: block;
     content: "";
     position: absolute;
     width: 10%;
     margin: 0 auto;
     left: 0;
     border-radius: 10px;
     height: 6px;
     bottom: -15px;
    
   }

  //  &::before {
  //    background: $c-second;
  //    display: block;
  //    content: "";
  //    position: absolute;
  //    // width: 6%;
  //    margin: 0 auto;
  //    left: 0;
  //    border-radius: 50px;
  //    height: 6px;
  //    bottom: -15px;
  //    width:8%;
  //    animation: animateLine 4s linear infinite;
  //  }
  }

  h3 {
    color: $c-second;
    --minFontSize: 18px;
    --maxFontSize: 26px;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    position: relative;
    word-spacing: 0;
    font-weight: 700;
 
    &:after {
      background: $c-second;
      // background: linear-gradient(
      //   135deg,
      //   adjust-hue($c-second, -20deg),
      //   $c-main
      // );
      display: block;
      content: "";
      position: absolute;
      width: 40px;
      margin: 0 auto;
      left: 0;
      border-radius: 10px;
      height: 6px;
      bottom: -15px;
     
    }
 
   //  &::before {
   //    background: $c-second;
   //    display: block;
   //    content: "";
   //    position: absolute;
   //    // width: 6%;
   //    margin: 0 auto;
   //    left: 0;
   //    border-radius: 50px;
   //    height: 6px;
   //    bottom: -15px;
   //    width:8%;
   //    animation: animateLine 4s linear infinite;
   //  }
   }
}


.primary--title--main{
 h2 {
  color: $c-main;
  --minFontSize: 18px;
  --maxFontSize: 26px;
  --scaler: 7vw;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  position: relative;
  word-spacing: 0;
  font-weight: 700;

  @media (max-width: 1366px){
    --minFontSize: 16px;
    --maxFontSize: 24px;
    --scaler: 3vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 700;
  }

  &:after {
    background: $c-second;
    // background: linear-gradient(
    //   135deg,
    //   adjust-hue($c-second, -20deg),
    //   $c-main
    // );
    display: block;
    content: "";
    position: absolute;
    width: 10%;
    margin: 0 auto;
    left: 0;
    border-radius: 10px;
    height: 6px;
    bottom: -15px;
   
  }

  //  &::before {
  //    background: $c-second;
  //    display: block;
  //    content: "";
  //    position: absolute;
  //    // width: 6%;
  //    margin: 0 auto;
  //    left: 0;
  //    border-radius: 50px;
  //    height: 6px;
  //    bottom: -15px;
  //    width:12%;
  //    animation: animateLine 4s linear infinite;
  //  }
 }

 span {
   color: $c-main;
   --minFontSize: 18px;
   --maxFontSize: 26px;
   --scaler: 7vw;
   font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
   position: relative;
   word-spacing: 0;
   font-weight: 700;
   margin-bottom: .5rem;

   &:after {
     background: $c-second;
     // background: linear-gradient(
     //   135deg,
     //   adjust-hue($c-second, -20deg),
     //   $c-main
     // );
     display: block;
     content: "";
     position: absolute;
     width: 40px;
     margin: 0 auto;
     left: 0;
     border-radius: 10px;
     height: 6px;
     bottom: -15px;
    
   }

    // &::before {
    //   background: $c-second;
    //   display: block;
    //   content: "";
    //   position: absolute;
    //   // width: 6%;
    //   margin: 0 auto;
    //   left: 0;
    //   border-radius: 50px;
    //   height: 6px;
    //   bottom: -15px;
    //   width:8%;
    //   animation: animateLine 4s linear infinite;
    // }
  }
}


.second--title{
 text-align: center;
 &--emoji { 
   width: 24px;
 }

 &--h2 {
  color: $c-main;
  padding: 12px 0 0;
  --minFontSize: 24px;
  --maxFontSize: 38px;
  --scaler: 3vw;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  font-weight: 700;
  position: relative;

  @media (max-width: 1366px){
    --minFontSize: 24px;
    --maxFontSize: 28px;
    --scaler: 3vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 600;
  }
 }
 svg {
 }
}


.second--title--01{
 
  &--h3 {
   color: $c-second;
   padding: 12px 0 0;
   --minFontSize: 18px;
   --maxFontSize: 28px;
   --scaler: 3vw;
   font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
   font-weight: 800;
   position: relative;
 
   @media (max-width: 1366px){
     --minFontSize: 18px;
     --maxFontSize: 28px;
     --scaler: 3vw;
     font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
     font-weight: 700;
   }
  }

 }

.third--title{
  h3 {
   color: $c-main;
   padding: 12px 0;
   --minFontSize: 16px;
   --maxFontSize: 20px;
   --scaler: 7vw;
   font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
   @media (max-width: 1366px){
    --minFontSize: 16px;
    --maxFontSize: 18px;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 700;
  }
  }
}

.fourth--title{
 h4 {
  color: $c-second;
  padding: 12px 0;
  --minFontSize: 12px;
  --maxFontSize: 16px;
  --scaler: 7vw;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  
 }

 span {
   color: $c-second;
   padding: 12px 0;
   --minFontSize: 12px;
   --maxFontSize: 16px;
   --scaler: 7vw;
   font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
   margin-bottom: .5rem;

  }
}

.fifth--title{
 h3 {
  color: $c-second;
  padding: 12px 0;
  line-height: 36px;
  --minFontSize: 16px;
  --maxFontSize: 28px;
  --scaler: 7vw;
  font-weight: 700;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  @media (max-width: 1366px){
    --minFontSize: 16px;
    --maxFontSize: 24px;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 700;
  }
 }
}

.sixth--title{
 text-align: center;
 h2 {
  color: $c-third;
  line-height: 36px;
  --minFontSize: 18px;
  --maxFontSize: 28px;
  --scaler: 7vw;
  font-weight: 700;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  @media (max-width: 1366px){
    --minFontSize: 16px;
    --maxFontSize: 24px;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 700;
  }
 }

 h3 {
   color: $c-gray;
   line-height: 36px;
   --minFontSize: 14px;
   --maxFontSize: 22px;
   --scaler: 7vw;
   font-weight: 700;
   font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
   @media (max-width: 1366px){
    --minFontSize: 14px;
    --maxFontSize: 20px;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 700;
  }
  }
}

.seventh--title{
 text-align: left;
 h3 {
  color: $c-third;
  line-height: 36px;
  --minFontSize: 16px;
  --maxFontSize: 20px;
  --scaler: 7vw;
  font-weight: 700;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  @media (max-width: 1366px){
    --minFontSize: 16px;
    --maxFontSize: 18px;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 700;
  }
 }
}

.eighth--title{
 text-align: left;
 h4 {
  color: $c-main;
  line-height: 36px;
  --minFontSize: 14px;
  --maxFontSize: 18px;
  --scaler: 7vw;
  font-weight: 700;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));

 }

 @media (max-width: 800px) {
   text-align: center;
 }
}


.nineth--title{
  text-align: center;
  &--emoji { 
    width: 24px;
  }
 
  &--h2 {
   color: $c-background;
   padding: 12px 0;
   --minFontSize: 40px;
   --maxFontSize: 80px;
   --scaler: 7vw;
   font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
   font-weight: 900;

   @media (max-width: 1366px){
    --minFontSize: 40px;
    --maxFontSize: 60px;
    --scaler: 7vw;
    font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
    font-weight: 700;
  }
  }
 }

.t--paragraph--1 {
 --minFontSize: 13px;
 --maxFontSize: 18px;
 --scaler: 4vw;
 font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
 font-weight: 400;
 line-height: 32px;
 color: $c-gray;
 padding-bottom: 8px;
 text-align: justify;


 @media (max-width: 1366px){
  --minFontSize: 13px;
  --maxFontSize: 16px;
  --scaler: 5vw;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  line-height: 24px;


}
}

.t--paragraph--black {
 --minFontSize: 14px;
 --maxFontSize: 18px;
 --scaler: 5vw;
 font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
 font-weight: 400;
 line-height: 32px;
 color: $c-black;
 padding-bottom: 8px;
 text-align: justify;
 &:last-child {
   padding-bottom: 0;
   margin-bottom: 0;
 }

 @media (max-width: 1366px){
  --minFontSize: 13px;
  --maxFontSize: 16px;
  --scaler: 5vw;
  font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
  line-height: 24px;


}

 @media (max-width: 800px) {
   line-height: 24px;
 }

}

.t--paragraph--small {
 --minFontSize: 13px;
 --maxFontSize: 16px;
 --scaler: 7vw;
 font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
 font-weight: 400;
 line-height: 28px;
 color: $c-black;
 padding-bottom: 8px;
 text-align: justify;


 &:last-child {
   padding-bottom: 0;
   margin-bottom: 0;
 }
}

.s--image {
 width: 100%;
 overflow: hidden;
 position: relative;
 padding: 12px;
 height: auto;
 
   &:hover img  {
     transform: scale(1.5);
   }

   img {
     width: 100%;
     border-radius: 10px;
     object-fit: cover;
     transition: all .8s;
   }
}

.s2--image {
  width: 80%;
  padding: 12px;
  height: auto;
  @media (max-width: 800px)  {
    width: 60%;
  }
    
 }

.s--image-2 {
 width: 100%;
 overflow: hidden;
 position: relative;
 padding: 12px;
 
   &:hover img  {
     transform: scale(1.5);
   }

   img {
     width: 100%;
     border-radius: 10px;
     object-fit: cover;
     transition: all .8s;
   }

   @media (max-width: 800px) {
     width: 200px;
     margin: 0 auto;
   }
}

.s--image--90 {
 width: 90%;
 padding: 12px;
}

.s--image--100 {
  width: 100%;
  padding: 12px;
 }

 .s--image--60 {
  width: 60%;
 }

.image--random {
 position: relative;
 @media (max-width: 991px) {
   margin-bottom: 60px;
 }
 &--01 {
   transition: all .5s;
   transition-property: transform;
   &:hover {
     transform: scale(1.1) rotate(1.5deg) translateY(-12px) translateX(-2px);
   }
  //  padding-left: 80px;
 }
 &--02 {
   position: absolute;
   bottom: -117px;
   left: 20%;
   width: 66%;
   border-radius: 12px;
   transform-origin: left bottom;
   transition: all .5s;
   transition-property: transform;

   &:hover {
     transform: scale(1.1) rotate(1.5deg) translateX(12px) translateY(-12px);
   }

   @media (max-width: 800px) {
     bottom: -90px;
     left: 4%;
     width: 70%;
   }
 }
 &--03 {
   position: absolute;
  //  right: -40px;
    right: 35px;
   width: 30%;
   border-radius: 12px;
   transition: all .5s;
   transition-property: transform;

   &:hover {
     transform: scale(1.15) rotate(-2deg);
   }
   @media (max-width: 800px) {
     right:0;
     width: 35%;
   }
 }

}

.pega {
 font-weight: 600;
 color: $c-second;
 span {
   color: $c-main;
 }
}

.m--bold--primary {
 font-weight: 600;
 color: $c-main;
}

.text--color--third {
 color: $c-third;
}










.animate--float  {
 overflow: hidden;
 transform: translatey(0px);
 animation: float 6s ease-in-out infinite;
}


.animate--float--1  {
 overflow: hidden;
 transform: translatey(0px);
 animation: float1 6s ease-in-out infinite;
}

.animate--float--2  {
  overflow: hidden;
  transform: translateX(0px);
  animation: float1 6s ease-in-out infinite;
 }



@keyframes float {
 0% {
   transform: translatey(0px);
 }
 50% {
   transform: translatey(-10px);
 }
 100% {
   transform: translatey(0px);
 }
}


@keyframes float1 {
 0% {
   transform: translatey(0px);
 }
 50% {
   transform: translatey(10px);
 }
 100% {
   transform: translatey(0px);
 }
}

@keyframes float2 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(0px);
  }
 }




@keyframes animateLine {
 0% {
 transform:scaleX(0);
 transform-origin: left;
 }
 50%
 {
   transform:scaleX(1);
 transform-origin: left;
 }
 50.1%
 {
   transform:scaleX(1);
 transform-origin: right;
   
 }
 
 100%
 {
   transform:scaleX(0);
 transform-origin: right;
   
 }
 
 
}