/* =============================================
   RESPONSIVE STYLESHEET — AdsFlow Media
   Breakpoints: 1200 / 991 / 768 / 576 / 375
   ============================================= */

/* ===========================================
   1. LAPTOP — max-width: 1200px
   =========================================== */
@media (max-width: 1200px) {

  .hero-section h1 {
    font-size: 2.9rem;
  }

  .hero-subtitle {
    max-width: 480px;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .why-right h2 {
    font-size: 2rem;
  }

  .cta-section h2 {
    font-size: 2.1rem;
  }

  .stat-number {
    font-size: 2.5rem;
  }

  .process-step {
    padding: 0 .3rem;
  }

  .step-desc {
    max-width: 175px;
  }

  .marketing-dashboard {
    max-width: 360px;
  }

  .why-visual-card {
    max-width: 360px;
  }

  .nav-links {
    gap: 1.6rem;
  }
}

/* ===========================================
   2. TABLET — max-width: 991px
   =========================================== */
@media (max-width: 991px) {

  /* --- Navbar --- */
  .nav-links {
    display: none !important;
  }

  .nav-cta {
    display: none !important;
  }

  .hamburger {
    display: block;
  }

  /* --- Hero --- */
  .hero-section {
    min-height: auto;
    padding: 120px 0 60px;
  }

  .hero-section .row {
    flex-direction: column-reverse;
  }

  .hero-section .col-lg-6 {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .hero-section .col-lg-6.mb-5.mb-lg-0 {
    margin-bottom: 0 !important;
  }

  .hero-section .col-lg-6:first-child {
    margin-top: 2.5rem;
  }

  .hero-section h1 {
    font-size: 2.4rem;
  }

  .hero-subtitle {
    max-width: 100%;
  }

  .hero-visual {
    min-height: 320px;
  }

  .marketing-dashboard {
    max-width: 340px;
  }

  .float-badge {
    font-size: .75rem;
    padding: .5rem .7rem;
  }

  .fb-top { top: 10px; left: 0; }
  .fb-right { top: 60px; right: -5px; }
  .fb-bottom { bottom: 30px; left: -15px; }
  .fb-left { bottom: 10px; right: -25px; }

  .float-social {
    width: 38px;
    height: 38px;
    font-size: .95rem;
  }

  .fs-fb { top: 20px; right: 15px; }
  .fs-ig { bottom: 80px; right: -5px; }
  .fs-gg { top: 100px; left: -5px; }
  .fs-yt { bottom: 15px; right: 45px; }

  /* --- Marquee --- */
  .marquee-section {
    padding: 2rem 0;
  }

  /* --- Services --- */
  .services-section {
    padding: 4.5rem 0;
  }

  .section-title {
    font-size: 2rem;
  }

  .section-subtitle {
    max-width: 500px;
    margin-bottom: 2.5rem;
  }

  /* Services grid stays at Bootstrap's md-6 = 2 columns */

  /* --- Why Choose Us --- */
  .why-section {
    padding: 4.5rem 0;
  }

  .why-section .row {
    flex-direction: column;
  }

  .why-section .row > [class*="col-"] {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .why-left {
    min-height: auto;
    margin-bottom: 2rem;
  }

  .why-visual-card {
    max-width: 380px;
    margin: 0 auto;
  }

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

  .why-right h2 {
    font-size: 1.9rem;
  }

  .why-list li {
    justify-content: center;
  }

  .why-stat-float {
    display: none;
  }

  /* --- Process --- */
  .process-section {
    padding: 4.5rem 0;
  }

  .process-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 2rem 0 0;
  }

  .process-line {
    top: 28px;
    left: 28px;
    right: auto;
    width: 4px;
    height: calc(100% - 56px);
  }

  .process-line-fill {
    width: 100% !important;
    height: 0;
    transition: height 1s ease;
  }

  .process-step {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    text-align: left;
    padding: 0;
    width: 100%;
    margin-bottom: 1.8rem;
  }

  .process-step:last-child {
    margin-bottom: 0;
  }

  .step-circle {
    width: 56px;
    height: 56px;
    min-width: 56px;
    margin: 0;
  }

  .step-name {
    font-size: 1rem;
    margin-bottom: .2rem;
  }

  .step-desc {
    max-width: none;
    margin: 0;
  }

  /* --- Statistics --- */
  .stats-section {
    padding: 3.5rem 0;
  }

  /* Stats stay at Bootstrap md-6 = 2 columns */

  .stat-number {
    font-size: 2.3rem;
  }

  /* --- Testimonials --- */
  .testimonials-section {
    padding: 4.5rem 0;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .tc-text {
    font-size: .88rem;
  }

  /* Swiper breakpoints handle slidesPerView: 2 at 768px */

  /* --- CTA --- */
  .cta-section {
    padding: 4rem 0;
  }

  .cta-section h2 {
    font-size: 1.9rem;
  }

  .cta-section p {
    font-size: 1rem;
  }

  /* --- Footer --- */
  .main-footer {
    padding: 3rem 0 0;
  }

  .footer-bottom {
    flex-direction: column;
    gap: .5rem;
    text-align: center;
  }

  /* --- WhatsApp & Back to Top --- */
  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    bottom: 20px;
    right: 20px;
  }

  .back-to-top {
    bottom: 82px;
    right: 20px;
    width: 42px;
    height: 42px;
  }
}

/* ===========================================
   3. LARGE MOBILE — max-width: 768px
   =========================================== */
@media (max-width: 768px) {

  /* --- Hero --- */
  .hero-section {
    padding: 100px 0 50px;
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .hero-badge {
    font-size: .75rem;
    padding: .4rem .9rem;
  }

  .hero-subtitle {
    font-size: .95rem;
    margin-bottom: 1.5rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: .8rem;
  }

  .hero-buttons a {
    justify-content: center;
    width: 100%;
  }

  .hero-visual {
    min-height: 260px;
    margin-top: 1.5rem;
  }

  .marketing-dashboard {
    max-width: 300px;
    padding: 1.3rem;
  }

  .dash-grid {
    gap: .5rem;
  }

  .dash-card .dash-value {
    font-size: 1.1rem;
  }

  .dash-card .dash-label {
    font-size: .65rem;
  }

  .float-badge {
    font-size: .7rem;
    padding: .4rem .6rem;
    border-radius: 10px;
    gap: .35rem;
  }

  .float-badge i {
    font-size: .9rem;
  }

  .fb-top { top: 5px; left: -5px; }
  .fb-right { top: 50px; right: -10px; }
  .fb-bottom { bottom: 20px; left: -10px; display: none; }
  .fb-left { bottom: 5px; right: -15px; display: none; }

  .float-social {
    width: 32px;
    height: 32px;
    font-size: .85rem;
    border-radius: 9px;
  }

  .fs-fb { top: 10px; right: 10px; }
  .fs-ig { bottom: 60px; right: -5px; }
  .fs-gg { top: 80px; left: -5px; }
  .fs-yt { bottom: 5px; right: 35px; }

  /* --- Custom Cursor (hide on touch) --- */
  .cursor-dot,
  .cursor-outline {
    display: none !important;
  }

  /* --- Marquee --- */
  .marquee-section {
    padding: 1.5rem 0;
  }

  .marquee-heading {
    font-size: .75rem;
    margin-bottom: 1rem;
  }

  .marquee-pill {
    font-size: .8rem;
    padding: .45rem 1rem;
  }

  /* --- Services --- */
  .services-section {
    padding: 3.5rem 0;
  }

  .section-tag {
    font-size: .72rem;
  }

  .section-title {
    font-size: 1.7rem;
  }

  .section-subtitle {
    font-size: .9rem;
    margin-bottom: 2rem;
  }

  /* Services grid: 1 column at this breakpoint (Bootstrap col-md-6 already handles 2 cols; override to full) */
  .services-section .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .service-card {
    padding: 1.5rem 1.3rem;
  }

  .service-icon {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
    border-radius: 13px;
  }

  .service-card h3 {
    font-size: 1.05rem;
  }

  .service-card p {
    font-size: .85rem;
  }

  /* --- Why Choose Us --- */
  .why-section {
    padding: 3.5rem 0;
  }

  .why-right h2 {
    font-size: 1.6rem;
  }

  .why-list li {
    font-size: .88rem;
  }

  .why-visual-card {
    max-width: 340px;
  }

  .wv-num {
    font-size: 1.25rem;
  }

  .wv-lbl {
    font-size: .65rem;
  }

  /* --- Process --- */
  .process-section {
    padding: 3.5rem 0;
  }

  .process-step {
    gap: 1rem;
  }

  .step-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1rem;
  }

  .step-name {
    font-size: .92rem;
  }

  .step-desc {
    font-size: .78rem;
  }

  /* --- Statistics --- */
  .stats-section {
    padding: 3rem 0;
  }

  .stat-item {
    padding: 1rem 0;
  }

  .stat-icon {
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
    margin-bottom: .7rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .stat-label {
    font-size: .8rem;
  }

  /* --- Testimonials --- */
  .testimonials-section {
    padding: 3.5rem 0;
  }

  .testimonial-card {
    padding: 1.3rem;
  }

  .tc-stars {
    font-size: .8rem;
    margin-bottom: .7rem;
  }

  .tc-text {
    font-size: .82rem;
    line-height: 1.65;
    margin-bottom: 1rem;
  }

  .tc-avatar {
    width: 40px;
    height: 40px;
    font-size: .85rem;
  }

  .tc-info .tc-name {
    font-size: .82rem;
  }

  .tc-info .tc-role {
    font-size: .72rem;
  }

  /* --- CTA --- */
  .cta-section {
    padding: 3rem 0;
  }

  .cta-section h2 {
    font-size: 1.5rem;
  }

  .cta-section p {
    font-size: .9rem;
    margin-bottom: 1.5rem;
  }

  .btn-cta-white {
    padding: .75rem 1.8rem;
    font-size: .92rem;
  }

  /* --- Footer --- */
  .main-footer {
    padding: 2.5rem 0 0;
  }

  .footer-col h4 {
    font-size: .95rem;
    margin-bottom: 1rem;
  }

  .footer-col p {
    font-size: .82rem;
  }

  .footer-col ul li a {
    font-size: .82rem;
  }

  .footer-social a {
    width: 34px;
    height: 34px;
    font-size: .85rem;
  }

  /* Footer: 1 column at this breakpoint */
  .main-footer .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .main-footer .footer-col:last-child {
    margin-bottom: 0;
  }

  .footer-bottom {
    padding: 1rem 0;
    margin-top: 2rem;
    font-size: .78rem;
  }

  /* --- WhatsApp & Back to Top --- */
  .whatsapp-float {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    bottom: 16px;
    right: 16px;
  }

  .back-to-top {
    bottom: 74px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: .9rem;
  }

  /* --- Section Tag (shared) --- */
  .section-title {
    font-size: 1.6rem;
  }

  /* --- Modal --- */
  .modal-box-success {
    padding: 2rem 1.5rem;
    width: 92%;
  }

  .modal-box-success h3 {
    font-size: 1.3rem;
  }

  .modal-box-success p {
    font-size: .85rem;
  }

  /* --- Contact form full width (for contact.html) --- */
  .contact-form-section .form-control,
  .contact-form-section textarea {
    width: 100%;
  }
}

/* ===========================================
   4. MOBILE — max-width: 576px
   =========================================== */
@media (max-width: 576px) {

  /* --- Navbar --- */
  .nav-logo {
    font-size: 1.2rem;
  }

  .main-nav.scrolled {
    padding: .45rem 0;
  }

  .mobile-nav {
    width: 260px;
    padding: 1.5rem 1.2rem;
  }

  .mobile-nav ul li a {
    font-size: 1rem;
  }

  /* --- Hero --- */
  .hero-section {
    padding: 90px 0 40px;
  }

  .hero-section h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .hero-badge {
    font-size: .7rem;
    padding: .35rem .8rem;
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: .88rem;
    line-height: 1.65;
    margin-bottom: 1.3rem;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    padding: .75rem 1.5rem;
    font-size: .9rem;
    justify-content: center;
    width: 100%;
  }

  .hero-visual {
    min-height: 220px;
    margin-top: 1rem;
  }

  .marketing-dashboard {
    max-width: 260px;
    padding: 1rem;
    border-radius: 14px;
  }

  .dash-title {
    font-size: .75rem;
  }

  .dash-grid {
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
  }

  .dash-card {
    padding: .65rem;
    border-radius: 10px;
  }

  .dash-card .dash-value {
    font-size: .95rem;
  }

  .dash-card .dash-label {
    font-size: .6rem;
  }

  .dash-bar {
    margin-top: .7rem;
    height: 6px;
  }

  .float-badge {
    font-size: .65rem;
    padding: .35rem .5rem;
    border-radius: 8px;
    gap: .3rem;
  }

  .float-badge i {
    font-size: .8rem;
  }

  .fb-right { display: none; }

  .float-social {
    width: 28px;
    height: 28px;
    font-size: .75rem;
    border-radius: 7px;
  }

  .fs-ig { display: none; }

  /* --- Marquee --- */
  .marquee-section {
    padding: 1.2rem 0;
  }

  .marquee-heading {
    font-size: .7rem;
    letter-spacing: 1.5px;
  }

  .marquee-pill {
    font-size: .75rem;
    padding: .4rem .8rem;
    margin: 0 .3rem;
  }

  /* --- Services --- */
  .services-section {
    padding: 3rem 0;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .section-subtitle {
    font-size: .85rem;
    margin-bottom: 1.8rem;
  }

  .service-card {
    padding: 1.3rem 1.1rem;
    border-radius: 16px;
  }

  .service-icon {
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
  }

  .service-card h3 {
    font-size: .95rem;
    margin-bottom: .4rem;
  }

  .service-card p {
    font-size: .8rem;
    line-height: 1.6;
    margin-bottom: .8rem;
  }

  .service-link {
    font-size: .82rem;
  }

  /* --- Why Choose Us --- */
  .why-section {
    padding: 3rem 0;
  }

  .why-left {
    margin-bottom: 1.5rem;
  }

  .why-visual-card {
    max-width: 100%;
    padding: 1.3rem;
    border-radius: 16px;
  }

  .wv-box {
    padding: .7rem;
    border-radius: 10px;
  }

  .wv-num {
    font-size: 1.1rem;
  }

  .wv-lbl {
    font-size: .6rem;
  }

  .wv-bar-item span:first-child {
    font-size: .68rem;
    min-width: 55px;
  }

  .wv-bar-track {
    height: 6px;
  }

  .why-right h2 {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }

  .why-list li {
    font-size: .82rem;
    gap: .6rem;
    margin-bottom: .7rem;
  }

  .why-check {
    width: 24px;
    height: 24px;
    font-size: .65rem;
  }

  /* --- Process --- */
  .process-section {
    padding: 3rem 0;
  }

  .process-step {
    gap: .8rem;
    margin-bottom: 1.5rem;
  }

  .step-circle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: .9rem;
    border-width: 2px;
  }

  .step-name {
    font-size: .85rem;
  }

  .step-desc {
    font-size: .75rem;
    line-height: 1.5;
  }

  /* --- Statistics --- */
  .stats-section {
    padding: 2.5rem 0;
  }

  .stat-item {
    padding: .8rem 0;
  }

  .stat-icon {
    width: 46px;
    height: 46px;
    font-size: 1rem;
    margin-bottom: .5rem;
  }

  .stat-number {
    font-size: 1.7rem;
  }

  .stat-label {
    font-size: .72rem;
    margin-top: .15rem;
  }

  /* --- Testimonials --- */
  .testimonials-section {
    padding: 3rem 0;
  }

  .testimonial-card {
    padding: 1.1rem;
    border-radius: 16px;
  }

  .tc-text {
    font-size: .78rem;
    line-height: 1.6;
    margin-bottom: .8rem;
  }

  .tc-client {
    gap: .6rem;
  }

  .tc-avatar {
    width: 36px;
    height: 36px;
    font-size: .75rem;
  }

  .tc-info .tc-name {
    font-size: .78rem;
  }

  .tc-info .tc-role {
    font-size: .68rem;
  }

  /* --- CTA --- */
  .cta-section {
    padding: 2.5rem 0;
  }

  .cta-section h2 {
    font-size: 1.3rem;
    margin-bottom: .4rem;
  }

  .cta-section p {
    font-size: .82rem;
    margin-bottom: 1.2rem;
  }

  .btn-cta-white {
    padding: .65rem 1.5rem;
    font-size: .85rem;
  }

  /* --- Footer --- */
  .main-footer {
    padding: 2rem 0 0;
  }

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

  .footer-col h4 {
    font-size: .9rem;
    margin-bottom: .8rem;
  }

  .footer-col p {
    font-size: .78rem;
    line-height: 1.6;
  }

  .footer-col ul li {
    margin-bottom: .4rem;
  }

  .footer-col ul li a {
    font-size: .78rem;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-social a {
    width: 32px;
    height: 32px;
    font-size: .8rem;
    border-radius: 8px;
  }

  .footer-bottom {
    padding: .8rem 0;
    margin-top: 1.5rem;
    font-size: .72rem;
    flex-direction: column;
    gap: .3rem;
  }

  /* --- WhatsApp & Back to Top --- */
  .whatsapp-float {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    bottom: 14px;
    right: 14px;
  }

  .back-to-top {
    bottom: 66px;
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: .8rem;
  }

  /* --- Modal --- */
  .modal-box-success {
    padding: 1.8rem 1.2rem;
    border-radius: 16px;
  }

  .checkmark-circle {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .modal-box-success h3 {
    font-size: 1.15rem;
  }

  .modal-box-success p {
    font-size: .8rem;
    margin-bottom: 1.2rem;
  }

  .btn-thank-you {
    padding: .6rem 1.5rem;
    font-size: .85rem;
  }

  /* --- Section Tag --- */
  .section-tag {
    font-size: .68rem;
    padding: .3rem .8rem;
    letter-spacing: 1px;
  }
}

/* ===========================================
   5. VERY SMALL — max-width: 375px
   =========================================== */
@media (max-width: 375px) {

  /* --- Hero --- */
  .hero-section h1 {
    font-size: 1.55rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: .82rem;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    padding: .65rem 1.2rem;
    font-size: .82rem;
  }

  .hero-visual {
    min-height: 190px;
  }

  .marketing-dashboard {
    max-width: 230px;
    padding: .8rem;
  }

  .dashboard-header span {
    width: 8px;
    height: 8px;
  }

  .dash-title {
    font-size: .68rem;
    margin-bottom: .7rem;
  }

  .dash-grid {
    gap: .35rem;
  }

  .dash-card {
    padding: .5rem;
  }

  .dash-card .dash-value {
    font-size: .82rem;
  }

  .dash-card .dash-label {
    font-size: .55rem;
  }

  .float-badge {
    font-size: .58rem;
    padding: .3rem .45rem;
    border-radius: 7px;
  }

  .float-social {
    width: 24px;
    height: 24px;
    font-size: .65rem;
    border-radius: 6px;
  }

  .fs-gg { display: none; }

  /* --- Section Titles --- */
  .section-title {
    font-size: 1.25rem;
  }

  .section-subtitle {
    font-size: .8rem;
  }

  /* --- Services --- */
  .services-section {
    padding: 2.5rem 0;
  }

  .service-card {
    padding: 1.1rem 1rem;
    border-radius: 14px;
  }

  .service-icon {
    width: 42px;
    height: 42px;
    font-size: 1rem;
    border-radius: 10px;
    margin-bottom: .8rem;
  }

  .service-card h3 {
    font-size: .88rem;
  }

  .service-card p {
    font-size: .75rem;
  }

  /* --- Why Choose Us --- */
  .why-section {
    padding: 2.5rem 0;
  }

  .why-right h2 {
    font-size: 1.25rem;
  }

  .why-list li {
    font-size: .78rem;
    margin-bottom: .6rem;
  }

  .why-check {
    width: 22px;
    height: 22px;
    font-size: .6rem;
  }

  /* --- Process --- */
  .process-section {
    padding: 2.5rem 0;
  }

  .process-step {
    gap: .6rem;
    margin-bottom: 1.2rem;
  }

  .step-circle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: .82rem;
  }

  .step-name {
    font-size: .8rem;
  }

  .step-desc {
    font-size: .7rem;
  }

  /* --- Statistics --- */
  .stats-section {
    padding: 2rem 0;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: .9rem;
    margin-bottom: .4rem;
  }

  .stat-number {
    font-size: 1.45rem;
  }

  .stat-label {
    font-size: .65rem;
  }

  /* --- Testimonials --- */
  .testimonials-section {
    padding: 2.5rem 0;
  }

  .testimonial-card {
    padding: 1rem;
    border-radius: 14px;
  }

  .tc-stars {
    font-size: .72rem;
  }

  .tc-text {
    font-size: .72rem;
    line-height: 1.55;
  }

  .tc-avatar {
    width: 32px;
    height: 32px;
    font-size: .7rem;
  }

  .tc-info .tc-name {
    font-size: .72rem;
  }

  .tc-info .tc-role {
    font-size: .62rem;
  }

  /* --- CTA --- */
  .cta-section {
    padding: 2rem 0;
  }

  .cta-section h2 {
    font-size: 1.15rem;
  }

  .cta-section p {
    font-size: .78rem;
  }

  .btn-cta-white {
    padding: .6rem 1.3rem;
    font-size: .82rem;
  }

  /* --- Footer --- */
  .footer-col h4 {
    font-size: .82rem;
  }

  .footer-col p,
  .footer-col ul li a {
    font-size: .72rem;
  }

  .footer-bottom {
    font-size: .68rem;
  }

  /* --- WhatsApp & Back to Top --- */
  .whatsapp-float {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    bottom: 12px;
    right: 12px;
  }

  .back-to-top {
    bottom: 62px;
    right: 12px;
    width: 34px;
    height: 34px;
    font-size: .75rem;
  }

  /* --- Mobile Nav --- */
  .mobile-nav {
    width: 240px;
    padding: 1.3rem 1rem;
  }

  .mobile-nav ul li {
    margin-bottom: .8rem;
  }

  .mobile-nav ul li a {
    font-size: .92rem;
  }

  .mobile-nav .nav-cta {
    font-size: .85rem;
    padding: .55rem 1.2rem;
    margin-top: 1.2rem;
  }

  /* --- Contact form inputs full width --- */
  .contact-form-section input,
  .contact-form-section textarea,
  .contact-form-section select {
    width: 100% !important;
  }
}

/* ===========================================
   TOUCH DEVICES — hover: none
   =========================================== */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot,
  .cursor-outline {
    display: none !important;
  }
}

/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {

  /* Hide non-essential UI */
  .main-nav,
  .mobile-nav,
  .mobile-overlay,
  .hamburger,
  .whatsapp-float,
  .back-to-top,
  .page-loader,
  .scroll-progress,
  .cursor-dot,
  .cursor-outline,
  .main-footer,
  .cta-section,
  .modal-overlay-success {
    display: none !important;
  }

  /* Reset fixed positioning */
  .hero-section {
    min-height: auto !important;
    padding-top: 1rem !important;
  }

  body {
    color: #000 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  a {
    text-decoration: underline !important;
    color: #000 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: .8rem;
    color: #555 !important;
  }

  .hero-section h1,
  .section-title,
  .cta-section h2 {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }

  .hero-gradient-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #000 !important;
  }

  /* Force visible content */
  * {
    animation: none !important;
    transition: none !important;
  }

  .services-section,
  .why-section,
  .process-section,
  .stats-section,
  .testimonials-section {
    page-break-inside: avoid;
  }
  /* ==========================================================
   MOBILE FIXES - ADD THIS AT THE END OF YOUR CSS
   ========================================================== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

img,
video,
iframe,
svg,
canvas{
    max-width:100%;
    height:auto;
}

/* Prevent Bootstrap overflow */
.container,
.container-fluid,
.row{
    max-width:100%;
}

/* ===============================
   MOBILE FIX
================================ */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    section{
        overflow:hidden;
    }

    /* Hero Layout */

    .hero-section{
        padding-top:110px !important;
        min-height:auto !important;
    }

    .hero-section .row{
        align-items:center;
    }

    .hero-section h1{
        width:100%;
    }

    .hero-subtitle{
        width:100%;
    }

    /* Dashboard */

    .hero-visual{
        min-height:auto !important;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-top:25px;
    }

    .marketing-dashboard{
        width:100% !important;
        max-width:330px !important;
        transform:none !important;
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
    }

    /* Floating badges */

    .float-badge,
    .float-social,
    .why-stat-float{

        display:none !important;
    }

    /* Remove transform from animated objects */

    [data-aos]{
        transform:none !important;
    }

    /* Dashboard Grid */

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

    /* Services */

    .service-card{
        width:100%;
    }

    /* Buttons */

    .btn-hero-primary,
    .btn-hero-outline,
    .btn-cta-white{

        width:100%;
        justify-content:center;
    }

    /* Fix all absolute positioned elements */

    .hero-section *{
        max-width:100%;
    }

}

/* ===============================
   SMALL MOBILE
================================ */

@media (max-width:576px){

    .container{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .marketing-dashboard{

        max-width:100% !important;
    }

    .dash-grid{

        grid-template-columns:1fr;
    }

    .hero-buttons{

        width:100%;
    }

}

/* ===============================
   FORCE REMOVE HORIZONTAL SCROLL
================================ */

@media (max-width:768px){

    div,
    section,
    article,
    aside,
    nav{

        max-width:100%;
    }

    [style*="left:"],
    [style*="right:"]{

        left:auto !important;
        right:auto !important;
    }

}
}