@charset "UTF-8";

/*
Theme Name: Mediweb
Author: Mediweb team
*/

.wpcf7-form input, .wpcf7-form textarea {
    font-family: Montserrat, sans-serif;
}

body .header-nav .sub-menu-wrap li a {
    color: #3b3c3f !important;
}
body .header-nav .sub-menu-wrap li a:hover {
    color: #ffffff !important;
}

/* Removing extra h2 tag from contact-form popup */
.popup .popup-content .h2 {
  margin-bottom: 56px;
  text-align: center;
}

@media (max-width: 1024px) {
	.technologies {
		position: relative;
	}
	.technologies::before {
		/*taken from .gallery border-radius*/
		--height: 88px;
		content: "";
		width: 100%;
		height: var(--height);
		display: block;
		position: absolute;
		left: 0;
		top: calc(var(--height) * -1);
		background: #ebe3cd;
		z-index: -1;
	}
}

@media (max-width: 768px) {
	.mob-menu {
		--header-h: 83px;
		--header-rad: 12px;
		
		top: calc(var(--header-h) - var(--header-rad)) !important;
	}
	.access {
		border-radius: 8px 8px 0 0 !important;
	}
	.technologies::before {
		/*taken from .gallery border-radius*/
		--height: 16px;
	}
}

@media (max-width: 767px) {
	.phone a {
		pointer-events: auto !important;
	}
}

/* new colorr for burger */
.burger:is(button) {
	&::before, &::after, span {
		background: #364467
	}
}
.burger.active:is(button) {
	&::before, &::after, span {
		background: #364467
	}
}

body:not(.home) .header:not(.f-nav) {
	.burger {
		&::before, &::after, span {
			background: #FDFDF5
		}
	}
	.burger.active {
		&::before, &::after, span {
			background: #FDFDF5
		}
	}
}

.burger:is(button) {
	&.active::before {
		transform: rotate(45deg) translateY(20px) translateX(5%)
	}
	span {
		transform: scale(1) translate(-50%, -50%);
	}
	
}

.mob-menu .sub-menu .menu-item.menu-item-has-children.active > a {
	color: #364467;
}

/* Prealoader updates */
body {
	.preloader .wrapper .wrap .text {
		width: 140px;
		height: auto;
		top: calc(50% - 35px);
	}
	
	.preloader .wrapper .wrap {
		animation: wrap-size-upd 3s ease 0s forwards
	}


}

@keyframes wrap-size-upd {
	0% {
		max-width: 1398px;
		aspect-ratio: 1398 / 1009;
		top: 0;
		left: 0;
	}

	100% {
		max-width: 110.041px;
		aspect-ratio: 110.041 / 109.449;
		top: 50%;
		left: 0;
		transform: translate(15%, -50%);
	}
}
.fancybox__container {
	--fancybox-backdrop-bg: rgba(54, 68, 103, 0.85) !important;
	--f-arrow-svg-width: 48px!important;
	--f-arrow-width: 48px!important;
	--f-arrow-bg: transparent !important;
}
.fancybox-button {
	--slide-width: min(950px, calc(100% - 60px));
	--offset: calc((100% - var(--slide-width)) / 2);
	--offset-top: calc((100% - 760px) /2 );
	
	all: unset;
    appearance: none;
	position: absolute;
    top: var(--offset-top);
    left: calc(var(--slide-width) + var(--offset) + 59px);
    display: flex;
    background: transparent;
    border: none;
	z-index: 10;
	cursor: pointer;
}
.is-horizontal .f-button.is-arrow.is-prev, .is-horizontal .f-button.is-arrow {
	--slide-width: min(950px, calc(100% - 60px));
	--offset: calc((100% - var(--slide-width)) / 2);
	--offset-next: calc(var(--slide-width) + var(--offset));
	--offset-prev: var(--offset);
}
.is-horizontal .f-button.is-arrow.is-prev, .is-horizontal .f-button.is-arrow.is-next {
	inset: 93% var(--offset-next) auto !important;
	transform: translate(-100%, -100%) !important
}
.is-horizontal .f-button.is-arrow.is-prev, .is-horizontal .f-button.is-arrow.is-prev {
	inset: 93% var(--offset-prev) auto !important;
	transform: translate(0%, -100%) !important
}
.fancybox__carousel>.f-button.is-arrow:before {
	display: none;
}
.f-panzoom__viewport {
	display:flex !important;
	align-items: center;
}
.f-panzoom__viewport>.f-panzoom__content {
	border-radius: 40px;
	max-width: min(950px, calc(100% - 60px));
	height: auto !important;
	margin-inline: auto;
}
@media (max-width: 1024px) {
	.fancybox-container {
		--f-arrow-pos: 16px !important;
	}
	.fancybox-button {
		left: unset;
		right: var(--f-arrow-pos, 0)
	}
}
@media (max-width: 768px) {
	.f-panzoom__viewport>.f-panzoom__content {
		border-radius: 16px;
		max-width: calc(100% - 32px);
	}
	.is-horizontal .f-button.is-arrow.is-prev, .is-horizontal .f-button.is-arrow {
		--slide-width: calc(100% - 32px);
		--offset: calc((100% - var(--slide-width)) / 2);
	}
	.fancybox-button {
		--slide-width: calc(100% - 32px);
		--offset: calc((100% - var(--slide-width)) / 2);
	}
}