/*
Theme Name: Oerlikon
Author: Portalworks
Version: 1.0
*/

:root {
    --primary-color: #5E3537;
    --secondary-color: #F14821;
    --on-click-color: #F7795C;
    --text-color: black;
    --primary-font: 'Manrope';
    --secondary-font: 'Gala';
    --triline-font: 'GalaTriline';
    --light-yellow: #F0E7BF80;
    --yellow: #F0E7BF;
}

/****************************
           GENERAL
****************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    scroll-behavior: smooth;
}

img {
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);
    font-weight: 300;
    color: var(--primary-color);
    line-height: 120%;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 1rem;
}

.primary-color {
    color: var(--primary-color)!important;
}

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

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

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

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

.triline-title {
    color: var(--secondary-color);
    font-family: var(--triline-font);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
}

.title {
    color: var(--primary-color);
    font-family: var(--primary-font);
    font-weight: 300;
    line-height: 120%;
}

.swiper-slide{
	
	height: auto !important;
}

.swiper-slide img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.text, .big-text {
    color: var(--text-color);
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 300;
    line-height: 140%;
}

.primary-btn {
    display: inline-flex;
    padding: 9px 24px;
    height: fit-content;
    width: fit-content;
    gap: 6px;
    border-radius: 5px;
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    color: white;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: 0.84px;
    white-space: nowrap;
}

.primary-btn:hover {
    background: #f0e7bf;
    color: #000;
    border: 1px solid #000;
}

.primary-btn:focus, .primary-btn:active, :not(.btn-check) + .primary-btn:active, .primary-btn:active, .primary-btn:first-child:active {
    background: white;
    color: var(--on-click-color);
    border: 1px solid var(--on-click-color);
}

.custom-container, .footer-container {
    max-width: unset;
    padding-inline: 18px;
}

.small-container {
    max-width: 1014px;
    margin: auto;
}

.site-name {
    margin-bottom: 9.5px;
}
/****************************
            NAVBAR
****************************/
.navbar {
    padding-top: 14px;
}

.navbar, .navbar a, footer a, .copyright {
    font-family: var(--secondary-font);
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--primary-color);
}


footer a.primary-btn {
    font-family: var(--primary-font);
    font-size: 1rem!important;
    font-weight: 500;
    text-transform: none;
    text-decoration: none;
    color: #fff;
}

footer a {
    font-size: 1rem!important;
}

.current-menu-item a {
    color: var(--secondary-color);
}

.navbar-brand {
    max-width: 90px;
}

.navbar-toggler-icon {
    background-image: none;
    background-color: var(--primary-color);
    height: 3px;
    width: 25px;
    margin: 10px 0;
    position: relative;
    transition: all 0.35s ease-out;
    transform-origin: center;
}

.navbar-toggler-icon::before {
    display: block;
    background-color: var(--primary-color);
    height: 3px;
    content: "";
    position: relative;
    top: -7px;
    transition: all 0.15s ease-out;/*taken down to hide quicker*/
    transform-origin: center;
}

.navbar-toggler-icon::after {
    display: block;
    background-color: var(--primary-color);
    height: 3px;
    content: "";
    position: relative;
    top: 4px;
    transition: all 0.35s ease-out;
    transform-origin: center;
}

.navbar-dark .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon::before,
.navbar-dark .navbar-toggler-icon::after {
    background-color: var(--bs-gray-100);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    transform: rotate(45deg);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
    transform: rotate(-90deg) translateX(7px);
}

.navbar-toggler, .navbar-toggler:focus {
    padding: 0;
    border: none;
    width: 24px;
    height: 24px;
    box-shadow: none;
}

.menu-item a:hover {
	color: var(--secondary-color);
}

.menu-item a:focus, .menu-item a:active {
    color: var(--on-click-color);
}

/****************************
            FOOTER
****************************/
footer {
    padding-top: 85px;
    padding-bottom: 87px;
}

.copyright, footer .site-name {
    font-size: 1rem;
}

footer li {
	line-height: 1;
}

footer .navbar p.address {
	font-family: "Manrope"!important;
    text-transform: capitalize;
	font-size: 1rem;
	font-weight: 400;
}


.wpcf7-form-control.btn.primary-btn {
	line-height: 1;
}
.wpcf7-form-control.btn:disabled {
	background-color: var(--secondary-color);
	cursor: pointer !important;
	pointer-events: auto;
	opacity: 1;
}
.wpcf7-form-control.btn:disabled:hover {
	background-color: #f0e7bf;
}
.map-text {
	max-width: 80%;
}
#map-slider .mySwiper {
	height: 100%;
}
.text-under a {
	text-decoration: none;
}
.text-under a:hover {
	text-decoration: underline;
}

.facts-swiper-container .swiper-pagination-bullet {
	width: 14px;
	height: 14px;
	background-color: #FFFFFF;
	border: 1px solid var(--secondary-color);
}
.facts-swiper-container .swiper-pagination-bullet-active {
	background-color: var(--secondary-color);
	border: 1px solid var(--secondary-color);
}
.facts-swiper-container .swiper-slide {
	display: flex;
	align-items: end;
}
.distance span {
	white-space: nowrap;
}
.above-button span {
	white-space: nowrap;
}

.fslightbox-source {
    width: 100% !important;
    height: auto !important;
    max-width: 100%; /* Ensures it doesn't exceed the container's size */
}
/****************************
          RESPONSIVE
****************************/

@media only screen and (max-width: 768px) {
	.navbar-collapse .navbar-nav ul.sub-menu li {
		list-style: disc!important;
	}
	
	.navbar-collapse .navbar-nav ul.sub-menu li::marker {
		color: #f0e7bf!important;
	}
}

@media only screen and (min-width: 768px) {
    h1 {
        font-size: 2.75rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    h5 {
        font-size: 1.25rem;
    }

    h6 {
        font-size: 1rem;
    }
	
	.title {
		font-size: 2.5rem;
	}

    .triline-title {
        font-size: 2rem;
    }

    .text {
        font-size: 1rem;
    }

    .big-text {
        font-size: 1.25rem;
    }

    .primary-btn {
        padding: 14px 36px;
        gap: 10px;
        font-size: 16px;
        letter-spacing: 0.96px;
    }

    .custom-container, .footer-container {
        padding-inline: 90px;
    }

    .navbar {
        padding-top: 68px;
    }
	.home .navbar-brand {
		max-width: 140px;
	}
    .navbar-brand {
        margin-right: 5px;
    }

    .site-name {
        margin-bottom: 42.5px;
    }
	.navbar-toggler {
		margin-top: -20px;
	}
	footer a, footer .site-name {
		font-size: 1.25rem!important;
	}

	footer li {
		line-height: unset;
	}
}
@media only screen and (min-width: 992px) {
	#map-slider .mySwiper img{
		aspect-ratio: none;
	}
}
@media only screen and (min-width: 1200px) {
	h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2rem;
    }
	
	.triline-title {
        font-size: 2rem;
    }
	
	.text {
        font-size: 1.2rem;
    }
	
	.big-text {
        font-size: 1.5rem;
    }
	
    .footer-container {
        padding-inline: unset;
        max-width: 964px;
    }
	
	footer a, footer .site-name {
		font-size: 1.5rem!important;
	}

}
@media (min-width: 1280px) {
 
}
@media only screen and (min-width: 1600px) {
    .custom-container {
        max-width: 1334px;
        padding-inline: unset;
    }
}