footer {
    background-color: var(--color-black);
    color:var(--color-white);
    position: relative;      
}
/* Start gold circle decor */
.circle-decor-container {
    display: flex;
    width: 100vw;
    height: auto;    
    justify-content: center;          
}
.footer-half-circle-black {
    border: 40px solid var(--color-black);
    width: 50px;
    height: 50px;
    border-radius: 50%;   
    z-index: 1;
    transform: translateY(-45%);    
    position: absolute;  
    justify-content: center; 
    text-align: center;
    align-items: center;
}
.footer-separator-gold {
    border: 5px solid var(--color-primary);
    width: 5px;
    height: 5px;
    border-radius: 50%;   
    z-index: 2;   
    position: relative;
}
/* End gold circle decor */
.footer-container {
    display: flex;    
    justify-content: center;
    align-items: center;    
}
.footer-col1 {
    width: 30%;
    text-align: center;
}
.footer-address-container {
    display: flex;
}
.footer-address-container .footer-col1 {   
    justify-content: center;
    text-align: center;   
}
.footer-address-container .footer-col2 {   
    justify-content: center;
    text-align: center;    
}
.footer-address-container .footer-col3 {   
    justify-content: center;
    text-align: center;    
}
.footer-col1 .footer-about-us {
    color: var(--color-white);
    font-style: uppercase;
    font-size: 22px;
    font-size: var(--fw-bold);
    font-family:var(--font-primary);
    padding-top: 60px;
    text-align: center;
}
.footer-col1 .footer-summary {
    font-family:var(--font-primary-cursive);
    color: rgb(145, 145, 145);
    font-size:var(--fs-md);
    text-align: center;
}
.footer-col2 {
    width: 30%;
    text-align: center;
    margin: 0;
}
/* Start footer social media */
.footer-col2 .footer-find-us {    
    color: var(--color-primary);
    letter-spacing: 1.5;
    font-size: var(--fs-2xl);
    font-family:var(--font-primary-cursive);        
}
.footer-col2 ul {
    margin-right: 16px;    
}
.footer-col2 ul a .fa {    
    display: inline-flex;
    width: 10%;     
    cursor: pointer;
}
.footer-col2 ul a .fa:hover {    
    display: inline-flex;
    width: 10%;     
    cursor: pointer;
    color: var(--color-primary);
    transition: color 0.3s ease; 
}
/* End footer social media */
.footer-col3 {
    width: 30%;
    text-align: center;   
}
.footer-col3 .footer-newsletter {
    color: var(--color-white);
    font-style: uppercase;
    font-size: var(--fs-lg);
    font-size: var(--fw-bold);
    font-family:var(--font-primary);
    padding-bottom: 40px;      
}
/* *** gold outline around the newletter box new kit form *** */
.formkit-form {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(197, 157, 95, 0.4);      
    padding: 10px;
    background-color: var(--color-black);    
    max-width: 400px;
    min-width: 100px; 
    margin: 0 auto;       
}
.formkit-field {    
    border: none;
    outline: none;
    font-size: var(--fs-sm);
    background-color: var(--color-dark);     
    color: var(--color-white);    
    border-radius: 5px 0 0 5px; 
    position: relative;    
    height: 40px;    
}
.formkit-submit .fa-envelope {    
    color: var(--color-primary);
    font-size: var(--fs-lg); 
    position: absolute;     
    top: 15px;
    right: 20px;    
}
.formkit-submit .fa-envelope:hover {        
    color: rgba(197, 157, 95, 0.4);
    font-size: var(--fs-xl);
    position: absolute;
    top: 10px;
    right: 20px;
    transition: color 0.3s ease; 
}
/******************* !!! Keep !!! start of manual form ************ */
/* .newsletter-email {
    flex: 1;    
    padding: 20px 0 20px 20px; 
    border: none;
    outline: none;
    font-size: 14px;
    background-color: var(--color-dark); 
    color: var(--color-white);    
    border-radius: 5px 0 0 5px; 
} */
/* .newsletter-submit {
    background-color: var(--color-dark);
    border: none;
    padding: 20px;
    cursor: pointer;
    border-radius: 0 5px 5px 0; 
    display: flex;
    align-items: center;
    justify-content: center;
} */
/* .newsletter-submit i {
    color: var(--color-primary);
    font-size: 16px;
} */
/* .newsletter-submit i:hover {
    color: rgba(197, 157, 95, 0.4);
    font-size: 16px;
    transition: color 0.3s ease;     
} */
/* .newsletter-submit:hover {
    background-color: var(--color-black);
    transition: color 0.3s ease;        
} */

/************************* !!! Keep !!! End of manual form ************ */
/* Start footer separator decor */
.footer-separator-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 20px;
    height: 5vh;
}
.footer-separator::before {
    content: "";
    position: absolute;
    width: 100px; 
    height: 1px;
    background: var(--color-primary);
    border: 0.25px solid var(--color-primary);
    opacity: 0.3;
    left: -160px;
    top: 50%;       
}
.footer-separator {
    width: 6px;
    height: 6px;
    background: var(--color-white);
    border-radius: 50%;
    position: relative;    
}
.footer-separator::after {
    content: "";
    position: absolute;
    width: 100px; 
    height: 1px;
    background: var(--color-primary);
    border: 0.25px solid var(--color-primary);
    opacity: 0.3;
    right: -160px;
    top: 50%;     
}
/* End footer separator decor */
.footer-address {   
    display: flex;
    justify-content: space-between;
    margin: 0 20% 7% 20%;
    width: 60%;    
}
.footer-address span {
    font-family:var(--font-primary-cursive);
    font-weight: 100;
    color: var(--color-gray-font);  
    font-size: var(--fs-md);
}
.footer-address-container {  
    display: flex; 
    flex-direction: row;
    text-align: center;    
    justify-content:space-between;
    /* align-items: center;  */
    width: 100%;
    font-weight: var(--fw-semibold);
    color: var(--color-gray-font); 
    padding-top: 40px;   
}
/* Start lighter shade - very bottom of footer */
.footer-cap {    
    background-color: var(--color-dark);
    color: var(--color-primary);
    height: 100px;
    width: 100%;
    letter-spacing: 1px;            
}
.footer-cap span {
    background-color: var(--color-dark);
    color: var(--color-primary);     
    font-size: var(--fs-md);       
}
.footer-copywrite {
    float: left;
    margin-left: 50px;    
    margin-top: 30px;    
}
.footer-cap .back-to-top a {
    background-color: var(--color-dark);
    color: var(--color-primary);     
    font-size: var(--fs-md); 
    float: right;
    padding-top: 30px;
    padding-right: 50px;
    cursor: pointer;          
} 
/* End lighter shade - very bottom of footer */
/* *********Media Queries for 'footer' section  ************/
 @media screen and (min-width: 811px) and (max-width:1349px) {
    .footer-col1 .footer-summary {        
        line-height: var(--lh-relaxed); 
    }
    .footer-address-container {
        width: 100%;
        display: flex;        
        flex-direction: row;
        color: var(--color-gray-font);
        font-weight: var(--fw-semibold); 
        align-items: center;
        text-wrap: balance;
        line-height: var(--lh-relaxed); 
    }
}
@media screen and (min-width: 769px) and (max-width: 810px)  {     
    .footer-container {
        display: block;     
        justify-content: center;
        align-items: center; 
        width: 100%;   
    }
    .footer-col1 {
        width: 100%;
        text-align: center;
        padding: 0 3% 0 3%;
    }
    .footer-col1 .footer-summary {        
        font-family:var(--font-primary-cursive);
        color: rgb(145, 145, 145);
        font-size:var(--fs-md);
        text-align: center;
        line-height: var(--lh-relaxed);
        padding: 10px 15px 0 15px; 
    }
    .footer-address-container {
        width: 100%;
        display: flex;        
        flex-direction: row;
        color: var(--color-gray-font);
        font-weight: var(--fw-semibold);
        align-items: center;
        text-wrap: balance;
        line-height: var(--lh-relaxed); 
    }
    .footer-address-container .footer-col1 {
        padding-top: 30px;
    }
    .footer-col2 {
        width: 100%;
        text-align: center;
        margin: 0;
        display: inline-block;
        justify-content: center;
    }
    .footer-col2 .footer-find-us {    
        color: var(--color-primary);
        letter-spacing: 1.5;
        font-size: var(--fs-2xl);
        font-family:var(--font-primary-cursive); 
        width: 100%;                       
    }
    .footer-col2 ul {        
        margin-right: 26px; 
        display: inline-flex;               
    }
    .footer-col2 ul a .fa {           
        width: 100%;         
        cursor: pointer;
        text-align: center;
        align-items: center;        
        padding: 0 10px 30px 10px;        
    }
    .footer-col2 ul a .fa:hover {    
        display: inline-flex;
        width: 100%;     
        cursor: pointer;
        color: var(--color-primary);
        transition: color 0.3s ease; 
        text-align: center;
        align-items: center;        
        padding: 0 10px 30px 10px;    
    }
    .footer-col3 {
        width: 80%;
        text-align: center;
        margin: 0 auto;       
    }
    .footer-col3 .footer-newsletter {
        color: var(--color-white);
        font-style: uppercase;
        font-size: var(--fs-lg);
        font-size: var(--fw-bold);
        font-family:var(--font-primary); 
        padding: 30px 0 20px 0;
        letter-spacing: var(--ls-wider);             
    }
    .footer-address-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: var(--color-gray-font);
        font-weight: var(--fw-semibold); 
        padding-top: 30px;
        line-height: var(--lh-relaxed);        
    }
}
@media screen and (max-width: 768px)  { 
    .footer-container {
        display: block;     
        justify-content: center;
        align-items: center; 
        width: 100%;   
    }
    .footer-col1 {
        width: 100%;
        text-align: center;
        padding: 0 3% 0 3%;
    }
    .footer-col1 .footer-about-us {
        color: var(--color-white);
        font-style: uppercase;
        font-size: 22px;
        font-size: var(--fw-bold);
        font-family:var(--font-primary);       
        padding-top: 100px;
        text-align: center;
        width: 100%;
    }
    .footer-col1 .footer-summary {
        font-family:var(--font-primary-cursive);
        color: rgb(145, 145, 145);
        font-size:var(--fs-md);
        text-align: center;
        line-height: var(--lh-relaxed);
        padding: 10px 15px 0 15px; 
    }
    .footer-col2 {
        width: 100%;
        text-align: center;
        margin: 0;
        display: inline-block;
        justify-content: center;
    }
    .footer-col2 .footer-find-us {    
        color: var(--color-primary);
        letter-spacing: 1.5;
        font-size: var(--fs-2xl);
        font-family:var(--font-primary-cursive); 
        width: 100%;                       
    }
    .footer-col2 ul {        
        margin-right: 26px; 
        display: inline-flex;               
    }
    .footer-col2 ul a .fa {           
        width: 100%;         
        cursor: pointer;
        text-align: center;
        align-items: center;        
        padding: 0 10px 30px 10px;        
    }
    .footer-col2 ul a .fa:hover {    
        display: inline-flex;
        width: 100%;     
        cursor: pointer;
        color: var(--color-primary);
        transition: color 0.3s ease; 
        text-align: center;
        align-items: center;        
        padding: 0 10px 30px 10px;    
    }
    .footer-col3 {
        width: 80%;
        text-align: center;
        margin: 0 auto;       
    }
    .footer-col3 .footer-newsletter {
        color: var(--color-white);
        font-style: uppercase;
        font-size: var(--fs-lg);
        font-size: var(--fw-bold);
        font-family:var(--font-primary); 
        padding: 30px 0 20px 0;
        letter-spacing: var(--ls-wider);             
    }
    .footer-address-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: var(--color-gray-font);
        font-weight: var(--fw-semibold); 
        padding-top: 30px;
        line-height: var(--lh-relaxed);        
    }
    .footer-address-container .footer-col1 {
        padding-top: 30px;
    }
    .formkit-form {
        outline:1px solid var(--color-dark);              
    }
    .formkit-submit .fa-envelope {    
        color: var(--color-primary);
        font-size: var(--fs-lg); 
        position: absolute;         
    }
}