/* FIX 1: Prevent page-level horizontal scrollbar */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* melodrama */
@font-face {
  font-family: "m_l";
  /*a name to be used later*/
  /* src: url("../fonts/melodrama/Melodrama-light.woff2"); */
  src: url("../fonts/rector/Migra-Extrabold.otf") format("woff2");
}

@font-face {
  font-family: "m_m";
  /*a name to be used later*/
  src: url("../fonts/melodrama/Melodrama-Medium.woff2");
  /*URL to font*/
}

@font-face {
  font-family: "m_r";
  /*a name to be used later*/
  src: url("../fonts/melodrama/Melodrama-Regular.woff2");
  /*URL to font*/
}

@font-face {
  font-family: "m_s";
  /*a name to be used later*/
  src: url("../fonts/melodrama/Melodrama-Semibold.woff2");
  /*URL to font*/
}

@font-face {
  font-family: "m_b";
  /*a name to be used later*/
  src: url("../fonts/melodrama/Melodrama-Bold.woff2");
  /*URL to font*/
}

/* poppins */
@font-face {
  font-family: "p_l";
  /*a name to be used later*/
  src: url("../fonts/poppins/Poppins-Light.woff2");
  /*URL to font*/
}

@font-face {
  font-family: "p_m";
  /*a name to be used later*/
  src: url("../fonts/poppins/Poppins-Medium.woff2");
  /*URL to font*/
}

@font-face {
  font-family: "p_r";
  /*a name to be used later*/
  src: url("../fonts/poppins/Poppins-Regular.woff2");
  /*URL to font*/
}

@font-face {
  font-family: "p_s";
  /*a name to be used later*/
  src: url("../fonts/poppins/Poppins-SemiBold.woff2");
  /*URL to font*/
}

@font-face {
  font-family: "p_b";
  /*a name to be used later*/
  src: url("../fonts/poppins/Poppins-Bold.woff2");
  /*URL to font*/
}

#smooth-content {
  padding: 0;
}

#preloader {
  background-color: #ce403d;
}

*,
html,
body {
  font-family: p_l;
}

p,
span {
  line-height: 1.5;
}

.crp-project-item {
  overflow: visible;
}

.crp-project-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
  overflow: hidden;
}

.crp-project-thumb img {
  max-width: 100%;
  max-height: 310px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.crp-project-thumb:hover img {
  transform: scale(1.1);
}

.crp-project-content {
  position: relative;
  z-index: 10;
  background: inherit;
}

.crp-project-content .tp_fade_anim {
  opacity: 1 !important;
  transform: none !important;
}

/* Fix for images in tab panes - GSAP animation doesn't work properly in hidden tabs */
.tab-pane .tp_fade_anim,
.custom-tab-pane .tp_fade_anim {
  opacity: 1 !important;
  transform: none !important;
}

.tp-offcanvas-wrapper {
  padding: 15px;
}

.tp-offcanvas-contact,
.tp-offcanvas-menu {
  margin-bottom: 15px;
}

.mob_menu_btn {
  margin-bottom: 15px;
}

.header-sticky.sticky-white-bg .tp-header-bar button i,
.tp-header-bar button i {
  background-color: #ce403d;
}

.tp-header-bar button {
  color: #ce403d;
}

.tp-header-shop-wrap.header-sticky {
  top: 0px;
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}

.tp-megamenu-wrapper.megamenu-white-bg .tp-megamenu-list ul li a {
  color: #000;
  padding-left: 0;
}

.tp-megamenu-list ul li a {
  font-size: 18px;
  background: transparent;
}

.mega_menu_icon_1 {
  width: 30px;
}

.mega_menu_icon {
  padding-right: 18px;
  padding-left: 18px;
  display: inline;
}

.tp-megamenu-wrapper.megamenu-white-bg .tp-megamenu-list ul li:hover {
  background-color: #f8f8fb;
  color: #ce403d;
}

.tp-megamenu-wrapper.megamenu-white-bg .tp-megamenu-list ul li a:hover {
  background-color: #f8f8fb;
  color: #ce403d;
}

.tp-megamenu-list ul li a p {
  font-size: 16px;
  padding-top: 5px;
  color: #636368;
  font-weight: 400;
  font-family: p_r;
  margin-bottom: 0;
  background-color: transparent;
}

.tp-header-shop-wrap .tp-megamenu-wrapper {
  max-width: 1450px;
}

.tp-megamenu-wrapper.megamenu-white-bg .tp-megamenu-title {
  color: #ce403d;
}

.tp-megamenu-title {
  font-size: 18px;
}

.mega_menu_icon {
  padding-right: 18px;
  padding-left: 18px;
  display: inline;
}

.tp-btn-yellow-green.green-solid {
  height: 50px;
  border-radius: 50px;
  padding: 10px 15px;
  white-space: nowrap;
}


.header-sticky .tp-header-menu>nav>ul>li>a,
.tp-header-menu>nav>ul>li>a {
  padding: 20px 0px;
  color: #000;
  font-family: p_r;
}

.tp-header-shop-wrap.header-sticky.sticky-white-bg {
  background-color: #fff;
  overflow: visible;
}

.tp-btn-yellow-green,
.green-solid {
  background-color: #ce403d;
}

/* .title_row {
  padding-bottom: 15px;
} */
.company_title {
  font-size: 50px;
  color: #000;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  font-family: var(--tp-ff-platform);
  /* font-family: m_l; */
}

.dgm-hero-ptb {
  background: #fff;
}

.dgm-hero-bg {
  background-image: linear-gradient(45deg,
      #ce403d 0%,
      #fff 25%,
      #fff 50%,
      #fff 75%,
      #fff 100%);
}

.cr-service-item::before {
  top: 0;
}

.dgm-hero-title {
  font-family: var(--tp-ff-platform);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dgm-hero-funfact-wrap {
  margin-top: 15px;
}

.app-stack-title {
  font-family: var(--tp-ff-platform);
}

.dgm-hero-subtitle {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  font-family: p_r;
}

.dgm-hero-thumb div.anim-zoomin-wrap div.anim-zoomin>img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: contain;
}

/* <!-- Are you facing these challenges --> */
.it-feature-title {
  font-size: 25px;
  font-family: p_r;
  font-weight: 600;
  line-height: normal;
}

/* process */
.app-stack-item-02 {
  background: #ffffff;
}

.tp-section-title {
  color: #ce403d;
  font-family: var(--tp-ff-platform);
  /* font-family: m_l; */
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 50px;
  line-height: normal;
  text-transform: uppercase;
  background-image: linear-gradient(90deg,
      #ce403d 0%,
      #8a2e2e 35%,
      #2a2f36 50%,
      #8a2e2e 65%,
      #ce403d 100%);

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.tp-who-title {
  color: #ffffff;
  font-family: var(--tp-ff-platform);
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 30px;
  text-transform: uppercase;
}

.why_choose_title {
  color: #ce403d;
  font-family: var(--tp-ff-platform);
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 25px;
  text-transform: uppercase;
}

.crp-project-category a {
  font-size: 16px;
  font-family: p_l;
  /* font-weight: 400; */
  text-transform: capitalize;
  padding-right: 30px;
}

.crp-about-left,
.crp-about-right {
  text-align: center;
}

.tp-section-title-grotesk {
  font-family: var(--tp-ff-platform);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.it-benifit-icon::after {
  background-color: rgba(0, 0, 0, 0.1);


}

.it-feature-item::before {
  /* background: #f9f9f9; */
}

/* Feature Card Hover Shadow */
.it-feature-item {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.it-feature-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(206, 64, 61, 0.15);
}

.it-feature-item:hover::before {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.crp-project-item {
  background-color: #f9f9f9;
  border: 3px solid #f0f0f0;
  margin-bottom: 30px;
}

.it-faq-wrap::after {
  background-color: rgba(0, 0, 0, 0.1);
}

.it-faq-accordion .faq-active::before {
  background: #000;
}

.it-faq-wrap .accordion-buttons i {
  color: #000;
}

.it-faq-wrap .accordion-buttons span {
  color: #000;
}

.it-faq-wrap .accordion-body p {
  color: #000;
}

.design-testimonial-item {
  background-color: #f9f9f9;
}

.design-testimonial-text p,
.design-testimonial-author span,
.design-testimonial-author h4 {
  color: #000;
}

.design-testimonial-author {
  display: flex;
}

.design-testimonial-author>div {
  padding-right: 15px;
}

.testimonial_row_col_2>div {
  display: flex;
  align-items: center;
  justify-content: end;
}

.testimonial_row {
  margin-bottom: 30px;
}

.app-testimonial-item-content {
  padding-left: 15px;
}

.app-testimonial-item-content>p {
  font-weight: 600;
}

.app-testimonial-item-icon-box {
  display: flex;
  align-items: end;
  padding-top: 30px;
}

.st-counter-wrapper .row [class*="col-"] {
  border-right: none;
}

.crp-project-title {
  font-weight: 600;
}

.case_study_btn_row {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}

.it-project-item {
  border: 1px solid rgba(50, 41, 73, 0.2);
}

.it-project-thumb:hover,
.it-project-thumb {
  padding-left: 30px;
  padding-right: 30px;
}

.services_awards>img {
  height: 150px;
  height: 150px;
  object-fit: contain;
}

.pp-skill-heading {
  display: flex;
  align-items: center;
}

.pp-skill-heading>div {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
}

.pp-skill-subtitle {
  width: 100%;
  display: block;
}

.pp-skill-tools-item {
  width: 250px;
  height: 250px;
  margin-top: 30px;
}

.tp-contact-form-select label {
  font-size: 16px;
  font-weight: 500;
  color: #111013;
  line-height: 1;
  margin-bottom: 12px;
}

.tp-contact-form-select>select {
  outline: none;
  height: 60px;
  width: 100%;
  line-height: 60px;
  font-size: 16px;
  padding-left: 26px;
  padding-right: 26px;
  border-radius: 8px;
  background: rgb(246, 246, 249);
  color: var(--tp-common-black);
  border: 1px solid rgb(246, 246, 249);
}

.tp-contact-form-btn>button {
  background-color: #ce403d;
}

.contact_form_video>video {
  border-radius: 15px;
}

.app-feature-item {
  background-color: rgba(0, 0, 0, 0);
}

.app-feature-bg-row {
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  border-radius: 30px;
}

.app-feature-bg-row>.col-lg-6 {
  height: 100%;
}

.tp-service-4-process-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 100%;
}

.tp-service-4-process-video .dgm-testimonial-playbtn {
  width: 100px;
  height: 100px;
}

.app-cta-wrap {
  background: #e5e5e5;
}

.tp-service-4-area {
  background-image: linear-gradient(45deg,
      #ce403d 0%,
      #fff 25%,
      #fff 50%,
      #fff 75%,
      #fff 100%);
}

.studio-award-item.black-style span {
  font-family: p_s;
  font-size: 18px;
}

.cr-feature-3-box {
  background-color: #e5e5e5;
  box-shadow: none;
  border: none;
  border-radius: 30px;
  margin: 0;
}

.app-stack-content p {
  font-size: 16px;
}

.it-testimonial-container {
  overflow: hidden;
}

.tp-product-details-nav-main-thumb {
  background-color: #ffffff;
}

.expertise_nav {
  gap: 10px;
}

.expertise_tools_brand {
  display: flex;
  gap: 10px;
}

/* expertise form */
.form-container {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  width: 500px;
  max-width: 90%;
}

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

h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.tp_tech_slider {
  margin-top: 50px;
}

.tp_tech_slider>div {
  border-radius: 20px;
}

.form_awards_col {
  text-align: center;
}

.form_awards_row_2 {
  padding-top: 20px;
}

.form_awards_wrapper {
  padding: 30px;
  border: 1px solid #707070;
  margin-top: 50px;
  border-radius: 30px;
}

/* ======= Contact Form — Minimalist UI ======= */

/* Form wrapper box */
.contact-form-reusable {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

/* Section titles inside form — bold, centered, larger */
.contact-form-reusable .dgm-hero-subtitle {
  font-weight: 700;
  text-align: center;
  color: #000;
  font-size: 20px;
}

/* Form group spacing + section divider */
.contact-form-reusable .form-group {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f2f2f2;
}

.contact-form-reusable .form-group:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Radio buttons — LEFT aligned, compact */
.budget-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.budget-options label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 30px;
  padding: 6px 12px;
  border: 1px solid #ce403d;
  background: #fff;
  color: #000;
  transition: all 0.2s ease;
  user-select: none;
}

.budget-options label:hover {
  background: #fef2f2;
  border-color: #b8342f;
}

.budget-options label:has(input:checked) {
  background: #ce403d;
  color: #fff;
  border-color: #ce403d;
}

.budget-options input[type="radio"],
.budget-options input[type="checkbox"] {
  accent-color: #ce403d;
  width: 14px;
  height: 14px;
}

/* Other input — inline with chips, visually identical to radio labels */
.budget-options .other-input-field {
  display: none;
  border-radius: 30px !important;
  padding: 6px 12px !important;
  border: 1px solid #ce403d !important;
  font-size: 14px !important;
  width: 150px !important;
  height: auto !important;
  line-height: normal !important;
  outline: none;
  background: #fff;
  color: #000;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
  flex-shrink: 0;
}

.budget-options .other-input-field::placeholder {
  color: #aaa;
}

.budget-options .other-input-field:focus {
  border-color: #a8302e;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(206, 64, 61, 0.1);
}

textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 16px;
  resize: none;
  font-size: 14px;
  background: #fff;
  color: #000;
  height: 100px;
  border: 1px solid #ce403d;
  transition: all 0.2s ease;
}

textarea::placeholder {
  color: #aaa;
}

textarea:focus {
  border-color: #ce403d;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(206, 64, 61, 0.08);
  outline: none;
}

.quick-buttons {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

input[type="file"] {
  appearance: none;
}

.chose_file_btn,
.quick-buttons button {
  border: 1px solid #ce403d;
  background: #fff;
  color: #ce403d;
  padding: 5px 12px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 13px;
  height: 32px;
  transition: all 0.2s ease;
}

.chose_file_btn:hover,
.quick-buttons button:hover {
  background: #ce403d;
  color: #fff;
}

input[type="file"] {
  margin-top: 8px;
}

.personal-info {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.input-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.input-field label {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

.input-field input {
  padding: 0 14px !important;
  border-radius: 30px !important;
  border: 1px solid #ce403d !important;
  background: #fff !important;
  font-size: 14px !important;
  height: 38px !important;
  line-height: 38px !important;
  outline: none;
  color: #000;
  transition: all 0.2s ease;
}

.input-field input::placeholder {
  color: #aaa;
  line-height: 38px;
}

.input-field input:focus {
  border-color: #a8302e !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(206, 64, 61, 0.1);
}

.checkboxes {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.checkboxes label {
  cursor: pointer;
}

.recaptcha-box {
  margin-top: 10px;
  padding: 8px;
  background: #fafafa;
  border-radius: 6px;
  font-size: 14px;
  color: #000;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-upload {
  margin: 12px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #f2f2f2;
}

/* reCAPTCHA section spacing */
.contact-form-reusable .form-group.mb-3 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
}

.service-faq-style .app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons .accordion-icon {
  border: none;
}

.service-faq-style .app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
  color: #000;
}

.service-faq-style .app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons .accordion-icon::after,
.service-faq-style .app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons .accordion-icon::before {
  background-color: #000;
}

.service-faq-style .app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .accordion-body p {
  color: #000;
}

.service-faq-style .app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* Custom container */
.custom-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* Custom button */
.file-btn {
  background: #fff;
  color: #ce403d;
  padding: 5px 14px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  height: 32px;
  border: 1px solid #ce403d;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.file-btn:hover {
  background: #ce403d;
  color: #fff;
}

/* File name text */
#fileName,
[id^="fileName-"] {
  font-size: 13px;
  color: #888;
}

.file-upload > label {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

input:focus,
textarea:focus,
textarea:active input:active {
  border-color: #ce403d;
  outline: none;
  background-color: #fff;
}

.tp_tech_slider_slide>div {
  padding: 30px;
  background-color: #fef9f8;
}

.app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .form_accordion_body {
  padding-left: 15px;
  padding-right: 15px;
}

.app-faq-wrap .ai-faq-accordion-wrap .accordion .accordion-items .accordion-header .form_accordion_btn {
  padding-left: 15px;
  padding-right: 15px;
}

/* øur work/ */
.nav-tabs {
  border-bottom: none;
  gap: 20px;
}

/* Make tabs look like plain text links */
.nav-tabs .nav-link {
  border: none;
  background: none;
  font-size: 16px;
  color: #000;
  position: relative;
  font-family: p_r;
  align-items: center;
  display: flex;
}

.nav-tabs .nav-link:first-child {
  padding-left: 0;
}

/* Active tab */
.nav-tabs .nav-link.active {
  font-weight: 500;
  color: #ce403d;
}

/* Hover effect */
.nav-tabs .nav-link:hover {
  color: #000;
}

/* Add ▼ after inactive, ▲ after active */
.nav-tabs .nav-link::after {
  content: "";
  background-image: url(../img/chevron-up.svg);
  width: 20px;
  height: 20px;
  background-position: center;
  display: inline-block;
  margin-left: 10px;
}

.nav-tabs .nav-link.active::after {
  content: "";
  background-image: url(../img/chevron-down.svg);
  width: 20px;
  height: 20px;
  background-position: center;
  display: inline-block;
  margin-left: 10px;
}

.cr-service-item-content p,
.cr-service-item-title {
  color: #141414;
}

.cr-service-item-icon span {
  border: 1px solid rgb(0 0 0 / 10%);
}

.cr-service-item-icon svg {
  color: #000;
  stroke: #000;
}

/* Checkbox alignment */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 15px;
}

/* Tags section */
.tags {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  padding: 6px 14px;
  border: 1px solid #000;
  border-radius: 20px;
  background: transparent;
  color: #000;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.tag:hover {
  background: #ce403d;
  color: #fff;
  border: 1px solid #ce403d;
}

.tag:active {
  background: #ce403d;
  color: #fff;
  border: 1px solid #ce403d;
}

.tag_red {
  padding: 8px 20px;
  border: 1px solid #ce403d;
  border-radius: 50px;
  background: transparent;
  color: #ce403d;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.tag_red img {
  width: 30px;
  margin-right: 5px;
}

.tag_red:hover {
  background: #ce403d;
  color: #fff;
  border: 1px solid #ce403d;
}

.tag_red:active {
  background: #ce403d;
  color: #fff;
  border: 1px solid #ce403d;
}

.tags_title_border {
  border-bottom: 1px solid #707070;
}

.our_work_portfolio_row {
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0px 4px 16px 0px rgba(56, 81, 120, 0.12);
}

.our_work_portfolio_row>.col-4 {
  padding: 15px;
}

.our_work_portfolio_row>.col-8 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
}

.our_work_tools_brand {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.our_work_tools_brand>img {
  width: 60px;
  height: 60px;
}

.transfrom_tab {
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: #2a4c3a !important;
  padding: 7px 18px;
  border-radius: 10px;
  text-transform: uppercase;
  border: 1px solid rgba(42, 76, 58, 0.1) !important;
}

.custome_dev_row {
  display: flex;
  padding-top: 30px;
}

.custome_dev_row>div:nth-child(1) {
  margin-right: 15px;
}

.custome_dev_row>div:nth-child(2) {
  margin-left: 15px;
}

/* Tabs container */
.custom-tabs-container {
  display: flex;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Tab button */
.custom-tab-btn {
  padding: 12px 20px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  margin-right: 6px;
  margin-bottom: 6px;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-tab-btn:hover {
  background-color: rgb(246, 246, 249);
}

.custom-tab-btn.active {
  border-bottom: none;
  /* color: #ce403d;
      stroke: #ce403d; */
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #ce403d;
}

.custom-tab-btn p {
  font-size: 18px;
  color: #000;
  font-family: p_r;
  margin-bottom: 0;
  margin-left: 10px;
}

.custom-tab-btn svg {
  fill: none;
  width: 30px;
}

.custom-tab-btn.active p {
  color: #ce403d;
}

.custom-tab-btn.active svg path,
.custom-tab-btn.active svg .st0 {
  stroke: #ce403d;
}

/* Content wrapper */
.custom-tabs-body {
  padding: 20px;
  border-radius: 0 8px 8px 8px;
}

/* Individual pane */
.custom-tab-pane {
  display: none;
  animation: fadeIn 0.3s ease;
}

.custom-tab-pane.active {
  display: block;
}

.tp-perspective-slider .tp-perspective-inner .tp-perspective-image {
  height: auto;
}

.tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after {
  display: none;
}

.tp-perspective-slider .tp-perspective-inner .tp-perspective-image:before {
  display: none;
}

.tp-perspective-slider .tp-perspective-inner {
  display: flex;
  align-items: center;
}

.our_work_hero_container {
  padding: 0;
  padding-top: 100px;
}

.our_work_hero_container {
  background-image: linear-gradient(45deg,
      #ce403d 0%,
      #fff 25%,
      #fff 50%,
      #fff 75%,
      #fff 100%);
}

.ai-service-item::before {
  background: linear-gradient(304deg,
      #ce403d 23.79%,
      #000000 47%,
      #707070 85.86%);
}

.ai-service-icon svg path linearGradient {
  stroke: linear-gradient(304deg, #ce403d 23.79%, #000000 47%, #707070 85.86%);
}

.tp-work-number span {
  background-color: #ce403d;
}

.tp-work-number i {
  font-family: p_m;
  letter-spacing: normal;
}

.tp-work-item {
  background-color: #fff;
  box-shadow: 0px 10px 70px rgb(0 0 0 / 0.1);
  border-radius: 24px;
}

.bg_transparent {
  background: transparent !important;
}

.ar-funfact-item span {
  font-family: p_r;
  font-weight: 600;
  letter-spacing: normal;
  font-size: 16px;
  margin-top: 15px;
}

.ar-funfact-item h4 {
  font-family: p_r;
  font-weight: 600;
  background-image: linear-gradient(90deg,
      #ce403d 0%,
      #ce403d 25%,
      #2a2f36 50%,
      #ce403d 75%,
      #ce403d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.tech_hero_container {
  height: 100vh;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video_container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.video_container video {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  padding: 0;
}

.video_black_sheet_container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(45deg, #000 0%, transparent 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.pp-about-me-tool-item-content>p {
  font-size: 18px;
  font-family: p_r;
}

.pp-about-me-tool-item-icon span {
  width: 60px;
  height: 60px;
}

.tech-app-cta-wrap {
  padding: 50px;
  background: #fff;
  box-shadow: 0px 10px 70px rgb(0 0 0 / 0.1);
}

.tech-af-bg {
  background: #000;
  border-radius: 30px;
}

.tech-testimonial-thumb img {
  border-radius: 0px;
}

.tech_testimonial_arrow {
  position: absolute;
  bottom: 12%;
  left: 48%;
  z-index: 1040;
}

.tech_testimonial_arrow>button {
  transform: rotate(-180deg);
}

.pp-about-me-tool-item {
  border-radius: 8px;
}

.pp-about-me-tool-item-icon img,
.pp-about-me-tool-item-icon span {
  width: 30px;
  height: 30px;
}

.pp-about-me-tool-item {
  width: auto;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(246, 246, 249);
}

.agntix-light .pp-about-me-tool-item {
  border: none;
}

.it-testimonial-arrow button:hover {
  background-color: #ce403d;
}

.who_we_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.why_choose_row_1 {
  margin-bottom: 20px;
  position: relative;
}

.why_choose_row_2 {
  margin-top: 20px;
}

.skilled_profile_img>svg {
  width: 80px;
  height: 80px;
  opacity: 0.4;
}

.skilled_profile_img>img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}

.skilled_profile_img {
  display: flex;
  justify-content: space-between;
}

.skilled_profile_img:last-child {
  margin-left: 50px;
  margin-right: 50px;
}

.skilled_profile_wrapper {
  padding: 20px;
  border-radius: 30px;
  background-color: #000;
  height: 50%;
  overflow: hidden;
}

.who_we_col {
  margin-right: 10px;
  margin-left: 15px;
  margin-top: 30px;
  padding: 50px;
  background-color: #000;
  border-radius: 30px;
}

.why_choose_col {
  height: 100%;
  margin-left: 10px;
  margin-right: 0px;
  margin-top: 30px;
}

.skilled_text_wrapper {
  position: absolute;
  top: 50%;
  z-index: 1;
  left: 15px;
  transform: translateY(-50%);
}

.skilld_text_1 {
  font-size: 30px;
  font-family: p_m;
  font-weight: 600;
  margin-bottom: 0px;
  color: #ce403d;
  line-height: 1;
}

.skilld_text_2 {
  font-size: 18px;
  font-family: p_m;
  font-weight: 600;
  margin-bottom: 0px;
  color: #ce403d;
  line-height: 1;
}

.why_choose_row_1,
.why_choose_row_2 {
  margin-left: 0;
  margin-right: 0;
}

.why_choose_row_1_col_1,
.why_choose_row_1_col_2 {
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 5px 10px;
  border-radius: 10px;
}

.why_choose_row_1_col_1 {
  margin-right: 10px;
}

why_choose_row_1_col_2 {
  margin-left: 10px;
}

.why_choose_text_1 {
  font-size: 16px;
  font-family: p_r;
  margin-bottom: 0;
  text-transform: capitalize;
  color: #fff;
}

.why_choose_text_2 {
  font-size: 18px;
  font-family: p_r;
  margin-bottom: 0;
  text-transform: capitalize;
  color: #fff;
  font-weight: 600;
}

.cn-contactform-support-text span {
  font-size: 21px;
  font-weight: 500;
  line-height: normal;
  max-width: 755px;
  margin: 0 auto;
  display: inline-block;
  color: #000;
  font-family: p_m;
}

.tp-contact-us-map {
  height: calc(100vh - 250px);
}

.tp-contact-map-icon span {
  background-color: #ce403d;
}

.st-brand-heading span {
  color: #000000;
}

/* LEGACY HERO RULE KEPT FOR ROLLBACK (DISABLED)
.dgm-hero-top {
  height: 100vh;
  padding-top: 140px;
}
*/

.dgm-hero-top .dgm-hero {
  height: 100%;
  /* height: auto; */
  /* width: 100%; */
}

/* Responsive Hero Section */
@media only screen and (max-width: 1199px) {
  .dgm-hero-top {
    height: auto;
    min-height: 100vh;
    padding-bottom: 60px;
  }

  .dgm-hero-top .dgm-hero {
    height: auto;
    min-height: calc(100vh - 110px);
  }
}

/* MacBook / Laptop Adjustments */
/* @media only screen and (max-width: 1440px) {
  .dgm-hero-top {
    padding-top: 80px; 
  }
} */

@media only screen and (max-width: 991px) {
  .dgm-hero-top {
    padding-top: 100px;
    padding-bottom: 50px;
  }

  .dgm-hero-top .dgm-hero {
    min-height: auto;
    padding-bottom: 40px;
  }

  /* Stack the image below content on tablet */
  .dgm-hero-thumb {
    position: relative;
    width: 100%;
    margin-top: 40px;
    height: auto;
  }

  .dgm-hero-thumb .anim-zoomin-wrap,
  .dgm-hero-thumb .anim-zoomin {
    height: auto;
  }

  .dgm-hero-thumb div.anim-zoomin-wrap div.anim-zoomin>img {
    height: auto;
    max-height: 500px;
    object-fit: contain;
  }

  .dgm-hero-content {
    margin-bottom: 30px;
  }

  /* Mobile image display */
  .hero_thumb_mob {
    display: block;
    margin: 30px 0;
  }

  .hero_thumb_mob img {
    max-width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .dgm-hero-top {
    padding-top: 90px;
    padding-bottom: 40px;
  }

  .dgm-hero-title {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 20px;
  }

  .dgm-hero-subtitle {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .dgm-hero-funfact-wrap {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .dgm-hero-funfact span {
    font-size: 42px;
  }

  .dgm-hero-funfact p {
    font-size: 14px;
  }

  .dgm-hero-thumb {
    margin-top: 30px;
  }

  .dgm-hero-thumb div.anim-zoomin-wrap div.anim-zoomin>img {
    max-height: 350px;
  }

  /* Funfact grid adjustment for mobile */
  .dgm-hero-funfact-wrap .row {
    display: flex;
    flex-wrap: wrap;
  }

  .dgm-hero-funfact-wrap .col-sm-6 {
    width: 50%;
  }

  .dgm-hero-funfact-wrap .col-xl-4:last-child {
    width: 100%;
    margin-top: 10px;
  }
}

@media only screen and (max-width: 575px) {
  .dgm-hero-title {
    font-size: 36px;
  }

  .dgm-hero-funfact span {
    font-size: 36px;
  }

  .dgm-hero-thumb div.anim-zoomin-wrap div.anim-zoomin>img {
    max-height: 280px;
  }

  /* Stack funfacts on very small screens */
  .dgm-hero-funfact-wrap .col-sm-6 {
    width: 100%;
    text-align: center;
  }

  .dgm-hero-funfact {
    margin-bottom: 25px;
  }
}

/* Hide mobile image on desktop, show on mobile */
.hero_thumb_mob {
  display: none;
}

@media only screen and (max-width: 991px) {
  .hero_thumb_mob {
    display: block;
  }

  /* Hide the absolute positioned image on mobile since we show mobile version */
  .dgm-hero-thumb .anim-zoomin-wrap {
    display: none;
  }
}

.app-stack-thumb-box .shape-1 {
  left: 10%;
}

.app-stack-thumb-box .shape-2 {
  right: 10%;
}

.crp-project-item {
  border-radius: 0px;
  width: 100%;
}

.tp-panel-pin-area {
  overflow: hidden;
}

.crp-project-area .crp-project-right {
  padding-left: 0;
}

.land_our_dev {
  padding-top: 60px;
}

.app-stack-container {
  overflow: hidden;
}

.dgm-about-thumb-wrap {
  margin-left: 0;
}

/* Image hover effect - zoom + red glow (same as industries.php) */
.ind-img-zoom {
  border-radius: 12px;
  overflow: hidden;
  display: block;
  transition: box-shadow 0.4s ease;
}

.ind-img-zoom:hover {
  box-shadow: 0 25px 50px rgba(206, 64, 61, 0.3), 0 0 0 3px rgba(206, 64, 61, 0.1);
}

.ind-img-zoom img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.ind-img-zoom:hover img {
  transform: scale(1.05);
}

.mySwiper {
  padding: 15px;
  position: relative;
}

.pp-skill-tools-item-title {
  margin-bottom: 0;
}

.tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tab {
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 400;
  position: relative;
  font-family: p_r;
  font-size: 16px;
}

/* Down arrow */
.tab::after {
  content: "";
  background-image: url(../img/up-arrow-work.svg);
  background-size: cover;
  width: 10px;
  height: 10px;
  font-size: 12px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

.tab.active {
  color: #ce403d;
}

.tab.active::after {
  transform: translateY(-50%) rotate(180deg);
  /* Rotate arrow when active */
}

/* Tab hover */
.tab:hover {
  color: #ce403d;
}

/* Tab content */
.tab-content {
  /* border: 2px solid #ddd; */
  border-radius: 0 0 8px 8px;
  background: #fff;
  padding: 20px;
  margin-top: -2px;
  min-height: 50px;
  position: relative;
  overflow: hidden;
  /* GPU acceleration for smooth scrolling */
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style;
}

.tab-pane {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Prevent layout shifts */
  will-change: opacity;
  transform: translateZ(0);
}

.tab-pane.active {
  display: block;
  opacity: 1;
  position: relative;
  color: #ce403d;
}

.hero_thumb_mob {
  display: none;
}

.atropos-inner {
  height: 100%;
  object-fit: cover;
}

.dgm-footer-bg {
  position: relative;
  z-index: 1040;
}

.it-testimonial-content span {
  font-family: p_m;

}

.it-testimonial-content p {
  font-family: p_r;
  letter-spacing: normal;
}

.our_work_nav .tab {
  padding: 10px 30px;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -30px;
}

.pt_60 {
  padding-top: 60px;
}

.pt_200 {
  padding-top: 200px;
}

.pt_150 {
  padding-top: 150px;
}

.pb_200 {
  padding-bottom: 200px;
}

.pb_30 {
  padding-bottom: 30px;
}

.pb_60 {
  padding-bottom: 60px;
}










/* Icon container */
.it-benifit-icon span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  /* container size */
  height: 80px;
  /* border-radius: 50%;   optional (remove if not needed) */
}

/* SVG icon itself */
.it-benifit-icon span svg {
  width: 42px;
  /* ICON SIZE */
  height: 42px;
  display: block;
}

.it-benifit-content p {
  font-size: 25px !important;
  font-family: p_r;
}

/* ==================== Industries Section - Scroll Optimization ==================== */
/* Prevent scroll jank when benefits section is hidden */
.crp-about-area,
.dgm-about-area {
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.dgm-step-area {
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Smooth layout transitions */
.crp-about-wrapper {
  contain: layout style;
}


/* =====================================================
   NEW HERO SECTION - FULLY RESPONSIVE
   Works on Mac, Windows, Mobile - All Screen Sizes
   ===================================================== */

/* Base Hero Styles - Override Old Styles */
.dgm-hero-top {
  /* height: 100vh; - OLD - COMMENTED */
  min-height: 100vh;
  height: auto;
  padding-top: 10px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  position: relative;
  /* overflow: hidden; */
  overflow: visible;
}

.dgm-hero-top .dgm-hero {
  /* height: 100%; - OLD - COMMENTED */
  height: auto;
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

/* Sidebar visibility at desktop/laptop widths where main.css hides it */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .dgm-hero-social-box {
    display: block;
    left: 20px;
  }
}

/* Hero Content Layout */
.dgm-hero-top .container {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dgm-hero-top .row {
  align-items: center;
  width: 100%;
  margin: 0;
}

/* Hero Content Styles */
.dgm-hero-content {
  padding: 20px 0;
  position: relative;
  z-index: 10;
}

.dgm-hero-title {
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1.05;
  margin-bottom: 25px;
  word-break: break-word;
}

.dgm-hero-subtitle {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.6;
  margin-bottom: 20px;
  display: block;
}

/* Hero Image/Thumb Styles */
.dgm-hero-thumb {
  position: absolute;
  top: 38%;
  right: clamp(28%, 35vw, 40%);
  transform: translateY(-50%);
  width: clamp(46%, 50vw, 54%);
  max-width: 750px;
  height: auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 1.5vw, 20px);
}

.dgm-hero-thumb .anim-zoomin-wrap,
.dgm-hero-thumb .anim-zoomin {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dgm-hero-thumb dotlottie-player,
.dgm-hero-thumb img,
.dgm-hero-thumb .img-fluid {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 70vh;
  object-fit: contain;
}

/* Hide mobile image on desktop */
.hero_thumb_mob {
  display: none !important;
}

/* =====================================================
   LARGE SCREENS - Desktop / Mac / Windows
   ===================================================== */
@media only screen and (min-width: 1400px) {
  .dgm-hero-top {
    padding-top: 10px;
  }

  .dgm-hero-thumb {
    top: 37%;
    right: 36%;
    width: 50%;
    max-width: 780px;
  }

  .dgm-hero-content {
    max-width: 600px;
  }
}

@media only screen and (min-width: 1600px) {
  .dgm-hero-top {
    padding-top: 5.3vh;
  }

  .container-1430 {
    max-width: 1400px;
  }

  .dgm-hero-thumb {
    top: 36%;
    right: 40%;
    width: 50%;
    max-width: 820px;
  }
}

/* =====================================================
   LAPTOP SCREENS - 1200px to 1399px
   ===================================================== */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dgm-hero-top {
    padding-top: 10px;
    padding-bottom: 50px;
  }

  .dgm-hero-thumb {
    top: 40%;
    right: 30%;
    width: 52%;
    max-width: 640px;
  }

  .dgm-hero-title {
    font-size: clamp(36px, 5vw, 70px);
  }
}

/* =====================================================
   TABLET LANDSCAPE - 992px to 1199px
   ===================================================== */
@media only screen and (max-width: 1199px) {
  .dgm-hero-top {
    padding-top: 10px;
    padding-bottom: 60px;
    min-height: auto;
  }

  .dgm-hero-top .dgm-hero {
    min-height: auto;
    height: auto;
  }

  .dgm-hero-top .container {
    justify-content: flex-start;
  }

  .dgm-hero-thumb {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 600px;
    margin: 40px auto 0;
    padding: 0 20px;
    order: 2;
  }

  .dgm-hero-content {
    order: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
  }

  .dgm-hero-title {
    font-size: clamp(40px, 6vw, 60px);
  }

  .dgm-hero-funfact-wrap .row {
    justify-content: center;
  }

  .dgm-hero-thumb dotlottie-player,
  .dgm-hero-thumb img,
  .dgm-hero-thumb .img-fluid {
    max-height: 450px;
  }
}

/* =====================================================
   TABLET PORTRAIT - 768px to 991px
   ===================================================== */
@media only screen and (max-width: 991px) {
  .dgm-hero-top {
    padding-top: 10px;
    padding-bottom: 50px;
  }

  .dgm-hero-content {
    padding: 15px 0;
  }

  .dgm-hero-title {
    font-size: clamp(36px, 7vw, 50px);
    margin-bottom: 20px;
  }

  .dgm-hero-subtitle {
    font-size: 15px;
    margin-bottom: 15px;
  }

  .dgm-hero-funfact-wrap {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .dgm-hero-funfact {
    margin-bottom: 25px;
  }

  .dgm-hero-thumb {
    margin-top: 30px;
    max-width: 500px;
  }

  .dgm-hero-thumb dotlottie-player,
  .dgm-hero-thumb img,
  .dgm-hero-thumb .img-fluid {
    max-height: 400px;
  }

  /* Show mobile image, hide desktop image */
  .hero_thumb_mob {
    display: block !important;
    margin: 20px 0;
  }

  .hero_thumb_mob img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
  }

  .dgm-hero-thumb {
    display: none !important;
  }
}

/* =====================================================
   MOBILE LANDSCAPE - 576px to 767px
   ===================================================== */
@media only screen and (max-width: 767px) {
  .dgm-hero-top {
    padding-top: 10px;
    padding-bottom: 40px;
  }

  .dgm-hero-title {
    font-size: clamp(32px, 8vw, 40px);
    line-height: 1.1;
    margin-bottom: 15px;
  }

  .dgm-hero-subtitle {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .dgm-hero-funfact-wrap {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .dgm-hero-funfact {
    margin-bottom: 20px;
    text-align: center;
  }

  .dgm-hero-funfact span {
    font-size: 36px;
  }

  .dgm-hero-funfact p {
    font-size: 13px;
  }

  .hero_thumb_mob img {
    max-height: 250px;
  }

  /* Funfacts - 2 per row */
  .dgm-hero-funfact-wrap .col-xl-4,
  .dgm-hero-funfact-wrap .col-lg-6,
  .dgm-hero-funfact-wrap .col-md-4,
  .dgm-hero-funfact-wrap .col-sm-6 {
    width: 50%;
    padding: 5px;
  }

  .dgm-hero-funfact-wrap .row {
    margin: 0 -5px;
  }
}

/* =====================================================
   MOBILE PORTRAIT - Up to 575px
   ===================================================== */
@media only screen and (max-width: 575px) {
  .dgm-hero-top {
    padding-top: 10px;
    padding-bottom: 35px;
  }

  .dgm-hero-content {
    padding: 10px 0;
  }

  .dgm-hero-title {
    font-size: 30px;
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .dgm-hero-subtitle {
    font-size: 13px;
    line-height: 1.5;
  }

  .dgm-hero-funfact {
    margin-bottom: 15px;
  }

  .dgm-hero-funfact span {
    font-size: 32px;
  }

  .dgm-hero-funfact p {
    font-size: 12px;
    line-height: 1.3;
  }

  /* Funfacts - stack on very small screens */
  .dgm-hero-funfact-wrap .col-xl-4,
  .dgm-hero-funfact-wrap .col-lg-6,
  .dgm-hero-funfact-wrap .col-md-4,
  .dgm-hero-funfact-wrap .col-sm-6 {
    width: 100%;
  }

  .hero_thumb_mob img {
    max-height: 200px;
  }

  /* Button adjustments */
  .tp-btn-black-square {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* =====================================================
   SMALL MOBILE - Up to 375px
   ===================================================== */
@media only screen and (max-width: 375px) {
  .dgm-hero-top {
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .dgm-hero-title {
    font-size: 26px;
  }

  .dgm-hero-subtitle {
    font-size: 12px;
  }

  .dgm-hero-funfact span {
    font-size: 28px;
  }

  .dgm-hero-funfact p {
    font-size: 11px;
  }

  .hero_thumb_mob img {
    max-height: 180px;
  }
}

/* =====================================================
   HIGH DPI / RETINA DISPLAYS (MacBooks, etc)
   ===================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {

  .dgm-hero-title {
    /* Slightly smaller on high-DPI to prevent overflow */
    font-size: clamp(34px, 5.5vw, 76px);
  }
}

/* =====================================================
   ZOOM LEVEL ADJUSTMENTS (for browser zoom)
   ===================================================== */
@media only screen and (max-width: 1200px) and (min-width: 992px) {
  .dgm-hero-top {
    /* Adjust for zoomed desktop */
    padding-top: 100px;
  }
}

/* =====================================================
   HOVER EFFECTS - Desktop only
   ===================================================== */
@media (hover: hover) and (pointer: fine) {
  .dgm-hero-thumb:hover {
    transform: translateY(-52%) scale(1.02);
    transition: transform 0.4s ease;
  }
}

/* =====================================================
   TOUCH DEVICES - Mobile/Tablet
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
  .dgm-hero-thumb {
    transform: none;
  }

  .dgm-hero-thumb:hover {
    transform: none;
  }
}

/* =====================================================
   SAFARI BROWSER FIXES
   ===================================================== */
_::-webkit-full-page-media,
_:future,
:root .dgm-hero-top {
  /* Safari-specific fix for vh units */
  min-height: -webkit-fill-available;
}

/* =====================================================
   FIREFOX BROWSER FIXES
   ===================================================== */
@-moz-document url-prefix() {
  .dgm-hero-thumb dotlottie-player {
    max-height: 65vh;
  }
}

/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
  .dgm-hero-top {
    height: auto;
    min-height: auto;
    padding: 20px 0;
  }

  .dgm-hero-thumb {
    display: none !important;
  }

  .hero_thumb_mob {
    display: none !important;
  }
}

/* =====================================================
   INDEX HERO LAYOUT FIX
   Keep hero artwork in right column on desktop
   ===================================================== */
.dgm-hero-top.home-hero {
  /* overflow: hidden; */
  overflow: visible;
}

.dgm-hero-top.home-hero .dgm-hero-content {
  position: relative;
  z-index: 12;
  max-width: 620px;
  padding-right: 12px;
}

.dgm-hero-top.home-hero .dgm-hero-thumb {
  top: 40%;
  right: clamp(0px, 3vw, 64px);
  left: auto;
  width: clamp(520px, 44vw, 840px);
  max-width: 840px;
  transform: translateY(-50%);
  padding: clamp(8px, 1vw, 14px);
  z-index: 6;
  pointer-events: none;
}

@media only screen and (min-width: 1600px) {
  .dgm-hero-top.home-hero .dgm-hero-thumb {
    top: 42%;
    right: clamp(18px, 4vw, 96px);
    width: clamp(640px, 45vw, 880px);
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dgm-hero-top.home-hero .dgm-hero-thumb {
    top: 45%;
    right: 12px;
    width: min(52vw, 640px);
  }
}

@media only screen and (max-width: 1199px) {
  .dgm-hero-top.home-hero .dgm-hero-thumb {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-width: 600px;
    margin: 28px auto 0;
    padding: 0 20px;
    transform: none;
    pointer-events: auto;
  }
}