/*
em - от текущего шоифта
% - от родительской ширины
rem - от стиля html
vw – 1% ширины окна
vh – 1% высоты окна
vmin – наименьшее из (vw, vh), в IE9 обозначается vm
vmax – наибольшее из (vw, vh)
*/


/* Custom browser scroll */
::-webkit-scrollbar {
	width: 5px;
	background: #59656F;
}

::-webkit-scrollbar-thumb {
    background: #f2d492;
	width: 10px;
}

/* YНе показывает меню - закомментировать */
/* html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
*/


/**
 * Heder -- customization
 */

 /**
 * Navigation -- fixed on mobile only
 */
@media only screen and (max-width: 767px) {
  #header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    right:0;
    z-index:99;
    }
}


/**
 * Header phone & working hours green icon change color by CSS filter generator to convert from black to target hex color at https://codepen.io/sosuke/pen/Pjoqqp
 */

.working-hours-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 10px; /* Adjust the value to add space between the image and text */
    align-items: end;
    color: #FFFFFF;
}

.avatar_1 {
    border-top: 1px solid var(--bde-body-text-color);
    border-bottom: 1px solid var(--bde-body-text-color);
    border-left: 1px solid var(--bde-body-text-color);
    border-right: 1px solid var(--bde-body-text-color);
    border-radius: 50%;
}

/* phone number */
.phone-top .header_phone {
    font-size: 1.5rem;
    color: var(--hcl-brand-1);
    font-family: Jura-Light;
    font-weight: bold;
    letter-spacing: 1px;
}

.phone-top a:hover {
    color: var(--hcl-teal-9);
}

/* hours text */
.working-hours-header .text {
    display: flex;
    flex-direction: column;
    font-size: 0.6rem;
    color: var(--hcl-neutral-7);
    font-weight: bold;
    letter-spacing: 1px;
}

.working-hours-header .hours {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0px;
}

/* color icon */
.working-hours-header .hours svg {
    width: 16px;
    height: 16px;
    margin-right: 6px; /* Adjust spacing between SVG and text */
    filter: invert(72%) sepia(57%) saturate(558%) hue-rotate(63deg) brightness(90%) contrast(92%);
}

/* header small desctop fix */
@media only screen and (max-width: 1440px) and (min-width: 1024px) {
  #header_phone_column {
    padding-right: 5rem;
    }

    /* text-size laptop screen for fixed scroll section */
    .laptop-sm-text {
    font-size: var(--hfs-text-s);
    }
}

/* Menu links Animation: Underline - Left to Right */
.nav-mega a {
	text-decoration: none;
}
.nav-mega a:hover {
	text-decoration: none;
}
.nav-mega a {
	text-decoration: none;
	position: relative;
}
.nav-mega a:after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	bottom: 0;
	height: 2px;
	margin: -1px 0;
	left: 0;
	background-color: currentColor;
	transition: all 0.25s ease-in 0s;
}
.nav-mega a:hover:after {
	width:100%;
}

/**
 * Page Content -- customization
 */

/* svg icon fix color - block services */
.icon-white {
    filter: invert(100%) sepia(30%) saturate(4046%) hue-rotate(293deg) brightness(139%) contrast(102%);
}

/**
 * Main SEO content - white block
 */
 .scroll-text li {
     margin-top: 8px;
 }
.scroll-text::-webkit-scrollbar {
    width: 3px;
	background: #CBCBCB;
    }
.scroll-text::-webkit-scrollbar-thumb {
    background: #393939;
	width: 3px;
  }

.scroll-text h3,
.scroll-text h4 {
    color: var(--hcl-brand-1);
    font-family: Jura-Light;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
}


.scroll-text h3 {
    font-size: var(--hfs-h3);
}

.scroll-text h4 {
    font-size: var(--hfs-h4);
}

/**
 * Footer -- customization
 */

/* Footer links Animation: Underline - Left to Right */
.nav-main a {
	text-decoration: none;
}
.nav-main a:hover {
	text-decoration: none;
}
.nav-main a {
	text-decoration: none;
	position: relative;
}
.nav-main a:after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	bottom: 0;
	height: 2px;
	margin: -5px 0;
	left: 0;
	background-color: currentColor;
	transition: all 0.25s ease-in 0s;
}
.nav-main a:hover:after {
	width:100%;
}

/**
 * custom contact form message by time
 */
.time_txt {
    text-align: center;
    color: #f2d492;
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 0px;
 }

.time_txt a {
    color: #FFFFFF;
    display: block;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 1rem;
}

.time_txt a:hover {
    color: var(--bde-palette-color-1-8a77fdb2-9803-4eff-b871-cbd0445674bc);
}

.working-hours {
    display: flex;
    color: #FFFFFF;
    justify-content: center;
    font-size: 1rem;
    padding-top: 1rem;
}

.working-hours .text::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='10' height='10'%3E%3Ccircle cx='25' cy='25' r='20' fill='black' /%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  margin-right: 5px; /* Adjust spacing between SVG and text */
  filter: invert(72%) sepia(57%) saturate(558%) hue-rotate(63deg) brightness(90%) contrast(92%);
}

/**
 * Call us footer - button
 */

#call_button {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 999;
  }

@media (max-width: 1119px) {
  #call_button {
    left: unset;
    bottom: 0px;
    right: 10px;
    z-index: 99;
  }
    
}

/* call button SVG icon custom animation */
.pulse {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    position:relative;
    border: 4px solid #f2d492;
}

.pulse:after {
    content:"";
    display:block;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 3px solid #f2d492;
    position:absolute;
    top:-5px;
    left:-5px;
    animation: pulse 2s ease 0s infinite;
    pointer-events: none; /* Ensure the pseudo-element doesn't capture events */
}

@keyframes pulse {
  0% {
      opacity: 1;
      transform: scale(1);
  }
  80% {
      opacity: 0;
      transform: scale(2);
  }
  100% {
      opacity: 0;
      transform: scale(3);
  }
}