.hero-slider .about {
   position: fixed;
   z-index: 10;
   bottom: 10px;
   left: 10px;
   width: 40px;
   height: 40px;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
   transition: all 0.2s ease;
 }

body.home section,
.hero-slider{
  overflow: hidden !important;
}
 .hero-slider .about .bg_links {
   width: 40px;
   height: 40px;
   border-radius: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(5px);
   position: absolute;
 }

 .hero-slider .about .logo {
   width: 40px;
   height: 40px;
   z-index: 9;
   background-image: url(https://rafaelalucas91.github.io/assets/codepen/logo_white.svg);
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: 10px 7px;
   opacity: 0.9;
   transition: all 1s 0.2s ease;
   bottom: 0;
   left: 0;
 }

 .hero-slider .about .social {
   opacity: 0;
   left: 0;
   bottom: 0;
   position: absolute;
 }

 .hero-slider .about .social .icon {
   width: 100%;
   height: 100%;
   background-size: 20px;
   background-repeat: no-repeat;
   background-position: center;
   display: flex;
   transition: all 0.2s ease, background-color 0.4s ease;
   opacity: 0;
   border-radius: 100%;
 }

 /* Icons */
 .hero-slider .about .social.portfolio .icon {
   background-image: url(https://rafaelalucas91.github.io/assets/codepen/link.svg);
 }

 .hero-slider .about .social.dribbble .icon {
   background-image: url(https://rafaelalucas91.github.io/assets/codepen/dribbble.svg);
 }

 .hero-slider .about .social.linkedin .icon {
   background-image: url(https://rafaelalucas91.github.io/assets/codepen/linkedin.svg);
 }

 /* Hover effects */
 .hero-slider .about:hover {
   width: 105px;
   height: 105px;
   transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65);
 }

 .hero-slider .about:hover .logo {
   opacity: 1;
   transition: all 0.6s ease;
 }

 .hero-slider .about:hover .social {
   opacity: 1;
 }

 .hero-slider .about:hover .social .icon {
   opacity: 0.9;
 }

 .hero-slider .about .social:hover .icon {
   background-size: 65%;
   opacity: 1;
 }

 /* Positioning on hover */
 .hero-slider .about:hover .social.portfolio {
   left: 0;
   bottom: calc(100% - 40px);
   transition: all 0.3s cubic-bezier(0.64, 0.01, 0.07, 1.65);
 }

 .hero-slider .about:hover .social.portfolio .icon:hover {
   background-color: #698fb7;
 }

 .hero-slider .about:hover .social.dribbble {
   bottom: 45%;
   left: 45%;
   transition: all 0.3s 0.15s cubic-bezier(0.64, 0.01, 0.07, 1.65);
 }

 .hero-slider .about:hover .social.dribbble .icon:hover {
   background-color: #ea4c89;
 }

 .hero-slider .about:hover .social.linkedin {
   bottom: 0;
   left: calc(100% - 40px);
   transition: all 0.3s 0.25s cubic-bezier(0.64, 0.01, 0.07, 1.65);
 }

 .hero-slider .about:hover .social.linkedin .icon:hover {
   background-color: #0077b5;
 }


 @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans+Condensed:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i|IBM+Plex+Serif:400,400i');

 body {
   font-family: 'IBM Plex Mono', monospace;
   font-family: 'IBM Plex Sans', sans-serif;
   font-family: 'IBM Plex Serif', serif;
   margin: 0;
 }

 /* swiper */

 .swiper-container {
   padding: 0;
   height: 100vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
 }

 .swiper-slide {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: left;
   transition: all 0.3s ease;
   background-position: fixed;
 }

 .swiper-item {
   width: 80%;
   height: 100%;
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   position: absolute;
 }


 .swiper-slide .number {
   width: auto;
   height: auto;
   position: absolute;
   right: 10px;
   bottom: -40px;
   font-size: 120px;
   -webkit-text-stroke: 1px white;
   color: transparent;
   font-weight: 600;
   font-family: 'IBM Plex Sans', sans-serif;
   opacity: 0.3;
 }


 @media screen and (max-width: 512px) {
   .swiper-slide .number {
     display: none;
   }

   .swiper-item {
     width: 100%;
   }
 }

 .swiper-item:after {
   content: '';
   background-color: black;
   position: absolute;
   width: 100%;
   height: inherit;
   bottom: 0;
   z-index: 1;
   opacity: 0.1;
 }

 .swiper-item:before {
   content: '';
   background-image: linear-gradient(to bottom, black 0%, transparent 100%);
   position: absolute;
   width: 100%;
   height: 30%;
   top: 0;
   z-index: 1;
   opacity: 0.2;
 }


 /* swiper arrows */

 .swiper-arrows {
   width: 400px;
   height: 80px;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   bottom: 0px;
   right: 20%;
 }

 @media screen and (max-width: 512px) {
   .swiper-arrows {
     right: 10%;
   }
 }

 .swiper-button-prev,
 .swiper-button-next {
   width: 80px;
   height: 80px;
   background-image: none;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   bottom: 0;
   margin: 0;
   transition: all 0.3s ease;
 }

 .swiper-button-prev {
   right: 80px;
   left: auto;
   background-color: rgba(255, 255, 255, 0.7);
 }

 .swiper-button-next {
   right: 0px;
   background-color: rgba(255, 255, 255, 0.8);
 }


 .swiper-button-prev span,
 .swiper-button-next span {
   width: 10px;
   height: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: transparent;
   position: absolute;
   border: solid 2px #666666;
   border-left: 0;
   border-bottom: 0;
   transition: all 0.1s ease;

 }

 .swiper-button-prev span {
   transform: rotate(-135deg);
   left: 49%;
 }

 .swiper-button-next span {
   transform: rotate(45deg);
   right: 49%;
 }


 .swiper-button-prev:hover span,
 .swiper-button-next:hover span {
   width: 5px;
   height: 5px;
 }


 .swiper-button-prev:after,
 .swiper-button-next:after {
   width: 0px;
   height: inherit;
   content: '';
   position: absolute;
   background-color: white;
   transition: all 0.4s ease-in-out;
   z-index: -1;
   opacity: 0.8;
 }

 .swiper-button-prev:after {
   right: 0;
 }

 .swiper-button-next:after {
   left: 0;
 }

 .swiper-button-prev:hover:after,
 .swiper-button-next:hover:after {
   width: inherit;
 }

 .swiper-button-disabled {
   opacity: 1 !important;

 }

 .swiper-button-disabled.swiper-button-prev span,
 .swiper-button-disabled.swiper-button-next span {
   opacity: 0.2;

 }

 /* swiper arrows mobile */

 @media screen and (max-width: 512px) {

   .swiper-button-prev,
   .swiper-button-next {
     width: 60px;
     height: 60px;
     bottom: 0;
   }

   .swiper-arrows {
     height: 60px;
   }

   .swiper-button-prev {
     right: 60px;
   }

   .swiper-button-prev span {
     left: 45%;
   }

   .swiper-button-next span {
     right: 45%;
   }
 }


 /* swiper pagination */

 .swiper-pagination {
   height: 3px;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 60px !important;
   right: calc(20% - 60px);
   top: 20px;
   float: right;
   position: absolute;
   left: auto !important;
 }

 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 10px 0px;
 }


 .swiper-pagination-bullet {
   background-color: white;
   opacity: 1;
   transition: all 0.3s ease-in-out;
   width: 30px;
   height: 3px;
   border-radius: 0px;
   opacity: 0.5;
 }

 .swiper-pagination-bullet:hover {
   width: 50px;
 }

 .swiper-pagination-bullet-active,
 .swiper-pagination-bullet-active:hover {
   width: 60px;
   transition: all 0.3s ease-in-out;
   left: 0;
   background-color: white;
   opacity: 1;
 }

  @media screen and (max-width: 1366px) {
    .swiper-container {
    height: 700px;
  }
}

 /* swiper pagination mobile */

 @media screen and (max-width: 512px) {
   .swiper-pagination {
     right: calc(10% - 60px);
   }

   .swiper-pagination-bullet,
   .swiper-pagination-bullet:hover {
     width: 15px;
   }

   .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 8px 0px;
   }

   .swiper-pagination-bullet-active,
   .swiper-pagination-bullet-active:hover {
     width: 25px;
   }
 }


 /* text content */

 .slide-text {
   text-align: left;
   color: white;
   opacity: 1;
   z-index: 2;
   font-family: 'IBM Plex Sans', sans-serif;
   width: 40%;
   max-width: 250px;
   padding: 30px;
   display: none;
   position: absolute;
   right: 5%;
   animation: transitionText 2s ease;
 }

 .slide-text.playText {
   display: block;
   animation: transitionText 2s ease;
 }

 @keyframes transitionText {
   0% {
     right: -100%;
   }

   100% {
     right: 5%;
   }
 }

 .slide-text h1,
 .slide-text h2 {
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 25px;
   letter-spacing: 0.03em;
   margin: 0;
   padding: 0;
   font-weight: 400;
   color: #000;
 }

 .slide-text p {
   margin: 10px 0 0 0;
   font-size: 16px;
   color: #000;
   font-weight: 200;
 }

 /* text content mobile */

 @media screen and (max-width: 512px) {
   .slide-text {
     width: 60%;
   }

   .slide-text h1 {
     font-size: 15px;
     letter-spacing: 0.02em;
   }

   .slide-text p {
     font-size: 14px;
   }
 }

 /* button */

 .slide-text .btn {
   font-family: 'IBM Plex Mono', monospace;
   background-color: transparent;
   font-size: 14px !important;
   letter-spacing: 2px;
   color: white;
   position: relative;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
   margin-top: 20px;
   border: 0;
   padding: 0 15px;
   left: 0;
 }

.slide-text .btn:before {
    content: '';
    background-color: white;
    width: 10px;
    height: 1px;
    position: absolute;
    z-index: 2;
    left: 9px;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: inherit;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
}
.slide-text .btn:after {
    content: '';
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    position: absolute;
    border: solid 2px #fff;
    border-left: 0;
    border-bottom: 0;
    transform: translateY(-50%) rotate(45deg) !important;
    top: 50%;
    left: 12px;
    transition: all 0.3s ease-in-out;
}

 .slide-text .btn:hover::after {
   border-color: #ec1b24 !important;
 }

 .slide-text .btn:hover::before {
   background: #ec1b24 !important;
 }

.slide-text .btn:hover {
    color: #ec1b24 !important;
    background: #000 !important;
    border-color: #000 !important;
}
 button:focus {
   outline: 0;
 }

 :root {
   /**
   * colors
   */

   /* --st-patricks-blue: hwb(236 12% 56%);
  --amaranth-purple: hsl(335, 88%, 38%);
  --royal-blue-dark: hsl(231, 68%, 21%);
  --chrome-yellow: hsl(39, 100%, 52%);
  --space-cadet-1: hsl(230, 41%, 25%);
  --space-cadet-2: hsl(230, 59%, 16%);
  --winter-sky_50: hsla(335, 87%, 53%, 0.5);
  --purple-navy: hsl(236, 26%, 43%);
  --ksu-purple: hsl(275, 54%, 33%);
  --winter-sky: hsl(335, 87%, 53%);
  --razzmatazz: hsl(335, 87%, 51%);
  --platinum: hsl(0, 0%, 90%);
  --black_70: hsla(0, 0%, 0%, 0.7);
  --rajah: hsl(29, 99%, 67%);
  --white: hsl(0, 0%, 100%); */

   --gradient-1: linear-gradient(90deg,
       var(--royal-blue-dark) 0,
       var(--ksu-purple) 51%,
       var(--royal-blue-dark));
   --gradient-2: linear-gradient(90deg, var(--razzmatazz), var(--rajah));

   /**
   * typography
   */

   --ff-source-sans-pro: "Source Sans Pro", sans-serif;
   --ff-poppins: "Poppins", sans-serif;

   --fs-1: 4.2rem;
   --fs-2: 3.8rem;
   --fs-3: 3.2rem;
   --fs-4: 2.5rem;
   --fs-5: 2.4rem;
   --fs-6: 2rem;
   --fs-7: 1.8rem;
   --fs-8: 1.5rem;

   --fw-500: 500;
   --fw-600: 600;
   --fw-700: 700;

   /**
   * border radius
   */

   --radius-4: 4px;
   --radius-12: 12px;

   /**
   * spacing
   */

   --section-padding: 60px;

   /**
   * transition
   */

   --transition-1: 0.15s ease;
   --transition-2: 0.35s ease;
   --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
   --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);

   /**
   * shadow
   */

   --shadow: 0 5px 20px 1px hsla(220, 63%, 33%, 0.1);
 }

 /*-----------------------------------*\
  #RESET
\*-----------------------------------*/

 *,
 *::before,
 *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 li {
   list-style: none;
 }

 a {
   text-decoration: none;
 }

 a,
 img,
 span,
 input,
 button,
 ion-icon {
   display: block;
 }

 button,
 input {
   background: none;
   border: none;
   font: inherit;
 }

 button {
   cursor: pointer;
 }

 input {
   width: 100%;
 }

 ion-icon {
   pointer-events: none;
 }

 img {
   height: auto;
 }

 address {
   font-style: normal;
 }

 html {
   font-family: var(--ff-poppins);
   font-size: 10px;
   scroll-behavior: smooth;
 }

 body {
   background-color: var(--white);
   color: var(--purple-navy);
   font-size: 1.6rem;
 }

 ::-webkit-scrollbar {
   width: 10px;
 }

 ::-webkit-scrollbar-track {
   background-color: hsl(0, 0%, 95%);
 }

 ::-webkit-scrollbar-thumb {
   background-color: hsl(0, 0%, 80%);
 }

 ::-webkit-scrollbar-thumb:hover {
   background-color: hsl(0, 0%, 70%);
 }

 /*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

 .container {
   padding-inline: 15px;
 }

 .h2,
 .h3 {
   font-family: var(--ff-source-sans-pro);
 }

 .btn {
   background-image: var(--gradient-2);
   background-size: 200%;
   color: var(--white);
   padding: 12px 35px;
   font-size: var(--fs-8);
   font-weight: var(--fw-500);
   border-radius: 0 25px;
   transition: var(--transition-2);
 }

 .btn:is(:hover, :focus) {
   background-position: right;
 }

 .w-100 {
   width: 100%;
 }

 .banner-animation {
   animation: waveAnim 2s linear infinite alternate;
 }

 @keyframes waveAnim {
   0% {
     transform: translate(0, 0) rotate(0);
   }

   100% {
     transform: translate(2px, 2px) rotate(1deg);
   }
 }

 .section {
   padding-block: var(--section-padding);
 }

 .section-title {
   color: var(--st-patricks-blue);
   font-size: var(--fs-3);
/*   margin-block-end: 60px;*/
   max-width: max-content;
   margin-inline: auto;
 }

 .underline {
   position: relative;
 }

 .underline::before {
   content: "";
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   width: 70%;
   height: 6px;
   background-image: var(--gradient-2);
   border-radius: 10px;
 }

 :is(.service-card, .features-card) .title {
   color: var(--st-patricks-blue);
   font-size: var(--fs-4);
   font-weight: var(--fw-700);
 }

 :is(.service-card, .features-card, .blog-card) .text {
   font-size: var(--fs-8);
 }

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

 .service-card .card-icon {
   border-radius: 4px;
   border: 2px solid #EC1B24;
   background-color: #fff !important;
   max-width: max-content !important;
   padding: 10px;
   margin-bottom: 10px;
   box-shadow: -2px -4px 9px #fff, 2px 2px 4px hsla(0, 0%, 0%, .1) !important;
 }

 .service-card .card-icon img {
   width: 50px;
   height: 50px;
 }

 .service-card .card-btn img {
   width: 25px;
   fill: #fff;
 }

 .service-card .card-btn {
   padding: 0 !important;
   line-height: 0;
   width: 40px;
   height: 40px;
   background-color: #EC1B24;
   box-shadow: -2px -4px 9px #fff, 2px 2px 4px hsla(0, 0%, 0%, .1) !important;
 }

 .service-card .card-btn:hover {
   background-color: #000 !important;
   color: #fff;
 }

 .service-card .card-btn:hover svg {
   color: #fff;
 }


 /*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

 .about-banner {
   margin-block-end: 30px;
 }

 .about .section-title {
   text-align: left;
   margin-inline: 0;
 }

 .about .underline::before {
   left: 0;
   transform: translateX(0);
 }

 .about-text {
   font-size: var(--fs-8);
   margin-block-end: 20px;
 }

 .about-btn {
   color: #fff;
 }

 .about-btn:hover {
   color: #EC1B24;
 }

 .text-ul li {
   font-size: var(--fs-8);
 }

 .stats-list {
   display: grid;
   gap: 30px;
 }

 .stats-card {
   text-align: center;
   padding: 15px;
   box-shadow: var(--shadow);
   border-radius: var(--radius-12);
 }

 .stats-title {
   color: var(--st-patricks-blue);
   font-size: var(--fs-2);
   font-weight: var(--fw-700);
 }

 .stats-text {
   font-size: var(--fs-8);
 }



 /*-----------------------------------*\
  #SERVICE
\*-----------------------------------*/

 .service-list {
   display: grid;
   gap: 30px;
 }

 .service-card {
   padding: 30px;
   box-shadow: var(--shadow);
   border-radius: var(--radius-12);
    height: 100%;
 }

 .service-card .card-icon {
   /* background-image: url("https://raw.githubusercontent.com/codewithsadee/desinic/master/assets/images/service-banner-pattern.png"); */
   background-repeat: no-repeat;
   background-size: contain;
   background-color: hsla(335, 87%, 53%, 0.12);
   aspect-ratio: 1 / 1;
   max-width: 165px;
   display: grid;
   place-content: center;
   margin-inline: auto;
   transition: var(--transition-1);
 }

 .service-card:hover .card-icon {
   background-color: var(--winter-sky);
 }

 .service-card .card-icon ion-icon {
   font-size: 5rem;
   color: var(--winter-sky);
   --ionicon-stroke-width: 20px;
   transition: var(--transition-1);
 }

 .service-card:hover .card-icon ion-icon {
   color: var(--white);
 }

 .service-card .title {
   text-align: center;
   margin-block-end: 15px;
 }

 .service-card .text {
   text-align: center;
   margin-block-end: 20px;
 }

 .service-card .card-btn {
   margin-inline: auto;
   padding: 15px;
   border: 1px solid var(--winter-sky);
   border-radius: 50%;
   color: var(--winter-sky);
   transition: var(--transition-1);
 }

 .service-card .card-btn:is(:hover, :focus) {
   color: var(--white);
   background-color: var(--winter-sky);
 }

 /*-----------------------------------*\
  #FEATURE
\*-----------------------------------*/

 .features-list>li:first-child {
   margin-block-end: 30px;
 }

 .features-card {
   display: flex;
   align-items: flex-start;
   gap: 20px;
 }

 .features-card .icon {
   background-image: var(--gradient-1);
   background-size: 200%;
   color: var(--white);
   min-width: max-content;
   max-width: max-content;
   font-size: 36px;
   padding: 22px;
   border-radius: 50%;
 }

 .features-card .icon ion-icon {
   --ionicon-stroke-width: 20px;
 }

 .features-card .title {
   margin-block-end: 10px;
 }

 .features-banner {
   margin-block: 40px;
 }

 .features-banner>img {
   max-width: max-content;
   margin-inline: auto;
 }

 /*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

 .blog {
   padding-block-end: 120px;
 }

 .blog-list {
   display: grid;
   gap: 30px;
 }

 .blog-card {
   padding: 20px;
   box-shadow: var(--shadow);
   border-radius: var(--radius-12);
 }

 .blog-card .banner {
   border-radius: var(--radius-12);
   overflow: hidden;
   margin-block-end: 15px;
 }

 .blog-card .banner img {
   transition: var(--transition-2);
 }

 .blog-card .banner a:is(:hover, :focus) img {
   transform: scale(1.1);
 }

 .blog-card .title {
   color: var(--st-patricks-blue);
   font-size: var(--fs-6);
   line-height: 1.2;
   margin-block-end: 15px;
 }

 .blog-card .title>a {
   color: inherit;
 }

 .blog-card .title>a:is(:hover, :focus) {
   color: var(--razzmatazz);
 }

 .blog-card .text {
   margin-block-end: 15px;
 }

 .blog-card .meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 15px;
   font-size: var(--fs-8);
   color: var(--purple-navy);
   font-weight: var(--fw-500);
   padding-block-end: 10px;
 }

 .blog-card .meta ion-icon {
   color: var(--winter-sky);
   font-size: 22px;
   --ionicon-stroke-width: 35px;
 }

 .publish-date,
 .comment {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .comment {
   color: inherit;
   margin-inline-start: auto;
 }

 .comment data {
   color: #000 !important;
 }

 .blog-card button {
   background-color: transparent !important;
   line-height: 0;
   padding-left: 0;
 }

 .blog-card button svg {
   width: 20px;
   height: auto;
   fill: #000;
 }

 .blog-btn-wrap {
  text-align: center;
  margin-top: 20px;
 }

 /* nensi design */
 /* video-section */
 .video-section {
   background-color: #2A2A2A;
   margin-top: 40px;
   margin-bottom: 20px;
 }

 .video-section .about-image {
   text-align: center !important;
 }

 .video-section .about-image img {
   width: 100%;
   height: 400px;
   object-fit: cover;
 }

 .videoabout-content {
   display: grid;
   grid-template-columns: 9fr 3fr;
 }

 .videoabout-content p {
   font-weight: 400;
   font-size: 16px;
   color: #fff;
   padding: 20px;
 }

 .about-box {
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.15);
   background-color: #2A2A2A;
   max-width: 420px;
   text-align: end;
   padding: 30px 60px;
   margin-left: auto;
   margin-top: -150px;
 }

 .about-box h3 {
   font-size: 45px;
   color: #fff;
 }

 .videoabout-content .about-box .video-btn {
   top: -54px;
   left: -54px;
   width: 108px;
   height: 108px;
   font-size: 45px;
   position: absolute;
   color: #EC1B24;
   background-color: #2A2A2A;
   border-radius: 50% !important;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center !important;
   transition: .5s;
 }

 .videoabout-content .about-box .video-btn:hover {
   color: #fff;
   background-color: #EC1B24;
 }

 .videoabout-content .about-box .video-btn::before {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   content: "";
   display: block;
   position: absolute;
   border-radius: 50%;
   animation: ripple 2s linear infinite;
   border: 2px solid #EC1B24;
 }

 .videoabout-content .about-box .video-btn svg {
   fill: #fff;
   width: 20px;
 }

 @keyframes ripple {
   0% {
     transform: scale(1)
   }

   75% {
     transform: scale(1.75);
     opacity: 1
   }

   100% {
     transform: scale(2);
     opacity: 0
   }
 }

 .consultation-btn {
   background-color: #EC1B24;
   padding: 5px 15px;
   color: #fff;
   margin-top: 15px;
 }

 .consultation-btn:hover {
   color: #EC1B24;
 }

 /* shop-slider */

 .shop-slider h2 {
   font-weight: 700;
   font-size: 45px;
   margin-bottom: 10px;
 }

 .shop-slider p {
   font-weight: 400;
   font-size: 16px;
 }

 .shop-slider .swiper-slide {
   height: fit-content;
   background: #fff;
   border-radius: 10px;
   padding: 10px;
   box-shadow: 0 5px 20px 1px hsla(220, 63%, 33%, 0.1);
   position: relative;
   overflow: hidden;
   transition: .5s;
 }

 .shop-slider .card_list .single_card .single_card_overlay {
   border-radius: 10px;
   transition: .5s;
 }

 .shop-slider .card_list .single_card .single_card_inner {
   width: 100%;
   border-radius: 10px;
 }

 .shop-slider .card_list .single_card .term-title {
   font-size: 20px !important;
   color: #fff !important;
 }

 .shop-slider .swiper-container {
   margin-top: 30px;
   height: auto;
 }

 .shop-slider .swiper-slide:hover {
   box-shadow: none;
 }

 .shop-slider .card_list .single_card .content_box {
   position: absolute;
   bottom: 20px;
   transition: .5s;
 }



 /* support */

 .support-box {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 20px;
 }

 .support-box h3 {
   font-weight: 700;
   font-size: 45px;
 }

 .support-box span {
   font-weight: 400;
   font-size: 16px;
 }

 .support-box .contact-btn {
   background-color: #EC1B24;
   padding: 5px 15px;
   color: #fff;
   margin-top: 15px;
 }

 .support-box .contact-btn:hover {
   color: #EC1B24;
 }

 .support-box ul {
   display: inline;
   margin: 0;
   padding: 0;
 }

 .support-box ul li {
   font-weight: 600;
   font-size: 18px;
   display: flex;
   align-items: center;
   margin: 20px 0;
   box-shadow: -2px -4px 9px #fff, 2px 2px 4px hsla(0, 0%, 0%, .1) !important;
   background-color: #f2f5f6 !important;
   border-radius: 10px;
   padding: 10px 20px;
 }


 .support-box img {
   height: 100%;
   width: 90%;
   object-fit: cover;
   border-radius: 10px;
   margin: 20px;
   box-shadow: 0 5px 10px 0 rgb(0, 0, 0, 0.25);
 }

 /* testimonials */
 .testimonials {
   background: #F0F0F0;
   margin: 0px 0 30px;
   padding-bottom: 80px;
 }

 .testimonials-box {
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: 20px;
 }

 .testimonials-box h3 {
   font-weight: 700;
   font-size: 45px;
 }

 .testimonials-box span {
   font-weight: 400;
   font-size: 16px;
 }

 .testimonials .ti-widget.ti-goog .ti-controls {
   top: unset !important;
   bottom: -20px !important;
 }

 .testimonials .ti-widget.ti-goog .ti-controls .ti-next {
   right: 45%;
 }

 .testimonials .ti-widget.ti-goog .ti-controls .ti-prev {
   left: 45%;
 }

 .testimonials .ti-widget.ti-goog .ti-platform-icon {
   display: none;
 }

 .testimonials .ti-widget.ti-goog .ti-review-item>.ti-inner {
   border-bottom-width: 6px !important;
   border-color: #EC1B24 !important;
 }


 /* faqs */
 .faqs {
   margin-bottom: 30px;
   margin-top: 50px;
 }

 .faqs-box {
   width: 80%;
   margin: 0 auto;
   text-align: center;
 }

 .accordion {
   margin: auto;
   margin-top: 20px;
 }

 .accordion-item {
   background: #fff;
   margin-bottom: 10px;
   border-radius: 5px;
   overflow: hidden;
   border-radius: 20px;
   box-shadow: 0 5px 10px 0 rgb(0, 0, 0, 0.25);
 }

 .accordion-header {
   width: 100%;
   padding: 15px;
   text-align: left;
   color: #000 !important;
   border: none;
   outline: none;
   cursor: pointer;
   font-size: 18px;
   font-weight: 600;
   position: relative;
   background: #fff !important;
 }

 .accordion-header:hover {
   background: #fff !important;
   color: #000 !important;
 }

 .accordion-header::after {
   content: "+";
   position: absolute;
   right: 20px;
   font-size: 20px;
 }

 .accordion-header.active::after {
   content: "-";
 }

 .accordion-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
   padding: 0 15px;
   text-align: left;
 }

 .accordion-body p {
   padding: 15px 0;
   font-size: 16px;
   margin: 0;
 }

 .faqs-box h3 {
   font-weight: 700;
   font-size: 45px;
 }

 .faqs-box span {
   font-weight: 400;
   font-size: 16px;
 }

 /* featured-pro-slider */
 .featured-pro-slider {
   margin-top: 50px;
 }

 .featured-pro-slider h3 {
   font-weight: 700;
   font-size: 45px;
   text-align: center;
 }

 .featured-pro-slider span {
   font-weight: 400;
   font-size: 16px;
   text-align: center;
 }

 .featured-pro-slider .owl-item .item {
   background: #fff;
   border-radius: 10px;
   padding: 10px;
   box-shadow: 0 5px 20px 1px hsla(220, 63%, 33%, 0.1);
   position: relative;
   height: 100%;
 }

 .featured-pro-slider .owl-carousel {
   margin-top: 20px;
 }

 .featured-pro-slider .owl-carousel .owl-item {
   margin-top: 20px;
   margin-bottom: 20px;
 }

 .featured-pro-slider .owl-carousel .owl-item img {
   border-radius: 10px;
 }

 .featured-pro-slider .owl-carousel h3.product-title {
   font-size: 16px;
 }

 .featured-pro-slider .owl-carousel h3.product-title a {
   color: #000;
 }

 .featured-pro-slider .owl-carousel .price {
   display: flex;
   font-size: 14px;
   align-items: center;
   gap: 5px;
   justify-content: center;
 }

 .featured-pro-slider .owl-carousel .price .woocommerce-Price-amount bdi {
   display: flex;
   align-items: center;
 }

 .featured-pro-slider button.button.ajax_add_to_cart {
   margin: auto;
   margin-top: 10px;
   margin-bottom: 10px;
   background: #EC1B24;
   color: #fff;
   padding: 5px 15px;
   border: solid 1px #EC1B24;
 }

 .featured-pro-slider button.button.ajax_add_to_cart:hover {
   background: #fff;
   color: #EC1B24;
 }

 .featured-pro-slider .owl-nav {
   position: absolute;
   width: 100%;
 }

 .featured-pro-slider .owl-carousel .owl-nav button.owl-next,
 .featured-pro-slider .owl-carousel .owl-nav button.owl-prev {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   border: none;
   font-size: 22px;
   cursor: pointer;
   background: #EC1B24;
   display: flex;
   color: #fff !important;
   box-shadow: 0 5px 20px 1px hsla(220, 63%, 33%, 0.1);
   justify-content: center;
   align-items: center;
 }

 .featured-pro-slider .owl-carousel .owl-nav button.owl-next:hover,
 .featured-pro-slider .owl-carousel .owl-nav button.owl-prev:hover {
   background: #000;
 }

 .featured-pro-slider .owl-carousel .owl-nav button.owl-next span,
 .featured-pro-slider .owl-carousel .owl-nav button.owl-prev span {
   font-size: 35px;
 }

 .featured-pro-slider .owl-carousel .owl-nav button.owl-next {
   right: 46%;
   position: absolute;
 }

 .featured-pro-slider .owl-carousel .owl-nav button.owl-prev {
   left: 46%;
   position: absolute;
 }

 /* Informative video */
 .infovideo-slider {
   display: flex;
   overflow: hidden;
 }

 /* LEFT PANEL */
 .infovideo-slider .slider-left {
   width: 35%;
   background: #EC1B24;
   color: #fff;
   padding: 50px;
   position: relative;
 }

 .infovideo-slider .slider-left .quote {
   font-size: 120px;
   line-height: 1;
   opacity: 0.3;
 }

 .infovideo-slider .slider-left h2 {
   font-size: 42px;
   margin-top: 30px;
   text-align: left;
   color: #fff;
 }

 .infovideo-slider .slider-left span {
   font-size: 16px;
   text-align: left;
   color: #fff;
 }

 .infovideo-slider .nav-btns {
   position: absolute;
   bottom: 40px;
   left: 50px;
   display: flex;
   gap: 15px;
 }

 .infovideo-slider .nav-btns button {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: none;
   font-size: 22px;
   cursor: pointer;
   background: #fff;
   color: #000 !important;
 }

 /* RIGHT PANEL */
 .infovideo-slider .slider-right {
   width: 65%;
   overflow: hidden;
   background: #F0F0F0;
   padding: 20px 0;
 }

 .infovideo-slider .slider-track {
   display: flex;
   gap: 30px;
   padding-left: 30px;
   transition: transform 0.5s ease;
 }

 .infovideo-slider .card-video {
   min-width: 380px;
   background: #fff;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
 }

 .infovideo-slider .card-video iframe {
   width: 100%;
   height: 260px;
   object-fit: cover;
   border-radius: 10px 10px 0 0;
 }

 .infovideo-slider .card-body {
   padding: 25px;
 }

 .infovideo-slider .card-body h3 {
   margin-bottom: 10px;
   font-size: 22px;
 }

 .infovideo-slider .card-body p {
   color: #555;
   line-height: 1.5;
 }

 .youtube-btn-row {
   display: flex;
   gap: 10px;
   margin-top: 20px;
 }

 button.youtube-btn {
   color: #fff;
   background: #000;
 }

 button.youtube-btn:hover {
   background: #fff;
   color: #EC1B24;
 }

 .infovideo-slider .sb_youtube[id^=sb_youtube_] .sby_items_wrap {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }

 .infovideo-slider .sb_youtube.sby_col_4[id^=sb_youtube_] .sby_items_wrap .sby_item {
   width: 100%;
   background: #F0F0F0;
 }

 .infovideo-slider .sby_video_thumbnail {
   height: 150px;
   border-radius: 10px;
 }

 .infovideo-slider .sby_load_btn {
   color: #fff;
   background: #000 !important;
   font-size: 18px;
   margin-top: 20px;
 }

 .infovideo-slider .sby_follow_btn a {
   align-items: center;
   display: flex !important;
   color: #fff;
   background: #000 !important;
   font-size: 18px;
   margin-top: 20px;
 }

 /* getaquote */

 .cta-section {
   position: relative;
   padding: 80px 20px;
   background: linear-gradient(120deg, #2d2d2d, #2a2c2d, #000000);
   overflow: hidden;
 }

 /* Floating Background Shapes */
 .cta-bg::before,
 .cta-bg::after {
   content: "";
   position: absolute;
   width: 350px;
   height: 350px;
   border-radius: 50%;
   filter: blur(120px);
 }

 /* Glass Card */
 .cta-card {
   position: relative;
   max-width: 70%;
   margin: auto;
   padding: 50px 50px;
   text-align: center;
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(15px);
   color: #fff;
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }

 /* Badge */
 .cta-badge {
   display: inline-block;
   padding: 8px 18px;
   border-radius: 30px;
   font-size: 14px;
   margin-bottom: 10px;
   background: #EC1B24;
 }

 /* Text */
 .cta-card h2 {
   font-size: 44px;
   margin-bottom: 20px;
   color: #fff;
 }

 .cta-card p {
   font-size: 18px;
   line-height: 1.7;
   opacity: 0.9;
   margin-bottom: 40px;
   color: #fff;
 }

 /* Button */
 .cta-btn {
   background-color: #fff;
   padding: 5px 15px;
   color: #fff !important;
   margin-top: 15px;
   margin-left: auto;
 }

 .cta-btn:hover {
   background-color: #2D2D2D !important;
   color: #EC1B24 !important;
 }


 /* RESPONSIVE */
 @media (max-width: 992px) {
   .support-box {
     grid-template-columns: 1fr;
     row-gap: 20px;
   }

   .support-box img {
     height: auto;
     margin: 0;
   }

   .testimonials-box {
     grid-template-columns: 1fr;
     row-gap: 20px;
   }

   .faqs-box {
     width: 100%;
   }

   .faqs-box .accordion-header {
     white-space: unset;
     display: flex;
     align-items: center;
   }

   .youtube-btn-row {
     margin-bottom: 65px;
   }

   .cta-card {
     max-width: 100%;
   }

   .infovideo-slider .slider-left,
   .infovideo-slider .slider-right {
     width: 50%;
     height: auto;
   }

   .infovideo-slider .slider-left {
     padding: 20px;
   }

   .infovideo-slider .nav-btns {
     position: static;
     margin-top: 30px;
   }

   .infovideo-slider .sb_youtube[id^="sb_youtube_"] .sby_items_wrap {
     grid-template-columns: 1fr 1fr;
   }

   .infovideo-slider .slider-left h2 {
     margin-top: 0px;
   }
 .featured-pro-slider .owl-carousel .owl-nav button.owl-next {
   right: 42%;
 }

 .featured-pro-slider .owl-carousel .owl-nav button.owl-prev {
   left: 42%;
 }

 }

 @media (max-width: 767px) {
   .infovideo-slider {
     flex-direction: column;
   }

   .infovideo-slider .slider-left,
   .infovideo-slider .slider-right {
     width: 100%;
   }

   .videoabout-content {
     display: flex;
     flex-direction: column-reverse;
   }

   .about-box {
     max-width: unset;
     text-align: left;
     padding: 20px;
     margin-left: unset;
     margin-top: unset;
     border: none;
   }

   .about-box h3 br {
     display: none;
   }

   .cta-card h2,
   .infovideo-slider .slider-left h2,
   .faqs-box h3,
   .support-box h3,
   .testimonials-box h3,
   .about-box h3,
   .shop-slider h2,
   .featured-pro-slider h3 {
     font-size: 30px;
   }

   .infovideo-slider .slider-left h2 {
     margin-top: 0;
   }

   .cta-card p {
     margin-bottom: 20px;
   }

   .infovideo-slider .slider-track {
     padding-left: 15px;
   }

   .infovideo-slider .slider-right {
     padding: 30px 0;
   }

   .cta-section {
     padding: 20px;
   }

   .faqs {
     margin-bottom: 0px;
     padding-top: 0;
   }

   .testimonials {
     margin: 0;
   }

   .infovideo-slider .card-video {
     min-width: 350px;
   }

   .infovideo-slider .slider-left {
     padding: 20px;
   }

   .infovideo-slider .sb_youtube[id^="sb_youtube_"] .sby_items_wrap {
     grid-template-columns: 1fr;
   }
   
 .featured-pro-slider .owl-carousel .owl-nav button.owl-next {
   right: 38%;
 }

 .featured-pro-slider .owl-carousel .owl-nav button.owl-prev {
   left: 38%;
 }
 .featured-pro-slider {
    margin-bottom: 100px;
}
#top_head_bar{
  width: 110%;
  left: -15px;
}
 }

 /* nensi design */



 /*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

 /**
 * responsive for larger than 550px screen
 */

 @media (min-width: 550px) {
   /**
   * REUSED STYLE
   */

   .container {
     max-width: 550px;
     margin-inline: auto;
   }

   .section-title {
     --fs-3: 3.6rem;
   }

   /**
   * ABOUT
   */

   .stats-list {
     grid-template-columns: repeat(3, 1fr);
   }

   /**
   * BLOG
   */

   .blog-card {
     display: grid;
     grid-template-columns: 0.75fr 1fr;
     gap: 20px;
     padding: 30px;
   }

   .blog-card .banner {
     margin-block-end: 0;
   }

   .blog-card .banner a {
     height: 100%;
   }
 }

 /**
 * responsive for larger than 768px screen
 */

 @media (min-width: 768px) {
   /**
   * REUSED STYLE
   */

   .container {
     max-width: 720px;
   }

   /**
   * SERVICE
   */

   .service-list {
     grid-template-columns: 1fr 1fr;
   }

   /**
   * FEATURES
   */

   .features-list>li:first-child {
     margin-block-end: 0;
   }

   .features-list {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 25px;
   }

 }

 /**
 * responsive for larger than 992px screen
 */

 @media (min-width: 992px) {
   /**
   * CUSTOM PROPERTY
   */

   :root {
     /**
     * typography
     */

     --fs-1: 5.4rem;
   }

   /**
   * REUSED STYLE
   */

   .container {
     max-width: 950px;
   }

   /**
   * ABOUT
   */

   .about .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
   }

   /**
   * SERVICE
   */

   .service-list {
     grid-template-columns: repeat(4, 1fr);
   }

   /**
   * FEATURES
   */

   .features-list {
     grid-template-columns: 1fr;
   }

   .features .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
   }

   .features .section-title {
     grid-column: 1 / 4;
   }

   .features-banner {
     margin-block: 0;
     display: grid;
     place-items: center;
   }
 }

 /**
 * responsive for larger than 1200px screen
 */

 @media (min-width: 1200px) {
   /**
   * REUSED STYLE
   */

   .container {
     max-width: 1200px;
   }

   .section-title {
     --fs-3: 4.6rem;
   }

   /**
   * BLOG
   */

   .blog-list {
     grid-template-columns: 1fr 1fr;
   }

   .blog-card {
     height: 100%;
   }

   .blog-card .content {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
 }



.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
display:none;
}
.hero-slider .swiper-slide{
  display: block !important;
}




/* ===== Video banner ===== */
.usg-hero-wrapper *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

/* ===== MAIN WRAPPER ===== */
.usg-hero-wrapper{
    position:relative;
    width:100%;
}

/* ===== VIDEO AREA ===== */
.usg-video-container{
    position:relative;
    width:100%;
    height:870px;
    overflow:hidden;
}

.usg-video-container video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.usg-video-container::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.25);
}

/* ===== ANGLED CONTENT PANEL ===== */
.usg-content-panel{
    position:relative;
    margin-top:-200px; /* overlap video */
    background:#ffffff;
    width:1000px;
    padding:50px 100px;
    clip-path:polygon(0 0, 92% 0, 100% 100%, 0% 100%);
    box-shadow:0 15px 50px rgba(0,0,0,0.08);
}

.usg-content-panel h1{
    color:#ec1b24;
    font-size:46px;
    margin-bottom:25px;
    line-height:1.2;
}

.usg-content-panel p{
    font-size:20px;
    color:#676767;
    line-height:1.6;
    max-width:750px;
}

/* ===== VIDEO AREA RESPONSIVE ===== */

@media(max-width:1200px){
    .usg-content-panel{
        width:85%;
        padding:60px 50px;
    }
}

@media(max-width:768px){

    .usg-video-container{
        height:450px;
    }

    .usg-content-panel{
        width:100%;
        margin-top:0;
        clip-path:none;
        padding:50px 25px;
        box-shadow:none;
    }

    .usg-content-panel h1{
        font-size:28px;
    }

    .usg-content-panel p{
        font-size:16px;
    }
}