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

body  {
  padding: 0 !important;
  margin: 0 !important;
  font-family: "Inter", sans-serif;
}
.page  {
  margin: 0 !important;
}

input,
button,
:focus-visible  {
  border: none;
  outline: none;
}
.ease-in-outs  {
  transition: all ease-in-out .3s;
}
.ease-in-out-1  {
  transition: all ease-in-out .55s;
}
.ease-in-out-2  {
  transition: all ease-in-out 1s;
}
iframe  {
  width: 100%;
  height: 100%;
}
input[type="text"]  {
  color: #212121 !important;
}

.activeColor  {
  background: linear-gradient(to right, #FD3B45, #FA8640);
  border: 1px solid #FD3B45;
  color: #fff !important;
}
a:visited  {
    color: #212121;
}

/* header sticky */

.sticky-in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background-color: #fff;
  animation: stickyFadeUp 0.3s ease forwards;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sticky-in .header-padding  {
  padding: 16px 0;
}
.sticky-out {
    animation: stickyFadeDown 0.4s ease forwards;
}
@keyframes stickyFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stickyFadeDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.navbar.active   {
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  overflow-y: auto;
}

/* banner dots custome */

.banner-slider .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 40px;
}
.banner-slider .swiper-pagination-bullet {
  width: 18px;
  height: 8px;
  border-radius: 3px;
  background: #212121;
  opacity: 1;
}
.banner-slider .swiper-pagination-bullet.swiper-pagination-bullet-active  {
  width: 36px;
  background:#EC4814;
}



/* loader css start */

.loading-center {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 999;
}
.loading-center .loading-div,
.loading-ring  {
  width: 160px;
  height: 160px;
}
.loading-center .loading-div  {
  position: relative;
}
.loading-ring {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: loadingring 2s linear infinite;
}
.loading-image  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
@keyframes loadingring {
  0%{
     transform:rotate(0deg);
     box-shadow: 1px 3px 2px #FD3B45;
  }

  50%{
      transform:rotate(180deg);
      box-shadow: 1px 3px 2px #FA8640;
  }

  80%{
       transform:rotate(288deg);
       box-shadow: 1px 3px 2px #A249ED;
  }
  100%{
    transform:rotate(360deg);
    box-shadow: 1px 3px 2px #6131E8;
  }
}
.loading-ring:before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255, 255, 255, .3);
}
.loading-center span {
  animation: loadingtext 3s ease-in-out infinite;
}
.loading-center span img  {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes loadingtext {
  50% {
    color: black;
  }
}

/* button loader */
	.submit_btn {
    position: relative;
  }
.loader {
  display: none;
  position: absolute;
  /* top: 50%; */
  right: 2px;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  animation: around 0.7s ease-in-out infinite;
  z-index: 1;
}

@keyframes around {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader::after,
.loader::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-width: 2px;
  border-color: #fff #fff transparent transparent;
  border-style: solid;
  border-radius: 50%;
  box-sizing: border-box;
  top: 0;
  left: 0;
  animation: around 0.7s ease-in-out infinite;
}

.loader::after {
  animation-delay: 0.1s;
}

/*Email input field loader end*/
label.error {
  color: red !important;
}


/* loader css end */

.image-ratio::before  {
  content: "";
  width: 100%;
  padding-top: 100%;
  display: block;
}
.iframe-video::before  {
  content: "";
  width: 100%;
  padding-top: 60%;
  display: block;
}
.image-ratio-small::before  {
  content: "";
  width: 100%;
  padding-top: 40%;
  display: block;
}
.work-image-ratio::before,
.team-image-ratio::before  {
  content: "";
  width: 100%;
  padding-top: 110%;
  display: block;
}
.video-ratio::before  {
  content: "";
  width: 100%;
  padding-top: 36%;
  display: block;
}
.contact-ratio::before  {
  content: "";
  width: 100%;
  padding-top: 24%;
  display: block;
}
.case-studies-image::before  {
  content: "";
  width: 100%;
  padding-top: 100%;
  display: block;
}
.blog-image-ratio::before  {
  content: "";
  width: 100%;
  padding-top: 50%;
  display: block;
}
.studies-image-ratio::before  {
  content: "";
  width: 100%;
  padding-top: 40%;
  display: block;
}
.studies-img-ratio::before  {
  content: "";
  width: 100%;
  padding-top: 60%;
  display: block;
}
.blog-img-ratio::before  {
  content: "";
  width: 100%;
  padding-top: 72%;
  display: block;
}
.studies-img-ratio img,
.studies-image-ratio img,
.blog-image-ratio img,
.blog-img-ratio img,
.image-ratio img,
.image-ratio-small img,
.work-image-ratio img,
.video-ratio img,
.team-image-ratio img,
.contact-ratio img,
.iframe-video iframe,
.case-studies-image img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.studies-img-ratio img,
.studies-image-ratio img  {
  object-position: center;
  border-radius: 0.375rem;
}

@media(max-width:1200px)  {
  .video-ratio::before {
    padding-top: 50%;
  }
}

@media(max-width:991px)  {
  .image-ratio::before {
    padding-top: 80%;
  }
  .contact-ratio::before  {
    padding-top: 50%;
  }
}

@media(max-width:767px)  {
  .video-ratio::before {
    padding-top: 100%;
  }
  .contact-ratio::before  {
    padding-top: 70%;
  }
}

/* image expand */

.featured-item.expanded {
  flex: 3;
  border-radius: 0.375rem;
}
.featured-item.expanded .case-text-div  {
  width: 100%;
  display: block;
}
.featured-item.expanded .case-text-div h2  {
  white-space: nowrap;
}

@media(max-width:991px)  {
  .featured-item.expanded .case-text-div h2 {
      white-space: normal;
  }
}
@media(max-width:767px)  {
  .featured-item.expanded {
    flex: unset;
    height: 200px;
  }
}


/* lines dots */

.text-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-two {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-one {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* background color */

.stop-color1 {
  stop-color: #fe9e30;
}
.stop-color2 {
  stop-color: #ff6004;
}

/* abour image radius */

.border-radious-top-left  {
  border-radius: 10px 0 0 0;
}
.border-radious-bottom-right  {
  border-radius: 0 0 10px 0;
}

/* team slider svg fill */

.team-slider ul li a:hover svg  {
  fill: #EC4814;
  transform: scale(1.05);
}

/* close animation */

.close-button-block::before,
.close-button-block::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(55% - 4px);
  display: block;
  width: 4px;
  height: 25px;
  background: white;
  transform-origin: bottom center;
  transition: all ease-out 280ms;
}
.close-button-block:last-of-type {
  transform: rotate(180deg);
}
.close-button .in .close-button-block::before {
  transition-delay: 280ms;
  transform: translateX(20px) translateY(-20px) rotate(45deg);
}
.close-button .in .close-button-block::after {
  transition-delay: 280ms;
  transform: translateX(-22px) translateY(-22px) rotate(-45deg);
}
.close-button .out .close-button-block::before {
  transform: translateX(-5px) translateY(5px) rotate(45deg);
}
.close-button .out .close-button-block::after {
  transform: translateX(5px) translateY(5px) rotate(-45deg);
}
.close-button:hover .in .close-button-block::before {
  transform: translateX(-5px) translateY(5px) rotate(45deg);
}
.close-button:hover .in .close-button-block::after {
  transform: translateX(5px) translateY(5px) rotate(-45deg);
}
.close-button:hover .out .close-button-block::before {
  transform: translateX(-20px) translateY(20px) rotate(45deg);
}
.close-button:hover .out .close-button-block::after {
  transform: translateX(20px) translateY(20px) rotate(-45deg);
}

/* blog content start */

.blog-content img  {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
  border-radius: 6px !important;
}
.service-link ul li:not(:last-child)  {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 18px;
}
.service-link ul li:not(:last-child):hover  {
  border-bottom: 1px solid #EC4814;
}
.service-link img  {
    object-fit: contain !important;
}

/* responsive start */

.wc_content p, .wc_content h1, .wc_content h2, .wc_content h3, .wc_content h4, .wc_content ul li {
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    padding-top: 20px;
}
.wc_content h1, .wc_content h2, .wc_content h3, .wc_content h4, .wc_content ul li {
    color: #212121;
}
.wc_content ul {
    list-style: decimal;
    margin-left: 40px;
}
.wc_content ul li {
    padding-top: 0 !important;
}
.wc_content ul li p {
    padding-top: 10 !important;
}
.wc_content p strong {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 10px;
    display: inline-block;
    color: #212121;
}
 

@media(max-width:767px)  {
  .team-slider .custom-swiper-button-prev,
  .project-slider .custom-swiper-button-prev  {
    bottom: -60px;
    left: 42%;
    transform: translateX(-50%);
    top: unset;
  }
  .team-slider .custom-swiper-button-next,
  .project-slider .custom-swiper-button-next  {
    bottom: -60px;
    right: 35%;
    transform: translateX(-50%);
    top: unset;
  }
  .close-button-block::before, .close-button-block::after {
    width: 3px;
    height: 16px;
  }
}