/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: var(--bs-body-font-family);
  color: #212529;
  overflow-x: hidden;
}

body.loading {
  overflow: hidden;
}

* {
  outline: none;
}

@font-face {
  font-family: "zain-font";
  src: url(../fonts/zain/Zain-Regular.ttf);
}

@font-face {
  font-family: "italic-zain-font";
  src: url(../fonts/zain/Zain-Italic.ttf);
}
@font-face {
  font-family: "light-zain-font";
  src: url(../fonts/zain/Zain-Light.ttf);
}

@font-face {
  font-family: "lemonada-font";
  src: url(../fonts/lemonada/Lemonada-VariableFont_wght.ttf);
}

a {
  color: #eb3243;
  text-decoration: none;
}

a:hover {
  color: #f0525b;
  text-decoration: none;
}

:root {
  --tree-color: #f0525b;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-primary {
  font-family: "Raleway", sans-serif;
}

.scroll {
  scrollbar-width: auto;
  scrollbar-color: #eb3243 transparent;
}

.scroll::-webkit-scrollbar {
  width: 5px;
}

.scroll::-webkit-scrollbar-track {
  background: transparent;
}

.scroll::-webkit-scrollbar-thumb {
  background: #eb3243;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(235, 50, 67, 0.9);
}

.spin {
  -webkit-animation: spin 0.7s linear infinite;
  -moz-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
}

.notification {
  z-index: 999;
  margin-left: 15px;
  padding: 10px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  top: 60px;
  right: 15px;
  color: #ffffff;
  background-color: rgb(63, 188, 97, 0.8);
  border: 1px solid rgb(63, 188, 97, 0.45);
  border-radius: 15px;
  transform: translateX(calc(100% + 15px));
  -ms-transform: translateX(calc(100% + 15px));
  transition: transform 0.35s;
}

.notification.show {
  transform: translateX(0);
  -ms-transform: translateX(0);
}

.notification.error {
  background-color: rgba(255, 51, 51, 0.8);
  border-color: rgba(255, 51, 51, 0.45);
}

.notification .n-i {
  margin-right: 20px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 25px;
  background-color: #3fbc61;
  border-radius: 15px;
}

.notification.error .n-i {
  background-color: #ff3333;
}

.notification span {
  margin-right: 50px;
}

.notification > i:hover {
  cursor: pointer;
  opacity: 0.7;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #eb3243;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #f0525b;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 72px;
  z-index: 997;
  transition: all 0.5s;
  width: 100vw;
}

#header.client-header .navbar a {
  color: #4e4039;
}

body.loading #header {
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

#header.sticky {
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.work-box.sticky {
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#header .logo h1 {
  margin: 0;
  margin-left: 7.5px;
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 2px;
  color: #c32023;
}

#header .logo a {
  display: flex;
  align-items: center;
  justify-content: center;
}

#header .logo h1 a,
#header .logo h1 a:hover {
  display: flex;
  color: #7a6960;
  text-decoration: none;
}

#header .flex-row {
  display: flex;
  flex-direction: row;
}

#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}

#header a.getquotation {
  display: none;
  background: #eb3243;
  color: #fff;
  font-size: 12px;
  padding: 6px 17.5px;
  margin-right: 15px;
  border-radius: 50px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar ul .flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 15px;
  color: #ffffff;
  white-space: nowrap;
  transition: 0.3s;
}

.sticky .navbar a,
.sticky .navbar a:focus {
  color: #4e4039;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

#header .navbar a:hover,
#header .navbar .active,
#header .navbar .active:focus,
#header .navbar li:hover > a {
  color: #eb3243;
}

#header .navbar .getstarted,
#header .navbar .getstarted:focus {
  background: url(/assets/img/red_nebula.webp) repeat;
  background-position: 41%;
  color: #fff !important;
  padding: 10px 25px;
  margin-left: 30px;
  border-radius: 50px;
}

#header .navbar .getstarted:hover,
#header .navbar .getstarted:focus:hover {
  /* color: #fff;
  background: #f0525b; */
  opacity: .9;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 15px;
  text-transform: none;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
  color: #eb3243;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.sticky .mobile-nav-toggle {
  color: #7a6960;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }

  #header a.getquotation {
    display: inline;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(78, 64, 57, 0.9);
  transition: 0.3s;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #7a6960;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: #eb3243;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
  color: #eb3243;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-top: 72px;
  box-sizing: border-box;
  width: 100%;
  background-image: url("../img/hero-space.webp");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.home-hero{
  position: relative;
}
@media screen and (max-width: 1100px) {
  #hero.home-hero{
    background-size: auto !important;
  }
}
#hero.careers-hero {
  background-image: url("/assets/img/careers-hero.webp");
}

.portfolio-cover {
  position: relative;
  margin-bottom: 25px;
  background: none !important; /* Remove background image from the main element */
}

.port-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.middle-text,
.loader {
  position: relative;
  z-index: 1;
}

.portfolio-cover.hero-web::before {
  background-image: url("../img/hero-web.png") !important;
}
.portfolio-cover.hero-social-media::before {
  background-image: url("../img/hero-social-media2.jpg") !important;
}
  /* .portfolio-cover.hero-media::before {
    background-image: url("../img/hero-media.jpg") !important;
    filter: unset;
  } */


  .hero-media .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

.portfolio-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center;
  /* background-position: 0% 43%; */
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(0.7px);
  z-index: -1;
  background-image: url("../img/web-bg.png") !important;
}

.portfolio-cover h1 {
  color: #fff !important;
}

#hero .middle-text {
  display: flex;
  flex-direction: column;
  padding: 50px 0;
  text-align: center;
  width: 750px;
  max-width: 90%;
}

#hero .middle-text h1 {
  font-size: 55px;
  background: unset;
  -webkit-text-fill-color: unset;
  margin-bottom: 10px;
}




#hero .middle-text h1:hover{
  background: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  -webkit-background-clip: unset;
}


#hero .middle-text span {
  opacity: 0.9;
  margin-top: 10px;
  color: #ffffff;
  font-size: 19px;
}
#hero.quotation-hero .middle-text span ,
#hero.careers-hero .middle-text span {
  margin-top: 10px;
  color: #E91E63;
  background: url(/assets/img/red_nebula.webp) repeat;
  background: linear-gradient(45deg, #d028379c, #ff001791) !important;
  background-position: 20%;
  color: white;
  font-size: 19px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 30px;
  backdrop-filter: blur(7px);
  box-shadow: 2px 6px 0px 0px #760b12b0;
  border: 1px solid #a8103c;
}

#hero .middle-text h1 span {
  color: #eb3243;
  font-size: 50px;
}

#hero .middle-text p {
  color: #eb3243;
  background: #ffffffc4;
  font-size: 20px;
  border-radius: 23px;
  padding: 5px 25px;
  width: fit-content;
  margin: auto;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

body.loading #hero {
  height: 100vh;
}

#hero .hero-container {
  padding: 50px 0;
  width: 90%;
  max-width: 290px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#hero .hero-txt,
#hero .hero-img {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  /* -ms-transform: scale(1);
  transform: scale(1); */
  transition: transform 1s;
}

/* body.loading #hero .hero-txt,
body.loading #hero .hero-img {
  -ms-transform: scale(0);
  transform: scale(0);
} */

#hero .hero-txt {
  box-sizing: border-box;
  text-align: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 2.5%;
  z-index: 2;
}

#hero .hero-img {
  margin-top: 40px;
}

#hero .hero-img img {
  display: flex;
  width: auto;
  height: 80%;
}


#hero.category-page .middle-text h1 span,
#hero.portfolio-cover .middle-text h1 span{
  background: unset !important;
  padding: unset;
  border-radius: unset;
  backdrop-filter: unset;
  box-shadow: unset;
  border: unset;

}
@keyframes fadeTextStop {
  0% {
    --stop: 100%;
  }
  10% {
    --stop: 90%;
  }
  20% {
    --stop:80%;
  }
  30% {
    --stop:70%;
  }
  40% {
    --stop:60%;
  }
  50% {
    --stop:50%;
  }
  60% {
    --stop:60%;
  }
  70% {
    --stop:70%;
  }
  80% {
    --stop:80%;
  }
  90% {
    --stop:90%;
  }
  100% {
    --stop:100%;
  }
}
#hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: #eb3243;
  /* background: dimgrey;   */
  background: repeating-linear-gradient(45deg, #d52232, #eb32439e 100px);  
  transition: .5s ease;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
#hero.careers-hero h1 {
  background:repeating-linear-gradient(45deg, #c50a1a, #ff0017 14px) !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}
#hero .middle-text span {
  margin-top: 10px;
  color: #E91E63;
  background: url(/assets/img/red_nebula.webp) repeat;
  background: linear-gradient(45deg, #d028379c, #ff001791) !important;
  background-position: 20%;
  color: white;
  font-size: 19px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 30px;
  backdrop-filter: blur(7px);
  box-shadow: 2px 6px 0px 0px #760b12b0;
  border: 1px solid #a8103c;
}

#hero h2 {
  color: #cfcfcf;
  margin: 15px 0 0 0;
  font-size: 24px;
  backdrop-filter: blur(1px);
}

#hero .btn-get-started {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 3px;
  transition: 0.5s;
  margin-top: 30px;
  color: #fff;
  /* background: #eb3243; */
  background: linear-gradient(45deg, #eb1529, #c40d1ab8);
}
@keyframes earthSpin {
  0% {
    transform: translate(-50%, 50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, 50%) rotate(360deg);
  }
}
#hero .earth-spin{
  position: absolute;
  height: 130vh;
  width: 130vh;
  z-index: -1;
  left: 30px;
  bottom: 30px;
  transform: translate(-50%, 50%);
  animation: earthSpin 50s linear infinite;
  /* filter: brightness(.7); */

}
@media screen and (max-width: 1100px) {
  #hero .earth-spin {
    left: -10%;
    bottom: -120%;
  }
}
@media screen and (max-width: 768px) {
  #hero .earth-spin {
    left: 49%;
    bottom: -120%;
    width: 145vw;
    height: auto !important;
  }
}
#hero .earth-spin img{
  width: 100%;
}
/* #hero .btn-get-started:hover {
  background: #f0525b;
} */

#hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

#hero .loader {
  z-index: 999;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fef9f9;
}

body.loading #hero .loader {
  display: flex;
}

#hero .loader img {
  display: flex;
  width: 90px;
  height: 90px;
  -webkit-animation: spin 0.7s linear infinite;
  -moz-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
}
/* form-loader */

/* #hero .loader { */
.loader-form {
  z-index: 999;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.45);
}

.loader-form img.loader-logo {
  /* display: none; */
  width: 90px;
  height: 90px;
  -webkit-animation: spin 0.7s linear infinite;
  -moz-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
}
.loader-form img.success-msg {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

.loader-form .success-message {
  color: #eb3243;
  font-size: 28px;
  background-color: #fef9f9;
  text-align: center;
  padding: 25px 30px;
  border-radius: 12px;
  user-select: none;
}
.loader-form .success-message h3 {
  font-size: 21px;
  font-weight: bold;
}
.loader-form .success-message p {
  font-size: 19px;
  margin-bottom: 10px;
  width: 80%;
  color: black;
  margin: auto;
  margin-bottom: 20px;
}
.loader-form .success-message a {
  font-size: 19px;
  font-weight: 700;
  background: #eb3243;
  color: white;
  padding: 10px 48px;
  border-radius: 8px;
}
/* form-loader */

#hero .f-s-m {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
}

#hero .f-s-m .s-m-i {
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 21px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eb3243;
  border: 1px solid #c11222;
  transition: opacity 0.35s;
  background:linear-gradient(45deg, #eb1529, #c40d1ab8);
}

#hero .f-s-m .s-m-i:last-child {
  margin: 0;
}

#hero .f-s-m .s-m-i:hover {
  opacity: 0.7;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media (max-width: 991px) {
  /*#hero {
    height: calc(100vh - 72px);
  }*/

  #hero .animated {
    /*-webkit-animation: none;
    animation: none;*/
  }

  #hero .hero-img {
    text-align: center;
  }

  #hero .hero-img img {
    width: 50%;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2 {
    font-size: 18px;
    line-height: 24px;
  }

  #hero .hero-img img {
    width: 70%;
  }
}

@media (max-width: 575px) {
  #hero .hero-img img {
    width: 80%;
  }
}

@media (max-height: 600px) {
  /*#hero {
    height: 120vh;
  }*/
}

@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #fef9f9;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 0;
  line-height: 1px;
  margin-bottom: 15px;
  color: #c2b7b1;
}

.section-title p {
  padding-bottom: 15px;
  margin-bottom: 15px;
  position: relative;
  font-size: 32px;
  font-weight: 700;
  color: #4e4039;
}
.services .section-title p ,
.portfolio .section-title p ,
.contact .section-title p ,
.clients .section-title p {
  padding-bottom: 2px;
  margin-bottom: 15px;
  position: relative;
  font-size: 32px;
  font-weight: 700;
  color: #4e4039;
  font-size: 47px;
  /* font-weight: 900; */
  color: #4e4039;
  background: url(/assets/img/red_nebula.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 768px) {
  .services .section-title p ,
.contact .section-title p ,
.clients .section-title p {
    font-size: 40px;
    padding-bottom: 5px;
  }
  .portfolio .section-title p {
    font-size: 35px;
  }
}
.portfolio .section-title p {
  background-position: 40% 40%;
  padding-bottom: 8px;
}

.section-title p::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 2px;
  background: #eb3243;
  bottom: 0;
  left: calc(50% - 30px);
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background-color: #fef5f1;
  min-height: 40px;
}

.breadcrumbs h2 {
  font-size: 24px;
  font-weight: 300;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #6c757d;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about h3 {
  font-weight: 700;
  font-size: 47px;
  font-weight: 900;
  color: #4e4039;
  background: url(/assets/img/red_nebula.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 768px) {
  .about h3 {
    font-size: 40px;
  }
  
}

.about h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
  color: #7a6960;
  background: linear-gradient(45deg, #cc1c2b, #d52535d1 86px);
  transition: .5s ease;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.about i {
  font-size: 48px;
  margin-top: 15px;
  color: #ff5c6b;
}

.about .tree {
  display: flex;
  margin-top: 15px;
  width: 45px;
  height: 45px;
  background-image: url("../img/logo-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.about p {
  font-size: 15px;
  color: #5a6570;
}

@media (max-width: 991px) {
  .about .about-img img {
    max-width: 70%;
  }
}

@media (max-width: 767px) {
  .about .about-img img {
    max-width: 90%;
  }
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  margin: 0 0 40px 0;
  background: #fff;
  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
  transition: all 0.3s ease-in-out;
  border-radius: 15px;
  text-align: center;
  border-bottom: 3px solid #fff;
  border-top: 7px solid #eb3243;
}

.services .icon-box:hover {
  transform: translateY(-5px);
  border-color: #eb3243;
}

.services .icon i {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 15px;
  color: #eb3243;
}

.services .title {
  font-weight: 700;
  margin: 16px 0;
  font-size: 24px;
  color: #282c30;
}

.services .title a {
  color: #111;
}

.services .description {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 0;
}

.services .row {
  justify-content: center;
}

.services ul {
  margin-top: 20px;
  text-align: left;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio{
  margin-bottom: 30px;
}
.portfolio .body .item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.portfolio .body .item .image{
  width: 50%;
}
.portfolio .body .item .image img,
.portfolio .body .item .image video{
  width: 100%;
}
.portfolio .body .item .text{
  width: 50%;
  padding: 0 20px;
}
.portfolio .body .item .text .title{
  font-size: 34px;
  font-weight: 700;
  color: #4e4039;
  background: url(/assets/img/red_nebula.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: transparent;
}
.portfolio .body .item .text .slogan{
  font-size: 15px;
  font-weight: 600;
  color: #c32023;
  margin-bottom: 1.25rem;
}
.portfolio .body .item .text .description{
  font-size: 17px;
  font-weight: 600;
  color: #212529;
}
.portfolio .body .item .text .more-btn{
  padding: 5px 10px;
  border-radius: 50px;
  text-align: center;
  display: flex;
  border: 2px solid #eb1529;
  width: 214px;
  margin-top: .75rem;
  background: url(/assets/img/red_nebula.webp) repeat;
  background-position: 31% 27%;
}

.portfolio .body .item .text .more-btn .text{
  font-weight: 700;
  font-size: 20px;
  color: white;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .portfolio .body .item{
    flex-direction: column-reverse;
  }
  .portfolio .body .item-reverse{
    flex-direction: column;
  }
  .portfolio .body .item .text{
    width: 100%;
  }
  .portfolio .body .item .image{
    width: 100%;
    margin: .75rem 0;
  }
  .portfolio .body .item .text .title{
    font-size: 30px;
  }
  .portfolio .body .item .text .slogan{
    font-size: 14px;
  }
  .portfolio .body .item .text .description{
    font-size: 15px;
  }
  .portfolio .body .item .text .more-btn{
    width: 190px;
  }
  .portfolio .body .item .text .more-btn .text{
    font-size: 17px;
  }
}

/* contact form */
.home-contact-form input{
  border-radius: 20px !important;
  background: linear-gradient(45deg, #bf2634, #f62f41);
  color: white !important;
}
.home-contact-form input::placeholder{
  color: white;
}
.home-contact-form input::-webkit-input-placeholder{
  color: white;
}
.home-contact-form input:focus{
  color: white !important;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
/* .portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details
  .portfolio-details-slider
  .swiper-pagination
  .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #eb3243;
}

.portfolio-details
  .portfolio-details-slider
  .swiper-pagination
  .swiper-pagination-bullet-active {
  background-color: #eb3243;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(122, 105, 96, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
} */

/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq {
  padding: 60px 0;
}

.faq .faq-list {
  padding: 0;
  list-style: none;
}

.faq .faq-list li {
  border-bottom: 1px solid #eae7e5;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.faq .faq-list .question {
  display: block;
  position: relative;
  font-family: #eb3243;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  font-weight: 600;
  padding-left: 25px;
  cursor: pointer;
  color: #ca1123;
  transition: 0.3s;
}

.faq .faq-list i {
  font-size: 16px;
  position: absolute;
  left: 0;
  top: -2px;
}

.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 25px;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list .collapsed {
  color: #343a40;
}

.faq .faq-list .collapsed:hover {
  color: #eb3243;
}

.faq .faq-list .collapsed .icon-show {
  display: inline-block;
  transition: 0.6s;
}

.faq .faq-list .collapsed .icon-close {
  display: none;
  transition: 0.6s;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
  background: #fff;
  padding: 60px 0;
}

.team .member {
  text-align: center;
  margin-bottom: 20px;
  background: #343a40;
  position: relative;
  overflow: hidden;
}

.team .member .member-info {
  opacity: 0;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.2s;
}

.team .member .member-info-content {
  position: absolute;
  left: 50px;
  right: 0;
  bottom: 0;
  transition: bottom 0.4s;
}

.team .member .member-info-content h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
  color: #fff;
}

.team .member .member-info-content span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #fff;
}

.team .member .social {
  position: absolute;
  left: -50px;
  top: 0;
  bottom: 0;
  width: 50px;
  transition: left ease-in-out 0.3s;
  background: rgba(78, 64, 57, 0.6);
  text-align: center;
}

.team .member .social a {
  transition: color 0.3s;
  display: block;
  color: #fff;
  margin-top: 15px;
}

.team .member .social a:hover {
  color: #eb3243;
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.team .member:hover .member-info {
  background: linear-gradient(
    0deg,
    rgba(78, 64, 57, 0.95) 0%,
    rgba(78, 64, 57, 0.95) 15%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 1;
  transition: 0.4s;
}

.team .member:hover .member-info-content {
  bottom: 30px;
  transition: bottom 0.4s;
}

.team .member:hover .social {
  left: 0;
  transition: left ease-in-out 0.3s;
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients .clients-slider .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
}

.clients .clients-slider .swiper-slide img:hover {
  opacity: 1;
}

.clients .clients-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .clients-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #eb3243;
}

.clients .clients-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #eb3243;
}

.clients-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.clients-container .c-c {
  width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.clients-container .c-c .card-parent {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 40px;
  box-sizing: border-box;
  display: flex;
  width: calc(20% - 80px);
  height: auto;
  transition: opacity 0.35s;
}
@media screen and (max-width: 1100px) {
  .clients-container .c-c .card-parent {
    width: calc(30% - 80px);
  }
}
@media screen and (max-width: 768px) {
  .clients-container .c-c .card-parent {
    min-width: 85px;
  }
}
@media screen and (max-width: 400px) {
  .clients-container .c-c .card-parent {
    margin: 25px;
    min-width: 95px;
    width: calc(50% - 50px);
  }
}
.clients-container .c-c .card-parent img {
  width: 100%;
}

/* flip card */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 140px;
  perspective: 1000px;
  /* Controls 3D perspective */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(0deg) !important;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.flip-card-front {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: visible;
}
.flip-card-front img{
  width: fit-content;
}

.flip-card-back {
  /* background-color: white;
  color: green; */
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid #c82129;
  /* background: repeating-linear-gradient(45deg, #c3202378, #c83437ad 100px); */
  background: repeating-linear-gradient(50deg, #c32023, #eb3243 95px);
}

.flip-card-back img {
  width: 50px !important;
}
/* end flip card */


/*--------------------------------------------------------------
# Contact Us
--------------------------------------------------------------*/
.contact .info {
  border-top: 3px solid #eb3243;
  border-bottom: 3px solid #eb3243;
  padding: 30px;
  background: #fff;
  width: 100%;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}

.contact .info i {
  font-size: 20px;
  color: #eb3243;
  float: left;
  width: 44px;
  height: 44px;
  background: #fdf1ec;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}
.contact .info img {
  font-size: 20px;
  color: #eb3243;
  float: left;
  width: 44px;
  height: 44px;
  /* background: #fdf1ec; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-radius: 50px; */
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #7a6960;
}

.contact .info p {
  padding: 0 0 10px 60px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #ab9d95;
}

.contact .info .email p {
  padding-top: 5px;
}

.contact .info .social-links {
  padding-left: 60px;
}

.contact .info .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #333;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  margin-right: 10px;
}

.contact .info .social-links a:hover {
  background: #eb3243;
  color: #fff;
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
  background: #eb3243;
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
  border-top: 3px solid #eb3243;
  border-bottom: 3px solid #eb3243;
  padding: 40px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #eb3243;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  margin-top: 4px;
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type="submit"] {
  background: linear-gradient(45deg, #eb3243, #bf2634);
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
  font-weight: 600;;
}

.contact .php-email-form button[type="submit"]:hover {
  opacity: 0.9;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #fff;
  /* padding: 0 0 30px 0; */
  color: #212529;
  font-size: 14px;
  /* background: #fef9f9; */
  background: #3a333338;
  position: relative;
  overflow: hidden;
}
#footer::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/assets/img/red_nebula.webp) no-repeat;
  background-size: cover;
  z-index: -1;
}
#footer::after {
  content: '';
  width: 500px;
  height: 500px;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(15%, 45%);
  background: url(/assets/img/earth.webp);
  background-size: 100%;
  z-index: -1;
}

#footer h3{
  color: white;
  font-weight: 900;
}
#footer .footer-newsletter {
  padding: 50px 0;
  background: #fef9f9;
  text-align: center;
  font-size: 15px;
  display: none;
}

#footer .footer-newsletter h4 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  color: #4e4039;
}

#footer .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 4px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  text-align: left;
}

#footer .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 4px 4px;
  width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #eb3243;
  color: #fff;
  transition: 0.3s;
  border-radius: 4px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#footer .footer-newsletter form input[type="submit"]:hover {
  background: #ca1123;
}

#footer .footer-top {
  padding: 60px 0 30px 0;
  /* background: #fff; */
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}
#footer .footer-top .footer-contact::after{
  content: '';
  width: 225px;
  height: 225px;
  background: url(/assets/img/astronut-set.webp) no-repeat;
  background-size: 100%;
  position: absolute;
  bottom: -10px;
  left: -23px;
  z-index: 2;
}
@media screen and (max-width: 992px) {
  #footer .footer-top .footer-contact::after{
    display: none;
  }
}

#footer .footer-top .footer-contact h4 {
  font-size: 22px;
  margin: 0 0 30px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}

#footer .footer-top .footer-contact p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Raleway", sans-serif;
  color: #ffffff;
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  position: relative;
  padding-bottom: 12px;
}
#footer .footer-top p {
  color: #ffffff;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

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

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #ff5c6b;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #ffffff;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #eb3243;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: linear-gradient(45deg, #ff4254, #c40d1ab8);
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #eb3243;
  color: #fff;
  text-decoration: none;
}

#footer .copyright {
  text-align: center;
  float: left;
}

#footer .credits {
  float: right;
  text-align: center;
  font-size: 13px;
  color: #212529;
}

#footer .credits a {
  color: #eb3243;
}
#footer .container.py-4{
  /* background: linear-gradient(45deg, #a92040, #db3a3ab5); */
  background: linear-gradient(45deg, #9b2240, #db3a3a00);
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
  max-width: 100% !important;
  text-align: start;
  padding-top: 6px !important;
  color: #fff
}

.portfolio-full-image,
.portfolio-swiper,
.portfolio-video {
  display: none;
  padding: 5% 0;
  align-items: flex-start;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  overflow-y: auto;
}

.portfolio-full-image a {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  padding: 7.5px 30px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  background-color: #eb3243;
  border-radius: 15px;
  transition: opacity 0.35s;
}

.portfolio-full-image a:hover {
  opacity: 0.8;
}

.portfolio-full-image a i {
  margin-right: 2.5px;
}

.portfolio-swiper,
.portfolio-video {
  padding: 0;
}

.portfolio-video {
  align-items: center;
}

.portfolio-video iframe {
  margin: 25px 0;
  border-radius: 25px;
  width: 700px;
  height: 392px;
  max-width: calc(100% - 20px);
}

.portfolio-video video {
  max-width: 80%;
  width: auto;
  height: auto;
  max-height: 80%;
  border-radius: 25px;
}

.portfolio-full-image.show,
.portfolio-swiper.show,
.portfolio-video.show {
  display: flex;
}

.portfolio-swiper .swiper {
  width: 100%;
  height: 100%;
}

.portfolio-swiper .swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5% 0;
}

.portfolio-swiper .swiper .swiper-slide img {
  display: flex;
  max-width: 90%;
  max-height: 100%;
  border-radius: 25px;
}

.portfolio-swiper .swiper .swiper-button-next,
.portfolio-swiper .swiper .swiper-button-prev {
  width: 50px;
  height: 50px;
  background-color: #eb3243;
  border-radius: 50%;
}

.portfolio-swiper .swiper .swiper-button-next::after,
.portfolio-swiper .swiper .swiper-button-prev::after {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

.portfolio-full-image img {
  display: flex;
  width: 85%;
  height: auto;
  border-radius: 15px;
}

section.hiring {
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

section.hiring .our-info,
section.hiring .hiring-accordion {
  border-top: 3px solid #eb3243;
  border-bottom: 3px solid #eb3243;
  padding: 30px;
  box-sizing: border-box;
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background: #fffcfb;
  border-radius: 25px;
  /* min-height: 800px; */
}
section.hiring div.our-info .our-information .o-i-i {
  display: flex;
  flex-direction: column;
}
section.hiring .hiring-accordion {
  margin-top: 20px;
}
section.hiring .our-info .our-information .o-i-i {
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  background-color: #fdf1ec;
  border-radius: 15px;
}
section.hiring .our-info .o-i-i {
  margin-bottom: 25px;
  display: flex;
  align-items: center;
}
section.hiring .our-info .our-information .o-i-i .icon {
  margin-right: 0 !important;
  margin-top: 10px;
  color: #fff;
  background: #aa4e57;
}
section.hiring .our-info .o-i-i .icon {
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #eb3243;
  background: #fdf1ec;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

section.hiring .our-info .o-i-i:hover .icon {
  background: #eb3243;
  color: #fff;
}

section.hiring .our-information .o-i-i .text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.hiring .our-info .o-i-i .text h4 {
  margin-block: 5px;
  font-size: 22px;
  font-weight: 600;
  color: #7a6960;
}
section.hiring .our-info .our-information .o-i-i .text p {
  margin-block: 10px;
  font-size: 16px;
  color: #7a6960;
  font-weight: 600;
}
section.hiring .our-info .o-i-i .text p {
  margin: 0;
  font-size: 14px;
  color: #ab9d95;
}

section.hiring .hiring-accordion .accordion {
  background-color: #f9ecec;
  color: #eb3243;
  cursor: pointer;
  padding: 14px 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-weight: bold;
  transition: 0.4s;
  border-radius: 5px;
  transition: background 0.35s;
}

section.hiring .hiring-accordion .active,
section.hiring .hiring-accordion .accordion:hover {
  background-color: #fae5e5;
}

section.hiring .hiring-accordion .accordion:after {
  content: "";
  width: 18px;
  height: 20px;
  background-image: url("../img/logo-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 20px;
  transform: rotate(0);
  float: right;
  margin-left: 5px;
  transition: transform 0.35s;
}
@media screen and (max-width: 768px) {
  section.hiring .hiring-accordion .active:after {
    transform: rotate(180deg);
  }
}

section.hiring .hiring-accordion .hiring-form {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

section.hiring .hiring-accordion .hiring-form.open {
  max-height: unset;
}

section.hiring .hiring-accordion .hiring-form .h-f-c {
  padding: 15px;
  display: flex;
  flex-direction: column;
}
section.hiring .hiring-accordion .hiring-form .h-f-f {
  width: 620px;
}
section.hiring .hiring-accordion .hiring-form .h-f-c button.apply-btn,
section.hiring .hiring-accordion .hiring-form .h-f-f button.back-to {
  padding: 0;
  margin-bottom: 5px;
  align-self: flex-end;
  border: none;
  color: #eb3243;
  font-size: 16px;
  font-weight: 600;
  font-family: "Raleway", sans-serif;
  background-color: transparent;
  transition: color 0.35s;
}

section.hiring .hiring-accordion .hiring-form .h-f-f button.back-to {
  margin: 0;
  align-self: center;
}

section.hiring .hiring-accordion .hiring-form .h-f-c button.apply-btn:hover,
section.hiring .hiring-accordion .hiring-form .h-f-f button.back-to:hover {
  color: #f26d79;
}

section.hiring .hiring-accordion .hiring-form .h-f-c button.apply-btn i,
section.hiring .hiring-accordion .hiring-form .h-f-f button.back-to i {
  font-size: 12px;
  margin-left: 5px;
}

section.hiring .hiring-accordion .hiring-form .h-f-f button.back-to i {
  margin: 0;
  margin-right: 5px;
}

section.hiring .hiring-accordion .hiring-form .h-f-c h6 {
  margin: 0;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 16px;
  color: #757575;
}

section.hiring .hiring-accordion .hiring-form .h-f-c ul {
  margin-bottom: 7.5px;
  color: #757575;
  font-size: 16px;
  font-weight: 500;
}

section.hiring .hiring-accordion .hiring-form .h-f-c span {
  color: #757575;
  font-size: 16px;
  font-weight: 500;
}

section.hiring .hiring-accordion .hiring-form .h-f-f {
  padding: 15px;
  padding-bottom: 30px;
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group {
  margin-top: 40px;
  position: relative;
  width: 45%;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group * {
  font-family: "Raleway", sans-serif;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group input,
section.hiring .hiring-accordion .hiring-form .h-f-f .group .disabled,
section.hiring .hiring-accordion .hiring-form .h-f-f .group .file-input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #757575;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group .disabled {
  color: #eb3243;
  border-color: #eb3243;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group input:focus {
  outline: none;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group label {
  color: #757575;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group input:focus ~ label,
section.hiring
  .hiring-accordion
  .hiring-form
  .h-f-f
  .group
  input:not(:placeholder-shown)
  ~ label {
  top: -20px;
  font-size: 14px;
  color: #eb3243;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group .bar {
  position: relative;
  display: block;
  width: 100%;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group .bar:before,
section.hiring .hiring-accordion .hiring-form .h-f-f .bar:after {
  content: "";
  height: 1px;
  width: 0;
  bottom: 0;
  position: absolute;
  background: #eb3243;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group .bar:before {
  left: 50%;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group .bar:after {
  right: 50%;
}

section.hiring
  .hiring-accordion
  .hiring-form
  .h-f-f
  .group
  input:focus
  ~ .bar:before,
section.hiring
  .hiring-accordion
  .hiring-form
  .h-f-f
  .group
  input:focus
  ~ .bar:after {
  width: 50%;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group .file-input {
  width: 100%;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group .file-button {
  padding: 0;
  background-color: transparent;
  border: none;
  color: #757575;
  cursor: pointer;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .group .file-text {
  margin-left: 10px;
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  color: #eb3243;
}

section.hiring .hiring-accordion .hiring-form .h-f-f .form-btns {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  section.hiring .hiring-accordion .hiring-form .h-f-f .form-btns {
    flex-direction: column;
    align-items: self-start;
  }
  section.hiring .hiring-accordion .hiring-form .h-f-f button.back-to {
    align-self: self-start;
  }
  section.hiring .hiring-accordion .hiring-form .h-f-f button[type="submit"] {
    margin-top: 10px;
  }
  section.hiring .hiring-accordion .hiring-form .h-f-f {
    flex-direction: column;
  }
}
section.hiring .hiring-accordion .hiring-form .h-f-f button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: normal;
  padding: 10px 20px;
  font-family: "Raleway", sans-serif;
  color: #ffffff;
  background-color: #eb3243;
  border: none;
  border-radius: 5px;
  transition: opacity 0.35s;
}

section.hiring .hiring-accordion .hiring-form .h-f-f button[type="submit"] i {
  margin-left: 10px;
}

section.hiring
  .hiring-accordion
  .hiring-form
  .h-f-f
  button[type="submit"]:hover {
  opacity: 0.8;
}
main section.client-data {
  padding: 45px 0 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
main section.client-data::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/form-bg.png?v=1.1);
  background-repeat: repeat;
  background-size: contain;
  /* background-size: 100% 100%; */
  /* transform: rotate(180deg) scaleX(-1); */
  /* opacity: 09; */
  /* filter: sepia(.05) grayscale(.5); */
}
main .client-data h2 {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 1rem;
  color: #454545;
  text-transform: capitalize;
  font-weight: 600;
}
main section.client-data form {
  width: 50%;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  background-color: #fef9f9;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  box-sizing: border-box;
  border-top: 3px solid #f77c87;
  border-bottom: 3px solid #f77c87;
  padding: 30px;
  border-radius: 25px;
}
main section.client-data form .questions-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

main section.client-data form h3 {
  letter-spacing: 1px;
  font-weight: 600;
  border-bottom: 1px solid red;
  width: max-content;
  padding: 9px 5px;
  padding-right: 0;
  color: #eb3243;
  /* margin-bottom: 18px; */
  display: flex;
  align-items: center;
}
main section.client-data form .questions-header .questions-icon {
  width: 35px;
  margin-inline-start: 9px;
  padding-bottom: 8px;
}
main
  section.client-data
  form
  .questions-header
  .questions-icon.first-cat-image {
  width: 25px;
}
main section.client-data form .questions-header .questions-icon img {
  width: 100%;
}
main section.client-data form .questions-header.first-cat {
  margin: 15px 0;
}
main section.client-data form .questions-break {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 15px;
}

main section.client-data form .questions-break .questions-logo {
  width: 30px;
  position: relative;
}
main section.client-data form .questions-break .questions-logo::before {
  content: "";
  position: absolute;
  width: 3.5rem;
  top: 52%;
  height: 2px;
  background-color: #eb3243;
  right: 135%;
}
main section.client-data form .questions-break .questions-logo::after {
  content: "";
  position: absolute;
  width: 3.5rem;
  top: 52%;
  height: 2px;
  background-color: #eb3243;
  left: 135%;
}
main section.client-data form .questions-break .questions-logo img {
  width: 100%;
}

main section.client-data form .yesorno {
  margin-inline-start: 4%;
}
main section.client-data form .yesorno.choose-size {
  display: flex;
}
main section.client-data form .yesorno.choose-size .choice-edit {
  width: 45%;
}
main section.client-data form .yesorno .choice-edit {
  display: flex;
  align-items: baseline;
}

main section.client-data form .yesorno label {
  margin-inline-start: 0;
  cursor: pointer;
  user-select: none;
}
main section.client-data form .yesorno .choice-edit label {
  margin-inline-start: 5px;
}
main section.client-data form .yesorno input {
  margin-inline-start: 5%;
  width: 4%;
  min-width: 16px;
  height: 16px;
  color: #c82129;
  /* size: inherit; */
  accent-color: #607d8b;
  transform: translateY(2px);
}
main section.client-data form .question-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}
main section.client-data form .question-box.multi-choice .answer-choices {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  direction: ltr;
}
main
  section.client-data
  form
  .question-box.multi-choice
  .answer-choices::before {
  content: "";
  position: absolute;
  width: 1px;
  top: -1%;
  left: 51%;
  height: 97%;
  background-color: #eb3243;
}

main section.client-data form .question-box.multi-choice .checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 50%;
}
main
  section.client-data
  form
  .question-box.multi-choice
  .checkbox-container
  span {
  margin-inline-end: 6%;
}
main
  section.client-data
  form
  .question-box.multi-choice
  .checkbox-container
  input.choice-check {
  width: 45px;
  height: 50px;
  accent-color: #8c8c8c;
  cursor: pointer;
}
main
  section.client-data
  form
  .question-box.multi-choice
  .checkbox-container
  label.choice-text {
  margin-bottom: 0;
  width: 100%;
  margin-inline-start: 8px;
  margin-inline-end: 7px;
  user-select: none;
  cursor: pointer;
}
main
  section.client-data
  form
  .question-box.multi-choice
  .checkbox-container
  input.choice-percent {
  margin-inline-start: 0;
  width: 70%;
  padding: 5px 8px;
  margin-inline-end: 7px;
}
main section.client-data form label {
  margin-bottom: 10px;
  font-weight: 600;
  color: #212529;
  margin-inline-start: 4%;
}

main section.client-data form label span {
  color: #eb3243;
  text-decoration: underline;
}
main section.client-data form label .label-header {
  display: flex;
  align-items: baseline;
}
main section.client-data form label .numbering {
  width: 22px;
  margin-inline-end: 9px;
  padding-bottom: 2px;
}
main section.client-data form label .numbering img {
  width: 100%;
  padding-bottom: 3px;
}
main section.client-data form .drive-files {
  display: flex;
  margin-bottom: 25px;
  margin-inline-start: 4%;
}
main section.client-data form .drive-files .google-drive a {
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #eb3243;
  padding: 10px 17px;
  padding-left: 24px;
  border-radius: 26px 0 0 26px;
  height: 47px;
  cursor: pointer;
  color: white;
  transition: all 0.1s ease;
}
main section.client-data form .drive-files .google-drive a:hover {
  background-color: #ca1123;
}
main section.client-data form .drive-files .google-drive a .drive-image {
  width: 22px;
  margin-inline-start: 5px;
}
main section.client-data form .drive-files .google-drive .drive-image img {
  width: 100%;
}
main section.client-data form .drive-files .add-drive a {
  background-color: #c72e3d;
  padding: 0 6px;
  height: 47px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 26px 26px 0px;
  cursor: pointer;
}
main section.client-data form .drive-files .add-drive a .add-image {
  width: 18px;
  padding-bottom: 3px;
}
main section.client-data form .drive-files .add-drive a .add-image img {
  width: 100%;
}

main section.client-data form input {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid grey;
  width: 80%;
  margin-inline-start: 7%;
  font-family: Arial, sans-serif;
  font-size: 17px;
}
main section.client-data form label p {
  margin: 0;
  width: 100%;
}

main section.client-data form input.file {
  padding: 8px 12px;
  border: none;
}
main section.client-data form select {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid grey;
}

main section.client-data form textarea {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid grey;
  width: 80%;
  margin-inline-start: 7%;
  font-family: Arial, sans-serif;
  font-size: 17px;
}
main section.client-data form .user-project-btn {
  text-align: center;
}
main section.client-data form .user-project-btn input {
  background: #eb3243;
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  border: none;
  font-weight: 700;
}
main section.client-data form .user-project-btn input:hover {
  background: #ca1123;
}

/* portfolio page */

.portfolio-filter ul {
  display: flex;
  justify-content: center;
  gap: 55px;
  padding: 0;
  margin-bottom: 30px;
  margin-bottom: 0px;
  border-bottom: 2px solid #8080800d;
  padding-bottom: 10px;
}

.portfolio-filter ul li {
  list-style: none;
  cursor: pointer;
  color: #eb3243;
  padding: 5px 20px;
  transition: all 0.3s ease;
}

.portfolio-filter ul li:hover {
  background: #80808017;
  border-radius: 16px;
}

.portfolio-filter ul li.active-port {
  font-weight: bold;
  /* background: #80808017; */
  border-radius: 16px;
  background-color: #eb3243;
  color: #fff;
}

.portfolio-filter ul li.active-port a {
  color: #fff;
}

.portfolio-content .filter-options {
  display: none;
}

.portfolio-content .portfolio-web .intro-web {
  width: 100%;
  padding: 0;
  padding-top: 15px;
  /* position: relative; */
}

.portfolio-content .portfolio-web .intro-web .intro-web-box {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 0px;
}

.portfolio-content .portfolio-web .intro-web .intro-web-box .intro-web-cover {
  width: 37%;
}
.portfolio-content
  .portfolio-web
  .intro-web
  .intro-web-box
  .intro-web-cover
  img {
  width: 100%;
}

.portfolio-content .portfolio-web .intro-web .intro-web-box .intro-web-desc {
  width: 25%;
  position: relative;
}

.portfolio-content .portfolio-web .intro-web .intro-web-box .intro-web-desc h3 {
  color: #eb3243;
  display: flex;
  align-items: center;
}

.portfolio-content
  .portfolio-web
  .intro-web
  .intro-web-box
  .intro-web-desc
  h3
  img {
  width: 20px;
  margin-inline-end: 5px;
}

.portfolio-content .portfolio-web .intro-web .intro-web-box .intro-web-desc p {
  font-family: "zain-font";
  font-size: 20px;
}

.portfolio-content
  .portfolio-web
  .intro-web
  .intro-web-box
  .intro-web-desc.left-web {
  padding-top: 30px;
}

.portfolio-content
  .portfolio-web
  .intro-web
  .intro-web-box
  .intro-web-desc.left-web
  img.arrow-animation-left {
  position: absolute;
  right: 0;
  width: 60%;
}

.portfolio-content
  .portfolio-web
  .intro-web
  .intro-web-box
  .intro-web-desc.right-web {
  padding-bottom: 30px;
}

.portfolio-content
  .portfolio-web
  .intro-web
  .intro-web-box
  .intro-web-desc.right-web
  img.arrow-animation-right {
  position: absolute;
  left: 0;
  bottom: 50%;
  width: 45%;
  transform: rotate(190deg);
}

.portfolio-content
  .portfolio-web
  .intro-web
  .intro-web-box
  .intro-web-desc.right-web {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.portfolio-content .portfolio-web .portfolio-category {
  margin-bottom: 40px;
  position: relative;
}
/* .portfolio-content
  .portfolio-web
  .webites-intro.portfolio-category.first-intro {
  top: -32px;
} */

.portfolio-content .portfolio-web .first-intro .portfolio-category-intro {
  position: relative;
  margin-bottom: 70px;
}

.portfolio-content
  .portfolio-web
  .first-intro
  .portfolio-category-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../img/pattern-stars.png") !important;
  background-position: 9% 32px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
  z-index: -1;
}

.portfolio-content .portfolio-web .first-intro .dashboard-service {
  display: flex;
  justify-content: center;
  margin-bottom: 45px;
  gap: 40px;
}

.dashboard-service .dashboard-image {
  width: 45%;
  position: relative;
  overflow: hidden;
  /* background-color: #f5f5f5; */
}

.box-container {
  position: relative;
  height: 300px; /* Adjust as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.box {
  position: absolute;
  width: 150px;
  height: 130px;
  opacity: 0;
  transition: all 1s ease;
}

.chart-graphs {
  margin-top: 20px;
  height: 300px;
  width: 100%;
  position: relative;
}

.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-image
  img {
  width: 100%;
}
.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-desc {
  width: 45%;
  text-align: left;
}

.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-desc
  h2 {
  margin-bottom: 20px;
  font-size: 40px;
  font-family: "zain-font";
}

.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-desc
  h2
  span {
  font-size: 45px;
  font-weight: 600;
}

.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-desc
  h4 {
  font-size: 24px;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  font-family: "zain-font";
}

.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-desc
  h4
  img {
  width: 50px;
  margin-inline-end: 10px;
}

.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-desc
  .dashboard-services-box
  .dashboard-point
  h6 {
  font-size: 24px;
  /* font-weight: 700; */
  font-family: "zain-font";
  margin-bottom: 3px;
}

.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-desc
  .dashboard-services-box
  .dashboard-point
  h6
  img {
  width: 18px;
  margin-inline-end: 8px;
}

.portfolio-content
  .portfolio-web
  .first-intro
  .dashboard-service
  .dashboard-desc
  .dashboard-services-box
  .dashboard-point
  p {
  padding-inline-start: 30px;
  font-size: 21px;
  line-height: 1.25;
  font-family: "zain-font";
}

/* .portfolio-content .portfolio-web .webites-intro.portfolio-category {
  top: -25px;
} */

.portfolio-content .portfolio-web .self-branding .portfolio-intro-desc {
  width: 50%;
}

.portfolio-content
  .portfolio-web
  .webites-intro.portfolio-category.self-branding
  .portfolio-category-intro
  .portfolio-intro-cover
  img {
  transform: rotateY(180deg);
}
.portfolio-content
  .portfolio-web
  .webites-intro.portfolio-category.self-branding
  .portfolio-category-intro
  .portfolio-intro-cover
  img.outer-image {
  transform: unset;
}

.portfolio-content
  .portfolio-web
  .webites-intro.self-branding
  .portfolio-category-intro {
  padding-inline-end: 50px;
  padding-inline-start: unset;
  /* margin-top: -25px; */
}

.portfolio-content
  .portfolio-web
  .webites-intro.self-branding
  .portfolio-category-intro
  .portfolio-intro-cover {
  justify-content: flex-start;
}
.portfolio-content .portfolio-web .portfolio-category-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  margin-bottom: 20px;
}

.medical-webites-intro .portfolio-category-intro.medical-intro {
  position: relative;
}
.medical-webites-intro .portfolio-category-intro.medical-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/pattern-stars.png) !important;
  background-position: 9% 32px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
  z-index: -1;
}

.portfolio-content .portfolio-web .webites-intro .portfolio-category-intro {
  padding: unset;
  padding-inline-start: 50px;
}

.portfolio-content
  .portfolio-web
  .portfolio-category-intro
  .portfolio-intro-cover {
  width: 46%;
  display: flex;
  justify-content: center;
}

.portfolio-content
  .portfolio-web
  .webites-intro
  .portfolio-category-intro
  .portfolio-intro-cover {
  justify-content: end;
  position: relative;
}

.portfolio-content
  .portfolio-web
  .medical-webites-intro
  .portfolio-category-intro
  .portfolio-intro-cover {
  position: relative;
  width: 40%;
}
.portfolio-content
  .portfolio-web
  .medical-webites-intro
  .portfolio-category-intro
  .portfolio-intro-cover
  .circle-intro {
  position: absolute;
  top: 24%;
  width: 110%;
}

.portfolio-content
  .portfolio-web
  .medical-webites-intro
  .portfolio-category-intro
  .portfolio-intro-cover
  .circle-intro
  img {
  width: 100%;
}

.portfolio-content
  .portfolio-web
  .medical-webites-intro
  .portfolio-category-intro
  .portfolio-intro-cover
  img.medical-bg {
  width: 100%;
}

.portfolio-content
  .portfolio-web
  .portfolio-category-intro
  .portfolio-intro-cover
  img {
  width: 65%;
  width: 80%;
}

.portfolio-content
  .portfolio-web
  .webites-intro
  .portfolio-category-intro
  .portfolio-intro-cover
  img.outer-image {
  position: absolute;
  width: 100%;
  left: -20px;
  bottom: -15px;
}

.portfolio-content .portfolio-web .portfolio-intro-desc {
  width: 60%;
}

.portfolio-content .portfolio-web .portfolio-intro-desc .self-portfolio-mobile,
.portfolio-content .portfolio-web .portfolio-intro-desc .intro-ecommerce-mobile,
.portfolio-content
  .portfolio-web
  .portfolio-intro-desc
  .portfolio-medical-intro {
  display: none;
}

.portfolio-content .portfolio-web .portfolio-intro-desc h1 {
  font-size: 27px;
  display: flex;
  align-items: baseline;
}

.portfolio-content .portfolio-web .portfolio-intro-desc h1 span {
  font-size: 38px;
  font-weight: 600;
  color: #eb3243;
  text-transform: capitalize;
  margin: 0 7px;
}

.portfolio-content .portfolio-web .portfolio-intro-desc h1 img {
  width: 35px;
  margin: 0 7px;
}

.portfolio-content .portfolio-web .portfolio-intro-desc h2 {
  font-size: 28px;
  margin-bottom: 30px;
  font-family: "zain-font";
}

.portfolio-content .portfolio-web .portfolio-intro-desc a {
  background: #eb3243;
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
}

.portfolio-content .portfolio-web .portfolio-intro-desc a:hover {
  transform: scale(0.95);
}

.portfolio-content .portfolio-web .portfolio-intro-desc a img {
  width: 20px;
  margin-inline-start: 5px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}
.portfolio-content .portfolio-web .portfolio-intro-desc a:hover img {
  transform: scale(1.2);
  margin-inline-start: 7px;
}

.portfolio-content .portfolio-web h2 span {
  color: #eb3243;
  text-transform: capitalize;
  font-size: 27px;
}

/* update web */

.portfolio-content .portfolio-web .update-web-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
}

.portfolio-content .portfolio-web .update-web-container h2 {
  margin-bottom: 20px;
  font-size: 25px;
  /* font-family: "lemonada-font"; */
  text-transform: capitalize;
}

.portfolio-content .portfolio-web .update-web-container h2 span {
  font-size: 31px;
}
.portfolio-content .portfolio-web .update-web-container h2 span.letter-y {
  font-family: cursive;
  color: #212529e8;
  transform: translateX(34px);
  margin-right: -4px;
}

.portfolio-content .portfolio-web .update-web-container h4 {
  font-size: 24px;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  font-family: "zain-font";
  width: 80%;
  line-height: 1;
}
.portfolio-content .portfolio-web .update-web-container h4 img {
  width: 45px;
  margin-inline-end: 10px;
}

.portfolio-content .portfolio-web .update-web-container p img {
  width: 25px;
  margin-inline-end: 6px;
}

.portfolio-content .portfolio-web .update-web-container p span {
  font-size: 22px;
  color: #eb3243;
  font-weight: 600;
  margin-inline-end: 3px;
}

.portfolio-content .portfolio-web .update-web-container .update-web-cover {
  width: 45%;
}

.portfolio-content
  .portfolio-web
  .update-web-container
  .update-web-cover.update-mobile {
  display: none;
}

.portfolio-content .portfolio-web .update-web-container p {
  font-size: 22px;
  font-family: "zain-font";
}
.portfolio-content .portfolio-web .update-web-container .update-web-cover img {
  width: 100%;
  height: 25rem;
  object-fit: cover;
}

.portfolio-content .portfolio-web .update-web-container .update-web-desc {
  width: 45%;
  padding-top: 25px;
}

.ecommerce-swiper-container,
.selfbranding-swiper-container,
.swiper-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

.selfbranding-swiper-container h2,
.medical-swiper-container h2 {
  text-align: center;
  font-size: 40px;
  /* margin-bottom: 20px; */
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: "zain-font";
  letter-spacing: 3px;
}

.medical-swiper-container h2 img {
  margin: 0 7px;
  width: 25px;
  border-bottom: 2px solid #eb3243;
  padding-bottom: 1px;
}

.selfbranding-swiper-container h2 img {
  width: 30px;
  margin: 0 10px;
  border-bottom: 2px solid #e84756;
  padding-bottom: 2px;
}

.selfbranding-swiper-container h2 span,
.medical-swiper-container h2 span {
  font-size: 33px !important;
  font-weight: 600;
}


/* //////// */
.play-btn,
.pause-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
  display: none;
}

.swiper-slide-active .play-btn {
  display: block;
}

.pause-btn {
  display: none;
}

/* //////// */
.ecommerce-swiper-container .videos-title {
  text-align: center;
  margin-bottom: 15px;
}

.ecommerce-swiper-container .videos-title h2 {
  text-align: center;
  font-size: 40px;
  /* margin-bottom: 20px; */
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: "zain-font";
  letter-spacing: 2px;
}

.ecommerce-swiper-container .videos-title h2 span {
  font-size: 45px !important;
  /* font-weight: 600; */
  margin-inline-start: 7px;
}

.ecommerce-swiper-container .videos-title h2 img {
  width: 30px;
  margin: 0 10px;
  border-bottom: 2px solid #e84756;
  padding-bottom: 2px;
}


.swiper-wrapper {
  display: flex;
  align-items: center; /* Center align all slides vertically */
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.5s ease-in-out;
}

.slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.slide-content h3 {
  font-size: 1.2rem;
  margin: 0;
  color: #333; /* Title color */
}

.slide-content img.website-logo {
  width: 60px;
  margin: 0;
  height: 50px;
  object-fit: contain;
}
.slide-content img.website-logo.brain-logo {
  width: 125px;
}

.slide-content a.video-link img {
  width: 25px;
  margin: 0;
  transition: all 0.2s ease;
}
.slide-content a.video-link:hover img {
  transform: rotateZ(-25deg);
}

.slide-content video {
  width: 80%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  transition: transform 0.5s;
}

.slide-content .video-link {
  text-decoration: none;
  color: #007bff;
  font-size: 1rem;
  margin-top: 30px;
}

.swiper-slide-active img.website-logo {
  width: 100px;
  margin-bottom: 25px;
}
.swiper-slide-active img.website-logo.brain-logo {
  width: 175px;
}

.slide-content a.video-link {
  background: #eb3243;
  color: #fff !important;
  padding: 7px 29px;
  border-radius: 50px;
  transition: all 0.3s ease;
}

/* .slide-content a:hover {
  transform: scale(0.96);
} */

.swiper-slide-active h3 {
  margin-bottom: 25px;
}

.web-active .swiper-slide-active video {
  transform: scale(1.2);
  width: 465px;
  margin-bottom: 15px;
  border: 1px solid #eb3243d6;
  object-fit: fill;
}

.swiper-slide.web-page-slider:not(.swiper-slide-active) {
  opacity: 0.7;
  transform: scale(0.9);
}

.swiper-button-prev,
.swiper-button-next {
  color: #ffffff;
  font-size: 14px;
  position: absolute;
  top: 110%;
  top: 100%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  background: #eb3243;
  border-radius: 20px;
  font-size: 37px;
  width: 50px;
  height: 32px;
  transition: all 0.2s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #f04859;
}

.swiper-button-prev {
  left: 35%;
}

.swiper-button-next {
  right: 35%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 1.5rem;
}

.break-tree {
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  /* margin-top: 90px; */
  position: relative;
}

.break-tree::before,
.break-tree::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10%;
  height: 2px;
  background-color: #eb32438f;
}

.break-tree::before {
  left: 37%;
  transform: translateY(-50%);
}

.break-tree::after {
  right: 37%;
  transform: translateY(-50%);
}

.break-tree img {
  width: 35px;
  z-index: 1;
  background: #ffffff;
  padding-bottom: 2px;
  border-bottom: 2px solid #eb3243;
}
/* ////////////////////////////////// */

/* visa motion */

.container.card-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cardWrapper {
  perspective: 1000px;
  width: 100%;
  max-width: 466.67px;
  height: 300px;
}
.card {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); */
  border: none;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  /* background-color: rgba(80, 80, 80, 0.075); */
  background-color: unset;
}
.bg {
  position: absolute;
  bottom: 5px;
  z-index: -1;
  /* filter: brightness(100%) blur(10px); */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.bg img {
  height: 60%;
  width: 60%;
  object-fit: cover;
}
.cardWrapper * {
  pointer-events: none;
}
.highlight {
  position: absolute;
  height: 400px;
  width: 400px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.034);
  filter: brightness(70%) blur(20px);
  left: -20%;
  top: -13%;
}
.card__number {
  font-size: 2rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.card__number--stars {
  height: 2.4rem;
}
.card__name {
  font-weight: 300;
  font-size: 4rem;
  margin-bottom: 10px;
  align-self: flex-start;
}

/* ////////////////////////////////// */

section.payment-service {
  padding-top: 0;
}
section.payment-service h2 {
  text-align: center;
  font-size: 45px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: "zain-font";
  font-weight: 600;
}

section.payment-service h2 span {
  font-size: 45px !important;
  font-weight: 600;
  margin-inline-start: 7px;
}

section.payment-service h2 img {
  width: 30px;
  margin: 0 10px;
  border-bottom: 2px solid #e84756;
  padding-bottom: 2px;
}

section.payment-service .payment-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  /* height: 25rem; */
  padding: 50px 0;
  position: relative;
  z-index: 0;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 95%;
  border-radius: 23px;
  margin: auto;
}
section.payment-service .payment-left-desc {
  /* background-color: green; */
  width: 30%;
  height: 100%;
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding-top: 50px; */
}

section.payment-service .payment-right-desc .payment-points,
section.payment-service .payment-left-desc .payment-points {
  display: flex;
  text-align: left;
  /* margin-bottom: 25px; */
  align-items: flex-start;
}

section.payment-service .payment-right-desc .payment-points.down-arrow,
section.payment-service .payment-left-desc .payment-points.down-arrow {
  margin-top: 30px;
}

section.payment-service .payment-left-desc .payment-points img {
  width: 90px;
  margin-inline-start: 11px;
}

section.payment-service .payment-left-desc .payment-points p {
  margin-left: 8%;
  text-align: end;
  font-size: 21px;
  font-family: "zain-font";
}

section.payment-service .payment-right-desc .payment-points p span,
section.payment-service .payment-left-desc .payment-points p span {
  color: #eb3243;
  text-transform: capitalize;
  font-weight: 700;
  font-family: "italic-zain-font";
}

section.payment-service .payment-right-desc .payment-points p {
  font-size: 21px;
  text-align: start;
  font-family: "zain-font";
}

section.payment-service .payment-right-desc .payment-points img {
  width: 90px;
  margin-inline-end: 11px;
}

section.payment-service .payment-right-desc {
  width: 30%;
  height: 100%;
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* background-color: blue; */
}

section.payment-service .payment-cover {
  width: 40%;
  /* height: 25rem; */
  z-index: 2;
}
section.payment-service .payment-cover img {
  width: 100%;
}

section.payment-service .payment-left-desc,
section.payment-service .payment-right-desc {
  transition: transform 1s ease-out, opacity 1s ease-out;
  opacity: 0;
}

section.payment-service .payment-left-desc {
  transform: translateX(50%);
}

section.payment-service .payment-right-desc {
  transform: translateX(-50%);
}

section.payment-service.active .payment-left-desc {
  transform: translateX(-110%);
  opacity: 1;
}

section.payment-service.active .payment-right-desc {
  transform: translateX(110%);
  opacity: 1;
}

@media (max-width: 992px) {
  section.payment-service.active .payment-left-desc,
  section.payment-service.active .payment-right-desc {
    transform: translateX(0);
  }
}

section.payment-service
  .payment-right-desc
  .payment-points
  p
  img.payment-arrow-mobile,
section.payment-service
  .payment-left-desc
  .payment-points
  p
  img.payment-arrow-mobile {
  display: none;
}

/* shipping */

section.shipping {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

section.shipping .shipping-cover {
  width: 27%;
  display: flex;
  align-items: center;
}

section.shipping .shipping-cover img {
  width: 100%;
}

.map-image {
  position: relative;
  transform: translateX(100%); /* Start off-screen to the right */
  transition: transform 1s ease; /* Smooth transition */
}

.map-image.activeshipping {
  transform: translateX(0); /* Move into view */
}

section.shipping .shipping-desc {
  width: 40%;
}

section.shipping .shipping-desc h2 {
  font-size: 29px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  font-weight: 600px;
}

section.shipping .shipping-desc h2 span {
  font-size: 34px !important;
  font-weight: 600;
  margin: 0 7px;
}

section.shipping .shipping-desc h6 {
  color: #eb3243;
  font-size: 22px;
  font-weight: 600;
  font-family: "light-zain-font";
}

section.shipping .shipping-desc p {
  margin-bottom: 30px;
  font-family: "zain-font";
  font-size: 22px;
  line-height: 1.25;
}

section.shipping .shipping-desc h2 img {
  width: 35px;
  margin: 0 5px;
}

section.shipping .shipping-desc a {
  background: #eb3243;
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
}

section.shipping .shipping-desc a img {
  width: 20px;
  margin-inline-start: 5px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

/* online conultation */

/* ************************ */

/* oasis */

.benefits-description {
  background-image: url(../img/online-cons.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  height: 80vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 2.5rem;
  width: 98%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 23px;
  margin: auto;
  margin-bottom: 55px;
}

.benefits-description-text {
  background-color: #000000b0;
  color: white;
  padding: 2rem 0rem;
  border-radius: 8px;
  width: 39%;
  text-align: center;
  margin: 1rem 4rem;
  z-index: 1;
}

.benefits-description-text h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #eb3243;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tumor-box .benefits-description .benefits-description-text h2 span {
  color: #fff;
  margin-inline-end: 7px;
}

.benefits-description-text h2 img {
  width: 30px;
  margin-inline-end: 5px;
}

.benefits-description-text ul {
  padding: 0;
  padding: 0 50px;
}
.benefits-description-text ul li::marker {
  color: #eb3243;
}

.benefits-description-text h4 {
  font-size: 21px;
  width: 75%;
  margin: auto;
  margin-bottom: 1rem;
  /* color: #e91e63; */
}

.benefits-description-text h4 img {
  width: 25px;
}

.benefits-description-text p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--secondary-color);
  text-align: start;
}


.benefits-description .opacity-layer {
  background-image: linear-gradient(
    95deg,
    rgba(247, 249, 252, 0.65) 50%,
    #f7f9fc00
  );
  width: 60%;
  position: absolute;
  inset: 0% 0% 0% auto;
  left: 0;
}

.benefits-description-text .reserve-btn a {
  background: #eb3243;
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
}

.benefits-description-text .reserve-btn a:hover {
  transform: scale(0.95);
}
.benefits-description-text .reserve-btn a:hover img {
  transform: scale(1.2);
  margin-inline-start: 7px;
}

.benefits-description-text .reserve-btn a img {
  width: 20px;
  margin-inline-start: 5px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

@media (max-width: 575px) {
  #footer .copyright,
  #footer .credits {
    float: none;
    -moz-text-align-last: center;
    text-align-last: center;
    padding: 3px 0;
  }
  main section.client-data form {
    width: 90%;
  }
}

/* responsive */

section.responsive-web {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
  margin-top: 40px;
}

section.responsive-web .responsive-web-cover {
  width: 52%;
}

section.responsive-web .responsive-web-cover h2,
section.responsive-web .responsive-web-cover h4 {
  display: none;
}

section.responsive-web .responsive-web-cover video {
  width: 100%;
}

section.responsive-web .responsive-web-desc {
  width: 40%;
}

section.responsive-web .responsive-web-desc .responsive-mobile {
  display: none;
}

section.responsive-web .responsive-web-desc h2 {
  font-size: 37px;
  font-family: "zain-font";
}

section.responsive-web .responsive-web-desc h2 span {
  font-size: 42px;
  margin-bottom: 20px;
}

section.responsive-web .responsive-web-desc h4 {
  font-size: 28px;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-family: "zain-font";
}

section.responsive-web .responsive-web-desc h4 img {
  width: 50px;
  margin-inline-end: 10px;
}

section.responsive-web .responsive-web-desc p {
  font-family: "zain-font";
  font-size: 20px;
}

section.responsive-web .responsive-web-desc p span {
  font-size: 23px;
  font-weight: 600;
  color: #eb3243;
}

section.responsive-web .responsive-web-desc p img {
  width: 25px;
  margin-inline-end: 5px;
}

/* chat bot */
section.chat-bot {
  padding-bottom: 0;
}
section.chat-bot .chat-box {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  /* margin-bottom: 40px; */
}

section.chat-bot .chat-box .chat-left-desc {
  display: flex;
  align-items: center;
  width: 30%;
}

section.chat-bot .chat-box .chat-left-desc video {
  width: 80%;
}

section.chat-bot .chat-box .chat-cover {
  height: 100%;
  width: 50%;
}

section.chat-bot .chat-box .chat-cover h2 {
  text-align: center;
  font-size: 29px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: fit-content;
  margin: auto;
  margin-bottom: 25px;
  /* font-family: "lemonada-font"; */
}

section.chat-bot .chat-box .chat-cover h2 span {
  margin: 0 4px;
  margin-right: 7px;
  font-size: 32px !important;
}

section.chat-bot .chat-box .chat-cover h2 img {
  width: 24px;
  margin: 0 8px;
  border-bottom: 2px solid #eb3243;
  padding-bottom: 2px;
}

section.chat-bot .chat-box .chat-cover p {
  font-size: 21px;
  width: 100%;
  font-family: "zain-font";
}
section.chat-bot .chat-box .chat-cover .chat-mobile {
  display: none;
}

section.chat-bot .chat-box .chat-cover p span {
  font-size: 23px;
  color: #eb3243;
  font-weight: 600;
  margin-inline-end: 3px;
}

section.chat-bot .chat-box .chat-cover p span img {
  width: 25px;
  margin-inline-end: 5px;
}

section.chat-bot .chat-box .chat-right-desc {
  display: flex;
  align-items: center;
  height: 100%;
  width: 30%;
  justify-content: center;
}

section.chat-bot .chat-box .chat-right-desc img {
  width: 80%;
}

/* show services */

section.show-services {
  padding: 0;
  padding-bottom: 35px;
}

section.show-services .show-services-title {
  /* background-color: red; */
  text-align: center;
}

section.show-services .show-services-title h2 {
  text-align: center;
  font-size: 27px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  /* font-family: "lemonada-font"; */
}

section.show-services .show-services-title h2 span {
  font-size: 34px !important;
  font-weight: 600;
}
section.show-services .show-services-title h2 img {
  margin: 0 5px;
  width: 25px;
  border-bottom: 2px solid #eb3243;
  padding-bottom: 1px;
  /* margin-inline-start: 4px; */
}

section.show-services .show-services-title p {
  font-size: 20px;
  /* font-family: "lemonada-font"; */
}

/* General Styles */

section.show-services .services-swiper {
  height: 25rem;
  width: 100%;
  border-radius: 25px;
  margin: auto;
  margin-bottom: 25px;
  padding: 5px;
  position: relative;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
section.show-services .service-box {
  position: relative;
  height: 100%;
  width: 60%;
  border-radius: 25px;
  display: flex;
  justify-content: end;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}

.services-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: unset;
  transform: unset;
}

.services-swiper .swiper-pagination-clickable .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

.services-swiper .swiper-pagination-bullet-active {
  background: #eb3243;
}

.services-swiper .swiper-pagination {
  bottom: -40px;
}

.services-swiper .swiper-button-prev,
.services-swiper .swiper-button-next {
  top: 60%;
  height: 40px;
  width: 65px;
}

.services-swiper .swiper-button-prev {
  left: 10%;
}
.services-swiper .swiper-button-next {
  right: 10%;
}

section.show-services .service-box .service-card {
  background-color: transparent;
  width: 340px;
  height: 230px;
  position: relative;
  left: -6%;
  top: 18%;
  border-radius: 25px;
  perspective: 1000px; /* Enables 3D rotation */
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

section.show-services .service-box .service-card .card-back {
  border: 2px solid #80808047;
}

section.show-services .service-box .service-card .card-front,
section.show-services .service-box .service-card .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hides the back side when flipped */
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: white;
  font-weight: bold;
  transform-style: preserve-3d;
}

section.show-services .service-box .service-card .card-back img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  object-fit: cover;
}
section.show-services .service-box .service-card .card-front img {
  width: 60px;
}

/* Front and Back Styling */
.card-front {
  background: linear-gradient(to right, #bb2c36, #eb3243);
  transform: rotateY(0deg);
}

.card-back {
  background-color: #80808047;
  transform: rotateY(180deg); /* Positioned behind the front */
}

/* Flip Effect */
.service-card.flipped {
  transform: rotateY(180deg); /* Rotates the card to reveal the back */
}

/* Description Box */
section.show-services .service-box .service-desc {
  width: 63%;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
  padding: 0 50px;
}

section.show-services .service-box .service-desc h5 {
  color: #eb3243;
  font-family: "zain-font";
  font-size: 29px;
}

section.show-services .service-box .service-desc h3 {
  text-align: left;
  font-family: "zain-font";
  font-size: 32px;
}

section.show-services .service-box .service-desc p {
  text-align: left;
  font-size: 21px;
  font-family: "light-zain-font";
  line-height: 1;
}

section.show-services .service-box .service-desc a {
  background: #eb3243;
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
}

section.show-services .service-box .service-desc a img {
  width: 20px;
  margin-inline-start: 5px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

/* others web */

section.other-webs {
  padding-bottom: 0;
}

section.other-webs .other-webs-title {
  text-align: center;
  margin-bottom: 25px;
}

section.other-webs .other-webs-title h2 {
  font-size: 27px;
}

section.other-webs .other-webs-title h2 span {
  font-size: 33px;
}

section.other-webs .other-webs-box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  row-gap: 25px;
}

/* Styles for the link */
section.other-webs .other-webs-box a.other-webs-box-item {
  position: relative;
  width: 30%;
  border-radius: 12px;
  overflow: hidden; /* Ensures the layer stays within the element bounds */
}

/* Styles for the image inside the <a> */
section.other-webs .other-webs-box a.other-webs-box-item img {
  width: 100%;
  border-radius: 12px;
  height: 12rem;
  object-fit: cover;
  object-position: top;
}

/* Overlay layer */
section.other-webs .other-webs-box a.other-webs-box-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #933c4469 50%, #45000880 50%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 1;
  transition: opacity 0.25s ease; /* Smooth fade effect */
  z-index: 1;
  pointer-events: none; /* Prevent interaction */
}

/* Centered image inside the overlay */
section.other-webs
  .other-webs-box
  a.other-webs-box-item
  .overlay
  .centered-image {
  width: 3rem; /* Adjust size as needed */
  height: 3rem;
  object-fit: contain;
}

/* Text below the centered image */
section.other-webs
  .other-webs-box
  a.other-webs-box-item
  .overlay
  .overlay-text {
  color: white;
  font-size: 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
}

section.other-webs
  .other-webs-box
  a.other-webs-box-item
  .overlay
  .overlay-text
  img {
  width: 16px;
  height: unset;
}

/* Hover effect to fade out the overlay */
section.other-webs .other-webs-box a.other-webs-box-item:hover .overlay {
  opacity: 0;
}

/* our clients */

section.our-clients {
  padding: 30px 20px;
  position: relative;
  display: flex;
  align-items: center;
  /* height: 320px; */
  /* display: flex;
  justify-content: center;
  align-items: center;   */
}

section.our-clients .our-clients-desc {
  width: 40%;
  padding: 0 29px;
  padding-top: 35px;
  padding-bottom: 80px;
  position: relative;
}

section.our-clients .our-clients-cover {
  width: 60%;
  display: flex;
  justify-content: center;
}

/* section.our-clients .our-clients-cover img {
  width: 90%;
} */
section.our-clients .our-clients-cover video {
  width: 90%;
}

section.our-clients img.blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

section.our-clients .our-clients-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

section.our-clients .our-clients-title h3 {
  font-size: 30px;
  font-weight: 600;
  color: #eb3243;
  letter-spacing: 5px;
  margin: 0;
}

section.our-clients .our-clients-title img {
  width: 30px;
  border-bottom: 2px solid #eb3243;
  padding-bottom: 2px;
}

section.our-clients .our-clients-title .building {
  text-align: center;
}

section.our-clients p {
  /* width: 90%; */
  margin: auto;
  margin-bottom: 25px;
  font-size: 35px;
}
section.our-clients p img {
  width: 30px;
  margin-inline-end: 6px;
  transform: translateY(-4px);
}

section.our-clients p span {
  color: #eb3243;
  font-weight: 600;
  font-size: 39px;
}

section.our-clients a {
  background: #eb3243;
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
  margin-bottom: 35px;
}

section.our-clients a img {
  width: 20px;
  margin-inline-start: 5px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}
section.our-clients .client-logo-box h5 {
  font-weight: 400;
  margin-bottom: 20px;
}

section.our-clients .client-logo-box h5 span {
  font-weight: 700;
  border-bottom: 1px dashed;
  font-size: 24px;
}

section.our-clients .client-logo-box .clients-swiper {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 23px;
  /* padding: 10px 0; */
  padding: 0px 0;
  position: absolute;
  left: -37px;
}

/* new ticker */

.news-ticker {
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  position: relative;
  height: 70px;
  line-height: 40px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin-bottom: 25px;
  display: flex;
}

.news-ticker.client-logo-anim {
  margin-bottom: 0px;
}

.ticker-container {
  display: flex;
  width: max-content;
  animation: scrollTicker linear infinite;
  white-space: nowrap;
}

.ticker-item {
  padding: 0 30px;
  color: #131313;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.ticker-item img {
  width: 18px;
  margin-inline-end: 4px;
}

.client-logo-anim .ticker-item img {
  /* width: 50px; */
  width: 100px;
  margin-inline-end: 4px;
}

/* Pause animation on hover */
.news-ticker:hover .ticker-container {
  animation-play-state: paused;
}

/* Keyframes for scrolling effect - Move left to right */
@keyframes scrollTicker {
  0% {
    transform: translateX(-100%); /* Start off-screen to the left */
  }
  100% {
    transform: translateX(0); /* Move to the right, so the first item appears */
  }
}

/* clients works */

section.clients-show {
}

section.clients-show .clients-show-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

section.clients-show .clients-show-header .clients-show-title {
  width: 45%;
  padding-inline-start: 35px;
}

section.clients-show .clients-show-header .clients-show-title p {
  margin-bottom: 10px;
  font-weight: 500;
  color: grey;
}

section.clients-show .clients-show-header .clients-show-title h2 {
  font-weight: 900;
  color: transparent;
  font-size: 70px;
  background: url(/assets/img/spacehh.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -2px;
  line-height: 65px;
  padding-bottom: 15px;
  position: relative;
}

section.clients-show .clients-show-header .clients-show-title h2 img {
  width: 120px;
  position: absolute;
  right: -30px;
  z-index: -1;
  bottom: -13px;
  transform: rotate(-40deg);
}

section.clients-show .clients-show-header .clients-show-tabs {
  width: 50%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

section.clients-show .clients-show-header .clients-show-tabs p {
  margin-bottom: 0;
  font-size: 18px;
  cursor: pointer;
  color: #808080;
  padding: 5px 30px;
  font-weight: 500;
  border-radius: 12px;
  border-bottom: 2px solid transparent;
  margin-top: 5px;
  transition: all 0.3s ease;
  text-transform: capitalize;
}

section.clients-show .clients-show-header .clients-show-tabs p.active-dep {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-bottom: 2px solid #d02e3e;
}

section.clients-show
  .clients-show-header
  .clients-show-tabs
  p:not(.active-dep):hover {
  /* background: #8080808f; */
  /* color: #fff; */
  border-bottom: 2px solid #d02e3e;
}

/* section.clients-show .work-gallery{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

section.clients-show .work-gallery .work-gallery-item{
  width: 30%;
  cursor: pointer;
}

section.clients-show .work-gallery .work-gallery-item img{
  width: 90%;
  height: 25rem;
  object-fit: cover;
  border-radius: 12px;
}

section.clients-show .work-gallery .work-gallery-item h3{
  font-size: 23px;
} */

section.clients-show .work-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 75px;
  flex-wrap: wrap;
}

section.clients-show .work-gallery .work-gallery-item {
  position: relative;
  width: 25%;
  cursor: pointer;
  overflow: hidden;
}

section.clients-show .work-gallery .work-gallery-item img.work-img {
  width: 100%;
  height: 25rem;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.5s ease;
}

section.clients-show .work-gallery .work-gallery-item .work-box {
  position: relative;
}

section.clients-show .work-gallery .work-gallery-item h4 {
  font-size: 15px;
  background: #eb3243;
  padding: 10px 14px;
  border-radius: 23px;
  transition: all 0.3s ease;
}

section.clients-show .work-gallery .work-gallery-item h4:hover {
  padding: 10px 22px;
}

section.clients-show .work-gallery .work-gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(100%);
  border-radius: 12px;
  flex-direction: column;
}

section.clients-show .work-gallery .work-gallery-item .overlay img {
  width: 10%;
  margin-bottom: 10px;
  transition: transform 1.5s ease;
}

section.clients-show .work-gallery .work-gallery-item:hover .overlay {
  opacity: 1;
  transform: translateY(0);
}

section.clients-show .work-gallery .work-gallery-item:hover .overlay img {
  transform: rotateY(360deg);
}

section.clients-show .work-gallery .work-gallery-item h3 {
  font-size: 23px;
  position: relative;
  z-index: 1;
  color: #242424;
  text-transform: capitalize;
}

/* tree vision */

.tree-vision-container h2 {
  text-align: center;
  font-size: 38px;
  margin-bottom: 25px;
}

.tree-vision-container h2 span {
  color: #eb3243;
  font-weight: 600;
  font-size: 55px;
}

.portfolio-content .portfolio-socia-media .tree-vision {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc {
  width: 50%;
  padding-inline-start: 35px;
}

.portfolio-content .portfolio-socia-media .tree-vision .vision-cover-mobile {
  display: none;
}

.portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc h3 {
  font-size: 36px;
  color: #eb3243;
  display: flex;
  align-items: center;
}

.portfolio-content
  .portfolio-socia-media
  .tree-vision
  .vision-left-desc
  p.our-vision {
  margin-bottom: 10px;
  font-weight: 500;
  color: grey;
}

.portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc h3 {
  font-weight: 900;
  color: transparent;
  font-size: 70px;
  background: url(/assets/img/space-tree.jpg) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -2px;
  line-height: 65px;
  padding-bottom: 15px;
  position: relative;
}

/* .portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc h3 img {
  width: 120px;
  position: absolute;
  right: -30px;
  z-index: -1;
  bottom: -13px;
  transform: rotate(-40deg);
} */

.portfolio-content
  .portfolio-socia-media
  .tree-vision
  .vision-left-desc
  h3
  img {
  width: 30px;
  margin-inline-end: 10px;
}

.portfolio-content
  .portfolio-socia-media
  .tree-vision
  .vision-left-desc
  .vision-text {
  display: flex;
  align-items: baseline;
}

.portfolio-content
  .portfolio-socia-media
  .tree-vision
  .vision-left-desc
  .vision-text
  p {
  font-family: "zain-font";
  font-size: 20px;
}

.portfolio-content
  .portfolio-socia-media
  .tree-vision
  .vision-left-desc
  .vision-text
  p
  span {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #eb3243;
}

.portfolio-content
  .portfolio-socia-media
  .tree-vision
  .vision-left-desc
  .vision-text
  img {
  width: 30px;
  transform: translateY(10px);
}

.portfolio-content .portfolio-socia-media .tree-vision .vision-cover {
  width: 30%;
}

.portfolio-content .portfolio-socia-media .tree-vision .vision-cover img {
  width: 100%;
}

/* tree mission */

.tree-mission-container{
  margin-bottom: 45px;
}

.tree-mission-container .tree-mission {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  position: relative;
}

.tree-mission-container .tree-mission img.dart {
  position: absolute;
  width: 25px;
}

.tree-mission-container .tree-mission .mission-cover {
  width: 30%;
  position: relative;
}

.wrap-left {
  position: absolute;
  width: fit-content;
  top: 55px;
  left: 0px;
  z-index: -1;
}

.circle-social {
  background: plum;
  width: 400px;
  height: 400px;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  overflow: hidden;
  animation: morph 3s linear infinite;
}

.circle-social img {
  width: 100%;
}

@keyframes morph {
  0%,
  100% {
    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
  }
  34% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
}

.tree-mission-container .tree-mission .mission-cover img {
  width: 100%;
  border-radius: 23px;
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

.tree-mission-container .tree-mission .mission-desc {
  width: 50%;
}

.tree-mission-container .tree-mission .mission-desc .mission-cover-mobile {
  display: none;
}

.tree-mission-container .tree-mission .mission-desc h2 {
  font-weight: 900;
  color: transparent;
  font-size: 70px;
  background: url(/assets/img/space-tree.jpg) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -2px;
  line-height: 65px;
  position: relative;
}

.tree-mission-container .tree-mission .mission-desc h2.lower-title {
  padding-bottom: 15px;
}

.tree-mission-container .tree-mission .mission-desc h2 span {
  color: #eb3243;
  font-weight: 600;
  font-size: 40px;
}

.tree-mission-container .tree-mission .mission-desc h4 {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.tree-mission-container .tree-mission .mission-desc h6 {
  font-weight: 600;
  font-size: 17px;
  padding-inline-start: 25px;
  color: #eb3243;
}

.tree-mission-container .tree-mission .mission-desc p {
  display: flex;
  align-items: baseline;
  font-family: "zain-font";
  font-size: 20px;
}

.tree-mission-container .tree-mission .mission-desc p img {
  width: 25px;
  margin-inline-end: 5px;
}

.tree-mission-container .tree-mission .mission-desc h4 img {
  width: 40px;
  margin-inline-end: 10px;
}

.break-tree.misson-tree {
  margin-bottom: 35px;
}

/* section.our-clients #typed-output{
  height: 75px;
  color: #eb3243;
  width: fit-content;
  font-size: 48px;
}

section.our-clients .typed-cursor{
  display: none;
} */

/* clients page */

section.clients-intro {
  margin-top: 70px;
  padding-top: 35px;
  padding-bottom: 0;
}

section.clients-intro .clients-intro-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 40px;
}

section.clients-intro .clients-intro-title .client-brand-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

section.clients-intro .clients-intro-title .client-brand-name img {
  width: 28px;
  margin-top: -10px;
  transition: transform 1s ease;
}

section.clients-intro .clients-intro-title h1 {
  text-transform: capitalize;
  margin: 0;
  /* margin-inline-start: 25px; */
  position: relative;
  font-size: 50px;
  font-family: "zain-font";
}

section.clients-intro .clients-intro-title h1::before {
  content: "";
  background: #eb3243;
  position: absolute;
  left: 0;
  bottom: 5%;
  width: 45px;
  height: 3px;
  animation: expandWidth 1.5s ease-in-out forwards,
    retractWidth 1.5s 1.5s ease-in-out forwards;
}

@keyframes expandWidth {
  from {
    width: 45px;
  }
  to {
    width: 170px;
  }
}

@keyframes retractWidth {
  from {
    width: 170px;
  }
  to {
    width: 45px;
  }
}

section.clients-intro .clients-intro-logo {
  width: 14%;
}

section.clients-intro .clients-intro-logo .client-logo {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  z-index: 0;
}

section.clients-intro .clients-intro-logo .client-logo img {
  /* width: 100%; */
  width: 70%;
}

section.clients-intro .client-hero {
  width: 98%;
  margin: auto;
  border-radius: 23px;
  margin-bottom: 15px;
}

section.clients-intro .client-hero img {
  width: 100%;
  height: 25rem;
  object-fit: cover;
  border-radius: 23px;
  object-position: top;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

section.clients-intro .client-desc {
  padding: 0 30px;
  margin-bottom: 40px;
}

section.clients-intro .client-desc h3 {
  font-family: "zain-font";
}

section.clients-intro .client-desc p {
  padding: 0 15px;
}

section.clients-intro .client-swiper {
  /* padding: 0 30px; */
  margin-bottom: 50px;
  position: relative;
}

/* section.clients-intro .client-swiper h3{
  font-family: "zain-font";
  color: #eb3243;
  text-align: center;
  font-size: 55px;
} */

/* section.clients-intro .client-swiper h2{
    text-align: center;
    width: fit-content;
    font-size: 50px;
    color: var(--tree-color);
    font-weight: 300;
    margin: auto;
    margin-bottom: 10px;
} */

/* CSS */
section.clients-intro .client-swiper h2 {
  text-align: center;
  width: fit-content;
  font-size: 50px;
  color: var(--tree-color);
  font-weight: 300;
  margin: auto;
  /* margin-bottom: 10px; */
  display: flex;
  align-items: center;
  gap: 10px; /* Space between words and image */
}

section.clients-intro .client-swiper h2 .logo-container {
  position: relative;
  width: 60px; /* Adjust size as needed */
  height: 60px;
}
section.clients-intro .client-swiper h2 .logo-container .lineunder-img {
  position: absolute;
  bottom: -25%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--tree-color);
  transition: all 0.5s ease;
}

section.clients-intro .client-swiper h2 .logo-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--tree-color); /* Adjust border color */
  border-radius: 50%;
  background: transparent;
  transition: all 0.5s ease;
}

/* section.clients-intro .client-swiper h2 .logo-container::after {
  content: '';
  position: absolute;
  bottom: -25%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
  transition: all 0.5s ease;

} */

section.clients-intro .client-swiper h2 .logo-container.active::after {
  bottom: 0;
}

section.clients-intro .client-swiper h2 .logo-image {
  width: 60%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: all 0.5s ease;
}

/* Class to be added by jQuery when animation is complete */
section.clients-intro .client-swiper h2 .logo-container.no-background::before {
  opacity: 0;
}


section.clients-intro .client-swiper img.float-1,
section.clients-intro .client-swiper img.float-2{
  position: absolute;
}

section.clients-intro .client-swiper img.float-1{
    right: -6%;
    top: -9%;
    width: 46rem;

}
section.clients-intro .client-swiper img.float-2{
left: -6%;
    top: -11%;
    width: 12rem;
}

/* //////////////////////// */

.share-container {
  position: relative;
  display: inline-block;
  /* margin-right: 5%; */
}

.share-mobile {
  display: none;
}

.share-btn {
  background-color: transparent;
  color: black;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 23px;
  font-size: 22px;
  padding: 7px 35px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.share-btn img {
  width: 25px;
}

.social-icons {
  opacity: 0;
  position: absolute;
  top: 6px;
  right: 2%;
  margin-left: 10px;
  white-space: nowrap;
  transition: opacity 0.5s ease, transform 0.5s ease;
  padding: 7px 15px;
  border-radius: 23px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.social-icon {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  background-color: #333;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  /* transition: transform 0.3s ease; */
  transition: transform 0.3s ease, background-color 0.3s;
}

.social-icon:hover {
  transform: scale(1.2);
  background-color: #555;
}

.share-container:hover .share-btn {
  opacity: 0;
}

.share-container:hover .social-icons {
  opacity: 1;
}

.client-swiper .particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* .client-swiper .container {
  width: 100%;
  margin: 0;
  max-width: 100%;
  background: black;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding-top: 20px;
  background-image: url(../img/social-swiper-bg.jpg);
  background-position: center;
  background-size: contain;
  position: relative;
} */

.client-swiper .container {
  width: 100%;
  margin: 0;
  max-width: 100%;
  padding: 0;
  /* padding-top: 20px; */
  position: relative;  
}





/* //////////////////////////////////// */
section.starz {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(./bg0.jpg);
  background-position-x: center;
  background-size: cover;
  animation: animateBg 50s linear infinite;
}
@keyframes animateBg {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

section.starz span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
    0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1);
  animation: animate 3s linear infinite;
}

section.starz span::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 1px;
  background: linear-gradient(90deg, #fff, transparent);
}

@keyframes animate {
  0% {
    transform: rotate(315deg) translateX(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(315deg) translateX(-1500px);
    opacity: 0;
  }
}
section.starz span:nth-child(1) {
  top: 0;
  right: 0;
  left: initial;
  animation-delay: 0;
  animation-duration: 1s;
}

section.starz span:nth-child(2) {
  top: 0;
  right: 80px;
  left: initial;
  animation-delay: 0.2s;
  animation-duration: 3s;
}

section.starz span:nth-child(3) {
  top: 80px;
  right: 0px;
  left: initial;
  animation-delay: 0.4s;
  animation-duration: 2s;
}

section.starz span:nth-child(4) {
  top: 0;
  right: 180px;
  left: initial;
  animation-delay: 0.6s;
  animation-duration: 1.5s;
}

section.starz span:nth-child(5) {
  top: 0;
  right: 400px;
  left: initial;
  animation-delay: 0.8s;
  animation-duration: 2.5s;
}

section.starz span:nth-child(6) {
  top: 0;
  right: 600px;
  left: initial;
  animation-delay: 1s;
  animation-duration: 3s;
}
section.starz span:nth-child(7) {
  top: 300px;
  right: 0px;
  left: initial;
  animation-delay: 1s;
  animation-duration: 1.75s;
}

section.starz span:nth-child(8) {
  top: 0px;
  right: 700px;
  left: initial;
  animation-delay: 1.4s;
  animation-duration: 1.25s;
}

section.starz span:nth-child(9) {
  top: 0px;
  right: 1000px;
  left: initial;
  animation-delay: 0.75s;
  animation-duration: 2.25s;
}

section.starz span:nth-child(10) {
  top: 0px;
  right: 1000px;
  left: initial;
  animation-delay: 2.75s;
  animation-duration: 2.25s;
}

/* //////////////////////////////////// */

.client-swiper .container h3 {
  text-align: center;
  color: #fff;
  font-size: 35px;
  letter-spacing: 4px;
  position: relative;
  width: fit-content;
  margin: auto;
  margin-bottom: 25px;
}
.client-swiper .container h3::before {
  content: "";
  background: #eb3243;
  position: absolute;
  left: 25%;
  bottom: 0;
  width: 50%;
  height: 2px;
}

.client-swiper .swiper {
  width: 100%;
  padding: 50px 0;
  padding-top: 25px;
}

.client-swiper .swiper-slide {
  position: relative;
  width: 200px;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  transition: 1s;
  user-select: none;
}

.client-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(130, 13, 13, 0.8),
    rgba(39, 8, 92, 0.8)
  );
  background: unset;
  mix-blend-mode: multiply;
  z-index: 1;
  background: rgba(123, 123, 123, 0.4);
}

.client-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s;
}

.client-swiper .swiper-slide p {
  position: absolute;
  left: 20px;
  bottom: 10px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 2px;
  z-index: 2;
  opacity: 0;
  transform: rotate(360deg) scale(0);
  transition: 0.8s;
  display: flex;
  gap: 10px;
  align-items: center;
}

.client-swiper .swiper-slide p img {
  width: 25px;
}

.client-swiper .swiper-slide-active {
  position: relative;
  width: 350px !important;
  transition: 1s;
}


.social-media-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.social-media-layer img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px;
}

.client-swiper .swiper-slide-active::after {
  background: unset;
}

.client-swiper .swiper-slide-active img {
  object-position: 50% 0%;
}

.client-swiper .swiper-slide-active p {
  transform: rotate(0deg) scale(1);
  opacity: 1;
}

.client-swiper .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background-color: #eb3243;
  border-radius: 50%;
  transition: all 0.6s ease-in-out;
}

.client-swiper .swiper-pagination-bullet-active {
  width: 32px;
  background-color: #eb3243;
  border-radius: 14px;
}

.hidden {
  display: none;
}

/* Clients Results */

.clients-results {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: 70px;
}

.clients-results .clients-results-cover {
  /* background-color: green; */
  width: 100%;
  display: flex;
  justify-content: flex-end;
  justify-content: left;
  align-items: center;
}

.clients-results .clients-results-cover .clients-results-data {
  width: 60%;
  margin-inline-end: 45px;
}

.clients-results .clients-results-cover .clients-results-data .results-mobile {
  display: none;
}

.clients-results .clients-results-cover .clients-results-data .media-buying {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.clients-results .clients-results-cover .clients-results-data .media-buying h2 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #8f8f8f;
  text-transform: uppercase;
}

.clients-results .clients-results-cover .clients-results-data .media-buying img.social-icons-abs {
  position: absolute;
  width: 50px;
  right: -3%;
  bottom: 0%;
  z-index: 1;
}

.clients-results .clients-results-cover .clients-results-data .media-buying img.media-buying-abs {
  position: absolute;
  width: 20%;
  left: 0;
  top: -27%;
  z-index: 0;
}

.clients-results .clients-results-cover .clients-results-data .media-buying .media-buying-box {
  width: 90%;
  position: relative;
  margin-bottom: 15px;
}

.media-buying-img-wrap {
  position: relative;
  margin-bottom: 13px;
}

.media-buying-cover {
  width: 100%;
  height: 370px !important;
  object-fit: cover;
  border: 2px solid #ff000075;
  border-radius: 40px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding: 15px;
}

.media-buying-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}


.clients-results .clients-results-cover .clients-results-data .media-buying .media-buying-box:hover .media-buying-layer {
  opacity: 0;
}

.clients-results .clients-results-cover .clients-results-data .media-buying .media-buying-box .media-buying-layer p {
  font-size: 25px;
  margin: 0;
  width: fit-content;
  transition: opacity 0.3s ease;
}

.clients-results .clients-results-cover .clients-results-data .media-buying .media-buying-box .media-buying-layer img {
  width: 25px;
  transition: opacity 0.3s ease;
}

.clients-results .clients-results-cover .clients-results-data .media-buying .media-buying-box .media-buying-layer:hover p,
.clients-results .clients-results-cover .clients-results-data .media-buying .media-buying-box .media-buying-layer:hover img {
  opacity: 0;
}

.clients-results .clients-results-cover .clients-results-data .media-buying p {
  text-align: center;
  width: 80%;
  margin: auto;
  font-family: "zain-font";
  font-size: 21px;
  line-height: 20px;
}

.clients-results .clients-results-cover .clients-results-vector {
  width: 100%;
  position: relative;
}

.clients-results
  .clients-results-cover
  .clients-results-vector
  img.main-vector {
  width: 87%;
}

.clients-results
  .clients-results-cover
  .clients-results-vector
  img.abs-vector-1 {
  position: absolute;
  width: 13%;
  top: 5%;
  right: 8%;
  animation: animation1 4s ease-in-out infinite;
}

.clients-results
  .clients-results-cover
  .clients-results-vector
  img.abs-vector-2 {
  position: absolute;
  width: 6%;
  top: 10%;
  left: 40%;
  animation: animation2 4s ease-in-out infinite;
}

@keyframes animation1 {
  0% {
    transform: translateY(0) rotate(0deg); /* Start position */
  }
  25% {
    transform: translateY(-10px) rotate(0deg); /* Move up */
  }
  50% {
    transform: translateY(0); /* Return to original position and rotate right */
  }
  75% {
    transform: translateY(-10px); /* Move up and rotate left */
  }
  100% {
    transform: translateY(0); /* Back to original position */
  }
}

@keyframes animation2 {
  0% {
    transform: translateY(0) rotate(0deg); /* Start */
  }
  25% {
    transform: translateY(10px) rotate(10deg); /* Move down and rotate right */
  }
  50% {
    transform: translateY(0) rotate(0deg); /* Return */
  }
  75% {
    transform: translateY(10px) rotate(-10deg); /* Move down and rotate left */
  }
  100% {
    transform: translateY(0) rotate(0deg); /* End */
  }
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results {
  position: relative;
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results
  img.graph-abs {
  position: absolute;
  bottom: 4%;
  right: -50px;
  width: 200px;
  z-index: 1;
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results
  img.social-abs {
  position: absolute;
  top: -6%;
  left: 1%;
  width: 23%;
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results
  h2 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #8f8f8f;
  text-transform: uppercase;
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results
  .page-insights-imgs {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 15px;
  gap: 15px;
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results
  .page-insights-imgs
  .insight-item {
  position: relative;
  width: 45%;
  height: 11rem;
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results
  .page-insights-imgs
  .insight-item
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 23px;
  border: 2px solid #eb324378;
}

.insights-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 23px;
  transition: 0.3s;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results
  .page-insights-imgs
  .insight-item
  img.click-here {
  width: 32px;
  margin-left: 5px;
  height: auto;
  border: none;
  object-fit: unset;
  border-radius: unset;
}

.insight-item:hover .insights-layer {
  opacity: 0;
}

/* Popup Layer */


.popup-layer {
  position: fixed;
  top: 0; /* was bottom: 0 */
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 10, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-layer .popup-img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 15px;
}

.popup-layer .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #eb3243;
  border: none;
  font-size: 2rem;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  display: flex;
  align-items: center;
}

.popup-layer .nav-btn i {
  font-size: 25px;
}

.popup-layer .prev-btn {
  left: 20px;
}

.popup-layer .next-btn {
  right: 20px;
}

.popup-layer .close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  color: white;
  cursor: pointer;
}

.clients-results
  .clients-results-cover
  .clients-results-data
  .page-insights-results
  p {
  width: 85%;
  text-align: center;
  margin: auto;
  font-family: "zain-font";
  font-size: 22px;
}

.clients-results .clients-results-cover .clients-results-title {
  width: 35%;
  display: flex;
  flex-direction: column;
  align-items: end;
  /* background-color: teal; */
}

.clients-results
  .clients-results-cover
  .clients-results-title
  .business-statistics {
  margin-bottom: 20px;
  text-align: end;
  padding: 0 45px;
}

.clients-results
  .clients-results-cover
  .clients-results-title
  .business-statistics
  h2 {
  font-size: 70px;
  color: var(--tree-color);
  font-weight: 300;
  text-transform: uppercase;
  margin: 0;
}

.clients-results
  .clients-results-cover
  .clients-results-title
  .business-statistics
  h4 {
  font-size: 55px;
  color: var(--tree-color);
  font-weight: 300;
  text-transform: capitalize;
  margin: 0;
  margin-top: -15px;
  display: flex;
  align-items: center;
  justify-content: end;
}

.clients-results
  .clients-results-cover
  .clients-results-title
  .business-statistics
  h4
  img {
  width: 75px;
  margin-right: 15px;
}

.clients-results .clients-results-cover .clients-results-title p {
  width: 80%;
  margin: 0;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: 45px;
  text-align: end;
}

.clients-results .clients-results-cover .clients-results-title a.reserve-btn {
  background: #eb3243;
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
  margin-right: 45px;
  transition: all 0.3s ease;
}

.clients-results
  .clients-results-cover
  .clients-results-title
  a.reserve-btn:hover {
  padding: 10px 30px;
}

.clients-results
  .clients-results-cover
  .clients-results-title
  a.reserve-btn
  img {
  width: 20px;
  margin-inline-start: 5px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.clients-results
  .clients-results-cover
  .clients-results-title
  a.reserve-btn:hover
  img {
  transform: scale(1.1);
}

/* Custom styles for the swiper */
.clients-results-swiper {
  width: 100%;
  height: auto;
  padding-bottom: 15px;
}

.clients-results-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Ensure content inside slides is responsive */
.clients-results-vector,
.page-insights-results,
.media-buying {
  width: 100%;
  max-width: 1200px; /* Adjust based on your design */
}

/* Responsive image handling */
.clients-results-vector img,
.page-insights-results img,
.media-buying img {
  max-width: 100%;
  height: auto;
}

/* Style navigation buttons */
.swiper-button-prev,
.swiper-button-next {
  color: #333; /* Adjust color as needed */
  color: #fff; /* Adjust color as needed */
}

/* Style pagination */
.swiper-pagination-bullet {
  background: #333; /* Adjust color as needed */
}

.swiper-button-prev.prev-results {
  left: 35%;
  top: unset;
  color: #eb3243;
  background-color: unset;
  bottom: 3%;
  z-index: 20;
}

.swiper-button-next.next-results {
  right: 35%;
  bottom: 3%;
  color: #eb3243;
  background-color: unset;
  top: unset;
  z-index: 20;
}

.swiper-button-prev.prev-results::after,
.swiper-button-next.next-results::after {
  font-size: 16px;
  font-weight: 700;
}

.swiper-pagination.pagination-results {
  bottom: 6%;
}

.swiper-pagination.pagination-results .swiper-pagination-bullet {
  background: #eb3243;
  width: 18px;
  height: 7px;
  border-radius: 5px;
}

.media-popup-layer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.media-popup-content {
  position: relative;
  width: 90%;
  max-width: 800px;
}

.media-popup-content img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 23px;
}

.media-popup-layer .close-popup {
  position: absolute;
  top: 40%;
  right: -10%;
  font-size: 30px;
  color: white;
  cursor: pointer;
  z-index: 10000;
}

.media-popup-layer .swiper-button-prev,
.media-popup-layer .swiper-button-next {
  color: white;
  pointer-events: fill;
}

.media-popup-layer .swiper-button-prev.media-popup-prev {
  top: 51%;
  left: -27px;
}

.media-popup-layer .swiper-button-next.media-popup-next {
  top: 51%;
  right: -27px;
}

/* clients reels */

.reels-section {
  display: flex;
  justify-content: space-between;
  height: 34rem;
  /* margin-bottom: 25px; */
}

.reels-section .all-reels {
  width: 60%;
  padding: 0 40px;
}

.reels-section .all-reels .all-reels-title {
  margin-bottom: 15px;
}

.reels-section .all-reels .all-reels-title h2 {
  width: fit-content;
  font-size: 70px;
  color: var(--tree-color);
  font-weight: 300;
  margin-inline-start: 5px;
}

.reels-section .all-reels .all-reels-title p {
  font-size: 21px;
  width: 65%;
  font-family: "zain-font";
  line-height: 1;
  margin-top: 5px;
  margin-inline-start: 25px;
  margin-bottom: 0;
}

.client-reels {
  width: 100%;
  display: flex;
  padding: 30px 0;
}

.client-reels .thumb-box {
  height: 15rem;
  cursor: pointer;
  position: relative;
}

.client-reels .thumb-box img.reel-thumbnail {
  width: 85%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}

.client-reels .thumb-box img.reel-tree-logo {
  width: 12%;
  position: absolute;
  top: 5%;
  right: 12%;
  z-index: 1;
  opacity: 0.8;
}

.client-reels .thumb-box p.reel-tree-title {
  position: absolute;
  bottom: -1%;
  left: 11%;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-family: "zain-font";
  letter-spacing: 1px;
}

/* Reel Layer */
.client-reels .thumb-box .reel-layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.client-reels .thumb-box .reel-layer:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Play Icon */
.client-reels .thumb-box .reel-layer i {
  color: white;
  font-size: 15px;
  padding: 15px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tree-color);
  transition: all 0.3s ease;
}

.client-reels .thumb-box .reel-layer:hover i {
  width: 45px;
  height: 45px;
  background: var(--tree-color);
}

.swiper-button-next.next-thumbnail {
  right: 0%;
  top: 60%;
}

.swiper-button-prev.prev-thumbnail {
  left: 0%;
  top: 60%;
}

.swiper-button-prev.prev-thumbnail::after,
.swiper-button-next.next-thumbnail::after {
  font-size: 16px;
}

.swiper-pagination.pagination-thumbnail {
  bottom: -2%;
}

.pagination-thumbnail .swiper-pagination-bullet-active {
  background-color: #eb3243;
  width: 29px;
  height: 8px;
  border-radius: 17px;
}

.reels-section .single-reel {
  width: 30%;
  position: relative;
}

.reels-section .single-reel img.phone-cover {
  width: 80%;
  height: auto;
}

.single-reel .video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 177.78%;
}

.single-reel .video-swiper {
  position: absolute;
  top: 0.5%;
  left: 16%;
  width: 46%;
  height: 54%;
  z-index: 1;
  border-radius: 23px;
}

.single-reel .gallery-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 23px;
  transform: unset;
  margin: 0;
}

.single-reel .phone-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the phone cover image scales properly */
  z-index: 2; /* Phone cover stays on top */
}

.single-reel .rocket-man {
  width: 40%;
  position: absolute;
  left: -20%;
  bottom: 65%;
  z-index: 1;
  animation: moveAndRotate 4s ease-in-out infinite;
}

@keyframes moveAndRotate {
  0% {
    transform: translateY(0) rotate(0deg); /* Start position */
  }
  25% {
    transform: translateY(-10px) rotate(0deg); /* Move up */
  }
  50% {
    transform: translateY(0); /* Return to original position and rotate right */
  }
  75% {
    transform: translateY(-10px); /* Move up and rotate left */
  }
  100% {
    transform: translateY(0); /* Back to original position */
  }
}

.play-pause-btn {
  position: absolute;
  top: 28%;
  left: 41%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 15px;
  cursor: pointer;
  display: none;
  z-index: 3;
  width: 50px;
  height: 50px;
  transition: opacity 0.3s ease;
  justify-content: center;
  align-items: center;
}

.play-pause-btn i {
  font-size: 22px;
}

.single-reel .video-container:hover .play-pause-btn {
  display: flex; /* Show button on hover */
}

/* Mute/Unmute Button */
.mute-unmute-btn {
  position: absolute;
  top: 2%;
  right: 41%;
  font-size: 21px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  z-index: 3;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.mute-unmute-btn i {
  font-size: 14px;
}

.swiper-button-next.next-prev-reel,
.swiper-button-prev.next-prev-reel {
  display: none;
}

/* Media Page */

main .media-intro-title {
  position: relative;
}

main .media-intro-title h2 {
  font-weight: 900;
  color: transparent;
  font-size: 60px;
  background: url(/assets/img/video-edit.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  width: fit-content;
  margin: auto;
  margin-top: 35px;
}

main .media-intro-title img {
  width: 50px;
  position: absolute;
  left: 43.5%;
  top: -24px;
}

main section.intro-media {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 35px 0;
  position: relative;
}

main section.intro-media .left-media-intro {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  margin-top: 6%;
}

main section.intro-media .left-media-intro h3 {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
}

main section.intro-media .left-media-intro h3 img {
  width: 25px;
}

main section.intro-media .right-media-intro {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-end;
  margin-bottom: 6%;
}

main section.intro-media .right-media-intro h3 {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
}

main section.intro-media .right-media-intro h3 img {
  width: 25px;
}

main section.intro-media .left-media-intro p,
main section.intro-media .right-media-intro p {
  width: 75%;
  color: grey;
}

main section.intro-media .center-media-intro {
  width: 40%;
}

main section.intro-media .center-media-intro img {
  width: 100%;
  animation: moveAndRotate 4s ease-in-out infinite;
}



#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
} */

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s linear forwards;
  animation-iteration-count: 1;
  animation-delay: 1s;
}

main section.intro-media .right-media-intro .graph__wrapper.right-media {
  position: absolute;
  right: 8%;
  top: 22%;
  transform: rotate(27deg);
}

main section.intro-media .left-media-intro .graph__wrapper.left-media {
  position: absolute;
  left: 10%;
  bottom: 27%;
  transform: rotate(197deg);
}

main section.intro-media .left-media-intro .graph__wrapper svg,
main section.intro-media .right-media-intro .graph__wrapper svg {
  width: 45%;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.dashed {
  stroke-dasharray: 5, 12;
}
#arrow {
  animation: arrow 2s linear forwards;
  opacity: 0;
}
@keyframes arrow {
  to {
    opacity: 1;
  }
}

section.media-portfolio {
  padding: 0;
}

section.media-portfolio hr.media-hr{
  display: none;
}


section.media-portfolio .media-portfolio-intro {
  margin-bottom: 15px;
}

section.media-portfolio .media-portfolio-intro h2 {
  font-weight: 900;
  color: transparent;
  font-size: 60px;
  /* background: url(/assets/img/spacehh.webp) repeat; */
  background: url(/assets/img/spacehh.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  width: fit-content;
  margin: auto;
  margin-top: 35px;
}

section.media-portfolio .media-category-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: -60px;
}

section.media-portfolio .media-category-box .media-category-image {
  width: 45%;
}

section.media-portfolio .media-category-box .media-category-image h3{
  display: none;
}


section.media-portfolio .media-category-box .media-category-image img {
  width: 100%;
}
section.media-portfolio .media-category-box .media-category-image video {
  width: 100%;
}

section.media-portfolio .media-category-box .media-category-description {
  /* width: 35%; */
  width: 40%;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

section.media-portfolio
  .media-category-box
  .media-category-description
  img.category-icon {
  width: 50px;
  margin-top: 8px;
}

section.media-portfolio .media-category-box .media-category-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

section.media-portfolio .media-category-box .media-category-data h3 {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 50px;
  color: #eb3243;
  width: max-content;
  margin-bottom: 20px;
}

section.media-portfolio .media-category-box .media-category-data h4{
  margin-bottom: 25px;
}


section.media-portfolio .media-category-box .media-category-data img {
  width: 50px;
}

section.media-portfolio .media-category-box .media-category-data p {
  font-family: "zain-font";
  font-size: 20px;
  color: grey;
  margin-bottom: 0;
}

section.media-portfolio .media-category-box .media-category-data .discover-box {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}

section.media-portfolio .media-category-box .media-category-data .discover-box h6 {
  margin: 0;
  font-size: 30px;
  color: #eb3243;
  margin-top: 20px;
}

section.media-portfolio
  .media-category-box
  .media-category-data
  .discover-box
  h6
  img {
  width: 30px;
  margin: 0 5px;
}

section.media-portfolio
  .media-category-box
  .media-category-data
  .discover-box
  img.astronut-sitting {
  width: 10%;
  position: absolute;
  top: 16%;
  right: 21%;
  transition: all 0.35s ease;
  pointer-events: none;
}

.glowMe,
.glowAll {
  opacity: 0;
  transition: opacity 300ms linear 0s;
}

section.media-portfolio .media-category-box .media-category-data .discover-box svg {
  width: 8vw;
  height: 8vw;
  cursor: pointer;
}

/* When hovering .discover-box or h6 inside it, apply SVG effects */
.discover-box:hover svg .glowMe {
  opacity: 0.5;
}
.discover-box:hover svg .glowAll {
  opacity: 1;
}
.discover-box:hover svg .buttonTop {
  fill: #ed4e5e;
}
.discover-box:hover svg .buttonSides {
  fill: #a24851;
}



svg:hover .glowMe {
  opacity: 0.5;
}

svg:hover .glowAll {
  opacity: 1;
}
.buttonTop {
  fill: #eb3243;
  transition: fill 300ms linear 0s;
}
svg:hover .buttonTop {
  fill: #ed4e5e;
}
.buttonSides {
  fill: #8c1925;
  transition: fill 300ms linear 0s;
}
svg:hover .buttonSides {
  fill: #a24851;
}
svg:focus {
  outline: none;
}
svg:focus .buttonTop,
svg:focus .playSides {
  stroke: white;
  stroke-width: 2px;
}
svg:focus .playSides {
  stroke-width: 1px;
}
svg:active .buttonTop {
  fill: #c79cff;
}

/* Category page */

#hero.category-page {
  position: relative;
  background-image: none !important;
  overflow: hidden;
  margin-bottom: 80px;
  border-bottom-left-radius: 23px;
  border-bottom-right-radius: 23px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.category-page h1 {
  color: #fff !important;
}
/* New background image div */
#hero.category-page .hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

#hero.category-page .hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  /* object-position: 0% 15%; */
  object-position: bottom;
  /* filter: blur(2px); */
  border-bottom-left-radius: 23px;
  border-bottom-right-radius: 23px;
}

section.podcast {
  padding: 0;
  margin-bottom: 20px;
}

section.podcast .podcast-title {
  margin-bottom: 30px;
}

section.podcast .podcast-title h2 {
  text-align: center;
  font-weight: 900;
  color: transparent;
  font-size: 55px;
  background: url(/assets/img/spacehh.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 65px;
  position: relative;
  margin: 0;
  text-transform: uppercase;
}

section.podcast .category-podcast {
  width: 100%;
  height: 100%;
}

section.podcast .podcast-videos{
  width: 70%;
  height: auto;
  margin: auto;
  position: relative;

}

section.podcast .podcast-videos img.astr-podcast{
  width: 12%;
  position: absolute;
  right: 8%;
  top: -13.5%;
  z-index: -1;
}

section.podcast .podcast-videos .category-podcast-swiper{
  padding-bottom: 45px;
}

section.podcast .podcast-videos .swiper-button-next.next-pod,
section.podcast .podcast-videos .swiper-button-prev.prev-pod {
  top: 50%;
  transition: all 0.3s ease;
}

section.podcast .podcast-videos .swiper-button-next.next-pod{
  right: -15%;
}

section.podcast .podcast-videos .swiper-button-prev.prev-pod{
  left: -15%;
}


section.podcast .podcast-videos .swiper-button-next.next-pod:hover,
section.podcast .podcast-videos .swiper-button-prev.prev-pod:hover {
  padding: 0 30px;
}


.video-js {
  margin-top: 30px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.video-js.vjs-fullscreen {
  border-radius: 0;
}

.video-js .vjs-big-play-button {
  line-height: 1;
  font-size: 30px;
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background-image: linear-gradient(to right, rgba(235, 50, 67, 0.7), rgb(178 39 51))

}

.vjs-modal-dialog .vjs-modal-dialog-content,
.video-js .vjs-modal-dialog,
.vjs-button > .vjs-icon-placeholder:before,
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  height: unset;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.video-js .vjs-control-bar {
  background-image: linear-gradient(to right, rgba(235, 50, 67, 0.7), rgb(178 39 51))
}


.video-js .vjs-slider {
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
}

.video-js .vjs-load-progress {
  background-image: linear-gradient(to left, #eea135, #9a1777);
  background-image: linear-gradient(
    to left,
    rgba(238, 161, 53, 0.3),
    rgba(154, 23, 119, 0.3)
  );
}

.video-js .vjs-load-progress div {
  background: rgba(238, 161, 53, 0.3);
}

section.category-reels {
  padding: 0;
  position: relative;
  overflow: unset;
  width: 100%;
  margin-bottom: 80px;
}

section.category-reels img.category-reels-title-img{
  position: absolute;
  left: 12%;
  top: -3%;
  width: 7%;
  z-index: 1;
}

section.category-reels .category-reels-title{
  margin-bottom: 15px;
}


section.category-reels .category-reels-title h2 {
  text-align: center;
  font-weight: 900;
  color: transparent;
  font-size: 55px;
  background: url(/assets/img/1.jpg) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 65px;
  position: relative;
  margin: 0;
  text-transform: uppercase;

}

section.category-reels .client-swiper .swiper-slide video{
  width: 100%;
}

section.category-reels .category-reels-videos {
  width: 100%;
  background: url(/assets/img/1.jpg);
  background-size: contain;
  background-position: center;
  padding: 40px 0;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

section.category-reels .category-reels-videos img.phone-cover{
  width: 19.5%;
  width: 18.5%;
  height: 29rem;
  position: absolute;
  left: 40%;
  left: 41%;
  z-index: 3;
  bottom: 4%;
  pointer-events: none;
}

section.category-reels .category-reels-videos img.play-catgeory-reel,
section.category-reels .category-reels-videos img.pause-catgeory-reel{
  width: 4%;
  position: absolute;
  left: 48%;
  z-index: 3;
  bottom: 47%;
  cursor: pointer;
  /* pointer-events: none; */
}

section.category-reels .reels-swiper {
  padding: 0 40px; /* Allows the side slides to peek in */
}

.video-wrapper{
  width: 90%;
  display: flex;
  justify-content: center;
}

.video-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 27rem;
}

.category-reels-videos .video-wrapper iframe{
      width: 15rem;
    height: 27rem;
    margin-left: 5px;
}

section.category-reels .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 12px;

}


.category-videos-box .video-wrapper iframe{
  width: 100%;
  height: 32rem;
  border-radius: 23px;
  border: 4px solid var(--tree-color);

}

.category-videos-box .video-wrapper img {
  border-radius: 23px;
  height: 32rem;
  border: 4px solid var(--tree-color);
}

.category-videos-box .video-wrapper{
  width: 100%;
}

.category-videos-box .single-video-box{
  position: relative;
  margin-bottom: 65px;
}

.category-videos-box img.play-catgeory-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
  width: 7%;
  /* pointer-events: none; */
}




.category-podcast-swiper .video-wrapper{
  width: 100%;
}
.category-podcast-swiper .video-wrapper img{
  border-radius: 23px;
  height: 32rem;
  border: 4px solid var(--tree-color);
}

.category-podcast-swiper .single-video-box{
  width: 100%;
}

.category-podcast-swiper .video-wrapper iframe{
  width: 100%;
  height: 32rem;
  border-radius: 23px;
  border: 4px solid var(--tree-color);

}

.category-podcast-swiper .single-video-box{
  position: relative;
}

.category-podcast-swiper .single-video-box img.play-catgeory-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
  width: 7%;
  /* pointer-events: none; */
}

section.category-reels .swiper-slide video {
  width: 100%;
  /* height: 500px; */
  object-fit: contain;
  border-radius: 20px;
}

.swiper-button-prev.prev-category-reel,
.swiper-button-next.next-category-reel {
    width: 75px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    bottom: -2%;
    top: unset;
}

.swiper-button-prev.prev-category-reel::after,
.swiper-button-next.next-category-reel::after {
    content: ''; /* Remove default swiper icon */
}

.swiper-button-prev.prev-category-reel {
    background-image: url('/assets/img/arrow-left.png');
    background-size: 22px;
}

.swiper-button-next.next-category-reel {
    background-image: url('/assets/img/arrow-right-white.png');
    background-size: 22px;
}


section.category-videos{
  padding: 0;
  /* position: relative; */
  overflow: unset;
  margin-bottom: 80px;
}



section.category-videos .category-videos-title{
  margin-bottom: 15px;
  position: relative;
}

section.category-videos .category-videos-title img.category-videos-title-img{
  position: absolute;
  right: 18%;
  top: 2%;
  width: 7%;
  z-index: -1;
}

section.category-videos .category-videos-title h2 {
  text-align: center;
  font-weight: 900;
  color: transparent;
  font-size: 55px;
  background: url(/assets/img/spacehh.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 65px;
  position: relative;
  margin: 0;
  text-transform: uppercase;

}

section.category-videos .category-videos-box{
      width: 70%;
      margin: auto;
}

section.category-contact{
  padding: 0;
  overflow: unset;
  display: flex;
  justify-content: center;
  align-items: center;
}

section.category-contact .category-contact-text{
  width: 40%;
}

section.category-contact .category-contact-text h2{
  font-size: 65px;
  color: #f51f33;
  font-weight: 600;
  margin: 0;
}

section.category-contact .category-contact-text p{
  font-family: "zain-font";
  font-size: 25px;
  margin: 20px 0;
  line-height: 1.25;
}

section.category-contact .category-contact-text p span{
  color: #eb3243;
  font-size: 28px;
}


section.category-contact .category-contact-image{
  width: 55%;
  position: relative;
}

section.category-contact .category-contact-image img{
  width: 100%;
}


/* From Uiverse.io by mobinkakei */ 
section.category-contact .category-contact-text .btn {
  width: 230px;
  height: 50px;
  background: linear-gradient(to top, #eb3243, #ff293c, #eb3243);
  color: #fff;
  border-radius: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  overflow: hidden;
  transition: all 0.5s ease;
}

section.category-contact .category-contact-text .btn:hover {
  width: 250px;
}
section.category-contact .category-contact-text .btn span {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: top 0.5s;
  font-weight: 600;
  color: #fff;
}

.btn-text-one {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.btn-text-two {
  position: absolute;
  width: 100%;
  top: 150%;
  left: 0;
  transform: translateY(-50%);
}

section.category-contact .category-contact-text .btn:hover .btn-text-one {
  top: -100%;
}

section.category-contact .category-contact-text .btn:hover .btn-text-two {
  top: 50%;
}


/* branding page */

#header.branding-header{
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#header.branding-header .navbar a, .navbar a:focus{
  color: black;
}

#main.branding-page{
  margin-top: 10%;
}

section.branding-intro{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-bottom: 25px;
  padding-top: 6px;
}

section.branding-intro .branding-intro-text{
  width: 50%;
}

section.branding-intro .branding-intro-text h2{
  font-size: 75px;
  font-weight: 600;
  margin: 0;
  
}

section.branding-intro .branding-intro-text h2 span{
  color: #eb3243;
  font-size: 80px;
  font-weight: 400;
}


section.branding-intro .branding-intro-text h3{
  font-size: 55px;
  position: relative;
  margin-bottom: 20px;
}

.branding-intro-text .rotating-words {
  display: inline-block;
  position: relative;
  width: 140px; /* Adjust to fit your longest word */
  height: 60px;
  vertical-align: middle;
}

.branding-intro-text .rotating-words .gif h2 {
  font-size: 65px;
  margin: 0;
  font-family: "zain-font";
  color: #eb3243;
  display: flex;
  align-items: center;
  font-weight: 400;
}

.branding-intro-text .rotating-words .gif h2 img{
  width: 30px;
  margin-left: 10px;
  margin-bottom: 10px;
}


.branding-intro-text .rotating-words #g4.gif h2 img,
.branding-intro-text .rotating-words #g3.gif h2 img,
.branding-intro-text .rotating-words #g2.gif h2 img{
  width: 40px;
}



.social-page-intro .rotating-words .gif h2 img{
  width: 40px !important;
}

.media-page-intro .rotating-words .gif h2 img{
  width: 50px !important;
}



.gif {
  position: absolute;
  width: 100%;
  top: 58%;
  -webkit-animation: fadeslideUp 12s infinite; /* Chrome, Opera 15+, Safari 5+ */
  -moz-animation: fadeslideUp 12s infinite; /* Fx 5+ */
  -o-animation: fadeslideUp 12s infinite; /* Opera 12+ */
  animation: fadeslideUp 12s infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

.gif h2{
  text-align: center;
}

#g2 {
    animation-delay: -9s;
    -webkit-animation-delay: -9s;
}

#g3 {
    animation-delay: -6s;
    -webkit-animation-delay: -6s;
}

#g4 {
    animation-delay: -3s;
    -webkit-animation-delay: -3s;
}

@-webkit-keyframes fadeslideUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-40%);
    }
    10% {
      opacity: 1;
      -webkit-transform: translateY(-50%);
    }
    20% {
      opacity: 1;
      -webkit-transform: translateY(-50%);
    }
    25% {
      opacity: 0;
      -webkit-transform: translateY(-60%);
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-60%);
    }
}

@-moz-keyframes fadeslideUp {
    0% {
      opacity: 0;
      transform: translateY(-40%);
    }
    10% {
      opacity: 1;
      transform: translateY(-50%);
    }
    20% {
      opacity: 1;
      transform: translateY(-50%);
    }
    25% {
      opacity: 0;
      transform: translateY(-60%);
    }
    100% {
      opacity: 0;
      transform: translateY(-60%);
    }
}

@-o-keyframes fadeslideUp {
    0% {
      opacity: 0;
      transform: translateY(-40%);
    }
    10% {
      opacity: 1;
      transform: translateY(-50%);
    }
    20% {
      opacity: 1;
      transform: translateY(-50%);
    }
    25% {
      opacity: 0;
      transform: translateY(-60%);
    }
    100% {
      opacity: 0;
      transform: translateY(-60%);
    }
}

@keyframes fadeslideUp {
    0% {
      opacity: 0;
      transform: translateY(-40%); 
      -ms-transform: translateY(-40%);
    }
    10% {
      opacity: 1;
      transform: translateY(-50%); 
      -ms-transform: translateY(-50%);
    }
    20% {
      opacity: 1;
      transform: translateY(-50%); 
      -ms-transform: translateY(-50%);
    }
    25% {
      opacity: 0;
      transform: translateY(-60%);
      -ms-transform: translateY(-60%); 
    }
    100% {
      opacity: 0;
      transform: translateY(-60%);
      -ms-transform: translateY(-60%); 
    }
}

section.branding-intro .branding-intro-text p{
  font-family: "zain-font";
  font-size: 25px;
  color: #6e6e6e;
  display: flex;
  align-items: center;
  margin: 0;
}

section.branding-intro .branding-intro-text p img{
  width: 30px;
  margin-right: 10px;
}




section.branding-intro .branding-intro-img{
  width: 40%;
}

section.branding-intro .branding-intro-img img{
  width: 100%;
  animation: moveAndRotate 4s ease-in-out infinite;

}


section.logos-colors{
  padding: 40px 0;
}
section.logos-colors h2.logos-colors-title{
  font-weight: 900;
  color: transparent;
  font-size: 60px;
  background: url(/assets/img/video-edit.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  width: fit-content;
  margin: auto;
  margin-bottom: 25px;
  display: none;
}

section.logos-colors img.logos-colors-mobile{
  width: 100%;
  display: none;
}


section.logos-colors .logos-colors-box{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
}

section.logos-colors .logos-colors-box .logos-data{
  width: 30%;
  padding: 0 25px;
  margin-top: 45px;

}

section.logos-colors .logos-colors-box .colors-data{
  width: 30%;
  /* background-color: green; */
  padding: 0 25px;
  margin-top: 45px;
}

section.logos-colors .logos-colors-box .logos-data h3,
section.logos-colors .logos-colors-box .colors-data h3{
  color: #eb3243;
  font-size: 45px;
  font-weight: 600;
}


section.logos-colors .logos-colors-box .logos-data p,
section.logos-colors .logos-colors-box .colors-data p{
  font-family: "zain-font";
  font-size: 21px;
  color: grey;

}

section.logos-colors .logos-colors-box .logos-data p img,
section.logos-colors .logos-colors-box .colors-data p img{
  width: 20px;
  margin-right: 10px;
}



section.logos-colors .logos-colors-box .logos-data .logos-swiper{
  width: 100%;
}


section.logos-colors .logos-colors-box .colors-data .colors-swiper{
  width: 80%;
  margin: auto;
  margin-top: 35px;
}


section.logos-colors .logos-colors-box .logos-data .logos-swiper img,
section.logos-colors .logos-colors-box .colors-data .colors-swiper img{
  width: 100%;
}



section.logos-colors .logos-colors-box .logos-colors-image{
  width: 40%;
}

section.logos-colors .logos-colors-box .logos-colors-image img{
  width: 100%;
  border-radius: 23px;
}


.color-palette {
  display: flex;
  background: #f6f6f6;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-bottom: 10px;
  width: 100%;
  justify-content: space-around;
}

.color-block {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 5px;
}

.color-codes {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  width: 100%;
}

.color-codes p {
  font-family: monospace;
  font-size: 14px;
  margin: 0;
}


/* Branding works sample */

.branding-title{
  position: relative;
}
.branding-title h2{
  font-weight: 900;
  color: transparent;
  font-size: 60px;
  background: url(/assets/img/space-tree.jpg) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  width: fit-content;
  margin: auto;
  margin-bottom: 25px;
}

.branding-title img{
  width: 30px;
  position: absolute;
  right: 19.5%;
  top: -127%;
  width: 10%;
  transform: rotate(-66deg);
  z-index: -1;
  animation: moveAndRotatev2 4s ease-in-out infinite;
}

@keyframes moveAndRotatev2 {
  0% {
    transform: translateY(0) rotate(-66deg); /* Start position with rotation */
  }
  25% {
    transform: translateY(-10px) rotate(-66deg); /* Move up with same rotation */
  }
  50% {
    transform: translateY(0) rotate(-66deg); /* Return to original position with rotation */
  }
  75% {
    transform: translateY(-10px) rotate(-66deg); /* Move up with same rotation */
  }
  100% {
    transform: translateY(0) rotate(-66deg); /* Back to original position with rotation */
  }
}

.branding-tabs-mobile {
  display: none;
}

.active-brand-tab {
  padding: 0 11px;
  border-radius: 23px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


section.branding-works {
  width: 100%;
  height: 600px;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
  padding: 0;
  margin-bottom: 80px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

section.branding-works .tabs {
  position: absolute;
  left: 18%;
  transform: translateX(-50%);
  display: flex;
  gap: 5%;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}


section.branding-works .tab {
  cursor: pointer;
  border-radius: 5px;
  font-family: "zain-font";
  font-size: 50px;
  transition: background 0.3s, transform 0.3s; /* Added transition for transform */
  position: relative; /* Needed for positioning the arrow inside the tab */
}

section.branding-works .tab .arrow {
  display: inline-block;
  opacity: 0; /* Initially, the arrow is hidden */
  transition: opacity 0.3s ease-in-out; /* Smooth fade-in */
  margin-left: 10px; /* Space between the text and arrow */
}

section.branding-works .tab:hover {
  transform: translateX(10px); /* Move 10px to the right on hover */
}

section.branding-works .tab:hover .arrow {
  opacity: 1; /* Fade in the arrow when hovering */
}

section.printing-mockups{
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 85px;
}

section.printing-mockups .printing-mockups-image{
  width: 45%;
  /* background-color: red; */
}

section.printing-mockups .printing-mockups-image img{
  width: 100%;
}

section.printing-mockups .printing-mockups-data{
  width: 45%;

}

section.printing-mockups .printing-mockups-data h5 {
  font-size: 26px;
  position: relative;
  padding-bottom: 5px;
}

section.printing-mockups .printing-mockups-data h5::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15%;
  height: 2px;
  background-color: #eb3243;
  border-radius: 2px; 
}


section.printing-mockups .printing-mockups-data h3{
  font-weight: 900;
  color: transparent;
  font-size: 48px;
  background: url(/assets/img/spacehh.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  margin-right: auto;
  margin-bottom: 25px;
  line-height: 60px;
  width: 80%;
}

section.printing-mockups .printing-mockups-data p{
  font-family: "zain-font";
  font-size: 20px;
  color: #6e6e6e;
  margin-bottom: 35px;
}

section.printing-mockups .printing-mockups-data .Branding-swiper{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 90px;
  padding-bottom: 20px;
}


section.printing-mockups .printing-mockups-data .Branding-swiper .Branding-swiper-box{
  width: 80%;
}


section.printing-mockups .printing-mockups-data .Branding-swiper .Branding-swiper-box img{
  width: 100%;
  border-radius: 23px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

section.printing-mockups .printing-mockups-data .Branding-swiper .swiper-button-next.brand-item-next{
  right: 1%;
  top: 63%;
}

section.branding-page-contact{
  margin-bottom: 65px;
}

section.printing-mockups .printing-mockups-data h3 img{
  display: none;
}

/* gallery */
/* gallery */




main.gallery-main .gallery-title {
  display: flex;
  justify-content: center;
  align-items: center;
}



main.gallery-main .gallery-title h2 {
  text-align: center;
  font-weight: 900;
  color: transparent;
  font-size: 55px;
  background: url(/assets/img/spacehh.webp) repeat;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 65px;
  position: relative;
  margin: 0;
  text-transform: uppercase;
}



main.gallery-main .gallery-title img {
  width: 2.25rem;
  height: auto;
  /* margin-left: 9px; */
  margin: 0 7px;
}

main.gallery-main {
  width: 100%;
  /* padding-top: 2.5rem; */
  margin-bottom: 2.5rem;
  background-color: transparent;
  margin-top: 2rem;
  position: relative;

}

main.gallery-main img.gallery-icon-1{
  width: 6%;
  position: absolute;
  right: 6%;
  top: -2%;
}

main.gallery-main img.gallery-icon-2{
  width: 9%;
  position: absolute;
  left: 4%;
  top: -6.5%;
}

.gallery-main .gallery-body {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 2rem;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  padding-top: 1rem;
}



.gallery-main .gallery-body .gallery-image {
  max-width: 50%;
  min-width: 22%;
  flex-grow: 1;
  height: 200px;
  margin: 1rem 0.6rem;
  cursor: pointer;
  border: 2px solid #eb324359;
  border-radius: 2px;
  position: relative;
}
.gallery-main .gallery-body .gallery-image:hover {
  z-index: 4;
}
.gallery-main .gallery-body .gallery-image:hover img {
  transform: scale(1.35);
  -webkit-transform: scale(1.35);
}
.gallery-main .gallery-body .gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
  border-radius: 2px;
}
.gallery-main .gallery-body .gallery-image .description {
  width: 100%;
  font-size: 18px;
  padding: 2px 0;
  font-weight: bold;
  font-family: sans-serif;
  color: #ffffff;
  margin: 0.75rem 0;
  margin-bottom: 0.5rem;
  position: absolute;
  bottom: -0.5rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(45deg, #67bf9f57, #eb3243);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px
}

.gallery-main .gallery-body .gallery-image .description img{
  width: 20px;
}

.gallery-main .gallery-show {
  width: 100%;
  height: 88%;
  background-color: #0000005e;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 12%;
  left: 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
}
.gallery-main .gallery-show button {
  width: 70px;
  height: 45px;
  border-radius: 20px;
  background-color: var(--tree-color);
  color: #fff;
  font-size: 30px;
  position: absolute;
  cursor: pointer;
  border: none;
  transition: 0.2s;
}
.gallery-main .gallery-show .left-btn {
  left: 10%;
  box-shadow: -2.5px 2px 1px;
}
.gallery-main .gallery-show .right-btn {
  right: 10%;
  box-shadow: 2.5px 2px 1px;
}
.gallery-main .gallery-show .right-btn:hover {
  transform: translateX(8px);
}
.gallery-main .gallery-show .left-btn:hover {
  transform: translateX(-8px);
}
.gallery-main .gallery-show .show-image {
  height: 90%;
  max-width: 90%;
  border: 1px solid var(--font-blue-color);
  border-radius: 2px;
}
.gallery-main .gallery-show .show-image .description {
  display: none;
}
.gallery-main .gallery-show .show-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 2px;
}
.display-none {
  display: none !important;
}


/* end project */
/* //////////////////////// */

@media (min-width: 500px) {
  section.hiring {
    padding: 30px 0;
  }

  section.hiring .our-info,
  section.hiring .hiring-accordion {
    width: calc(100% - 60px);
  }

  section.hiring .hiring-accordion {
    margin-top: 30px;
  }

  .clients-container .c-c img {
    width: calc((100% / 2) - 80px);
  }
  main section.client-data form {
    width: 85%;
  }
}

@media (min-width: 767px) {
  #hero .hero-container {
    max-width: 550px;
  }

  #hero .hero-img img {
    width: 75%;
  }

  section.hiring {
    padding: 40px 0;
  }

  section.hiring .our-info,
  section.hiring .hiring-accordion {
    width: 40%;
  }

  section.hiring .hiring-accordion {
    margin: 0;
    /* margin-left: 25px; */
    width: 50%;
  }

  .clients-container .c-c img {
    width: calc((100% / 3) - 80px);
  }
}

@media (min-width: 1000px) {
  .clients-container .c-c img {
    width: calc((100% / 4) - 80px);
  }
  main section.client-data form {
    width: 80%;
  }
}

@media (min-width: 1100px) {
  #hero {
    height: 100vh;
  }

  #hero.no-full-height {
    height: unset;
  }

  #hero.no-full-height-port {
    height: 70vh;
  }

  #hero .hero-container {
    max-width: unset;
    flex-direction: row;
    align-items: center;
  }

  #hero .hero-img {
    margin: 0;
  }

  #hero .hero-txt,
  #hero .hero-img {
    height: 100%;
  }

  #hero .hero-img img {
    height: 80%;
    width: auto;
  }

  #hero .hero-txt {
    text-align: left;
    align-items: flex-start;
  }

  section.hiring .our-info {
    width: 80%;
  }

  section.hiring .hiring-accordion {
    width: 80%;
  }
}

@media (min-width: 1200px) {
  .clients-container .c-c img {
    width: calc((100% / 5) - 80px);
  }
  main section.client-data form {
    width: 50%;
    margin-bottom: 15px;
  }
}
@media (max-width: 600px) {
  main section.client-data form .drive-files .google-drive a {
    height: 40px;
  }
  main section.client-data form .drive-files .add-drive a {
    height: 40px;
  }
  main section.client-data::before {
    background-image: none;
  }
}

@media (max-width: 1115px) {
  .benefits-description {
    padding: 0;
  }

  .benefits-description-text {
    width: 70%;
    margin: auto;
  }

  section.payment-service .payment-box {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    width: 100%;
    box-shadow: none; /* Optional: remove shadow for cleaner mobile design */
  }

  section.payment-service .payment-left-desc,
  section.payment-service .payment-right-desc,
  section.payment-service .payment-cover {
    position: static; /* Remove absolute positioning */
    width: 100%; /* Make full width in column layout */
    transform: unset; /* Remove transform animations */
    opacity: 1; /* Ensure all elements are fully visible */
  }

  section.payment-service .payment-box > .payment-cover {
    order: 2; /* Place payment-cover after the h2 */
  }

  section.payment-service .payment-box > .payment-left-desc {
    order: 3; /* Place payment-left-desc after payment-cover */
  }

  section.payment-service .payment-box > .payment-right-desc {
    order: 4;
    margin-top: -20px;
  }

  section.payment-service h2 {
    text-align: center;
    margin-bottom: 20px;
    order: 1; /* Ensure the heading comes first */
  }
  section.payment-service .payment-right-desc .payment-points img,
  section.payment-service .payment-left-desc .payment-points img {
    display: none;
  }
  section.payment-service .payment-left-desc .payment-points p {
    margin-left: unset;
    text-align: left;
  }
  section.payment-service .payment-right-desc .payment-points,
  section.payment-service .payment-left-desc .payment-points {
    padding: 0 60px;
  }
  section.payment-service
    .payment-right-desc
    .payment-points
    p
    img.payment-arrow-mobile,
  section.payment-service
    .payment-left-desc
    .payment-points
    p
    img.payment-arrow-mobile {
    display: block;
    width: 25px;
  }
  section.payment-service .payment-right-desc .payment-points p span,
  section.payment-service .payment-left-desc .payment-points p span {
    display: flex;
  }

  section.payment-service .payment-right-desc .payment-points p span img,
  section.payment-service .payment-left-desc .payment-points p span img {
    margin-inline-end: 10px;
    margin-inline-start: unset;
  }

  p br {
    display: none;
  }

  section.payment-service .payment-right-desc .payment-points.down-arrow,
  section.payment-service .payment-left-desc .payment-points.down-arrow {
    margin-top: unset;
  }

  .swiper-slide-active video {
    position: relative;
    z-index: 1;
  }

  .portfolio-content
    .portfolio-web
    .first-intro
    .portfolio-category-intro::before {
    background-position: 25% -7px;
  }

  .portfolio-content
    .portfolio-web
    .intro-web
    .intro-web-box
    .intro-web-desc.left-web
    img.arrow-animation-left,
  .portfolio-content
    .portfolio-web
    .intro-web
    .intro-web-box
    .intro-web-desc.right-web
    img.arrow-animation-right {
    display: none;
  }

  .portfolio-content
    .portfolio-web
    .intro-web
    .intro-web-box
    .intro-web-desc
    h3 {
    font-size: 24px;
  }

  section.our-clients p {
    font-size: 30px;
  }

  section.our-clients p span {
    font-size: 34px;
  }

  section.our-clients p img {
    width: 25px;
  }

  .tree-mission-container .tree-mission {
    gap: 130px;
  }

  .reels-section .single-reel {
    padding-top: 95px;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .page-insights-results
    img.social-abs {
    top: -3%;
  }

  main section.intro-media .left-media-intro .graph__wrapper.left-media,
  main section.intro-media .right-media-intro .graph__wrapper.right-media {
    display: none;
  }

  main section.intro-media .left-media-intro {
    align-self: unset;
    margin-top: unset;
  }

  main section.intro-media .right-media-intro {
    align-self: unset;
    margin-bottom: unset;
  }

  section.media-portfolio .media-category-box .media-category-description,
  section.media-portfolio .media-category-box .media-category-image{
    width: 40%;
  }

  section.podcast .podcast-videos img.astr-podcast {
    right: 0%;
    top: -7.5%;
  }

  section.category-reels .category-reels-videos img.phone-cover{
    height: 22rem;
    bottom: 7%;
  }

  section.category-videos img.category-videos-title-img{
    top: 7%;
    width: 7%;
    z-index: 1;
  }

  section.media-portfolio .media-category-box{
    margin-bottom: unset;
  }
}

@media (max-width: 992px) {
  .portfolio-filter ul {
    gap: 35px;
  }
  .selfbranding-swiper-container,
  .ecommerce-swiper-container,
  .swiper-container {
    height: auto;
  }
  .swiper-slide {
    transform: none; /* Reset transformations for small screens if needed */
  }
  .portfolio-content .portfolio-web h2 {
    margin-bottom: 10px;
  }
  .swiper-button-prev {
    left: 31%;
  }
  .swiper-button-next {
    right: 31%;
  }
  .swiper-button-prev,
  .swiper-button-next {
    top: 97%;
  }

  .portfolio-content
    .portfolio-web
    .first-intro
    .portfolio-category-intro::before {
    background-size: 65%;
  }

  .portfolio-content .portfolio-web .portfolio-category-intro {
    flex-direction: column-reverse;
    padding: 0 25px;
    margin-top: 30px;
  }

  .medical-webites-intro .portfolio-category-intro.medical-intro {
    flex-direction: column;
  }

  .portfolio-content
    .portfolio-web
    .portfolio-category-intro
    .portfolio-intro-cover {
    width: 100%;
    margin-bottom: 50px;
  }
  .portfolio-content
    .portfolio-web
    .medical-webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover {
    display: none;
  }

  .portfolio-content
    .portfolio-web
    .webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover {
    display: none;
  }
  .portfolio-content .portfolio-web .webites-intro .portfolio-category-intro {
    padding: 0;
  }

  .portfolio-content .portfolio-web .portfolio-intro-desc {
    width: 90%;
  }
  .portfolio-content
    .portfolio-web
    .portfolio-intro-desc
    .self-portfolio-mobile,
  .portfolio-content
    .portfolio-web
    .portfolio-intro-desc
    .portfolio-medical-intro,
  .portfolio-content
    .portfolio-web
    .portfolio-intro-desc
    .intro-ecommerce-mobile {
    display: flex !important;
  }

  .portfolio-content
    .portfolio-web
    .webites-intro.self-branding
    .portfolio-category-intro
    .portfolio-intro-cover {
    justify-content: center;
  }

  .portfolio-content
    .portfolio-web
    .medical-webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover.portfolio-medical-intro {
    width: 55%;
    margin: auto;
  }

  .portfolio-content .portfolio-web .portfolio-intro-desc h2 {
    font-size: 18px;
  }
  .portfolio-content .portfolio-web h2 span {
    font-size: 24px;
  }

  .portfolio-content
    .portfolio-web
    .portfolio-category-intro
    .portfolio-intro-cover
    img {
    width: 45%;
  }

  .portfolio-content
    .portfolio-web
    .webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover
    img.outer-image {
    width: 65%;
    left: unset;
    right: 120px;
    bottom: -10px;
  }

  .portfolio-content
    .portfolio-web
    .portfolio-category-intro
    .self-portfolio-mobile
    img {
    width: 60%;
  }
  .portfolio-content .portfolio-web .self-branding .portfolio-category-intro {
    flex-direction: column;
  }

  .portfolio-content
    .portfolio-web
    .self-branding
    .portfolio-category-intro
    .portfolio-intro-cover
    img.outer-image {
    width: 75%;
    left: 85px;
    right: unset;
  }

  .portfolio-content
    .portfolio-web
    .webites-intro.self-branding
    .portfolio-category-intro {
    padding: 0;
  }
  .portfolio-content .portfolio-web .self-branding .portfolio-intro-desc {
    width: 90%;
  }

  .portfolio-content
    .portfolio-web
    .first-intro
    .dashboard-service
    .dashboard-image {
    width: 100%;
  }

  .portfolio-content
    .portfolio-web
    .first-intro
    .dashboard-service
    .dashboard-desc {
    width: 100%;
    padding: 0 40px;
  }

  .portfolio-content .portfolio-web .first-intro .dashboard-service {
    flex-direction: column-reverse;
  }

  .chart-graphs .canvasjs-chart-canvas {
    width: 90%;
    margin-left: 3%;
  }

  .portfolio-content .portfolio-web .update-web-container {
    flex-direction: column;
  }

  .portfolio-content .portfolio-web .update-web-container .update-web-desc {
    width: 90%;
  }

  .portfolio-content .portfolio-web .update-web-container .update-web-cover {
    display: none;
  }

  .portfolio-content
    .portfolio-web
    .update-web-container
    .update-web-cover.update-mobile {
    display: block;
    width: 55%;
    margin: auto;
    margin-bottom: 15px;
  }

  .portfolio-content
    .portfolio-web
    .update-web-container
    .update-web-cover.update-mobile
    img {
    height: auto;
    object-fit: unset;
  }

  section.shipping {
    flex-direction: column;
    position: relative;
  }

  section.shipping .shipping-desc {
    width: 100%;
    padding: 0 20px;
  }

  section.shipping .shipping-cover.shipping-car {
    display: none;
  }
  section.shipping .shipping-cover {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 33%;
  }

  section.payment-service {
    padding-bottom: 30px;
  }

  section.responsive-web {
    flex-direction: column;
    gap: 0;
  }

  section.responsive-web .responsive-web-cover {
    /* display: none; */
    width: 90%;
  }

  section.responsive-web .responsive-web-desc h2,
  section.responsive-web .responsive-web-desc h4 {
    display: none;
  }

  section.responsive-web .responsive-web-cover h2,
  section.responsive-web .responsive-web-cover h4 {
    display: block;
    padding: 0 25px;
  }

  section.responsive-web .responsive-web-cover h4 {
    font-size: 28px;
    display: flex;
    align-items: center;
    margin-bottom: -75px;
    font-family: "zain-font";
    z-index: 0;
    position: relative;
  }
  section.responsive-web .responsive-web-cover h4 img {
    width: 50px;
    margin-inline-end: 10px;
  }

  section.responsive-web .responsive-web-cover h2 {
    font-size: 37px;
    font-family: "zain-font";
    margin-bottom: 10px;
  }

  section.responsive-web .responsive-web-cover h2 span {
    font-size: 42px;
  }

  section.responsive-web .responsive-web-desc {
    width: 90%;
    padding: 0 25px;
  }

  section.responsive-web
    .responsive-web-desc
    .responsive-web-cover.responsive-mobile {
    display: block;
    width: 100%;
  }

  section.chat-bot .chat-box {
    flex-direction: column;
  }

  section.chat-bot .chat-box .chat-cover {
    width: 100%;
    padding: 0 35px;
  }

  section.chat-bot .chat-box .chat-right-desc,
  section.chat-bot .chat-box .chat-left-desc {
    display: none;
  }

  section.chat-bot .chat-box .chat-cover .chat-mobile {
    display: flex;
    justify-content: center;
  }
  section.chat-bot .chat-box .chat-cover .chat-mobile img {
    width: 30%;
  }
  section.show-services .service-box {
    width: 75%;
  }
  .services-swiper .swiper-button-next {
    right: 35%;
  }

  .services-swiper .swiper-button-prev {
    left: 35%;
  }

  .services-swiper .swiper-button-prev,
  .services-swiper .swiper-button-next {
    top: 114%;
  }

  .swiper-button-prev {
    left: 30%;
  }
  .swiper-button-next {
    right: 30%;
  }
  .swiper-button-prev,
  .swiper-button-next {
    top: 99%;
  }

  section.our-clients {
    flex-direction: column-reverse;
  }

  section.our-clients .our-clients-cover {
    width: 75%;
  }

  section.our-clients .our-clients-desc {
    width: 100%;
    padding: 0 15px;
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  section.our-clients p {
    text-align: center;
    font-size: 25px;
  }

  section.our-clients p span {
    font-size: 30px;
  }

  section.our-clients .client-logo-box .clients-swiper {
    left: 0;
  }

  section.clients-show .clients-show-header {
    flex-direction: column;
  }

  section.clients-show .clients-show-header .clients-show-title {
    width: 70%;
  }

  section.clients-show .clients-show-header .clients-show-tabs {
    width: 100%;
  }

  section.clients-show .work-gallery {
    column-gap: 75px;
    row-gap: 35px;
  }

  .tree-mission-container .tree-mission {
    flex-direction: column;
  }

  .tree-mission-container .tree-mission .mission-desc {
    width: 90%;
  }

  .tree-mission-container .tree-mission .mission-cover {
    display: none;
  }

  .tree-mission-container .tree-mission .mission-desc .mission-cover-mobile {
    display: block;
    width: 40%;
    margin: auto;
    margin-bottom: 40px;
    position: relative;
  }

  .tree-mission-container
    .tree-mission
    .mission-desc
    .mission-cover-mobile
    img {
    width: 100%;
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
  }

  .tree-mission-container .tree-mission .mission-desc h2 {
    text-align: center;
  }
  .tree-mission-container .tree-mission .mission-desc h4 {
    justify-content: center;
  }

  .tree-mission-container .tree-mission .mission-desc h6 {
    font-size: 20px;
  }

  .reels-section {
    height: auto;
    /* flex-direction: column; */
  }

  /* .reels-section .all-reels{
    width: 100%;
  } */

  .reels-section .single-reel {
    width: 35%;
  }

  .reels-section .single-reel img.phone-cover {
    width: 95%;
  }

  .single-reel .video-swiper {
    left: 19%;
    width: 55%;
    height: 64%;
  }

  .play-pause-btn {
    top: 30%;
    left: 48%;
  }

  .mute-unmute-btn {
    top: 3%;
    right: 30%;
  }

  section.clients-intro .clients-intro-logo .client-logo {
    padding: 0;
  }

  .clients-results .clients-results-cover {
    flex-direction: column-reverse;
  }

  .clients-results .clients-results-cover .clients-results-title {
    width: 100%;
    padding: 0 20px;
  }

  .clients-results .clients-results-cover .clients-results-title p,
  .clients-results .clients-results-cover .clients-results-title a.reserve-btn {
    display: none;
  }

  .clients-results .clients-results-cover .clients-results-data {
    width: 100%;
    margin-inline-end: unset;
  }

.clients-results .clients-results-cover .clients-results-data .results-mobile {
    display: block;
    width: 90%;
    margin: auto;
  }

  .clients-results .clients-results-cover .clients-results-data .results-mobile p{
    margin-bottom: 35px;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .results-mobile
    a.reserve-btn {
    background: #eb3243;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    display: inline-block;
    margin-right: 45px;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .results-mobile
    a.reserve-btn
    img {
    width: 20px;
    margin-inline-start: 5px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
  }

  .clients-results-swiper {
    margin-bottom: 30px;
  }

  .media-popup-content {
    width: 70%;
  }

  .clients-results .clients-results-cover .clients-results-data .page-insights-results img.social-abs {
    top: -4%;
    width: 17%;
  }

  section.media-portfolio .media-category-box .media-category-description{
    /* background: green; */
    width: 55%;
  }

  section.media-portfolio .media-category-box .media-category-data p{
    width: 85%;
  }

  section.media-portfolio .media-category-box .media-category-data .discover-box img.astronut-sitting{
    top: 15%;
    right: 16%;
  }

  section.category-reels .category-reels-videos img.phone-cover {
    height: 87%;
    width: 24%;
    left: 38%;
    bottom: 7%;
  }

  section.category-videos img.category-videos-title-img{
    top: 11%;
  }

  section.category-contact{
    flex-direction: column;
    align-items: end;
  }

  section.category-contact .category-contact-text{
    width: 100%;
    padding: 0 45px;
    margin-bottom: -7%;
  }

  section.branding-intro{
    flex-direction: column;
    align-items: center;
  }

  section.branding-intro .branding-intro-text {
    width: 100%;
    padding: 0 40px;
    margin-bottom: 45px;
  }

  section.branding-intro .branding-intro-img {
    width: 75%;
  }

  section.logos-colors .logos-colors-box .logos-colors-image{
    display: none;
  }
  
  section.logos-colors h2.logos-colors-title{
    display: block;
  }

  section.logos-colors img.logos-colors-mobile{
    display: block;
    width: 55%;
    margin: auto;
    border-radius: 23px;
  }

  section.logos-colors .logos-colors-box .colors-data,
  section.logos-colors .logos-colors-box .logos-data{
    width: 45%;
    padding: 0;
  }

  section.logos-colors .logos-colors-box .logos-data h3,
  section.logos-colors .logos-colors-box .colors-data h3{
    font-size: 30px;
  }

  section.logos-colors .logos-colors-box .logos-data p,
  section.logos-colors .logos-colors-box .colors-data p {
    font-size: 18px;
  }

  section.logos-colors .logos-colors-box{
    gap: unset;
    justify-content: space-around;
  }

  section.printing-mockups{
    flex-direction: column-reverse;
  }

  section.printing-mockups .printing-mockups-data{
    width: 100%;
    padding: 0 35px;
  }

  section.printing-mockups .printing-mockups-data h3{
    font-size: 55px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  section.printing-mockups .printing-mockups-data h3 img{
    display: block;
    width: 35%;
  }

  .branding-title img,
  section.printing-mockups .printing-mockups-image img{
    display: none;
  }

  section.branding-page-contact{
    align-items: center;
  }
  section.branding-page-contact .category-contact-text{
    margin-bottom: 25px;
  }

  .gallery-main .gallery-body .gallery-image {
    max-width: none;
    min-width: none;
  }

  main.gallery-main img.gallery-icon-1,
  main.gallery-main img.gallery-icon-2{
    display: none;
  }

  section.category-videos{
    margin-bottom: 20px;
  }

}

@media (max-width: 800px) {
  main section.client-data form .question-box.multi-choice .answer-choices {
    flex-direction: column;
    padding-inline-start: 1rem;
  }
  main section.client-data form .question-box.multi-choice .checkbox-container {
    width: 100%;
  }
  main
    section.client-data
    form
    .question-box.multi-choice
    .checkbox-container
    input.choice-percent {
    width: 25%;
  }
  main
    section.client-data
    form
    .question-box.multi-choice
    .checkbox-container
    label.choice-text {
    width: 27%;
  }
  main
    section.client-data
    form
    .question-box.multi-choice
    .answer-choices::before {
    display: none;
  }
  main
    section.client-data
    form
    .question-box.multi-choice
    .checkbox-container
    input.choice-check {
    width: 20px;
    height: 20px;
  }
  .portfolio-filter ul {
    gap: unset;
    column-gap: 25px;
    flex-wrap: wrap;
  }
  .swiper-slide-active video {
    transform: scale(1);
    height: auto;
    width: 80%;
    object-fit: contain;
    margin-bottom: 15px;
    border: 1px solid #eb3243d6;
  }
  .swiper-slide-active img.website-logo {
    margin-bottom: 10px;
  }
  .portfolio-content .portfolio-web h2 {
    margin-bottom: 25px;
  }
  .slide-content .video-link {
    margin-top: unset;
  }
  .swiper-button-prev {
    left: 30%;
  }
  .swiper-button-next {
    right: 30%;
  }
  .swiper-button-prev,
  .swiper-button-next {
    top: 100%;
  }

  section.show-services .services-swiper {
    height: 22rem;
  }

  section.show-services .service-box .service-card {
    width: 250px;
    height: 250px;
  }

  section.show-services .service-box .service-desc {
    text-align: left;
    padding: 0 20px;
  }

  section.show-services .service-box .service-desc h5 {
    font-size: 17px;
  }
  section.show-services .service-box .service-desc h3 {
    font-size: 22px;
  }

  .portfolio-content .portfolio-web .intro-web .intro-web-box {
    flex-direction: column;
  }

  .portfolio-content .portfolio-web .intro-web .intro-web-box .intro-web-cover {
    order: -1;
    width: 50%;
    margin: auto;
  }

  .portfolio-content
    .portfolio-web
    .intro-web
    .intro-web-box
    .intro-web-desc.left-web {
    width: 100%;
    padding: 0 20px;
    padding-top: 30px;
  }
  .portfolio-content
    .portfolio-web
    .intro-web
    .intro-web-box
    .intro-web-desc.right-web {
    width: 100%;
    padding: 0 20px;
  }

  section.other-webs .other-webs-box {
    flex-wrap: wrap;
    gap: 25px;
  }

  section.other-webs .other-webs-box a.other-webs-box-item {
    width: 65%;
  }

  #hero .middle-text h1 {
    margin-bottom: 15px;
    font-size: 45px;
  }

  #hero .middle-text p {
    font-size: 17px;
  }

  section.clients-show .work-gallery .work-gallery-item {
    width: 40%;
  }

  section.clients-show .clients-show-header .clients-show-title {
    width: 80%;
    padding: 0;
  }

  .portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc {
    width: 70%;
  }

  .portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc h3 {
    font-size: 60px;
  }

  .wrap-left {
    top: -15px;
    left: -45px;
  }

  main section.intro-media {
    flex-direction: column;
  }

  main section.intro-media .center-media-intro {
    order: 0;
    width: 60%;
    margin-bottom: 35px;
  }

  main section.intro-media .left-media-intro {
    order: 1;
    width: 100%;
  }

  main section.intro-media .right-media-intro {
    order: 2;
    width: 100%;
  }

  main section.intro-media .left-media-intro p,
  main section.intro-media .right-media-intro p {
    width: 90%;
  }

  section.media-portfolio .media-category-box{
    flex-direction: column;
  }

  section.media-portfolio .media-category-box .media-category-image h3{
    display: block;
    align-self: flex-start;
  }

  section.media-portfolio .media-category-box .media-category-data h3{
    display: none;
  }

  section.media-portfolio .media-category-box .media-category-image h3{
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 50px;
    color: #eb3243;
    width: max-content;
  }


  section.media-portfolio .media-category-box.odd-row-media{
    flex-direction: column-reverse;
  }

  section.media-portfolio .media-category-box .media-category-description{
    width: 100%;
    padding: 0 30px;
    margin-bottom: 25px;
  }

  section.media-portfolio .media-category-box .media-category-data p {
    width: 100%;
  }

  section.media-portfolio .media-category-box .media-category-image{
    width: 100%;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  section.media-portfolio .media-category-box .media-category-image img {
    width: 50%;
  }

  section.media-portfolio .media-category-box .media-category-data .discover-box svg{
    width: 12vw;
    height: 12vw;
  }

  section.category-reels .category-reels-videos img.phone-cover{
    height: 80%;
    bottom: 12%;
  }

  #main.branding-page {
    margin-top: 15%;
  }

  section.branding-intro .branding-intro-text h2{
    font-size: 60px;
  }

  section.branding-intro .branding-intro-text h2 span{
    font-size: 65px;
  }

  section.branding-intro .branding-intro-text h3{
    font-size: 40px;
  }
  
  .branding-intro-text .rotating-words .gif h2 {
    font-size: 50px;
  }

  section.branding-works .tabs{
    transform: unset;
    left: 3%;
  }

  .gallery-main .gallery-body .gallery-image{
    max-width: unset;
    width: 100%;
  }

}

@media (max-width: 745px) {
  .gallery-main .gallery-body {
      padding: 2rem 0.75rem;
  }
  .gallery-main .gallery-body .gallery-image:hover img {
      transform: none;
      -webkit-transform: none;
  }
}

@media (max-width: 700px) {
  main
    section.client-data
    form
    .question-box.multi-choice
    .checkbox-container
    input.choice-percent {
    width: 35%;
  }
  main
    section.client-data
    form
    .question-box.multi-choice
    .checkbox-container
    label.choice-text {
    width: 40%;
    font-size: 15px;
  }
  main section.client-data form .question-box.multi-choice .answer-choices {
    padding: 0;
  }
  main section.client-data form .yesorno.choose-size {
    flex-direction: column;
  }
  main section.client-data form .yesorno.choose-size .choice-edit {
    width: 100%;
  }
  .swiper-button-prev {
    left: 25%;
  }
  .swiper-button-next {
    right: 25%;
  }

  section.chat-bot {
    margin-bottom: 30px;
  }

  section.show-services .services-swiper {
    height: auto;
  }

  section.show-services .service-box {
    flex-direction: column;
    padding: 25px 0;
  }

  section.show-services .service-box .service-card {
    width: 90%;
    position: unset;
    margin: auto;
    margin-bottom: 30px;
  }

  section.show-services .service-box .service-desc {
    width: 100%;
  }

  section.show-services .service-box .service-desc h3 {
    margin-bottom: 10px;
  }

  .services-swiper .swiper-button-prev,
  .services-swiper .swiper-button-next {
    display: none;
  }

  section.show-services .service-box {
    width: 90%;
  }
  section.show-services .show-services-title h2 {
    font-size: 23px;
    margin-bottom: 15px;
  }

  section.show-services .show-services-title h2 span {
    font-size: 31px !important;
  }

  section.show-services .show-services-title p {
    font-size: 17px;
    width: 90%;
    margin: auto;
    margin-bottom: 15px;
  }

  section.show-services .service-box .service-desc h5 {
    font-size: 22px;
  }

  section.show-services .service-box .service-desc h3 {
    font-size: 25px;
  }

  .circle-social {
    width: 310px;
    height: 290px;
  }

  .tree-mission-container .tree-mission .mission-desc h2 {
    font-size: 60px;
  }

  .reels-section .all-reels .all-reels-title h2 {
    font-size: 50px;
  }

  .reels-section .all-reels .all-reels-title p {
    margin-inline-start: 10px;
    font-size: 19px;
  }

  section.category-videos img.category-videos-title-img{
    top: unset;
    bottom: 0%;
    right: 13%;
    width: 10%;
  }

  section.logos-colors h2.logos-colors-title {
    display: block;
    font-size: 45px;
    width: 80%;
  }
}

@media (max-width: 600px) {
  .swiper-button-prev {
    left: 20%;
  }
  .swiper-button-next {
    right: 20%;
  }

  .portfolio-content .portfolio-web .portfolio-intro-desc h2 {
    font-size: 19px;
  }

  .portfolio-content .portfolio-web .update-web-container h2,
  .portfolio-content
    .portfolio-web
    .first-intro
    .dashboard-service
    .dashboard-desc
    h2 {
    text-align: center;
  }

  .portfolio-content
    .portfolio-web
    .update-web-container
    .update-web-cover.update-mobile {
    width: 90%;
  }

  .benefits-description-text {
    width: 100%;
    height: 100%;
  }

  .reels-section {
    position: relative;
    height: 40rem;
  }

  .reels-section .all-reels {
    width: 100%;
  }

  .reels-section .single-reel {
    position: absolute;
    right: 22%;
    top: 10%;
    width: 55%;
  }

  .reels-section .all-reels .all-reels-title h2 {
    font-size: 45px;
    margin: auto;
  }

  .client-reels {
    display: none;
  }

  .reels-section .all-reels .all-reels-title p {
    margin: auto;
    width: 90%;
    text-align: center;
  }

  .swiper-button-next.next-prev-reel,
  .swiper-button-prev.next-prev-reel {
    display: flex;
    top: 40%;
  }
  .swiper-button-next.next-prev-reel {
    right: 3%;
  }
  .swiper-button-prev.next-prev-reel {
    left: -4%;
  }

  .share-mobile {
    display: flex;
    margin-bottom: 15px;
  }

  .share-mobile .share-container .share-btn {
    opacity: 0;
    display: none;
  }

  .share-mobile .share-container .social-icons {
    opacity: 1;
    position: unset;
  }

  .share-container.share-web {
    display: none;
  }

  section.clients-intro .clients-intro-title .client-logo {
    margin: 0;
    margin-inline-end: 25px;
    display: flex;
    justify-content: center;
  }

  .share-container {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .social-icons {
    right: -17%;
  }

  .single-reel .rocket-man {
    left: -16%;
    bottom: 75%;
  }

  section.clients-intro .client-hero img {
    height: auto;
  }

  section.clients-intro .clients-intro-logo {
    width: 30%;
  }

  .client-swiper .swiper-slide-active {
    width: 390px !important;
  }

  .clients-results
    .clients-results-cover
    .clients-results-title
    .business-statistics {
    margin: auto;
    display: flex;
    flex-direction: column;
    /* background: red; */
    width: 100%;
    align-items: center;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .page-insights-results
    img.graph-abs,
  .clients-results
    .clients-results-cover
    .clients-results-data
    .page-insights-results
    img.social-abs {
    display: none;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .page-insights-results
    .page-insights-imgs {
    margin-bottom: 30px;
  }

  .clients-results
    .clients-results-cover
    .clients-results-title
    .business-statistics
    h2 {
    font-size: 45px;
  }

  .clients-results
    .clients-results-cover
    .clients-results-title
    .business-statistics
    h4 {
    font-size: 40px;
    margin-top: -5px;
    margin-left: 40px;
  }

  .swiper-pagination.pagination-results {
    bottom: 11%;
  }

  .swiper-button-prev.prev-results {
    left: 33%;
    bottom: -5%;
  }

  .swiper-button-next.next-results {
    right: 33%;
    bottom: -5%;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .media-buying
    h2,
  .clients-results
    .clients-results-cover
    .clients-results-data
    .page-insights-results
    h2 {
    font-size: 22px;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .media-buying
    img.social-icons-abs {
    right: 2%;
    bottom: 25%;
    width: 40px;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .media-buying
    img.media-buying-abs {
    top: -4%;
  }

  main .media-intro-title h2{
    font-size: 45px;
  }

  section.media-portfolio .media-portfolio-intro h2{
    font-size: 45px;
  }

  section.podcast .podcast-title h2{
    font-size: 40px;
  }

  section.podcast .podcast-videos img.astr-podcast {
    right: 3%;
    top: -4.5%;
    width: 16%;
  }

  section.category-reels .category-reels-videos{
    padding-bottom: 20px;
  }

  section.category-reels .category-reels-videos img.phone-cover {
    height: 94%;
    bottom: 1%;
    width: 70%;
    left: 15%;
    display: none;
  }

  .video-wrapper img{
    border: 2px solid var(--tree-color);
    border-radius: 23px;
  }

  section.category-reels .category-reels-title h2{
    font-size: 40px;
    line-height: 40px;
  }

  section.category-reels .category-reels-videos img.play-catgeory-reel,
  section.category-reels .category-reels-videos img.pause-catgeory-reel {
    width: 10%;
    left: 45%;
    bottom: 45%;
  }

  section.category-videos .category-videos-title h2{
    font-size: 40px;
    line-height: 40px;
  }

  section.category-videos .category-videos-box{
    width: 90%;
  }

  section.category-videos img.category-videos-title-img {
        right: 0%;
        width: 15%;
    }

    section.category-contact .category-contact-text{
      margin-bottom: unset;
    }

    section.logos-colors .logos-colors-box{
      flex-direction: column;
      align-items: center;
    }

    section.logos-colors .logos-colors-box .colors-data,
    section.logos-colors .logos-colors-box .logos-data {
      width: 90%;
  }

  section.logos-colors .logos-colors-box .logos-data .logos-swiper img,
  section.logos-colors .logos-colors-box .colors-data .colors-swiper img{
    width: 80%;
  }
  
  section.branding-works{
    background-position: 73%;
  }

  section.branding-works .tabs{
    gap: 2%;
  }

  section.branding-works .tab{
    font-size: 40px;
    color:  #000000;
  }

  section.printing-mockups .printing-mockups-data h3{
    font-size: 40px;
    line-height: 40px;
  }

  section.printing-mockups{
    margin-bottom: 60px;
  }

  .branding-tabs-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        margin-bottom: 20px;
        font-family: "zain-font";
        justify-content: center;
        font-size: 17px;
        
  }

  .branding-tabs-mobile .tab{
    font-size: 23px;
    color: #000000;
    cursor: pointer;
  }

  .branding-tabs-web {
    display: none !important;
  }

  .tabs.branding-tabs-mobile span.arrow{
    display: none;
  }

  section.clients-intro .clients-intro-title .client-brand-name img{
    display: none;
  }

  section.clients-intro .client-swiper img.float-1,
  section.clients-intro .client-swiper img.float-2{
    display: none;
  }

  section.clients-intro .client-swiper h2{
    font-size: 35px;
  }

  section.clients-intro .client-swiper h2 .logo-container{
    width: 50px;
    height: 50px;
  }

  .swiper-button-next.next-results,
  .swiper-button-prev.prev-results {
    display: none;
  }

  .popup-layer .nav-btn{
    top: 69%;
    width: 40px;
    height: 40px;
  }

  .popup-layer .next-btn {
    right: 25%;
  }

  .popup-layer .prev-btn {
    left: 25%;
  }

  .popup-layer .nav-btn i {
    font-size: 19px;
    margin-top: -3px;
  }

  .popup-layer .close-btn{
    top: 26%;
  }

  .media-buying-cover{
    height: 100% !important;
    border-radius: 12px;
    object-position: left;
  }

  .media-buying-layer{
    border-radius: 12px;
  }

  .media-buying-img-wrap {
    height: 150px;
  }
  
  .media-popup-content{
    width: 90%;
    height: 55%;
    display: flex;
    justify-content: center;

  }
  
  .media-popup-content img{
    border-radius: unset;
  }



}

@media (max-width: 500px) {
  .swiper-button-prev {
    left: 10%;
  }
  .swiper-button-next {
    right: 10%;
  }
  .portfolio-content .portfolio-web h2 {
    font-size: 22px;
  }
  .portfolio-content .portfolio-web h2 span {
    font-size: 36px !important;
  }

  .portfolio-content
    .portfolio-web
    .portfolio-category-intro
    .portfolio-intro-cover
    img {
    width: 65%;
  }

  .portfolio-content
    .portfolio-web
    .webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover
    img.outer-image {
    width: 75%;
    right: 50px;
  }
  .portfolio-content
    .portfolio-web
    .self-branding
    .portfolio-category-intro
    .portfolio-intro-cover
    img.outer-image {
    width: 100%;
    left: 0px;
    right: unset;
  }
  .portfolio-content
    .portfolio-web
    .webites-intro.self-branding
    .portfolio-category-intro {
    margin-bottom: 40px;
  }

  .portfolio-content .portfolio-web .portfolio-intro-desc h2 {
    font-size: 20px;
    padding: 0 10px;
  }

  .portfolio-content .portfolio-web h2 span {
    font-size: 29px !important;
  }

  .portfolio-content .portfolio-web .portfolio-intro-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .portfolio-content
    .portfolio-web
    .medical-webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover
    .circle-intro {
    width: 350px;
    height: 350px;
  }

  .portfolio-content
    .portfolio-web
    .medical-webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover
    .circle-intro
    img {
    width: 110%;
    top: 60px;
    left: -27px;
  }
  .break-tree img {
    background: unset;
  }

  .chart-graphs .canvasjs-chart-canvas {
    width: 97%;
    margin-left: unset;
  }
  .portfolio-content
    .portfolio-web
    .first-intro
    .dashboard-service
    .dashboard-desc
    h2 {
    font-size: 31px;
  }
  .portfolio-content
    .portfolio-web
    .first-intro
    .dashboard-service
    .dashboard-desc
    h2
    span {
    font-size: 27px;
  }

  .portfolio-content
    .portfolio-web
    .first-intro
    .dashboard-service
    .dashboard-desc
    h4 {
    font-size: 21px;
  }

  .portfolio-content .portfolio-web .update-web-container h2 {
    font-size: 25px;
  }

  .portfolio-content .portfolio-web .update-web-container h2 {
    font-size: 18px;
  }

  .portfolio-content .portfolio-web .update-web-container h2 span {
    font-size: 29px !important;
  }

  .portfolio-content .portfolio-web .update-web-container p {
    padding: 0 10px;
  }

  section.payment-service .payment-right-desc .payment-points,
  section.payment-service .payment-left-desc .payment-points {
    padding: 0 25px;
  }
  .cardWrapper {
    height: 255px;
  }
  section.payment-service h2 {
    margin: 0;
    margin-bottom: 0 !important;
    font-size: 22px !important;
  }

  section.shipping .shipping-desc h2 {
    font-size: 22px;
  }
  section.shipping .shipping-desc h2 span {
    font-size: 30px !important;
  }

  section.shipping .shipping-cover {
    width: 50%;
  }

  section.responsive-web .responsive-web-cover h2 {
    font-size: 22px;
    text-align: center;
  }

  section.chat-bot .chat-box .chat-cover .chat-mobile img {
    width: 65%;
  }

  /* section.chat-bot .chat-box .chat-cover p{
    font-size: 15px;
  } */

  section.chat-bot .chat-box .chat-cover p span {
    font-size: 23px;
  }

  section.chat-bot .chat-box .chat-cover h2 {
    font-size: 23px;
    flex-wrap: wrap;
    width: 100%;
  }

  section.chat-bot .chat-box .chat-cover h2 img {
    font-size: 30px;
  }

  section.responsive-web .responsive-web-cover video {
    position: relative;
    z-index: -1;
  }
  section.responsive-web .responsive-web-cover h4 {
    font-size: 23px;
  }

  section.responsive-web .responsive-web-cover h4 img {
    width: 40px;
  }

  section.responsive-web .responsive-web-cover h4 {
    margin-bottom: -20px;
  }

  .portfolio-content .portfolio-web .portfolio-intro-desc h1 {
    font-size: 19px;
  }

  .portfolio-content .portfolio-web .portfolio-intro-desc h1 span {
    font-size: 25px;
  }

  .portfolio-content .portfolio-web .portfolio-intro-desc h1 img {
    width: 25px;
  }

  .portfolio-content .portfolio-web .first-intro .portfolio-category-intro {
    margin-bottom: 50px;
  }

  .benefits-description-text h4 {
    width: 90%;
  }

  .benefits-description-text h2 {
    font-size: 25px !important;
  }

  #tumor-box .benefits-description-text h2 span {
    font-size: 30px !important;
  }

  .benefits-description-text p {
    margin-bottom: 10px;
  }

  .benefits-description-text .reserve-btn a {
    padding: 7px 25px;
  }

  .medical-swiper-container h2 {
    font-size: 21px !important;
  }
  .medical-swiper-container h2 span.tree-word {
    font-size: 30px !important;
  }

  .portfolio-content .portfolio-web .portfolio-category-intro {
    margin-top: 0;
  }

  .portfolio-content .portfolio-web .update-web-container h4 {
    width: 100%;
  }

  section.chat-bot {
    padding-top: 35px;
  }

  section.shipping .shipping-desc h2 {
    flex-wrap: wrap;
  }

  section.shipping .shipping-desc h2 img {
    font-size: 27px;
  }

  section.shipping .shipping-desc h6 {
    font-size: 20px;
  }

  section.shipping .shipping-desc p {
    font-size: 18px;
  }

  section.shipping {
    margin-bottom: 40px;
  }

  .ecommerce-swiper-container .videos-title h2 {
    font-size: 28px;
  }

  section.chat-bot .chat-box .chat-cover .chat-mobile {
    margin-bottom: 25px;
  }

  .portfolio-content .portfolio-web .intro-web .intro-web-box .intro-web-cover {
    width: 70%;
  }

  .portfolio-content
    .portfolio-web
    .intro-web
    .intro-web-box
    .intro-web-desc
    h3 {
    font-size: 22px;
  }

  section.other-webs .other-webs-box a.other-webs-box-item {
    width: 85%;
  }

  #hero .middle-text h1 {
    font-size: 35px;
  }

  #hero .middle-text h1 span {
    font-size: 40px;
  }

  section.our-clients p {
    font-size: 20px;
  }

  section.our-clients p span {
    font-size: 24px;
  }

  section.our-clients p img {
    width: 20px;
  }

  section.our-clients .client-logo-box h5 {
    font-size: 17px;
    text-align: center;
  }

  section.our-clients .client-logo-box h5 span {
    font-size: 22px;
  }
  section.our-clients .our-clients-desc {
    padding: 0;
    padding-bottom: 70px;
  }

  section.our-clients a {
    padding: 7px 18px;
  }

  section.our-clients .our-clients-cover {
    width: 100%;
  }

  section.clients-show .work-gallery .work-gallery-item {
    width: 75%;
  }

  section.clients-show .clients-show-header .clients-show-title h2 {
    font-size: 50px;
    line-height: 45px;
  }

  section.clients-show .clients-show-header .clients-show-title h2 img {
    right: 0;
    bottom: 8px;
    transform: rotate(-45deg);
  }

  section.clients-show .clients-show-header .clients-show-tabs p {
    font-size: 15px;
    padding: 5px 12px;
  }

  section.clients-show .clients-show-header .clients-show-tabs {
    margin-bottom: 20px;
  }

  .tree-vision-container h2 {
    font-size: 30px;
  }

  .tree-vision-container h2 span {
    font-size: 40px;
  }

  /* .portfolio-content .portfolio-socia-media .tree-vision .vision-right-desc h3, */
  .portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc h3 {
    font-size: 40px;
    line-height: unset;
  }

  /* .portfolio-content .portfolio-socia-media .tree-vision .vision-right-desc h3 img, */
  .portfolio-content
    .portfolio-socia-media
    .tree-vision
    .vision-left-desc
    h3
    img {
    width: 25px;
  }

  .portfolio-content .portfolio-socia-media .tree-vision .vision-cover {
    display: none;
  }

  .portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc {
    width: 95%;
    padding: 0 25px;
  }

  .tree-mission-container .tree-mission .mission-desc h2 {
    font-size: 55px;
  }

  .tree-mission-container .tree-mission .mission-desc h2.lower-title {
    margin-top: -15px;
  }

  .tree-mission-container .tree-mission .mission-desc .mission-cover-mobile {
    margin-bottom: 90px;
  }
  .wrap-left {
    left: -60px;
  }
  .portfolio-content
    .portfolio-web
    .medical-webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover.portfolio-medical-intro {
    margin-bottom: 80px;
  }

  .client-reels {
    width: 40%;
  }

  .reels-section .all-reels .all-reels-title h2 {
    font-size: 35px;
    margin-bottom: 7px;
  }

  .reels-section .single-reel {
    top: 3%;
  }

  .reels-section {
    height: 34rem;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .page-insights-results
    .page-insights-imgs
    .insight-item {
    height: auto;
    width: 100%;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .page-insights-results
    .page-insights-imgs
    .insight-item
    img {
    height: 190px;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .page-insights-results
    p {
    display: none;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .media-buying
    img.social-icons-abs {
    display: none;
  }

  .media-popup-content {
    width: 90%;
  }

  .media-popup-layer .swiper-button-prev.media-popup-prev {
    top: unset;
    left: 35%;
    bottom: 15%;
  }

  .media-popup-layer .swiper-button-next.media-popup-next {
    top: unset;
    right: 35%;
    bottom: 15%;
  }

  .media-popup-layer .close-popup {
    top: 10%;
    right: 3%;
  }
  
  .media-popup-layer .close-popup i{
    font-size: 25px;
    color: var(--tree-color);
  }

  main .media-intro-title h2{
    font-size: 35px;
  }

  section.media-portfolio .media-category-box .media-category-data .discover-box img.astronut-sitting{
    display: none;
  }

  section.media-portfolio .media-category-box .media-category-data .discover-box svg {
    width: 16vw;
    height: 16vw;
  }

  section.media-portfolio .media-category-box .media-category-data .discover-box h6 img{
    margin: 0;
    margin-left: 15px;
  }

  section.media-portfolio .media-category-box .media-category-data h3{
    font-size: 40px;
  }

  section.media-portfolio .media-portfolio-intro h2{
    margin-top: unset;
    font-size: 35px;
  }

  section.media-portfolio .media-portfolio-intro {
    margin-bottom: 40px;
  }

  section.podcast .podcast-title h2 {
    line-height: 40px;
    width: 83%;
    margin: auto;
  }

  section.podcast .podcast-videos {
    width: 90%;
  }

  section.podcast .podcast-videos .swiper-button-next.next-pod,
  section.podcast .podcast-videos .swiper-button-prev.prev-pod {
    top: 100%;
  }

  section.podcast .podcast-videos .swiper-button-next.next-pod{
    right: 20%;
  }

  section.podcast .podcast-videos .swiper-button-prev.prev-pod{
    left: 20%;
  }

  section.podcast{
    margin-bottom: 70px;
  }

  section.category-reels .category-reels-title h2{
    font-size: 40px;
    line-height: 45px;
    width: 83%;
    margin: auto;
  }

  section.category-reels img.category-reels-title-img{
    left: 22%;
    top: 6%;
    width: 9%;
  }

  section.category-reels .category-reels-videos img.play-catgeory-reel,
  section.category-reels .category-reels-videos img.pause-catgeory-reel{
    width: 15%;
    left: 42%;
  }

  section.category-videos .category-videos-title h2{
    font-size: 40px;
    line-height: 45px;
    width: 83%;
    margin: auto;
  }

  section.category-contact .category-contact-text{
    margin-bottom: 40px;
  }

  section.category-contact .category-contact-image{
    width: 80%;
  }

  #main.branding-page {
    margin-top: 23%;
  }

  section.branding-intro .branding-intro-text h2 {
    font-size: 40px;
  }

  section.branding-intro .branding-intro-text h2 span {
    font-size: 50px;
  }

  section.branding-intro .branding-intro-text h3 {
    font-size: 30px;
  }

  .branding-intro-text .rotating-words .gif h2 {
    font-size: 35px;
  }

  .branding-intro-text .rotating-words{
    top: -5px;
  }

  .branding-title h2{
    font-size: 45px;
  }

  section.branding-works .tabs{
        /* background: red; */
        transform: unset;
        left: 10%;
  }

  section.branding-intro .branding-intro-text p{
    font-size: 26px;
    line-height: 25px;
    width: 90%;
  }

  .tree-mission-container .tree-mission{
    margin-bottom: 30px;
  }

  .break-tree::before,
  .break-tree::after{
    bottom: -1px;
    height: 1px;
  }

  .portfolio-content .portfolio-web .first-intro .dashboard-service .dashboard-desc{
    padding: 0 20px;
  }

  .portfolio-content .portfolio-web .first-intro .dashboard-service .dashboard-desc .dashboard-services-box .dashboard-point h6{
    color: var(--tree-color);
  }

  .portfolio-content .portfolio-web .intro-web .intro-web-box .intro-web-desc.left-web,
  .portfolio-content .portfolio-web .intro-web .intro-web-box .intro-web-desc.right-web{
    margin-bottom: 20px;
  }
}

@media (max-width: 450px) {
  section.payment-service .payment-box {
    padding: 0;
  }
  .cardWrapper {
    height: 240px;
  }

  section.shipping .shipping-desc h6 {
    font-size: 17px;
  }

  section.shipping .shipping-desc p {
    font-size: 15px;
  }

  .benefits-description-text h2 {
    margin-bottom: 15px !important;
    font-size: 20px !important;
  }

  .benefits-description-text h4 {
    font-size: 17px;
  }

  section.responsive-web .responsive-web-cover h2 {
    padding: 0;
  }

  #tumor-box .benefits-description-text h2 span {
    font-size: 25px !important;
  }

  .reels-section .single-reel {
    bottom: -8%;
  }

  .swiper-button-next.next-thumbnail,
  .swiper-button-prev.prev-thumbnail {
    display: none;
  }

  .reels-section .all-reels .all-reels-title h2 {
    font-size: 35px;
  }

  .reels-section .all-reels .all-reels-title p {
    font-size: 17px;
    width: 95%;
  }

  .reels-section .single-reel {
    top: 3%;
    width: 70%;
    right: 13%;
  }

  section.clients-intro .clients-intro-title {
    padding: 0 20px;
  }

  section.clients-intro .clients-intro-title h1 {
    font-size: 35px;
  }

  section.clients-intro .clients-intro-title h1::before {
    height: 2px;
  }

  .swiper-button-next.next-results {
    right: 1%;
    bottom: unset;
    top: 55%;
    background: #eb3243;
    color: #fff;
  }

  .swiper-button-prev.prev-results {
    left: 1%;
    bottom: unset;
    top: 55%;
    background: #eb3243;
    color: #fff;
  }

  .clients-results
    .clients-results-cover
    .clients-results-data
    .media-buying
    img.media-buying-abs {
    top: -2%;
    left: 9px;
  }

  section.category-contact .category-contact-text{
    padding: 0 25px;
  }

  section.category-contact .category-contact-text h2{
    font-size: 55px;
  }

  section.category-contact .category-contact-text .btn{
    width: 190px;
    height: 45px;
  }

  section.logos-colors .logos-colors-box .logos-data h3,
  section.logos-colors .logos-colors-box .colors-data h3 {
    font-size: 25px;
  }

  section.logos-colors h2.logos-colors-title {
    font-size: 35px;
    width: 90%;
  }

  section.logos-colors img.logos-colors-mobile{
    width: 80%;
  }

  section.logos-colors .logos-colors-box .logos-data {
    margin-top: 30px; 
  }

  section.branding-works {
    background-position: 74%;
    background-size: 240%;
    background-repeat: no-repeat;
    height: 360px;
  }

  section.printing-mockups .printing-mockups-data h3 {
    font-size: 35px;
    line-height: 35px;
  }

  section.printing-mockups .printing-mockups-data h3 img {
    width: 45%;
  }


  .gallery-main .gallery-body .gallery-image .description {
    padding: 6px 0;
  }

  #hero.hero-media .middle-text p {
    display: none;
  }

  section.branding-works .tab .arrow{
    display: none;
  }

  section.branding-works .tabs{
    flex-direction: row;
    width: 100%;
    left: 0;
    height: auto;
    background-color: teal;
  }

  section.branding-works .tab{
    font-size: 18px;
    background-color: red;
  }

  section.branding-works .tab:hover {
    transform: unset;
  }

  .swiper-button-prev.prev-category-reel,
  .swiper-button-next.next-category-reel{
    bottom: -10%;
  }

  section.clients-show{
    padding-top: 25px;
  }

}

@media (max-width: 420px) {
  #hero .middle-text p {
    padding: 10px;
  }
  section.clients-show .clients-show-header .clients-show-tabs {
    flex-wrap: wrap;
  }

  section.clients-show .clients-show-header .clients-show-tabs p {
    margin: 0 10px;
  }

  section.clients-show .clients-show-header .clients-show-tabs p {
    font-size: 17px;
  }

  .portfolio-content .portfolio-socia-media .tree-vision .vision-left-desc h3 {
    font-size: 35px;
  }

  .portfolio-content .portfolio-socia-media .tree-vision {
    position: relative;
  }

  .portfolio-content .portfolio-socia-media .tree-vision .vision-cover-mobile {
    display: block;
    width: 50%;
    position: absolute;
    right: 0;
    top: -5%;
    z-index: -1;
  }

  .portfolio-content
    .portfolio-socia-media
    .tree-vision
    .vision-cover-mobile
    img {
    width: 100%;
  }

  .tree-mission-container .tree-mission .mission-desc .mission-cover-mobile {
    margin-bottom: 120px;
  }

  .wrap-left {
    left: -90px;
  }

  section.printing-mockups{
    margin-bottom: 40px;
  }
}

@media (max-width: 400px) {
  .portfolio-filter ul {
    padding: 0 20px;
    row-gap: 10px;
    justify-content: space-evenly;
  }
  .slide-content a {
    padding: 5px 17px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 40px;
    height: 25px;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 16px;
    font-weight: 600;
  }

  .portfolio-content .portfolio-web .portfolio-category-intro {
    margin-bottom: 45px;
  }

  .portfolio-content
    .portfolio-web
    .medical-webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover
    .circle-intro {
    width: 250px;
    height: 250px;
  }

  .portfolio-content
    .portfolio-web
    .medical-webites-intro
    .portfolio-category-intro
    .portfolio-intro-cover
    .circle-intro
    img {
    width: 125%;
    position: relative;
    top: 15px;
    left: -32px;
  }
  .portfolio-content .portfolio-web .portfolio-category-intro {
    padding: 0;
  }

  .chart-graphs .canvasjs-chart-canvas {
    width: 100%;
  }

  .cardWrapper {
    height: 200px;
  }

  section.payment-service h2 span {
    font-size: 30px !important;
  }

  section.chat-bot .chat-box .chat-cover h2 {
    font-size: 25px;
  }

  section.chat-bot .chat-box .chat-cover h2 img {
    width: 18px;
  }

  section.clients-show .clients-show-header .clients-show-title {
    width: 95%;
    padding-inline-start: 10px;
  }

  section.clients-show .clients-show-header .clients-show-title h2 {
    font-size: 40px;
  }
  section.clients-show .clients-show-header .clients-show-title h2 img {
    width: 90px;
  }

  .tree-mission-container .tree-mission .mission-desc .mission-cover-mobile {
    margin-bottom: 145px;
  }

  .tree-mission-container .tree-mission .mission-desc h4 {
    margin-bottom: 40px;
  }

  .tree-mission-container .tree-mission .mission-desc h2 {
    font-size: 40px;
  }

  .tree-mission-container .tree-mission .mission-desc h2.lower-title {
    margin-top: -30px;
  }

  .reels-section .all-reels .all-reels-title h2 {
    font-size: 32px;
  }

  section.media-portfolio .media-category-box .media-category-data h3 {
    font-size: 35px;
  }

  section.media-portfolio .media-category-box .media-category-data .discover-box a{
    margin-top: 5px;
  }

  section.category-reels img.category-reels-title-img {
    left: 15%;
    top: 7%;
    width: 12%;
  }

  section.branding-intro .branding-intro-text h2 {
    font-size: 33px;
  }

  section.branding-intro .branding-intro-text h2 span {
    font-size: 40px;
  }

  section.branding-intro .branding-intro-text{
    padding: 0 20px;
  }

  section.branding-intro .branding-intro-text h3 {
    font-size: 25px;
  }

  .branding-intro-text .rotating-words .gif h2 {
    font-size: 29px;
  }

  .branding-intro-text .rotating-words #g4.gif h2 img,
  .branding-intro-text .rotating-words #g3.gif h2 img,
  .branding-intro-text .rotating-words #g2.gif h2 img {
    width: 30px;
  }

  .branding-intro-text .rotating-words .gif h2 img {
    width: 20px;
    margin-left: 5px;
  }

  .branding-intro-text .rotating-words {
    top: -3px;
  }

  main.gallery-main h6 {
    display: none;
}
main.gallery-main .gallery-title h2 {
    font-size: 35px;
}

main.gallery-main .gallery-title img {
    width: 21px;
}
main.gallery-main .gallery-title {
    margin-bottom: 0 !important;
}
.gallery-main .gallery-body {
    padding-top: 0;
}

section.media-portfolio .media-portfolio-intro h2{
  font-size: 27px;
}

section.media-portfolio .media-category-box .media-category-image{
  padding: 0;
}

section.media-portfolio .media-category-box .media-category-image h3{
  margin: auto;
  font-size: 30px;
  margin-bottom: 20px;
}

section.media-portfolio .media-category-box .media-category-data .discover-box h6 img{
  display: none;
}

section.media-portfolio .media-category-box .media-category-data .discover-box h6{
  margin-top: 7px;
}

section.media-portfolio hr.media-hr{
  display: block;
  margin-bottom: 50px;
}

}