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

:root {
     --xspace: 5px;
     --vw-width: calc(100vw - 18px);
}

/* font-family: "IBM Plex Sans", sans-serif; */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


/* Fonts */
@font-face {
     font-family: 'Helvetica Neue';
     font-style: normal;
     font-weight: 400;
     src: url('fonts/HelveticaNeueRoman.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: italic;
     font-weight: 400;
     src: url('fonts/HelveticaNeueItalic.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: normal;
     font-weight: 100;
     src: url('fonts/HelveticaNeueUltraLight.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: italic;
     font-weight: 100;
     src: url('fonts/HelveticaNeueUltraLightItalic.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: normal;
     font-weight: 200;
     src: url('fonts/HelveticaNeueThin.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: italic;
     font-weight: 200;
     src: url('fonts/HelveticaNeueThinItalic.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: normal;
     font-weight: 300;
     src: url('fonts/HelveticaNeueLight.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: italic;
     font-weight: 300;
     src: url('fonts/HelveticaNeueLightItalic.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: normal;
     font-weight: 500;
     src: url('fonts/HelveticaNeueMedium.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: italic;
     font-weight: 500;
     src: url('fonts/HelveticaNeueMediumItalic.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: normal;
     font-weight: 700;
     src: url('fonts/HelveticaNeueBold.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: italic;
     font-weight: 700;
     src: url('fonts/HelveticaNeueBoldItalic.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: normal;
     font-weight: 800;
     src: url('fonts/HelveticaNeueHeavy.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: italic;
     font-weight: 800;
     src: url('fonts/HelveticaNeueHeavyItalic.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: normal;
     font-weight: 900;
     src: url('fonts/HelveticaNeueBlack.woff') format('woff');
}

@font-face {
     font-family: 'Helvetica Neue';
     font-style: italic;
     font-weight: 900;
     src: url('fonts/HelveticaNeueBlackItalic.woff') format('woff');
}


body {
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 300;
}

a:focus {
     border:0px!important;
     outline: 0px!important;
}


.site-container {
     max-width: 1320px;
     margin: auto;
}

header {
     display: flex;
     gap: 10px;
     margin: 32px 0;
     justify-content: space-between;
     align-items: center;
}

.pos-relative {
     position: relative;
}

.d-flex {
     display: flex;
}

.justify-content-between {
     justify-content: space-between;
}

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

.text-center {
     text-align: center;
}

/*| Navigation |*/
.navigationWrapper,
.signupWrapper,
.mobileGetIntouch {
     display: flex;
     align-items: center;
     box-shadow: 0px 0px 22px 0px #8C8C8C33;
     border-radius: 24px;
     padding: 20px 24px;
     gap: 14px;
}

.navigationWrapper {
     padding: 0px 24px;
}

nav {
     background: #fff;

     ul {
          list-style: none;
          position: relative;
          display: flex;

          li {

               -webkit-transition: all .2s ease-in-out;
               -moz-transition: all .2s ease-in-out;
               transition: all .2s ease-in-out;

               &:hover {
                    a {
                         color: #000;
                         font-weight: 700;
                         /* letter-spacing: 0.7px; */
                    }

                    >ul {
                         display: block;
                    }
               }

               a.dropdown {
                    position: relative;
                    padding-right: 20px;


                    &:after {
                         position: absolute;
                         right: 0px;
                         top: 50%;
                         transform: translateY(-50%);
                         content: ' ';
                         width: 0;
                         height: 0;
                         border-left: 6px solid transparent;
                         border-right: 6px solid transparent;
                         border-top: 6px solid black;
                    }


                    &:hover {


                         &:after {
                              border-left: 6px solid transparent;
                              border-right: 6px solid transparent;
                              border-bottom: 6px solid black;
                              border-top: 0px;
                         }

                    }
               }

               a {
                    display: block;
                    padding: 10px;
                    color: #474747;
                    font-size: 18px;
                    letter-spacing: -0.4px;
                    text-decoration: none;
                    font-family: "IBM Plex Mono", monospace;
                    font-weight: 600;

                    &.active {
                         color: #000;
                         font-weight: 700;
                         /* letter-spacing: 0.7px; */
                    }
               }
          }

          ul {

               display: none;
               position: absolute;
               top: 100%;
               width: 128px;
               padding: 8px;
               padding-top: 30px;

               &:after {
                    background: #fff;
                    content: " ";
                    width: 100%;
                    height: calc(100% - 20px);
                    position: absolute;
                    top: 22px;
                    left: 0;
                    box-shadow: 0px 4px 22px 0px #8C8C8C33;
                    z-index: 3;
                    border-radius: 12px;
               }

               li {
                    float: none;
                    position: relative;
                    z-index: 4;

                    a {
                         display: block;
                         letter-spacing: 0 !important;
                         padding: 12px;
                         border-radius: 12px;
                         font-weight: 300;

                         &:hover {
                              background: #6E27FF;
                              color: #fff;
                              font-weight: 500;
                         }
                    }
               }




          }


     }
}

.signupWrapper {
     width: 336px;
     gap: 0px;

}
.signUpButton {
     background: transparent;
     border: 0px;
     padding: 12px 24px;
     font-family: "IBM Plex Mono", monospace;
     font-weight: 600;
     font-size: 16px;
     /* width: 50%; */
     border-radius: 12px;
     cursor: pointer;
     display:inline-block;
     text-decoration: none!important;
     color: #27282D;
     &.getInTouchButton {
          background: #27282D;
          color: #fff;
     }
}

.primary-button {
     border: 0px;
     padding: 12px 24px !important;
     font-family: "IBM Plex Mono", monospace;
     font-weight: 600;
     font-size: 16px;
     border-radius: 12px;
     cursor: pointer;
     background: #27282D;
     color: #fff;
     position: relative;
     overflow: hidden;
     text-decoration: none;

     span {
          position: relative;
          z-index: 1;
     }

     &::after {
          content: " ";
          width: 100%;
          height: 0%;
          position: absolute;
          background: #6E27FF;
          left: 0px;
          bottom: 0px;
          transition: all 0.1s ease;
          border-radius: 12px;
          ;

     }

     &:hover {
          &::after {
               height: 100%;
          }
     }

}

.secondary-button {
     padding: 12px 24px;
     font-family: "IBM Plex Mono", monospace;
     font-weight: 600;
     font-size: 16px;
     border-radius: 12px;
     cursor: pointer;
     background: transparent;
     color: #27282D;
     position: relative;
     overflow: hidden;
     border: 1px solid #27282D;
     text-decoration: none;
     display: inline-block;

     span {
          position: relative;
          z-index: 1;
     }

     &::after {
          content: " ";
          width: 100%;
          height: 0%;
          position: absolute;
          background: #6E27FF;
          left: 0px;
          bottom: 0px;
          transition: all 0.1s ease;
     }

     &:hover {
          color: #fff;
          ;

          &::after {
               height: 100%;
          }
     }

}

.mobileGetIntouch {
     gap: 0px;
     padding: 8px 0px;
     border-radius: 8px;

     button {
          background: transparent;
          border: 0px;
          padding: 12px 24px;
          font-family: "IBM Plex Mono", monospace;
          font-weight: 600;
          font-size: 16px;
          color: #000;

          border-radius: 12px;
          cursor: pointer;

          &.getInTouchButton {
               background: #27282D;
               color: #fff;
          }
     }
}

.main-banner {
     margin: 0 0 32px;
     width: 100%;
     position: relative;

     box-shadow: 0px 0px 22px 0px #8C8C8C33;
     border-radius: 30px;
     overflow: hidden;
     background: #F7F7F7;

     .mobileRotationVideo {
          width: 350px;
          margin: auto;
     }

     .banner-text {
          position: absolute;
          width: 500px;
          right: 48px;
          bottom: 50px;
          z-index: 1;
          opacity: 0;
          animation: fadeInBannerAnim 1s 1.5s linear forwards;
     }

     &.contactusBanner {
          background-image: url(https://cdn-img-ys.affinitymatrix.com/images/contact-us-arrow.png);
          background-repeat: no-repeat;
          background-position: left bottom;
          position: absolute;
          overflow: unset;
          display: flex;
          justify-content: space-between;

          .banner-text {
               left: 80px;
               top: 80px;
               position: relative;

               h2 {
                    font-size: 46px;
                    margin-bottom: 60px;
               }

               .grid-container {
                    grid-template-columns: repeat(2, 1fr);

                    .sub-item {
                         flex-direction: column;
                         text-align: center;
                         padding: 0px;
                         background: transparent;
                         width: 140px;
                         gap: 0px;

                         svg {
                              height:50px;
                         }

                         h4 {
                              font-size: 22px;
                         }

                         p {
                              margin: 0px;
                         }
                    }
               }
          }
     }

     &.about-us {
           background:#f4f4f4;
          .banner-text {
               left: 54px;
               width: calc(100% - 650px);
               top: 50%;
               transform: translateY(-50%);
               bottom: inherit;
          }
     }

     &.innerpage {
          .banner-text {
               left: 80px;
               right: inherit;
               bottom: inherit;
               top: 50%;
               transform: translateY(-50%);
          }
     }

     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 52px;
          text-transform: capitalize;
          line-height: 63.8px;
          transition: all 0.2s linear;
     }

     p {
          color: #737171;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          font-size: 20px;
          line-height: 28px;
          margin: 16px 0 40px 0;
          transition: all 0.2s linear;
     }
}

@keyframes fadeInBannerAnim {
     to {
          opacity: 1;
     }
}

.ys-logo {
     svg {
          width:220px;
     }
}

.nav-toggle,
.mobileGetIntouch,
.mobileLogo,
.mobile-banner,
.mobile {
     display: none;
}

.nav-toggle {
     cursor: pointer;
}

.mobileLogo {
     margin-top: 20px;
     padding: 18px;
     /* box-shadow: 0px 4px 12px 0px #00000008; */
     position: relative;

     .close {
          display: block;
          /* Animate close to X when menu is active */
          position: absolute;
          right: 22px;
          top: 50%;
          transform: translateY(-50%);

          .bar {
               display: block;
               width: 18px;
               height: 2px;
               margin: 6px auto;
               background-color: #000;
               transition: all 0.3s ease;
               border-radius: 100px;
          }

          .bar:nth-child(1) {
               transform: translateY(8px) rotate(45deg);
          }

          .bar:nth-child(2) {
               opacity: 0;
          }

          .bar:nth-child(3) {
               transform: translateY(-8px) rotate(-45deg);
          }

     }

}

.floating-getInTouch {
     display: none!important;

     a {
          background: #27282D;
          border-radius: 16px;
          border: 0px;
          padding: 16px 20px;
          position: fixed;
          z-index: 1;
          right: 100px;
          bottom: 100px;
          cursor: pointer;



          /* display: inline-flex; */
          display: none!important;
          align-items: center;
          overflow: hidden;
          width: auto;
          max-width: 20px;
          /** I'm animating max-width because width needs to be auto, and auto can't be animated **/
          -webkit-transition: max-width 0.5s;
          transition: max-width 0.5s;

          text-decoration: none;

          span {
               white-space: nowrap;
               padding-left: 16px;
               font-family: "Montserrat";
               font-weight: 500;
               font-size: 16px;
               color: #fff;
          }

          &:hover {
               max-width: 300px;
               transition: all 0.3s ease;
               background: #6E27FF;

          }
     }
}

.programatic-ad-section,
.trusted-solution-section,
.section {
     margin: 120px 0 0;

     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 40px;
          text-align: center;

     }

     h3 {
          color: #737171;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          font-size: 20px;
          line-height: 28px;
          text-align: center;
          margin: 16px 0;
     }

     .col-3 {
          display: flex;
          gap: 20px;
          width: 100%;
          margin: 48px 0 20px;

     }

     .item {
          width: 33.33%;
          background: #F6F6F7;
          border-radius: 24px;
          overflow: hidden;

          div {
               padding: 0 40px 40px;
               text-align: left;
          }

          h4 {
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 500;
               font-size: 28px;
               color: #202020;
               margin: 0 0 16px;
               line-height: 30px;
          }

          p {
               color: #737171;
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 300;
               font-size: 20px;
               line-height: 28px;
          }
     }

     video {
          width: 100%;
     }
}

.section {
     h4 {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 700;
          font-style: Bold;
          font-size: 32px;
          line-height: 100%;
     }

     .box-content {
          background: #ECECED;
          overflow: hidden;
          border-radius: 24px;
          position: relative;
          /* min-height: 500px; */

          p {
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 300;
               font-size: 20px;
               line-height: 28px;
               color: #737171;
               padding: 10px 0;
          }

          .lottie-wrapper,
          .preloader {
               position: absolute;
               right: 0;
               top: 0%;
               /* transform: translateY(-50%); */
          }

          #smartFills-json, #web-pub-HeaderBidding, #web-publisher-VideoMonetization {
               position: absolute;
               top: 0;
               right: 0;
               width: 400px;
               height: 400px;
          }

          #lottie1, #inapp-header-bidding-json, #interstitial-Ads-json, #rewarded-Ads-json, #app-Ads-json {
               position: absolute;
               top: -77px;
               right: -67px;
               width: 550px;
               height: 550px;
          }

          #hvrAnimation-json {
               position: absolute;
               top: -77px;
               right: -67px;
               width: 550px;
               height: 550px;
               img {
                    width: 100%;
                    height: 100%;
               }
          }

          #web-publisher-ParallaxAds {
               position: absolute;
               top: -77px;
               right: -67px;
               width: 550px;
               height: 550px;
               img {
                    width: 100%;
                    height: 100%;
               }
          }

          #banner-ads-json {
               position: absolute;
               top: -107px;
               right: -87px;
               width: 600px;
               height: 600px;
          }

          .carousel-leftcol {
               width: calc(100% - 450px);
          }

          .features {
               box-sizing: border-box;
               display: flex;
               flex-wrap: wrap;
               gap: 15px;
               margin: 24px 0;

               div.items {
                    width: 48%;
                    background: #F6F6F7;
                    border-radius: 16px;
                    padding: 20px 24px;
                    box-sizing: border-box;
                    font-family: 'Helvetica Neue', sans-serif;
                    font-weight: 300;
                    font-size: 18px;
                    line-height: 26.7px;
                    color: #4b4b4b;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    text-transform: capitalize;

                    svg {
                         min-width:40px;
                         max-width: 40px;
                         height:25px;
                    }

                    div {
                         width: 26px;
                         margin-right: 5px;
                         display: flex;
                         justify-content: center;
                    }

               }
          }
     }


}

/* Reset and base styles */
.custom-carousel * {
     box-sizing: border-box;
     /* margin: 0; */
     /* padding: 0; */
}

/* Container styles */
.custom-carousel {
     /* max-width: 800px; */
     margin: 0 auto;
     position: relative;

     padding: 0 10px;

     /* Track/slides container */
     .custom-carousel__track {
          display: flex;
          transition: transform 0.5s ease;
     }

     /* Individual slide */
     .custom-carousel__slide {
          min-width: 100%;
          padding: 40px;
          overflow: hidden;
          p {
               min-height:82px;
          }
     }

     .custom-carousel__slide img,
     .custom-carousel__slide svg {
          max-width: 100%;
          height: auto;
          /* border-radius: 8px; */
     }

     .custom-carousel__slide #web-pub-hvr image {
          width: 1250px;
          height: 1250px;
          transform: translateX(51px) translateY(-90px);
     }

     /* Navigation dots */
     .carousel-tabs-wrapper {

          width: 100%;
          overflow: hidden;
          overflow-x: auto;

          border-radius: 16px;
          box-shadow: 0px 4px 22px 0px #8C8C8C33;
          margin: 35px auto;
          background: #fff;
          -webkit-overflow-scrolling: touch;
     }

     .custom-carousel__nav {
          list-style: none;
          padding: 6px;
          display: flex;
          gap: 6px;
          justify-content: center;
          width: 100%;

          transition: all 0.2s ease-in-out;
     }

     .custom-carousel__dot {
          border: 0;

          display: inline-block;

          text-decoration: none;
          border-radius: 16px;
          font-size: 16px;
          font-family: 'Helvetica Neue', sans-serif;

          cursor: pointer;
          transition: background 0.3s;
          width: calc(100% / 6.1);

          padding: 16px;
          text-align: center;
          font-weight: 300;
          color: #202020;
          letter-spacing: 0;
     }

     .custom-carousel__dot--active {
          background: #000;
          color: #fff;
          font-weight: 500;
     }

     /* Navigation buttons */
     .custom-carousel__controls {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
     }

     .custom-carousel__btn {
          padding: 8px 16px;
          background: #333;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
     }


}

.text-tags {
     display: flex;
     gap: 10px;

     .tag {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 500;
          color: #202020;
          font-size: 14px;
          line-height: 100%;
          letter-spacing: 0%;
          padding: 8px 16px;
          background: #D5C8FE;
          border-radius: 8px;
     }
}

.trusted-carousel {
     position: relative;

     .carousel-buttons {
          width: 100%;
          margin: 0;
     }
}

.trusted-solution-section,
.section-card {
     background: #ECECED;
     padding: 60px 32px;
     border-radius: 24px;



     h2 {
          text-align: center;
     }

     .carousel-accordion.owl-carousel {
          /* max-width: 90%; */
          margin: 3vh auto;
     }

     .carousel-accordion.owl-carousel .owl-stage {
          display: flex;
     }

     /* .carousel-accordion.owl-carousel {
          padding-left: 20px;
          paddi     ng-right: 20px;
     } */

     .carousel-accordion .owl-item a {
          text-decoration: none;
          color: inherit;
     }

     .accordion_li {
          background: #FFFFFF;
          border-radius: 24px;
     }

     .carousel-accordion .accordion_li .bg-image {
          height: 70vh;
          display: flex;
          max-height: 400px;
          width: 100%;
          position: relative;
          overflow: hidden;
          border-radius: 1rem;
     }

     .carousel-accordion .accordion_li img {
          /* aspect-ratio: 1;
  width: 100%;
  height: 100%; */
          position: absolute;
          top: 50%;
          left: 50%;
          width: inherit;
          transform: translate(-50%, -50%);
          object-fit: cover;
     }

     @media (min-width: 1200px) {
          .carousel-accordion .owl-item {
               padding: 0 var(--xspace);
          }

          .carousel-accordion .accordion_li .bg-image {
               max-height: 600px;
               width: unset;
          }

          .carousel-accordion .accordion_li {
               width: calc((((var(--vw-width)) - (var(--xspace) * 2)) / 5));
          }
     }

     /* owl nav show on  more than  5 slide on desktop */

     .owl-carousel .owl-nav {
          text-align: center;
     }

     .owl-carousel .owl-nav button.owl-prev {
          width: 40px;
          height: 40px;
          border-radius: 100%;
          margin: 0 5px;
          background: #000;
          display: inline-grid;
          place-content: center;
     }

     .owl-carousel .owl-nav button.owl-prev:focus {
          outline: 0;
     }

     .owl-carousel .owl-nav button.owl-next .angle-right,
     .owl-carousel .owl-nav button.owl-prev .angle-left {
          height: 30px;
          width: 30px;
          border-radius: 10px;
          background: #000 url(https://png.pngtree.com/element_our/20190601/ourlarge/pngtree-white-direction-arrow-right-icon-image_1338652.jpg) no-repeat center;
          background-size: 10px auto;
     }

     .owl-carousel .owl-nav button.owl-prev .angle-right.angle-left {
          rotate: 180deg;
     }

     .owl-carousel .owl-nav button.owl-prev .angle-left.angle-left {
          rotate: 180deg;
     }

     .owl-carousel .owl-nav button.owl-next {
          width: 40px;
          height: 40px;
          border-radius: 100%;
          margin: 0 5px;
          background: #000;
          display: inline-grid;
          place-content: center;
     }

     .owl-carousel .owl-nav button.owl-next:focus {
          outline: 0;
     }

}

/* Hide carousel by default */
.mobile-carousel-wrapper {
     display: none;
     margin: 48px 0 20px;
}

.arrow {
     position: absolute;
     content: ' ';
     width: 0;
     height: 0;
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);

     &.left {
          border-right: 6px solid #27282D;
     }

     &.right {
          border-left: 6px solid #27282D;
     }
}

.grid-container {
     display: grid;
     gap: 1rem;
     grid-template-columns: repeat(4, 1fr);
     /* 4 columns on desktop */
     /* padding: 1rem; */
}

.sub-item {
     background: #F6F6F7;
     padding: 28px;
     border-radius: 24px;
     display: flex;
     align-items: center;
     gap: 15px;

     h4 {
          color: #4b4b4b;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 500;
          font-size: 1.65rem;
          line-height: 36px;
     }

     p {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          color: #737171;
          font-size: 20px;
          line-height: 28px;
     }
}



.carousel-container {
     position: relative;
     overflow: hidden;
     width: 100%;
     /* max-width: 1000px; */
     margin: auto;

     .carousel-buttons {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          width: 100%;
     }



     .carousel-buttons button:disabled {
          background: #ccc;
          cursor: not-allowed;
     }
}

.carousel-track {
     display: flex;
     transition: transform 0.5s linear;

     h4 {
          font-family: 'Helvetica Neue', sans-serif;
          font-size: 28px;
          font-weight: 400;
          margin-bottom: 15px;
          line-height: 36px;
     }
}




.checkMark,
.checkMark-x {
     background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/check.svg) no-repeat 0 center;

     font-family: 'Helvetica Neue', sans-serif;
     color: #5E5E5E;
     font-size: 18px;
     line-height: 28px;
     font-weight: 300;
     padding: 8px 8px 8px 30px;
}

.checkMark-x {
     background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/xmark.svg) no-repeat 0 center;

}

.carousel-content {
     width:100%;
}


.carousel-item {
     background: #FFFFFF;
     margin: 5px;
     border-radius: 24px;
     padding: 40px 40px 40px;
     transition: width 0.3s linear;
     flex: 0 0 auto;
     width: 100%;
     box-sizing: border-box;
     /* height: 420px; */
     position: relative;
     display: flex;
     overflow: hidden;

     .animationWrap {
          height:350px;
          img, svg {
               position:absolute;
               width: 400px!important;
               height: 400px!important;
               top:60px;
               left:0px;
               right: 0;
               margin: auto;
          }
     }
     svg {
          position:absolute;
          width: 400px!important;
          height: 400px!important;
          top:60px;
          left:0px;
          right: 0;
          margin: auto;
     }
     #adrefresh-json, #lottie3 {
          img {
               position:absolute;
               width: 400px!important;
               height: 400px!important;
               top:60px;
               left:0px;
          }
     }

     #standardbannerads-json, #lottie6, #interstitialads-json, #lottie4 {
          svg {
               width: 450px !important;
               height: 450px !important;
               left: -18px;
               top: 13px;
          }
     }

     #webpub-headerBidding-json, #lottie7 {
          svg {
               width: 350px !important;
               height: 350px !important;
               left:22px;
               top:89px;
          }
     }

     .animationVideoWrapper {
          width: 300px;
          display: none;
          position: absolute;
          right: 0px;

          lottie-player,
          img {
               width: 300px !important;
          }
     }

     &:hover,
     &.active {
          background: #420CB2;

          li,
          h4 {
               color: #fff;
          }

          .checkMark {
               background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/check-white.svg) no-repeat 0 center;
          }

          .checkMark-x {
               background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/xmark-white.svg) no-repeat 0 center;
          }

          .animationVideoWrapper {
               display: block;
          }
     }
/* 
     ul {
          margin-top: 100px;
          position: absolute;
          bottom: 40px;
     } */
}


.custom-nav,
.carousel-buttons {
     text-align: center;
     margin: 10px 0 0 -10px;
     position: absolute;
     width: 105%;
     top: 50%;
     z-index: 1;
     display: flex;
     justify-content: space-between;
}

.custom-prev,
.custom-next,
.prevBtn,
.nextBtn,
#customCarouselPrev,
#customCarouselNext {
     padding: 6px 12px;
     margin: 0;
     border: 1px solid #27282D;
     color: #27282D;
     border-radius: 4px;
     cursor: pointer;
     position: relative;
     width: 40px;
     height: 40px;
     background: #fff;
     overflow: hidden;

     &::after {
          content: " ";
          width: 100%;
          height: 0%;
          position: absolute;
          background: #6E27FF;
          left: -1px;
          bottom: -2px;
          transition: all 0.1s ease;
          border-radius: 4px;
          border: 1px solid #000000;
     }
}


.prevBtn,
.nextBtn,
#customCarouselPrev,
#customCarouselNext {
     position: absolute;
     top: 50%;
}

.nextBtn {
     right: -10px;
}

.prevBtn {
     left: -10px;
}

#customCarouselNext {
     right: -10px;
     transform: translateY(71%);
}

#customCarouselPrev {
     left: -10px;
     transform: translateY(71%);
}

.custom-prev:hover,
.custom-next:hover,
.prevBtn:hover,
.nextBtn:hover,
#customCarouselPrev:hover,
#customCarouselNext:hover {
     transition: all 0.1s ease;

     &::after {
          height: 100%;
          bottom: -1px;
          border: 1px solid #000000;
     }

     .arrow {
          z-index: 1;

          &.left {
               border-right-color: #fff;
          }

          &.right {
               border-left-color: #fff;
          }
     }
}

.lottie-wrapper {
     position: relative;

     .lottie-player {
          /* opacity: 0; */
          transition: opacity 0.4s ease;
          margin: auto;
     }

     .lottieVideo {
          padding: 0 !important;
          width: 100%;
          height: 400px;

          display: flex;
          align-items: center;
          justify-content: center;
     }
}

.lottie-wrapper {
     position: relative;
}

.preloader {
     border-radius: 8px;
     background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/loader.gif) no-repeat center;
     background-size: 80px;
     position: absolute;
     width: 100%;
     height: 300px;
     left: 0;
     top: 0px;
     padding: 0 !important;
}

.google-certified-section {
     text-align: center;
     padding:60px 0;
     video, img {
          /* width: 100%; */
          margin:auto;
     }
     .desktop-googleVideo {
          width: 768px;
     }
     .mobile-googleVideo {
          width: 350px;
     }
     &.contactus {
          padding:30px 0 0px;
           .desktop-googleVideo {
               width: 85%;
          }
     }
}

.mobile-googleVideo {
     display: none;
}

.contact-us-form {
     form {

          label {
             display: block;
             margin-bottom: 8px;
             font-family: 'Helvetica Neue', sans-serif;
             font-weight: 400;
             line-height: 100%;
             letter-spacing: 0%;
             color: #737171;
             padding-left: 10px;
             font-size: 18px;
         }
         .hs-form-required, .hs-error-msg { 
               color: red; 
               font-weight: 300;
               font-size: 14px;
          }
          .hs-error-msg {
               padding:5px 0;
          }
          .hs-error-msgs {
               color: red; 
               font-weight: 300;
               font-size: 14px;
               .hs-main-font-element {
                    color: red;
                    font-weight: 300; 
                    font-size: 14px;
               }
          }
          input.error, select.error,
          textarea.error {
               display:block;
               border-color:red!important;
          }
          .hs-form-field {
               margin-bottom: 15px;
          }

          .multi-container {
               display:flex;
               label {
                    display:flex;
                    align-items: center;
                    gap:6px;
               }
          }
          input[type="checkbox"] {
               width:auto;
               border: 1.5px solid #DEDEDE !important;
               border-radius: 4px !important;
               -webkit-appearance: none;
               -moz-appearance: none;
               appearance: none;
               position: relative;
               padding: 8px !important;
          }
          input[type="checkbox"]:checked:after {
               position: absolute;
               top: 0;
               left: 0;
               bottom: 0;
               right: 0;
               -webkit-mask-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2016%22%20fill%3D%22%23253342%22%3E%3Cpath%20d%3D%22M1.013%208.11c0-.223.078-.412.234-.568l1.14-1.14c.155-.155.345-.233.568-.233s.413.077.57.233l2.46%202.47%205.492-5.5c.156-.156.346-.234.568-.234.224%200%20.413.077.57.233l1.138%201.14c.156.155.234.345.234.568%200%20.224-.078.414-.234.57l-6.06%206.06-1.14%201.14c-.155.155-.345.233-.568.233s-.413-.078-.57-.234l-1.138-1.14-3.03-3.03c-.156-.156-.234-.346-.234-.57z%22%2F%3E%3C%2Fsvg%3E);
               mask-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2016%22%20fill%3D%22%23253342%22%3E%3Cpath%20d%3D%22M1.013%208.11c0-.223.078-.412.234-.568l1.14-1.14c.155-.155.345-.233.568-.233s.413.077.57.233l2.46%202.47%205.492-5.5c.156-.156.346-.234.568-.234.224%200%20.413.077.57.233l1.138%201.14c.156.155.234.345.234.568%200%20.224-.078.414-.234.57l-6.06%206.06-1.14%201.14c-.155.155-.345.233-.568.233s-.413-.078-.57-.234l-1.138-1.14-3.03-3.03c-.156-.156-.234-.346-.234-.57z%22%2F%3E%3C%2Fsvg%3E);
               -webkit-mask-repeat: no-repeat;
               mask-repeat: no-repeat;
               -webkit-mask-position: center;
               mask-position: center;
               -webkit-mask-size: 80%;
               mask-size: 80%;
               content: "";
               background-color: #000;
          }

          .hs-button {
               border: 0px;
               padding: 12px 24px !important;
               font-family: "IBM Plex Mono", monospace;
               font-weight: 600!important;
               font-size: 16px!important;
               border-radius: 12px!important;
               cursor: pointer;
               background: #27282D;
               color: #fff!important;
               position: relative;
               overflow: hidden;
               text-decoration: none;
               &::after {
                    content: " ";
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    background: #6E27FF;
                    left: 0px;
                    bottom: 0px;
                    transition: all 0.1s ease;
                    border-radius: 12px;
               }
               
          }

          .hs-form-booleancheckbox {
               label {
                    display: flex;
                    justify-items: center;
                    align-items: center;
                    span {
                         line-height: 18px;
                         font-size: 14px;
                         margin-left: 10px;
                         font-weight: 300;
                    }
                    input {
                         width: auto;
                    }
               }
          }
     }
     [data-hsfc-id=Renderer] {
          .hsfc-Step .hsfc-Step__Content {
               padding:0px;
          }

          .hsfc-RadioFieldGroup__Options, .hsfc-CheckboxFieldGroup__Options {
               display: flex;
          }

          .hsfc-RadioInput, .hsfc-CheckboxInput {
               width:auto;
               padding: 10px !important;
          }
          .hsfc-Step__Banner:empty {
               display:none;
          }

          .hsfc-NavigationRow {
               margin-top:10px!important;
          }
          .hsfc-Button {
               margin-top: 10px;
               border: 0px;
               padding: 10px 20px; 
               border-radius: 5px;
               font-size: 18px;
               background-color: #1285c4;
               color: #fff;
               cursor: pointer;
               background-image:none;
               width: 100%;
               transition: background 0.3s;
               font-family: "IBM Plex Mono", monospace;
               &:hover {
                    background-color: #1285c4!important;
                    background-image:none!important;
               }
          }

          .hsfc-RichText {
               p {
                    font-size: 24px!important;
                    line-height: 156%!important;
                    padding: 100px 0!important;
               }
          }

     }
}


.blog-section {
     background: #ECECED;
     padding: 60px;
     border-radius: 24px;
     display: flex;
     gap: 20px;
     box-sizing: border-box;

     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 40px;
     }

     h3 {
          color: #737171;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          font-size: 20px;
          line-height: 28px;
          margin: 24px 0 40px;
     }

     .blog-left {
          width: 280px;
     }

     .carousel-item {
          height: auto;

          &:hover {

               background: #fff !important;
          }
     }

     .carousel-buttons {
          position: relative;
          justify-content: flex-end;
          gap: 20px;
          margin: 20px 0 0;

          button {
               position: relative;
               left: 0;
               right: 0;
          }
     }

     .blog-card {
          width: 100%;
          display: flex;
          flex-direction: column;
          /* border: 1px solid #ddd; */
          border-radius: 24px;
          overflow: hidden;
          /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
          font-family: sans-serif;
          background: white;
          cursor: pointer;
     }

     .blog-image {
          width: 100%;
          /* height: 180px; */
          object-fit: cover;
     }

     .blog-content {
          padding: 24px;
          display: flex;
          flex-direction: column;
          gap: 10px;
     }

     .meta {

          display: flex;
          align-items: center;
          gap: 6px;

          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 400;
          font-size: 16px;
          color: #737171;

          .author, .dot {
               display:none;
          }
     }

     .blog-title {
          /* font-family: 'Helvetica Neue', sans-serif; */
          font-weight: 600;
          font-size: 18px;
          line-height: 26px;
          /* letter-spacing: -1px; */
          max-height: 2.8em;
          /* ~2 lines */
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 10px;
     }

     .tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin: 0 0 38px;
     }

     .tag {
          font-size: 0.75rem;
          background-color: #f0f0f0;
          color: #444;
          padding: 4px 8px;
          border-radius: 999px;
     }

     .read-more {
          cursor: pointer;
          transition: background 0.2s ease;
          font-family: "IBM Plex Mono", monospace;
          font-size: 16px;
          font-weight: 600;
          display: inline-block;
          color: #27282D;
          text-decoration: none;
     }

     .read-more:hover {
          text-decoration: underline;
     }

}

.tabs {

     .tab-linksWrapper {
          display: flex;
          padding: 6px;
          gap: 5px;
          justify-content: center;
          margin: 52px 0 30px;
     }

     .tab-links {
          list-style: none;
          padding: 6px;
          display: flex;
          background: #fff;
          gap: 6px;
          justify-content: center;
          border-radius: 16px;
          box-shadow: 0px 4px 22px 0px #8C8C8C33;

          a {
               padding: 16px 44px;
               display: block;

               color: #000;
               text-decoration: none;
               border-radius: 16px;
               font-size: 18px;

               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 500;

          }

          li.active a {
               background: #27282D;
               color: white;
               font-weight: 700;
          }
     }


     .tab-content .tab {
          display: none;
     }

     .tab-content .tab.active {
          display: block;
     }
}

.blog-carausel {
     width: calc(100% - 300px);

     .carousel-item {
          padding: 0px;
          background: #fff !important;
     }
}

.publisher-network-logos {
     margin: 60px 0;

     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 40px;
          text-align: center;
          margin-bottom: 40px;
     }
}


@keyframes ticker-kf {
     0% {
          transform: translateX(0);
     }

     100% {
          /* 10rem for each logo x 6 logos total = -60rem */
          transform: translateX(-66rem);
     }
}

.ticker-wrap {
     overflow: hidden;
     position: relative;

     &:hover {
          .image-ticker {
               animation-play-state: paused;
          }
     }
}

.ticker-overlay {
     position: absolute;
     pointer-events: none;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0) 93%, rgba(255, 255, 255, 1) 100%);
     z-index: 1;
}

/* .image-ticker {
     display: flex;
     align-items: center;
     margin-left: -1rem;
     margin-right: -1rem;
     animation: ticker-kf 15s linear infinite;
}

.ticker-single {
     width: 8rem;
     flex: none;
     margin: 0 1.5rem;
     align-self: center;
     max-width: 100%;
     height: auto;
     filter: grayscale(1);
     transition: filter .33s ease-in-out;

     &:hover {
          filter: grayscale(0);
     }
} */

.ticker-single {
     width: 186px;
     height: 82px;
     background-image: url('https://cdn-img-ys.affinitymatrix.com/images/logo-sprite-new.png');
     /* Your sprite path */
     background-repeat: no-repeat;
     flex-shrink: 0;
     margin: 0 10px;
     filter: grayscale(1);
     transition: filter .20s ease-in-out;

     &:hover {
          filter: grayscale(0);
     }
}
/* Positions for 39 logos */
.logo-1  { background-position:    0px 0; }
.logo-2  { background-position: -190px 0; }
.logo-3  { background-position: -380px 0; }
.logo-4  { background-position: -570px 0; }
.logo-5  { background-position: -760px 0; }
.logo-6  { background-position: -950px 0; }
.logo-7  { background-position: -1140px 0; }
.logo-8  { background-position: -1330px 0; }
.logo-9  { background-position: -1520px 0; }
.logo-10 { background-position: -1710px 0; }
.logo-11 { background-position: -1900px 0; }
.logo-12 { background-position: -2090px 0; }
.logo-13 { background-position: -2280px 0; }
.logo-14 { background-position: -2468px 0; }
.logo-15 { background-position: -2660px 0; }
.logo-16 { background-position: -2850px 0; }
.logo-17 { background-position: -3040px 0; }
.logo-18 { background-position: -3230px 0; }
.logo-19 { background-position: -3420px 0; }
.logo-20 { background-position: -3610px 0; }
.logo-21 { background-position: -3796px 0; }
.logo-22 { background-position: -3990px 0; }
.logo-23 { background-position: -4180px 0; }
.logo-24 { background-position: -4370px 0; }
.logo-25 { background-position: -4560px 0; }
.logo-26 { background-position: -4750px 0; }
.logo-27 { background-position: -4940px 0; }
.logo-28 { background-position: -5130px 0; }
.logo-29 { background-position: -5320px 0; }
.logo-30 { background-position: -5510px 0; }
.logo-31 { background-position: -5700px 0; }
.logo-32 { background-position: -5890px 0; }
.logo-33 { background-position: -6080px 0; }
.logo-34 { background-position: -6270px 0; }
.logo-35 { background-position: -6460px 0; }
.logo-36 { background-position: -6650px 0; }
.logo-37 { background-position: -6840px 0; }
.logo-38 { background-position: -7030px 0; }
.logo-39 { background-position: -7220px 0; }

.image-ticker {
     width:14796px;
     animation: scrollTicker 120s linear forwards;
     display: flex;
     white-space: nowrap;
     transform: translateX(0);


}

@keyframes scrollTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.start-earning-section {
     background: #ECECED;
     padding: 60px;
     border-radius: 24px;
     /* display: flex; */
     gap: 48px;

     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 40px;
          line-height: 46px;
          text-align: center;
     }

     h3 {
          color: #737171;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          font-size: 20px;
          line-height: 28px;
          margin: 20px 0;
          text-align: center;
     }

     h4 {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 500;
          font-size: 28px;
          line-height: 32px;
          color: #202020;
          text-align: center;
     }

     /* div.sec {
          width: 50%;
     } */

     .exploreNow-wrapper {
          margin:30px 0 0;
          text-align: center;
     }

}
.steps {
     display: flex;
     gap: 2rem;
     width: 100%;
     margin: 50px 0 0;

     .step {
          width: 33%;
     }
}



.step-number {
     text-align: left;
     position: relative;
     display: flex;
    justify-content: flex-end;

     &::before {
          content: " ";
          height: 1px;
          position: absolute;
          left: 0px;
          bottom: 0%;
          transform: translateY(-50%);
          /* background: #BDBDBD; */
          border-top: 2px dotted #BDBDBD;
          width: calc(100% - 40px);

     }

     span {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 700;
          font-size: 16px;
          background: #865FFF;
          color: #fff;
          border-radius: 12px;
          display: inline-block;
          padding: 8px;
     }
}

.step-label {
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 300;
     font-size: 16px;
     line-height: 26.7px;
     color: #4b4b4b;
     margin: 15px 0;


}

footer {
     display: flex;
     gap: 20px;
     margin: 120px 0 40px;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 400;
     font-size: 16px;
     line-height: 21.4px;
     letter-spacing: 3%;
     color: #4b4b4b;

     .box {
          box-shadow: 0px 4px 22px 0px #8C8C8C38;
          background: #fff;
          border-radius: 24px;
          padding: 32px 40px;
          box-sizing: border-box;
     }

     .footer-address {
          width: 450px;
     }

     .footer-nav {
          width: calc(100% - 460px);
     }

     .footer-logo {
          margin: 0 0 60px;
     }

     p {
          margin: 12px 0 0;
     }

     .address {
          margin: 20px 0 0;
     }

     a {
          display: block;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 400;
          font-size: 16px;
          line-height: 21.4px;
          letter-spacing: 3%;
          color: #4b4b4b;
          text-decoration: none;
          padding: 8px 0;

          &:hover {
               text-decoration: underline;
          }
     }

     .footer-navWrap {
          display: flex;
          gap: 10px;
          justify-content: space-between;
     }

     .footer-nav-item {
          display: flex;
          gap: 10px;
          width: calc(100% - 190px);
          justify-content: space-between;

          .sol-res-col {
               display: flex;
               gap: 10px;
               width: calc(100% - 206px);
               justify-content: space-between;
          }
     }

     .social-col {
          width: 188px;

          .social-icons {
               display: flex;
               align-items: center;
               gap: 10px;
          }
     }

     .company-col {
          width: 150px;
     }

     h2 {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 700;
          font-size: 18px;
          line-height: 100%;
          letter-spacing: -2%;
          color: #202020;
          margin-bottom: 20px;
     }

     .write-us-col {
          display: flex;
          align-items: center;
          gap: 30px;
          margin: 14px 0;

          h2 {
               margin: 0;
          }
     }

     .copyright {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 400;
          font-size: 14px;
          line-height: 100%;
          letter-spacing: 0%;
          color: #737171;
          text-decoration: none;
          display: flex;
          justify-content: space-between;

          #copyright {
               margin: 0px;
          }

          a, a#ot-sdk-btn.ot-sdk-show-settings  {
               display: inline;
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 300;
               font-size: 14px;
               line-height: 100%;
               letter-spacing: 0%;
               color: #737171;
               border:0px;
               padding:0px;
               cursor: pointer;
               &:hover {
                    text-decoration: underline;
                    background:none;
               }
          }

          span {
               color: #737171;
               margin: 0 10px;
               display: inline-block;
          }
     }
}

.c-contentWrapper {
     position: relative;
}

.request-demo-btn {
     margin: 15px 0;
}

.premium-advertising-formats {
     .box-content {
          padding: 40px;
          margin: 20px 0;
     }
}

.box-content {
     .vertialTabs {

          .lottie-wrapper,
          .preloader {
               position: static;
               transform: none;
          }

          .features {
               gap: 10px;

               div.items {
                    width: 49%;
                    font-family: 'Helvetica Neue', sans-serif;
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 21.4px;
                    background: none;
                    padding: 10px;
               }
          }
     }
}

.vertialTabs {
     display: flex;

     .custom-scrollbar {
          display: flex;
          align-items: stretch;
     }

     /* Vertical Tabs */
     .vertical-tabs {
          width: 200px;
          border-right: 1px solid #ccc;
          display: flex;
          flex-direction: column;
          list-style: none;
          padding: 6px;
          background: #fff;
          box-shadow: 0px 4px 22px 0px #8C8C8C33;
          gap: 12px;
          border-radius: 16px;

          button {
               width: 100%;
               cursor: pointer;
               display: block;
               color: #000;
               padding: 16px 20px;
               text-decoration: none;
               border-radius: 16px;
               font-size: 18px;
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 300;
               border: 0px;
               background: transparent;
               text-align: left;

               &.active {
                    background: #27282D;
                    color: white;
                    font-weight: 700;
               }
          }
     }




     /* Right Content Area */
     .content-area {
          flex: 1;
          padding: 0 0px 20px 20px;
     }

     /* Horizontal Tabs */
     .horizontal-tabs {

          display: flex;
          list-style: none;
          padding: 6px;
          background: #fff;
          box-shadow: 0px 4px 22px 0px #8C8C8C33;
          gap: 12px;
          border-radius: 16px;
          width: 400px;
          margin: 0 auto 10px;
          position: relative;
          z-index: 1;

          button {
               padding: 16px 20px;
               text-decoration: none;
               border-radius: 16px;
               font-size: 18px;
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 300;
               border: 0px;
               background: transparent;
               cursor: pointer;
               width: 50%;
               display: flex;
               align-items: center;
               justify-content: center;

               &.active {
                    background: #27282D;
                    color: white;
                    font-weight: 700;

                    .desktopIcon {
                         background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/desktop-icon.png) no-repeat;
                    }

                    .mobileIcon {
                         background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/mobile-b.png) no-repeat;
                    }
               }
          }

     }


     .tab-content {
          display: none;
     }

     .tab-content.active {
          display: block;
     }

     .lottieVideo {

          height: 400px;
          position: relative;
          &.pam-1 {
               svg {
                    height:650px!important;
               }
          }
          &.pam-2 {
               svg {
                    height:706px!important;
               }
          }
          &.pam-3 {
               svg {
                    height:756px!important;
               }
          }
          &.pam-4 {
               svg {
                    height:702px!important;
               }
          }
          &.pam-5 {
               svg {
                    height:702px!important;
               }
          }
          &.pm-Rewarded-Ads {
               svg {
                    height:558px!important;
               }
          }
          &.pm-Playable-Ads {
               svg {
                    height:514px!important;
               }
          }
          &.pm-Native-Ads {
               svg {
                    height:644px!important;
               }
          }
          &.pam-7 {
               svg {
                    height:702px!important;
               }
          }

          

          
     }
}

.web-publisherContent {
     .vertialTabs {
          .lottie-wrapper {
               position:relative;
          }
          .lottieVideo {
               svg {
                    height: 500px !important;
                    position: absolute;
               }
               &#pam-1-json {
                    svg {
                         height: 550px !important;
                    }
               }
               &#paw-2-json {
                    svg {
                         height: 480px !important;
                    }
               }

               &#pam-2-json {
                    svg {
                         height: 600px !important;
                    }
               }

                &#paw-3-json {
                    svg {
                         height: 460px !important;
                    }
               }

               &#pam-3-json {
                    svg {
                         height: 640px !important;
                    }
               }

               &#paw-6-json {
                    svg {
                         height: 535px !important;
                    }
               }

               &#pam-6-json {
                    svg {
                         height: 610px !important;
                    }
               }
          }
     }
}

.preloader {
     display: none;
}

.desktopIcon {
     background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/desktop-icon-b.png) no-repeat;
     width: 28px;
     height: 28px;
     display: none;
}

.mobileIcon {
     background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/mobile.png) no-repeat;
     width: 28px;
     height: 28px;
     display: none;
}


/* Ready to maximize */
.ready-to-maximize {
     .box-content {
          padding: 40px;
          display: flex;
          gap: 10px;
          align-items: center;
          justify-content: center;

          .left-col {
               width: calc(100% - 225px);
          }

          h2,
          h3 {
               text-align: left;
          }
     }
}


/* Contact Us Page */
.contact-us-form {
     position: sticky;
     float: right;
     top: 0;
     width: 440px;
     background: #fff;
     box-shadow: 0px 4px 22px 0px #8C8C8C33;
     padding: 26px 48px;
     border-radius: 24px;
     margin: 20px 20px 0 0;
     min-height: calc(100vh - 300px);

     .form-title {

          margin-bottom: 20px;
          color: #2c3e50;
          text-align: left;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 500;
          font-style: Medium;
          font-size: 28px;
          line-height: 38px;

          color: #000000;

     }

     .form-group {
          margin-bottom: 20px;
     }

     label {
          display: block;
          margin-bottom: 8px;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 400;
          line-height: 100%;
          letter-spacing: 0%;
          color: #737171;
          padding-left: 10px;
          font-size: 18px;
          .mandatory {
               color:red;
          }
     }

     
     

     input,
     select,
     textarea {
          width: 100%;
          padding: 10px 12px!important;
          border: 1.5px solid #DEDEDE!important;
          border-radius: 12px!important;
          font-family: 'Helvetica Neue', sans-serif;
          font-size: 18px!important;
          color: #737171!important;
          font-weight: 300!important;
          box-sizing: border-box;

     }

     .checkbox-group {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          gap: 15px;
          padding-left: 10px;

          input {
               width: auto;
               margin-right: 10px;
          }
     }


     .submit-btn {
          cursor: pointer;
          width: 100%;
          transition: background 0.3s;
          font-family: "IBM Plex Mono", monospace;
     }

     select {
          background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
          -moz-appearance: none;
          -webkit-appearance: none;
          appearance: none;
          outline-width: 0;
     }


     .labelTitle {
          color: #000000;
          display: block;
          margin: 0 0 20px 0;
     }

     .termsandcondition {
          label {
               color: #494949;
               font-weight: 500;
          }
     }
     .captchaWrapper {
          gap:20px;
     }

fieldset { 
  /* border: 1px solid #ccc;  */
  /* padding: 15px;  */
  /* max-width: 345px; */
  background-color: #fff;
  border-radius: 5px;
}

.CaptchaWrap { 
     position: relative; 
     display: flex;
     align-items: center;
     gap:10px;
}
.CaptchaTxtField { 
  /* border-radius: 5px;  */
  /* border: 1px solid #ccc;  */
  display: block;  
  box-sizing: border-box;
}

#UserCaptchaCode { 
  /* padding: 15px 10px;  */
  outline: none; 
  /* font-size: 18px;  */
  /* font-weight: normal;  */
  /* font-family: 'Open Sans', sans-serif; */
  width: 200px;
}
#CaptchaImageCode { 
  text-align:center;
  /* margin-top: 15px; */
  padding: 0px 0;
  width: 150px;
  overflow: hidden;
}

.capcode { 
  font-size: 46px; 
  display: block; 
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; 
  cursor: default;
  letter-spacing: 1px;
  color: #ccc;
  font-family: 'Roboto Slab', serif;
  font-weight: 100;
  border-radius: 12px;
  font-style: italic;
}

.ReloadBtn { 
  background:url('https://cdn3.iconfinder.com/data/icons/basic-interface/100/update-64.png') left top no-repeat;   
  background-size : 100%;
  width: 32px; 
  height: 32px;
  /* border: 0px; outline none; */
  /* position: absolute;  */
  /* bottom: 30px; */
  /* left : 310px; */
  /* outline: none; */
  cursor: pointer; /**/
}
.btnSubmit {
  margin-top: 15px;
  border: 0px;
  padding: 10px 20px; 
  border-radius: 5px;
  font-size: 18px;
  background-color: #1285c4;
  color: #fff;
  cursor: pointer;
}

.error { 
  color: red; 
  font-size: 12px; 
  display: none; 
}
.success {
  color: green;
  font-size: 18px;
  margin-bottom: 15px;
  display: none;
}
}

/* The container */
.customCheckbox {
     position: relative;
     padding-left: 28px !important;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     line-height: 20px !important;

     /* Hide the browser's default checkbox */
     input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          height: 0;
          width: 0;
     }

     /* Create a custom checkbox */
     .checkmark {
          position: absolute;
          top: 0;
          left: 0;
          height: 17px;
          width: 17px;
          background-color: #fff;
          border: 1px solid #000;
          border-radius: 4px;
     }

     /* On mouse-over, add a grey background color */
     &:hover {
          input~.checkmark {
               background-color: #ccc;
               border-radius: 4px;
          }
     }

     /* When the checkbox is checked, add a blue background */
     input:checked~.checkmark {
          background-color: #000;
          border-color: #000;
          border-radius: 4px;
     }

     /* Create the checkmark/indicator (hidden when not checked) */
     .checkmark:after {
          content: "";
          position: absolute;
          display: none;
     }

     /* Show the checkmark when checked */
     input:checked~.checkmark:after {
          display: block;
     }

     /* Style the checkmark/indicator */
     .checkmark:after {
          left: 6px;
          top: 3px;
          width: 4px;
          height: 7px;
          border: solid white;
          border-width: 0 2px 2px 0;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
     }
}


.contactus-left {
     /* height:5000px; */
     margin-top: 820px;
     /* background:red; */
     width: calc(100% - 604px);
     text-align: left;
     z-index: 1;
    position: relative;

     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 52px;
          text-transform: capitalize;
          line-height: 63.8px;
          transition: all 0.2s linear;
     }

     p {
          color: #737171;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          font-size: 20px;
          line-height: 28px;
          margin: 16px 0 40px 0;
          transition: all 0.2s linear;
     }

     .publisher-network-logos {
          h2 {
               font-size: 40px;
               line-height: normal;
          }
     }

     .box-content {
          padding: 40px;
          background: #ECECED;
          border-radius: 24px;
          position: relative;
          margin-bottom: 20px;

          .box-left {
               width: calc(100% - 280px);
          }

          svg {
               width: 277px;
               height: 201px;
          }

          h3 {
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 500;
               font-style: Medium;
               font-size: 28px;
               line-height: 38px;
               vertical-align: middle;
               color: #202020;
          }

          .text-tags {
               flex-wrap: wrap;
               padding: 32px 0 0 0;
               gap: 16px;
          }
     }
}

.meet-family {
     &.home-meet-family-sec {
          margin:60px 0 0;
          h3, p {
               text-align: center;
               margin:0 0 10px;
          }
     }
     &.box-content {
          padding: 40px;
          background: #ECECED;
          border-radius: 24px;
          position: relative;
          margin-bottom: 20px;
          h3 {
               gap: 10px;
               font-weight: 700;
               font-size: 32px;
               color: #494949;
          }
          
          img,
          svg {
               /* width: 150px; */
               height: 40px;
               vertical-align: middle;
               margin: 0 0 0 4px!important;
               top: -2px;
               position: relative;
          }
          h3 {
               svg {
                    width: 150px;
               }
          }
          .network-wrapper {
               display:flex;
               justify-content: space-between;
               align-items: center;
               gap:20px;
               .columns {
                    width:48%;
               }
               
               .logo-box {
                    height: auto;
                    padding:40px 20px;
                    width:auto;
                    svg {
                         height:60px;
                    }
               }
          }

          p {
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 300;
               font-size: 20px;
               line-height: 28px;
               color: #5E5E5E;
          }

          h4 {
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 400;
               font-size: 28px;
               line-height: 38px;
               color: #494949;
               margin: 15px 0;
          }
     }
}

.logo-box {
     background: #fff;
     padding: 40px;
     border-radius: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 40px;
     flex-wrap: wrap;

     img {
          height: 30px;
     }
}

.stickyForm {
     width: 100%;
     position: absolute;
     height: calc(100% - 599px);
     left: 0px;
}

@media only screen and (max-width: 1260px) {
     footer {
          .footer-nav-item {
               justify-content: normal;
          }
     }

     .sol-res-col {
          flex-direction: column;
          width: auto!important;
     }
}

@media only screen and (max-width: 1200px) {
     /* .network-wrapper {
          flex-direction: column;
     } */
     .meet-family {
          &.box-content {
               & .network-wrapper {
                    align-items: flex-start;
                    .columns {
                         width: auto;
                    }
                    .logo-box {
                         height:auto;
                         svg {
                              width:auto;
                              height:40px;
                         }
                    }
               }
          }
     }
}

.supportedPlatform {
     padding: 60px 80px;
     display: flex;
     justify-content: space-between;
     align-items: center;

     h2 {
          font-family: 'Helvetica Neue';
          font-weight: 700;
          font-size: 24px;
          color: #202020;
          padding: 10px 0;
     }

     p {
          font-family: 'Helvetica Neue';
          font-weight: 300;
          font-size: 20px;
          line-height: 28px;
          color: #737171;
     }

     img {
          margin-right: 60px;

          &:last-child {
               margin-right: 0px;
          }
     }
}

.section {
     &.increase-revenue-with-our-app {
          margin-top: 60px;
     }
}


.aboutus-section {
     .box-content {
          text-align: left;
          padding: 40px;
          h2 {
               font-family: "IBM Plex Mono", monospace;
               font-weight: 700;
               font-size: 34px;
               text-align: left;
               margin:0 0 15px 0;
          }
          p {
               font-family: 'Helvetica Neue';
               font-weight: 300;
               font-size: 20px;
               color: #737171;
               margin: 15px 0;
               line-height: 36px;
               padding:0px;
          }
     }
}

.map-section {
     position: relative;
     justify-content: space-between;
     /* height:400px; */
     gap:20px;
     .animationWrap {
          position: absolute;
     }
     svg {
          height:22px;
     }

     .location-map {
          width:50%;
          img {
               width:100%;
          }
     }
     
     .location-map-content {
          position: relative;
          z-index: 1;
          width:45%;
          h3 {
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 700;
               font-style: Bold;
               font-size: 24px;
               margin-bottom:40px;
          }
          ul {
               margin-bottom: 15px;
               li {
                    display:flex;
                    align-items: center;
                    gap:10px;

                    font-family: 'Helvetica Neue', sans-serif;
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 100%;
                    letter-spacing: 0%;
                    color: #4D4D4D;
                    line-height:22px;
                    padding:0 0 20px 0;
               }
          }
          .grid-container {
               /* grid-template-columns: repeat(3, 1fr); */
               /* grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); see notes below */
               display: flex;
               flex-wrap: wrap;
               gap: 10px;
               justify-content: center;
               .sub-item {
                    flex-direction: column;
                    padding: 20px;
                    width: 170px;
                    box-sizing: border-box;
                    svg {
                         height:32px;
                    }
                    h4 {
                         font-size: 18px;
                         text-align: center;
                         line-height: 32px;
                    }
                    p {
                         font-size: 14px;
                         text-align: center;
                    }
               }
          }
     }
}

.terms {
     min-height:300px;
     display: flex;
     align-items: center;
     .banner-text {
          position:relative!important;
          width:90%;
          text-align: center;
          right: 0;
          left: 0;
          margin:auto;
          /* top: 42px;
          transform:translateY(0%); */
          bottom: auto;
          z-index:1;

     }
     .desktop-banner, .mobile-banner {
          position: absolute;
          height: 100%;
          bottom: 0px;
          margin: auto;
          left: 0;
          right: 0;
          text-align: center;
          video {
               height:100%;
          }
     }

     .mobile-banner {
          video {
               object-fit: cover;
          }
     }
}

.terms-section {
     .box-content {
          text-align: left;
          padding: 40px;
          h2 {
               font-family: 'Helvetica Neue';
               font-weight: 500;
               font-size: 28px;
               text-align: left;
               margin:0 0 15px 0;
               line-height: 38px;
               color: #202020;
          }
          p {
               padding: 0 0 10px;
          }
          p, li {
               font-family: 'Helvetica Neue';
               font-weight: 300;
               font-size: 20px;
               line-height: 32px;
               letter-spacing: 0%;
               color: #737171;
               margin:0 0 15px 0;
          }
          b, .sectionHeading {
               display:block;
               font-weight: 500;
               color: #202020;
               margin-bottom: 10px;
          }
          a {
               color: #6E27FF;
               text-decoration: none;
               &:hover {
                    text-decoration: underline;
               }
          }
          #ot-sdk-btn.ot-sdk-show-settings {
               color: #6E27FF;
               border: 0px;
               background: transparent;
               cursor: pointer;
               padding: 0px;
               font-family: 'Helvetica Neue';
               font-weight: 400;
               font-size: 18px;
               line-height: 32px;
               &:hover {
                    text-decoration: underline;
               }
          }

          ol {
               font-family: 'Helvetica Neue';
               font-weight: 400;
               font-size: 18px;
               line-height: 26.7px;
               color: #737171;
               li {
                    margin: 0 0 0 25px;
                    list-style-type: lower-alpha;
                    margin-bottom: 10px;
                    &::marker {
                         color: #202020;
                         font-weight: 500;
                    }
               }
          }

          ul {
               font-family: 'Helvetica Neue';
               font-weight: 400;
               font-size: 18px;
               line-height: 26.7px;
               color: #737171;
               li {
                    margin: 0 0 0 25px;
                    list-style-type: disc;
                    margin-bottom: 10px;
                    &::marker {
                         color: #202020;
                         font-weight: 500;
                    }
               }
               ul {
                    li {
                         list-style-type: circle;
                    }
               }
          }

          .tableData {
               margin:0 0 15px 0;
          }
         
          .tableData th, .tableData td {
               border:1px solid #000!important;
               padding:10px;
               vertical-align: top;
               width:50%;
               font-family: 'Helvetica Neue';
               font-weight: 400;
               font-size: 18px;
               line-height: 26.7px;
               color: #737171;
          }
          .tableData th {
               color: #202020;
          }
          .tableData th:first-child, .tableData td:first-child {
               width:25%;
               color: #202020;
          }
     }
}

.faq-section {
     margin:100px 0 0;
     a {
          color: #6E27FF;
          text-decoration: none;
          &:hover {
               text-decoration: underline;
          }
     }
     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 40px;
          line-height: 100%;
          letter-spacing: -2%;
          text-transform: capitalize;
          color: #4D4D4D;

     }

    

     .answer, .subanswer {
          display: none;
          /* padding: 10px; */
          /* margin-left: 20px; */
          background: #F6F6F7;
     }

     .question, .subquestion {
          cursor: pointer;
          font-weight: bold;
          

          padding: 24px 30px;
          cursor: pointer;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 400;
          font-size: 20px;
          letter-spacing: -2%;

         
          border-radius: 16px;
          background:#F6F6F7;
     }

     .question {
          font-weight: 700;
          font-style: Bold;
          position:relative;
          margin-top: 15px;
          &::after {
               content: ' ';
               position: absolute;
               right: 20px;
               /* font-size: 20px; */
               /* transition: all 0.1s; */

               width: 0; 
               height: 0; 
               border-left: 5px solid transparent;
               border-right: 5px solid transparent;
               
               border-top: 5px solid black;
               top: 50%;
               transform: translateY(-50%);
          }
          &.active {
               &::after {
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    
                    border-bottom: 5px solid black;
                    border-top: 0px solid black;
               }
          }
     }

     .subquestion {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 700;
          font-style: Bold;
          font-size: 18px;
          letter-spacing: -2%;
          color: #4D4D4D;
          padding: 24px 30px;
          position: relative;
          &::after {
               content: ' ';
               position: absolute;
               right: 20px;
               /* font-size: 20px; */
               /* transition: all 0.1s; */

               width: 0; 
               height: 0; 
               border-left: 5px solid transparent;
               border-right: 5px solid transparent;
               
               border-top: 5px solid black;
          }

          &.active {
               &::after {
                    /* content: '-'; */
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    
                    border-bottom: 5px solid black;
                    border-top: 0px solid black;
               }
          }

     }

     .subanswer {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          font-size: 18px;
          color:#737171;
          line-height: 26px;
          padding: 0 30px 30px;

          ol {
               li {
                    list-style-type: auto;
                    margin-left: 40px;
                    padding:10px 0px 0px;
                    ol {
                         margin-top:10px;
                    }
                    li {
                         list-style-type: upper-alpha;
                    }
               }
          }

          ul {
               li {
                    margin-left: 40px;
                    padding:10px 0px 0px;
               }
          }

     }

     .script-img {
          text-align: center;
          padding:24px 0;
     }
     .answer {
          margin:0px;
          p {
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 300;
               font-size: 18px;
               color:#737171;
               line-height: 26px;
               padding: 24px 30px;
          }
     }

     .question.active, .subquestion.active {
          background-color: #F6F6F7;
          border-radius: 16px 16px 0 0;
     }

}


/* Revenue Calculator */
.revenue-calculator-section {
     background: #F7F7F7;
     padding: 40px;
     border-radius: 24px;
     box-sizing: border-box;
     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 52px;
          text-align: center;
          line-height: 64px;
     }
     p {
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          font-size: 20px;
          line-height: 28px;
          text-align: center;
          color: #737171;
          margin:15px 0;
          
     }
     .metrics-wrapper {
          display:flex;
          gap:20px;
          justify-content: space-between;
          margin:60px 0 0;
          .metricsForm {
               width:387px;
               background:#ECECED;
               border-radius: 24px;
               padding:52px 48px;
               box-sizing: border-box;
          }
          .metricsChart {
               width: calc(100% - 390px);
               .chart-section {
                    background:#ECECED;
                    border-radius: 24px;
                    padding:28px;
                    box-sizing: border-box;
                    margin-bottom:20px;
               }
          }

          h3 {
               font-family: 'Helvetica Neue', sans-serif;
               font-weight: 500;
               font-size: 26px;
               line-height: 100%;
               text-align: justify;
               color: #202020;
          }

          .revenue-container {
               margin:40px 0 0;
          }
          .chart-footer {
               display:flex;
               justify-content: space-between;
               gap: 20px;
               margin: 25px 0 0;
               div {
                    font-family: "Helvetica Neue";
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 21.4px;
                    color: #737171;
               }
               h3 {
                    font-family: "Helvetica Neue";
                    font-weight: 700;
                    font-size: 24px;
                    color: #575656;
                    padding:8px 0;
                    .greencolor {
                         color: #279D31;
                    }

               }
          }
          .getintouch-section {
               display: flex;
               justify-content: space-between;
               gap: 30px;
               align-items: center;
               box-sizing: border-box;
               margin-bottom:0px!important;
               h3 {
                    font-family: "Helvetica Neue";
                    font-weight: 700;
                    font-size: 32px;

                    text-align: left;
                    line-height: 36px;
                    span {
                         color:#EC5844;
                    }
               }
               p {
                    font-family: "Helvetica Neue";
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 26px;
                    text-align: left;
                    color: #5E5E5E;
               }
               .content {
                    width:70%
               }
               .getintouch-btn {
                    width:210px;
               }
          }
     }

     form {
          margin:33px 0 0;
     }

     .form-group {
          margin-bottom: 20px;
     }

     label {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          font-family: 'Helvetica Neue', sans-serif;
          font-weight: 300;
          color: #737171;
          padding-left: 10px;
          font-size: 14px;
          gap:5px;
          
          .mandatory {
               color:red;
          }
     }

     input,
     select,
     textarea {
          width: 100%;
          padding: 12px 16px;
          border: 1.5px solid #DEDEDE;
          border-radius: 12px;
          font-family: 'Helvetica Neue', sans-serif;
          font-size: 14px;
          color: #989898;
          font-weight: 300;
          box-sizing: border-box;

     }

     .checkbox-group {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          gap: 15px;
          padding-left: 10px;

          input {
               width: auto;
               margin-right: 10px;
          }
     }


     .submit-btn {
          cursor: pointer;
          width: 100%;
          transition: background 0.3s;
          font-family: "IBM Plex Mono", monospace;
     }

     select {
          background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
          -moz-appearance: none;
          -webkit-appearance: none;
          appearance: none;
          outline-width: 0;
     }
}

.how-it-works-section {
     margin:60px 0;
     h2 {
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 40px;
          text-align: center;
          line-height: 50px;
          width:60%;
          margin:auto;
          text-transform: capitalize;
     }

     .how-it-works-content {
          display: flex;
          justify-content: space-between;
          gap: 15px;
          margin:48px 0 0 0;
          h3 {
               font-family: "Helvetica Neue";
               font-weight: 700;
               font-size: 32px;
               color: #202020;
               margin-bottom: 48px;;
          }
          .content {
               padding:32px 32px 32px 0;
               width: calc(100% - 420px);
               h4 {
                    font-family: Helvetica Neue;
                    font-weight: 500;
                    font-size: 28px;
                    color: #202020;
                    margin-bottom: 30px;
                    line-height: 40px;
               }
               .steps {
                    margin:0px;
               }
               .step-number {
                    span {
                         background:#D5C8FE;
                         color: #27282D;
                    }
               }
          }

          .understanding-ad-unit {
               background:#fff;
               box-shadow: 0px 4px 22px 0px #8C8C8C33;
               padding:32px;
               border-radius: 24px;
               margin-top:52px;
               div {
                    display: flex;
                    gap: 50px;
               }
               h5 {
                    font-family: "Helvetica Neue";
                    font-weight: 700;
                    font-size: 16px;
                    color: #494949;
                    margin-bottom:15px;
               }
               ul {
                    margin:10px 0;
               }
               li {
                    font-family: 'Helvetica Neue', sans-serif;
                    color: #5E5E5E;
                    font-size: 16px;
                    line-height: 28px;
                    font-weight: 300;
                    padding: 8px 8px 8px 30px;
                    &.check-blue {
                         background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/check-blue.png) no-repeat 0 50%;
                    }
                    &.uncheck-blue {
                         background: transparent url(https://cdn-img-ys.affinitymatrix.com/images/uncheck-blue.png) no-repeat 0 50%;
                    }
               }
          }
          .glossary {
               width:420px;
               background:#ECECED;
               padding:32px;
               box-sizing: border-box;
               border-radius: 24px;
               h3 {
                    font-family: "Helvetica Neue";
                    font-size: 28px;
                    font-weight: 500;
                    margin-bottom:30px;
               }
               h4 {
                    font-family: "Helvetica Neue";
                    font-weight: 700;
                    font-size: 18px;
                    color: #494949;
                    margin-bottom: 12px;
               }
               p {
                    font-family: "Helvetica Neue";
                    font-weight: 300;
                    font-size: 18px;
                    line-height: 28px;
                    color: #494949;
                    margin-bottom: 24px;
               }
          }
     }
}



/* Sign up */
.signup-form {
     display: flex;
     justify-content: space-between;
     gap:20px;
     .signup-left {
          position:sticky;
          top:0px;
          width:538px;
          height:100vh;
          background:#F7F7F7;
          border-radius: 24px;
          padding:32px;
          overflow: hidden;
          svg {
               width:183px;
          }
          .signup-logo, h2 {
               position: relative;
               z-index: 1;
          }
          h2 {
               font-family: "Helvetica Neue";
               font-weight: 700;
               font-size: 32px;
               letter-spacing: -2%;
               line-height: 42px;
          }

          .desktop-banner {
               position: absolute;
               bottom:0px;
               left:0px;
               z-index: 0;
               display:block!important;
               
          }
          .banner-overlay {
               /* background: #F7F7F7; */
               /* background: linear-gradient(0deg,rgba(247, 247, 247, 0.81) 0%, rgba(247, 247, 247, 1) 64%, rgba(247, 247, 247, 0) 100%); */
               background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(247,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
               height:100px;
               position:absolute;
               width: 100%;
               bottom:0px;
               left: 0;
               z-index: 1;
          }

          .grid-container {
               position: absolute;
               bottom: 20px;
               width: 94%;
               margin: auto;
               left: 0;
               right: 0;
               z-index: 1;
               grid-template-columns: repeat(3, 1fr);
               svg {
                    width:auto;
               }
               .sub-item {
                    flex-direction: column;
                    justify-content: center;
                    background:#FFFFFF;
                    padding:24px 15px;
                    h4 {
                         text-align: center;
                         font-size: 20px;
                         line-height: 100%;
                    }
                    p {
                         font-size: 14px;
                         text-align: center;
                    }
               }
          }
     }

     .form-container {
          width:calc(100% - 540px);
          padding:32px;
          h1 {
               font-family: "Helvetica Neue";
               font-weight: 700;
               font-size: 32px;
               letter-spacing: -2%;
               color: #202020;
               margin-bottom: 8px;
          }
          h2 {
               font-family: "Helvetica Neue";
               font-weight: 300;
               font-size: 20px;
               line-height: 26px;
               color: #737171;
               margin:0 0 15px 0;
          }

          .signup_form {
               box-shadow: 0px 4px 22px 0px #8C8C8C33;
               border-radius: 24px;
               padding:40px;
               box-sizing: border-box;

               h3 {
                    font-family: "Helvetica Neue";
                    font-weight: 500;
                    font-size: 20px;
                    line-height: 26px;
                    color: #000;
                    margin:50px 0 25px 0;
               }
               .form-group {
                    box-sizing: border-box;
                    margin:15px 0; 
               }
               label {
                    font-family: "Helvetica Neue";
                    font-weight: 300;
                    font-size: 18px;
                    line-height: 100%;
                    letter-spacing: 0%;
                    color: #737171;
                    display: inline-block;
                    padding:0 0 5px 10px;
               }

               label.error {
                    font-size: 15px;
                    color: #f00;
                    display: block;
                    text-align: left;
                    padding-top: 10px;
               }

               
               input, select {
                    border: 1.5px solid #DEDEDE;
                    background:#FFFFFF;
                    border-radius: 12px;
                    padding:12px 16px;
                    width:100%;
                    box-sizing: border-box;
               }

               .phoneNumberGroup {
                    position: relative;
                    input {
                         width: 48%;
                    }
               }
               .error {
                    border-color: #f00!important;
                    outline:1px solid #f00!important;
               }
               label.error {
                    display: none!important;
               }

               #phoneNumber + label.error {
                    position: absolute;
                    bottom: -9px;
                    left: 258px;
               }

               .extrasiteName + label.error {
                    position: absolute;
                    bottom: -9px;
                    left: 258px;
               } 

               .badge {
                    display: inline-block;
                    padding: .25em .4em;
                    font-size: 75%;
                    font-weight: 700;
                    line-height: 1;
                    text-align: center;
                    white-space: nowrap;
                    vertical-align: baseline;
                    border-radius: .25rem;
               }
               .loader {
                    width: 12px;
                    height: 12px;
                    border: 1px solid red;
                    border-bottom-color: blue;
                    border-radius: 50%;
                    box-sizing: border-box;
                    animation: rotation 1s linear infinite;
               }

               .badge-success {
                    color: #fff;
                    background-color: #28a745;
               }
               .check-usernameWrap {
                    text-align: right;
               }
               a {
                    color: #6E27FF;
                    text-decoration: none;
                    display: inline-block;
                    padding:5px 0;
                    &:hover {
                         text-decoration: underline;
                    }
               }

               .website_name {
                    margin:0 0 15px;
                    display: flex;
                    gap: 5px;
                    align-items: center;
               }

               .required {
                    color:red;
               }

               .domain-nameWrapper {
                    display: flex;
                    gap:10px;
                    justify-content: space-between;
                    input {
                         width:calc(100% - 160px);
                    }
                    a, a:focus {
                         font-family: IBM Plex Mono;
                         font-weight: 600;
                         font-size: 16px;
                         border: 1px solid #27282D!important;
                         color: #27282D;
                         border-radius: 12px;
                         padding:10px;
                         &:hover {
                              text-decoration: none;
                         }
                    }
               }

               .pageviews-wrapper {
                    display:flex;
                    gap:10px;
                    justify-content: space-between;
               }

               .pageviewsItems {
                    width:50%;
               }

               .close-btn {
                    width: 24px;
                    background: #ddd;
                    border-radius: 50%;
                    display: flex;
                    height: 24px;
                    align-items: center;
                    justify-content: center;
                    padding:0px;
               }
               .close-btn:hover,
               .close-btn:fullscreen {
                    background: rgb(184, 184, 184);
               }

               .close-btn svg {
                    width: 17px;
               }

               .close-x {
                    stroke: black;
                    fill: transparent;
                    stroke-linecap: round;
                    stroke-width: 5;
               }


               .more-website-section {
                    .addMoreWebsite {
                         padding:15px;
                         border-radius: 12px;
                    }
                    .addMoreWebsite:nth-child(odd) {
                         background-color: #F7F7F7;
                         border:1px solid #e8e8e8;
                         border-bottom:2px solid #eaeaea;
                    }

                    .addMoreWebsite:nth-child(even) {
                         border:1px solid #e8e8e8;
                         border-bottom:2px solid #bfbfbf;
                    }
               }

               .downloadPrintButton {
                    display: flex;
                    justify-content: flex-end;
                    margin:0 0 15px 0;
               }
               .downloadPrintButton a {
                    margin-left: 10px;
               }
               .downloadPrintButton svg {
                    position: relative;
                    top: 2px;
               }

               .downloadBtn {
                    border-radius: 5px;
                    padding:5px 10px;
                    color: #dc3545;
                    background-color: transparent;
                    background-image: none;
                    border:1px solid #dc3545;
                    cursor: pointer;
                    &:hover {
                         text-decoration: none;
                    }
               }

               #print_tos {
                    border-radius: 5px;
                    padding:5px;
                    color: #fff;
                    background-color: #007bff;
                    background-image: none;
                    border:1px solid #007bff;
                    cursor: pointer;
                    &:hover {
                         text-decoration: none;
                    }
               }

               .termsOfUseContent {
                    height: 300px;
                    overflow: hidden;
                    overflow-y: scroll;
                    border: 1px solid rgba(0, 0, 0, 0.125);
                    border-radius: 5px;
                    padding: 0px;
                    margin: 0 0 15px 0;
                    .companyBanner {
                         padding:20px;
                    }
                    .term-title {
                         font-family: "Helvetica Neue";
                         font-weight: 500;
                         font-size: 24px;
                         line-height: 26px;
                         color: #000;
                         margin:50px 0 25px 0;
                         text-align: center;
                    }

                    .termsContent {
                         padding:15px;
                         font-family: "Helvetica Neue";
                         font-weight: 300;
                         font-size: 18px;
                         line-height: 28px;
                         b {
                              display: block;
                              font-weight: 500;
                              margin-bottom: 10px;
                         }
                         .term_para {
                              margin: 20px 0;
                         }
                    }

               }
               .form-check {
                    display: flex;
                    align-items: center;
                    padding:5px 0;
                    gap: 5px;
                    label {
                         padding:0px;
                         margin:0px;
                    }
                    input {
                         width: auto;
                    }
               }

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


.successfully-registered-popup {
     position: fixed;
     width:100%;
     height: 100%;
     left:0px;
     top:0px;
     background:rgba(0, 0, 0, 0.5);
     z-index: 99;
     display:flex;
     justify-content: center;
     align-items: center;
     display: none;
     .success-wrapper {
          background:#fff;
          background:#FFFFFF;
          border-radius: 24px;
          
          display: flex;
          justify-content: space-between;
          align-items: center;
          width:600px;

          .success-content {
               padding:40px 0 40px 60px;
          }
          h2 {
               font-family: Helvetica Neue;
               font-weight: 700;
               font-size: 32px;
               letter-spacing: -2%;
               color: #202020;
               margin: 0 0 5px;
               line-height: 36px;
          }

          div {
               width:50%;
          }

          p {
               color: #737171;
               font-size: 16px;
          }

          .returntohome {
               margin: 30px 0 0;
               display: inline-block;
               background: #fff;
               color: #27282D;
               border: 1px solid #27282D;
               transition: color 0.1s linear;
               &:hover {
                    color:#fff;
               }
          }

          .lottie-wrapper {
               .lottieVideo {
                    width:254px;
                    height:auto;
               }
          }
     }
}


/* Show desktop logo on wider screens */
@media only screen and (max-width: 1150px) {
     .site-container {
          padding: 0 20px;
     }

     .signupWrapper {
          width: auto;

          button {
               width: auto;
          }

          .getInTouchButton {
               display: none;
          }
     }

     .programatic-ad-section {
          video {
               width: 80%;
          }

          h4 {
               font-size: 24px;
          }

     }

     .main-banner {
          h2 {
               font-size: 40px;
               line-height: 50px;
          }

          p {
               font-size: 16px;
               line-height: 22px;
          }

          .banner-text {
               width: 400px;
          }

          &.contactusBanner {
               left: 0px;

               .banner-text {
                    width: calc(100% - 565px);
               }
          }

          &.about-us {
               .banner-text {
                    width: calc(100% - 465px);
                    h2 {
                         font-size: 32px;
                    }
               }
          }

          
     }

     .grid-container {
          grid-template-columns: repeat(2, 1fr);
          /* 2 columns on smaller screens */
     }

     .sub-item {

          flex-direction: column;
          justify-content: center;

          h4 {
               font-size: 20px;
               text-align: center;
          }

          p {
               text-align: center;
               font-size: 14px;
          }
     }

     .blog-section {
          flex-direction: column;

          .blog-left {
               width: 100%;
          }
     }

     .blog-carausel {
          width: 100%;
     }

     footer {
          .footer-nav-item {
               width: 100%;
          }

          .footer-navWrap,
          .write-us-col,
          .copyright {
               flex-direction: column;
               align-items: start;
          }

          .res-col,
          .social-col,
          .write-us-col {
               margin-top: 30px;
          }

          .write-us-col {
               gap: 10px;
          }

          .copyright {
               gap: 10px;
          }
     }


     .carousel-tabs-wrapper {
          width: 100%;
          overflow: hidden;
          overflow-x: auto;

          border-radius: 16px;
          box-shadow: 0px 4px 22px 0px #8C8C8C33;
          margin: 20px auto;
          background: #fff;
          -webkit-overflow-scrolling: touch;

          button {
               width: 184px;
          }
     }


     .carousel-tabs-wrapper::-webkit-scrollbar {
          width: 7px;
          height: 7px;
          background: #cecaca;
     }

     .carousel-tabs-wrapper::-webkit-scrollbar-thumb {
          background: #8c8c8cc9;
          border-radius: 8px;
     }

     .custom-carousel {
          .custom-carousel__slide {
               padding: 20px 20px 80px 20px;
          }

          .custom-carousel__nav {
               /* box-shadow: 0px 0 13px 0px #8C8C8C33; */
               width: 1143px;

               /* margin: 20px 8px; */
               /* border: 1px solid #8C8C8C33; */
               .custom-carousel__dot {
                    font-size: 16px;
               }
          }
     }

     .section {
          & .box-content {
               .carousel-leftcol {
                    width: 100%;
               }

               & .features {
                    div.items {
                         width: 47%;
                         padding: 16px;
                         flex-direction: column;
                         align-items: flex-start;
                         font-size: 14px;
                         line-height: normal;

                    }
               }

               .lottie-wrapper,
               .preloader {
                    position: static;
                    transform: none;
                    /* height: 270px !important; */
                    /* display:none; */
               }

               .lottie-wrapper {
                    /* width: 300px !important; */

                    lottie-player {
                         width: 100% !important;
                         height: 270px !important;
                    }
               }
               #smartFills-json, #web-pub-HeaderBidding, #web-publisher-VideoMonetization, #lottie1, #inapp-header-bidding-json, #banner-ads-json, #interstitial-Ads-json, #rewarded-Ads-json, #hvrAnimation-json, #web-publisher-ParallaxAds {
                    position:static;
                    width: 350px;
                    height: 350px;
               }
               
          }


          .c-contentWrapper {
               flex-direction: column;
               align-items: center;
          }

          .request-demo-btn {
               margin: 15px 0;
               text-align: center;
          }

          #customCarouselPrev {
               top: inherit;
               bottom: 80px;
               right: 40px;
               margin: auto;
          }

          #customCarouselNext {
               top: inherit;
               bottom: 80px;
               left: 40px;
               margin: auto;
          }

     }



     .box-content {
          .vertialTabs {

               .features {

                    div.items {
                         flex-direction: row;
                         align-items: center;
                    }
               }
          }
     }

     .supportedPlatform {
          flex-direction: column;
          gap: 15px;
          text-align: center;
          padding: 20px;
          img {
               margin: 0 10px 20px;
          }

          p {
               margin-bottom: 15px;
          }
     }

     .contact-us-form {
          width: 320px;
          padding: 20px;
          margin: 0 15px 0 0;
          .form-title {
               font-size: 22px;
          }
          .captchaWrapper {
               flex-direction: column;
               align-items: flex-start;
          }
     }
     .stickyForm {
          height:calc(100% - 860px);
     }
     .contactus-left {
          width: calc(100% - 404px);

          /* margin-top:100px; */
          .box-content {
               .box-left {
                    width: 100%;
               }
          }
     }

     .terms {
          .banner-text {
               width:90%!important;
               transform: translateY(0%);
          }
     }

     .revenue-calculator-section {
          padding: 20px;
          .metrics-wrapper {
               .metricsForm {
                    width:320px;
                    padding:20px;
               }
               .metricsChart {
                    width: calc(100% - 323px);
               }
          }
     }

     .signup-form {
          .signup-left {
               width:450px;
          }
          .form-container {
               width: calc(100% - 460px);
          }
     }

}


@media screen and (max-width:960px) {
     .meet-family {
          &.box-content {
               .network-wrapper {
                    flex-direction: column;
                    .columns {
                         width:100%;
                    }
               }
          }
     }

     .programatic-ad-section {
          .col-3 {
               display: none;
          }

          .mobile-carousel-wrapper {
               display: block;
               position: relative;
          }
     }

     .programatic-ad-section {
          .col-3 {
               display: none;
          }

          .mobile-carousel-wrapper {
               display: block;
               position: relative;
          }

          .item {
               width: 100%;
               text-align: center;
          }


          .custom-nav {
               width: 100%;
               margin: 10px 0 0 0px;
          }


          .owl-carousel.owl-drag {
               .owl-item {
                    transform: scale(0.9);

                    .item {
                         * {
                              opacity: 0;
                         }
                    }
               }

               .owl-item.center {
                    transform: scale(1);

                    .item {
                         * {
                              opacity: 1;
                         }
                    }
               }
          }
     }
}

@media only screen and (max-width: 960px) {
     .main-banner {
          h2 {
               font-size: 36px;
               line-height: 44px;
          }

          p {
               font-size: 20px;
               line-height: 26px;
          }

          .banner-text {
               width: 350px;
          }
     }

     .site-container {
          padding: 0 20px;
     }

     .nav-toggle,
     .mobileGetIntouch,
     .mobileLogo {
          display: block;
     }


     .signupWrapper {
          display: none
     }

     .navigationWrapper {
          padding: 8px 14px;
          border-radius: 8px;
     }

     .ys-logo {
          svg {
               width: 160px;
               height: 70px;
          }
     }

     nav {
          position: fixed;
          width: 85%;
          height: 100vh;
          top: 0px;
          left: -100%;
          background: #6E27FF;
          transition: all 0.2s linear;
          border-radius: 0px 16px 16px 0px;
          box-shadow: 0px 12px 22px 0px #03030380;
          z-index: 9999;

          &.active {
               transition: all 0.2s linear;
               left: 0px;
          }

          ul {
               flex-direction: column;

               li {

                    /* border-bottom:1px solid #d9dde8; */
                    a {
                         padding: 22px 25px;
                         color: #fff;
                         display: inline-block;
                    }

                    a.dropdown {
                         margin-right: 16px;

                         &:after {
                              border-top: 6px solid #fff;
                         }

                         &:hover {

                              color: #fff;

                              &:after {
                                   border-left: 6px solid transparent;
                                   border-right: 6px solid transparent;
                                   border-bottom: 6px solid #fff;
                                   border-top: 0px;
                              }

                         }

                    }
               }

               ul {
                    position: relative;
                    /* border-top:1px solid #d9dde8; */
                    width: 100%;
                    padding: 0px;

                    li {

                         /* border-bottom:1px solid #d9dde8; */
                         /* background:#F3F3F3; */
                         a {
                              padding: 22px 25px;
                              font-weight: 300 !important;
                              border-radius: 0px;
                              display: inline-block;
                              color: #fff !important;
                         }

                         &:hover {
                              a {
                                   color: #fff;
                              }
                         }

                         &:last-child {
                              border: 0px;
                         }
                    }

                    &:after {
                         display: none;
                    }
               }
          }
     }

     footer {
          .footer-address {
               width: 30%;

               .footer-logo {

                    img,
                    svg {
                         width: 100%;
                    }
               }
          }

          .footer-nav {
               width: 70%;
          }
     }

     .ticker-wrap {

          &:hover {
               .image-ticker {
                    animation-play-state: running;
               }
          }
     }

     .revenue-calculator-section {
          .metrics-wrapper {
               flex-direction: column;
               .metricsChart, .metricsForm {
                    width: 100%;
               }
          }
     }

     .how-it-works-section {
          .how-it-works-content {
               flex-direction: column;
               .content, .glossary {
                    width:100%;
               }
          }
     }

     .signup-form {
          flex-direction: column;
          box-sizing: border-box;
          .signup-left {
               position: relative;
               width:100%;
               box-sizing: border-box;
          }

          .form-container {
               width:100%;
               box-sizing: border-box;
               .pageviews-wrapper {
                    flex-direction: column;
               }
               .pageviewsItems {
                    width:100%!important;
               }
          }

     }

}

@media only screen and (max-width: 820px) {
     .main-banner {
          h2 {
               font-size: 32px;
               line-height: 40px;
          }

          p {
               font-size: 16px;
               line-height: 22px;
          }

          .banner-text {
               width: 90%;
               position: static;
               margin: 30px;
               transform: translateY(0%)!important;
          }
          &.about-us {
               background:#f4f4f4;
               .banner-text {
                    transform: translateY(0%);
                    width:90%;
               }

               .mobileRotationVideo {
                    width: 100%;
               }
          }
     }



     .box-content {
          .vertialTabs {
               flex-direction: column;

               .content-area {
                    padding: 0px;
               }

               .custom-scrollbar {
                    width: 100%;
                    overflow: hidden;
                    display: block;
                    -webkit-overflow-scrolling: touch;
                    background: #fff;
                    box-shadow: 0px 4px 22px 0px #8C8C8C33;
                    border-radius: 16px;

                    margin-bottom: 25px;
                    position:relative;
                    z-index: 1;
                    overflow-x: auto;

                    &:hover {
                         margin-bottom: 18px;
                         overflow-x: auto;
                    }

                    &::-webkit-scrollbar {
                         width: 7px;
                         height: 7px;
                         background: #c9c9c9;
                         border-radius: 8px;
                    }

                    &::-webkit-scrollbar-thumb {
                         background: rgb(109, 109, 109);
                         border-radius: 16px;
                    }
               }

               .vertical-tabs {
                    width: 900px;
                    flex-direction: row;
                    border-right: 0px solid #ccc;

                    button {
                         font-size: 16px;
                         line-height: 22px;
                         text-align: center;
                         padding: 16px 12px;
                    }
               }

               .features {
                    flex-direction: column;

                    div.items {
                         flex-direction: row;
                         align-items: center;
                         width: 100%;
                    }
               }
          }
     }

     .programatic-ad-section,
     .trusted-solution-section,
     .section {
          h2 {
               font-size: 28px;
               line-height: 32px;
          }

          h3 {
               font-size: 16px;
               line-height: 20px;
          }
     }

     .ready-to-maximize {
          .box-content {
               flex-direction: column;
               align-items: flex-start;

               .left-col {
                    width: 100%;
               }

               h2 {
                    font-size: 28px;
               }

               h3 {
                    font-size: 16px;
                    margin-bottom: 35px;
               }
          }
     }

     .main-banner {
          &.contactusBanner {
               position: static;
               background-size: 95% 95%;

               h2 {
                    font-size: 32px;
                    line-height: 40px;
               }

               p {
                    font-size: 16px;
                    line-height: 22px;
               }

               .banner-text {
                    width: 90%;
                    position: static;
                    margin: 30px;
               }

               .grid-container {
                    justify-items: center;
               }
          }
     }

     .stickyForm {
          position: static;
          height: auto;
     }

     .contact-us-form {
          float: none;
          width: 100%;
          box-sizing: border-box;
     }

     .contactus-left {
          width: 100%;
          margin-top: 100px;

          .box-content {
               .box-left {
                    width: 100%;
               }
          }
     }

     .map-section {
          flex-direction: column;
          .location-map {
               width: 100%;
          }

          .location-map-content {
               width: 100%;
          }
     }
}

/* Show only on screens < 768px */
@media only screen and (max-width: 768px) {
     .programatic-ad-section {
          .col-3 {
               display: none;
          }

          .mobile-carousel-wrapper {
               display: block;
               position: relative;
          }

          .item {
               width: 100%;
               text-align: center;
          }


          .custom-nav {
               width: 100%;
               margin: 10px 0 0 0px;
          }


          .owl-carousel.owl-drag {
               .owl-item {
                    transform: scale(0.9);

                    .item {
                         * {
                              opacity: 0;
                         }
                    }
               }

               .owl-item.center {
                    transform: scale(1);

                    .item {
                         * {
                              opacity: 1;
                         }
                    }
               }
          }
     }

     .floating-getInTouch {
          a {
               right: 20px;
               bottom: 20px;
          }
     }

     .grid-container {
          grid-template-columns: repeat(2, 1fr);
          /* 2 columns on smaller screens */
     }

     .sub-item {
          flex-direction: column;
          justify-content: center;

          h4 {
               font-size: 20px;
               text-align: center;
          }

          p {
               text-align: center;
               font-size: 14px;
          }
     }

     .desktop-banner {
          display: none;
     }

     .mobile-banner {
          display: block;
          text-align: center;
     }

     .main-banner {
          &.innerpage {

               .banner-text {
                    position: relative;
                    left: auto;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    padding: 15px 0;
                    transform: none;
               }
          }
     }

     .section {
          .custom-carousel__controls {
               display: none;
          }

          .custom-carousel {
               .custom-carousel__slide {
                    padding: 20px;
               }
               .custom-carousel__slide #web-pub-hvr image {
                    width: 100%;
                    height: 100%;
                    transform: translateX(0) translateY(0);
               }
          }
     }


     .carousel-item {
          height: fit-content;
          flex-direction: column;
          width: 99%;

          ul {
               margin-top: 0px;
               position: relative;
               bottom: 0px;
          }

          .animationVideoWrapper {
               display: block;
               position: relative;
               margin: auto;
          }


     }

     .desktop-googleVideo {
          display: none;
     }

     .mobile-googleVideo {
          display: block;
     }

     .blog-section {
          padding: 32px 20px;
          flex-direction: column;

          .carousel-buttons {
               justify-content: center;
          }
     }

     .desktop {
          display: none;
     }

     .mobile {
          display: inline-block;
     }

     .start-earning-section {
          flex-direction: column;

          div.sec {
               width: 100%;
          }

          h2 {
               font-weight: 700;
               font-size: 28px;
               line-height: 38px;
               letter-spacing: -5%;
               text-transform: capitalize;
          }

          h3 {
               font-weight: 400;
               font-size: 16px;
               line-height: 24px;
               letter-spacing: 0%;
               margin: 16px 0;
          }

          h4 {
               font-weight: 500;
               font-size: 20px;
               line-height: 28px;
               letter-spacing: 0%;
          }

     }
     .steps {
          margin: 32px 0 0;
          flex-direction: column;

          .step {
               width: 100%;
          }
     }

     .step-number {
          &::after {
               display: none;
          }
     }

     .step-label {
          margin-bottom: 0px;
          position: relative;
          padding-left: 40px;

          &::before {
               content: " ";
               height: 32px;
               position: absolute;
               left: 18px;
               top: 0;
               background: #BDBDBD;
               width: 1px;

          }
     }

     footer {
          flex-direction: column;

          .footer-logo {
               img {
                    width: auto;
               }
          }

          .footer-address {
               width: 100%;
          }

          .footer-nav {
               width: 100%;
               .sol-res-col {
                    width:70%!important;
               }
          }
     }

     .vertialTabs {
          .horizontal-tabs {
               width: 150px;
          }
     }

     .iconText {
          display: none;
     }

     .desktopIcon,
     .mobileIcon {
          display: block
     }

     .terms {
          .banner-text {
               text-align: left;
               top: 0;
          }
     }

     .how-it-works-section {
          .how-it-works-content {
               .understanding-ad-unit {
                    div {
                         flex-direction: column;
                         gap: 20px;
                    }
               }
          }
     }

     .contact-us-form {
          form {
               .multi-container {
                   flex-direction: column;
                   margin:15px 0 0;
               }
          }
     }

}




/* Desktop: Show 3 items */
@media (min-width: 1124px) {
     .carousel-item {
          width: calc(100% / 3 - 8px);
     }


     /* .expand-on-hover .carousel-track:hover .carousel-item {
          width: calc(100% / 3 - 8px);

     } */

     /* .expand-on-hover .carousel-item:hover {
          width: 50% !important;
     } */

     /* .expand-on-hover .carousel-track:hover .carousel-item:not(:hover) {
          width: calc(100% / 3 - 40px);
     } */



}
/* Desktop: Show 2 items */
@media (max-width: 1124px) {
     .carousel-item {
          width: calc(100% / 2 - 8px);
     }
}

@media (max-width: 768px) {
     .carousel-item {
          width: calc(100% / 1 - 8px);
     }
}

@media only screen and (max-width:580px) {
     .site-container {
          padding:0px 10px;
     }
     .signup-form {

     .signup-left {
          height: 800px;
          .desktop-banner {
               bottom: 60px;
          }
          h2 {
               font-size: 28px;
               line-height: 35px;
          }
          .grid-container {
               gap:5px;
               width:98%;
               bottom:10px;
               .sub-item {
                    h4 {
                         font-size: 16px;
                    }
                    p {
                         line-height: 100%;
                         margin-top:5px;
                    }
               }
          }
     }
          .form-container {
               padding:0px;
               .signup_form {
                    padding:10px;

                    .phoneNumberGroup {
                         input {
                              width: 47%;
                         }
                    }

                    .domain-nameWrapper {
                         input {
                              width: calc(100% - 90px);
                         }
                    }
               }
          }
     }
}
 

@media only screen and (max-width: 550px) {
     .ys-logo {
          display: inline-block;
          svg {
               height:auto;
               width:140px!important;
               margin:2px 0;
          }
     }
     .supportedPlatform {
          
          padding: 30px 10px;
          img {
               width:80px;
               margin: 0 10px 20px;
          }

          p {
               margin-bottom: 15px;
          }
     }

     footer {
        .copyright {
            gap: 10px;
            line-height: 24px;
            text-align: center;
        }
    }

     .start-earning-section {
        flex-direction: column;
        padding: 30px;
    }


     .programatic-ad-section,
     .trusted-solution-section, .contactus-left {

          h2 {

               font-size: 28px;
               line-height: 38px;

          }

          h3 {

               font-size: 18px;
          }
     }
     .contactus-left {
          .box-content {
               div.d-flex {
                    flex-direction: column;
               }
               svg {
                    margin:50px 0 0;
               }
          }
          .publisher-network-logos {
               h2 {
                    text-align: center!important;
               }
          }
     }


     .trusted-solution-section {
          padding: 60px 0px 0;

          .carousel-item {
               ul {
                    position: relative;
                    bottom: 0
               }
          }
     }

     .tabs {
          .tab-links {
               a {
                    font-size: 14px;
                    padding: 16px 24px;
                    font-weight: 400;
               }

               li.active a {
                    font-weight: 500;
               }
          }
     }
     .section {
          .request-demo-btn {
               margin: 15px 0;
               text-align: center;
               position: absolute;
               bottom: 0;
               margin: 15px auto;
               left: 0;
               right: 0;
               width: 80%;
     
               a {
                    display: block;
               }
          }
     }

     .custom-carousel {
          .custom-carousel__slide {
               padding: 20px 20px 38px 20px;
               position:relative;
          }
     }

     
     .carousel-item {
          min-height: 500px !important;
          padding: 28px;
          h4 {
               font-size: 25px;
          }
          
          svg {
               width: 200px !important;
               height: 200px !important;
               position:static!important;
          }
          .animationWrap {
               height:auto;
               text-align: center;
               img, svg {
                    width: 200px !important;
                    height: 200px !important;
                    position:static!important;
               }
          }
          #adrefresh-json, #lottie3 {
               img {
                    width: 200px !important;
                    height: 200px !important;
                    position:static!important;
               }
          }
     
          #standardbannerads-json, #lottie6, #interstitialads-json, #lottie4 {
               svg {
                   width: 200px !important;
                    height: 200px !important;
                    position:static!important;
               
               }
          }
     
          #webpub-headerBidding-json, #lottie7 {
               svg {
                    width: 200px !important;
                    height: 200px !important;
                    position:static!important;
               }
          }

          
     }

}

@media only screen and (max-width: 460px) {
     .navigationWrapper {
          padding: 8px 14px;
          border-radius: 8px;
     }
     .contact-us-form {
          [data-hsfc-id=Renderer] {
               .hsfc-RadioFieldGroup__Options {
                    display: flex;
                    flex-direction: column;
               }
          }
     }

     .signUpButton {
          font-size: 12px;
          svg {
               width:12px;
               height:12px;
          }
     }
}



@media screen and (max-height: 860px) {
  .signup-form {
     video {
          width: 90%;
     }
  }
}

@media screen and (max-height: 768px) {
  .signup-form {
     video {
          width: 80%;
     }
  }
}

@media screen and (max-height: 650px) {
  .signup-form {
     video {
          width: 65%;
     }
  }
  
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: left;
  padding: 8px;
  border-radius: 6px;
     line-height: 20px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: -5px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

#submit_form {
     width:100%;
}

.phone-no-check {
     color: #dc3545;
     padding: 8px 15px !important;
}

.text-secondary {
    color: #6c757d !important;
}

@media (max-width: 1024px) and (max-height: 600px) {
     .ys-logo {
          svg {
               width: 200px;
          }
     }
}

.tooltip1 {
     position: relative;
     display: inline-block;
     cursor: pointer;
     color: #6c757d !important;
}

/* Tooltip text container */
.tooltip1 .tooltiptext {
     visibility: hidden;
     opacity: 0;
     max-width: 300px;
     width: 300px;
     background-color: #333;
     color: #fff;
     text-align: left;
     border-radius: 6px;
     padding: 10px 12px;
     position: absolute;
     z-index: 9999;
     bottom: 125%; /* appear above icon */
     left: 50%;
     transform: translateX(-50%);
     transition: opacity 0.3s ease;
     font-size: 13px;
     line-height: 26px;
     white-space: normal; /* allow wrapping */
     word-break: break-word; /* break long words */
     overflow: visible; /* ensure height expands */
     box-sizing: border-box;
}

/* Tooltip arrow */
.tooltip1 .tooltiptext::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     border-width: 6px;
     border-style: solid;
     border-color: #333 transparent transparent transparent;
}

/* Show on hover */
.tooltip1:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
}