.page-id-256 { background-color: #000; }
.darkMode--active p { font-size: 20px!important; font-weight: 600!important; line-height: 1.5em!important; color: #fff; }
.dmMainBannerContent { opacity: 1; transform: scale(1); /* position: absolute; */ top: 0; left: 0; width: 100%; z-index: 1000; /* transition: transform 0.5s ease; */ }
.dmMainBannerContent.fade-out { opacity: 0; transform: scale(0.6); }
.dmMainBannerContent h1 { font-size: clamp(26px, 6.3vw, 70px); }
.bannerBottomImage { position: relative; border-radius: 14px; /* margin: 300px 0 70px !important; */ margin: 70px 0 0!important; overflow: hidden; z-index: 1; padding: 0!important; transition: all .2s linear; }
.bannerBottomImage img { width: 100%; border-radius: 14px; transform: scale(1); transition: 1s ease; width: 100%; display: block; height: auto; }
.bannerBottomImage img:hover { transform: scale(1.1); }
.newCardIdentity { float: none; padding: 80px 0 70px 0; }
.newCardIdentity .owl-item.active.center .cards-item { background: #7070707a; }
.newCardIdentity .owl-item>.col-md-3 { width: 100%!important; height: 100%!important; max-width: 100%!important; }
.newCardIdentity .owl-carousel .owl-nav button { top: -80px; transform: unset; left: auto!important; right: 0; }
.newCardIdentity .owl-carousel .owl-nav button span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #7070707a; font-size: 26px; font-weight: 700; color: #fff; border-radius: 0; transition: 0.5s ease; }
.newCardIdentity .owl-carousel .owl-nav button span:hover { background: #000; }
.newCardIdentity .owl-carousel .owl-nav button.owl-prev { right: 70px; }
.newCardIdentity .slider.owl-carousel { margin: 0!important; }
.newCardIdentity .heading { width: 100%!important; margin: 0!important; }
h2.commonSectionTitle, h2.commonSectionTitle span.themeGradientColor { text-align: left!important; font-size: clamp(24px, 5vw, 48px)!important; line-height: 1.2em; font-weight: 900; text-transform: capitalize!important; font-family: 'p-bold'; color: #fff; }
h2.commonSectionTitle span.themeGradientColor { display: inline-block!important; }
.newCardIdentity .heading-description { margin-bottom: 40px!important; }
.newCardIdentity .slider-counter .divider { margin: 0 7px; }
.bannerBottomImage:after { content: ''; position: absolute; inset: 0; background: #00000045; }
.newCardIdentity .slider-counter { font-weight: 800; color: #1379fd; font-family: 'p-bold'; font-size: 30px; margin: 0 0 25px 0; }
.newCardIdentity .owl-item.active.center { transform: scale(1); }
.newCardIdentity .slider.owl-carousel .cards-item { border: none; height: 100%!important; align-items: flex-start; transition: 0.4s ease-in-out; margin: 0!important; border-radius: 28px; background: #4444447a; }
.cards--page-main-1 .cards-item:before { display: none!important; }
.newCardIdentity .slider.owl-carousel .cards-item * { color: #fff; }
.newCardIdentity .slider.owl-carousel .cards-item .cards-item-link-image { display: none!important; }
.newCardIdentity .slider.owl-carousel .owl-item .cards-item:hover { background: #1379fd; }
.newCardIdentity .slider.owl-carousel .cards-name h4 { font-weight: 700; transition: 0.4s ease-in-out; }
.newCardIdentity .slider.owl-carousel .owl-item .cards-item:hover .cards-name h4 { color: #fff!important; }
.newCardIdentity .owl-item>.col-md-3>a { height: 100%; }
.newCardIdentity .slider.owl-carousel .cards-item .cards-wrapper { margin: 0 auto!important; }
.newCardIdentity .owl-item .cards-text p { text-align: center!important; }
.newThirdSection { background: transparent; }
.digtalPlan-wrapper { padding: 2px; position: relative; z-index: 0; overflow: hidden; border: none!important; background: -webkit-linear-gradient(left, #50b8ff, #10c65a, #ff8f08, #ea1f4b, #ff8f08, #10c65a, #50b8ff)!important; border-radius: 11px; font-weight: 400; }
.innerPassage { position: relative; z-index: 1; height: calc(100% - 4px); width: calc(100% - 4px); top: 2px; left: 2px; align-items: center; display: flex; border-radius: 8px; background: #000; padding: 40px 50px; justify-content: space-between; }
.digtalPlan-wrapper:after { content: ""; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #000; background-repeat: no-repeat; background-size: 50% 50%,50% 50%; background-position: 0 0,100% 0,100% 100%,0 100%; background-image: -webkit-linear-gradient(left, #50b8ff, #10c65a, #ff8f08, #ea1f4b, #ff8f08, #10c65a, #50b8ff)!important; -webkit-animation: rotate 2s linear infinite; animation: rotate 5s linear infinite; }
.planImg img { width: 100%; border-radius: 8px 46px 8px 46px; aspect-ratio: 573/356; object-fit: cover; }
.innerPassage .col-lg-6 { width: 50%!important; float: none!important; padding: 0 30px; }
.planContent p { font-weight: 600; }
.planContent * { color: #fff; }
.MS_Section h2 { text-align: center!important; }
.MS_Section .servicecardss .serviceWrapper, .MS_Section .servicecardss .serviceWrapper.active:hover { background: #7070707a; border-radius: 8px; padding: 26px 24px; height: 100%; transition: all 0.4s ease-in-out; opacity: 1; }
.MS_Section .servicecardss .serviceWrapper.active:hover { background-color: #1379fd!important; }
.MS_Section .servicecardss .serviceWrapper p { color: #fff!important; line-height: 1.4em; font-size: 18px; margin: 0; }
.MS_Section .servicecardss .serviceWrapper.active { opacity: 0.6; }
.MS_Section .servicecardss .serviceWrapper h3 { color: #fff; font-family: 'p-bold'; line-height: 1.3em; margin: 16px 0 10px; }
.MS_Section .servicecardss .col-lg-4 { margin: 0 0 30px; }
@-webkit-keyframes rotate {
  100% { transform: rotate(360deg); }
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}
.pinnedSpacer { position: relative; /* overflow: hidden; */ }
.dmMainBannerContent .title-text p { font-weight: 600; text-shadow: 0 0 93px #fff; }
.MS_Section { padding: 100px 0 0!important; }
.workingWithUs:before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(https://supremetechnologies.us/wp-content/uploads/2024/04/1180-3sZhEWZAO-transformed.png) center/100vw repeat-x; opacity: 0.2; filter: blur(0px); }
.workingWithUs .heading { width: 100%!important; }
.workingWithUs .heading h2 { text-align: center!important; margin: 0 0 20px!important; }
.workingWithUs .heading-title p { font-size: 20px!important; font-weight: 600!important; text-align: center; line-height: 1.5em!important; }
.workingWithUs .cards-row .cards-item { border-radius: 8px; overflow: hidden; border: none!important; background: #7070707a; backdrop-filter: blur(14px); height: 100%!important; margin: 0!important; }
.workingWithUs .cards-row .cards-item .cards-name *, .workingWithUs .cards-row .cards-item .cards-text * { color: #fff!important; }
.workingWithUs .cards-row .cards-item .cards-name h3 { font-family: 'p-bold'; }
.workingWithUs .cards-row .cards-item .cards-wrapper { border-color: #1379fd!important; }
.swing { animation: swing ease-in-out 1.4s infinite alternate; transform-origin: center -20px; padding: 0 60px; width: 100%; margin: 40px 0 0 auto; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); max-width: 1100px; float: none; }
.swing img { border: 5px solid #f8f8f8; display: block; width: 100%; border-radius: 24px; }
.swing:after { content: ''; position: absolute; width: 20px; height: 20px; border: 1px solid #fff; top: -10px; left: 50%; z-index: 0; border-bottom: none; border-right: none; transform: rotate(45deg); }
/* nail */
.swing:before { content: ''; position: absolute; width: 5px; height: 5px; top: -15px; left: 19px; z-index: 5; border-radius: 50% 50%; background: #fff; right: 0; margin: 0 auto; }
@keyframes swing {
  0% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}
.rightAlignedColm .revenuesmallDiv .col-lg-6 { float: none!important; margin: 10px 0!important; padding: 30px 20px 30px 40px!important; background: #7070707a; backdrop-filter: blur(14px); border-radius: 14px; width: calc(50% - 10px)!important; position: relative; transition: 0.2s; }
.rightAlignedColm .revenuesmallDiv { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 800px!important; counter-reset: count; align-items: flex-start; }
.rightAlignedColm .revenue-Wrapper { flex-wrap: wrap; }
.rightAlignedColm .revenue-Wrapper .revenue-img { width: 100px; align-items: center; justify-content: center; display: flex; }
.rightAlignedColm .revenue-Wrapper .revenue-img svg { max-width: 70px; }
.rightAlignedColm .revenue-Wrapper>.revenue-text { width: calc(100% - 100px); flex: 1; }
.rightAlignedColm .revenue-Wrapper .revenue-text h5, .rightAlignedColm .revenue-Wrapper .revenue-text span { color: #fff; width: 100%!important; }
.rightAlignedColm .revenue-Wrapper>.revenue-text .revenue-text { width: 100%!important; }
.rightAlignedColm .revenue-Wrapper .revenue-text h5 { font-family: 'p-bold'; line-height: 1.3em!important; margin: 0; }
.rightAlignedColm .revenuesmallDiv .col-lg-6:before { counter-increment: count; content: counter(count, decimal-leading-zero); font-size: 56px; font-family: 'p-bold'; position: absolute; left: -32px; bottom: -40px; opacity: 0.4; z-index: -3; color: #fff; }
.rightAlignedColm .revenuesmallDiv .col-lg-6:nth-child(2n) { margin-top: 90px!important; }
.formMain .singleField:not(.submitField) input, .formMain .singleField:not(.submitField) textarea { background: #7070707a; border: none; border: 2px solid transparent; border-radius: 0; transition: all 0.6s cubic-bezier(0, 0, 0.2, 1); padding: 12px 22px; color: #fff; max-height: 130px; resize: none; box-shadow: 0 0 0 0 transparent; border-bottom-color: #377bfb; letter-spacing: 1px; }
.formMain .singleField:not(.submitField) input:focus, .formMain .singleField:not(.submitField) input:focus-within, .formMain .singleField:not(.submitField) input:hover, .formMain .singleField:not(.submitField) textarea:focus, .formMain .singleField:not(.submitField) textarea:focus-within, .formMain .singleField:not(.submitField) textarea:hover { border-color: #377bfb; }
.formMain .singleField:not(.submitField) input::placeholder, .formMain .singleField:not(.submitField) textarea::placeholder { color: #ffffffd8!important; font-weight: 400!important; }
.formMain .wpcf7-not-valid-tip { font-size: 16px; font-weight: 600; }
.contactImageWrapper img { width: 100%; border-radius: 12px; }
.contactImageWrapper { padding: 16px 50px 0 0; }
.newContactView { background: #000; padding: 60px 0 110px; }
.singleField.submitField .form-control { background: transparent!important; margin: 40px 0 0 0; }
.singleField.submitField input[type="submit"] { background: #00f; }
.singleField.submitField input[type="submit"] { background: #ff8f08; border: none; font-size: 18px; letter-spacing: 1px; font-weight: 600; padding: 20px 50px; border-radius: 0!important; transition: all 0.6s cubic-bezier(0, 0, 0.2, 1); }
.singleField.submitField input[type="submit"]:hover { background: #377bfb; color: #fff; }
p.responsePara { font-size: 18px!important; }
.darkMode--active .wpcf7 form .wpcf7-response-output { color: #fff!important; text-align: center; }
.bottomContactRow { background: #bed5ff; padding: 40px 30px; margin: 70px 0 0 0; display: flex; flex-wrap: wrap; border-radius: 16px; }
.bottomContactRow .leftCol { font-size: 23px; font-weight: 700; font-family: 'p-bold'; width: 28%; }
.bottomContactRow .rightCol { width: 72%; }
.bottomContactRow .leftCol span { color: #377bfb; }
.bottomContactRow>div { float: none!important; }
.bottomContactRow .leftCol:after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #377bfb; transform: translateX(50%); }
.bottomContactRow .innerRight { display: flex; height: 100%; justify-content: space-evenly; }
.bottomContactRow .innerRight h3 { font-family: 'p-bold'; letter-spacing: 1px; font-size: 22px; }
.bottomContactRow .innerRight>div { width: calc(100% / 3 - 40px); }
.bottomContactRow .innerRight span { font-size: 16px; line-height: 1.4em!important; display: inline-block; font-weight: 600; }

@media (max-width:767px) {
  /* DIGITIAL MARKETING PAGE NEW CSS STARTS */
  .dmPanel section.title { min-height: unset!important; }
  .pinnedSpacer { padding: 0 16px; }
  .dmMainBannerContent .title-text, .dmMainBannerContent .title-text p { padding: 0; }
  .dmMainBannerContent .title-text p { font-size: 16px!important; line-height: 1.5em; }
  .dmMainBannerContent h1 { margin: 0 0 30px!important; }
  .bannerBottomImage { margin: 50px 0 0!important; }
  .newCardIdentity .slider.owl-carousel { margin: 0!important; transform: translateX(-12px); }
  .digtalPlan-wrapper:after { height: 160%; }
  .MS_Section { padding: 30px 0 0!important; }
  .servicecardss { margin: 0!important; padding: 30px 0 0; }
  .workingWithUs .heading-title p { font-size: 16px!important; }
  main.digitalPage .row.cards-row { margin-top: 50px!important; }
  .webDiv.workingWithUs .row.cards-row>div:not(:last-child) { margin-bottom: 40px; }
  section.revenueDiv { padding: 10px 0 40px; }
  .swing { padding: 0; margin-bottom: 60px; }
  .rightAlignedColm .revenuesmallDiv { margin: 0 auto; max-width: 410px!important; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6 { width: 100%!important; padding: 20px 20px 20px 10px!important; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6:nth-child(2n) { margin-top: 10px!important; }
  .rightAlignedColm .revenue-Wrapper .revenue-img svg { max-width: 50px; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6:before { left: -10px; bottom: 0; transform: translateY(50%); font-size: 36px; }
  .newRevenue h2.commonSectionTitle { text-align: center!important; }
  .bottomContactRow { flex-flow: column; padding: 30px 0; }
  .bottomContactRow .leftCol, .bottomContactRow .rightCol { width: 100%!important; }
  .bottomContactRow .leftCol { line-height: 1.3em; }
  .bottomContactRow .innerRight { flex-flow: column; }
  .bottomContactRow .innerRight>div { width: 100%!important; }
  .bottomContactRow .innerRight h3 { line-height: 1em; }
  .bottomContactRow .rightCol { border-top: 2px solid #377bfb!important; padding-top: 20px; }
  .newContactView { padding-bottom: 70px; }
  /* DIGITIAL MARKETING PAGE NEW CSS ENDS */
}

@media (min-width: 768px) {
  .dmPanel section.title { min-height: unset!important; }
  .newCardIdentity .slider.owl-carousel .owl-stage-outer .owl-stage { display: flex; }
  .newCardIdentity .slider.owl-carousel .owl-stage-outer .owl-item { float: none; }
}

@media (min-width:768px) and (max-width:991px) {
  .dmPanel section.title { padding-bottom: 0; }
  .bannerBottomImage { margin: 70px 0 0!important; }
  .newCardIdentity .slider.owl-carousel .owl-stage-outer { transform: translateX(-10px); }
  .newCardIdentity .slider-counter { opacity: 0; }
  .digtalPlan-wrapper:after { height: 110%; }
  .MS_Section { padding: 20px 0 0!important; }
  .servicecardss { margin: 0; }
  .MS_Section .servicecardss .col-lg-4 { width: 50%; }
  body .workingWithUs .cards-row { margin-top: 50px!important; }
  body .workingWithUs .cards-row>div { width: calc(100% / 3)!important; }
  .workingWithUs .cards-row .cards-item .cards-name h3 { font-size: 20px; line-height: 1.2em!important; }
  .workingWithUs .cards-row .cards-item .cards-wrapper { padding: 20px 20px; }
  .workingWithUs .cards-row .cards-item .cards-text p { text-align: center; }
  .bottomContactRow { flex-flow: column; }
  .bottomContactRow .leftCol, .bottomContactRow .rightCol { width: 100%; }
  .bottomContactRow .innerRight { justify-content: space-between; margin: 16px 0 0; }
  .bottomContactRow .innerRight>div { width: calc(100% / 3 - 20px); }
  .bottomContactRow .leftCol { padding-bottom: 16px; border-bottom: 2px solid #377bfb; }
  .bottomContactRow .innerRight h3 { font-size: 20px; }
  .bottomContactRow .leftCol:after{display:none;}
}

@media (min-width:768px) and (max-width: 1029px) {
  section.revenueDiv { padding: 0 0 60px; }
  .newRevenue h2.commonSectionTitle { text-align: center!important; }
  .rightAlignedColm .revenuesmallDiv { padding: 0 30px; margin: 0 auto; }
  .rightAlignedColm .revenue-Wrapper .revenue-text span, .rightAlignedColm .revenue-Wrapper>.revenue-text .revenue-text { font-size: 16px; line-height: 1.4em!important; }
  .rightAlignedColm .revenue-Wrapper .revenue-img svg { max-width: 45px; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6 { padding: 20px 20px 20px 20px!important; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6:before { left: -13px; font-size: 42px; bottom: -30px; }
  .swing { margin-bottom: 70px; }
}

@media (max-width:991px) {
  .newCardIdentity { padding: 40px 0 10px 0; }
  .newThirdSection { padding-inline: 16px; }
  .innerPassage { flex-flow: column; padding: 20px 0; }
  .innerPassage .col-lg-6 { width: 100%!important; padding: 0 15px; }
}

@media (min-width:992px) and (max-width:1200px) {
  .bannerBottomImage { margin-bottom: 0!important; }
  .newCardIdentity { padding: 0 0 30px; }
  .dmPanel section.title { padding-bottom: 70px!important; }
  .innerPassage { padding: 10px 10px; }
  .newThirdSection { padding-inline: 20px; }
  .MS_Section { padding: 20px 0 0!important; }
  .servicecardss { margin: 0; }
  .MS_Section .servicecardss .col-lg-4 { width: calc(100% / 3); }
  body .workingWithUs .cards-row { margin-top: 50px!important; }
  body .workingWithUs .cards-row>div { width: calc(100% / 3)!important; }
  .workingWithUs .cards-row .cards-item .cards-name h3 { font-size: 20px; line-height: 1.2em!important; }
  .workingWithUs .cards-row .cards-item .cards-wrapper { padding: 20px 20px; }
  .workingWithUs .cards-row .cards-item .cards-text p { text-align: center; }
  .workingWithUs .heading-title p { margin-bottom: 0!important; }
}

@media (min-width: 991px) {
  .newCardIdentity .slider.owl-carousel .owl-stage-outer { -webkit-mask-image: linear-gradient(to right, #0000004a, black 12%, black 88%, #0000004a 100%); height: unset!important; }
}

@media (min-width:1030px) and (max-width:1450px) {
  section.revenueDiv { padding: 30px 0 30px; }
  .swing { padding: 0 10px; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6 { width: 75%!important; padding: 20px 20px 20px 30px!important; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6:nth-child(2n) { margin-top: 10px!important; }
  .rightAlignedColm .revenue-Wrapper .revenue-img svg { max-width: 50px; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6:before { font-size: 45px; left: -20px; bottom: -30px; }
  .rightAlignedColm .revenuesmallDiv .col-lg-6:nth-child(2n) { margin-left: auto!important; }
  .newRevenue .container-fluid>.row { position: relative; align-items: flex-start; }
  .newRevenue .container-fluid>.row .leftAlignedColm { position: sticky; top: 70px; float: none!important; }
  html { overflow: unset!important; }
}