/*
Theme Name: SCW FOTA
Theme URI: https://cozythemes.com/fotawp/
Template: fotawp
Author: CozyThemes
Author URI: https://cozythemes.com/
Description: FotaWP is a lightweight, block-based, multipurpose WordPress theme designed to be responsive, SEO-friendly, and optimized for speed. It seamlessly integrates with both Full Site Editing (FSE) and your favorite page builder, Elementor. With over 130+ pre-built ready-to-use patterns, more than 40+ advanced Elementor widgets, and 28+ pre-built demos that can be imported with just one click. It is fully compatible with your favorite page builders and plugins, including Elementor, Gutenberg, Yoast SEO, RankMath, Contact Form, Jetpack, WooCommerce, and more. With FotaWP's exceptional support and compatibility with both FSE and Elementor, users can take full control over their site and achieve stunning websites as per their design and requirements, even with zero coding knowledge. Users can redesign and reconstruct their site from scratch with the help of our professionally crafted patterns and demos. With its wide range of features and customization options, FotaWP is suitable for various niches such as agencies, small businesses, corporate entities, startups, home services, HVAC services, education and e-learning platforms, health and fitness centers, insurance services, e-commerce shops and stores (WooCommerce), product catalogue, entertainment and media platforms, magazines, news outlets, bloggers, vloggers, writers, authors, automobile businesses, travel agencies, real estate firms, online courses and learning management systems (LMS), digital marketing agencies, SEO agencies, web agencies, consulting firms, technology companies, cybersecurity experts, public speakers, social media influencers, freelancers, portfolios and galleries, gadgets and technology enthusiasts, charities and nonprofit organizations, restaurants and food cafes, hotels and resorts, colleges, schools, pet care services, gardening and agriculture ventures, photography studios, art and creative studios, and various other professional services. Whether you're a developer or just starting out, FotaWP provides step-by-step documentation, video tutorials, and top-notch support to assist you on your journey. Discover more about FotaWP at https://www.cozythemes.com/fotawp/.
Tags: blog,one-column,custom-background,custom-colors,custom-logo,custom-menu,editor-style,featured-images,e-commerce,full-site-editing,block-patterns,full-width-template,rtl-language-support,threaded-comments,translation-ready,block-styles,wide-blocks
Version: 2.0.3.1762848668
Updated: 2025-11-11 00:11:08

*/
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* MAIN HEADING */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* ================================================== */
/* Heading */
/* ================================================== */

/* ===== <<<<< Comment/Description >>>>> ===== */

:root { 
    --fs-base: 16px;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;
    
    --color-primary:         #1D4ED8;
    --color-secondary:       #28A745;
    --color-primary-light:   #93C5FD;
    --color-secondary-light: #6EE7B7;
    --color-primary-hover:   #153BB1;
    --color-secondary-hover: #218838;
    --color-background:      #FFFFFF;
    --color-background-light:#F3F3F3;
    --color-background-paper:#F5F7FA;
    --color-heading:         #000000;
    --color-sub-heading:     #222222;
    --color-border:          #000000;
    --color-border-light:    #CCCCCC;
    --color-transparent:     rgba(0, 0, 0, 0);
    
    --gradient-primary-top:         linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 60%);
    --gradient-primary-bottom:      linear-gradient(360deg, var(--color-primary-light) 0%, var(--color-primary) 60%);
    --gradient-secondary-top:       linear-gradient(180deg, var(--color-secondary-light) 0%, var(--color-secondary) 60%);
    --gradient-secondary-bottom:    linear-gradient(360deg, var(--color-secondary-light) 0%, var(--color-secondary) 60%);
    --gradient-fade-top:            linear-gradient(180deg, var(--color-background) 0%, var(--color-primary-light) 60%);
    --gradient-fade-bottom:         linear-gradient(360deg, var(--color-background) 0%, var(--color-primary-light) 60%);

}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* TYPOGRAPHY */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* ================================================== */
/* Headings */
/* ================================================== */
h1, h2, h3, h4, h5, h6, .wp-block-heading { font-family: var(--font-heading); color: var(--color-heading); text-transform: capitalize; margin: 0; }

h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);        line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);         line-height: 1.15; }
h3 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);    line-height: 1.2; }
h4 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);     line-height: 1.25; }
h5 { font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);  line-height: 1.3; }
h6 { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);       line-height: 1.35; }

h1.large { font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);     line-height: 1.05; }
h2.large { font-size: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);  line-height: 1.1; }
h3.large { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);    line-height: 1.15; }
h4.large { font-size: clamp(1.55rem, 1.25rem + 1.5vw, 2.1rem); line-height: 1.2; }
h5.large { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);   line-height: 1.25; }
h6.large { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);    line-height: 1.3; }

h1.small { font-size: clamp(1.7rem, 1.2rem + 2vw, 3rem); line-height: 1.15; }
h2.small { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.2; }
h3.small { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); line-height: 1.25; }
h4.small { font-size: clamp(1.1rem, 0.95rem + 0.85vw, 1.55rem); line-height: 1.3; }
h5.small { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem); line-height: 1.35; }
h6.small { font-size: clamp(0.9rem, 0.85rem + 0.4vw, 1.1rem); line-height: 1.4; }

.site-title-heading { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);     line-height: 1.25; }

/* ================================================== */
/* Paragraphs & Body Text */
/* ================================================== */
body            { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); line-height: 1.55; font-family: var(--font-body); color: var(--color-sub-heading); }
.small, small   { font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem); line-height: 1.45; }
.large          { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.45; }
.no-wrap        { white-space: nowrap; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select
{ font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem); line-height: 1.3; padding: clamp(0.6rem, 0.45rem + 0.5vw, 0.9rem); }

/* ===== <<<<< Removes the underline in all links >>>>> ===== */
a { text-decoration: none !important; }
.wp-block-site-title:hover > a { color: var(--color-subheading); }

/* ================================================== */
/* TYPOGRAPHY CUSTOM CLASSES */
/* ================================================== */
.is-style-color-primary             { color: var(--color-primary); }
.is-style-color-secondary           { color: var(--color-secondary); }
.is-style-color-white               { color: #FFFFFF; }
.is-style-preheading                { color: var(--color-primary); text-transform: uppercase; letter-spacing: 4px; font-weight: 400; }
.is-style-preheading-tight          { color: var(--color-primary); text-transform: uppercase; letter-spacing: 2px; font-weight: 400; }
.is-style-preheading-bold           { color: var(--color-primary); text-transform: uppercase; letter-spacing: 4px; font-weight: 700; }
.is-style-preheading-bold-tight     { color: var(--color-primary); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.is-style-preheading-button         { background: var(--gradient-primary-top); padding: 3px 10px; text-transform: uppercase; font-weight: 700; color: #FFFFFF; border-radius: 30px; }

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* 'BUTTONS' */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.wp-block-button .wp-block-button__link {
    font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.1rem);
    padding: clamp(0.5rem, 0.35rem + 0.6vw, 0.9rem) clamp(0.9rem, 0.7rem + 1vw, 1.4rem);
    text-transform: capitalize;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.wp-block-button.small .wp-block-button__link {
    font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.95rem);
    padding: clamp(0.35rem, 0.25rem + 0.4vw, 0.7rem) clamp(0.7rem, 0.6rem + 0.8vw, 1.1rem);
}

/* ================================================== */
/* Radius Adjustments */
/* ================================================== */
.wp-block-button.rad-3  .wp-block-button__link { border-radius: 3px; }
.wp-block-button.rad-5  .wp-block-button__link { border-radius: 5px; }
.wp-block-button.rad-10 .wp-block-button__link { border-radius: 10px; }
.wp-block-button.rad-30 .wp-block-button__link { border-radius: 30px; }

/* ================================================== */
/* BUTTONS CUSTOM CLASSES */
/* ================================================== */
.wp-block-button.is-style-button-primary .wp-block-button__link         { background-color: var(--color-primary); }
.wp-block-button.is-style-button-primary .wp-block-button__link:hover   { background-color: var(--color-primary-hover); }
.wp-block-button.is-style-button-secondary .wp-block-button__link       { background-color: var(--color-secondary); }
.wp-block-button.is-style-button-secondary .wp-block-button__link:hover { background-color: var(--color-secondary-hover); }
.wp-block-button.is-style-outline .wp-block-button__link                { background-color: transparent; border: 1px solid }
.wp-block-button.is-style-outline .wp-block-button__link:hover          { background-color: var(--color-background-light); }
.is-style-button-white .wp-block-button__link                           { background-color: #FFFFFF; color: var(--color-primary); }
.is-style-button-white .wp-block-button__link:hover                     { background-color: var(--color-background-light); color: #000000; }
.is-style-button-text-primary .wp-block-button__link                    { color: var(--color-primary); background-color: transparent; padding: 0; margin: 0; }
.is-style-button-text-primary .wp-block-button__link:hover              { color: var(--color-primary-hover); }
.is-style-button-text-secondary .wp-block-button__link                  { color: var(--color-secondary); background-color: transparent; padding: 0; margin: 0; }
.is-style-button-text-secondary .wp-block-button__link:hover            { color: var(--color-secondary-hover); }
.is-style-button-text-white .wp-block-button__link                      { color: #FFFFFF; background-color: transparent; padding: 0; margin: 0; }
.is-style-button-text-white .wp-block-button__link:hover                { color: var(--color-background-light); }
.is-style-button-preheading .wp-block-button__link                      { background: var(--gradient-primary-top); padding: 3px 10px; color: #FFFFFF; }
.is-style-button-preheading-white .wp-block-button__link                { background: var(--gradient-fade-top); padding: 3px 10px; color: #000000; }

/* ================================================== */
/* 'Download' Button for FILE DOWNLOAD block */
/* ================================================== */
.wp-block-file__button {
    padding: 6px 6px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    border: 1px solid black;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-right: 10px;
    background-color: var(--color-background-light);
    color: #000000;
}
.wp-block-file__button:hover { background-color: #E0E0E0; color: #000000; }

/* ================================================== */
/* Fluent Forms Buttons */
/* ================================================== */
.ff-btn-submit, .ff-btn-next, .ff-btn-prev {
    font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.95rem);
    padding: clamp(0.35rem, 0.25rem + 0.4vw, 0.7rem) clamp(0.7rem, 0.6rem + 0.8vw, 1.1rem);
    text-transform: capitalize;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid transparent;
    border-radius: 5px;
}
.ff-btn-submit, .ff-btn-next        {background-color: var(--color-primary) !important;}
.ff-btn-submit, .ff-btn-next:hover  {background-color: var(--color-primary-hover) !important;}
.ff-btn-prev        {background-color: var(--color-secondary) !important;}
.ff-btn-prev:hover  {background-color: var(--color-secondary-hover) !important;}



/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* 'GROUP' | 'COLUMNS' | 'COLUMN' | 'ROW' BLOCK STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.fluid-80 { width: clamp(80%, 1200px, 90%); margin-inline: auto; }
.fluid-60 { width: clamp(60%, 600px, 90%); margin-inline: auto; }
.fluid-40 { width: clamp(40%, 400px, 90%); margin-inline: auto; }

.wp-block-columns { align-items: stretch; }


/* ================================================== */
/* Alignment/Justify Adjustments */
/* ================================================== */
.align-left         { text-align: left; }
.align-center       { text-align: center; }
.align-right        { text-align: right; }
.justify-left       { justify-content: flex-start; }
.justify-center     { justify-content: center; }
.justify-right      { justify-content: flex-end; }

/* ================================================== */
/* Radius Adjustments */
/* ================================================== */
.rad-3 { border-radius: 3px; }
.rad-5 { border-radius: 5px; }
.rad-10 { border-radius: 10px; }
.rad-30 { border-radius: 30px; }
.rounded { border-radius: 50%; aspect-ratio: 1/1; overflow: hidden; }

/* ================================================== */
/* WIDTH Adjustments - INNER */
/* ================================================== */
.inner-100          { padding-inline: 0%; }
.inner-90           { padding-inline: 5%; }
.inner-80           { padding-inline: 10%; }
.inner-70           { padding-inline: 15%; }
.inner-60           { padding-inline: 20%; }
.inner-50           { padding-inline: 25%; }
.inner-40           { padding-inline: 30%; }

/* ================================================== */
/* WIDTH Adjustments - OUTER */
/* ================================================== */
.width-10   { width: 10% !important; margin-inline: auto; }              .height-10   { height: 10% !important; }
.width-20   { width: 20% !important; margin-inline: auto; }              .height-20   { height: 20% !important; }
.width-30   { width: 30% !important; margin-inline: auto; }              .height-30   { height: 30% !important; }
.width-40   { width: 40% !important; margin-inline: auto; }              .height-40   { height: 40% !important; }
.width-60   { width: 60% !important; margin-inline: auto; }              .height-60   { height: 60% !important; }
.width-70   { width: 70% !important; margin-inline: auto; }              .height-70   { height: 70% !important; }
.width-80   { width: 80% !important; margin-inline: auto; }              .height-80   { height: 80% !important; }
.width-90   { width: 90% !important; margin-inline: auto; }              .height-90   { height: 90% !important; }
.width-100  { width: 100% !important; margin-inline: auto; }             .height-100  { height: 100% !important; }
.width-25   { width: 25% !important; margin-inline: auto; }              .height-25   { height: 25% !important; }
.width-50   { width: 50% !important; margin-inline: auto; }              .height-50   { height: 50% !important; }
.width-75   { width: 75% !important; margin-inline: auto; }              .height-75   { height: 75% !important; }

/* ================================================== */
/* BACKGROUND Styles */
/* ================================================== */
.is-style-bg-white      { background-color: #FFFFFF; }
.is-style-bg-light      { background-color: #F3F3F3; }
.is-style-bg-dark       { background-color: #000000; }
.is-style-bg-primary    { background-color: var(--color-primary); }
.is-style-bg-secondary  { background-color: var(--color-secondary); }
.is-style-bg-paper      { background-color: var(--color-background-paper); }

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* 'IMAGE' | 'IMAGES' STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.wp-block-image         { overflow: hidden; }
.wp-block-image img     { width: 100%; height: 100%;}
.zoom img               { transition: transform 0.3s ease-in-out; }
.zoom:hover img         { transform: scale(1.2); }

.wp-block-image.fluid-40 img { width: clamp(40vw, 400px, 90%); height: auto; }
.wp-block-image.fluid-60 img { width: clamp(60vw, 400px, 90%); height: auto; }
.wp-block-image.small img { width: 80px; }

/* ================================================== */
/* Image Gallery */
/* ================================================== */
.gallery-column             { flex: 1;  overflow: hidden; }
.gallery-row img            { width: 100%; object-fit: cover;  }
.square   .gallery-row img  { aspect-ratio: 1/1; }
.portrait .gallery-row img  { aspect-ratio: 3/4; }
.wide     .gallery-row img  { aspect-ratio: 16/9; }
.wide.short .gallery-row    { width: 80%; }

.vsb-gallery.stagger .gallery-column:nth-of-type(1), .vsb-gallery.stagger .gallery-column:nth-of-type(3) { padding-top: 5%; }
.vsb-gallery.stagger .gallery-column:nth-of-type(2), .vsb-gallery.stagger .gallery-column:nth-of-type(4) { padding-bottom: 5%; }

/* ================================================== */
/* Radius Adjustments */
/* ================================================== */
.wp-block-image.rad-3  img, .vsb-gallery.rad-3 img { border-radius: 3px; }
.wp-block-image.rad-5  img, .vsb-gallery.rad-5 img { border-radius: 5px; }
.wp-block-image.rad-10 img, .vsb-gallery.rad-10 img { border-radius: 10px; }
.wp-block-image.rad-30 img, .vsb-gallery.rad-30 img { border-radius: 30px; }


/* ================================================== */
/* Responsive Adjustments - Images */
/* ================================================== */
@media (min-width: 1025px) {
    .wp-block-image.small { width: 80px; height: auto; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .wp-block-image.small   { width: 70px; height: auto; }
    .image-paragraph        { max-width: 300px; }
}

@media (max-width: 767px) {
    .wp-block-image.small   { width: 60px; height: auto; }
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* BLOCK: LIST */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.wp-block-list.inline-block li { display: inline-block; margin-right: 25px; position: relative; }

.is-style-list-bullet,          .is-style-list-check-list,  .is-style-list-check-box,
.is-style-list-check-circle,    .is-style-list-arrow-list,  .is-style-list-angle-list,
.is-style-list-angle-double,    .is-style-list-angle-circle                                                             { list-style: none; padding: 0; }

.is-style-list-bullet li,       .is-style-list-check-list li,   .is-style-list-check-box li,
.is-style-list-check-circle li, .is-style-list-arrow-list li,   .is-style-list-angle-list li,
.is-style-list-angle-double li, .is-style-list-angle-circle li                                                          { position: relative; padding-left: 25px; }

.is-style-list-bullet li::before,       .is-style-list-check-list li::before,   .is-style-list-check-box li::before,
.is-style-list-check-circle li::before, .is-style-list-arrow-list li::before,   .is-style-list-angle-list li::before,
.is-style-list-angle-double li::before, .is-style-list-angle-circle li::before                                          { font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; }

.is-style-list-bullet li::before        { content: "\f111"; font-size: 7px; top: 9px; left: 4px; }
.is-style-list-check-list li::before    { content: "\f00c"; }
.is-style-list-check-box li::before     { content: "\f14a"; color: var(--color-primary); }
.is-style-list-check-circle li::before  { content: "\f058"; color: var(--color-primary); }
.is-style-list-arrow-list li::before    { content: "\f178"; }
.is-style-list-angle-list li::before    { content: "\f105"; }
.is-style-list-angle-double li::before  { content: "\f101"; }
.is-style-list-angle-circle li::before  { content: "\f138"; color: var(--color-primary); }

.wp-block-list.primary li::before           { color: var(--color-primary) !important; }
.wp-block-list.primary-light li::before     { color: var(--color-primary-light) !important; }
.wp-block-list.secondary li::before         { color: var(--color-secondary) !important; }
.wp-block-list.secondary-light li::before   { color: var(--color-secondary-light) !important; }


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* BLOCK: SEPARATOR */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.wp-block-separator         { margin: 0; border-bottom: 1px solid black; margin-inline: auto; }
.is-style-separator-double  { border-top: 1px solid black; height: 5px; background-color: transparent; }
.is-style-separator-slashes { border: none; height: 20px; background-size: contain; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='10'%3E%3Ctext x='0' y='10' font-size='10'%3E/%3C/text%3E%3C/svg%3E") repeat-x center; }
.is-style-separator-large   { border-bottom-width: 3px; }
.is-style-separator-small   { border-bottom-width: 0.5px; }

.wp-block-separator.align-left      { margin-left: 0 !important; }
.wp-block-separator.align-right     { margin-right: 0 !important; }
.wp-block-separator.align-center    { margin-inline: auto !important; }
.wp-block-separator.fluid-80-90     { width: clamp(80%, 1200px, 90%) !important; }

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* BLOCK: DETAILS */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.is-style-details-white             { background-color: #FFFFFF; }
.is-style-details-light             { background-color: #F3F3F3; }
.is-style-details-dark              { background-color: #000000; }
.is-style-details-primary           { background-color: var(--color-primary); }
.is-style-details-secondary         { background-color: var(--color-secondary); }

.is-style-details-white:hover       { background-color: var(--color-background-light); }
.is-style-details-light:hover       { background-color: var(--color-background-light); }
.is-style-details-dark:hover        { background-color: var(--color-background-light); }
.is-style-details-primary:hover     { background-color: var(--color-primary-hover); }
.is-style-details-secondary:hover   { background-color: var(--color-secondary-hover); }

.is-style-details-white, .is-style-details-light,
.is-style-details-dark, .is-style-details-primary,
.is-style-details-secondary, .is-style-details-tertiary  { padding: 0; border: 1px solid #DEDEDE; margin-bottom: 5px; }

.is-style-details-white summary, .is-style-details-light summary,
.is-style-details-dark summary, .is-style-details-primary summary,
.is-style-details-secondary summary, .is-style-details-tertiary summary { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    list-style: none; /* Removes default marker */ 
    cursor: pointer; 
    padding: 10px 20px;
    font-weight: 700;
}

.is-style-details-white summary::after, .is-style-details-light summary::after,
.is-style-details-dark summary::after, .is-style-details-primary summary::after,
.is-style-details-secondary summary::after, .is-style-details-tertiary summary::after     { content: "⯆"; margin-left: auto; }

.is-style-details-white[open] summary::after, .is-style-details-light[open] summary::after,
.is-style-details-dark[open] summary::after, .is-style-details-primary[open] summary::after,
.is-style-details-secondary[open] summary::after, .is-style-details-tertiary[open] summary::after   { content: "⯅"; }

.is-style-details-white p, .is-style-details-light p, .is-style-details-dark p,
.is-style-details-primary p, .is-style-details-secondary p, .is-style-details-tertiary p    { padding: 5px 20px; background-color: #FFFFFF; }

.rad-3.wp-block-details p:last-of-type      { border: 1px solid transparent; border-radius: 0 0 3px 3px; }
.rad-5.wp-block-details p:last-of-type      { border: 1px solid transparent; border-radius: 0 0 5px 5px; }
.rad-10.wp-block-details p:last-of-type     { border: 1px solid transparent; border-radius: 0 0 10px 10px; }
.rad-30.wp-block-details p:last-of-type     { border: 1px solid transparent; border-radius: 0 0 30px 30px; }


.scw-faq          { background-color: #FFFFFF;  padding: 0;  border: 1px solid var(--color-primary);  border-radius: 5px;  margin-bottom: 15px; }
.scw-faq summary  { text-transform: capitalize; font-size: 22px; }
.scw-faq:hover, .scw-faq[open]                  { background-color: var(--color-primary); }
.scw-faq:hover summary, .scw-faq[open] summary  { color: #FFFFFF; }




/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* TEAM SLIDE STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.content-container-group { padding: 10%; }

.is-style-teams-1-1 .team-column .team-column-group .team-image-row                                     { justify-content: center }
.is-style-teams-1-1 .team-column .team-column-group .team-member-description-group                      { border-top: 4px solid black; padding: 11px 0px; }
.is-style-teams-1-1 .team-column .team-column-group .team-member-description-group .team-member-name    { color: var(--color-primary); }
.is-style-teams-1-1 .team-column .team-column-group .team-member-description-group .team-member-title   { font-weight: 700; }

.is-style-teams-1-2 .wp-block-column:hover                                                  { transform: translate(0, -10px) rotate(0deg) scale(1); } 
.is-style-teams-1-2 .team-column-group                                                      { padding: 10% 10% 10% 10%; border: 1px solid transparent; box-shadow: 0px 0px 10px 0px lightgray; }
.is-style-teams-1-2 .team-column-group .team-image-row                                      { justify-content: left; margin-bottom: 54px; }
.is-style-teams-1-2 .team-column-group .team-image-row .wp-block-image                      { width: 160px; }
.is-style-teams-1-2 .team-column-group .team-image-row .wp-block-image img                  { border-radius: 50%; }
.is-style-teams-1-2 .team-column-group .team-member-description-group                       { border-top: none; padding: 11px 0px; }
.is-style-teams-1-2 .team-column-group .team-member-description-group .team-member-title    { color: #7d7d7d; font-weight: 400; }

.is-style-teams-2-1 .team-column-group, .is-style-teams-2-2 .team-column-group              { padding: 10% 8%; border: 1px solid transparent; box-shadow: 0px 0px 10px 0px lightgray; }
.is-style-teams-2-1 .team-column-group .team-image-row                                      { justify-content: center }
.is-style-teams-2-1 .team-column-group .team-member-description-group                       { border-top: 4px solid black; padding: 11px 0px; }
.is-style-teams-2-1 .team-column-group .team-member-description-group .team-member-name     { color: var(--color-primary); }
.is-style-teams-2-1 .team-column-group .team-member-description-group .team-member-title    { font-weight: 700; }

.is-style-teams-2-2 .team-column-group .team-image-row                                      { justify-content: left; margin-bottom: 54px; }
.is-style-teams-2-2 .team-column-group .team-image-row .wp-block-image                      { width: 160px; }
.is-style-teams-2-2 .team-column-group .team-image-row .wp-block-image img                  { border-radius: 50%; }
.is-style-teams-2-2 .team-column-group .team-member-description-group                       { border-top: none; padding: 11px 0px; }
.is-style-teams-2-2 .team-column-group .team-member-description-group .team-member-title    { color: #7d7d7d; font-weight: 400; }


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* GLOBAL: BACKGROUNDS STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.is-style-overlay-black .overlay-group, .is-style-overlay-black.overlay-group,
.is-style-overlay-black.wp-block-columns, .is-style-overlay-black.wp-block-column           { background-color: #000000DE; }
.is-style-overlay-white .overlay-group, .is-style-overlay-white.overlay-group,
.is-style-overlay-white.wp-block-columns, .is-style-overlay-white.wp-block-column           { background-color: #FFFFFFED; }
.is-style-overlay-sharp .overlay-group, .is-style-overlay-sharp.overlay-group,
.is-style-overlay-sharp.wp-block-columns, .is-style-overlay-sharp.wp-block-column           { background: linear-gradient(135deg, #000000DE 60%, #00000055 60%); }
.is-style-overlay-white .background-group, .is-style-overlay-white.background-group,
.is-style-overlay-white .cta-background-group, .is-style-overlay-white.cta-background-group { padding: 5px; }


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* TESTIMONIALS STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* ================================================== */
/* Image Stack */
/* ================================================== */
.image-stack    { overflow: visible; gap: 0; }
.stack-image-1  { z-index: 1; margin-left: 0; }
.stack-image-2  { z-index: 2; margin-left: -25px !important; }
.stack-image-3  { z-index: 3; margin-left: -25px !important; }
.stack-image-4  { z-index: 4; margin-left: -25px !important; }
.stack-image-5  { z-index: 5; margin-left: -25px !important; }

.stack-image-1 img, .stack-image-2 img, .stack-image-3 img, .stack-image-4 img      { width: 100%; height: 100%; object-fit: cover; }
.stack-image-1, .stack-image-2, .stack-image-3, .stack-image-4, .stack-image-5      { border: 2px solid white; border-radius: 50%;  overflow: hidden; }

/* ================================================== */
/* Testimonials Carousel */
/* ================================================== */
.reviews-carousel .review-column-group                              { padding: 10% 10% 10% 10%; box-shadow: 0px 0px 10px 0px lightgray; }
.reviews-carousel .review-column-group .review-description-group    { padding: 11px 0px; margin-top: 20px; }

/* ================================================== */
/* Testimonial TABS */
/* ================================================== */
.column-reviews         { box-shadow: 0px 0px 10px 0px black; padding: 3% 3% 3% 3%; transition: all 0.3s ease; }
.column-reviews:hover   { transform: translateY(-8px); }
.review-group           { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* SLIDE UP OVERLAY CARD STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.match-height-columns { display: flex; gap: var(--wp--style--block-gap, 1.5rem); }  /* Equal-height columns wrapper */
.match-height-columns > .wp-block-column { display: flex; }                         /* Make each column flex so the card can stretch */
.match-height-columns > .wp-block-column > .scw-card { flex: 1 1 auto; }            /* Card fills the column height */

/* Base card container (Base-group) */
.scw-card {
  position: relative;
  overflow: hidden;
  min-height: 260px; /* adjust as needed */
  background-size: cover;
  background-position: center;
}

.scw-card-base-overlay    { transition: opacity 0.35s ease-out; height: 100%; }
.scw-card-base-content    { width: 100%; padding: 1.25rem 1.5rem; height: 100%; }  /* Base content layout */
.scw-card-base-row        { margin-bottom: 0.75rem; }
.scw-card-base-content h2,
.scw-card-base-content h3,
.scw-card-base-content h4 { margin: 0 0 0.35rem; }
.scw-card-base-content p  { margin: 0; }


/* Overlay-group: hidden by default, slides in on hover */
.scw-card-hover {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition:
    transform 0.45s ease-out,
    opacity 0.45s ease-out,
    visibility 0.45s ease-out;
}

/* On hover, overlay fully covers card */
.scw-card:hover .scw-card-hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scw-card:hover .scw-card-base-overlay { opacity: 0; }  /* On hover, base group disappears */

/* Overlay-content-group: flex column to anchor CTA at bottom */
.scw-card-hover-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.25rem 1.5rem;
}

/* Scroll area for long copy */
.scw-card-hover-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 0.5rem; /* room for scrollbar */
}

.scw-card-hover-cta { margin-top: 1rem; } /* CTA block stays pinned at bottom */

/* Prevent accidental interactions with what’s under the overlay */
.scw-card-hover                 { pointer-events: none; }
.scw-card:hover .scw-card-hover { pointer-events: auto; }


/* =========================================
   PORTFOLIO PAGE STYLES
   ========================================= */
.portfolio-stack { height: 100%; }


/* =========================================
   MOBILE / TABLET BEHAVIOR: Overlay visible by default
   ========================================= */

@media (max-width: 1024px) {
  /* Overlay is always on */
  .scw-card-hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Base layer effectively hidden */
  .scw-card-base-overlay {
    opacity: 0;
    pointer-events: none;
  }
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* PRICING TABLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.scw-pricing-card             { display:flex; flex-direction:column; height:100%; }
.pricing-card-emphasis-group  { flex: 0 0 auto; width:100%; }
.pricing-card-content-group   { display:flex; flex-direction:column; flex: 1 1 auto; width: 100%; }

.pricing-card-top-group     { flex: 0 0 auto; width:100%; }
.pricing-card-middle-group  { flex: 1 1 auto; width:100%; }
.pricing-card-bottom-group  { flex: 0 0 auto; width:100%; margin-top: auto; }
.pricing-card-feature       { font-weight:700; margin:5px 0; }

.center .scw-pricing-card p, .center .scw-pricing-card .wp-block-heading { text-align:center; }
.center .pricing-card-number-row { justify-content: center; }
.scw-pricing-card.small-features .pricing-card-feature  { font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem); line-height: 1.45; }

.checks-1 p.pricing-card-feature, .checks-2 p.pricing-card-feature { position: relative; padding-left: 25px; }
.checks-3 p.pricing-card-feature        { position: relative; padding-left: 20px; }
.checks-1 .pricing-card-feature::before { font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; content: "\f058"; color: var(--color-primary); }
.checks-2 .pricing-card-feature::before { font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; content: "\f14a"; color: var(--color-primary); }
.checks-3 .pricing-card-feature::before { font-weight: 700; position: absolute; left: 0; content: "✔"; }



/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* PROCESS OVERVIEW STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.wp-block-group.row-step { padding: 10px 0; margin-bottom: 24px;  }
.process-number-group { min-width: 100px; }
/* .height-match .row-step { min-height: 100px; } */

@media (max-width: 767px) {
    .process-number-group { min-width: 90px; }
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* POP UP STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.popup-close-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px; /* Equal width and height */
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  user-select: none;
}
.popup-container {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.popup-container.active         { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.popup-container.active::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.popup-container .popup-group   { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; }

@media (min-width: 1025px) {

}
@media (min-width: 768px) and (max-width: 1024px) {
    .popup-group { width: 80%; }
}
@media (max-width: 767px) {
    .popup-group { width: 80%; }
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* PRICING DROPDOWN MENU WITH JS STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.pricing-dropdown {
  padding:4px 2px;
  border: 1px solid var(--color-primary);
  border-radius: 0px;
  width: clamp(30%, 200px, 60%); margin-inline: auto;
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 700;
  /* text-align: center; */
}

.price-button-monthly:hover, .price-button-annual:hover { background-color: var(--color-primary-hover); }

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* SITE HEADER STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* ================================================== */
/* These are the display rules for transitioning media sizes */
/* ================================================== */
.nav-group-condensed { display: none; }

@media (max-width: 1200px) {
  .nav-group-1 { display: none; }
  .nav-group-condensed { display: inline-flex; }
  .site-header-type-1 .site-header-top-row { justify-content: space-between !important; }
}

/* ================================================== */
/* These are the actual styling options */
/* ================================================== */
.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-self: flex-end;
  background-color: #ffffff;
  padding: 1.25em;
  gap: 10px !important;
  width: auto;
  box-shadow: 0px 0px 10px 0px black;
  border-radius: 0px;
}
.wp-block-navigation .wp-block-navigation-item            { font-weight: 700; font-size: 20px; }
.wp-block-navigation .wp-block-navigation-item:hover > a  { text-decoration: underline !important; }

.wp-block-navigation .wp-block-navigation__submenu-container { padding: 0 !important; white-space: nowrap; }
/* ===== <<<<< This part here is what makes the submenu item grow to the LEFT instead of the right if it goes off screen. >>>>> ===== */
/* .wp-block-navigation .wp-block-navigation__submenu-container { left: auto !important; right: 100% !important; } */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-weight: 400; padding-left: 20px; }

@media (min-width: 400px) {
  .wp-block-navigation .wp-block-navigation__submenu-container {
    transform: none !important;
    margin-top: 0 !important;
    animation: none !important;
    box-shadow: none !important;
    background-color: var(--color-background-light) !important;
  }
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* SITE FOOTER STYLES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.vsb-footer         { padding: 50px 0; }
.footer-separator   { margin: 30px 0; background-color: #000000; }

@media (min-width: 768px) and (max-width: 1024px) {
    .footer-columns     { flex-direction: column !important; gap: 3rem; }
}
@media (max-width: 767px) {
    .footer-columns         { flex-direction: column !important; gap: 3rem; }
    .footer-menu-list       { font-weight: 700; line-height: 1; }
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* 'MISCELLANEOUS CODE */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.shadow         { box-shadow: 0 0 10px 0; }
.shadow-light   { box-shadow: 0px 0px 10px 0px lightgray !important;}
.hide           { display: none !important; }
.transparent    { color: transparent !important; }
.primary-hover:hover    { background-color: var(--color-primary-hover) !important; }
.secondary-hover:hover  { background-color: var(--color-secondary-hover) !important; }

.vertical       { display: flex; flex-direction: column; }
.horizontal     { display: flex; flex-direction: row; }

/* ===== <<<<< Social Media Links >>>>> ===== */
ul.wp-block-social-links.small          { gap: 5px; }
ul.wp-block-social-links.small li       { font-size: 16px; }


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* MEDIA QUERIES */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* ================================================== */
/* DESKTOP */
/* ================================================== */
@media (min-width: 1025px) {
    .align-left-desktop         { text-align: left !important; }
    .align-center-desktop       { text-align: center !important; }
    .align-right-desktop        { text-align: right !important; }

    .justify-left-desktop       { justify-content: flex-start !important; }
    .justify-center-desktop     { justify-content: center !important; }
    .justify-right-desktop      { justify-content: flex-end !important; }
    .justify-space-desktop      { justify-content: space-between !important; }

    .button-width-25-desktop    { width: 25% !important; }
    .button-width-50-desktop    { width: 50% !important; }
    .button-width-75-desktop    { width: 75% !important; }
    .button-width-100-desktop   { width: 100% !important; }

    .inner-100-desktop          { padding-inline: 0% !important; }
    .inner-90-desktop           { padding-inline: 5% !important; }
    .inner-80-desktop           { padding-inline: 10% !important; }
    .inner-70-desktop           { padding-inline: 15% !important; }
    .inner-60-desktop           { padding-inline: 20% !important; }
    .inner-50-desktop           { padding-inline: 25% !important; }
    .inner-40-desktop           { padding-inline: 30% !important; }

    .hide-on-desktop            { display: none !important; }
    .small-group.desktop        { width: 80px; height: 80px !important; }
}

/* ================================================== */
/* TABLET */
/* ================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .align-left-tablet          { text-align: left !important; }
    .align-center-tablet        { text-align: center !important; }
    .align-right-tablet         { text-align: right !important; }

    .justify-left-tablet        { justify-content: flex-start !important; }
    .justify-center-tablet      { justify-content: center !important; }
    .justify-right-tablet       { justify-content: flex-end !important; }
    .justify-space-tablet       { justify-content: space-between !important; }

    .button-width-25-tablet     { width: 25% !important; }
    .button-width-50-tablet     { width: 50% !important; }
    .button-width-75-tablet     { width: 75% !important; }
    .button-width-100-tablet    { width: 100% !important; }

    .inner-100-tablet           { padding-inline: 0% !important; }
    .inner-90-tablet            { padding-inline: 5% !important; }
    .inner-80-tablet            { padding-inline: 10% !important; }
    .inner-70-tablet            { padding-inline: 15% !important; }
    .inner-60-tablet            { padding-inline: 20% !important; }
    .inner-50-tablet            { padding-inline: 25% !important; }
    .inner-40-tablet            { padding-inline: 30% !important; }

    .hide-on-tablet             { display: none !important; }
    .small-group.tablet         { width: 70px; height: 70px !important; }
    .stack-on-tablet            { flex-direction: column !important; gap: 1rem; }
}

/* ================================================== */
/* MOBILE */
/* ================================================== */
@media (max-width: 767px) {
    .align-left-mobile          { text-align: left !important; }
    .align-center-mobile        { text-align: center !important; }
    .align-right-mobile         { text-align: right !important; }

    .justify-left-mobile        { justify-content: flex-start !important; }
    .justify-center-mobile      { justify-content: center !important; }
    .justify-right-mobile       { justify-content: flex-end !important; }
    .justify-space-mobile       { justify-content: space-between !important; }

    .button-width-25-mobile     { width: 25% !important; }
    .button-width-50-mobile     { width: 50% !important; }
    .button-width-75-mobile     { width: 75% !important; }
    .button-width-100-mobile    { width: 100% !important; }

    .inner-100-mobile           { padding-inline: 0% !important; }
    .inner-90-mobile            { padding-inline: 5% !important; }
    .inner-80-mobile            { padding-inline: 10% !important; }
    .inner-70-mobile            { padding-inline: 15% !important; }
    .inner-60-mobile            { padding-inline: 20% !important; }
    .inner-50-mobile            { padding-inline: 25% !important; }
    .inner-40-mobile            { padding-inline: 30% !important; }

    .hide-on-mobile             { display: none !important; }
    .small-group.mobile         { width: 60px; height: 60px; }
    .mobile-text                { font-size: 20px; }
    .stack-on-mobile            { flex-direction: column !important; gap: 1rem; }
}