:root{
  --screen_padding: 5dvw;
  
}
html{overflow-x: hidden; width: 100dvw; ; font-size: 18px; line-height: 140%; display: block; position: relative; }
*{margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; font-weight: 200; font-family: Roboto}
img{max-width: 100%; }
header{display: grid; grid-template-columns: 3fr 1fr; grid-gap: 1dvw; width: 100dvw; height: 15dvw; position: fixed; background-color: #fefefe;z-index: 150; top: 0}
header img{ width: auto; height: 13dvw; margin: 1dvw}
header ul, header li{list-style-type: none; padding-left: 0}
h1, h2, h3, h4, h5, h6{
  font-family: Chakra Petch;
  font-size: 9dvw;
  margin-top: 6dvw; margin-bottom: 3dvw;
  line-height: 9dvw;
  font-weight: 600;
}
strong{font-weight: bold}
ul{
  padding-left: 5dvw;
}
main{display: block; padding: var(--screen_padding);margin-top: 10dvw}
#nav_open{display: none}
.triangle{
  display: block;
  position: relative;
  padding: 11dvw;
}
.advantages{display: block; position: relative;
/* filter: drop-shadow(0px 1px 1px #444); */
padding: var(--screen_padding);
}
.advantages h3{
  display: block;position: relative;
  background:none; padding: 5dvw;
  font-size: 6dvw; 
}
.advantages h3:before{
  content: '';
  display: block; border: solid; position: absolute; width: 11%;; left: 0; top: 8%; height: 80%;z-index: -1; color: #ccc; background-color: #ccc;
}
.post_thumbnails{
  
}
.post_thumbnails :where(a, div, h2, p, ul, li){
  text-decoration: none; color: #640000;
}
.post_thumbnails a{display: block; border-left: solid 4px #640000; padding-left: 2dvw}
.post_thumbnails a:hover{display: block; border-left: solid 4px red; color: red}

.advantages h3.a:before{color: #e0cb15; background-color: #e0cb15;width: 55%;clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%); }
.advantages h3.b:before{color: #3cc583; background-color: #3cc583;width: 75%;clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%); }
.advantages h3.c:before{color: #92bd39; background-color: #92bd39;width: 85dvw;clip-path: polygon(0% 0%, 88% 0%, 100% 100%, 0% 100%); }
.triangle>img{width: 100%; height: auto;}
.triangle :where(.a, .b, .c){font-family: Chakra Petch;;font-weight: bold; font-size: 7dvw;}
.triangle>.a{transform: rotate(-60deg); top:36%; left: 0 ;position: absolute;color: #e0cb15;}
.triangle>.b{transform: rotate(60deg); top:38%; right: -3.5%; position: absolute;color: #3cc583;}
.triangle>.c{text-align: center; margin-top: 5%;color: #92bd39;}
.services{
  display: flex;
  flex-direction: column; align-content: center;justify-content: center;align-items: center;justify-items: center;
  padding:  var(--screen_padding);
}
.services>div{width: 100%; display: flex; flex-direction: column; margin-bottom: 10dvw}
.services :where(img, p,h3,h2){align-self: center;text-align: center}
.services h2{font-size: 10dvw; line-height: 12dvw; text-align: center; margin-top: 10dvw; margin-bottom: 5dvw}
.services h3{font-size: 8dvw; line-height: 9dvw; }
.services p{font-weight: 200}
.services>div{position: relative;}
.services>div>img:first-of-type{width: 40%;  height: auto; margin: 0; }
.services>div>img:last-of-type{width: 20%;  height: auto; margin: 0; position: absolute; top: 10%}



.home_about{
  padding:  var(--screen_padding);
}

footer{
  display: flex; flex-direction: column;color: #fefefe;text-decoration: none; 
  background-color: #222; padding: var(--screen_padding);
  padding-top: 10dvw;
  padding-bottom: 10dvw;
  gap: 5dvw;
}
footer *{color: #fefefe}
footer :where(ul, li a, p, h2, div){
  display: block; padding: 0; margin: 0;list-style-type: none;text-decoration: none; font-size: 3dvw; line-height: 4dvw;
}
footer a{
  border-bottom: dotted 1px #444; padding: var(--screen_padding) 0;
}
footer h2{font-size:6dvw}

footer a:hover{
  background-color: #444;
}



#cw{
  display: flex; position: fixed; right: 2.5dvw; bottom: 2.5dvw; z-index: 1000; align-items: center; gap 5dvw; transition:  all .5s
}
#cw label{border: solid 1px #640000; background-color: #640000; width: 5dvw; height: 5dvw; display: flex; padding: 1dvw;border-radius: 50%}
#cw label:last-of-type{border: none; position: absolute; top: -20%; right: -5%; height: 0mm; width: 0mm; padding: 0mm; overflow: 0; transition: all .5s}
#cw_phone{display: none;}
#cw_phone +a{display: block;color: #fff; font-family: Chakra Petch;; text-decoration: none; font-size: 2dvw; margin: 2dvw; background-color: #640000; padding: 0; padding-left: 2.5dvw; padding-right: 1dvw; margin: 0; margin-left: -2.5dvw ;height: 5dvw; line-height: 5dvw; z-index: -1; overflow: hidden; width: 0; height: 0; transition:  all .5s}
#cw_phone:checked +a{width: 19dvw; height: 5dvw}
#cw_phone:checked ~ label{height: 10mm; width: 10mm; padding: 1mm}


#cookie-consent-banner{padding:1dvw var(--screen_padding); display: flex; gap: 1dvw; position: fixed;flex-direction: column; width: 100%; height: auto; bottom: 0; background-color: rgba(255, 255, 255, .95); border-top: solid 1px #ccc;}
#cookie-consent-banner :where(h3,p, label, strong, select, option, button, div){font-size: .8dvw; line-height:  1.25dvw; margin: 0; padding: 0;}
#cookie-consent-banner>div>button{; position: relative; padding: .25dvw  5dvw; background-color: #640000; border: solid 1px #640000; color: #efefef;  font-weight: bold; border-radius: .5mm}