/* =========================================================
   CORNERSTONE FOOTER
   ========================================================= */

.cs-footer {
    width: 100%;

    background: var(--cs-primary);
    color: var(--cs-white);
}

.cs-footer-inner {
    padding-top: 80px;
    padding-bottom: 28px;
}


/* =========================================================
   TOP
   ========================================================= */

.cs-footer-top {
    display: grid;

    grid-template-columns: 1.4fr 0.7fr 0.9fr;

    gap: 80px;

    padding-bottom: 65px;
}


/* =========================================================
   BRAND
   ========================================================= */

.cs-footer-brand {
    max-width: 420px;
}

.cs-footer-logo {
    width: 100%;
    max-width: 90px;

    margin-bottom: 20px;
}

.cs-footer-logo .elementor-widget-container {
    width: 100%;
}

.cs-footer-logo img {
    display: block;

    width: 100%;
    max-width: 90px;
    height: auto;

    object-fit: contain;
}


.cs-footer-tagline {
    margin-bottom: 18px;

    color: var(--cs-accent);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.cs-footer-tagline p,
.cs-footer-description p,
.cs-footer-contact-info p,
.cs-footer-phone p,
.cs-footer-copyright p,
.cs-footer-credit p {
    margin: 0;
}


.cs-footer-description {
    max-width: 390px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   TITLES
   ========================================================= */

.cs-footer-title .elementor-heading-title {
    margin: 0 0 24px;

    color: var(--cs-white);

    font-size: 16px;
    font-weight: 700;

    letter-spacing: -0.01em;
}


/* =========================================================
   FOOTER NAV
   ========================================================= */

.cs-footer-menu .elementor-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 4px;
}


/* normal link */

.cs-footer-menu
.elementor-nav-menu > li > a.elementor-item {
    padding: 7px 0;

    color: rgba(255, 255, 255, 0.72);
    background: transparent;

    font-size: 14px;
    font-weight: 500;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* hover */

.cs-footer-menu
.elementor-nav-menu > li > a.elementor-item:hover {
    color: var(--cs-accent);
    background: transparent;

    transform: translateX(4px);
}


/* =========================================================
   ACTIVE / CURRENT PAGE
   ========================================================= */

.cs-footer-menu
.elementor-nav-menu > li.current-menu-item > a.elementor-item,

.cs-footer-menu
.elementor-nav-menu > li.current_page_item > a.elementor-item,

.cs-footer-menu
.elementor-nav-menu > li.current-menu-ancestor > a.elementor-item,

.cs-footer-menu
.elementor-nav-menu > li > a.elementor-item.elementor-item-active {
    color: var(--cs-accent);
    background: transparent;
}


/* active hover */

.cs-footer-menu
.elementor-nav-menu > li.current-menu-item > a.elementor-item:hover,

.cs-footer-menu
.elementor-nav-menu > li.current_page_item > a.elementor-item:hover,

.cs-footer-menu
.elementor-nav-menu > li.current-menu-ancestor > a.elementor-item:hover,

.cs-footer-menu
.elementor-nav-menu > li > a.elementor-item.elementor-item-active:hover {
    color: var(--cs-accent);
    background: transparent;

    transform: translateX(4px);
}


/* remove Elementor underline */

.cs-footer-menu .elementor-item::before,
.cs-footer-menu .elementor-item::after {
    content: none;
    display: none;
}


/* =========================================================
   CONTACT
   ========================================================= */

.cs-footer-contact-info {
    margin-bottom: 18px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 14px;
    line-height: 1.8;
}


.cs-footer-phone {
    display: inline-block;

    color: var(--cs-white);

    font-size: 18px;
    font-weight: 700;
}


.cs-footer-phone a {
    color: inherit;
    text-decoration: none;

    transition: color 0.25s ease;
}


.cs-footer-phone a:hover {
    color: var(--cs-accent);
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.cs-footer-bottom {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 40px;

    padding-top: 28px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.cs-footer-copyright {
    justify-self: start;

    color: rgba(255, 255, 255, 0.55);

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   FUTURETECH CREDIT
   ========================================================= */

.cs-footer-credit {
    justify-self: center;

    color: rgba(255, 255, 255, 0.50);

    font-size: 11px;
    line-height: 1.5;

    text-align: center;

    white-space: nowrap;
}


.cs-footer-credit a {
    color: var(--cs-accent);

    font-weight: 700;

    text-decoration: none;

    transition: color 0.25s ease;
}


.cs-footer-credit a:hover {
    color: var(--cs-white);
}


/* =========================================================
   SOCIAL
   ========================================================= */

.cs-footer-social {
    --width: auto;
    --max-width: none;

    width: auto;
    max-width: none;

    justify-self: end;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 10px;
}


/* Individual Elementor Icon widgets */

.cs-footer-social .cs-social-link {
    --width: auto;
    --max-width: none;

    width: auto;
    max-width: none;

    flex: 0 0 auto;
}


.cs-footer-social
.cs-social-link
.elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
}


.cs-footer-social
.cs-social-link
.elementor-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Actual icon circle */

.cs-footer-social
.cs-social-link
.elementor-icon {
    width: 36px !important;
    height: 36px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 1px solid rgba(214, 168, 75, 0.72) !important;
    border-radius: 50% !important;

    color: var(--cs-accent) !important;

    font-size: 15px !important;

    box-shadow: none !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


/* Font Awesome */

.cs-footer-social
.cs-social-link
.elementor-icon i {
    color: var(--cs-accent) !important;
}


/* SVG */

.cs-footer-social
.cs-social-link
.elementor-icon svg {
    width: 15px !important;
    height: 15px !important;

    fill: var(--cs-accent) !important;

    color: var(--cs-accent) !important;
}


.cs-footer-social
.cs-social-link
.elementor-icon svg path {
    fill: var(--cs-accent) !important;
}


/* =========================================================
   SOCIAL ICONS WIDGET SUPPORT
   In case Elementor Social Icons widget is used
   ========================================================= */

.cs-footer-social .elementor-social-icons-wrapper {
    display: flex;

    gap: 10px;
}


.cs-footer-social a.elementor-social-icon {
    width: 36px !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 1px solid rgba(214, 168, 75, 0.72) !important;
    border-radius: 50% !important;

    color: var(--cs-accent) !important;

    font-size: 15px !important;

    box-shadow: none !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


/* Kill Facebook / Instagram brand colors */

.cs-footer-social
.elementor-social-icon-facebook,

.cs-footer-social
.elementor-social-icon-facebook-f,

.cs-footer-social
.elementor-social-icon-instagram,

.cs-footer-social
.elementor-social-icon-facebook
.elementor-social-icon,

.cs-footer-social
.elementor-social-icon-instagram
.elementor-social-icon {
    background: transparent !important;
    background-color: transparent !important;

    border-color: rgba(214, 168, 75, 0.72) !important;

    color: var(--cs-accent) !important;
}


.cs-footer-social
a.elementor-social-icon i {
    color: var(--cs-accent) !important;
}


.cs-footer-social
a.elementor-social-icon svg {
    width: 15px !important;
    height: 15px !important;

    fill: var(--cs-accent) !important;
}


.cs-footer-social
a.elementor-social-icon svg path {
    fill: var(--cs-accent) !important;
}


/* =========================================================
   SOCIAL HOVER
   ========================================================= */

.cs-footer-social
.cs-social-link
.elementor-icon:hover,

.cs-footer-social
a.elementor-social-icon:hover {
    background: var(--cs-accent) !important;
    background-color: var(--cs-accent) !important;

    border-color: var(--cs-accent) !important;

    color: var(--cs-dark) !important;

    transform: translateY(-2px);
}


.cs-footer-social
.cs-social-link
.elementor-icon:hover i,

.cs-footer-social
a.elementor-social-icon:hover i {
    color: var(--cs-dark) !important;
}


.cs-footer-social
.cs-social-link
.elementor-icon:hover svg,

.cs-footer-social
.cs-social-link
.elementor-icon:hover svg path,

.cs-footer-social
a.elementor-social-icon:hover svg,

.cs-footer-social
a.elementor-social-icon:hover svg path {
    fill: var(--cs-dark) !important;

    color: var(--cs-dark) !important;
}