/*
Theme Name: Office 105
Author: Anja
Version: 1.0
*/

:root {
    --font-xs: 0.5rem;
    --font-sm: 0.8rem;
    --font-md: 1rem;
    --font-lg: 1.5rem;
    --font-xl: 2rem;
    --font-xxl: 3rem;
    --dark-gray: #363d43;
    --medium-gray: #454d56;
    --light-green: #80C757;
    --beige: #9d9c9c;
}

/******************* GENERAL *******************/
* {
    font-family: 'Noway';
}

img {
    width: 100%;
}

.ls-120 {
    line-spacing: 120%;
}

.dark-gray {
    color: var(--dark-gray);
}

.medium-gray {
    color: var(--medium-gray);
}

.beige {
    color: var(--beige);
}

.bg-beige {
    background-color: var(--beige);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}

.bg-medium-gray {
    background-color: var(--medium-gray);
}

.bg-light-green {
    background-color: var(--light-green);
}

.navbar,
.image-title {
    font-size: var(--font-lg);
}

.section-title {
    font-size: var(--font-md);
}

.text,
.banner-title {
    font-size: var(--font-sm);
}

.table-icons-image-text {
    font-size: 10px;
}
/*******************ANIMATION******************/
.animate.move-right{
    transform:translateX(-120%);
    transition: all ease-in 0.7s;
}

.animate.move-left{
    transition: all ease-in 0.7s;
    transform:translateX(120%);
}

.animate[animation='true']{
    transform: translateX(0);
}

a.underline-animation {
  position: relative;
  text-decoration: none;
}

a.underline-animation::after {
  content: '';
  position: absolute;
  bottom: -3px; 
  left: 0;
  width: 0;
  height: 2px;
  transition: width 0.3s ease-out; 
}

a.underline-animation:hover::after {
  width: 100%;
  transition: width 0.35s ease-in;
}

a.underline-animation.beige-border::after {
	background-color: var(--beige); 
}

a.underline-animation.white-border::after {
	background-color: white; 
}
/******************* HEADER *******************/
.navbar {
    opacity: 0.9;
}

.navbar-toggler,
.navbar-toggler:focus,
.btn-close:focus {
    border: none;
    box-shadow: none;
}

.menu-item a {
    text-transform: uppercase;
    text-decoration: none;
    color: var(--beige);
}

.navbar .offcanvas {
    bottom: unset;
    border-left: 0;
}

.navbar-toggler-icon {
	background-image: url("/wp-content/uploads/2023/11/hamburger-menu-svgrepo-com.svg");
	height: 30px;
	width: 35px;
}

.btn-close {
	background-image: url("/wp-content/uploads/2023/12/beigeX.svg");
}

.current-lang a,
.current-menu-item a {
    color: white;
}

.btn-close {
	height: 30px;
    width: 35px;
    padding: 10px 12px!important;
    background-size: contain;
    margin: 0!important;
}

.offcanvas-header,
.navbar {
    height: 50px;
}

.offcanvas-header,
.offcanvas-body {
    border-bottom: 1px solid var(--beige);
}

.offcanvas-backdrop {
	background-color: transparent;
}

.site-logo {
    width: 188px;
    height: 27px;
}

/******************* FOOTER *******************/
.axa-logo {
    width: 50px!important;
    margin-bottom: 8px;
}
footer .wincasa-alarm .wincasa-alarm-text{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}
footer .wincasa-alarm .um{
    position: relative;
    margin-left:0px!important;
}
footer .wincasa-alarm input#user_email-388{
    background-color: var(--dark-gray);
    height: 20px!important;
    padding: 0 2px!important;
}
footer .wincasa-alarm .um-col-alt{
    display: flex;
    margin-top: 0;
}
footer .um-col-alt .um-button, footer .um-col-alt .um-button:focus{
    min-width: 100px!important;
    height: 21px!important;
    background: var(--beige)!important;
    padding: 0!important;
    color:var(--dark-gray);
}
footer .wincasa-alarm #um_field_388_user_email{
    padding-top:12px!important;
}
footer .um-row._um_row_1{
    margin-bottom: 0!important;
}
footer .um-field-type_terms_conditions{
    display: flex!important;
    flex-direction: row-reverse!important;
    align-items: center;
    justify-content: start;
    gap: 4px;
}
footer .um-toggle-gdpr{
    color: var(--beige);
}
.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i{
    color:var(--beige)!important;
}
footer .um-field-checkbox-option{
    margin:0 0 0 25px!important;
}
.footer-info {
    padding: 30px;
}

.footer-subtitle {
    font-weight: 500;
    margin-bottom: 8px;
}

.social-media-icons {
    gap: 19.5px;
}

.social-media-icons a {
    border-radius: 50%;
    width: 36px;
    height: 36px;
}
.footer-info .social-media-icons{
	margin-top:8px;
}
@media only screen and (min-width: 768px) {
    .table-icons-image-text {
        font-size: var(--font-md);
    }
    footer .wincasa-alarm .wincasa-alarm-text{
        font-size: 26px;
    }
    footer .wincasa-alarm .um-col-alt{
        position: absolute;
        right: 0;
        top: -1px;
        margin-top: 12px;
    }
    footer .wincasa-alarm .um{
        margin-left: 25px!important;
    }
    footer .wincasa-alarm input#user_email-388{
        width: 72%;
    }
    footer .um-col-alt .um-button, footer .um-col-alt .um-button:focus {
        padding: 0 20px!important;
    }
}

@media only screen and (min-width: 768px) {
    /******************* GENERAL *******************/
    .navbar,
    .text {
        font-size: var(--font-md);
    }

    .section-title,
    .banner-title {
        font-size: var(--font-xl);
    }

    .image-title {
        font-size: var(--font-xxl);
    }

    /******************* HEADER *******************/
    .navbar {
        height: 65px;
    }

    .navbar-nav li {
        margin-right: 32px;
    }
	
/* 	.navbar-nav li:nth-last-child(2),
	.navbar-nav li:last-child {
	  margin-right: 16px; 
	} */

    .offcanvas-header,
    .offcanvas-body {
        border-bottom: none;
    }

    .navbar-brand {
        position: absolute;
    }
	
	.site-logo {
		width: 163px;
		height: 20px;
	}

    /******************* FOOTER *******************/
    footer {
        padding-top: 64px;
        padding-bottom: 250px;
        text-align: -webkit-center;
    }

    .footer-subtitle {
        margin-bottom: 24px;
    }

    footer p,
    footer a,
    footer p a {
        margin-bottom: 8px;
    }

    .footer-width {
        max-width: 968px;
    }

    .footer-info {
        padding: unset;
    }

    .axa-logo {
        margin-top: 22px;
        margin-bottom: 10px;
    }
}