/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:    hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */

/* ===== BASE TYPOGRAPHY ===== */

/* H1 */
h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    h1 {
        font-size: 32px;
    }
}

/* H2 */
h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    h2 {
        font-size: 26px;
    }
}

/* H3 */
h3 {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    h3 {
        font-size: 22px;
    }
}

/* H4 */
h4 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    h4 {
        font-size: 18px;
    }
}

/* H5 */
h5 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    h5 {
        font-size: 16px;
    }
}

/* H6 */
h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    h6 {
        font-size: 14px;
    }
}

/* Paragraph */
p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    p {
        font-size: 14px;
    }
}

/* ===== TYPOGRAPHY ===== */

/* Hero Headings */
.hero-heading h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 80px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .hero-heading h1 {
        font-size: 40px;
    }
}

/* Hero Subheadings */
.hero-subheading div {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .hero-subheading div {
        font-size: 16px;
    }
}

/* Body Headings */
.body-heading h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #000000;
    font-size: 35px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .body-heading h2 {
        font-size: 25px;
    }
}

/* Body Pre-Headings */
.pre-heading p {
    font-family: "Grape Nuts", Sans-serif !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
    color: #000000 !important;
    font-size: 20px !important;
}

@media (max-width: 768px) {
    .pre-heading {
        font-size: 16px;
    }
}

/* Body Text */
.body-text {
    font-family: 'Inter', sans-serif;
    color: #000000;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .body-text {
        font-size: 14px;
    }
}

/* Body Text List */
.body-text-list p {
    font-family: 'Roboto Slab', serif;
    color: #000000;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .body-text-list p {
        font-size: 13px;
    }
}

/* Footer Text Heading */
.footer-text-heading p {
    font-family: 'Roboto Slab', serif !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

@media (max-width: 768px) {
    .footer-text-heading p {
        font-size: 14px !important;
    }
}

/* Call-out Text Footer */
.call-out-text-footer p {
    color: #FFFFFF !important;
    font-size: 14px !important;
}

/* Call-out Text */
.call-out-text p {
    color: #FFFFFF !important;
    font-size: 16px !important;
}

/* ===== SHARED BUTTON STYLES ===== */

#custom-button {
  width: 250px;         
  height: 50px;         
}

@media (max-width: 768px) {
    #custom-button {
    max-width: 100% !important;
    font-size: 15px !important;
    height: 55px !important;    
    }
}

/* Main Button */
.button-primary {
    background-color: #F16813;
    color: #FFFFFF;
    border-color: #F16813;
}

/* Secondary Button */
.button-secondary {
    background-color: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    border-color: #FFFFFF;
}

/* ===== IMAGE EFFECTS ===== */

/* Black & White Images by Default */
.custom-img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* Restore Color on Hover */
.custom-img:hover {
    filter: grayscale(0%);
}