/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
footer h4 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}
footer h4::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gk-red-500);
    flex: none;
}
h1 u,
h2 u,
h3 u,
h4 u,
h5 u,
h6 u {
    color: var(--gk-red-500) !important;
    text-decoration: none !important;
}
footer .wd-nav>li>a {
    min-height: 30px !important;
}

.text-justify, .text-justify p {
    text-align: justify !important;
}

/* Home slider. Classes are set in Elementor (Advanced > CSS Classes):
   gk-hero-slider  the slide's outer container; it sits inside .wd-slide,
                   so it follows .wd-slider .wd-slide in the selectors
   gk-slide-bg     slide container that carries the 1320x540 background image
   gk-slide-text   its text column
   gk-slide-art    its art (center image) column
   Slides print their Elementor CSS in the body, after this file, so these
   selectors carry more classes than Elementor's (0,4,0) element rules.
   The image edges are pure slide color, so cropping its sides is safe. */
.wd-slide-container {
    padding-block: 0 !important;
}

/* Tablets (768-1024): the desktop composition, scaled down. The image keeps
   the full slide height (its ribbon is cut at its top and bottom edges) and
   is anchored right, so only its plain left part is cropped. 440px is the
   slider's tablet height (WoodMart slider settings). */
@media (min-width: 768px) and (max-width: 1024px) {
    .wd-slider .wd-slide .gk-hero-slider .e-con.gk-slide-bg {
        min-height: 440px;
        background-size: auto 100%;
        background-position: 100% 50%;
    }

    .wd-slider .wd-slide .gk-hero-slider .e-con.gk-slide-text {
        width: 44%;
        padding: 32px 0 32px 30px;
    }

    .wd-slider .wd-slide .gk-hero-slider .e-con.gk-slide-art {
        width: 56%;
        padding: 24px 0;
    }

    /* The art widget is pulled -250px into the text column on desktop. */
    .wd-slide .gk-hero-slider .gk-slide-art .elementor-widget > .elementor-widget-container {
        margin: 0;
    }

    .wd-slide .gk-hero-slider .gk-slide-art .wd-image img {
        width: 32vw;
    }
}

/* Phones: text on the plain top part, art and ribbon below. The ribbon is
   cut at the image's bottom edge, so the image sits on the slide bottom.
   On narrow phones the image's x 563-1132 band fills the width; from about
   455px the size stops at 80% (1056px) so the ribbon stays below the text.
   The image's top edge is a few shades lighter than the slide color, so the
   slide's mobile background image (Elementor) is a copy with that edge
   faded out. 560px is the slider's mobile height. */
@media (max-width: 767px) {
    .wd-slider .wd-slide .gk-hero-slider .e-con.gk-slide-bg {
        flex-direction: column;
        min-height: 560px;
        background-size: min(232%, 1056px) auto;
        background-position: 75% 100%;
    }

    .wd-slider .wd-slide .gk-hero-slider .e-con.gk-slide-text {
        width: 100%;
        padding: 32px 24px 8px;
    }

    .wd-slider .wd-slide .gk-hero-slider .e-con.gk-slide-art {
        width: 100%;
        padding: 8px 24px 28px;
    }

    .wd-slide .gk-hero-slider .gk-slide-art .elementor-widget > .elementor-widget-container {
        margin: 0;
    }

    .wd-slide .gk-hero-slider .gk-slide-art .wd-image img {
        width: min(62vw, 300px);
    }
}