/* --------------------- */
/* Section 1 sliders*/

.section1 {
  padding-top: 30px !important;
}

/* Main Slider section as relative*/
.hero-slider {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
  transition: all .8s ease;
  /* background: url(../Assets/pngwing.com.png);
  background-size: cover; */

}

/* Swiper container as absolute */
.hero-slider .swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/* Inside absolute - each swiper wrapper  */
.hero-slider .swiper-slide {
  overflow: hidden;
  /* color: #ff0404; */
  /* border: 2px solid rgb(0, 255, 34); */

}

/* Slider Bg Image Section */
.hero-slider .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}

/* Text on slide container */
.hero-style .container {
  /* border: 2px solid red !important; */
  border: none;
}

/* Arrow in slider */
.hero-slider .swiper-button-prev,
.hero-slider:not(:hover) .swiper-button-prev,
.hero-slider .swiper-button-next,
.hero-slider:not(:hover) .swiper-button-next {
  background: transparent;
  width: 45px;
  height: 45px;
  line-height: 42.5px;
  margin-top: 0px;
  text-align: center;
  border: 2px solid #ffffff;
  border-radius: 45px;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease;
}

/* Arrow transition & show on hover */
.hero-slider:hover .swiper-button-prev,
.hero-slider:hover .swiper-button-next {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.hero-slider .swiper-button-prev {
  transform: translateX(50px);
  left: 35px;
}

.hero-slider .swiper-button-prev:before {
  font-family: "Font Awesome 5 Free";
  content: "\f060";
  font-size: 15px;
  color: #ffffff;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-weight: 900;
}

.hero-slider .swiper-button-next {
  right: 35px;
  transform: translateX(-50px);
}

.hero-slider .swiper-button-next:before {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  font-size: 15px;
  color: #ffffff;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-weight: 900;
}


/* Text on Slider container all 3 div*/
.hero-style .slide-title,
.hero-style .slide-text,
.hero-style .slide-btns {
  max-width: 80%;
  /* background-color: yellow; */
}

/* Only h2 text */
.hero-style .slide-title h2 {
  font-size: 7.5rem;
  font-weight: 200;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 3.5rem 0;
  text-transform: capitalize;
  transition: all .4s ease;
}

.hero-style .slide-title h2 span{
  color: black;
  /* border: 1px solid red; */
  /* background-color: white;
  padding: 0 1rem; */
}

/* .hero-style .slide-title h2 span {
  color: rgb(0, 0, 0) !important;
  background: linear-gradient(120deg, rgba(255, 221, 0, 0), rgba(0, 255, 21, 0));
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke : 4px rgb(0, 0, 0);
} */


/* .hero-style .slide-title h2 span
{
  -webkit-text-stroke: 2px rgb(205, 150, 0);
  -webkit-text-fill-color: rgb(205, 150, 0);
  font-weight: 900;
} */

/* .hero-style .slide-title h2 span:after{
  background-color: #000;
  content: ' ';
  min-width: 110%;
  min-height: 85%;
  margin-left: -105%;
  position: absolute;
  z-index: -1;
  top: 10%;

} */



/* para text  */
.hero-style .slide-text p {
  opacity: 1;
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 200;
  color: #ffffff;
  margin: 0 0 2rem 0;
  transition: all .4s ease;
}


/* Buttons */
.cta-slide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}


.cta-slide a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 1.5rem;
  background-color: rgb(255, 255, 255);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
  border-radius: .3rem;

}

.cta-slide a i {
  margin-left: 1rem;
  font-size: 1.5rem;
}

.cta-slide a:first-child {
  margin-right: .5rem !important;
}

/* Slider bg image */
.slide-bg-image-1 {
  background: linear-gradient(180deg, var(--seo2), var(--seo)), url(../Assets/stairway-1136071_1920.jpg);
}

.slide-bg-image-2 {
  background: linear-gradient(180deg, var(--site2), var(--site)), url(../Assets/stairway-1136071_1920.jpg);
}

.slide-bg-image-3 {
  background: linear-gradient(180deg, var(--branding2), var(--branding)), url(../Assets/stairway-1136071_1920.jpg);
}

.slide-bg-image-4 {
  background: linear-gradient(180deg, var(--digital2), var(--digital)), url(../Assets/stairway-1136071_1920.jpg);
}

.slide-bg-image-5 {
  background: linear-gradient(120deg, var(--lead), var(--lead2)), url(../Assets/stairway-1136071_1920.jpg);
}

.slide-bg-image-6 {
  background: linear-gradient(120deg, var(--videos), var(--videos2)), url(../Assets/stairway-1136071_1920.jpg);
}

.slide-bg-image-7 {
  background: linear-gradient(120deg, var(--online), var(--online2)), url(../Assets/stairway-1136071_1920.jpg);
}


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

  .hero-style .slide-title,
  .hero-style .slide-text,
  .hero-style .cta-slide {
    max-width: 90%;
    margin-left: 5%;
    /* background-color: yellow; */
  }

  .hero-style .slide-title h2 {
    font-size: 5.5rem;
    margin: 0 0 3rem 0;
  }

  .hero-style .slide-text p {
    opacity: 1;
    font-size: 1.6rem;

  }

  .cta-slide a {
    font-size: 1.3rem;
  }

  .cta-slide a i {
    font-size: 1rem;
  }
}

/* Mobile Slider Media Query */

@media (max-width: 800px) {

  /* Height on container */
  .hero-slider {
    min-height: 600px;
    border-bottom: 5px solid white;
  }

  .hero-slider .slide-inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10% 2%;
  }

  /* Hide arrow on mobile */
  .hero-slider .swiper-button-prev {
    display: absolute;
    top: 85%;
    left: 65% !important;
    transform: translateX(0px) !important;
    opacity: 1 !important;
  }

  .hero-slider .swiper-button-next {
    display: absolute;
    top: 85%;
    left: 85%;
    transform: translateX(0px) !important;
    opacity: 1 !important;
  }

  .hero-slider .swiper-button-next {
    right: 0px;
    transform: translateX(0px) !important;

  }


  .hero-slider:hover .swiper-button-prev,
  .hero-slider:hover .swiper-button-next {
    transform: translateX(0px);
    opacity: 1 !important;
    visibility: visible;
  }


  .hero-style .slide-title h2 {
    font-size: 3rem;
    font-weight: 200;
    margin: 2rem 0;
  }



  .hero-style .slide-title,
  .hero-style .slide-text,
  .hero-style .cta-slide {
    max-width: 100%;
    margin-left: 0;
    /* background-color: yellow; */
  }

  /* para text  */
  .hero-style .slide-text p {
    opacity: 1;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0;
    color: #ffffff;
    font-weight: 200;
    font-style: italic;
    margin: 0 0 1rem 0;
    transition: all .4s ease;
  }

  .cta-slide {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-slide a {
    font-size: 1.1rem;
    padding: .8rem 1rem;
  }

  .cta-slide a:first-child {
    margin-right: 0rem !important;
    margin-bottom: .3rem;
  }

  .hero-slider .swiper-button-prev,
  .hero-slider:not(:hover) .swiper-button-prev,
  .hero-slider .swiper-button-next,
  .hero-slider:not(:hover) .swiper-button-next {
    opacity: 1;
    visibility: visible;
    transition: all .4s ease;
  }


  .slide-bg-image-1,
  .slide-bg-image-2,
  .slide-bg-image-3,
  .slide-bg-image-4,
  .slide-bg-image-5,
  .slide-bg-image-6,
  .slide-bg-image-7 {
    background-position: 50% 50% !important;
  }

}

/* --------------------- */

/* --------------------- */
/* Section 2 Video */

.section2-video {
  max-width: 100%;
  overflow: hidden;
}

.section2-video iframe {
  min-height: 45rem;
  min-width: 70vw;
  border: 5px solid rgb(0, 0, 0);
}

.ytp-pause-overlay {
  display: none !important;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.cta a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 1.5rem;
  background-color: rgb(0, 0, 0);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
  border-radius: .3rem;
}

.cta a i {
  margin-left: 1rem;
  font-size: 1.5rem;
}

.cta a:first-child {
  margin-right: .5rem !important;
}

.yt-text h2 {
  line-height: 1;
}


@media screen and (max-width:1600px) {
  .section2-video iframe {
    min-height: 30rem;
    min-width: 60vw;
    border: 4px solid rgb(0, 0, 0);
  }
}


@media screen and (max-width: 800px) {
  .section2-video iframe {
    max-width: 100%;
    min-width: 100%;
    max-height: 18rem;
    min-height: 18rem;
    margin: 2% auto;
    border: 1px solid rgb(0, 0, 0);

    /* border: 1px solid gainsboro; */

  }

  .cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta a {
    font-size: 1.1rem;
    padding: .8rem 1rem;
  }

  .cta a:first-child {
    margin-right: 0rem !important;
    margin-bottom: .3rem;
  }


}

/* ---------------------- */
/* YT Sub */
.YT-sub h3 a {
  padding: .5rem 1rem;
  /* background-color: #1aad8a; */
  position: relative;
  max-width: 10rem;
  overflow: hidden;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .3rem;
  margin: .5%;

}

/* .YT-sub h3 a:first-child {
  background: var(--seo2);
  animation: ripple 1s linear 2s infinite !important;

} */


.YT-sub h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

@keyframes ripple {
  0% {
    background: var(--seo2);

  }

  40% {
    background: var(--seo);


  }

  100% {
    background: var(--seo2);


  }

}


@media screen and (max-width: 800px) {
  .YT-sub h3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .YT-sub h3 img {
    max-height: 1.5rem;
    min-height: 1.5rem;
    max-width: 5rem;
    min-width: 5rem;
    padding: auto;
  }
}


/* --------------------- */

/* --------------------- */
/* Section 3 slider*/


/* Main Gallery section */
.gallery {
  width: 100%;
  position: relative;
  min-height: 31.25rem;
  height: 45rem;
}

.gallery-slider {
  width: 100%;
  height: 100%;
  /* border: 5px solid red; */

}

/* Each slider Swiper */
.gallery-slider .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  padding: 10% 5% 5% 55% !important;
}


/* Compare image on center */
.gallery-slider .swiper-slide .compare-img {
  max-height: 8rem;
  max-width: 8%;
  min-width: 8%;
  position: absolute;
  left: 46%;
  right: 46%;
  top: 10%;
  /* border: 5px solid rgb(255, 229, 199); */
  padding: 1rem;
  border-radius: .5rem;
  background-color: #ffffff4c;
  z-index: 1000000 !important;
  transform: scale(1);
}

.gallery-slider .swiper-slide .compare-img-bmw {
  /* border: 5px solid red !important; */
  max-height: 8rem;
  max-width: 6%;
  min-width: 6%;
  left: 47%;
  right: 47%
}


/* Absolute then */
.textonslide-then {
  position: absolute;
  max-width: 50%;
  min-width: 50%;
  left: 0;
  height: 100%;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 10% 3% 5%;
}


.textonslide-then h1 i {
  font-size: 200px;
  position: absolute;
  left: 35%;
  right: 35%;
  top: -30%;
  opacity: .2;
}

/* Swiper B MRF */
.swiper-slide-B .textonslide-then h1 i {
  left: 10%;
  right: 10%;
}

.swiper-slide-B .compare-img {
  transform: scale(2) !important;
  padding: .5rem !important;
  background-color: black !important;
  top: 15% !important;
}

/* Swiper C Amazon */
.swiper-slide-C .textonslide-then h1 i {
  left: 10%;
  right: 10%;
}

.swiper-slide-C .compare-img {
  transform: scale(1.7) !important;
  padding: .5rem !important;
  background-color: rgb(255, 255, 255) !important;
  top: 15% !important;
}

/* Swiper D HCL */
.swiper-slide-D .compare-img {
  transform: scale(1.7) !important;
  padding: .5rem !important;
  background-color: rgba(255, 255, 255, 0.872) !important;
  top: 15% !important;
}

/* Swiper E MS */
.swiper-slide-E .compare-img {
  transform: scale(1.9) !important;
  padding: .4rem !important;
  background-color: rgba(255, 255, 255, 0.872) !important;
  top: 13% !important;
}

/* Swiper F Siemens */
.swiper-slide-F .compare-img {
  transform: scale(1.9) !important;
  padding: .6rem !important;
  background-color: rgba(255, 255, 255, 0.872) !important;
  top: 13% !important;
}

/* Pagination */
.gallery-thumbs {
  width: 17rem;
  padding: 0;
  overflow: hidden;
  position: absolute;
  bottom: 1.5rem;
  right: 0;
}

.gallery .swiper-pagination {
  position: relative;
  bottom: 0.313rem;
  text-align: center;
}

.gallery .swiper-pagination-bullet {
  border-radius: 0;
  width: 1.125rem;
  height: 0.25rem;
  background: #000000;
}

.gallery .swiper-pagination-bullet-active {
  background: #000000;
}

/* Swiper BG Colors */
.swiper-slide-A {
  background-color: #008ac9 !important;
}

.swiper-slide-A .textonslide-then {
  background-color: rgb(0, 0, 0);
}

.swiper-slide-B {
  background-color: #EF4023;
}

.swiper-slide-B .textonslide-then {
  background-color: rgb(255, 255, 255);
}

.swiper-slide-C {
  background-color: #FF9900;
}

.swiper-slide-C .textonslide-then {
  background-color: rgb(0, 0, 0);
}

.swiper-slide-D {
  background-color: #0066AE;
}

.swiper-slide-D .textonslide-then {
  background-color: rgb(255, 255, 255);
}

.swiper-slide-E {
  background-color: #7cbb00;
}

.swiper-slide-E .textonslide-then {
  background-color: #ffbb00;
}

.swiper-slide-F {
  background-color: #009999;
}

.swiper-slide-F .textonslide-then {
  background-color: rgb(255, 255, 255);
}


/* Text Reveal on slider */




/* Compare amazon mobile */

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

  /* Main Gallery section */
  .gallery {
    width: 100%;
    position: relative;
    min-height: 40rem;
    height: 40rem;
  }

  /* Compare image on center */
  .gallery-slider .swiper-slide .compare-img {
    /* max-height: 4rem; */
    max-width: 30%;
    min-width: 30%;
    position: absolute;
    left: 35%;
    right: 35%;
    top: 3%;
    padding: 1rem;
    border-radius: .5rem;
    z-index: 1000 !important;
  }

  .textonslide-then h1 i {
    font-size: 160px;
    position: absolute;
    left: 20%;
    top: -20%;
    opacity: .2;
  }

  .gallery-slider .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    padding: 10% 5% 5% 55% !important;
  }


  /* Absolute then */
  .textonslide-then {
    position: absolute;
    max-width: 50%;
    min-width: 50%;
    left: 0;
    height: 100%;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 10% 3% 5%;
  }


  /* Mobile i tag specific div */

  .swiper-slide-A .compare-img {
    transform: scale(.75) !important;
  }

  /* Swipe B MRF */
  .swiper-slide-B .textonslide-then h1 i {
    left: 5%;
    right: 5%;
    top: -30%;
    font-size: 120px !important;

  }

  .swiper-slide-B .compare-img {
    transform: scale(1.3) !important;
    padding: .5rem !important;
    background-color: black !important;
    top: 7% !important;

  }

  /* Swiper C Amazon */
  .swiper-slide-C .textonslide-then h1 i {
    left: 10%;
    right: 10%;
    top: -30%;
    font-size: 120px !important;
  }

  .swiper-slide-C .compare-img {
    transform: scale(1.2) !important;
    padding: .5rem !important;
    background-color: rgb(255, 255, 255) !important;
    top: 7% !important;
  }

  /* Swiper D HCL */
  .swiper-slide-D .compare-img {
    transform: scale(1.2) !important;
    padding: .5rem !important;
    background-color: rgba(255, 255, 255, 0.872) !important;
    top: 7% !important;
  }

  /* Swiper E MS */
  .swiper-slide-E .compare-img {
    transform: scale(1.4) !important;
    padding: .6rem !important;
    background-color: rgba(255, 255, 255, 0.872) !important;
    top: 8% !important;
  }

}



/* --------------------- */

/* --------------------- */
/* Section 4*/

.section4-service {
  /* background-color: rgb(142, 206, 46); */
  max-width: 100%;
  overflow: hidden;
  min-width: 100%;
  color: white;
}

.section4-service h3 {
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
}

.s4-1-a {
  background: linear-gradient(120deg, rgb(0, 0, 0), rgba(0, 0, 0, 0.4)),
    url(../Assets/Handshake.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  -webkit-transition: background 1s ease-out;
  -moz-transition: background 1s ease-out;
  -o-transition: background 1s ease-out;
  transition: background 1s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s4-1-a h3 {
  font-size: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
  min-width: 95%;
}

.s4-1-a h3 i {
  font-size: 4rem;
  /* color: var(--lead2); */
  margin: 0 0 0 3%;
}

@media screen and (max-width: 1600px) {
  .s4-1-a h3 {
    font-size: 3.2rem;
  }
}

.s4-1 {
  min-height: 20rem;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid rgb(255, 255, 255);
  overflow: hidden;
}

.s4-1>.read-color {
  position: absolute;
  left: -100%;
  bottom: 1.5rem;
  font-size: 1rem;
  transition: left 0.5s ease-in;
  background-color: white;
  color: black;
  padding: .5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .5rem;
  font-weight: 900 !important;
}

.read-color i {
  margin-left: .5rem;
}

.s4-1-a>i {
  opacity: 0;
}

.s4-1:hover>.read-color {
  left: 5%;
  transition: left 0.5s ease-in;
}

.s4-1-n {
  border: none !important;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-start;
  background-color: #d4f3f3;
}

.s4-1-n img {
  transform: scale(0.8);
  margin-left: -15%;
  margin-bottom: -15%;
}

.s4-1-b {
  background: linear-gradient(160deg, var(--seo2), var(--seo)),
    url(../Assets/googleseo.webp);
  transition: background .4s ease-in !important;
  background-position: 0% 0%;
}

.s4-1-b:hover {
  background: linear-gradient(160deg, var(--seo2), #bd80de46),
    url(../Assets/googleseo.webp);
  background-size: cover;
  background-position: 50% 70%;
  transition: background 1s ease-in !important;
  background-repeat: no-repeat;
}

.s4-1-c {
  background: linear-gradient(135deg, var(--site2), var(--site)),
    url(../Assets/2site2.jpg);
  background-position: 0% 0%;
  background-size: cover;
  transition: background .4s ease-in !important;

}

.s4-1-c:hover {
  background: linear-gradient(135deg, var(--site2), #6fae185c),
    url(../Assets/2site2.jpg);
  background-size: cover;
  background-position: 50% 70%;
  transition: background 1s ease-in !important;
  background-repeat: no-repeat;
}

.s4-1-d {
  background: linear-gradient(135deg, var(--branding2), var(--branding)),
    url(https://99designs-blog.imgix.net/blog/wp-content/uploads/2020/04/PROCESS_OF_BRANDING_jpg_ETRsFZG9.jpg?auto=format&q=60&w=1280&h=750&fit=crop&crop=faces);
  background-position: 0% 0%;
  background-size: cover;
  transition: background .4s ease-in !important;
}

.s4-1-d:hover {
  background: linear-gradient(135deg, var(--branding2), rgba(234, 76, 163, 0.422)),
    url(https://99designs-blog.imgix.net/blog/wp-content/uploads/2020/04/PROCESS_OF_BRANDING_jpg_ETRsFZG9.jpg?auto=format&q=60&w=1280&h=750&fit=crop&crop=faces);
  background-size: cover;
  background-position: 50% 0%;
  transition: background 1s ease-in !important;
  background-repeat: no-repeat;
}

.s4-1-e {
  background: linear-gradient(135deg, var(--digital2), var(--digital)),
    url(../Assets/DME.jpg);
  background-position: 0% 0%;
  background-size: cover;
  transition: background .4s ease-in !important;

}

.s4-1-e:hover {
  background: linear-gradient(120deg, var(--digital2), #df93666b),
    url(../Assets/DME.jpg);
  background-size: cover;
  background-position: 50% 70%;
  transition: background 1s ease-in !important;
  background-repeat: no-repeat;
}

.s4-1-f {
  background: linear-gradient(135deg, var(--lead2), var(--lead)),
    url(../Assets/LeadG.jpeg);
  background-position: 0% 0%;
  background-size: cover;
  transition: background .4s ease-in !important;

}

.s4-1-f:hover {
  background: linear-gradient(120deg, var(--lead2), #6aca446b),
    url(../Assets/LeadG.jpeg);
  background-size: cover;
  background-position: 50% 70%;
  transition: background 1s ease-in !important;
  background-repeat: no-repeat;
}

.s4-1-g {
  background: linear-gradient(135deg, var(--videos2), var(--videos)),
    url(../Assets/video.webp);
  background-position: 0% 0%;
  background-size: cover;
  transition: background .4s ease-in !important;

}

.s4-1-g:hover {
  background: linear-gradient(120deg, var(--videos2), #6a6eb86b),
    url(../Assets/video.webp);
  background-size: cover;
  background-size: cover;
  background-position: 50% 70%;
  transition: background 1s ease-in !important;
  background-repeat: no-repeat;
}

.s4-1-h {
  background: linear-gradient(135deg, var(--online2), var(--online)),
    url(../Assets/SMM.jpg);
  background-position: 0% 0%;
  background-size: cover;
  transition: background .4s ease-in !important;

}

.s4-1-h:hover {
  background: linear-gradient(120deg, var(--online2), rgba(209, 0, 150, 0.5)),
    url(../Assets/SMM.jpg);
  background-size: cover;
  background-position: 50% 70%;
  transition: background 1s ease-in !important;
  background-repeat: no-repeat;
}


@media screen and (max-width: 800px) {
  .s4-1-n {
    display: none;
  }

  .s4-1 {
    border: 3px solid rgb(255, 255, 255);
    padding: 1rem;
  }

  .s4-1 {
    min-height: 16rem;
  }

  .s4-1-a h3 {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    min-width: 100%;
  }

  .s4-1-a h3 i {
    font-size: 3rem;
    margin: 0 0 2% 5%;
  }

  .s4-1>.read-color {
    left: 46%;
    bottom: 8%;
    font-weight: 900;
  }

  .s4-1:hover>.read-color {
    left: 55%;
    bottom: 5%;
    transition: left 0.5s ease-in;
    font-weight: 900;

  }

  .s4-1-b {
    background: linear-gradient(160deg, var(--seo2), #bd80de46),
      url(../Assets/googleseo.webp);
    background-size: cover;
    background-position: 50% 70%;
    transition: background 1s ease-in !important;
    background-repeat: no-repeat;
  }

  .s4-1-c {
    background: linear-gradient(135deg, var(--site2), #6fae185c),
      url(../Assets/2site2.jpg);
    background-size: cover;
    background-position: 50% 70%;
    transition: background 1s ease-in !important;
    background-repeat: no-repeat;
  }

  .s4-1-d {
    background: linear-gradient(135deg, var(--branding2), rgba(234, 76, 163, 0.422)),
      url(https://99designs-blog.imgix.net/blog/wp-content/uploads/2020/04/PROCESS_OF_BRANDING_jpg_ETRsFZG9.jpg?auto=format&q=60&w=1280&h=750&fit=crop&crop=faces);
    background-size: cover;
    background-position: 50% 0%;
    transition: background 1s ease-in !important;
    background-repeat: no-repeat;
  }

  .s4-1-e {
    background: linear-gradient(120deg, var(--digital2), #df93666b),
      url(../Assets/DME.jpg);
    background-size: cover;
    background-position: 50% 70%;
    transition: background 1s ease-in !important;
    background-repeat: no-repeat;
  }


  .s4-1-f {
    background: linear-gradient(120deg, var(--lead2), #6aca446b),
      url(../Assets/LeadG.jpeg);
    background-size: cover;
    background-position: 50% 70%;
    transition: background 1s ease-in !important;
    background-repeat: no-repeat;
  }

  .s4-1-g {
    background: linear-gradient(120deg, var(--videos2), #6a6eb86b),
      url(../Assets/video.webp);
    background-size: cover;
    background-size: cover;
    background-position: 50% 70%;
    transition: background 1s ease-in !important;
    background-repeat: no-repeat;
  }

  .s4-1-h {
    background: linear-gradient(120deg, var(--online2), rgba(209, 0, 150, 0.5)),
      url(../Assets/SMM.jpg);
    background-size: cover;
    background-position: 50% 70%;
    transition: background 1s ease-in !important;
    background-repeat: no-repeat;
  }
}

/* --------------------- */
/* Footer */

.arrow-footer li:hover a::after,
.arrow-footer li a:active,
.arrow-footer li a:focus {
  content: ' ⇀';
}

.arrow-footer li {
  transition: letter-spacing .3s ease-in;
  padding-left: 2.5%;
  line-height: 1;
}

.arrow-footer li:hover {
  letter-spacing: 1px;
  transition: letter-spacing .5s ease-in;
}


/* ---------------------- */
/* Middle Marquee */

.marquee {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 2px solid #000; */
  max-width: 100%;
  min-height: 6rem;
  overflow: hidden;
  background: rgb(0, 0, 0);
  color: white;
  white-space: nowrap;
}

.marquee--inner {
  display: block;
  width: 300%;
  position: absolute;
  animation: marquee 60s linear infinite;
  -moz-animation: marquee 60s linear infinite;
  -webkit-animation: marquee 60s linear infinite;

  &:hover {
    /* animation-play-state: paused; */
    animation: marquee 60s linear infinite;
    -moz-animation: marquee 60s linear infinite;
    -webkit-animation: marquee 60s linear infinite;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
    -webkit-text-fill-color: transparent;
  }
}

.marquee:hover {
  background: linear-gradient(135deg, rgb(239, 183, 17), rgb(255, 224, 47)) !important;
}

.marquee--inner span {
  float: left;
  width: 300%;
  font-size: 6vh;
  overflow: hidden;
  line-height: 1;
}

/* .marquee--inner span i {
  font-size: 8vh;
} */
@keyframes marquee {
  0% {
    left: 10%;
  }

  100% {
    left: -300%;
  }
}

@-webkit-keyframes marquee {
  0% {
    left: 10%;
  }

  100% {
    left: -300%;
  }
}

@-moz-keyframes marquee {
  0% {
    left: 10%;
  }

  100% {
    left: -300%;
  }
}

@media screen and (max-width: 800px) {
  .marquee--inner span {
    float: left;
    width: 450%;
    font-size: 4vh;
    overflow: hidden;
    line-height: 1;

  }

  .marquee--inner {
    display: block;
    width: 450%;
  }

  .marquee {
    min-height: 4rem;
    overflow: hidden;
    margin: 0;
  }

  /* .marquee--inner span i {
    font-size: 2.5vh;
  } */

  @keyframes marquee {
    0% {
      left: 10%;
    }

    100% {
      left: -450%;
    }
  }

  @-webkit-keyframes marquee {
    0% {
      left: 10%;
    }

    100% {
      left: -450%;
    }
  }

  @-moz-keyframes marquee {
    0% {
      left: 10%;
    }

    100% {
      left: -450%;
    }
  }
}

/* ------------------------ */
/* YT On Click */

.overlay-video {
  display: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  transition: opacity 600ms ease-in;
  transition: opacity 0.6s;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--seo2);
  z-index: 999999;
}

.o1 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
  transition: opacity 600ms ease-out;
  transition: opacity 0.6s;
}

.videoWrapperExt {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 982px;
  padding: 0 20px;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.close {
  background-image: url(../Assets/x-mark-128.png);
  position: absolute;
  top: -35px;
  right: 0px;
  cursor: pointer;
  z-index: 9999;
  height: 40px;
  width: 40px;
  background-size: 40px;
  transform: scale(.5);
}

@media (max-width: 767px) and (orientation: landscape) {
  .close {
    display: none;
  }
}

/* --------------------- */
/* section 5 milestone */

.section5-milestone {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  min-height: 20rem;
}

#counter {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  /* border: 2px solid red; */
  margin-top: .4rem;
}

.counter-with-value {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  margin: .3rem;
  font-size: 1.5rem;
  min-width: 47%;
  padding: .5rem 1rem;
  border-radius: .5rem;
  background-color: rgb(0, 0, 0);
  color: #ffffff;
}

.counter-value::after {
  content: ' +';
  font-size: 1.5rem;
}

.counter-value {
  font-size: 75px;
  font-weight: 900;
}

.counter-with-value h2 {
  line-height: 1.3;
  font-weight: 200;
}

.celebrate {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.367), rgba(40, 59, 187, 0.574)), url(../Assets/Celebrate.jpg);
  background-size: cover;
  min-height: 23rem;
  min-width: 50%;
  border-radius: .5rem;
  margin: 0.5% 1%;
}

.circle {
  display: flex;
}

@media screen and (max-width:800px) {
  #counter {
    max-width: 100%;
    /* background-color: #1aad8a; */
  }

  .counter-with-value {
    max-width: 48%;
    min-width: 48%;
    margin: 1%;
    /* border: 1px solid white; */

  }

  .counter-value::after {
    content: ' +';
    font-size: 1rem;
  }

  .celebrate {
    margin-top: 1rem;
  }

  .circle {
    display: block;
  }


  .counter-value {
    font-size: 40px;
  }
}


/* ---------------------- */
/* Logo Slider */

.slider {
  --slider-inner-width: 4000px;
  --slider-speed: 40s;
}

@keyframes scroll {
  0% {
    transform: translateX(-5%);
  }

  100% {
    transform: translateX(calc((0px - var(--slider-inner-width)) - 5%));
  }
}

@-webkit-keyframes scroll {
  0% {
    transform: translateX(-5%);
  }

  100% {
    transform: translateX(calc((0px - var(--slider-inner-width)) - 5%));
  }
}

@-moz-keyframes scroll {
  0% {
    transform: translateX(-5%);
  }

  100% {
    transform: translateX(calc((0px - var(--slider-inner-width)) - 5%));
  }
}

.slider {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  animation: scroll linear infinite var(--slider-speed);
  -webkit-animation: scroll linear infinite var(--slider-speed);
  -moz-animation: scroll linear infinite var(--slider-speed);
  width: calc(2 * var(--slider-inner-width));
  transition: animation-play-state ease 0.3s;
  /* animation-play-state: paused; */

}

.slider:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
}

.flex-container {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0rem !important;
  border-bottom: 3px solid white;
  background-color: rgb(0, 0, 0);
}

.slider-container {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 20px;
}

.slider-container .slider {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
}

.slider-container .slider__slide {
  height: 80px;
  max-width: 250px;
  min-width: 220px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 .1rem;
  padding: 0;
  background-color: #000000;
  /* background: var(--branding2); */
  border: 1px solid white;
  /* background-color: #000; */
  border-radius: .1rem;
}



.slider-container .slider__slide:hover {
  /* background: rgba(255, 213, 0, 0.8); */
  cursor: pointer;
}

.slider-container .slider__slide .slide__content {
  color: white;
  font-size: 80px;
}

@media screen and (max-width:800px) {
  .slider-container .slider__slide {
    transform: scale(1);
  }

  .slider {
    --slider-inner-width: 4000px;
    --slider-speed: 35s;
  }

  .slider-container .slider__slide img{
    transform: scale(.8);
  }

  .slider-container {
    height: 100px;
  }
}



/* ---------------------- */
/* Testimonials Slider */

.section-testmonials {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
  /* background-color: rgb(192, 42, 42); */
  min-height: 22rem;
  margin-top: 2rem;

}


/* .swiper-testmonials .swiper-wrapper{
  max-width: 100%;
  overflow: hidden;
  background-color: #1aad8a;
} */


.column-testmonials {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  width: 15%;
  height: 15rem;
  /* background-color: red; */
}


.navigation-testmonials {
  display: flex;
  gap: 15px;
}


.swiper-testmonials {
  width: 85%;
  padding: 0 2%;
  overflow: hidden;
  position: relative;
  border-right: 5px solid white;

}

.swiper-testmonials .swiper-slide {
  border-radius: .5rem;
  background-color: white;
  display: flex;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin: 0 1%;
  border: 1px solid black;
  /* transform: scale(0.8) !important; */
  /* filter: blur(1px) grayscale(0.5); */
  transition: 0.2s;
}

.swiper-testmonials .swiper-slide * {
  margin: 0;
}

/* .swiper-testmonials .swiper-slide-active {
  filter: blur(0px) !important;
  transform: scale(1) !important;
} */

.card-slide {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.head-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.header-slide {
  display: flex;
  align-items: center;
  gap: 20px
}

.head-slide img {
  border-radius: 50%;
  object-fit: cover;
}

.title-slide h4 {
  color: #000000;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 1rem !important;
  font-weight: 800;
}

.title-slide h6 {
  color: #000000;
  font-size: 1.2rem;
}

.text-slide {
  border-top: 2px solid rgb(0, 0, 0);
  padding-top: 1rem;
  font-size: 1rem;
  font-weight: 200;
}

.swiper-button-testmonials-next,
.swiper-button-testmonials-prev {
  cursor: pointer;
}


@media (max-width: 768px) {
  .section-testmonials {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-top: 1.5rem;
  }

  .swiper-testmonials {
    width: 100%;
    padding: 0%;
    border-right: 0px solid white;

  }

  .column-testmonials {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding-right: 0%;
    height: 5rem;
    transform: scale(.85);
    /* background-color: red; */
  }

  .title-slide h4 {
    font-size: 2rem;
  }

  .title-slide h6 {
    color: #000000;
    font-size: 1.1rem;
  }

  .swiper-testmonials .swiper-slide {
    padding: 1.6rem;
    margin: 0 2.5%;
    max-width: 95%;
  }

  .card-slide {
    gap: 15px;
  }
}


/* --------------------------- */
/* FAQ */


/* Main FAQ Section */

.container {
  width: 100%;
  margin: 3% auto 5% auto;
}


/* Main Accordian Section */
.Accordions {
  display: block;
  max-width: 1000px;
  margin: auto;
}

/* Each FAQ Question main */
.Accordion_item {
  width: 100%;
  height: auto;
  margin: 10px 0;
}


/* FAQ QN */
.Accordion_item .title_tab {
  width: 100%;
  background-color: #d0d8ea;
  color: #000000;
  padding: .7rem 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease-in;
  border-radius: 4px;
}


.Accordion_item .title_tab .title {
  font-size: 1.5rem;
  letter-spacing: 0px;
  font-weight: 900;
  line-height: 1.3;
  padding-right: 10%;
  position: relative;
}

/* Accordian ICons */

.Accordion_item .title_tab .title .icon {
  position: absolute;
  right: 1%;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  background-color: transparent;
  transform: rotate(-90deg);
  transition: transform 0.3s ease-in;
}

.Accordion_item .title_tab .title .icon:before,
.Accordion_item .title_tab .title .icon:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: #000000 !important;
}

.Accordion_item .title_tab .title .icon:before {
  top: 0;
  left: 2px;
  transform: rotate(-45deg);
}

.Accordion_item .title_tab .title .icon:after {
  top: 0;
  right: 2px;
  transform: rotate(45deg);
}

.inner_content {
  width: 100%;
  height: auto;
  display: none;
  overflow: hidden;
}

.inner_content p {
  width: 98%;
  margin: auto;
  padding: 1rem 2rem;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 1px;
  opacity: 0;
  background-color: white;
  transform: translate3d(0px, 60px, 0px);
  transition: transform 0.6s cubic-bezier(0, 0.99, 0.44, 1.01), opacity 0.8s 0.1s cubic-bezier(0, 0.99, 0.44, 1.01);
}

/* ================================= */
.Accordion_item .title_tab.active,
.Accordion_item .title_tab:hover,
.Accordion_item .title_tab:focus {
  background-color: #000000;
  color: white;
  border: 1px solid white;
  transition: background-color 0.3s ease-in;
}


.Accordion_item .title .icon:before,
.Accordion_item .title .icon:after,
.Accordion_item .title_tab.active .title .icon:before,
.Accordion_item .title_tab.active .title .icon:after,
.Accordion_item .title_tab.hover .title .icon:before,
.Accordion_item .title_tab.hover .title .icon:after,
.Accordion_item .title_tab.focus .title .icon:before,
.Accordion_item .title_tab.focus .title .icon:after {
  transition: transform 0.3s ease-in;
  /* color: rgb(255, 253, 253) !important; */
  transform: rotate(0deg);
  background-color: rgb(255, 255, 255) !important;
}

.Accordion_item .inner_content p.show {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
  background-color: rgb(255, 255, 255);
  transition: opacity 0.8s cubic-bezier(0, 0.99, 0.44, 1.01), transform 0.6s 0.1s cubic-bezier(0, 0.99, 0.44, 1.01);
}


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

  .container {
    max-width: 96%;
    margin: 3% auto 5% auto;
  }

  .inner_content p {
    width: 100%;
    margin: auto;
    padding: 1rem 1rem;
  }

  .Accordion_item .title_tab {
    border-radius: 0;
  }

}