@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --primary-color:#161313;
    --secondry-color:#1d1c1c;
    --orange:#ff7503;
    --white:#fff;
    --box-shadow:0px 0px 40px #00000080;
    --para-color:#C4C4C4;
    --font-family: "Kanit", sans-serif;
    --linear-gradient-one:rgb(227, 77, 0);
    --linear-gradient-two:rgb(242, 77, 43);
    --header-height: 3.5rem;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}
body{
    overflow-x: hidden;
}
html{
    overflow-x: hidden;
}
h1,h2,h3,h4{
    font-weight: 700;
    font-family: var(--font-family);
}
a{
    text-decoration: none !important;
}
ul{
    padding-left: 0 !important;
}
li{
    list-style: none;
}
p{
    color: var(--para-color);
}
.pt-100{
    padding-top: 100px;
}
.pt-10{
    padding-top: 10px;
}
.pt-20{
    padding-top: 20px;
}
.pt-30{
    padding-top: 30px;
}
.pt-40{
    padding-top: 40px;
}
.pt-50{
    padding-top: 50px;
}
.pt-60{
    padding-top: 60px;
}
.pt-70{
    padding-top:70px;
}
.pb-100{
    padding-bottom: 100px;
}
.pb-10{
    padding-bottom: 10px;
}
.pb-80{
    padding-bottom: 80px;
}
.pb-10{
    padding-bottom: 10px;
}
.pb-20{
    padding-bottom: 20px;
}
.pb-30{
    padding-bottom: 30px;
}
.pb-40{
    padding-bottom: 40px;
}
.pb-50{
    padding-bottom:50px;
}
.pb-60{
    padding-bottom: 60px;
}
.mb-5 {
    margin-bottom: 5px !important;
}
.mb-7 {
    margin-bottom: 7px;
}
.mb-26 {
    margin-bottom: 26px;
}
.mb-38 {
    margin-bottom: 38px;
}
.mt-110{
  margin-top: 110px;
}
.mt-70{
  margin-top: 70px;
}
.mt-30{
  margin-top: 30px;
}
.dark{
  background: var(--primary-color);
}
  /*=============== HEADER ===============*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--black-color);
  box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
  z-index: var(--z-fixed);
}

/*=============== NAV ===============*/
.nav1 {
  height: var(--header-height);
  position: relative;
  z-index: 2;
}

.nav__logo, 
.nav__burger, 
.nav__close {
  color: var(--white);
}

.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  column-gap: .25rem;
  font-weight: var(--font-semi-bold);
  /* Color highlighting when pressed on mobile devices */
  /*-webkit-tap-highlight-color: transparent;*/
}

.nav__logo i {
  font-weight: initial;
  font-size: 1.25rem;
}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.nav__burger, 
.nav__close {
  position: absolute;
  width: max-content;
  height: max-content;
  inset: 0;
  margin: auto;
  font-size: 30px;
  cursor: pointer;
  transition: opacity .1s, transform .4s;
}

.nav__close {
  opacity: 0;
}

/* Navigation for mobile devices */
@media screen and (max-width: 1118px) {
  .nav__menu {
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top .4s, opacity .3s;
  }
  .nav__menu::-webkit-scrollbar {
    width: 0;
  }
  .nav__list {
    background-color: var(--secondry-color) !important;
    padding-top: 1rem;
  }
}


.nav__link {
  color: var(--white) !important;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color .3s;
}
.nav__link a:hover{
  color: var(--orange);
}
.nav__link a{
  color: var(--white);
}

.nav__link:hover {
  background-color: var(--orange);
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 3.5rem;
  pointer-events: initial;
}

/* Show icon */
.show-icon .nav__burger {
  opacity: 0;
  transform: rotate(90deg);
}
.show-icon .nav__close {
  opacity: 1;
  transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
  cursor: pointer;
}

.dropdown__arrow {
  font-size: 1.25rem;
  font-weight: initial;
  transition: transform .4s;
}

.dropdown__link, 
.dropdown__sublink {
  padding: 1.25rem 1.25rem 1.25rem 2.5rem;
  color: var(--white) !important;
  background-color: var(--secondry-color) !important;
  display: flex;
  align-items: center;
  column-gap: .5rem;
  transition: background-color .3s;
  width: 318px;
}

.dropdown__link i, 
.dropdown__sublink i {
  font-size: 1.25rem;
  font-weight: initial;
}

.dropdown__link:hover, 
.dropdown__sublink:hover {
  background-color: var(--white);
  color: var(--orange) !important;
}

.dropdown__menu, 
.dropdown__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
}

/* Show dropdown menu & submenu */
.dropdown__item:hover .dropdown__menu, 
.dropdown__subitem:hover > .dropdown__submenu {
  max-height: 1000px;
  transition: max-height .4s ease-in;
}

/* Rotate dropdown icon */
.dropdown__item:hover .dropdown__arrow {
  transform: rotate(180deg);
}

/*=============== DROPDOWN SUBMENU ===============*/
.dropdown__add {
  margin-left: auto;
}

.dropdown__sublink {
  background-color: var(--black-color-lighten);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .container {
    margin-inline: 1rem;
  }

  .nav__link {
    padding-inline: 1rem;
  }
}

/* For large devices */
@media screen and (min-width: 1118px) {
.container {
  margin-inline: auto;
  }

  .nav1 {
    height: calc(var(--header-height) + 2rem);
    display: flex;
    justify-content: space-between;
  }
  .nav__toggle {
    display: none;
  }
  .nav__list {
    height: 100%;
    display: flex;
    column-gap:25px;
  }
  .nav__link {
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: .25rem;
  }
  .nav__link:hover {
    background-color: transparent;
    color: var(--orange) !important;
  }

  .dropdown__item, 
  .dropdown__subitem {
    position: relative;
  }

  .dropdown__menu, 
  .dropdown__submenu {
    max-height: initial;
    overflow: initial;
    position: absolute;
    left: 0;
    /* top: 10px; */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, top .3s;
  }

  .dropdown__link, 
  .dropdown__sublink {
    padding-inline: 1rem 3.5rem;
  }

  .dropdown__subitem .dropdown__link {
    padding-inline: 1rem;
  }

  .dropdown__submenu {
    position: absolute;
    left: 100%;
    top: .5rem;
  }

  /* Show dropdown menu */
  .dropdown__item:hover .dropdown__menu {
    opacity: 1;
    /* top: 5.5rem; */
    pointer-events: initial;
    transition: top .3s;
  }

  /* Show dropdown submenu */
  .dropdown__subitem:hover > .dropdown__submenu {
    opacity: 1;
    top: 0;
    pointer-events: initial;
    transition: top .3s;
  }
}
/* ""  */
.navbar-nav .nav-link {
  color: #fff;
}
.dropend .dropdown-toggle {
  color: salmon;
  margin-left: 1em;
}
.dropdown-item:hover {
  background-color: lightsalmon;
  color: #fff;
}
.dropdown .dropdown-menu {
  display: none;
}
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
}
@media screen and (min-width: 769px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }
  .dropend .dropdown-toggle {
    margin-left: 0.5em;
  }
}
/* "" */
/* ==========================================
header section start
============================================== */
.nav-bg{
    background: var(--secondry-color);
}
.navbar-nav .nav-item .nav-link{
    color: var(--white);
}
.search-icons i{
    color: var(--white);
}
/* ==============================================
banner section start 
=================================================*/
.banner-bg{
  background: var(--primary-color);
  margin-top: -90px;
  position: relative;
  z-index: 1;
}
.banner-sub-text{
  padding: 9px 10px;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--secondry-color);
  max-width: 290px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  border-radius: 5px;
}
.banner-text h1{
  font-size: 145px;
  color: var(--white);
}
@media (max-width: 768px) {
    .banner-text h1{
      font-size: 60px;
}
}
.banner-text img{
  width: 100px;
}
.banner-text span{
  display: flex;
  align-items: center;
}
.banner-text p{
  padding-top: 10px;
}
.banner-btn{
  background:var(--orange);
  padding: 10px 30px;
  border-radius: 5px;
  color: var(--white);
  border: none;
  margin-top: 20px;
}
.banner-logo-img img{
   width: 100%;
  /* animation: flash 1s linear infinite; */
}

@keyframes flash {
  0% {
  opacity: 1;
  }
  
  50% {
  opacity: 0;
  }
    
    
  100% {
  opacity: 1;
  }
}
/*home about section  */
.home-about-bg{
  position: relative;
  background: var(--secondry-color);
}
.home-about-img-main{
  position: relative;
}
.home-about-img img{
  width: 100%;
  border-radius: 10px;
  height: 800px;
  object-fit: cover;
}
.home-about-counter{
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF00 0%, #000000D1 100%);
  border-radius: 10px;
  padding: 20px 30px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
}
.home-about-number h5{
  font-size: 40px;
  font-weight: 700;
  color: var(--white);
}
.home-about-number span{
    color: var(--orange);
} 
.home-about-number p{
    font-size: 14px;
}
.home-about-content h2{
    font-weight: 700;
    color: var(--white);
    padding-bottom: 10px;
    padding-top: 10px;
}
.home-about-sub-text{
    background: var(--primary-color);
    max-width: 100px;padding: 7px 10px;
    text-align: center;
    border-radius: 5px;
    color: var(--orange);
}
.home-about-list ul li{
    padding-top: 10px;
    padding-bottom: 15px;
    color: var(--white);
}
.home-about-list ul li i{
    color: var(--orange);
    padding-right: 10px;
}
.home-list-border{
    border-bottom: 1px solid var(--para-color);
    padding-bottom: 20px;
}
.home-partners h4{
    color: var(--white);
}
.home-partners-img img{
    width: 80px !important;
    height: 100px;
    object-fit: contain;
}
.home-about-btn button{
    background:var(--orange);
    padding: 10px 40px;
    border: none;
    color: var(--white);
    border-radius: 5px;
}

/* Home Work Proccess Section Start */
.home-work-process-bg {
    position: relative;
    background: var(--primary-color);
}
.home-work-process-heading{
    text-align: center;
}
.home-work-process-heading h5{
   color: var(--orange);
}
.home-work-process-heading h2{
    color: var(--white);
    font-size: 40px;
}
.home-wrok-process-list-img img{
    margin-bottom: 50px;
    border: 1px solid #F24D2B;
    padding: 60px 70px;
    border-radius: 3px;
}
.home-work-proccess-list-content{
    padding: 40px;
    position: relative;
}
.home-work-proccess-list-content::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--linear-gradient-one);
}
.home-work-proccess-list-content h5{
    font-size: 100px;
    font-weight: 700;
}
.right-work-process{
  position: relative;
}
.right-work-process::after{
  content: '';
  position: absolute;
  top: 10px;
  right: 0;
  width: 1px;
  height: 70px;
  background:var(--linear-gradient-one);
}
.home-work-proccess-list-content h4{
  color: var(--white);
  font-weight: 700;
}
.list-sub{
  order: 2;
}
.home-work-process-list{
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  width: 100%;
  max-width: 292px;
}

.home-work-process-list:nth-child(odd){
  flex-direction: column-reverse !important;
}
.home-work-process-list:nth-child(odd) .home-work-proccess-list-content::before{
  top:auto;
  bottom: 7%;
}
#owl-carousel11{
  display: flex;
  align-items: center;
  justify-content: start;
}
/* home service start */
.home-service-bg{
  position: relative;
  background: var(--primary-color);
}
.home-service-head span{
  background: var(--secondry-color);
  padding: 6px 20px;
  border-radius: 5px;
  color: var(--orange);
}
.home-service-head h3{
  color: var(--white);
  font-weight: 700;
  font-size: 40px;
  padding-top: 20px;
  padding-bottom: 40px;
}
.home-service-img-sec{
  position: relative;
}
.home--service-img img{
  width: 100% !important;
  height: 600px;
  object-fit: cover;
  object-position: center;
  transition: transform 2s ease;
}
/* .home--service-img{
  display: inline-flex;
  overflow: hidden; 
} */
.home-service-content{
  width: 100%;
  backdrop-filter: blur(30px);
  background: rgba(0, 0, 0, 0.5);
  transition-delay: .3s;
  height: fit-content;
  padding: 30px;
  bottom: 0px;
  right: 0;
  transition: all .6s linear;
  position: absolute;
  opacity: 0;
  overflow: hidden;
}
.home-service-content h3{
  color: var(--orange);
  font-size: 22px;
}
.home-service-btn button{
  background: transparent;
  border: none;
  color: var(--orange);
  text-transform: capitalize;
}
.home-service-img-sec:hover .home-service-content{
  opacity: 1;
  overflow: hidden;
  transform: translateX(20px);
}
.home-service-img-sec:hover .home--service-img img{
  transform: translateX(20px);
}
.home-service-btn button i{
  transform: rotate(-50deg);
  padding-left: 10px;
  /* padding-top: 10px; */
}

 /* home product section start */
  .home-product-linline-text{
    padding: 40px 50px;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.8);
    margin-top: 60px;
  }
  .home-product-bg{
    background: var(--secondry-color);
    position: relative;
  }
  .home-product-heading{
    text-align: center;
  }
  .home-product-heading span{
    background: var(--primary-color);
    padding: 9px 10px;
    border-radius: 5px;
    color: var(--orange);
  }
  .home-product-heading h2{
    color: var(--white);
    padding-top: 40px;
    font-size: 40px;
    font-weight: 700;
  }
  .nav{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding-top: 50px;
    padding-bottom: 30px;
  }
  .nav-pills{
    border-bottom: 1px solid #fff;
  }
  .tab-border{
    position: relative;
  }
  .tab-border::after{
    position: absolute;
    content: "";
    bottom: -31px;
    width: 0;
    height: 100%;
    transition: 0.3s linear;
    border-bottom: 2px solid var(--orange);
  }
  .tab-border.active::after{
    position: absolute;
    content: "";
    bottom: -31px;
    width: 100%;
    height: 100%;
    transition: 0.3s linear;
    border-bottom: 2px solid var(--orange);
  }
  .tab-border:hover::after{
    position: absolute;
    content: "";
    bottom: -31px;
    width: 100% !important;
    height: 100%;
    transition: 0.3s linear;
    border-bottom: 2px solid var(--orange);
  }
  .nav .nav-item .nav-link.active{
    background: none !important;
    color: var(--orange) !important;
  }
  .nav .nav-item .nav-link:hover{
    color: var(--orange) !important;
  }
  
  .nav-item .nav-link{
    color: var(--white);
  }
  .tab-content{
    padding-bottom: 50px;
  }
  .home-product-inline-img{
    padding-top: 40px;
  }
  .home-product-inline-img img{
    width: 100%;
    border-radius: 5px 5px;
  }
  .home-product-inline-text{
    padding-top: 40px;
  }
  .home-product-inline-text span{
    color: var(--orange);
  }
  .home-product-inline-text h3{
    color: var(--white);
    padding-top: 20px;
  }
  .home-product-line-list  li{
    padding-top: 15px;
    color: var(--white);
  }
  .home-product-line-list li i{
    padding-right: 10px;
    color: var(--orange);
  }
  .home-tab-button{
    border: none;
    background: var(--orange);
    padding: 10px 30px;
    color: var(--white);
    border-radius: 5px;
    margin-top: 20px;
  }

  /*  */
  .long-back-img{
    background: #1d1c1c;
  }
  .long-img img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    pointer-events: none;
  }
  .cursor{
    pointer-events: none;
    position: fixed;
    padding: 0.3rem;
    background-color: #fff;
    border-radius: 50%;
    mix-blend-mode: difference;
    transition: transform 0.3s ease;
    width: 30px;
    height: 30px;
  }
  .long-img:hover ~ .cursor{
    transform: translate(-50%, -50%) scale(8);
  }
/* footer  */
  .footer {
  background-color: #1a1a1a;
  color: #ccc;
  font-family: Arial, sans-serif;
  padding: 60px 20px 20px;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  justify-content: space-between;
  gap: 30px;
}

.footer-section {
  flex: 1 1 220px;
}
.about-us-footer img{
    width: 70px;    
}
.footer-section h3 {
  color: var(--orange);
  margin-bottom: 15px;
}

.footer-section p {
  font-size: 14px;
  padding-top: 10px;
  line-height: 1.6;
  color: #ccc;
}
.footer-section a {
  font-size: 20px;
  padding-top: 10px;
  line-height: 1.6;
  color: #ccc;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section li {
  margin-bottom: 10px;
}

.footer-section a {
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: var(--orange);
}

.social-icons a {
  display: inline-block;
  margin-right: 10px;
  padding: 12px 16px;
  border: 1px solid var(--orange);
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s;
}

.social-icons a:hover {
  background-color: var(--orange);
  color: #fff;
}

/* about-page  */
/* about us */
.about-banner{
  position: relative;
  background: url(../img/about/about_us_banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 210px 0;
  background-position: center;
}
.about-banner-content h1{
 font-size: 70px;
 color: var(--white);
 text-align: center;
}
@media (max-width: 768px) {
    .about-banner-content h1 {
        font-size: 40px;
    }
}
.about-inner-one-img{
  position: relative;
}
@media (max-width: 768px) {
    .about-inner-one-img {
        margin-bottom: 100px;
    }
}
.about-inner-one-img img{
  width: 100%;
}
.about-inner-one-para{
  padding-left: 30px;
}
@media (max-width:768px) {
  .about-inner-one-para{
    padding-left: 0;
  }
}
.about-inner-one-para span{
  background: var(--secondry-color);
}
.about-inner-one-para h2{
  color: var(--white);
  font-size: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.about-inner-one-list-main ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  color: var(--white);
}
.about-inner-one-list-main ul li img {
  padding-right: 15px;
}
.about-inner-one-project{
  background: var(--orange);
  padding: 30px;
  position: absolute;
  right: -20px;
  bottom:-10px;
  text-align: center;
  border-radius: 5px;
}
.about-inner-one-number h5{
  font-size: 70px;
  color: var(--white);
}
@media (max-width: 768px) {
    .about-inner-one-number h5 {
        font-size: 40px;
    }
}
.about-inner-one-project-tex p{
  color: var(--white);
}

/*  */
.main-logo-positon{
  position: relative;
}
.client-logo-img{
  background-color: #101010;
	padding: 15px 30px;
	border-radius: 80px;
	border: 1px solid #313131;
	text-align: center;
	box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
	margin-right: 20px;
	transition: 0.2s ease-in-out;
	overflow: hidden;
  transform: translateY(0%);
	transition: 0.2s ease-in-out;
}
.client-logo-img img{
  aspect-ratio: auto 261 / 110;
}
.client-logo-img:hover img{
  transform: translateY(-130%);
	transition: 0.2s ease-in-out;
	opacity: 0;
}
.another-logo{
  transform: translateY(130%);
	transition: 0.2s ease-in-out;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	padding: 12px 30px;
	overflow: hidden;
}
.another-logo img{
  	aspect-ratio: auto 261 / 110;
	overflow: hidden;
}
.another-logo:hover{
  transform: translateY(0%);
	transition: 0.2s ease-in-out;
	opacity: 1;
}
.how-it-work-img{
  height: 100%;
  margin-left: -300px;
}
.how-it-work-img img{
  width: 100%;
  border-radius: 0px 0px 150px 0px;
  height: 100%;
}
.how-it-work-content-1{
  padding-left: 30px;
}
.how-it-work-content-1 span{
  background: var(--secondry-color);
}
.how-it-work-content-1 h2{
  font-size: 55px;
  color: var(--white);
  padding-top: 20px;
  padding-bottom: 40px;
}
.our-work-content-main{
  background-image: url(../img/about/line-img.png);
  padding: 0px 0px 50px 0px;
  background-position: 17px 15px;
  background-repeat: no-repeat;
  border-style: none;
  display: flex;
  justify-content: space-between;
}
.our-work-circle-1{
  width: 55px;
  height: 37px;
  background-color: var(--secondry-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 30px;

}
.our-work-content h4{
  color: var(--white);
  font-size: 28px;
  transition:0.4s ease-in-out;
}
.our-work-circle-1 i{
 transition:0.6s ease-in-out;
}
.our-work-content-main:hover .our-work-circle-1 i{
 color: var(--orange);
}
.our-work-content-main:hover .our-work-content h4{
 color: var(--orange);
}

/*  */
.about-marquee-hed{
  text-align: center;
  margin-bottom: 50px;
}
.about-marquee-hed span{
  background: var(--secondry-color);
}
.about-marquee-hed h2{
  color: var(--white);
  font-size: 55px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.about-marquee-bg{
  position: relative;
}
.back-scroll{
    position: relative;
    top: 250px;
}
.scroll-container{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    perspective: 500px;
    transform: rotate(5deg);
    padding: 15px 0;
    background: var(--secondry-color);
}
.scroll-content {
    display: flex;
    white-space: nowrap;
    gap: 40px;
    margin-right: 40px;
    animation: scrollX 45s linear infinite;
    transform-origin: center;
}
@keyframes scrollX {
  0% {
    transform: translateX(0);
}

100% {
    transform: translateX(-100%);
}
}
.scroll-content div {
    width: 100%;
    color: var(--white);
    font-size: 34px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 34px;
    margin-right: 10px;
}
.scroll-content img {
    display: inline-block;
    margin: 0 40px;
}
.back-scroll .scroll-container-2 {
    top: 0px;
}

.scroll-container-2 {
    width: 100%;
    white-space: nowrap;
    display: flex;
    align-items: center;
    perspective: 500px;
    padding: 15px 0;
    transform: rotate(-5deg);
    background: var(--orange);
    position: absolute;
    top: 65px;
}
.comprehensive-image img{
    position: relative;
    top: -75px;
    bottom: 0;
    display: block;
    width: 85%;
    margin: 0 auto;
    border-radius: 5px;
}
.counter-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-right: 1px solid #2E2E2A;
}
.counter-number h2 {
  font-size: 80px;
  color: var(--white);
}
.counter-content p{
  padding-right: 20px;
}
.about-counter-bg-sec{
  position: relative;
  background: var(--secondry-color);
  padding: 30px 40px;
  border-radius: 5px;
  margin-top: -100px;
  z-index: 25;
}
@media (max-width:768px) {
  .about-banner-content h1{
    font-size: 40px;
  }
  .about-inner-one-number h5{
    font-size: 40px;
  }
  .about-inner-one-para h2{
    font-size: 40px;
  }
  .about-inner-one-img{
    margin-bottom: 100px;
  }
  .how-it-work-img{
    margin-left: 0;
  }
  .how-it-work-content{
    margin-top: 100px;
    padding-left: 0;
  }
  .how-it-work-content h2{
    font-size: 38px;
  }
  .our-work-circle{
    width: 100px;
  }
  .our-work-content h4{
    font-size: 24px;
  }
  .about-marquee-hed h2{
    font-size: 34px;
  }
  .counter-item{
    display: block;
    text-align: center;
    border: none;
    border-bottom: 1px solid #2E2E2A;
    margin-bottom: 20px;
  }
  .counter-content{
    padding-bottom: 20px;
  }
  .counter-number h2{
    font-size: 40px;
  }
  .comprehensive-image img{
    width: 100%;
    margin-top: 30px;
  }
  .back-scroll{
    display: none;
  }
  .about-counter-bg-sec{
    margin-top: -50px;
  }
}
/* Footer bottom */
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  position: relative;
}

.footer-bottom hr {
  border: 0;
  height: 1px;
  background: var(--orange);
  margin-bottom: 15px;
}

.footer-bottom p {
  color: #ccc;
  font-size: 16px;
}

.footer-bottom strong a {
  color: #fff;
  text-decoration: none;
}
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url('../img/bg/video-banner-bg.jpg') no-repeat center center/cover;
    overflow: hidden;
  }
  
  .floating-play-btn {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: #e44a00;
    color: white;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* box-shadow: 0 0 0 3px rgba(228, 74, 0, 0.6); */
    border: 1px solid rgba(228, 74, 0, 0.6);
    pointer-events: none;
    transition: transform 0.2s ease;
    z-index: 10;
}
/* index-how we work section  */
  .how-we-sec-bg{
    position: relative;
    background: #1d1c1c;
  }
  .sub-title{
    background: var(--primary-color);
    padding: 3px 20px;
    border-radius: 5px;
    color: var(--orange);
  }
  .how-hed{
    margin-bottom: 50px;
  }
  .how-hed h2{
    font-size: 40px;
    font-weight: 600;
    color: var(--white);
    padding-top: 20px;
  }
  .how-hed h2 span{
    color: var(--orange);
  }
  .how-we-work-sec {
    position: relative;
    padding-top: 50px;
  }
  .how-we-work-icon svg{
    height: auto;
    vertical-align: top;
    fill: var(--orange);
    width: 80px;
  }
  .how-we-work-content h5{
    font-size: clamp(5rem, 4.2788rem + 3.2051vw, 8.125rem);
    margin: 0;
    position: absolute;
    color: rgba(75,75,75,0.3);
    z-index: 0;
    right: -20px;
    bottom: 130px;
    left: 0;
    margin: auto;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: transparent;
    transition: all 0.3s linear;
    transform: scale(.95);
    -webkit-transform: scale(.95);
  }
  .how-we-work-content h2{
    color: var(--white);
    font-size: 25px;
    padding-top: 30px;
    padding-bottom: 10px;
  }
  .how-we-work-sec:hover h5{
    color: transparent;
    -webkit-text-stroke-color: var(--white);
    opacity: .3;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  .how-we-work-content button{
    color: var(--para-color);
    background: none;
    border: none;
    font-size: 20px;
    transition: all 0.3s linear;
    transform: scale(.95);
  }
  .how-we-work-sec:hover button{
    color: var(--orange);
  }
  .how-we-work-sec:hover button i{
    color: var(--orange);
  }
  .how-we-work-content i{
    color: var(--para-color);
    font-size: 16px;
    padding-left: 20px;
  }
    /*  */
  .development-bg{
    position: relative;
    background: var(--primary-color);
  }
  .development-hed{
    padding-bottom: 50px;
  }
  .develop-card{
    margin-top: 30px;
  }
  .development-hed span{
    background: var(--secondry-color);
    padding: 9px 10px;
    border-radius: 5px;
    color: var(--orange);
  }
  .development-hed h2{
    color: var(--white);
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 40px;
    font-weight: 700;
  }

  .develop-card {
    background-color: #1e1e1e;
    border-radius: 20px;
    padding: 60px 20px 20px;
    width:100%;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
    margin-bottom: 30px;
  }
  
  .develop-card:hover {
    transform: translateY(-10px);
  }
  
  .develop-card img {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  }
  
  .develop-card h3 {
    margin-top: 20px;
    color: var(--white);
  }
  
  .develop-card p {
    padding-top: 10px;
    font-size: 14px;
    color: #cfcfcf;
  }
/*  */
.home-contact-sec{
  position: relative;
  background: var(--primary-color);
}
.contact-hed h3{
  color: var(--white);
  font-weight: 700;
  font-size: 40px;
  padding-top: 20px;
}
.input-form input{
  background: var(--primary-color);
  border:none;
  padding: 15px;
  width: 100%;
  margin-bottom: 30px;
  border-radius: 5px;
}
.input-form textarea{
  background: var(--primary-color);
  border:none;
  padding: 15px;
  width: 100%;
  margin-bottom: 30px;
  border-radius: 5px;
  height: 280px !important;
}
.input-btn button{
  padding: 15px;
  background: var(--orange);
  border: none;
  border-radius: 5pc;
  color: var(--white);
  width: 100%;
  font-weight: 600;
}
.contact-main-sec{
  margin-left: 30px;
}
.contact-content h3{
  color: var(--white);
}
.contect-icon-sec{
  display: flex;
  align-items: center;
  padding-top: 60px;
  gap: 30px;
  padding-bottom: 30px;
}
.location-icons i{
  background: var(--orange);
  padding: 20px;
  border-radius: 5px;
  color: var(--white);
  font-size: 30px;
}
.contact-content-sec h4{
  color: var(--white);
}
.contact-content-sec p a{
  color: var(--white);
}
@media (max-width: 768px) {
    .contact-content-sec p a{
     font-size: 13px;
    }
}

  /*  */
  .faq-bg{
    position: relative;
    background: var(--secondry-color);
  }
  .faq-img img{
    width: 100%;
    height:100%;
    object-fit: cover;
  }
  .faq-img{
    margin-left: -400px;
    margin-right: -20px;
    height: 100%;
  }
  .faq-content span{
    background: var(--secondry-color);
    padding: 4px 10px;
    color: var(--orange);
    border-radius: 5px;
  }
  .faq-content h2{
    color: var(--white);
    padding-top: 30px;
    font-size: 40px;
    padding-bottom: 20px;
  }c
  .faq-content-bg{
    background: url(../img/faq/Faq-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .faq-content-1{
    margin-top: 100px;
  }
  .faq-content{
    padding: 40px 50px;
  }
  @media (max-width: 768px) {
    .faq-content{
    padding: 0px;
  }
}
  .accordion-button {
    background-color: var(--primary-color) !important;
    padding: 30px 45px !important;
    color: var(--white) !important;
  }
  .accordion-button:focus{
    border-color: inherit !important;
    box-shadow:none !important;
  }
  .accordion-body{
    background: #000000 !important;
    color: var(--white) !important;
  }
  .accordion-item{
    margin-bottom: 30px;
    border: 1px solid #4b4b4b!important;
  }
  .accordion{
    padding: 40px 50px !important;
  }
  .accordion-button:not(.collapsed)::after{
   content: '';
   background-image: url(../img/bg/plus.png) !important;
      transform: rotate(-180deg);
}
.accordion-button::after{
  content: '';
  background-image: url(../img/bg/plus-icon.png) !important;
}
  @media (max-width: 768px) {
    .accordion{
    padding: 0px !important;
  }
}
  .accordion-button::after{
    color: var(--white) !important;
    background-image: url(../img/faq/faq-icon.svg) !important;
  }

  /* index-end  */



  /* digital marketing page  >>>>>>>>>>>*/

  .banner-bg{
    background: var(--primary-color);
    margin-top: -90px;
}
.banner-bf-sec::before{
  content: '';
  display: block;
  position: absolute;
  right: -70px;
  top: 20%;
  background: url(../img/seo/section-bg-shape-1.png) no-repeat;
  background-position: right center;
  background-size: contain;
  width: 285px;
  height: 285px;
  opacity: 50%;
  transform: translateY(-50%) rotate(-50deg);
  animation: roundrotate 10s infinite linear;
  animation-direction: alternate;
  z-index: -1;
}
.digital-marketing-banner-sub-text{
    padding: 9px 10px;
    text-transform: uppercase;
    color: var(--orange);
    background: var(--secondry-color);
    max-width: 290px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 2px;
    border-radius: 5px;
}
.digital-marketing-banner-text h1{
    font-size: 63px;
    color: var(--white);
}

.banner-text p{
    padding-top: 10px;
}
.banner-btn{
    background:var(--orange);
    padding: 10px 30px;
    border-radius: 5px;
    color: var(--white);
    border: none;
    margin-top: 20px;
}
.digital-marketing-banner-img img{
    width: 100%;
    /* animation: flash 1s linear infinite; */
}

.badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px !important;
  height: 130px !important;
  border-radius: 100% !important;
  animation: identifier 20s linear infinite;
  position: absolute;
  top: 70%;
  left: 46%;
  z-index: 1;
  background-color: var(--primary-color);
  padding: 5px;
}
@media  (max-width: 768px){
  .badge {
    display: none !important;
  }
  .digital-marketing-banner-sub-text {
    padding: 10px 0px;
    max-width: 214px;
    font-size: 11px;
  }
  .digital-marketing-banner-text h1 {
    font-size: 40px;
    color: var(--white);
  }
  .about-us-page-banner-sub-text {
    padding: 10px 0px !important;
    max-width: 214px !important;
    font-size: 11px !important; 
  }
  .about-us-page-banner-text h1 {
    font-size: 40px !important;
    color: var(--white);
  }
  .service-card {
    padding: 25px 20px !important;
    margin: 10px;
}
  
}

@keyframes identifier {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

.badge .badge__char {
  display: block;
  position: absolute;
  top: 0;
  left: calc(50% - 5px);
  height: 65px;
  width: 10px;
  background-repeat: round;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 500;
  font-size: 13px;
  color: var(--white);
  transform-origin: bottom center;
  transform: rotate(var(--char-rotate));
}

.home1-banner-bottom {
  overflow: hidden;
  display: flex;
  align-items: center;
}
.home1-banner-bottom .marquee_text {
  background: #1E1F1F;
  height: 70px;
  display: flex;
  align-items: center;
}
.home1-banner-bottom .js-marquee {
  display: flex;
  align-items: center;
  gap: 25px;
}
.home1-banner-bottom svg {
  fill: var(--white);
}
.home1-banner-bottom h6 {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  margin-bottom: 0;
}


@keyframes  marqueeAnimation-1242133{ 
  100%  {transform:translateX(-1722.91px)}
}

/* about-us-section  */
.about-us-page-banner-sub-text{
  padding: 9px 10px;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--secondry-color);
  max-width: 290px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  border-radius: 5px;
}
.about-us-page-banner-text h1{
  font-size: 63px;
  color: var(--white);
}

.banner-text p{
  padding-top: 10px;
}

.about-countdown-area {
  padding-top: 30px;
}
.single-countdown {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
}
.single-countdown .icon {
  margin-top: 2px;
}
.single-countdown .icon svg {
  fill: #b5b5b5;
}
.single-countdown .content {
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}
.single-countdown .content .number {
  color: var(--white);
  line-height: 1;
  display: flex
;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.single-countdown .content .number h5 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 0;
  line-height: 1;
}
.single-countdown .content .number span {
  font-size: 27px;
  font-weight: 500;
}
.single-countdown .content p {
  color: var(--para-color);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0;
}

.feature-card .icon {
  margin-bottom: 30px;
  transition: transform 0.45s ease;
}

.feature-card:hover .icon{
   animation: fadeInUp 0.7s linear;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.feature-card .content h4 {
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
}

.feature-card .content p {
  color: var(--para-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 0;
}


.section-title > span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.primary-btn2 {
  border-radius: 5px;
  background-color: var(--white);
  font-weight: 600;
  font-size: 16px;
  color: var(--secondry-color);
  letter-spacing: 0.48px;
  line-height: 1;
  padding: 16px 20px;
  position: relative;
  align-items: center;
  display: inline-flex;
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
  text-decoration: none;
}
.primary-btn2:hover {
 background-color: var(--linear-gradient-one);
 color: var(--white);
}
.primary-btn2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 102% 102%;
  border-radius: inherit;
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  opacity: 0;
  z-index: -1;
}
.primary-btn2 > span {
  transition: opacity 0.2s, transform 0.2s;
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.primary-btn2::after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  opacity: 0;
  transform: translate(0, 100%);
  transition: opacity 0.2s, transform 0.2s;
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  white-space: nowrap;
}
.primary-btn2:hover::before {
  opacity: 1;
}
.primary-btn2:hover::after {
  transform: translate(0%, -50%);
  opacity: 1;
}
.primary-btn2:hover> span {
  transform: translateY(-150%);
  opacity: 0;
}


.service-card {
  background-color: var(--secondry-color);
  border-radius: 5px;
  padding: 35px 30px;
  transition: 0.5s;
}
.service-card:hover{
  background-color: var(--linear-gradient-one);
}
.service-card .content {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(11, 12, 12, 0.1);
}
.service-card .content h4 {
  margin-bottom: 15px;
}
.service-card .content svg {
  fill: var(--white);
}
.service-card .content h4 a{
  text-decoration: none;
  color: var(--white);
}
.service-card .content p {
  color: var(--para-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 0px;
  padding-top: 15px;
}
.explore-btn {
  color: var(--white);
}


/* what-we-offer  */
.what-we-offer > span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.what-we-offer h2 {
  color: var(--white);
  font-size: 50px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
    .what-we-offer h2 {
        font-size: 30px;
    }
}
.offer-services {
  background-color: var(--secondry-color);
  border-radius: 5px;
  padding: 35px 30px;
  transition: 0.5s;
}
@media (max-width: 768px) {
    .offer-services {
      margin: 10px;
    }
}
.offer-services:hover{
  background-color: var(--linear-gradient-one);
}
.offer-services .content {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(11, 12, 12, 0.1);
  text-align: center;
}
.offer-services .content h4 {
  margin-bottom: 15px;
}
.offer-services .content svg {
  fill: var(--white);
}
.offer-services .content h4 a{
  text-decoration: none;
  color: var(--white);
}
.offer-services .content a {
  color: var(--para-color);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 0px;
  padding-top: 15px;
}
.explore-btn {
  color: var(--white);
}


/* our-work  */

.portfolio-one__single {
  position: relative;
  display: block;
  right: 175px; 
}
@media (max-width: 768px) {
    .portfolio-one__single {
       position: relative;
       right: 0px; 
}
}

.portfolio-one__img-box {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px;
}

.portfolio-one__img {
  position: relative;
  display: block;
  background-color: #090909;
  border-radius: 10px;
  z-index: 1;
}

.portfolio-one__img:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: #090909;
  opacity: 0.2;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .5s;
  transition-property: all;
  opacity: 1;
  transform-origin: top;
  transform-style: preserve-3d;
  transform: scaleY(0);
  z-index: 1;
}

.portfolio-one__single:hover .portfolio-one__img:before {
  opacity: 0.20;
  transform: scaleY(1.0);
}

.portfolio-one__img:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: #090909;
  opacity: 0.2;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .5s;
  transition-property: all;
  opacity: 1;
  transform-origin: bottom;
  transform-style: preserve-3d;
  transform: scaleY(0);
  z-index: 1;
}

.portfolio-one__single:hover .portfolio-one__img:after {
  opacity: 0.20;
  transform: scaleY(1.0);
}

.portfolio-one__img img {
  width: 100%;
  mix-blend-mode: luminosity;
  border-radius: 10px;
  transform: scale(1.0);
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .7s;
  transition-property: all;
}

.portfolio-one__single:hover .portfolio-one__img img {
  transform: scale(1.2) rotate(1deg);
}

.portfolio-one__content {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  right: 60px;
  background-color: var(--orange);
  border-radius: 8px;
  padding: 23px 30px 25px;
  background-position: center bottom;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .5s;
  transition-property: all;
  transform-origin: left;
  transform-style: preserve-3d;
  transform: scalex(0);
  z-index: 2;
}

.portfolio-one__single:hover .portfolio-one__content {
  transform: scalex(1.0);
}

.portfolio-one__title-box {
  position: relative;
  display: block;
}

.portfolio-one__sub-title {
  font-size: 14px;
  color: #ffffff;
}

.portfolio-one__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
}

.portfolio-one__title a {
  color: #ffffff;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  text-decoration: none;
}

.portfolio-one__title a:hover {
  color: #1c1b1f;
}

.portfolio-one__arrow {
  position: relative;
  display: inline-block;
}

.portfolio-one__arrow a {
  font-size: 18px;
  color: #ffffff;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.portfolio-one__arrow a:hover {
  color: #1c1b1f;
}

/* work-flow-insights  */

.approach-area .divider {
  position: relative;
}
.approach-area .divider::before {
  content: "";
  position: absolute;
  top: 38.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 98%;
  height: 2px;
  background-color: #eee;
  border-radius: 10px;
}
.approach-area .single-approach {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.approach-area .single-approach .img-area {
  margin-bottom: 15px;
}
.approach-area .single-approach .img-area img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
}
.approach-area .single-approach .dot {
  margin-bottom: 30px;
  line-height: 1;
}
.approach-area .single-approach .dot span {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  display: inline-flex;
  position: relative;
  bottom: 2px;
  z-index: 1;
  border-radius: 50%;
}
.approach-area .single-approach .approach-content-wrap {
  /* background-image: linear-gradient(rgba(237, 241, 252, 0.38) 0%, rgba(201, 215, 255, 0.13) 100%); */
  background-color: var(--secondry-color);
  position: relative;
  border-radius: 5px;
  padding: 30px 25px;
}
.approach-area .single-approach .approach-content-wrap::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 70px;
  z-index: 1;
  border-radius: 0px 0px 5px 5px;
  /* background: linear-gradient(rgba(237, 241, 252, 0) 0%, rgba(237, 241, 252, 0.76) 26.46%, rgb(237, 241, 252) 45.7%); */
}
.approach-area .single-approach .approach-content-wrap .scroll-content-area {
  overflow: hidden;
}
.approach-area .single-approach .approach-content-wrap .scroll-content-area .content {
  max-height: 260px;
  transform: translateY(0px);
  transition: 5s;
}
.approach-area .single-approach .approach-content-wrap .scroll-content-area .content span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
}
.approach-area .single-approach .approach-content-wrap .scroll-content-area .content h5 {
  color: var(--white);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}
.approach-area .single-approach .approach-content-wrap .scroll-content-area .content p {
  color: var(--para-color);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 15px;
}
.approach-area .single-approach .approach-content-wrap .scroll-content-area .content ul li {
  color: var(--para-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 10px;
  padding-left: 12px;
  position: relative;
}
.approach-area .single-approach .approach-content-wrap .scroll-content-area .content ul li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0px;
  width: 6px;
  height: 6px;
  background-color: var(--white);
  border-radius: 50%;
}
.approach-area .single-approach .approach-content-wrap .scroll-content-area .content ul li strong {
  color: var(--orange);
  font-weight: 600;
}
.approach-area .single-approach .approach-content-wrap::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 38px;
  background-color: var(--white);
  left: 50%;
  transform: translateX(-50%);
  top: -38px;
}

.approach-content-wrap .scroll-content-area .content:hover.scrollTextAni {
  transform: translateY(-200px);
}


/* logo-section  */
.logo-section {
  overflow: hidden;
  padding: 0 4%;
}
.logo-section .logo-wrap .logo-title {
  text-align: center;
  margin-bottom: 45px;
}
.logo-section .logo-wrap .logo-title h6 {
  color: var(--orange);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  margin-bottom: 0;
}
.logo-section .logo-wrap .logo-area {
  overflow: hidden;
}
.logo-section .logo-wrap .logo-area .js-marquee-wrapper .js-marquee {
  display: flex;
  align-items: center;
  gap: 110px;
  margin-right: 0 !important;
}

@keyframes marqueeAnimation-7540553{

  100%{
    transform: translateX(-1075px);
  }
}

/* test-monial section  */
.home1-testimonial-section.two {
  padding: 120px 7%;
}
.section-title > span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.section-title h2 {
  color: var(--white);
  font-size: 50px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
    .section-title h2 {
        font-size: 30px !important;
    }
}
@media only screen and (max-width: 991px) {
    .section-title h2 {
        font-size: 40px;
    }
}
.section-title p {
  color: var(--para-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  padding-top: 20px;
  margin-bottom: 0;
}
@media only screen and (max-width: 991px) {
    .section-title p {
        margin-top: 15px;
    }
}
.home1-testimonial-section .testimonial-content .rating-area {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-top: 50px;
}
.home1-testimonial-section .testimonial-content .rating-area > li {
  position: relative;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .review {
  line-height: 1;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .review span {
  color: var(--para-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .review .logo-dark {
  display: block;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .review img {
  width: 64px;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .review .logo-light {
  display: none;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .rating {
  line-height: 1;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .rating .star {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  line-height: 1;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .rating .star li i {
  color: #E62415;
  font-size: 12px;
}
.home1-testimonial-section .testimonial-content .rating-area > li .single-rating .rating span {
  color: var(--para-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  top: 7px;
}

.testimonial-section{
  position: relative;
  background-color: var(--secondry-color);
  padding: 20px 30px 40px 30px;
  height:calc(100% - 20px);
}
@media (max-width: 768px) {
    .testimonial-section {
       padding: 20px 0px 20px 15px;
       margin-top: 20px;
    }
}
.testimonial-icon i{
  font-size: 40px;
  position: absolute;
  top: 0;
  background:var(--orange);
  padding: 10px;
  color: #fff;
  border-radius: 2px;
}
.testimonial-para p{
  padding-top: 60px;
  color: var(--para-color);
}
.testimonial-img-sec{
  display: flex;
  align-items: center;
  gap: 40px;
}
.testimonial-img{
  width: 100px;
  border-radius: 50%;
}
.testimonial-img img{
  width: 100%;
  border-radius: 50%;
}
.testimonial-content h6{
  font-weight: 800;
  color:var(--orange);
}
.testimonial-heading{
  position: relative;
}

/* seo page */
.banner-two__content {
  max-width: 545px;
  padding-top: 200px;
}
@media only screen and (max-width: 767px) {
    .banner-two__content {
        padding-top: 50px;
    }
}
.banner-two__content h4 {
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 2px;
  color: var(--orange);
  padding: 5px 15px;
  border-radius: 12px;
  background-color: var(--primary-two);
  display: inline-block;
  text-transform: uppercase;
}
.banner-two__content p {
  color: var(--para-color);
}
.banner-two__content h1 {
  font-size: 60px;
  line-height: 72px;
  color: var(--white);
  text-transform: capitalize;
}
@media only screen and (max-width: 767px) {
    .banner-two__content h1 {
        font-size: 30px;
        line-height: 50px;
    }
}
.btn-two{
  background: var(--orange);
    padding: 10px 30px;
    border-radius: 5px;
    color: var(--white);
    border: none;
    margin-top: 20px;
}
.banner-two__image {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  max-width: 700px;
}
@media only screen and (max-width: 767px) {
    .banner-two__image {
        display: none;
    }
}
.image img {
  width: 100%;
}

.scrolling-ticker-box {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 20px;
  align-items: center;
}
.scrolling-content {
  flex-shrink: 0;
  display: flex;
  gap: 20px;
  min-width: 100%;
  animation: scroll 40s linear infinite;
}
@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - 20px ));
	}
}
.scrolling-content span {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2em;
  color: #ffffff;
  vertical-align: middle;
}
.scrolling-content span img {
  width: 100%;
  max-width: 100px;
  margin-right: 20px;
}

.about-us {
  position: relative;
  padding: 160px 0 80px;
}
.about-us::before {
  content: '';
  display: block;
  position: absolute;
  right: -70px;
  top: 50%;
  background: url(../img/seo/section-bg-shape-1.png) no-repeat;
  background-position: right center;
  background-size: contain;
  width: 285px;
  height: 285px;
  opacity: 50%;
  transform: translateY(-50%) rotate(-50deg);
  animation: roundrotate 10s infinite linear;
  animation-direction: alternate;
  z-index: 0;
}
@media only screen and (max-width: 991px) {
    .about-us::before {
        width: 180px;
        height: 180px;
        opacity: 30%;
    }
  }
@keyframes roundrotate{
	from{
		transform: translate(0, -50%) rotate(0deg);
	}
	to{
		transform: translate(0, 50%) rotate(360deg);
	}
}
.section-row {
  margin-bottom: 80px;
}
.section-row .section-title {
  width: 100%;
  max-width: 605px;
  margin-bottom: 0;
}
.section-title h3 {
  display: inline-block;
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  padding-left: 24px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 991px) {
    .section-title h3 {
        margin-bottom: 15px;
    }
}
.section-title h3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url(../img/seo/icon-sub-heading.svg) no-repeat;
  background-position: left center;
  background-size: cover;
  width: 16px;
  height: 16px;
}

.section-title h1 span, .section-title h2 span {
  font-weight: 700;
  color: var(--orange);
}
.section-content-btn .section-title-content {
  margin-bottom: 30px;
}
.section-title-content p {
  margin: 0;
}
.section-content-btn .section-btn {
  text-align: left;
}
.btn-default {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4em;
  text-transform: capitalize;
  text-decoration: none;
  background: transparent;
  color: var(--white);
  border-radius: 100px;
  padding: 14px 25px;
  margin-right: 50px;
  border: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.5s ease-in-out;
  position: relative;
  z-index: 1;
}
.btn-default::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--orange);
  background-image: url(../img/seo/arrow-dark.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px auto;
  transform: translate(50px, 0px);
  transition: all 0.4s ease-in-out;
}
.btn-default::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--white);
  border-radius: 100px;
  opacity: 20%;
  width: 100%;
  height: 100%;
}
.about-us-images {
  display: flex;
  gap: 30px;
  margin-right: 30px;
}
@media only screen and (max-width: 767px) {
    .about-us-images {
        gap: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .about-us-images {
        width: 100%;
        margin: 0 auto 30px;
    }
}
.about-img-1, .about-img-2 {
  width: calc(50% - 15px);
}
@media only screen and (max-width: 767px) {
    .about-img-1, .about-img-2 {
        width: calc(50% - 10px);
    }
}
.about-img-1 figure, .about-img-2 figure {
  display: block;
  border-radius: 999px;
}

.reveal {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  visibility: hidden;
  overflow: hidden;
}
.image-anime {
  position: relative;
  overflow: hidden;
}
.about-img-1 figure img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
    .about-img-1 figure img {
       width: 100%;
    }
}
.image-anime:after {
  content: "";
  position: absolute;
  width: 215%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, .3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
}
.image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}
.about-more-circle {
  margin-top: 48px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
    .about-more-circle {
        margin-top: 15px;
    }
}
.about-more-circle a {
  display: inline-block;
  text-decoration: none;
}
.about-more-circle img {
  max-width: 135px;
  animation: agencycirclerotate 25s infinite linear;
}
@media only screen and (max-width: 767px) {
    .about-more-circle img {
        max-width: 80px;
    }
}
@media only screen and (max-width: 991px) {
    .about-more-circle img {
        max-width: 115px;
    }
}
@keyframes agencycirclerotate{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
.about-img-2 {
  background: url(../img/seo/about-bg-star.svg) no-repeat;
  background-position: top left 10px;
  background-size: 77px auto;
  padding-top: 100px;
}
@media only screen and (max-width: 767px) {
    .about-img-2 {
        background-size: 45px auto;
        padding-top: 55px;
    }
}
@media only screen and (max-width: 767px) {
    .about-img-1, .about-img-2 {
        width: calc(50% - 10px);
    }
}
.about-img-2 img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
    .about-img-2 img {
        width: 100%;
    }
}
@media only screen and (max-width: 991px) {
    .about-img-2 img {
        width: 100%;
    }
}
.about-agency-item {
  position: relative;
  background-color: 000000;
  border: 1px solid #FFFFFF1A;
  border-radius: 20px;
  display: flex;
  margin-bottom: 30px;
  padding: 30px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
    .about-agency-item {
        padding: 20px 15px;
    }
}
@media only screen and (max-width: 991px) {
    .about-agency-item {
        margin-bottom: 20px;
        padding: 20px;
    }
}
.about-agency-item:last-child{
	margin-bottom: 0;
}
.about-agency-item::before {
  content: '';
  display: block;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 26.48%, rgba(0, 0, 0, 0) 155.74%);
  width: 100%;
  height: 0;
  transition: all 0.4s ease-in-out;
}
.about-agency-item:hover:before, .about-agency-item.active:before {
  height: 100%;
  bottom: auto;
  top: 0;
}

.about-agency-item .icon-box {
  margin-right: 20px;
}
@media only screen and (max-width: 991px) {
    .about-agency-item .icon-box {
        margin-right: 15px;
    }
}
.about-agency-item .icon-box img {
  max-width: 40px;
}
@media only screen and (max-width: 991px) {
    .about-agency-item .icon-box img {
        max-width: 35px;
    }
}
.agency-item-content {
  width: calc(100% - 60px);
}
@media only screen and (max-width: 991px) {
    .agency-item-content {
        width: calc(100% - 50px);
    }
}
.agency-item-content h3 {
  font-size: 22px;
  text-transform: capitalize;
  margin-bottom: 15px;
  color: var(--white);
}
@media only screen and (max-width: 767px) {
    .agency-item-content h3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 991px) {
    .agency-item-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
}
.agency-item-content p {
  margin: 0;
}

.our-services-seo-seo {
    position: relative;
    padding: 80px 0;
}
@media only screen and (max-width: 991px) {
    .our-services-seo-seo {
        position: initial;
        margin-bottom: 30px;
    }
}
.our-services-seo::before {
    content: '';
    display: block;
    position: absolute;
    left: -10px;
    background: url(../img/seo/section-bg-shape-2.png) no-repeat;
    background-position: left bottom;
    background-size: contain;
    width: 285px;
    height: 285px;
    opacity: 50%;
    animation: chainrotate 10s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}
@keyframes chainrotate{
	from{
		transform: translateY(0) rotate(0deg);
	}
	to{
		transform: translateY(-100%) rotate(360deg);
	}
}
.our-services-seo-content {
    position: sticky;
    top: 30px;
}
.section-title {
    margin-bottom: 40px;
}
@media only screen and (max-width: 991px) {
    .section-title {
        margin-bottom: 30px;
    }
}
.our-services-seo-content .our-agency-circle {
    margin-top: 60px;
}
@media only screen and (max-width: 991px) {
    .our-agency-circle {
        text-align: center;
    }
}
.our-agency-circle a {
    position: relative;
    display: inline-flex;
    z-index: 2;
}
.our-agency-circle .agency-circle-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 90px;
    width: 90px;
    background: var(--orange);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .our-agency-circle .agency-circle-arrow {
        height: 70px;
        width: 70px;
    }
}
@media only screen and (max-width: 991px) {
    .our-agency-circle .agency-circle-arrow {
        height: 80px;
        width: 80px;
    }
}
.our-agency-circle .agency-circle-arrow img {
    max-width: 38px;
    transition: all 0.4s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .our-agency-circle .agency-circle-arrow img {
        max-width: 24px;
    }
}
@media only screen and (max-width: 991px) {
    .our-agency-circle .agency-circle-arrow img {
        max-width: 30px;
    }
}
.our-agency-circle a figure img {
    max-width: 200px;
    animation: agencycirclerotate 25s infinite linear;
}
@media only screen and (max-width: 767px) {
    .our-agency-circle a figure img {
        max-width: 140px !important;
    }
}
@media only screen and (max-width: 991px) {
    .our-agency-circle a figure img {
        max-width: 160px !important;
    }
}
@keyframes agencycirclerotate{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
.our-services-seo-list {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.service-item {
    position: relative;
    background: url(../img/seo/service-bg-shape.svg) no-repeat;
    background-position: top left;
    background-size: auto;
    width: calc(50% - 15px);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border: 1px solid #FFFFFF1A;
    border-radius: 30px;
    padding: 30px;
    overflow: hidden;
}
@media only screen and (max-width: 767px) {
    .service-item {
        width: 100%;
    }
}
@media only screen and (max-width: 991px) {
    .service-item {
        padding: 20px;
    }
}
.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1B1B1B;
    opacity: 40%;
    height: 100%;
    width: 100%;
}
.service-item .icon-box {
    position: relative;
    margin-bottom: 30px;
    z-index: 1;
}
@media only screen and (max-width: 991px) {
    .service-item .icon-box, .service-item .service-title {
        margin-bottom: 20px;
    }
}
.service-item .icon-box img {
    max-width: 40px;
}
.service-item .service-title {
    position: relative;
    margin-bottom: 30px;
    z-index: 1;
}
@media only screen and (max-width: 991px) {
    .service-item .icon-box, .service-item .service-title {
        margin-bottom: 20px;
    }
}
.service-item .service-title h3 {
    font-size: 22px;
}
@media only screen and (max-width: 767px) {
    .service-item .service-title h3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 991px) {
    .service-item .service-title h3 {
        font-size: 20px;
    }
}
.service-item .service-title h3 a {
    color: var(--white);
    text-decoration: none;
}
.service-image {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
}
.service-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    opacity: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 1;
}
.service-image figure img {
    width: 100%;
    aspect-ratio: 1 / 0.59;
    object-fit: cover;
    border-radius: 20px;
    transition: all 0.4s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .service-image figure img {
        aspect-ratio: 1 / 0.53;
    }
}
.readmore-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}
@media only screen and (max-width: 991px) {
    .readmore-btn a {
        width: 70px;
        height: 70px;
    }
}
.service-image .readmore-btn a {
    height: 50px;
    width: 50px;
}
.readmore-btn a {
    display: block;
    background-color: var(--orange);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.service-image .readmore-btn a img {
    max-width: 24px;
}
@media only screen and (max-width: 991px) {
    .readmore-btn a img {
        max-width: 26px;
    }
}
.our-service-footer {
    margin-top: 60px;
}
@media only screen and (max-width: 767px) {
    .our-service-footer {
        text-align: center;
    }
}
@media only screen and (max-width: 991px) {
    .our-service-footer {
        margin-top: 30px;
    }
}
.our-service-footer p {
    margin-bottom: 0;
}
.our-service-footer p a {
    font-weight: 700;
    text-transform: capitalize;
    text-decoration: underline;
    color: var(--orange);
    transition: all 0.3s ease-in-out;
}

/* our-crafting section  */
.our-crafting-section::before{
  content: '';
  display: block;
  position: absolute;
  left: -10px;
  bottom: 400px;
  background: url(../img/seo/section-bg-shape-2.png) no-repeat;
  background-position: left bottom;
  background-size: contain;
  width: 285px;
  height: 285px;
  opacity: 50%;
  animation: chainrotate 10s infinite linear;
  animation-direction: alternate;
  z-index:-1;
}

 /* how-it-work  */
.how-it-work {
    padding: 80px 0;
}
@media only screen and (max-width: 991px) {
    .how-it-work {
        padding: 40px 0;
    }
}
@media only screen and (max-width: 991px) {
    .how-it-work-content {
        margin-bottom: 30px;
    }
}
.how-work-step-box {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 0;
}
@media only screen and (max-width: 767px) {
    .how-work-step-box {
        gap: 30px 0;
    }
}
.how-work-step-item {
    position: relative;
    width: 25%;
    border-top: 1px solid #ffffff1a;
    padding: 60px 30px 0 0;
}
@media only screen and (max-width: 767px) {
    .how-work-step-item {
        width: 100%;
        padding: 20px 0px 0 0;
    }
}
@media only screen and (max-width: 991px) {
    .how-work-step-item {
        padding: 30px 20px 0 0;
    }
}
.how-work-step-item::before {
    content: '\f192';
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    font-size: 20px;
    color: var(--orange);
    top: -15px;
    left: 0;
    transition: all 0.4s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .how-work-step-item::before {
        font-size: 16px;
        top: -9px;
    }
}
.how-work-step-item h2 {
    font-size: 100px;
    color: transparent;
    stroke-width: 1px;
    -webkit-text-stroke-width: 1px;
    stroke: var(--orange);
    -webkit-text-stroke-color: var(--orange);
    margin-bottom: 15px;
    transition: all 0.4s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .how-work-step-item h2 {
        font-size: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .how-work-step-item h2 {
        font-size: 70px;
    }
}
.how-work-step-item h3 {
    font-size: 22px;
    text-transform: capitalize;
    margin-bottom: 15px;
    color: var(--white);
}
@media only screen and (max-width: 767px) {
    .how-work-step-item h3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 991px) {
    .how-work-step-item h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
}
.how-work-step-item p {
    margin-bottom: 0;
}

/* why-choose-us  */
.why-choose-us {
    position: relative;
    padding: 80px 0;
}
@media only screen and (max-width: 991px) {
    .why-choose-us {
        padding: 40px 0;
    }
}
.why-choose-us::before {
    content: '';
    display: block;
    position: absolute;
    right: -70px;
    top: 200px;
    background: url(../img/seo/section-bg-shape-3.png) no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: 50%;
    width: 307px;
    height: 307px;
    animation: roundrotate 10s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}
@media only screen and (max-width: 991px) {
    .why-choose-us::before {
        top: 40px;
        width: 180px;
        height: 180px;
        opacity: 30%;
    }
}
@keyframes roundrotate{
	from{
		transform: translate(0, -50%) rotate(0deg);
	}
	to{
		transform: translate(0, 50%) rotate(360deg);
	}
}
.why-choose-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
@media only screen and (max-width: 991px) {
    .why-choose-boxes {
        margin-bottom: 30px;
    }
}
.why-choose-counter.why-choose-counter-img {
    background: transparent;
    padding: 0;
    overflow: hidden;
    display: block;
}
@media only screen and (max-width: 767px) {
    .why-choose-counter {
        width: 100% !important;
        padding: 20px !important;
    }
}
@media only screen and (max-width: 991px) {
    .why-choose-counter {
        padding: 30px;
    }
}
.why-choose-counter::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--secondry-color);
    opacity: 80%;
    z-index: -1;
}
.why-choose-counter.why-choose-counter-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.9886;
    object-fit: cover;
    border-radius: 30px;
}
.why-choose-counter {
    position: relative;
    width: calc(50% - 15px);
    height: auto;
    background: url(../img/seo/why-choose-counter-bg.svg) no-repeat;
    background-position: top left;
    background-size: auto;
    border: 1px solid #FFFFFF1A;
    border-radius: 30px;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 40px;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
}
.why-choose-counter-title {
    margin-bottom: 145px;
}
@media only screen and (max-width: 767px) {
    .why-choose-counter-title {
    margin-bottom: 0px;
}
}
.why-choose-counter-title h3 {
    display: inline-block;
    position: relative;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    padding-left: 24px;
}
.why-choose-counter-title h3::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url(../img/seo/icon-sub-heading.svg) no-repeat;
    background-position: left center;
    background-size: cover;
    width: 16px;
    height: 16px;
}
.why-choose-counter-content h2 {
    font-size: 60px;
    color: var(--orange);
    margin-bottom: 20px;
}
.why-choose-counter-content p {
    margin: 0;
}
@media only screen and (max-width: 767px) {
    .why-choose-image img {
        width: 100%;
    }
}
@media only screen and (max-width: 991px) {
    .why-choose-image img {
        width: 100%;
    }
}
.why-choose-image figure {
    display: block;
    border-radius: 30px;
    overflow: hidden;
}
.section-btn {
    text-align: right;
}
@media only screen and (max-width: 991px) {
    .section-btn {
        text-align: left;
        margin-top: 15px;
    }
}
/* our-projects  */

.our-projects{
  position: relative;
  padding: 80px 0 50px;
}
@media only screen and (max-width: 991px) {
    .our-projects {
        padding: 40px 0 10px;
    }
}
.our-projects::before {
    content: '';
    display: block;
    position: absolute;
    left: -50px;
    top: 35%;
    background: url(../img/seo/section-bg-shape-4.png) no-repeat;
    background-position: left top;
    background-size: contain;
    width: 267px;
    height: 267px;
    opacity: 50%;
    animation: ringrotate 15s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}
@media only screen and (max-width: 991px) {
    .our-projects::before {
        top: 0;
        width: 180px;
        height: 180px;
        opacity: 30%;
    }
}

@keyframes ringrotate{
	from{
		transform: translateY(0) rotate(0deg);
	  }
	to{
		transform: translateY(150%) rotate(360deg);
	}
}

.project-item {
    position: relative;
    border: 1px solid #FFFFFF1A;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .project-item {
        padding: 20px;
    }
}
.project-item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondry-color);
    height: 100%;
    width: 100%;
    opacity: 40%;
}
.project-image {
    position: relative;
    margin-bottom: 30px;
    border-radius: 30px;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .project-image::before, .project-image, .project-image figure img {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .project-image {
        margin-bottom: 20px;
    }
}
.project-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondry-color);
    height: 100%;
    width: 100%;
    border-radius: 30px;
    opacity: 50%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 1;
}
@media only screen and (max-width: 991px) {
    .project-image::before, .project-image, .project-image figure img {
        border-radius: 20px;
    }
}
.project-item:hover .project-image::before {
	transform: scale(1);
}
.project-item:hover .project-image figure img{
	transform: scale(1.05);
}

.project-item:hover .readmore-btn{
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}
.project-image figure img {
    width: 100%;
    aspect-ratio: 1 / 0.735;
    object-fit: cover;
    border-radius: 30px;
    transition: all 0.4s ease-in-out;
}
.project-content {
    position: relative;
    z-index: 1;
}
.project-content p {
    text-transform: capitalize;
    color: var(--orange);
    margin-bottom: 15px;
}
@media only screen and (max-width: 991px) {
    .project-content p {
        margin-bottom: 10px;
    }
}
.project-content h3 {
    font-size: 22px;
}
@media only screen and (max-width: 767px) {
    .project-content h3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 991px) {
    .project-content h3 {
        font-size: 20px;
    }
}
.project-content h3 a {
    text-decoration: none;
    color: #ffffff;
}

/* social-media-marketing  */
.hero {
    position: relative;
    z-index: 0;
    /* padding: 202px 0 90px; */
}
@media only screen and (max-width: 991px) {
    .hero {
        padding: 150px 0 50px;
    }
}
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    opacity: 90%;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.hero .hero-bg-video {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.section-title h1 {
    font-size: 65px;
    font-weight: 300;
    line-height: 1.2em;
    color: var(--white);
    margin-bottom: 0;
    cursor: none;
}
@media only screen and (max-width: 767px) {
    .section-title h1 {
        font-size: 30px !important;
    }
}
@media only screen and (max-width: 991px) {
    .section-title h1 {
        font-size: 50px;
    }
}
.hero .hero-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-content {
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 991px) {
    .hero-content {
        margin-bottom: 30px;
    }
}
.hero-content .section-title p {
    font-size: 20px;
}
@media only screen and (max-width: 767px) {
    .hero-content .section-title p {
        font-size: 16px;
    }
}
@media only screen and (max-width: 991px) {
    .hero-content .section-title p {
        font-size: 18px;
    }
}
.hero-images {
    position: relative;
    text-align: end;
    padding-left: 50px;
    z-index: 2;
}
@media only screen and (max-width: 767px) {
    .hero-images {
        max-width: 100%;
        padding-left: 15px;
    }
}
@media only screen and (max-width: 991px) {
    .hero-images {
        max-width: 520px;
        margin: 0 auto;
    }
}
.hero-images::before {
    content: '';
    position: absolute;
    bottom: 165px;
    left: 50px;
    background: url(../img/social-media-marketing/arrow-hero-client-box.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: cover;
    width: 144px;
    height: 65px;
    z-index: 1;
}
.hero-image {
    position: relative;
    padding-right: 30px;
}
@media only screen and (max-width: 767px) {
    .hero-image {
        padding-right: 15px;
    }
}
.hero-image figure img {
    width: 100%;
    aspect-ratio: 1 / 1.26;
    object-fit: contain;
}
.icon-hero-img-1 {
    position: absolute;
    top: 150px;
    left: 0;
}
@media only screen and (max-width: 767px) {
    .icon-hero-img-1 {
        top: 50px;
    }
}
.icon-hero-img-1, .icon-hero-img-2 {
    animation: iconheroimg 3s infinite alternate;
}
@media only screen and (max-width: 767px) {
    .icon-hero-img-2 figure, .icon-hero-img-1 figure {
        width: 60px;
        height: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .icon-hero-img-2 figure img, .icon-hero-img-1 figure img{
        max-width: 30px;
    }
}
@keyframes iconheroimg{
    0%{
        transform: translateX(0)
    }

    100%{
        transform: translateY(-50px)
    }
}

.icon-hero-img-2 figure, .icon-hero-img-1 figure {
    position: relative;
    background-color: var(--orange);
    border-radius: 50%;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-hero-img-2 figure::before, .icon-hero-img-1 figure::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}
.icon-hero-img-2 {
    position: absolute;
    bottom: 250px;
    right: 0px;
}

@media only screen and (max-width: 767px) {
    .icon-hero-img-2 {
        bottom: 150px;
    }
}
.icon-hero-img-2 figure img, .icon-hero-img-1 figure img {
    position: relative;
    max-width: 41px;
    aspect-ratio: auto;
    z-index: 1;
}
.satisficed-client-box {
    position: absolute;
    bottom: 50px;
    left: 100px;
    border-radius: 10px;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    display: inline-flex;
    padding: 20px;
    overflow: hidden;
    animation: satisficedbox 2.5s infinite alternate;
    z-index: 2;
}
@media only screen and (max-width: 767px) {
    .satisficed-client-box {
        bottom: 30px;
        left: 120px;
        padding: 10px;
    }
}
@media only screen and (max-width: 991px) {
    .satisficed-client-box {
        padding: 15px;
    }
}
@keyframes satisficedbox{
    0%{
        transform: translateX(0)
    }

    100%{
        transform: translateX(-100px)
    }
}
.satisficed-client-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;
    opacity: 20%;
    width: 100%;
    height: 100%;
}
.satisficed-client-box .icon-box {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--orange);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}
.satisficed-client-box .icon-box img {
    position: relative;
    max-width: 22px;
    z-index: 1;
}
.satisficed-client-content {
    position: relative;
    width: calc(100% - 50px);
    text-align: left;
    z-index: 1;
}
.satisficed-client-content h3 {
    font-size: 24px;
    margin-bottom: 5px;
    transition: all 0.4s ease-in-out;
    color: #fff;
}
@media only screen and (max-width: 767px) {
    .satisficed-client-content h3 {
        font-size: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .satisficed-client-content h3 {
        font-size: 22px;
    }
}
.satisficed-client-content p {
    text-transform: capitalize;
    margin-bottom: 0;
    transition: all 0.4s ease-in-out;
}
.satisficed-client-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    height: 100%;
    width: 0;
    transition: all 0.4s ease-in-out;
}
/* social-media-about-us  */
.social-media-about-us {
    position: relative;
    padding: 160px 0 80px;
}
@media only screen and (max-width: 991px) {
    .social-media-about-us {
        padding: 80px 0 40px;
    }
}
.social-media-about-us::before {
    content: '';
    display: block;
    position: absolute;
    left: -70px;
    bottom: 10%;
    background: url(../img/social-media-marketing/section-bg-shape-1.png) no-repeat;
    background-position: left bottom;
    background-size: contain;
    width: 285px;
    height: 285px;
    opacity: 50%;
    animation: circlerotate 10s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}
@media only screen and (max-width: 991px) {
    .social-media-about-us::before {
        left: -40px;
        height: 180px;
        width: 180px;
        opacity: 30%;
    }
}
@keyframes circlerotate{
	from{
		transform: translateY(0) rotate(0deg);
	}
	to{
		transform: translateY(-100%) rotate(360deg);
	}
}
.social-media-about-us-box {
    position: relative;
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}
@media only screen and (max-width: 991px) {
    .social-media-about-us-box {
        gap: 30px;
    }
}

.social-media-about-us-image, .social-media-about-us-content {
    width: calc(50% - 30px);
}
@media only screen and (max-width: 991px) {
    .social-media-about-us-image, .social-media-about-us-content {
        width: 100% !important;
    }
}
.social-media-about-us-img figure {
    display: block;
    border-radius: 30px;
}
.social-media-about-us-img img {
    width: 100%;
    aspect-ratio: 1 / 1.029;
    object-fit: cover;
    border-radius: 30px;
}
@media only screen and (max-width: 991px) {
    .social-media-about-us-img img {
        aspect-ratio: 1 / 0.75;
    }
}
.about-experience-box {
    max-width: 320px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 25px 30px;
}
@media only screen and (max-width: 767px) {
    .about-experience-box {
        max-width: 260px;
        margin: 20px auto;
    }
}
@media only screen and (max-width: 991px) {
    .about-experience-box {
        max-width: 290px;
    }
}
.about-experience-counter h2 {
    font-size: 60px;
    color: var(--orange);
}
@media only screen and (max-width: 767px) {
    .about-experience-counter h2 {
        font-size: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .about-experience-counter h2 {
        font-size: 45px;
    }
}
.about-experience-content p {
    margin-bottom: 0;
}
.about-experience-content p span {
    display: block;
    color: var(--orange);
}
.social-media-about-us-image, .social-media-about-us-content {
    width: calc(50% - 30px);
}
.social-media-about-us-body {
    position: relative;
    padding: 30px;
    border-left: 4px solid var(--orange);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 20px;
    overflow: hidden;
}
@media only screen and (max-width: 767px) {
    .social-media-about-us-body {
        padding: 15px;
    }
}
@media only screen and (max-width: 991px) {
    .social-media-about-us-body {
        padding: 20px;
    }
}
.social-media-about-us-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary-color);
    opacity: 40%;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.social-media-about-us-body p {
    font-size: 18px;
    margin-bottom: 0;
    transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .social-media-about-us-body p {
        font-size: 14px;
    }
}
@media only screen and (max-width: 991px) {
    .social-media-about-us-body p {
        font-size: 16px;
    }
}
.social-media-about-us-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--orange);
    height: 100%;
    width: 0;
    transition: all 0.4s ease-in-out;
    z-index: -1;
}
.social-media-about-us-footer {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}
@media only screen and (max-width: 767px) {
    .social-media-about-us-footer {
        gap: 20px 40px;
    }
}
@media only screen and (max-width: 991px) {
    .social-media-about-us-footer {
        margin-top: 30px;
    }
}
.about-author-info {
    display: flex;
}
.about-author-content h3{
  color: var(--white);
}
@media only screen and (max-width: 767px) {
    .about-author-content h3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 991px) {
    .about-author-content h3 {
        font-size: 20px;
    }
}
.about-author-image {
    margin-right: 20px;
}
@media only screen and (max-width: 991px) {
    .about-author-image {
        margin-right: 20px;
    }
}
.about-author-image figure {
    display: block;
    border-radius: 50%;
}
.about-author-image img {
    max-width: 54px;
}
.social-media-about-us-list {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 860px;
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
    z-index: 1;
}
@media only screen and (max-width: 767px) {
    .social-media-about-us-list {
        padding: 20px;
        gap: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .social-media-about-us-list {
        position: initial;
        max-width: 100%;
        padding: 30px;
        gap: 50px;
        margin-top: 30px;
    }
}
.social-media-about-us-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary-color);
    opacity: 40%;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.about-list-item {
    position: relative;
    width: calc(33.33% - 53.33px);
}
@media only screen and (max-width: 767px) {
    .about-list-item {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }
}

.about-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: -40px;
    bottom: 0;
    background: #FFFFFF1A;
    height: 100%;
    width: 1px;
}
@media only screen and (max-width: 991px) {
    .about-list-item::before {
        right: -25px;
    }
}
.about-list-item .icon-box {
    margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {
    .about-list-item .icon-box {
        margin: 0 15px 0 0;
    }
}
@media only screen and (max-width: 991px) {
    .about-list-item .icon-box {
        margin-bottom: 20px;
    }
}
.about-list-item .icon-box img {
    max-width: 40px;
}
@media only screen and (max-width: 991px) {
    .about-list-item .icon-box img {
        max-width: 30px;
    }
}
.about-list-content h3 {
    font-size: 22px;
    text-transform: capitalize;
    color: var(--white);
}
@media only screen and (max-width: 767px) {
    .about-list-content h3 {
        font-size: 18px;
    }
}
.social-media-marketing-our-services {
    position: relative;
    padding: 80px 0;
}
@media only screen and (max-width: 991px) {
    .social-media-marketing-our-service-image {
        margin-bottom: 30px;
    }
}
.social-media-marketing-our-service-image img {
    width: 100%;
    aspect-ratio: 1 / 1.5;
    object-fit: cover;
    border-radius: 30px;
}
@media only screen and (max-width: 767px) {
    .social-media-marketing-our-service-image img {
        aspect-ratio: 1 / 1.1;
    }
}
@media only screen and (max-width: 991px) {
    .social-media-marketing-our-service-image img {
        aspect-ratio: 1 / 0.9;
    }
}
.social-media-marketing-our-services::before {
    content: '';
    display: block;
    position: absolute;
    right: -80px;
    bottom: 10%;
    background: url(../img/social-media-marketing/section-bg-shape-2.png) no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: 50%;
    width: 264px;
    height: 274px;
    animation: circlezoomrotate 10s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}
@media only screen and (max-width: 991px) {
    .our-services-seo::before {
        width: 180px;
        height: 180px;
        opacity: 30%;
    }
}
@keyframes circlezoomrotate{
	from{
		transform: translateY(0) rotate(0deg) scale(0.7);
    }
	to{
		transform: translateY(-100%) rotate(360deg) scale(1);
	}
}
.ssm-section-row {
    position: relative;
    padding-bottom: 60px;
    margin-bottom: 60px;
}
.ssm-section-row::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 0;
    background: #FFFFFF;
    opacity: 20%;
    height: 1px;
    width: calc(100% - 30px);
}
.ssm-section-row .section-title {
  width: 100%;
  max-width: 605px;
  margin-bottom: 0;
}
.our-service-image figure {
    display: block;
    border-radius: 30px;
}
.our-service-image img {
    width: 100%;
    aspect-ratio: 1 / 1.5;
    object-fit: cover;
    border-radius: 30px;
}
.service-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.ssm-service-item {
    position: relative;
    width: calc(50% - 15px);
    background: url(../img/social-media-marketing/service-item-bg-shape.svg) no-repeat;
    background-position: top center;
    background-size: auto;
    border: 1px solid #FFFFFF1A;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 30px;
    display: flex;
    padding: 40px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .ssm-service-item {
        padding: 20px;
        width: 100%;
    }
}
@media only screen and (max-width: 991px) {
    .ssm-service-item {
        padding: 30px;
    }
}
.ssm-service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondry-color);
    opacity: 40%;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.ssm-service-item .icon-box {
    margin-right: 30px;
}
.ssm-service-item .icon-box img {
    max-width: 40px;
    transition: all 0.4s ease-in-out;
}
.ssm-service-item-content {
    width: calc(100% - 70px);
}
.ssm-service-item-content h3 {
    font-size: 22px;
    text-transform: capitalize;
    margin-bottom: 25px;
    color: var(--white);
}
.ssm-service-item-content p {
    margin-bottom: 25px;
}
.ssm-service-item-content a {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    color: var(--orange);
    padding-right: 30px;
    border: none;
    text-decoration: none;
}
.ssm-service-item-content a::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    background-image: url(../img/social-media-marketing/arrow-accent.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}
.ssm-service-footer {
    text-align: center;
    margin-top: 60px;
}
.ssm-service-footer p {
    color: var(--white);
    margin: 0;
}
.ssm-service-footer p span {
    background-color: var(--orange);
    font-weight: 500;
    color: var(--white);
    border-radius: 100px;
    padding: 1px 10px;
    margin-right: 10px;
}
.ssm-service-footer a {
    font-weight: 700;
    text-decoration: underline;
    color: var(--orange);
    transition: all 0.3s ease-in-out;
}
.our-brands {
    padding: 80px 0;
}
@media only screen and (max-width: 991px) {
    .our-brands {
        padding: 40px 0;
    }
}
.our-brands-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    border: 1px solid #FFFFFF1A;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 30px;
    padding: 0 80px 80px;
    overflow: hidden;
}
@media only screen and (max-width: 767px) {
    .our-brands-box {
        padding: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .our-brands-box {
        padding: 40px;
    }
}
.our-brands-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondry-color);
    opacity: 40%;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.our-brand-contant {
    width: calc(30% - 15px);
}
.our-brand-list {
    width: calc(70% - 15px);
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
@media only screen and (max-width: 991px) {
    .our-brand-contant, .our-brand-list {
        width: 100%;
    }
}
.brand-list-item {
    position: relative;
    width: calc(33.33% - 20px);
    text-align: center;
    padding: 80px 15px 40px;
}
@media only screen and (max-width: 767px) {
    .brand-list-item {
        width: 100%;
        border-radius: 30px;
        padding: 30px 10px 20px;
        overflow: hidden;
    }
}
@media only screen and (max-width: 991px) {
    .brand-list-item {
        padding: 40px 10px 20px;
    }
}
.brand-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(360deg, var(--orange) -20.74%, var(--primary-color) 106.06%);
    height: 0;
    width: 100%;
    transition: all 0.4s ease-in-out;
    z-index: -1;
}
.brand-list-item.active:before, .brand-list-item:hover::before {
    height: 100%;
    border-radius: 0 0 30px 30px;
}
.brand-list-item .icon-box {
    position: relative;
    background-color: var(--orange);
    height: 100px;
    width: 100px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    margin-bottom: 30px;
    overflow: hidden;
}
@media only screen and (max-width: 767px) {
    .brand-list-item .icon-box {
        height: 60px;
        width: 60px;
    }
}
@media only screen and (max-width: 991px) {
    .brand-list-item .icon-box {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }
}
.brand-list-item .icon-box img {
    position: relative;
    max-width: 50px;
    z-index: 1;
}
@media only screen and (max-width: 767px) {
    .brand-list-item .icon-box img {
        max-width: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .brand-list-item .icon-box img {
        max-width: 40px;
    }
}
.brand-item-content h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: var(--white);
}
@media only screen and (max-width: 767px) {
    .brand-item-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 991px) {
    .brand-item-content h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }
}
.brand-item-content p {
    margin: 0;
}
.smm-why-choose-us {
    position: relative;
    padding: 80px 0;
}
.smm-why-choose-us::before {
    content: '';
    display: block;
    position: absolute;
    left: -70px;
    bottom: 100px;
    background: url(../img/social-media-marketing/section-bg-shape-3.png) no-repeat;
    background-position: left bottom;
    background-size: contain;
    opacity: 50%;
    width: 325px;
    height: 325px;
    animation: squrerotate 10s infinite linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 0;
}
@keyframes squrerotate{
	0%{
		transform: translate(0, 0) rotate(0deg);
    }
	50%{
		transform: translate(-50px, -50%) rotate(180deg);
	}
    100%{
        transform: translate(0, -120%) rotate(360deg);
    }
}
@media (min-width: 992px) {
    .order-lg-1 {
        order: 1 !important;
    }
}
.why-choose-images {
    position: relative;
}
@media only screen and (max-width: 767px) {
    .why-choose-images {
        max-width: 100%;
        padding: 0 10px 10px;
    }
}
@media only screen and (max-width: 991px) {
    .why-choose-images {
        width: 100%;
        margin: 30px auto 0;
    }
}
.why-choose-circle {
    position: relative;
    z-index: 2;
}
.why-choose-circle img {
    animation: infiniterotate 30s infinite linear;
    max-width: 100%;
}
@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
	  }
	to{
		transform: rotate(360deg);
	}
}
.why-choose-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 380px;
    transform: translate(-50%, -50%);
}
@media only screen and (max-width: 767px) {
    .why-choose-img {
        max-width: 180px !important;
    }
}
@media only screen and (max-width: 991px) {
    .why-choose-img {
        max-width: 360px;
    }
}
.why-choose-img img {
    width: 100%;
    aspect-ratio: 1 / 1.132;
    object-fit: cover;
}
@media (min-width: 992px) {
    .order-lg-2 {
        order: 2 !important;
    }
}
.why-choose-list-item {
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 60px;
    padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
    .why-choose-list-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .why-choose-list-item {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }
}
.why-choose-list-item h3 {
    position: relative;
    font-size: 22px;
    text-transform: capitalize;
    margin-bottom: 20px;
    padding-left: 30px;
    color: var(--white);
}
@media only screen and (max-width: 767px) {
    .why-choose-list-item h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 991px) {
    .why-choose-list-item h3 {
        font-size: 20px;
        margin-bottom: 15px;
        padding-left: 25px;
    }
}
.why-choose-list-item h3::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url(../img/social-media-marketing/icon-sub-heading.svg) no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}
.why-choose-list-item p {
    margin-bottom: 0;
}
.why-choose-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
@media only screen and (max-width: 767px) {
    .why-choose-list-item:last-child, .why-choose-list-item:nth-child(2n + 2) {
        border-bottom: 1px solid var(--divider-color);
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}
.our-feature {
    padding: 80px 0;
}
.our-feature::before {
  content: '';
  display: block;
  position: absolute;
  right: -70px;
  top: 50%;
  background: url(../img/seo/section-bg-shape-1.png) no-repeat;
  background-position: right center;
  background-size: contain;
  width: 285px;
  height: 285px;
  opacity: 50%;
  transform: translateY(-50%) rotate(-50deg);
  animation: roundrotate 10s infinite linear;
  animation-direction: alternate;
  z-index: -1;
}
@media only screen and (max-width: 991px) {
    .our-feature {
        padding: 40px 0;
    }
}
@media only screen and (max-width: 991px) {
    .our-feature-content {
        margin-bottom: 30px;
    }
}
.our-feature-body {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}
@media only screen and (max-width: 767px) {
    .our-feature-body {
        gap: 20px;
    }
}
.our-feature-body-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: -25px;
    bottom: 0;
    background: var(--orange);
    height: 100%;
    width: 2px;
}
@media only screen and (max-width: 767px) {
    .our-feature-body-content, .our-feature-body-item {
        width: 100% !important;
    }
}
@media only screen and (max-width: 767px) {
    .our-feature-body-item::before {
        top: auto;
        right: 0;
        bottom: -10px;
        height: 1px;
        width: 100%;
    }
}
.our-feature-body-item img {
    max-width: 60px;
    margin-right: 20px;
}
@media only screen and (max-width: 767px) {
    .our-feature-body-item img {
        max-width: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .our-feature-body-item img {
        max-width: 50px;
        margin-right: 10px;
    }
}
.our-feature-body-item h3 {
    font-size: 22px;
    color: var(--white);
}
@media only screen and (max-width: 767px) {
    .our-feature-body-item h3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 991px) {
    .our-feature-body-item h3 {
        font-size: 20px;
    }
}
.our-feature-body-content {
    width: calc(50% - 25px);
}
.our-feature-body-content p {
    margin-bottom: 0;
    color: var(--white);
}
.our-feature-btn {
    margin-top: 40px;
}
@media only screen and (max-width: 991px) {
    .our-feature-btn {
        margin-top: 30px;
    }
}
.our-feature-images {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    padding-left: 30px;
}
@media only screen and (max-width: 767px) {
    .our-feature-images {
        gap: 20px;
        padding: 0 0 32px 0;
    }
}
.our-feature-img-1, .our-feature-img-2 {
    width: calc(50% - 15px);
}
@media only screen and (max-width: 767px) {
    .our-feature-img-1, .our-feature-img-2 {
        width: calc(50% - 10px);
    }
}
.our-feature-image figure {
    display: block;
    border-radius: 30px;
}
@media only screen and (max-width: 767px) {
    .our-feature-image figure, .our-feature-image img {
        border-radius: 20px;
    }
}
.our-feature-img-1.our-feature-image img {
    aspect-ratio: 1 / 1.822;
}
.our-feature-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
}
.our-feature-img-2 .our-feature-image {
    margin-bottom: 30px;
}
.our-feature-img-2 .our-feature-image:last-child {
    margin-bottom: 0;
}
.our-feature-img-2 .our-feature-image img {
    aspect-ratio: 1 / 0.858;
}
.our-client-box {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    max-width: 210px;
    background-color: var(--orange);
    border-radius: 10px;
    display: flex;
    padding: 20px 18px;
    overflow: hidden;
    animation: clientboxmove 3s infinite linear alternate;
}
@keyframes clientboxmove{
	50%{
		left: 40px;
	}
}
.our-feature-body-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: calc(50% - 25px);
}
.our-client-box .icon-box {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    z-index: 1;
}
.our-client-box .icon-box img {
    max-width: 22px;
    filter: brightness(0) invert(1);
}
.client-box-content {
    position: relative;
    width: calc(100% - 50px);
    z-index: 1;
}
.our-client-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    height: 100%;
    width: 0;
    transition: all 0.4s ease-in-out;
}
.client-box-content h3 {
    font-size: 24px;
    margin-bottom: 5px;
    color: var(--primary-color);
}
.client-box-content p {
    color: var(--primary-color);
    margin-bottom: 0;
}

.key-facts {
    position: relative;
    padding: 80px 0;
}
@media only screen and (max-width: 991px) {
    .key-facts {
        padding: 40px 0;
    }
}
.key-facts::before {
    content: '';
    display: block;
    position: absolute;
    right: -80px;
    top: 50%;
    background: url(../img/social-media-marketing/section-bg-shape-4.png) no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: 50%;
    width: 280px;
    height: 288px;
    transform: translateY(-70%);
    animation: roundrotate 10s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}
@media only screen and (max-width: 991px) {
    .key-facts::before {
        right: -40px;
        height: 180px;
        width: 180px;
        opacity: 30%;
    }
}
.key-facts-box {
    position: relative;
    height: 100%;
    border: 1px solid #FFFFFF1A;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .key-facts-box {
        height: auto;
        display: block;
    }
}
.key-facts-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondry-color);
    opacity: 40%;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.key-facts-image {
    width: 524px;
    height: 100%;
}
@media only screen and (max-width: 991px) {
    .key-facts-image {
        width: 100%;
        height: auto;
    }
}
.key-facts-image figure {
    height: 100%;
    display: block;
}
.key-facts-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.489;
    object-fit: cover;
}
@media only screen and (max-width: 767px) {
    .key-facts-image img {
        aspect-ratio: 1 / 1.25;
        object-position: center center;
    }
}
@media only screen and (max-width: 991px) {
    .key-facts-image img {
        height: auto;
        aspect-ratio: 1 / 0.9;
        object-position: top center;
    }
}
.key-facts-content {
    width: calc(100% - 524px);
    height: 100%;
    padding: 80px;
}
@media only screen and (max-width: 767px) {
    .key-facts-content {
        padding: 30px 20px;
    }
}
@media only screen and (max-width: 991px) {
    .key-facts-content {
        width: 100%;
        height: auto;
        padding: 40px;
    }
}
.key-facts-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
    .key-facts-header {
        gap: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .key-facts-header {
        margin-bottom: 30px;
    }
}
.key-facts-header .section-title {
    width: calc(80% - 15px);
    margin: 0;
}
@media only screen and (max-width: 767px) {
    .free-consultation-circle, .key-facts-header .section-title {
        width: 100%;
    }
}
.free-consultation-circle {
    width: calc(20% - 15px);
    text-align: end;
}
.free-consultation-circle a {
    display: block;
}
.free-consultation-circle img {
    max-width: 100px;
    animation: infiniterotate 30s infinite linear;
}
@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
	  }
	to{
		transform: rotate(360deg);
	}
}
.key-facts-body {
    display: flex;
    flex-wrap: wrap;
}
.key-facts-couner {
    padding: 50px 50px 50px 0;
    border-bottom: 1px solid #FFFFFF1A;
    border-right: 1px solid #FFFFFF1A;
}
@media only screen and (max-width: 767px) {
    .key-facts-couner {
        width: 100% !important;
        border-bottom: 1px solid #FFFFFF1A;
        border-right: none;
        margin-bottom: 20px;
        padding: 0 0 20px 0 !important;
    }
}
@media only screen and (max-width: 991px) {
    .key-facts-couner {
        padding: 30px 30px 30px 0;
    }
}
.key-facts-couner {
    width: 50%;
}
.key-facts-couner:nth-child(-n + 2) {
    padding-top: 50px;
}
@media only screen and (max-width: 991px) {
    .key-facts-couner:nth-child(-n + 2) {
        padding-top: 0;
    }
}
.key-facts-couner:nth-last-child(-n + 2) {
    padding-bottom: 0;
    border-bottom: none;
}
@media only screen and (max-width: 767px) {
    .key-facts-couner:nth-last-child(-n + 2) {
        border-bottom: 1px solid #FFFFFF1A;
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .key-facts-couner:nth-last-child(-n + 2) {
        padding-bottom: 0;
    }
}
.key-facts-couner:nth-of-type(2n + 2) {
    padding: 50px 0 50px 50px;
    border-right: none;
}
@media only screen and (max-width: 767px) {
    .key-facts-couner:nth-of-type(2n + 2) {
        padding: 0 0 20px 0;
    }
}
@media only screen and (max-width: 991px) {
    .key-facts-couner:nth-of-type(2n + 2) {
        padding: 30px 0 30px 30px;
    }
}
@media only screen and (max-width: 767px) {
    .key-facts-couner:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}
.key-facts-couner h2 {
    font-size: 60px;
    color: var(--orange);
    margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
    .key-facts-couner h2 {
        font-size: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .key-facts-couner h2 {
        font-size: 45px;
    }
}
.key-facts-couner p {
    margin: 0;
}
.our-agency-circle a {
    position: relative;
    display: inline-flex;
    z-index: 2;
}
.our-agency-circle a figure img {
    max-width: 200px;
    animation: agencycirclerotate 25s infinite linear;
}
@keyframes agencycirclerotate{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
.our-agency-circle .agency-circle-arrow {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 90px;
    width: 90px;
    background: var(--orange);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.our-agency-circle .agency-circle-arrow img {
    max-width: 38px;
    transition: all 0.4s ease-in-out;
}
.how-work-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    border: 1px solid #FFFFFF1A;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    overflow: hidden;
}
.how-work-list-image {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    overflow: hidden;
    width: 0;
    transition: all 0.6s ease-in-out;
}
.how-work-list-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    opacity: 80%;
    height: 100%;
    width: 100%;
    transition: all 0.5s ease-in-out;
    z-index: 0;
}
.how-work-list-image img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
}
.how-work-list-content, .how-work-list-no {
    position: relative;
    z-index: 1;
    color: #ffffff;
}
.how-work-list-content h3 {
    font-size: 22px;
    text-transform: capitalize;
    margin-bottom: 15px;
    color: #ffffff;
}
.how-work-list-content p {
    margin-bottom: 0;
}
.how-work-list-content, .how-work-list-no {
    position: relative;
    z-index: 1;
}
.how-work-list-item:hover .how-work-list-no h2, .how-work-list-item.active .how-work-list-no h2 {
    color: var(--orange);
}
.how-work-list-item.active .how-work-list-image,
.how-work-list-item:hover .how-work-list-image{
	left: 0;
	width: 100%;
}

/* mobil-app-development  */
.about-container-wrapper::before{
  content: '';
  display: block;
  position: absolute;
  left: -70px;
  bottom: 10%;
  background: url(../img/social-media-marketing/section-bg-shape-1.png) no-repeat;
  background-position: left bottom;
  background-size: contain;
  width: 285px;
  height: 285px;
  opacity: 50%;
  animation: circlerotate 10s infinite linear;
  animation-direction: alternate;
  z-index: 0;
}
.about-wrapper.style1 .about-thumb {
    position: relative;
}
.about-wrapper.style1 .about-thumb .bg {
    position: absolute;
    bottom: 0px;
    right: 0;
    z-index: 1;
    width: 465px;
    height: 350px;
    border-radius: 0px 0px 50px 50px;
    background: #E8E5FD;
}
.about-wrapper.style1 .about-thumb .thumbShape1 {
    position: absolute;
    top: -50;
    left: -20px;
    z-index: 1;
}
.cir36 {
    animation: cir36 20s linear infinite;
    -webkit-animation: cir36 20s linear infinite;
}
@keyframes cir36{
100% {
    transform: rotate(360deg);
}
}

.about-wrapper.style1 .about-thumb .thumbShape2 {
    position: absolute;
    bottom: 0;
    right: -20px;
    z-index: 1;
}
.about-wrapper.style1 .about-thumb .thumbShape3 {
    position: absolute;
    top: -10px;
    left: 20px;
    z-index: 1;
}
.float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
@keyframes float-bob-y{
  0% {
    transform: translateY(-30px);
}
50% {
    transform: translateY(-10px);
}
}
.about-wrapper.style1 .about-thumb .thumbShape4 {
    position: absolute;
    top: 163px;
    left: 177px;
    z-index: 1;
}
.about-wrapper.style1 .about-thumb .main-thumb {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: end;
}
.about-wrapper.style1 .about-thumb .absolute-thumb {
    padding: 15px;
    background: var(--white);
    position: absolute;
    bottom: -10px;
    left: -10px;
    z-index: 3;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.float-bob-x {
    -webkit-animation-name: float-bob-x;
    animation-name: float-bob-x;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
@keyframes float-bob-x {
	0% {
		-webkit-transform: translateX(30px);
		transform: translateX(30px);
	}

	50% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}

	100% {
		-webkit-transform: translateX(30px);
		transform: translateX(30px);
	}
}

.section-title .section-desc {
    color: var(--white);
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
}
.about-wrapper.style1 .about-content .checklist {
    margin-bottom: 30px;
}
.checklist.style1 li {
    color: var(--para-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.36px;
    margin-bottom: 20px;
}
.checklist.style1 li img {
    margin-right: 10px;
}
.theme-btn {
    display: inline-block;
    position: relative;
    padding: 20px 36px;
    gap: 10px;
    color: var(--white);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: var(--orange);
    text-decoration: none;
    z-index: 1;
    line-height: 1;
    overflow: hidden;
    border: none;
    border-radius: 100px; 
}
.theme-btn:before {
    transition-duration: 800ms;
    position: absolute;
    width: 210%;
    height: 290%;
    content: "";
    top: 162%;
    left: 50%;
    background: var(--title);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%) rotate(-8deg);
    border-radius: 80%;
    z-index: -1;
}
.theme-btn i, .theme-btn svg {
    margin-left: 6px;
}
.advantage-wrapper.style1 {
    border-radius: 50px;
    background: #212122;
}
.section-padding {
    padding: 120px 0;
}
.advantage-content{
  position: relative;
  left: 22px;
}
.advantage-wrapper.style1 .advantage-content .checklist-wrapper {
    margin-bottom: 30px;
}
.checklist-wrapper.style1 {
    display: flex;
    align-items: center;
    gap: 40px;
}
@media only screen and (max-width: 767px) {
    .checklist-wrapper.style1 {
    display: block;
}
}


.advantage-wrapper.style1 .advantage-thumb {
    position: relative;
}
@media only screen and (max-width: 767px) {
    .advantage-wrapper.style1 .advantage-thumb {
    display: none;
}
}

.advantage-wrapper.style1 .advantage-thumb .thumb1 {
    position: relative;
    z-index: 1;
}
.img-custom-anim-top {
    animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
}
@keyframes img-anim-top {
	0% {
		transform: translateY(-5%);
		clip-path: inset(0 0 100% 0);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}
.advantage-wrapper.style1 .advantage-thumb .thumb2 {
    max-width: 100%;
    right: 0px;
}
.advantage-wrapper.style1 .advantage-thumb .thumb2 {
    position: absolute;
    z-index: 2;
    right: 50px;
    bottom: 0;
}
.img-custom-anim-right {
    animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}
@keyframes img-anim-right {
	0% {
		transform: translateX(5%);
		clip-path: inset(0 0 0 100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}
.advantage-wrapper.style1 .advantage-thumb .thumb2 img {
    max-width: 100%;
}
.advantage-wrapper.style1 .advantage-thumb .shape1 {
    position: absolute;
    bottom: 0;
    right: 20px;
}
.advantage-wrapper.style1 .advantage-thumb .shape1 img {
    max-width: 100%;
}
.fancy-box.style2 {
    display: flex;
    align-items: center;
    gap: 19px;
    margin-bottom: 30px;
}
.fancy-box.style2 .content {
    max-width: 205px;
}
.fancy-box.style2 .content h4 {
    color: var(--orange);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -0.48px;
    margin-bottom: 1px;
}
.fancy-box.style2 .content .text {
    color: var(--para-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.32px;
}
.wcu-wrapper.style1 .wcu-thumb {
    position: relative;
}
.wcu-wrapper-style1 .wcu-thumb .main-thumb {
    position: relative;
    z-index: 3;
}
.wcu-wrapper-style1 .wcu-thumb .main-thumb img {
    max-width: 100%;
}
.wcu-wrapper-style1 .wcu-thumb .shape {
    position: absolute;
    bottom: -22px;
    max-width: 100%;
    z-index: -1;
}
.wcu-wrapper-style1 .wcu-thumb .shape img {
    max-width: 100%;
}
@media only screen and (max-width: 991px) {
    .wcu-wrapper-style1 .wcu-thumb .shape img {
    display: none;
}
}

/* mobil-web-development  */
.wd-about-us {
  position: relative;
  padding: 160px 0 80px;
}
.wd-about-us::before {
    content: '';
    display: block;
    position: absolute;
    right: -70px;
    top: 50%;
    background: url(../img/seo/section-bg-shape-1.png) no-repeat;
    background-position: right center;
    background-size: contain;
    width: 285px;
    height: 285px;
    opacity: 50%;
    transform: translateY(-50%) rotate(-50deg);
    animation: roundrotate 10s infinite linear;
    animation-direction: alternate;
    z-index: -1;
}
@media only screen and (max-width: 991px) {
    .about-us {
        padding: 80px 0 40px;
    }
}
.sisf-sis-box-counter {
    background-color: transparent;
    padding: 50px 30px 50px 30px;
    background-image: linear-gradient(135deg, #C0F55B2B 1%, #000000FA 20%);
    border: 1px solid #313131;
    border-radius: 30px 30px 30px 30px;
    margin-bottom: 30px;
    transition: 0.4s ease-in-out;
}
.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.counter-box .counter-item {
    border-right: 1px solid #2E2E2A;
}
.counter-box .counter-title h2 {
    font-weight: 400;
    line-height: 1;
    margin-bottom: 12px;
    font-size: 40px;
}
.sisf-sis-box-counter .counter-title h2 {
    color: var(--white);
}
.sisf-sis-box-counter .counter-content h3{
  color: var(--white);
  font-size: 20px;
}
.section-title .sisf-m-subtitle {
    color: var(--orange);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: 0px;
    position: relative;
    left: 10px;
}
.work-process {
    position: relative;
    background-color: transparent;
    padding: 80px 30px 0px 30px;
    background-image: linear-gradient(49deg, #121212 72%, #504237 100%);
    border: 1px solid #313131;
    border-radius: 30px 30px 30px 30px;
    transition: 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .work-process {
      margin: 10px;
    }
}
.sisf-text-counter {
    position: absolute;
    top: 12px;
    right: 18px;
}
.sisf-text-counter span {
    -webkit-text-stroke-color: #ffffff;
    -webkit-text-stroke-width: 1px;
    color: #FFFFFF00;
    font-size: 70px;
    font-weight: 700;
    line-height: 1.2em;
}
.sisf-m-title-text{
  color: var(--orange);
  position: relative;
  bottom: 20px;

}
.sisf-m-icon-holder img{
  position: relative;
  bottom: 40px;
}
.sisf-m-icon {
    width: 100%;
}



/* crypto-marketing  */
.fugu-hero-section-1 {
    z-index: 0;
    position: relative;
    background-color: var(--primary-color);
    overflow: hidden;
    padding: 210px 0px 130px;
}
.fugu-hero-content {
    margin-right: 50px;
}
.fugu-hero-content h2 {
    color: var(--white);
    font-size: 60px;
}
.fugu-hero-content h2 span {
    color: var(--orange);
}
.fugu-hero-content p {
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.5px;
    color: var(--para-color);
}
.fugu-app-btn-wrap {
    margin: 55px 0px 95px;
}
a.fugu-app-btn {
    display: inline-block;
    margin-right: 20px;
}
a.fugu-app-btn:last-child {
    margin: 0px;
}
.fugu-hero-client-area {
    display: flex;
    align-items: center;
}
.fugu-hero-client-wrap {
    display: flex;
    align-items: center;
}
.fugu-hero-client-thumb {
    flex-shrink: 0;
    margin-right: 20px;
}
.fugu-hero-client-data h3 {
    line-height: 1;
    margin-bottom: 2px;
    color: var(--white);
}
.fugu-hero-client-data p {
    font-size: 16px;
    opacity: 0.6;
}
.fugu-hero-client-rating {
    padding-left: 24px;
    margin-left: 24px;
    position: relative;
}
.fugu-hero-client-rating::before {
    content: "";
    left: 0px;
    top: 0px;
    height: 39px;
    width: 2px;
    position: absolute;
    background-color: rgba(19, 17, 26, 0.1);
}
.fugu-hero-client-rating h3 {
    line-height: 1;
    margin-bottom: 2px;
    color: var(--white);
}
.fugu-hero-client-rating ul li {
    display: inline-block;
    font-size: 16px;
    opacity: 0.6;
    color: var(--para-color);
}
.fugu-hero-client-rating ul li:last-child {
    margin-left: 7px;
}
.fugu-hero-thumb {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.fugu-shape2 {
    position: absolute;
    top: -20%;
    left: -25%;
    z-index: -1;
}
.fugu-hero-star {
    position: absolute;
    top: 0px;
    right: 38%;
    animation: 10s linear 0s infinite normal none running rotate-animation;
}

@keyframes rotate-animation{
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fugu-shape1 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.feature-crypto-heading h5{
  font-size: 24px;
  font-weight: 600;
  color: var(--orange);
  padding-top: 50px;
  text-transform: capitalize;
}
.feature-crypto-sec{
    border-radius: 3px;
    padding: 39px;
    display: flex;
    transition: all .4s;
    margin-bottom: 24px;
    background-color: var(--secondry-color);
}
.crypto-icon {
    flex-shrink: 0;
    margin-right: 40px;
}
.crypto-inbox-data h4{
  color: var(--orange);
}
.crypto-inbox-data a{
  text-decoration: none;
  color: var(--white);
}
.crypto-inbox-data a:hover{
  color: var(--orange);
}
.z-index {
    z-index: 1;
    position: relative;
}
.fugu-apps-thumb {
    position: relative;
    transform: rotate(-5deg);
    margin-left: 60px;
}
.fugu-default-content.large-content h2 {
    font-size: 68px;
    line-height: 75px;
    color: var(--white);
}
.fugu-default-content.large-content h2 span {
  color: var(--orange);
}
.fugu-btn-wrap {
    margin-top: 55px;
}
.fugu-btn {
    font-size: 16px;
    line-height: 24px;
    border-radius: 3px;
    padding: 20px 55px;
    font-weight: 700;
    font-family: Inter, sans-serif;
    width: fit-content;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    text-align: center;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
    text-decoration: none;
    color: var(--white);
    background-color: var(--orange);
}
.fugu-shape3 {
    position: absolute;
    top: 0;
    z-index: -1;
    left: 6%;
}
@media (max-width: 1650px) {
    .fugu-shape3 {
        left: -5%;
    }
}

/* buy-sell-crypto  */
.fugu-video-thumb {
    position: relative;
}
.fugu-play-btn, a.fugu-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
a.fugu-popup img {
    animation: 10s linear 0s infinite normal none running rotate-animation;
}
.fugu-video-thumb img {
    width: 100%;
    height: 100%;
}

@keyframes rotate-animation{
  0% {
    transform: rotate(0deg);
}

50% {
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}
.fugu-play-btn, a.fugu-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.fugu-play-btn img {
    width: auto !important;
    animation: auto ease 0s 1 normal none running none !important;
}
.fugu-default-content.large-content h2 {
    font-size: 68px;
    line-height: 75px;
}
.fugu-default-content.large-content p {
    color: var(--para-color);
}
.fugu-icon-list {
    margin-top: 55px;
}
.fugu-icon-list ul li {
    position: relative;
    font-weight: 600;
    font-size: 18px;
    padding-left: 30px;
    margin-bottom: 18px;
    color: var(--para-color);
}
.fugu-icon-list ul li img {
    position: absolute;
    left: 0px;
    top: 3px;
}

/* contact-page  */
.conatct-bg{
  position: relative;
  background: url(../img/bg/contact-page.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  mix-blend-mode: luminosity;
  padding: 210px 0;
}

.contact-hed{
  text-align: center;
}
.contact-hed h1{
  color:  var(--white);
  font-size: 50px;
}

.contact-img img{
  width: 100%;
  animation: moveleft 3s linear infinite;
}
@keyframes moveleft {
  0%{
    transform: translateX(0px);
  }
  50%{
    transform: translateX(50px);
  }
}

.contact-form-bg{
  position: relative;
  background: var(--secondry-color);
}
.contact-chart-sec{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--primary-color);
  padding: 20px 30px;
  border: 1px solid var(--primary-color);
  margin-top: 40px;
  border-radius: 10px;
}
.contact-form-sec-content h2{
  font-size: 50px;
  color: var(--white);
  padding-top: 20px;
  padding-bottom: 20px;
}

.chart-icon img{
  width: 100%;
}
.chart-content h3{
  font-size: 35px;
  color: var(--white);
}
.form-section{
  padding-left: 50px;
}


/* contact-form */

.select2-container--default .select2-selection--multiple {
            min-height: 40px !important;
            padding: 10px;
            background-color: var(--primary-color) !important;
        }
        .select2-results__option {
            padding-left: 30px !important; 
            position: relative !important;
        }
        .select2-results__option::before {
            content: "";
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border: 1px solid #aaa;
            background-color: white !important;
        }
        .select2-results__option[aria-selected="true"]::before {
            content: "✔";
            color: #fff;
            background-color: #007bff;
            font-size: 14px;
            text-align: center;
            line-height: 16px;
        }

  

/* Better dropdown look */
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: none !important;
    border-radius: 6px;
}
.select2-container--default .select2-search--inline .select2-search__field{
  background: transparent;
  margin-bottom: 5px;
}
.select2-container{
  display: block;
}
.select2-container{
  width: 100% !important;
  border-bottom: 1px solid #1e1e1e;
    height: 53px;
    padding: 6px;
    margin-bottom: 20px !important;
}
.select2-container .select2-selection--multiple{
  display: contents;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background-color: #ff7503 !important;
  color: #fff !important;
}
.select2-container .select2-selection--multiple .select2-selection__rendered{
  display: inline-block;
}
.select2-container--default .select2-selection--multiple .select2-selection_choice_remove {
  color: #fff !important;
  border-right: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  border-right: none !important;
  position: absolute !important;
  top: -2px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
  background-color: #ff7503 !important;
}
.custom-checkbox{
  display: none;
}
.check-item{
  display: none;
}
.service-option{
  width: 100% !important;
  background: #121212 ;
  border: 1px solid #1e1e1e;
  color: #75756f;
  padding: 13px !important;
  border-radius: 5px;
  outline: none;
  margin-bottom: 32px !important;
  position: relative;
}
/* FOOTER FIX */

.footer-logo img,
.footer-logo svg{
  max-width: 100%;
  height: auto;
  display: block;
}

.footer-logo{
  overflow: hidden;
}

footer{
  overflow: hidden;
}

footer .container,
footer .row{
  overflow: hidden;
}

footer *{
  word-break: break-word;
}

/* Prevent huge logo stretching */
footer img{
  max-width: 100%;
  height: auto;
}
footer{
  background:#111;
  padding:80px 0 30px;
}

.footer-logo img{
  width:260px;
  max-width:100%;
  height:auto;
}

.footer-links h3,
.footer-contact h3{
  color:#ff6b00;
  margin-bottom:28px;
}

.footer-links ul{
  padding:0;
  margin:0;
  list-style:none;
}

.footer-links ul li{
  margin-bottom:18px;
}

.footer-links ul li a{
  color:#fff;
  text-decoration:none;
  transition:.3s;
}

.footer-links ul li a:hover{
  color:#ff6b00;
  padding-left:5px;
}

.footer-contact p{
  color:#ddd;
  line-height:1.8;
}

.footer-social{
  display:flex;
  gap:18px;
  margin-top:30px;
}

.footer-social a{
  width:54px;
  height:54px;
  border:1px solid #ff6b00;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  transition:.3s;
}

.footer-social a:hover{
  background:#ff6b00;
  transform:translateY(-4px);
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:60px;
  padding-top:25px;
  text-align:center;
  color:#ccc;
}


.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(8,8,16,0.92);
  backdrop-filter: blur(16px);
}

.header-inner{
  max-width: 1400px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  overflow: visible;
}

.header-logo img{
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* NAV */
.header-nav{
  flex: 1;
  display: flex;
  justify-content: center;
}

.hn-list{
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hn-link{
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all .2s ease;
}

.hn-link:hover{
  color: #ff6b00;
  background: rgba(255,107,0,0.08);
}

/* MEGA MENU */
.mega-drop{
  position: relative;
}

.mega-menu{
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 260px;
  background: rgba(12,12,20,0.96);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: all .25s ease;
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  z-index: 999;
}

html,body{
  overflow-x:hidden;
}
.mobile-drawer.open{
  max-height: 1200px;
}

.mobile-drawer.open{
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.site-header{
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mega-menu{
  z-index: 99999;
}

.mega-drop:hover .mega-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.banner-bg{
  padding-top: 120px !important;
}

.mega-2col{
  min-width: 580px;
}

.mega-col{
  display: flex;
  flex-direction: column;
  min-width: 240px;
}

.mega-col h5{
  color: #ff6b00;
  font-size: 0.82rem;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.mega-col a{
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  transition: all .2s ease;
}

.mega-col a:hover{
  background: rgba(255,107,0,0.08);
  color: #fff;
  transform: translateX(4px);
}

/* CTA */
.header-actions{
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-cta{
  background: #ff6b00;
  color: #fff;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 700;
  transition: all .2s ease;
}

.header-cta:hover{
  transform: translateY(-2px);
  color: #fff;
}

/* MOBILE */
.header-hamburger{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.header-hamburger span{
  width: 24px;
  height: 2px;
  background: #fff;
}

/* MOBILE DRAWER */
.mobile-drawer{
  display: none;
  background: #0d0d18;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.md-list{
  list-style: none;
  margin: 0;
  padding: 0 5% 20px;
}

.md-list li a,
.md-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  color: rgba(255,255,255,0.88);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.md-sub{
  display: none;
  list-style: none;
  padding-left: 16px;
}

.md-sub.open{
  display: block;
}

.md-sub li a{
  font-size: 0.88rem;
  color: rgba(255,255,255,0.68);
}

/* RESPONSIVE */
@media(max-width:991px){

  .header-nav{
    display: none;
  }

  .header-hamburger{
    display: flex;
  }

  .mobile-drawer{
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
  }

  .mobile-drawer.open{
    max-height: 1200px;
  }

  .mega-menu{
    display: none !important;
  }
}
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#0d0d18;
  z-index:9999;
  padding:15px 0;
}

.header-inner{
  max-width:1400px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}

.header-logo img{
  height:40px;
}

.hn-list{
  display:flex;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}

.hn-link{
  color:#fff;
  text-decoration:none;
}

body{
  overflow-x:hidden;
  padding-top:100px;
}
/* =========================================
   CONTACT FORM FIX
========================================= */

.input-form input,
.input-form textarea{

    width:100%;

    background:rgba(255,255,255,0.04) !important;

    border:1px solid rgba(255,255,255,0.12) !important;

    color:#ffffff !important;

    padding:18px 20px;

    border-radius:12px;

    outline:none;

    box-shadow:none;

    font-size:16px;
}

/* Placeholder */

.input-form input::placeholder,
.input-form textarea::placeholder{

    color:rgba(255,255,255,0.65) !important;

    opacity:1;
}

/* Focus */

.input-form input:focus,
.input-form textarea:focus{

    border-color:#ff6b00 !important;

    background:rgba(255,255,255,0.06) !important;

    color:#ffffff !important;

    box-shadow:0 0 0 3px rgba(255,107,0,0.12) !important;
}

/* Textarea */

.input-form textarea{

    min-height:220px;

    resize:none;
}