/*
 * STANDARD RESPONSIVE MEDIA QUERIES
 * michaelvandepoppe.com
 * 
 * Breakpoints:
 * - Extra Small (XS): 320px - 480px (phones)
 * - Small (SM): 480px - 768px (landscape phones, small tablets)
 * - Medium (MD): 768px - 1024px (tablets, small laptops)
 * - Large (LG): 1024px - 1440px (desktops)
 * - Extra Large (XL): 1440px+ (large desktops)
 */

/* ============================================================================
   MOBILE FIRST BASE STYLES (320px and up)
   Default mobile styling
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: clamp(14px, 2.5vw, 18px);
  line-height: 1.6;
  color: #333;
}

/* ============================================================================
   SMALL PHONES (320px - 480px)
   Extra Small devices
   ============================================================================ */

@media (min-width: 320px) and (max-width: 479.98px) {
  .header-container {
    padding-left: 3rem;
  }

  #comp-lt8r4pvr {
    height: 450px !important;
  }


  .header-hero-logo {
    position: relative;
    top: 20rem;
    left: -4rem;
    width: 700px;
    height: auto;
    z-index: 1 !important;
  }

  .header-written-logo {
    display: none;
  }

  .hero-name {
    padding-left: 9rem;
    margin-top: -12rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-name > h1 {
    width: 100%;
    font-size: clamp(3rem, 10vw, 4rem);
    margin-top: 13rem;
  }

  .social-icons,
  .see-ventures,
  .hidden-third {
    display: none !important;
  }

  .second-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    margin: 0 !important;
    width: 100vw !important;
  }

  .third-section {
    margin: 0 !important;
    width: 100vw !important;
    display: grid !important;
    grid-template-rows: auto 470px;
  }

  .third-item {
    width: 100% !important;
  }

  .h2-text {
    font-size: 32px;
  }

  .third-text-container,
  .h2-container,
  .fourth-text-container {
    margin: 1rem 0 !important;
    width: 100% !important;
    padding: 0 4vw !important;
    left: 0 !important;
  }

  .third-btn-container {
    margin: 1rem 0 !important;
  }

  .third-text {
    font-size: 16px;
    max-width: 100% !important;
  }

  .third-btn {
    font-size: 1.2rem !important;
    padding: 1rem 2rem !important;
    margin-left: 3vw;
    color: #fff;
  }

  .third-img-container {
    min-height: 80vh !important;
    margin-bottom: 5rem !important;
  }

  .third-img1 {
    width: 90% !important;
    height: 383px !important;
    margin: 0 !important;
    left: 6vw !important;
  }

  .third-img2 {
    display: none !important;
  }

  .third-img2 div * {
    object-fit: contain !important;
  }

  .fourth-section {
    margin: 0 !important;
    width: 100vw !important;
    display: grid !important;
    grid-template-rows: 300px auto;
  }

  .form-section {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 3rem;
  }

  .form-wrapper {
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    left: 0 !important;
  }

  .form-wrapper > * {
    width: 100% !important;
  }

  form,
  form > div {
    width: 100% !important;
  }

  .form-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 clamp(0.5rem, 2vw, 1rem) !important;
    gap: clamp(0.5rem, 1.5vw, 1rem) !important;
    margin: 0 !important;
  }

  .first-name {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .first-name div input {
    width: 100% !important;
  }

  .last-name {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .text-box {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .custom-input {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    height: clamp(3rem, 10vh, 5rem) !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
  }

  .custom-input > * {
    padding: clamp(0.5rem, 1.5vh, 1rem) clamp(0.75rem, 2vw, 1.25rem) !important;
    width: 100% !important;
    height: 100% !important;
    font-size: clamp(1rem, 3.2vw, 2.3rem) !important;
  }

  .text-area {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    height: clamp(6rem, 20vh, 9rem) !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
    padding: clamp(0.75rem, 2vh, 1.25rem) clamp(0.75rem, 2vw, 1.25rem) !important;
    font-size: clamp(1rem, 3.2vw, 2.3rem) !important;
  }

  .send-btn-wrapper {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
    left: 0 !important;
  }

  .send-btn {
    height: clamp(3rem, 10vh, 5rem) !important;
    left: auto !important;
    width: 100% !important;
  }

  .send-btn > * {
    font-size: clamp(1rem, 3.2vw, 1.3rem) !important;
  }

  .get-in-touch-wrapper {
    min-height: 40vh !important;
  }

   .footer-target {
    width: 30% !important;
  }
}

/* ============================================================================
   SMALL TABLETS & LANDSCAPE PHONES (480px - 768px)
   Small devices
   ============================================================================ */

@media (min-width: 480px) and (max-width: 767.98px) {
  .header-container {
    padding-left: 3rem;
  }

  #comp-lt8r4pvr {
    height: 600px !important;
  }

  .header-hero-logo {
    position: relative;
    top: 20rem;
    left: -4rem;
    width: 700px;
    height: auto;
    z-index: 1 !important;
  }

  .header-written-logo {
    display: none;
  }

  .hero-name {
    padding-left: 9rem;
    margin-top: -12rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-name > h1 {
    width: 100%;
    font-size: 66px;
    line-break: auto;
    position: relative !important;
    margin-top: 13rem;
  }

  .social-icons,
  .see-ventures,
  .hidden-third {
    display: none !important;
  }

  .second-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    margin: 0 !important;
    width: 100vw !important;
  }

  .third-section {
    margin: 0 !important;
    width: 100vw !important;
    display: grid !important;
    grid-template-rows: auto 600px;
  }

  .third-item {
    width: 100% !important;
  }

  .h2-text {
    font-size: 32px;
  }

  .third-text-container,
  .h2-container,
  .fourth-text-container {
    margin: 1rem 0 !important;
    width: 100% !important;
    padding: 0 4vw !important;
    left: 0 !important;
  }

  .third-btn-container {
    margin: 1rem 0 !important;
  }

  .third-text {
    font-size: 16px;
    max-width: 100% !important;
  }

  .third-btn {
    font-size: 1.2rem !important;
    padding: 1rem 2rem !important;
    margin-left: 3vw;
    color: #fff;
  }

  .third-img-container {
    min-height: 80vh !important;
    margin-bottom: 5rem !important;
  }

  .third-img1 {
    width: 90% !important;
    height: 383px !important;
    margin: 0 !important;
    left: 6vw !important;
  }

  .third-img2 {
    width: 35% !important;
    height: fit-content !important;
    position: absolute !important;
    top: 180vh;
    left: 3vw !important;
  }

  .third-img2 div * {
    object-fit: contain !important;
  }

  .fourth-section {
    margin: 0 !important;
    width: 100vw !important;
    display: grid !important;
    grid-template-rows: 300px auto;
  }

  .form-section {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 3rem;
  }

  .form-wrapper {
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    left: 0 !important;
  }

  .form-wrapper > * {
    width: 100% !important;
  }

  form,
  form > div {
    width: 100% !important;
  }

  .form-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 clamp(0.5rem, 2vw, 1rem) !important;
    gap: clamp(0.5rem, 1.5vw, 1rem) !important;
    margin: 0 !important;
  }

  .first-name {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .first-name div input {
    width: 100% !important;
  }

  .last-name {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .text-box {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .custom-input {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    height: clamp(3rem, 10vh, 5rem) !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
  }

  .custom-input > * {
    padding: clamp(0.5rem, 1.5vh, 1rem) clamp(0.75rem, 2vw, 1.25rem) !important;
    width: 100% !important;
    height: 100% !important;
    font-size: clamp(1rem, 3.2vw, 2.3rem) !important;
  }

  .text-area {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    height: clamp(6rem, 20vh, 9rem) !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
    padding: clamp(0.75rem, 2vh, 1.25rem) clamp(0.75rem, 2vw, 1.25rem) !important;
    font-size: clamp(1rem, 3.2vw, 2.3rem) !important;
  }

  .send-btn-wrapper {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
    left: 0 !important;
  }

  .send-btn {
    height: clamp(3rem, 10vh, 5rem) !important;
    left: auto !important;
    width: 100% !important;
  }

  .send-btn > * {
    font-size: clamp(1rem, 3.2vw, 1.3rem) !important;
  }

  .get-in-touch-wrapper {
    min-height: 40vh !important;
  }

   .footer-target {
    width: 30% !important;
  }
}

/* ============================================================================
   TABLETS (768px - 1024px)
   Medium devices
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1023.98px) {
  
  .header-container {
    width: 100% !important;
    padding-left: 20rem;
    box-sizing: border-box !important;
  }

  .header-hero-logo {
    position: relative;
    top: 20rem;
    left: 5rem;
    width: 1000px;
    height: auto;
    z-index: 1 !important;
  }

  .header-written-logo {
    display: none;
  }

  .hero-section {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #hero-section-img {
    height: auto;
    position: absolute;
    right: 0;
  }

  .hero-name {
    padding-left: 10rem;
    margin-top: -10rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-name > h1 {
    width: 100%;
    font-size: 130px;
    margin-top: 7rem;
  }

  .social-icons,
  .see-ventures {
    display: none !important;
  }

  .second-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    margin: 0 !important;
    width: 100vw !important;
  }

  .third-section {
    margin: 0 !important;
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .third-item {
    width: 100% !important;
  }

  .h2-text {
    font-size: 66px !important;
  }

  .third-text-container,
  .h2-container,
  .fourth-text-container {
    margin: 1rem 0 !important;
    width: 100% !important;
    padding: 0 4vw !important;
  }

  .third-btn-container {
    margin: 1rem 0 !important;
  }

  .third-text,
  .fourth-text {
    font-size: 36px;
    max-width: 100% !important;
  }

  .third-btn {
    font-size: 2rem !important;
    padding: 2rem 4rem !important;
    margin-left: 3vw;
    color: #fff;
  }

  .third-img-container {
    margin-bottom: 10rem !important;
  }

  .third-img1 {
    width: 90% !important;
    height: 483px !important;
    margin: 0 !important;
    left: 6vw !important;
  }

  .third-img2 {
    width: 60% !important;
    height: fit-content !important;
    position: absolute !important;
    top: 240vh;
    left: 3vw !important;
  }

  .third-img2 div * {
    object-fit: contain !important;
  }

  .fourth-section {
    margin: 0 !important;
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .form-section {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 6rem;
  }

  .form-wrapper {
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    left: 0 !important;
  }

  .form-wrapper > * {
    width: 100% !important;
  }

  form,
  form > div {
    width: 100% !important;
  }

  .form-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 clamp(0.5rem, 2vw, 1rem) !important;
    gap: clamp(0.5rem, 1.5vw, 1rem) !important;
    margin: 0 !important;
  }

  .first-name {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .first-name div input {
    width: 100% !important;
  }

  .last-name {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .text-box {
    margin: 0 auto !important;
    left: 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
  }

  .custom-input {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    height: clamp(3rem, 10vh, 5rem) !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
  }

  .custom-input > * {
    padding: clamp(0.5rem, 1.5vh, 1rem) clamp(0.75rem, 2vw, 1.25rem) !important;
    width: 100% !important;
    height: 100% !important;
    font-size: clamp(1rem, 3.2vw, 2.3rem) !important;
  }

  .text-area {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    height: clamp(6rem, 20vh, 9rem) !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
    padding: clamp(0.75rem, 2vh, 1.25rem) clamp(0.75rem, 2vw, 1.25rem) !important;
    font-size: clamp(1rem, 3.2vw, 2.3rem) !important;
  }

  .send-btn-wrapper {
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    margin: clamp(0.5rem, 1.5vh, 1rem) auto !important;
    left: 0 !important;
  }

  .send-btn {
    height: clamp(3rem, 10vh, 5rem) !important;
    left: auto !important;
    width: 100% !important;
  }

  .send-btn > * {
    font-size: clamp(1rem, 3.2vw, 1.3rem) !important;
  }

  .mobile-social-icons {
    margin: clamp(1rem, 3vh, 2rem) auto 0 !important;
    width: clamp(18rem, 90vw, 35rem) !important;
    max-width: 90vw !important;
    display: flex !important;
    justify-content: center !important;
  }

  .mobile-social-icons > ul {
    display: flex !important;
    gap: clamp(1rem, 2vw, 2rem) !important;
    justify-content: center !important;
  }

  .mobile-social-icons ul li a {
    width: clamp(4rem, 8vw, 6rem) !important;
    height: clamp(4rem, 8vw, 6rem) !important;
  }

  .social-icon {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
  }

  .footer-target {
    width: 30% !important;
  }

}

/* ============================================================================
   DESKTOPS (1024px - 1440px)
   Large devices
   ============================================================================ */

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .header-container {
    padding-left: 4rem;
  }

  .header-hero-logo {
    position: relative;
    top: 23.5rem;
    left: 25rem;
    width: 1300px;
    height: auto;
    z-index: 1 !important;
  }

  .header-written-logo {
    position: absolute;
    top: 1 !important;
    left: 0 !important;
    width: 234px;
    height: 110px;
  }

  #hero-section-img {
    width: 1550px;
    height: auto;
    position: absolute;
    right: 0;
  }

  .hero-name {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-name > h1 {
    width: 100%;
    font-size: 80px;
  }

  .second-section {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    width: 100% !important;
    place-items: center !important;
  }

  .speak-eng {
    font-size: 56px;
  }

  .third-text {
    font-size: 16px;
  }

  .third-btn {
    color: #fff;
  }

  .mobile-social-icons {
    display: none;
  }

}

/* ============================================================================
   LARGE DESKTOPS (1440px and up)
   Extra Large devices
   ============================================================================ */

@media (min-width: 1440px) {
  .header-hero-logo {
    position: relative;
    top: 23.5rem;
    left: 35rem;
    width: 1300px;
    height: auto;
    z-index: 1 !important;
  }

  .header-written-logo {
    position: absolute;
    top: 1 !important;
    left: 0 !important;
    width: 234px;
    height: 110px;
  }

  #hero-section-img {
    width: 1814px;
    height: 963px;
  }

  .hero-name {
    width: 100% !important;
  }

  .hero-name > h1 {
    width: 100%;
    font-size: 100px;
  }

  .second-section {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem !important;
    width: 100% !important;
    place-items: center !important;
  }

  .speak-eng {
    font-size: 56px;
  }

  .third-text {
    font-size: 16px;
  }

  .third-btn {
    color: #fff;
  }

  .mobile-social-icons {
    display: none;
  }
}

/* ============================================================================
   ORIENTATION-SPECIFIC MEDIA QUERIES
   ============================================================================ */

/* Landscape mode optimizations */
@media (orientation: landscape) and (max-height: 600px) {
  h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }

  p {
    line-height: 1.4;
  }
}

/* Portrait mode optimizations */
@media (orientation: portrait) {
  /* Portrait-specific rules if needed */
}

/* ============================================================================
   HIGH RESOLUTION DISPLAYS (Retina)
   ============================================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for high DPI screens */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
  /* Mobile/Touch device rules */
  button,
  a {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }

  /* Larger touch targets */
  .btn,
  .button {
    padding: 1rem 1.5rem;
    font-size: 16px;
  }
}

/* ============================================================================
   ACCESSIBILITY PREFERENCES
   ============================================================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f5f5f5;
  }

  a {
    color: #4da6ff;
  }
}

/* Light mode preference (explicit) */
@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #333333;
  }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.hidden-xs {
  display: none;
}

@media (min-width: 480px) {
  .hidden-xs {
    display: block;
  }

  .hidden-sm {
    display: none;
  }
}

@media (min-width: 768px) {
  .hidden-sm {
    display: block;
  }

  .hidden-md {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hidden-md {
    display: block;
  }

  .hidden-lg {
    display: none;
  }
}

@media (min-width: 1440px) {
  .hidden-lg {
    display: block;
  }

  .hidden-xl {
    display: none;
  }
}

/* Responsive text alignment */
@media (max-width: 767.98px) {
  .text-left-md {
    text-align: left;
  }

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

  .text-right-md {
    text-align: right;
  }
}

@media (min-width: 768px) {
  .text-left-lg {
    text-align: left;
  }

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

  .text-right-lg {
    text-align: right;
  }
}

/* Responsive margin and padding helpers */
@media (max-width: 479.98px) {
  .p-mobile {
    padding: 1rem;
  }

  .m-mobile {
    margin: 1rem;
  }
}

@media (min-width: 480px) {
  .p-tablet {
    padding: 1.5rem;
  }

  .m-tablet {
    margin: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .p-desktop {
    padding: 2rem;
  }

  .m-desktop {
    margin: 2rem;
  }
}