/*
Theme Name: JJ Gallery
Theme URI: https://github.com/dsgolfside/jjgallery
Author: JJ Gallery
Author URI: https://dremuseum.com
Description: Custom theme for JJ Gallery
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jjgallery
*/

:root {
    --primary-color: #000000;
    --secondary-color: #ffffff;
    --accent-color: #ff0000;
    --text-color: #ffffff;
    --transition-speed: 0.4s;
    --transition-timing: cubic-bezier(0.16, 1, 0.3, 1); /* Resn-style easing */
}

body {
    background-color: transparent;
    color: var(--text-color);
    font-family: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, .menu-item.has-text-effect a, .slide-title h2, h1, h2, h3, h4, h5, h6 {
    font-family: 'neue-haas-grotesk-display', Arial, sans-serif;
    font-weight: 100;
    font-style: normal;
}

.menu-item.has-text-effect a,
.slide-title h2,
h1, h2, h3 {
    font-weight: 100; /* Ultra Thin for hero/menu/headings */
}

.slide-title p, p, .site-footer, .site-header, .site-main {
    font-weight: 300; /* Light or Extra Light for body */
}

/* Modern Slider Styles */
.project-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-container.is-dragging {
    cursor: grabbing !important;
}

.swiper-wrapper {
    align-items: center;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-slide.swiper-slide-active {
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    cursor: grab !important;
    visibility: visible !important;
}

.swiper-slide.swiper-slide-next,
.swiper-slide.swiper-slide-prev {
    transform: scale(0.9);
    opacity: 0.7;
    filter: blur(1px) grayscale(20%);
    z-index: 1;
    pointer-events: auto; /* Allow interaction with nearby slides */
}

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

/* Image Styles */
.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay Content Styles */
.slide-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.slide-overlay-title {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.slide-overlay-description {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Navigation Styles */
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    background: rgba(0,0,0,0.3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(0,0,0,0.6);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px;
}

/* Pagination Styles */
.swiper-pagination {
    bottom: 20px !important;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.5);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #fff;
}

/* Debug Styles */
.slider-debug-info {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-height: 50vh;
    overflow-y: auto;
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 1rem;
    border-radius: 8px;
    z-index: 9999;
    font-family: monospace;
    font-size: 14px;
}

.slider-debug-info h3 {
    margin: 0 0 1rem;
    font-size: 16px;
    font-weight: 600;
}

.slider-debug-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slider-debug-info li {
    margin: 0.5rem 0;
}

.slider-debug-info ul ul {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255,255,255,0.2);
}

.debug-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
}

.debug-btn:hover {
    background: rgba(0,0,0,0.9);
}

.debug-btn[aria-pressed="true"] {
    background: #d4af37;
    color: #000;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .slide-overlay-title {
        font-size: 1.5rem;
    }
    
    .slide-overlay-description {
        font-size: 1rem;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 36px;
        height: 36px;
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .slide-overlay-content {
        padding: 1rem;
    }
    
    .slide-overlay-title {
        font-size: 1.2rem;
    }
    
    .slide-overlay-description {
        font-size: 0.9rem;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 32px;
        height: 32px;
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 14px;
    }
}

/* Menu Styles */
.menu-toggle {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1000;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.menu-toggle-bar {
    width: 32px;
    height: 2px;
    background: #fff;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

/* Fullscreen Menu */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 900;
    display: none;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fullscreen-menu.open {
    display: flex;
    opacity: 1;
}

.fullscreen-menu-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.menu-item {
    position: relative;
    font-family: 'neue-haas-grotesk-display', Arial, sans-serif;
    font-size: clamp(2rem, 8vw, 6rem);
    font-weight: 100;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-item:hover {
    color: #ff0044;
    transform: translateX(10px);
}

.menu-item.has-text-effect {
    position: relative;
    display: inline-block;
}

.menu-item.has-text-effect .text-effect-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .slide-title {
        bottom: 15vh;
        left: 5vw;
        right: 5vw;
        max-width: 90%;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .menu-toggle {
        top: 1rem;
        right: 1rem;
    }

    .swiper-slide {
        width: 90vw;
        height: 50vh;
        max-width: 98vw;
        max-height: 60vh;
    }
}

/* Homepage Hero and Slider */
.gallery-hero {
    width: 100vw;
    height: 56.25vw; /* 16:9 aspect ratio */
    max-height: 80vh; /* Cap the maximum height */
    min-height: 400px; /* Minimum height for smaller screens */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    z-index: 1;
    overflow: hidden;
}
.gallery-hero-content {
    z-index: 2;
    text-align: center;
    color: #fff;
    font-family: 'neue-haas-grotesk-display', Arial, sans-serif;
    font-weight: 100;
    font-size: 12vw;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 1vh;
    text-shadow: 0 2px 32px rgba(0,0,0,0.7);
}
.gallery-hero-sub {
    color: #fff;
    font-size: 2vw;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 4vh;
}
.gallery-slider-section {
    width: 100vw;
    min-height: 60vh;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
@media (max-width: 900px) {
    .gallery-hero-content { font-size: 7vw; }
    .gallery-hero-sub { font-size: 3vw; }
}

/* Hide the site title/branding */
.site-branding {
    display: none;
}

/* Adjust header container for logo-less design */
.header-container {
    display: flex;
    justify-content: flex-end; /* Push menu to the right */
    align-items: center;
    padding: 2rem;
}

.video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-video {
    pointer-events: auto;
}

/* Remove debug outlines and aggressive pointer-events/z-index overrides */
.video-container:hover {
    outline: none !important;
}
.swiper-slide.swiper-slide-active,
.slide-content,
.video-wrapper,
.video-container,
.cf-video {
    pointer-events: auto;
    z-index: auto;
}
.swiper-container,
.swiper-container *,
.swiper-wrapper,
.swiper-wrapper *,
.swiper-slide,
.swiper-slide * {
  pointer-events: auto;
}
/* Remove fullscreen button styles */
.cf-fullscreen-btn {
    display: none !important;
}
.fullscreen-menu,
.fullscreen-menu.open {
    pointer-events: auto !important;
    z-index: 4000 !important;
}
.swiper-button-next,
.swiper-button-prev {
    display: none !important;
}

/* Force slider backgrounds to be transparent */
.project-slider,
.swiper-container,
.swiper-wrapper,
.swiper-slide,
.slide-content,
.project-slider * {
    background: transparent !important;
}

/* Phone Number List Styling */
/* 
   SEO TEXT FOR VANITY NUMBERS:
   Elevate your marketing with premium vanity phone numbers ending in SAVE. These memorable 833-XXX-SAVE numbers are ideal for insurance agencies, financial services, healthcare providers, home improvement contractors, and retail businesses looking to boost customer response. Our toll-free vanity numbers make your marketing campaigns more effective by increasing recall and conversion rates. Whether you need numbers for national insurance marketing, local financial advising, healthcare cost savings, emergency services, or retail discount promotions, these easy-to-remember SAVE numbers create instant brand recognition. Available with various area codes or as toll-free options, these marketing phone numbers provide an immediate competitive advantage in your advertising across digital, print, radio, and television campaigns.
*/
.big-phone-number-list {
    margin: 30px 0;
    padding: 0;
    line-height: 1.8; /* Increased line spacing only */
    color: #d4af37; /* Classic gold */
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); /* Luxurious gold gradient */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 0px 1px rgba(212, 175, 55, 0.1); /* Subtle gold glow */
    font-size: 48px; /* MUCH bigger text */
    white-space: nowrap; /* Prevent line breaks */
    overflow-x: auto; /* Add horizontal scrolling if needed on small screens */
    -webkit-hyphens: none; /* Prevent hyphenation */
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    font-weight: 500; /* Make it a bit bolder for visibility */
    text-align: center; /* Center text horizontally */
    display: block; /* Ensure it's a block element */
    width: 100%; /* Take full width */
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .big-phone-number-list {
        line-height: 1.6;
        font-size: 36px; /* WAY bigger on mobile too */
        white-space: nowrap;
        overflow-x: auto;
        text-align: center; /* Ensure it stays centered on mobile */
    }
}

/* SEO Content Styling - Simple Version */
.seo-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 0;
    font-family: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #000;
    text-align: center;
}

.seo-content p, .seo-paragraph {
    margin: 0 auto 25px;
    font-size: 30px;
    line-height: 1.4;
    font-weight: normal;
    color: #000;
    max-width: 800px;
}

/* Make all links black in SEO content */
.seo-content a,
.seo-paragraph a {
    color: #000;
    text-decoration: none;
}

/* Regular paragraph links - removed black color constraint */
p a {
    text-decoration: none;
}

.seo-content a:hover,
.seo-paragraph a:hover,
p a:hover {
    text-decoration: underline;
}

.seo-content h2 {
    font-size: 36px;
    margin: 40px 0 20px;
    font-weight: 500;
    color: #000;
}

.seo-content h3 {
    font-size: 32px;
    margin: 30px 0 15px;
    font-weight: 500;
    color: #000;
}

.seo-content ul {
    margin-bottom: 25px;
    padding-left: 30px;
}

.seo-content li {
    margin-bottom: 15px;
    font-size: 24px;
    line-height: 1.4;
    color: #000;
}

.seo-content strong {
    font-weight: 500;
}

/* Single Paragraph Styling - Simple Version */
.seo-paragraph {
    font-size: 30px;
    line-height: 1.4;
    margin: 30px auto;
    max-width: 800px;
    font-weight: normal;
    color: #000;
    display: block;
}

@media (max-width: 768px) {
    /* Ensure all text blocks have good side padding */
    .seo-content p,
    .seo-content ul,
    .seo-content ol,
    .seo-content li,
    .seo-content h1,
    .seo-content h2,
    .seo-content h3,
    .seo-content h4,
    .seo-content h5,
    .seo-content h6,
    .seo-paragraph {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    /* Remove padding from images and videos for full-bleed effect */
    .seo-content img,
    .seo-content video {
        padding: 0 !important;
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        max-width: none;
        display: block;
    }
    /* Remove redundant or conflicting rules */
    .seo-content p, .seo-paragraph {
        padding-left: 20px;
        padding-right: 20px;
        /* Remove: padding: 0 20px; */
    }
    .seo-content ul,
    .seo-content ol {
        padding-left: 30px;
        padding-right: 30px;
    }
    .seo-content li {
        padding-left: 10px;
        padding-right: 10px;
    }
    .seo-content p, .seo-paragraph {
        font-size: 18px;
        line-height: 1.5;
        padding: 0 20px;
        margin-bottom: 30px;
    }
    
    .seo-content h2 {
        font-size: 24px;
    }
    
    .seo-content h3 {
        font-size: 20px;
    }
    
    .seo-content li {
        font-size: 18px;
    }
    
    .thin-headline {
        font-size: 38px;
        padding: 0 20px;
        margin: 40px auto 30px;
    }
}

/* Cool Thin Headline Style */
.thin-headline {
    font-family: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 100 !important;
    font-size: 90px !important; /* Much bigger! */
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin: 70px auto 50px !important;
    max-width: 1200px !important;
    text-align: center !important;
    color: #000 !important;
    text-transform: none !important; /* Not all caps */
}

/* Responsive adjustments for the headline */
@media (max-width: 768px) {
    .thin-headline {
        font-size: 46px !important; /* Bigger on mobile too */
        padding: 0 20px !important;
        margin: 40px auto 30px !important;
        line-height: 1.1 !important;
    }
}

/* Title Case Version for Headlines */
.title-case {
    text-transform: none; /* Removes any existing text transform */
}

/* Dramatic Ultra-Thin Headline Style (like "After the Ball is Over") */
.dramatic-headline {
    font-family: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 100 !important; /* Ultra thin */
    font-size: 120px !important; /* Super large! */
    line-height: 1 !important;
    letter-spacing: -0.04em !important; /* Extra tight spacing */
    margin: 100px auto 70px !important;
    max-width: 1400px !important;
    text-align: left !important;
    color: #fff !important; /* White text on dark background */
    text-transform: none !important;
}

@media (max-width: 768px) {
    .dramatic-headline {
        font-size: 60px !important;
        line-height: 1 !important;
        letter-spacing: -0.03em !important;
        margin: 50px auto 40px !important;
        padding: 0 20px !important;
    }
}

/* Elegant Paragraph with Gold Links for Dark Backgrounds */
.elegant-paragraph {
    max-width: 1200px;
    margin: 30px auto;
    font-family: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, sans-serif;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
    padding: 0 20px;
}

/* Explicitly respect WordPress alignment classes */
.has-text-align-center,
.wp-block-paragraph.has-text-align-center,
.elegant-paragraph.has-text-align-center {
    text-align: center !important;
}

.has-text-align-left,
.wp-block-paragraph.has-text-align-left,
.elegant-paragraph.has-text-align-left {
    text-align: left !important;
}

.has-text-align-right,
.wp-block-paragraph.has-text-align-right,
.elegant-paragraph.has-text-align-right {
    text-align: right !important;
}

.elegant-paragraph a {
    color: #d4af37; /* Classic gold color */
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease;
    text-shadow: 0px 0px 1px rgba(212, 175, 55, 0.2);
}

.elegant-paragraph a:hover {
    opacity: 0.8;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.swiper-container:active,
.swiper-slide.swiper-slide-active:active {
    cursor: grabbing !important;
}

/* Make videos and iframes not intercept pointer events for Cloudflare videos */
.swiper-container iframe,
.swiper-slide iframe,
.video-wrapper iframe,
.cf-wrapper iframe {
  pointer-events: none !important;
}

/* Only AWS IVS videos need interaction */
.video-wrapper.ivs-wrapper video {
  pointer-events: auto !important;
}

.slide-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
  z-index: 3000;
  pointer-events: auto;
}

.universal-audio-btn, .universal-play-btn {
  font-size: 2rem;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  border-radius: 2rem;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  pointer-events: auto;
}
.universal-audio-btn[aria-pressed="true"], .universal-play-btn[aria-pressed="true"] {
  background: #d4af37;
  color: #000;
}
.universal-audio-btn .audio-label, .universal-play-btn .play-label {
  font-size: 1.2rem;
  font-family: inherit;
  font-weight: 400;
  margin-left: 0.5rem;
}
.slide-description {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 0.5rem;
  color: #fff;
  max-width: 900px;
}
@media (max-width: 900px) {
  .video-wrapper, .slide-image {
    max-height: 40vh;
  }
  .slide-meta {
    max-width: 95vw;
  }
}
@media (max-width: 600px) {
  .universal-audio-btn, .universal-play-btn {
    font-size: 1.2rem;
    padding: 0.3rem 0.8rem;
    gap: 0.5rem;
  }
  .universal-audio-btn .audio-label, .universal-play-btn .play-label {
    font-size: 1rem;
  }
  .slide-title {
    font-size: 1.5rem;
  }
  .slide-description {
    font-size: 1rem;
  }
}

.slider-controls-bar {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0 0 0;
  z-index: 9999;
  pointer-events: auto;
  position: relative;
}
.universal-audio-btn, .universal-play-btn {
  font-size: 2rem;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  border-radius: 2rem;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  pointer-events: auto;
}
.universal-play-btn .play-icon,
.universal-play-btn .pause-icon {
  color: #fff !important;
  font-size: 2.2rem;
  display: inline-block;
  vertical-align: middle;
}
.universal-audio-btn[aria-pressed="true"], .universal-play-btn[aria-pressed="true"] {
  background: #d4af37;
  color: #000;
}
.universal-audio-btn .audio-label, .universal-play-btn .play-label {
  font-size: 1.2rem;
  font-family: inherit;
  font-weight: 400;
  margin-left: 0.5rem;
}
@media (max-width: 600px) {
  .slider-controls-bar {
    gap: 1rem;
    margin: 1rem 0 0 0;
  }
  .universal-audio-btn, .universal-play-btn {
    font-size: 1.2rem;
    padding: 0.3rem 0.8rem;
    gap: 0.5rem;
  }
  .universal-audio-btn .audio-label, .universal-play-btn .play-label {
    font-size: 1rem;
  }
}

.slide-overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: rgba(0,0,0,0.5);
  padding: 2rem 3rem;
  border-radius: 1.5rem;
  text-align: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
}
.slide-overlay-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 100;
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
}
.slide-overlay-description {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 300;
  margin: 0;
  opacity: 0.85;
}

/* Make sure overlays don't block video clicks */
.slide-overlay-content {
    pointer-events: none;
}

/* Only allow pointer events on interactive elements within overlays */
.slide-overlay-content button,
.slide-overlay-content a,
.slide-overlay-content [role="button"] {
    pointer-events: auto;
}

@media (max-width: 768px) {
  .seo-content ul,
  .seo-content ol {
    padding-left: 30px;
    padding-right: 30px;
  }
  .seo-content li {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6 {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}