@font-face {
  font-family: agency; /* set name */
  src: url(fonts/agency-fb/AGENCYB.TTF); /* url of the font */
}
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
:root{
  --max-width: 1440px;
  --padding-inline: calc((100dvw - var(--max-width) )/ 2 );

  --clr-light-light: 254, 247, 255;
	--clr-dark-light: 253, 218, 207;
	--clr-light-dark: 226, 173, 255;
	--clr-dark-dark: 77, 67, 82;

  --clr-accent-1: linear-gradient(-145deg,  rgb(var(--clr-light-dark)) 0%,rgb(var(--clr-dark-light)) 100%);
  --mobiMenu-height: 140px;

  --svgback1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F4A6F1'/%3E%3Cstop offset='1' stop-color='%23BAC2FF'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23CA56C5' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23CA56C5' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.5'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
}

@media screen and (max-width: 1439px) {
  :root{
    --max-width: calc(100% - 24px);;
  }
}

html,body,main{overflow-x: clip;width: 100dvw;}
body{display: grid; grid-template-rows: auto auto 1fr auto;min-height: 100dvh;color: #333; font-family: sans-serif;font-size: 18px;line-height: 1.5;letter-spacing: 0.02em;}
body>nav{
  top: 0; position: sticky; display:grid;
  box-shadow: 0 -2px 4px rgba(0,0,0,1);
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.8);
  a {color: #333; text-decoration: none;}
  & > *:not(.nav-cont){padding: max(12px,calc( (100% - var(--max-width)) / 2 ));margin: 0;}
  & >div:first-of-type{background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: space-around;padding-block: 8px;}
  & >div:first-of-type > :first-child{text-align: right;}
  .top-bar{ color: #f3bd01}
  .top-bar a{ color: #f3bd01}
  & .nav-cont{display: flex;padding-inline:max(12px,calc( (100% - var(--max-width)) / 2 ));}
  & ul{display: flex;list-style: none;margin: 0;align-items: center;padding-inline:max(12px,calc( (100% - var(--max-width)) / 2 ));padding-block: 12px;}
  & ul a{white-space: nowrap;text-decoration: none; color: #333; font-size: 18px;}
  & ul a{padding: 12px 16px;}
  .logo-cont{ width: 100%;padding-block:18px;}
  .logo-cont img{ height: 75px; width: 75px;object-fit: contain; object-position: left;}
  .logo-cont span{position: relative; font-size: 28px;color: #696969;font-family: agency;font-size: 2em;}
  .logo-cont a{display: flex; align-content: center;align-items: center;column-gap: 16px;}
  .nav-items a {font-size: 26px;}
}
body>footer{
  padding-block: 16px; display: grid; padding-inline: max(12px,calc( (100% - 1280px) / 2 )); background-color: #161616; color: #fff; position: relative;

  &>*{z-index: 1;}
  & ul{margin: 0; padding: 0; display: flex;flex-wrap: wrap;list-style: none;justify-content: center;}
  & ul.pages a{text-decoration: none; color: #fff; font-size: 18px; padding: 12px 24px;display: inline-block;}
  & ul.socials {justify-content: center;padding-top: 8px}
  & ul.socials a{color: #F2BC00; font-size: 32px;}
  & ul.socials i.fa-facebook{font-size: 30px;}
  & > img{mix-blend-mode: color-dodge;position: absolute;object-fit: cover; width: 100%; height: 100%;z-index: 0;}
  & > div:nth-of-type(2){display: grid; grid-template-columns: auto 1fr auto;gap: 16px;}
  & > div:nth-of-type(2) > div:nth-of-type(1){display: grid;place-self: center;}
  & > div:nth-of-type(2) > div:nth-of-type(2){display:grid; justify-items: center;}
  & > div:nth-of-type(2) > div:nth-of-type(2) img{max-width: 100%;object-fit: contain;}
  & > div:nth-of-type(2) > div:nth-of-type(2) span{color: #F2BC00;}
  & > div:nth-of-type(3){display: grid; font-size: 16px; justify-content: center;text-align: center;border-top: 1px solid #c0c0c085; padding-top: 6px}
  & > div:nth-of-type(3) p{margin: 6px;}
  & > div:nth-of-type(3) p:last-of-type{font-size: 12px;}
  & > div:nth-of-type(3) a{color: #F2BC00;}
  address{max-width: 320px; color: #fff}
  address a {color: #fff; text-decoration: none;}
  .logo-cont{ width: 100%;}
  .logo-cont img{ height: 120px; width: 100px;object-fit: contain; object-position: left;}
  .logo-cont span{position: relative; font-size: 20px;color: #fff;font-family: agency;font-size: 28px;}
  .logo-cont a{ display: flex;align-items: center;column-gap: 18px;}
  @media screen and (max-width: 600px) {
    & > div:nth-of-type(2){
      grid-template-columns: 1fr;
    }
  }
}

.heading-sub{color: #676767}
a{text-decoration:none;color: inherit;}
h1{font-size: 48px; font-family: Impact;font-weight: normal;letter-spacing: 0.03em;}
h2{font-size: 30px}
/*.btn{display: flex; place-content: center; text-decoration: none; font-size: 18px;display: inline-block; padding: 12px 18px; border-radius: 4px; border: 5px solid;border-image-slice: 1; border-width: 2px;  border-image-source:linear-gradient(90deg, rgba(255,119,0,0.8) 0%, rgba(255,33,197,0.8) 100%);}*/
.btn{color: #333;text-decoration: none; display: flex; place-content: center; text-decoration: none; font-size: 18px;display: inline; padding: 12px 18px; margin: 2px;background-color: #fff;position: relative;font-weight: bold;letter-spacing: 0;border: none;}
.btn:before{position: absolute;z-index: -1;content: '';background:linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%);border-radius: 3px; top: -2px; left:-2px; right: -2px; bottom: -2px;}
.btn:hover{background-color: transparent; color: #fff; transition: all 0.2s;}
.intro-banner{
  min-height: 320px;
  overflow: hidden;
  position: static;
  &>*{z-index: 2; position: relative;}
  /* &:before{content: ''; top: -1px; bottom: -1px; left: -1px; right: -1px; position: absolute; background-color: rgba(0, 0, 0, 0.3); z-index: 1;} */
  &>img{position: absolute;width: 100%; height: 100%; object-fit: cover;top:0;z-index: -1;object-position: top;right: 0;}
  div.intro-text{

    top: 0;left: 0;
    padding-left: calc( (100vw - var(--max-width)) / 3 );
    padding-right: 45px;
    width: 50%; color: #fff; background-color: rgba(0,0,0,0.5); height: 100%;display: grid;place-content: center;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 60px) 100%, 0 100%, 0% 100%);
    z-index: 2;
    padding-block: 26px;
    h1{font-size: 32px;}
    p{font-size: 20px;line-height: 1.5;}
  }
  div.affiliates{background-color: #fff;display: flex;}
  div.affiliates>:is(:first-child){background:  linear-gradient(90deg, rgba(255,119,0,0.8) 0%, rgba(255,33,197,0.8) 100%);display: flex; place-content: center;place-items: center; padding: 16px ;color: #fff; font-size: 22px; font-weight: bold;padding-left: calc( (100vw - var(--max-width)) / 2 );white-space: nowrap;}
  div.affiliates>:is(:nth-child(2)){width: 100%;display: flex; gap: 16px;justify-content: space-around;padding: 16px;}
  div.affiliates>:is(:nth-child(2)) span{height: 115px;}
  div.affiliates>:is(:nth-child(2)) img{width: 100%; height: 100%; object-fit: contain;}
  div.affiliates>:is(:last-child){background:  linear-gradient(90deg,  rgba(255,33,197,0.8) 0%,rgba(255,119,0,0.8) 100%);display: flex; place-content: center;place-items: center; padding: 16px ;color: #fff; font-size: 22px; font-weight: bold;padding-right: calc( (100vw - var(--max-width)) / 2 );}
  div.affiliates>:is(:last-child) img{max-width: 280px;}
  .intro-service-list-cont:before{content: ''; top: -1px; bottom: -1px; left: -1px; right: -1px; position: absolute; background-color: rgba(0, 0, 0, 0.8); z-index: 1;}
  .intro-service-list{position: relative;display: flex;list-style: "-";font-size: 16px;padding-inline: calc( (100vw - var(--max-width)) / 2 );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    z-index: 2;
    background-image:  linear-gradient(90deg, rgba(255,119,0,0.8) 0%,rgba(255,33,197,0.8) 100%); font-weight: bold;margin:0; padding-block: 16px;}
    .intro-service-list li{padding-left: 4px;z-index: 2;}
}
@media screen and (max-width: 800px){
  .intro-banner {
    div.intro-text{
      width: 100%;clip-path: unset; padding-inline: 4px; text-align: center;
      > h1{font-size: 26px;}
      > p { font-size: 16px;}
    }
    div.affiliates{display: grid;}
    & div.affiliates > :is(:first-child){display: grid;white-space: unset;padding-inline: 4px;}
    & div.affiliates > :is(:nth-child(2)){display: grid;white-space: unset;padding-inline: 4px;}
    & div.affiliates > :is(:last-child){display: grid;white-space: unset;padding-inline: 4px;}
    & .intro-service-list{padding: 4px;}
  }
}

.intro-about{
  padding-right:max(12px,calc( (100% - var(--max-width)) / 2 ));overflow: hidden;padding-top:64px;

  &:after{ content: "";clear: both; display: table;}
  h2{font-size: 42px}
  h2 span:last-child:before{
    content: "\A";
    white-space: pre;
  }
  &>img{max-height: 550px; object-fit: cover;object-position: top center; float: left; width: 50%;clip-path: polygon(0% 0%, 100% 0%, calc(100% - 60px) 100%, 0 100%, 0% 100%); shape-outside:  polygon(0% 0%, 100% 0%, calc(100% - 60px) 100%, 0 100%, 0% 100%); shape-margin: 12px;margin-right: 32px;}
  &>.section-img img{width: 100%; height: 100%; object-fit: cover;}
  .btn{float: right;margin-block: 16px}
  p{font-size: 20px;line-height: 1.5;}
  p:last-of-type{font-style: italic;}
  @media screen and (max-width: 800px){
    display: grid;
    padding-inline: 6px;
    div{text-align: center;}
    & > img{width:100%; clip-path: none;height: 250px;}
    & h2{font-size: 28px;text-align: center;}
  }
}

ul.custom-mark-icons {
  list-style: none;padding-left:16px;
  position: relative;
  & li{display: flex;}
  & li::before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    height: 20px;
    aspect-ratio: 1/1;
    background-image: url("img/bullet-dog-y.svg");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    align-self: flex-start;
    transform: translateY(-2px);
  }
}

.intro-services{
  padding-top: 64px;
  padding-inline:max(12px,calc( (100% - var(--max-width)) / 2 ));overflow: hidden;
  h2{font-size: 42px;}
  img{float: right;width: 75%;shape-outside: polygon(4% 40%, 20% 6%, 97% 6%, 97% 95%, 50% 100%, 50% 75%, 20% 75%);}
  ul{font-size: 22px; line-height: 1.2;margin-bottom: 0;}
  .btn{width: 150px;text-align:center; display: inline-block;}
  &:after{ content: "";clear: both; display: table;}
  p{text-align: right;margin-block: calc(1em + 8px); line-height: 1;padding-right: 500px}
}

@media screen and (max-width: 800px){
  .intro-services{
    display: grid;grid-template-columns: 1fr 1fr;gap:16px;padding-block: 8px;
    & img{width: 100%;}
    h2{margin-block: 0; font-size: 28px;}
    >*{grid-column: 1/-1;}
    & p{margin-block:0px;grid-column: auto;place-self: center;}
    ul{margin-block: 0;}
  }
}
.intro-cta-banner{
  position: relative;padding-inline:max(12px,calc( (100% - var(--max-width)) / 2 ));overflow: hidden;display: grid;align-items: center;margin-top: 64px;
  min-height: 500px;
  &>*{z-index: 2; position: relative;}
  &:before{content: ''; top: -1px; bottom: -1px; left: -1px; right: -1px; position: absolute; background-color: rgba(0, 0, 0, 0.1); z-index: 1;}
  img{position: absolute;top:0; left:0; width: 100%; height: 100%; object-fit: cover;z-index: 0;object-position: center ;}
  div{max-width: 50%;position: relative; left:100%; transform: translate(-100%,0%);display: grid; justify-items: center;}
  h2{font-size: 48px;color:#fff}
}

@media screen and (max-width: 800px){
  .intro-cta-banner div{width: 100%; left: 0%; transform: unset; max-width: 100%;}
  .intro-cta-banner h2{font-size: 24px;}
  .intro-cta-banner:before{background-color: rgba(255, 255, 255, 0.44);}

}


.intro-benefits{
  display: grid;
  padding-inline:max(12px,calc( (100% - var(--max-width)) / 2 ));
  padding-block:2rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap:3rem;
  hgroup{grid-column: 1/-1;}
  h2{text-align: center;font-size: 48px;grid-column: 1/-1;margin: 0;}
  h3{grid-column: 1/-1;margin: 0;text-align: center;}
  &>div{display: grid; grid-template-columns: 1fr 2fr; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); border-radius:15px; overflow: hidden; column-gap: 1.5rem; padding-right: 8px; grid-template-rows: min-content 1fr; background-color: #fff; }
  &>div img{grid-column: 1; grid-row: 1/ span 3; object-fit: contain; width: 100%; height: 100%;}
  &>div h3{margin: 0;font-size: 1.2rem;margin-top: 1rem;}
  &>div a{justify-self: flex-end;align-self: flex-end;margin: 1rem;color:  rgb(85, 0, 128);font-weight: bold; text-decoration: none;}
}
@media screen and (max-width: 800px){
  .intro-benefits{
    grid-template-columns: 1fr;
    div > img{height: 250px}
    div{grid-template-columns: 1fr;padding-inline: 0px;}
    div > *:not(img){padding-inline: 8px;}
    h2{font-size: 28px;}
  }
}

.intro-clients{
    padding-inline: max(12px,calc( (100% - var(--max-width)) / 2 ));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin: auto;
    h2{text-align: center;font-size: 48px;grid-column: 1/-1;margin: 0;}
    &>div{display: grid;grid-template-rows: 250px auto;}
    &>div img{width: 100%; height: 100%; max-height: 250px; object-fit: contain; object-position: center;}
    &>div h3{text-align: center;}
    @media screen and (max-width: 800px){

    }
}

.intro-contact{
  width: var(--max-width);
  margin-inline: auto;position: relative;background-color: rgba(255,255,255,0.7);margin-block: 24px;padding: 16px;
  display: grid; grid-template-columns: 1fr 1fr;gap: 16px;margin-top: 64px;
  /*padding-inline: max(12px,calc( (100% - var(--max-width)) / 2 ));*/
  &>img{position: absolute; top:-24px; bottom: 24px; left: 0; width: 100vw; left: calc( (100% - 100vw) / 2 ); height: calc(100% + 48px); object-fit: cover;z-index: 0;object-position: center;z-index: -1;}
  i{color: #F2BC00; width: 64px;height: 64px; border-radius: 999999px; border: 2px dotted;display: flex; font-size: 24px;place-items: center;place-content: center;}
  &>h2{grid-column: 1/-1;margin: 0; display: flex;align-items: center;}
  &>h2>span{height: 1px; border-top: 1px solid #F2BC00; width: 100px;display: inline-block; margin-left: 20px;}
  &>.logo-cont{grid-column: 1/-1;position: relative;height: 75px;align-items: center;display: flex;font-size: 24px;}
  &>.logo-cont img{width: 75px; height: 75px; object-fit: contain;position: absolute;left: 0;}
  &>.logo-cont span{z-index: 2;}
  a{text-decoration: none; color:#333;}
  &>div:last-of-type{display: grid;grid-template-columns: 1fr 1fr;gap: 18px}
  &>div:last-of-type > *{display: grid;justify-items: center;background-color: rgba(255,255,255,0.9);padding: 12px; gap: 8px}
  &>div:last-of-type > *:first-child{grid-column: 1/-1;}
  h3{margin: 0}
  form{background-color: rgba(255,255,255,0.9);display: grid; grid-template-columns: 1fr 1fr; gap: 12px;padding: 16px; align-content: center;align-items: start ;}
  input, textarea{border-color: #eee;border-style: solid;padding: 8px;}
  textarea{grid-column: 1/-1;height: 100%;min-height: 150px;width: 100%;resize: none;}
  input[name=Subject]{grid-column: 1/-1;}
  button{grid-column: 1/-1;justify-self: center;background-color: #F2BC00; border: none; color:#fff;padding: 12px 16px;border-radius: 8px; cursor: pointer;}
  @media screen and (max-width: 800px){
    grid-template-columns: 1fr;
    & > div:last-of-type{
      grid-template-columns: 1fr;
    }
    form{grid-template-columns: 1fr;}
  }
}



.intro-title{
  width: 100vw;
  padding-inline:max(12px,calc( (100% - var(--max-width)) / 2 ));
  position: relative;
  min-height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  hgroup p {color: #fff;font-size: 36px;}
  h1{color: #fff}

  .banner-wrapper{
    top:0;
    position: absolute;
    margin-inline: calc( (100% - var(--max-width)) / -2 );
    z-index: -1;
    width: 100%;
    height: 100%;
  }
  .banner-wrapper::after{
    content: "";
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
  }
  img{width: 100%; height: 100%; object-fit: cover;}
}

.about-section-intro{margin-inline: var(--padding-inline);display: grid; grid-template-columns: 1fr 1fr; padding-block: 2rem;}
.about-section-intro  > div{position: relative}
.about-section-intro  h2{font-family: sans-serif; font-weight: bold; text-align: left;}
.about-section-intro img{width: 100%; height: 100%; object-fit: contain; position: absolute;}

.about-section-why{padding-inline: var(--padding-inline);display: grid; grid-template-columns: 1fr 1fr; padding-block: 2rem;background-color: #fff;
}
.about-section-why img{	width: 100%; height: 100%; object-fit: contain; position: absolute;}
.about-section-why > div{position: relative}
.about-section-why > div:nth-child(1){order:2;align-self: flex-start;
  height: 600px;
  position: sticky;
  top: var(--mobiMenu-height);}
.about-section-why li{list-style: none;}
.about-section-why h2{font-family: sans-serif; font-weight: bold; text-align: left;}

.about-section-credentials{margin-inline: var(--padding-inline);display: grid; grid-template-columns: 1fr 1fr; padding-block: 2rem;}
.about-section-credentials img{max-width: 100%; max-height: 100%; object-fit: contain;}
.about-section-credentials > div{position: relative; order:2;}
.about-section-credentials > div:nth-child(1){display: grid;grid-template-rows: repeat(2,minmax(auto,300px));gap: 24px; justify-items: center;}
.about-section-credentials h2{font-family: sans-serif; font-weight: bold; text-align: left;}

@media screen and (max-width: 800px) {
  .about-section-intro{  grid-template-columns: 1fr;margin-inline:8px}
	.about-section-intro img{position: relative;}
  .about-section-why{grid-template-columns: 1fr;margin-inline:0px}
	.about-section-why img{position: relative;}
	.about-section-why > div{order:2}
	.about-section-why > div:nth-child(1){order:1}
	.about-section-credentials{grid-template-columns: 1fr;text-align: center;margin-inline:8px}
	.about-section-credentials img{position: relative;max-height: 250px;max-width: 300px; max-height: 300px;}
}

.texblock-cont{display: grid; grid-template-columns:  300px 1fr ;padding-inline: var(--padding-inline); gap: 2rem;margin-bottom: 2em;}
.side-nav{padding-block: 2rem;align-self: start;top:var(--mobiMenu-height); position: sticky;order:0;border: 2px outset #161616;border-radius: 4px;padding: 1rem;font-size: 14px;margin-top: 2rem; max-height: calc(100dvh - 150px); overflow-x: scroll;}
.side-nav h2{margin: 0;font-size:1.2rem;text-decoration: none;margin-bottom:0rem;position: sticky;top: -0.9em;background-color: #fff;}
.side-nav ul{ display:grid;grid-gap: 0.75rem;font-size: 1rem; margin-left: 0;	padding-left: 1em;}
.side-nav li{ display:flex;grid-gap: 0.5rem;}
.side-nav li:before{ content:">";}
.side-nav a{ text-decoration:none; color: inherit;}


.service-section{padding-block: 2rem;padding-inline: 20px;display: grid; grid-template-columns: 2fr 3fr;grid-row:1;grid-gap: 1rem;line-height: 1.5; scroll-margin-top: var(--mobiMenu-height);}
.service-section{grid-template-columns: 3fr 2fr;grid-row:1;grid-gap: 1rem;line-height: 1.5}
.service-section>*{grid-column:1;position: relative;}
.service-section .img-cont{grid-column:2;grid-row: 1/ span 3;position: relative;}

.service-section h2{text-decoration: none; font-size: 2rem; grid-column: 1;margin: 0;}
.service-section > p{margin-block: 1rem;grid-column: 1;grid-row: 2}
.service-section ul{display: grid; grid-gap: 0.5rem; grid-template-columns: auto 1fr;grid-column: 2}
.service-section ul li{display: contents;}
.service-section ul li span{font-weight: bold; white-space: nowrap}
.service-section ul li p{margin: 0;}
.service-section .img-cont{grid-column:2;grid-row: 1/ span 3;position: relative;}
.service-section .img-cont img{width: 100%; height: 100%; object-fit: contain;position: absolute;}
.service-section a.btn{ justify-self: left;border-color: #f3bd01;color:#333}
.service-section a.btn::before{background: #f3bd01;}
.service-section a.btn:hover{background-color: #fff;border-color: #f3bd01;}

@media screen and (max-width: 800px) {
  .mapsCont iframe{width: calc(100% )}
  .contact-form{width: 100%}
  .contact-form form input, .contact-form > form select, .contact-form > form textarea{width: 100% !important}
  .texblock-cont{grid-template-columns: 1fr;}
	.texblock-cont>div:last-child{order:2}
	.side-nav{z-index: 999;background-color:#fff;padding-block: 0.75rem;top: calc( 80px);order:1}
	.side-nav ul{font-size: 0.75rem; display: flex; flex-wrap: wrap;margin: auto;justify-content: center;gap:0.5rem}
	.side-nav li::before{display: none;}
	.side-nav li{background-color: rgb(245, 245, 245); padding: 6px 8px; border-radius: 8px;}
	.side-nav h2{margin-bottom: 0; display: none;}

  .carousel__track{padding-inline: 0px !important;}
  .carousel__btn {display: none !important}
	.service-section,.service-section:not([data-active]){grid-template-columns: 1fr !important;grid-column: 1 !important;grid-row:auto !important; visibility: visible !important;border-bottom: 1px #ccc solid}
	.service-section h2{text-decoration: none; font-size: 1.3rem; grid-column: 2;margin: 0;position: unset;top: unset;z-index: 98;background-color: #fff;text-align: center;}
	.service-section ul{grid-template-columns: 1fr}
	.service-section > *{grid-column: 1 !important;grid-row:auto !important;}
	.service-section .img-cont{grid-row: 2 !important;height: 250px}

}

#contact-wrapper{margin-inline: var(--padding-inline);display: grid; grid-template-columns: 1fr 1fr;grid-gap: 24px;margin-block: 2rem;}
#contact-wrapper h2{text-align: left;width: fit-content; position: relative; margin-top: 0;}
#contact-wrapper h2:before{ content: "";position: absolute;
  background-color: var(--primCol);
  width: 50%;
  height: 2px;
  display: inline-block;
}
.address-block{margin-inline: var(--padding-inline);padding-block: 48px;grid-column: 1/-1;display: grid; grid-auto-flow:  column; justify-items: center;justify-content: center;grid-template-columns: repeat(3,1fr);}
.address-block > div{font-size: 18px;display: grid;justify-content: center; justify-items: center;padding-inline: 80px;padding-block: 12px;grid-gap: 24px;border-right: 3px solid rgb(85, 0, 128);align-content: flex-start;width: 100%;text-align: center;}
.address-block > div:last-child{border:none;}
.address-block span{font-weight: bold}

.address-block i{display: grid; font-size: 48px; color:#F2BC00;}


.contact-form{padding-block: 0px;font-size: 16px;}
.contact-form>*{grid-column: 2;}
.contact-form>h2{grid-column: 2;grid-row:1;display: grid; font-size: 42px; grid-gap: 16px;justify-items: flex-start;margin-bottom: 0;}
.contact-form>img{grid-column: 1;grid-row: 1/ span 3;justify-content: center;justify-self: center;width: 100%;align-self: center;height: 100%;object-fit: cover;}
.contact-form form{display: grid; grid-gap: 14px; grid-template-columns: repeat(2, 1fr); color: #9B9B9B}
.contact-form form textarea{grid-column: 1/-1;}
.contact-form form input,.contact-form>form select,.contact-form>form textarea{padding: 8px 8px; background-color: #fff;border: none; border-radius: 6px;box-shadow: 0 0 1px rgba(0,0,0,0.5);}
/*.contact-form form button{background: var(--clr-accent-1); color: rgb(var(--clr-dark-dark)); font-size: 1.2em; padding: .5rem 1rem; text-transform:uppercase;font-weight: bold;-webkit-appearance: inherit;border-style: none;box-shadow: 1px 1px 1px rgba(0,0,0,0.5);border-radius: 4px;justify-self: flex-end;grid-column: 1/-1; cursor: pointer}*/
.contact-form form button{justify-self: flex-end;grid-column: 1/-1; cursor: pointer}
.contact-form>p,.contact-form>form{max-width: 600px;}
.contact-form form > div{display: grid; grid-template-columns: 1fr 1fr;grid-gap: 8px;background-color: #fff; border-radius: 6px; padding: 12px;box-shadow: 0 0 1px rgba(0,0,0,0.5);}
.contact-form form > div>:nth-child(1){font-weight: bold; grid-column: 1/-1;}
.contact-form form > div>*{display: grid; grid-auto-flow: column; grid-gap:8px;justify-content: flex-start;}
.contact-form form > div{grid-column:1/-1}
.contact-form form input[type="checkbox"],.contact-form> form input[type="radio"]{width: 18px;height: 18px;}


@media screen and (max-width: 800px) {
  .address-block{grid-auto-flow: row;grid-template-columns: 1fr;padding-top:0;margin: 0}
	.address-block > div{grid-gap: 1rem;border-bottom: 3px solid rgb(var(--clr-dark-light));border-right: none;}

	#contact-wrapper{grid-template-columns: 1fr;margin-inline: 0;padding-inline: 8px;font-size: 14px;}
  .contact-form > form{grid-template-columns: repeat(1, 1fr);}
	.contact-form > *{width: 100%;}
	.contact-form form > div{grid-template-columns: repeat(1, 1fr);}
	.mapsCont{overflow: hidden;width: 100%;}
}

.packages{
	display: grid;
	grid-template-columns: repeat(6,1fr);
	grid-gap: 2em;
	padding-inline: var(--padding-inline);
	margin-block: 2em;
}
.packages > div{
	padding: 1rem;
	background-color: #fff;
	/*background-color: #dbdbdb99;
    box-shadow: 2px 1px 5px #0000004f;*/
    box-shadow: 2px 1px 5px rgb(var(--clr-light-dark));
	border: 1px solid rgb(var(--clr-light-dark));
	display: grid;
	align-content: flex-start;
	grid-column: span 2;
	border-radius: 32px;
}

.packages h2{margin: 0;
	text-align: center;
	--proName_linecnt: 2;
	--proName_FontSize: 1.5rem;
	--proName_lineHeight: 1.5em;
	font-size: var(--proName_FontSize) !important;
	line-height: var(--proName_lineHeight);
	height: calc( (1em * var(--proName_linecnt)) + (var(--proName_linecnt) * 0.5em));
	-webkit-line-clamp: var(--proName_linecnt);
  line-clamp: var(--proName_linecnt);
	align-self: flex-start;
}

.packages > div > span{
	color: rgb(var(--clr-dark-dark));
	/*text-shadow: 0 0 2px rgb(var(--clr-light-dark));*/

	text-decoration-color: rgb(var(--clr-light-dark));
	text-align: center;
	font-weight: bold;
	align-self: flex-start;
	--proName_linecnt: 1;
	--proName_FontSize: 22px;
	--proName_lineHeight: 1.5em;
	font-size: var(--proName_FontSize) !important;
	line-height: var(--proName_lineHeight);
	height: calc( (1em * var(--proName_linecnt)) + (var(--proName_linecnt) * 0.5em));
	-webkit-line-clamp: var(--proName_linecnt);
  line-clamp: var(--proName_linecnt);
}

.prices{
	padding-inline: var(--padding-inline);
	display: grid;
	grid-template-columns: 1fr;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.prices > div{
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	border-bottom: 1px solid #c0c0c0;
	padding-inline: 1.5em;
	padding-block: 0.5em;
}
.prices > div:nth-of-type(odd){border-right: 1px  solid #c0c0c0;}
.prices > div:is(:nth-last-of-type(1),:nth-last-of-type(2)){border-bottom:24px solid rgb(var(--clr-light-dark));}
.prices > div > h3{font-size: 18px;}
.prices > div > span{
	text-align: left;
}
.prices ul{grid-column: 1/-1}
.prices h2{
	grid-column: 1/-1;
}

@media screen and (max-width: 1000px){
	.prices{grid-template-columns: 1fr}
	.prices > div{grid-template-columns: 3fr 2fr;column-gap:1em;}
	.prices > div:is(:nth-last-of-type(2)){border-bottom: 1px solid #c0c0c0;}
	.prices div:nth-of-type(odd){border-right: none;}
  .packages{grid-template-columns: 1fr 1fr;gap: 1rem;}
}

@media screen and (max-width: 600px){
	.packages {column-gap: 0px;}
	.packages h2{height: auto;}
}


.blog-summary-block{display: grid; grid-template-columns: 1fr 1fr 1fr;margin:auto; width: var(--max-width);margin-block: 32px; gap: 22px;}
.blog-summary-block > div{display: grid;border: 1px solid rgb(var(--clr-dark-dark)); border-radius: 4px;grid-template-rows: 200px 3.5em 1fr auto;}
.blog-summary-block > div img{width: 100%; height: 100%; object-fit: cover; height: 200px;}
.blog-summary-block > div button{display: none;}
.blog-summary-block > div h2{background: rgb(48, 0, 68);font-size: 18px;position: relative;color: #fff; padding: 0.25em 0.5em;margin:0; font-weight: normal}
.blog-summary-block > div p{font-size: 16px;padding-inline: 1em;}
.blog-summary-block > div > a{text-align: right; padding: 0.5em 1em;padding-top: 0;cursor: pointer}
@media screen and (max-width: 1000px){
  .blog-summary-block{grid-template-columns: 1fr;}

}

.blog-fullwidth{
  margin-inline: calc((100vw - var(--max-width)) /-2);
}
.blog-content-wrapper{width: var(--max-width);margin-block: 4em;margin-inline: auto;}
.blog-content-wrapper table{border-collapse: collapse;margin: auto;}
.blog-content-wrapper table *:is(tr,td,th){border: 1px solid #c0c0c0;}
.blog-content-wrapper table *:is(td,th){padding: 0.25em 0.5em;}
.blog-title{
  display: grid;
  width: 100vw;
  /**/
  padding-inline: calc((100vw - var(--max-width)) /2);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("blogs/img/blogs-banner-1.webp") no-repeat;
  background-position: center;
  background-size: cover;
  /*height: 200px;*/
  justify-content: center;
  align-content: center;
}
.blog-title:before{display: none;}
.blog-title h1{font-size: 40px;}
.blog-title span{font-size: 28px;color: #fff;width: 100%; padding: 0;width: 100%;margin-block: 0.5em;}
.blog-intro,.blog-section{ margin: auto;}
.blog-intro::after {content: "";clear: both;display: table;}
.blog-intro img{float: left;width: 100%;max-width: 500px; height: auto; margin-right: 1.5em;margin-bottom: 1.5em;width:100%;}
/*.blog-2col-table{display: grid; grid-template-columns: 1fr 1fr;}*/

@media screen and (max-width: 1000px) {
  .blog-intro img{float: none;margin: auto;display: inline-block;width: 100%;left: 50%;position: relative;transform: translateX(-50%);}
  .blog-content-wrapper{width: 100%; padding-inline: 1rem;}
  .scroll-img{flex-wrap: wrap;justify-content: center;}
}
.button{
  background: var(--clr-accent-1);
    color: rgb(var(--clr-dark-dark));
    font-size: 1.2em;
    padding: .5rem 1rem;
    text-transform: uppercase;
    font-weight: bold;
    -webkit-appearance: inherit;
    appearance: inherit;
    border-style: none;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    border-radius: 4px;
    justify-self: flex-end;
    grid-column: 1/-1;
}
.scroll-img{
  background-image: url("/blogs/img/pexels-vojtech-okenka-127162-392018.jpg");background-size: cover;background-position: center;background-attachment: fixed;
}
.share-links-container{width: var(--max-view-width);margin: auto;}
.share-links-container ul{display: flex; gap: 1rem; font-size: 32px;margin: 0;padding: 0;}
.share-links-container ul li{list-style: none;}

#mobi-toggle{display: none !important;}

@media screen and (min-width: 801px) {
  #main-nav .nav-overlay,.nav-hamburger {all: unset !important;display: none !important;position: absolute !important;}
}
@media screen and (max-width: 800px) {
  #mobi-toggle:checked~#main-nav .nav-hamburger>i:before {
		content: "\f00d";
	}

  #main-nav { width: 100dvw;
    grid-template-areas:
    'toggle snippet'
    'toggle logo';
    grid-template-columns: 42px 1fr;
  }
  #main-nav .nav-hamburger{grid-area: toggle;align-content: center;}
  body > nav > div:first-of-type{grid-area: snippet;font-size: 14px;}
  body > nav > div:first-of-type>*:not(:last-child){display: none;}
  #main-nav .nav-cont {display: contents;}
  #main-nav .nav-overlay {
		background-color: #333333c4;
		position: fixed;
		width: 100vw;
		height: calc(100vh - var(--mobiMenu-height));
		left: -100vw;
		top: 0;
		z-index: -1;
		top: var(--mobiMenu-height);
		max-width: 100vw;
    padding: 0px;
	}

  #mobi-toggle:checked~#main-nav .nav-overlay {
		left: 0%;
	}
  #main-nav .nav-items {
    display: block;
    background-color: #fff;
    max-width: 320px;
    width: 100dvw;
    height: calc(100vh - var(--mobiMenu-height));
    position: fixed;
    top: var(--mobiMenu-height);
    left: -100%;
    grid-template-columns: repeat(4, 1fr);
    align-content: flex-start;
    grid-auto-flow: row !important;
    transition:all 0.5s;
    padding-inline: 8px;
  }
  body:has(#mobi-toggle:checked){margin-top: var(--mobiMenu-height); margin-top:0;}

  #main-nav .logo-cont{grid-area: logo;padding-block: 3px;}
  #main-nav .logo-cont span{font-size: 18px; top: unset; left: unset;}
  #main-nav .logo-cont a{display: flex;align-content: center;align-items: center;}
  #mobi-toggle:checked ~ #main-nav .nav-items {
    z-index: 100;
    margin: 0px;
    position: fixed;
    left: 0;
    transform: translateX(0%);
    transition: all 0.5s;
    top: var(--mobiMenu-height);
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 8px;
  }

}

body {
  background-image: url(img/bg-2.svg);
  background-attachment: fixed;
}

.carousel{}
.carousel__btn{position: absolute; top: 50%; transform:translate(0%,-50%)}
.carousel__btn--next{right: 0%;}
.carousel__btn--prev{left: 0%;}
.carousel__track{ position: relative;display: grid;max-width: 1200px; padding-inline: 48px; margin:auto;}
.service-section{grid-row: 1;grid-column: 1;}
.service-section:not([data-active]){visibility: hidden;}