/* Responsive */
  @media(max-width: 1199px) {
      .left-blok {
          max-width: 300px;
      }

      .step-card-box {
          max-height: 320px;
      }
  }

  @media(max-width: 1024px) {
      .service-wrapper {
          gap: 20px;
      }

      .service-card {
          width: 280px;
      }


      .step-card-box {
          max-height: 370px;
      }
  }

  @media (max-width: 900px) {

      .logo-column {
          width: auto;
          overflow: hidden;
      }

      .logo-track {
          display: flex;
          flex-direction: row;
          width: max-content;
          animation: scroll-horizontal 8s linear infinite;
      }

      .logo-mob-img {
          display: block;
          width: 176.5px !important;
          height: 68px !important;
          margin-right: 0;
      }

      .logo-img {
          display: none;
      }

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

          100% {
              transform: translateX(-50%);
          }
      }

  }

  @media (max-width: 768px) {
      .vertical-line {
          height: 60px;
      }

      /* hero section */
      .hero-section {
          text-align: center;
          background: url('../img/hero-mb-bg.webp');
          background-size: cover;
          background-position: top;
          background-repeat: no-repeat;
          min-height: 562px;
          height: 100%;
      }

      .topbar {
          float: left;
      }

      .hero-center {
          position: absolute;
          top: 45%;
      }

      .hero-title h1 {
          font-size: 36px;
          line-height: 1.06;
          display: flex;
          flex-direction: column;
          max-width: 171px;
          margin: auto;
      }

      .hero-subtext {
          font-size: 12px;
          margin: 0 auto;
          letter-spacing: 0px;
          max-width: 230px;
          padding-top: 9px;
      }

      .left-blok .dec {
          display: none;
      }

      .left-blok .mob {
          display: block;
      }

      .left-blok p {
          font-size: 14px;
          line-height: 1.43;
          max-width: 327px;
          text-align: center;
      }

      .left-blok {
          position: static;
          max-width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 16px;
      }

      /* our work */
      .work-section {
          padding: 40px 0px;
      }

      .work-heading .sub {
          font-size: 12px;
      }

      .work-heading h2 {
          font-size: 23px;
      }

      .work-mySwiper {
          width: 100%;
      }

      .work-slide-div {
          margin-top: 24px;
      }

      .work-slide .work-img {
          display: none !important;
      }

      .work-slide .work-mob-img {
          display: block !important;
          width: 100%;
          height: auto;
          min-height: 260px;
          border-radius: 6.6px;
      }

      .work-pagination {
          display: none;
      }

      /* ad-section */
      .ad-scroll {
          min-width: 160px;
      }

      .ad-scroll .circle1 {
          width: 20%;
          margin-left: -10%;
          height: 25vh;
          border-radius: 0 50% 50% 0;
          max-height: 160px;

      }

      .ad-scroll .circle2 {
          display: none;

      }

      .ad-scroll .circle3 {
          width: 40%;
          height: 25vh;
          border-radius: 100px 0 0 100px;
          max-height: 160px;
      }

      .ad-scroll .circle4 {
          width: 40%;
          height: 25vh;
          border-radius: 50%;
          max-height: 160px;
      }

      .ad-scroll .circle5 {
          width: 10%;
          height: 25vh;
          border-radius: 50px 0 0 50px;
          max-height: 160px;
      }

      .ad-scroll .prod-logo {
          padding: 25px;
          max-height: 160px;
      }

      /* Behind the scense */

      .custom-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          grid-template-rows: auto;
          gap: 8px;
      }

      /* Big first image */
      .custom-grid .big {
          grid-column: span 3;
          grid-row: span 3;
      }

      .custom-grid .small {
          grid-column: span 2;
      }

      .custom-grid .medium {
          grid-column: span 2;
      }

      .custom-grid .medium-wide {
          grid-column: span 3;
      }

      .custom-grid .small-wide {
          grid-column: span 2;
      }

      /* Image styling */
      .custom-grid img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 18px;
      }


      /* studio service */
      .service-heading p {
          font-size: 12px;
      }

      .service-heading h2 {
          font-size: 20px;
          margin: 10px 0px 24px 0px;
      }

      .service-card {
          border-radius: 15px 15px 35% 15px;
      }

      .service-card h3 {
          font-size: 20px;
          line-height: 1.4;
          color: #fcb542;
          margin-bottom: 13px;
      }

      .service-card p {
          font-size: 16px;
          font-weight: 200;
          line-height: 1.54;
          text-align: left;
          color: rgba(255, 255, 255, 0.5);
          transition: all 0.4s ease;
          margin-bottom: 0px;
      }

      .step-card:hover p {
          color: rgba(255, 255, 255, 0.3);
      }

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

      /* start */
      .services-section {
          padding: 40px 0;
      }

      .service-card {
          width: 100%;
          min-height: 210px;
          padding: 20px;
          border-radius: 15px 15px 55% 15px;
          padding-bottom: 16px;
      }

      .service-card .service-icon-box .service-icon img.service-hover-i {
          opacity: 1;
      }

      .service-card::before {
          content: '';
          position: absolute;
          bottom: 67px;
          right: 0;
          width: 150px;
          height: 120px;
      }

      .service-card::after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 69px;
          width: 190px;
          height: 150px;
      }


      .service-card h3 br {
          display: none;
      }

      .service-card h3 img {
          width: 30px;
          height: 30px;
          margin-right: 12px;
          display: inline-block;
      }

      .service-card:hover h3 {
          color: #fcb542;
      }



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

      .service-card .service-icon-box .service-icon img.service-unhover-i {
          display: none;
      }

      .service-card .service-icon-box .service-icon {
          background: #fcb542;
      }

      .service-card .service-icon-box .service-icon .service-hover-i {
          visibility: visible;
          color: #000;
      }

      .steps-grid {
          grid-template-columns: 1fr;
      }

      .popular .badge {
          width: 55px;
          height: 55px;
          font-size: 24px;
          top: -18px;
          right: 20px;
      }

      /* about section */
      .about-section {
          padding: 40px 0;
      }

      .about-label {
          font-size: 12px;
          text-align: center;
          margin-top: 0;
      }

      .about-title {
          font-size: 20px;
          text-align: center;
      }

      .about-desc {
          font-size: 16px;
          text-align: center;
          line-height: 1.5;
      }

      /* creatores */
      .creator-section {
          padding: 40px 0px;
      }

      .label {
          font-size: 12px;
      }

      .creator-title h2 {
          font-size: 20px;
      }

      .creator-title {
          margin-bottom: 24px;
      }

      .feature-card .yellow-img {
          opacity: 1;
      }

      .feature-item .feature-title {
          font-size: 20px;
          font-weight: 300;
          text-align: left;
          color: #fcb542;
      }

      .feature-item .feature-title.faded {
          color: #fcb542;

      }

      .icon-wrap img {
          position: absolute;
          top: 0;
          left: 15px;
          transition: 0.3s ease;
          width: 35px;
      }

      .feature-item {
          padding: 25px 10px 25px 0px;
      }

      .feature-desc {
          line-height: 1.5;
          color: rgba(255, 255, 255, 0.3);
      }

      .feature-item:hover .feature-desc {
          color: rgba(255, 255, 255, 0.3);
      }

      /* steps section */
      .steps-section {
          padding: 40px 0px;
      }

      .step-card .step-card-box {
          padding: 20px;
          border-radius: 15px 15px 75% 15px;
          padding-bottom: 100px;
      }

      .step-card-box::after {
          width: 40vw;
          border-radius: 0 0 25% 0;
      }

      .step-card-box::before {
          border-radius: 0 0 25% 0;
      }

      .step-card .step-badge-box {
          transform: scale(1);
          visibility: visible;
          bottom: 3px;
          right: 3px;
      }

      .steps-header p {
          font-size: 12px;
      }

      .steps-header h2 {
          font-size: 20px;
          margin: 10px 0px 24px 0px;
      }

      .step-card .num {
          color: #fcb542;
          font-size: 20px;
      }

      .step-card h3 {
          font-size: 20px;
          font-weight: 300;
          text-align: left;
          color: #fcb542;
          margin-bottom: 10px;
      }

      .step-card p {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.3);
          width: 97%;
      }

      .step-badge-box .step-badge {
          background: #fcb542;
          color: #101010;
      }

      .step-badge strong {
          font-size: 16px;
      }

      .step-badge span {
          font-size: 10px;
      }


      /* package */
      .pricing-section {
          padding: 40px 0px;
      }

      .pricing-header p {
          font-size: 12px;
      }

      .pricing-header h2 {
          font-size: 20px;
      }

      .pricing-container {
          margin: 24px 0px 24px 0px;
      }

      .pricing-card {
          width: 100%;
          margin: 0 auto;
          transform: scale(1);
          visibility: visible !important;
      }

      .pricing-card h3 {
          font-size: 20px;
          color: #fcb542;
      }

      .pricing-card ul li {
          line-height: 1.67;
          margin-bottom: 5px;
      }

      .pricing-card-box {
          padding: 25px 25px 5px 25px;
          border-radius: 20px 55% 20px 20px;
      }

      .pricing-card .pricing-badge-box {
          transform: scale(1);
          visibility: visible !important;
          animation: unpop 0.3s ease-in-out;
      }

      /* POP effect */
      @keyframes unpop {
          0% {
              transform: scale(1);
          }

          50% {
              transform: scale(1);
          }

          100% {
              transform: scale(1);
          }
      }

      .pricing-card:hover .pricing-badge-box {
          transform: scale(1);
          visibility: visible !important;
          animation: pop 0.5s ease-in-out;
      }

      /* POP effect */
      @keyframes pop {
          0% {
              transform: scale(1);
          }

          50% {
              transform: scale(1);
          }

          100% {
              transform: scale(1);
          }
      }

      .pricing-section .container {
          width: 100%;
          padding: 0;
      }

      .pricing-card .pricing-btn {
          font-size: 12px;
          line-height: 2.22;
          padding: 12px 30px;
          text-align: center;
          background: #fcb542;
          opacity: 1;
          color: #000;
      }

      .pricing-card-box::before {
          border-radius: 0 17% 0 0;
      }

      .pricing-card-box::after {
          border-radius: 0 10% 0 0;
          width: 200px;
      }

      .pricing-card ul {
          min-height: 215px;
      }

      .pricing-card p {
          min-height: 35px;
      }

      /* behind  */
      .behind-section {
          background-color: #fff;
          padding: 40px 0;
          margin-bottom: 38px;
      }

      .behind-sub-title {
          font-size: 12px;
      }

      .behind-main-title {
          font-size: 20px;
          margin-bottom: 24px;
      }

      .desctop-box {
          display: none;
      }

      /* contact section */
      .contact-section {
          padding: 40px 0px;
      }

      .contact-title {
          text-align: center;
          font-size: 12px;
          margin-top: 20px;
      }

      .order-2 {
          display: none;
      }

      .form-title {
          font-size: 20px;
          text-align: center;
      }

      .submit-btn {
          font-size: 14px;
          padding: 12.2px 20px 11.8px 20px;
          line-height: 1.5;
          display: block;
          margin: 0 auto;
      }

      .address-section {
          padding: 40px 0px;
      }

      .label-text {
          margin-bottom: 5px;
          font-size: 14px;
      }

      .address-details {
          font-size: 14px;
          margin-bottom: 0px;
      }

      .contact-line {
          font-size: 14px;
          font-weight: 200;
      }

      .bottom-ad-scroll {
          background-position: center;
          height: 140px;
      }


      /* faq section */
      .accordion-item {
          margin-bottom: 20px;
      }

      .accordion-header {
          font-size: 16px;
          font-weight: 300;
          padding: 16px 14px 16px 14px;
      }

      .faq-btn {
          font-size: 16px;
          padding: 0;
      }

      .accordion-collapse {
          margin-top: -12px;
      }

      .accordion-body {
          padding: 0;
          font-size: 14px;
          margin: 0 12px 20px 12px;
      }

      /* testimonal */
      .testimonals {
          padding: 40px 0px 0px 0px;
      }

      .custom-accordion {
          margin-bottom: 0;
      }

      .testimonals-pagination {
          margin: 30px 0px 25px 0px;
      }

      .testimonal-header h2 {
          margin-bottom: 24px;
          font-size: 20px;
      }

      .testimonal-card {
          margin-bottom: 40px;
      }

      .testimonal-header p {
          margin-bottom: 0px;
      }

      .testimonal-card-div h4 {
          font-size: 12px;
          margin-left: 24px;
          min-height: 40px;
      }

      .testimonal-card-div p {
          margin-left: 24px;
          font-size: 13.3px;
      }

      .testimonal-card-div p+div {
          margin-left: 25%;
      }

      .testimonal-card-div p {
          font-size: 13.3px;
          margin-bottom: 0;
          min-height: 120px;
      }

      .mytestimonals {
          margin-bottom: 0px;
      }

      .testimonal-card-box {
          padding: 25px;
      }

      .testimonal-card-box::after {
          width: 190px;
          left: 72px;
      }

      .testimonal-pagination {
          margin: 20px 0px 30px 0px;
      }

      .vertical-yellow-line {
          height: 60px;
      }

      .slide {
          min-width: 80%;
          max-width: 80%;
          height: 260px;
      }

      .arrow {
          display: none;
      }

      .slider-track {
          gap: 20px;
      }


      .cta-circle {
          width: 77px;
          height: 77px;
          font-size: 14px;
      }

      .down-arrow {
          margin-top: 7px;
      }

      .down-arrow img {
          width: 13px;
          height: 8px;
      }


      .hero-title .first,
      .hero-title .mid,
      .hero-title .last {
          display: block;
          text-align: center;
      }



      .hero-description {
          font-size: 16px;
          max-width: 90%;
          margin-top: 30px;
      }

      .main-title {
          font-size: 32px;
      }

      .service-card {
          width: 100%;
      }

      .ittisa-prod-logo {
          width: 92px;
          height: 92px;
      }

      /* ad-section */
      .bottom-ad-scroll {
          min-width: 160px;
      }

      .bottom-ad-scroll .circle1 {
          width: 20%;
          margin-right: -10%;
          height: 25vh;
          max-height: 160px;

      }

      .bottom-ad-scroll .circle2 {
          display: none;

      }

      .bottom-ad-scroll .circle3 {
          width: 40%;
          height: 25vh;
          max-height: 360px;
          max-height: 160px;
      }

      .bottom-ad-scroll .circle4 {
          width: 40%;
          height: 25vh;
          border-radius: 50%;
          max-height: 160px;

      }

      .bottom-ad-scroll .circle5 {
          width: 10%;
          height: 25vh;
          max-height: 160px;
      }

      .bottom-ad-scroll .ittisa-prod-logo {
          padding: 0;
          max-height: 160px;
          object-fit: contain;
      }

      .marquee-inner span {
          font-size: 53px;
      }
  }

  @media (max-width: 499px) {
      .testimonal-card-box::after {
          width: 120px;
      }

      .pricing-card-box::after {
          width: 120px;
      }

      .service-card {
          border-radius: 15px 15px 66% 15px;
      }

      .step-card .step-card-box {
          border-radius: 15px 15px 68% 15px;
      }

      .step-card-box::after {
          width: 45vw;
          border-radius: 0 0 20% 0;
      }

      .step-card-box::before {
          border-radius: 0 0 35% 0;
      }

      .testimonal-card-box::after {
          width: 150px;
          left: 80px;
      }

      .testimonal-card-box {
          min-height: 310px;
          border-radius: 20px 20px 20px 56%;

      }

      .testimonal-card-div p {
          min-height: 170px;

      }

      .pricing-card ul li {
          max-width: 140px;
          font-size: 14px;
      }

  }