/* FOOTER SECTION */

footer .notch-left, footer .notch-right, footer .content {
    background: var(--color-text-primary);
}

footer .notch-center svg path {
	fill: var(--color-text-primary);
}

footer .content {
    overflow-x: hidden;
    padding: var(--section-padding-y-lg) 0 var(--section-padding-y) 0;
}

footer .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 var(--grid-gap-x);
    width: 100%;
	padding-left: var(--spacing-wrapper);
	padding-right: var(--spacing-wrapper);
}

.logo-background {
    grid-column: 1;
    grid-row: 1 / -1;
    position: relative;
    height: 100%;
    overflow: visible;
}

.logo-background img {
    position: absolute;
    right: 0;
    height: 100%;
    width: auto;
}

.footer-content-wrapper {
    grid-column: 2 / 5;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.footer-logo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

footer .flex.row {
    justify-content: space-between;
}


.footer-logo {
    width: 100%;
    height: auto;
}

.menu-sections ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.menu-sections ul li a {
    color: var(--color-sand);
    font-size: clamp(28px, 2.4vw, 46px);
    font-weight: 400;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}

.menu-sections a[target="_blank"] svg {
    height: clamp(14px, 1.05vw, 20px);
    width: auto;
}

.menu-sections a[target="_blank"] svg path {
    transition: fill 0.2s ease;
}

.menu-sections a[target="_blank"]:hover svg path {
    fill: var(--color-orange);
}

.menu-companies {
    position: relative;
}

.menu-companies span {
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 500;
    line-height: clamp(14px, 0.94vw, 18px); /* 128.571% */
    letter-spacing: clamp(-0.14px, -0.007vw, 0px);
    text-transform: uppercase;
    opacity: 0.4;
    color: var(--color-dark-sand);
}

.menu-companies > span {
    position: absolute;
    left: 0;
    bottom: 100%;
    padding: clamp(5px, 0.4vw, 8px) clamp(5px, 0.4vw, 8px) clamp(5px, 0.4vw, 8px) 0;
}

.menu-companies ul {
    column-count: 2;
    column-gap: clamp(32px, 4vw, 56px);
}

.menu-companies ul li {
    padding: clamp(5px, 0.4vw, 8px) clamp(5px, 0.4vw, 8px) clamp(5px, 0.4vw, 8px) 0;
    break-inside: avoid;
}

.menu-companies ul li a {
    font-size: clamp(20px, 1.25vw, 24px);
    font-weight: 400;
    line-height: clamp(20px, 1.35vw, 26px); /* 108.333% */
    letter-spacing: clamp(-0.6px, -0.03vw, -0.4px);
    color: var(--color-sand);
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}

.menu-companies ul li a::before {
	content: '';
	display: inline-block;
	vertical-align: text-bottom;
	width: auto;
	height: 0;
	margin-right: 0;
	aspect-ratio: 1 / 1;
	background-image: url('../../images/circle-orange.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: height 0.15s ease-out, opacity 0.15s ease-out, margin-right 0.15s ease-out;
	opacity: 0;
	overflow: hidden;
	flex-shrink: 0;
}

.menu-companies ul li a:hover::before {
	height: clamp(18px, 1.35vw, 26px);
	opacity: 1;
	margin-right: clamp(5px, 0.6vw, 8px);
}

.menu-companies ul li a::after {
	content: '';
	display: inline-block;
	vertical-align: text-bottom;
	width: auto;
	height: clamp(18px, 1.35vw, 26px);
	aspect-ratio: 1 / 1;
	margin-left: clamp(5px, 0.6vw, 8px);
	background-image: url('../../images/circle.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: height 0.15s ease-out, opacity 0.15s ease-out, margin-left 0.15s ease-out;
	opacity: 1;
	overflow: hidden;
	flex-shrink: 0;
}

.menu-companies ul li a:hover::after {
	height: 0;
	opacity: 0;
	margin-left: 0;
}

.sml-column {
    width: 18%;
    max-width: 197px;
}

.menu-countries {
    margin-bottom: clamp(15px, 1.05vw, 20px);
}

.menu-countries ul li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: clamp(15px, 1.25vw, 17px);
    font-weight: 400;
    line-height: clamp(10px, 1.25vw, 13px);
    letter-spacing: -0.17px;
    color: var(--color-sand);
    border: 1px solid transparent;
    background-color: transparent;
    opacity: 0.6;
    border-radius: 10px;
    margin: 10px 0;
    text-align: right;
    padding: 6px clamp(6px, 1.25vw, 10px);
    margin: 0;
    transition: border 0.2s ease, background-color 0.2s ease, margin 0.2s ease;
}

.menu-countries ul li:not(.active):hover {
    color: var(--color-orange);
    opacity: 1;
    cursor: pointer;
}

.menu-countries ul li.active {
    align-self: stretch;
    margin: 10px 0;
    padding-bottom: 10px;
    border: 1px solid rgba(237, 236, 225, 0.10);
    background: rgba(237, 236, 225, 0.05);
    opacity: 1;
}

.clock-wrapper {
    overflow: hidden;
    max-height:0;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}

.menu-countries ul li.active .clock-wrapper {
    max-height: calc(2.35em + 15px);
    opacity: 1;
}

.clock {
    width: 2.35em;
    height: 2.35em;
    margin-bottom: 15px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    flex-shrink: 0;
    /* Default rotation variables */
    --hour-rotation: 0deg;
    --minute-rotation: 0deg;
}

.clock::before,
.clock::after {
    content: '';
    position: absolute;
    background-color: #c1c1c1;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(var(--rotation));
}

.clock::before {
    /* Hour hand */
    width: 1.5px;
    height: 28%;
    --rotation: var(--hour-rotation);
}

.clock::after {
    /* Minute hand */
    width: 1px;
    height: 40%;
    --rotation: var(--minute-rotation);
}


.menu-social {
    justify-content: flex-end;
    gap: 12px;
}

.menu-social a img {
    transition: opacity 0.2s ease;
}
.menu-social a img:hover{ opacity: 0.6; }

.menu-social-mobile {
    display: none;
}

.address {
    font-size: clamp(15px, 0.94vw, 18px);
    font-weight: 400;
    line-height: clamp(15px, 1.05vw, 20px); /* 111.111% */
    letter-spacing: clamp(-0.18px, -0.009vw, 0px);
    color: var(--color-sand);
}

.contact {
    width: 44%;
    justify-content: space-between;
    gap: 2%;
}

.contact .flex-col {
    width: 48%;
}

.sidecontacts-wrapper { gap:3px; }

.space {
    justify-content: space-between;
    align-items:center;
    gap:15px;
}

.contact span {
    font-size: clamp(13px, 0.73vw, 14px);
    font-weight: 500;
    line-height: clamp(13px, 0.73vw, 14px);
    letter-spacing: clamp(-0.14px, -0.007vw, 0px);
    color: var(--color-dark-sand);
    text-transform: uppercase;
}

.contact a, .help-links a {
    font-size: clamp(15px, 0.83vw, 16px);
    font-weight: 400;
    line-height: clamp(16px, 1vw, 19px); /* 118.75% */
    letter-spacing: clamp(-0.16px, -0.008vw, 0px);
    color: var(--color-sand);
}

.contact a {
    color: var(--color-sand);
}

.help-links {
    gap: clamp(25px, 2.1vw, 40px);
}

.help-links a {
    color: var(--color-dark-sand);
}

.contact a:hover, .help-links a:hover {
    color: var(--color-orange);
}

.footer-menus a:hover {
    color: var(--color-orange);
}


@media (max-width: 1500px) {
    footer .wrapper {
        display: grid;
        grid-template-columns: 1fr 5fr;
        grid-template-rows: auto 1fr;
        gap: 50px 60px;
    }
    
    .logo-background {
        grid-column: 1;
        grid-row: 1;
        align-items:flex-start;
    }

    .logo-background img { width:100%; height:auto;}
    
    .footer-content-wrapper {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        display: contents;
    }
    
    .footer-menus {
        grid-column: 2;
        grid-row: 1;
    }
    
    .footer-logo-wrapper {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}

@media (max-width: 1024px) {
    footer .wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    
    .logo-background {
        display: none;
    }
    
    .footer-menus {
        grid-column: 1;
        grid-row: 1;
    }
    
    .footer-logo-wrapper {
        grid-column: 1;
        grid-row: 2;
    }

    .footer-logo-wrapper .flex.row {
        flex-wrap: wrap;
    }

    .contact-bottom { gap:20px; }
    .contact.flex { width:100%; }
    .main-contacts {
        width: 50%;
    }

    .sidecontacts-wrapper {
        width: 50%;
    }

    .help-links {
        width: 100%;
        justify-content: space-between;
    }

    .sml-column .menu-social {
        display: none;
    }

    .menu-social-mobile {
        display: flex;
    }

    .address {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }
}

@media (max-width: 768px) {

    footer .content {
        padding: calc(var(--section-padding-y-lg) + 24px) 0 var(--section-padding-y) 0;
    }
    
    .footer-menus {
        flex-direction: column;
        gap: 40px;
    }
    
    .menu-sections {
        display: none;
    }
    
    .menu-companies {
        width: 100%;
        max-width: 100%;
    }
    
    .menu-companies ul {
        column-gap: 20px;
    }
    
    .sml-column {
        width: 100%;
        max-width: 100%;
    }

    .menu-countries {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-1 * var(--spacing-wrapper));
        margin-right: calc(-1 * var(--spacing-wrapper));
        margin-bottom: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .menu-countries::-webkit-scrollbar {
        display: none;
    }

    .menu-countries ul {
        flex-direction: row;
        gap: 15px;
        padding: 0 var(--spacing-wrapper);
    }

    .menu-countries ul li {
        flex-shrink: 0;
        width: 40vw;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0 !important;
        padding: 6px 10px;
        padding-bottom: 15px;
        font-size: 17px;
        line-height:17px;
        border: 1px solid rgba(237, 236, 225, 0.10);
        background: rgba(237, 236, 225, 0.05);
        opacity: 1;
    }

    .menu-countries ul li .clock-wrapper {
        max-height: calc(2.35em + 15px);
        opacity: 1;
    }

    .menu-countries ul::after { 
        content: '\00a0'; 
        display: block; 
        height: 100%; 
        width: 1px; 
        flex-shrink: 0;
    }
    
    .footer-logo-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .footer-logo-wrapper .flex.row {
        flex-direction: column;
        gap: var(--grid-gap-y);
        width: 100%;
    }
    .sidecontacts-wrapper { gap: 15px;}
    .contact-information { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap:0; }
    
}