* {margin:0; padding:0; box-sizing:border-box; outline:0; border:0;}
html, body {
  font-family:'Inter', sans-serif;
  font-size:17px;
  font-weight:300;
  color:#737373;
  line-height:1.6;
  background-color:#ffffff;
  overflow:auto;
  border:0;
  text-align:center;
  cursor:default;
}

body {width:100%; height:100%;}


.dfltLink:link,
.dfltLink:active,
.dfltLink:visited {
  text-decoration:none;
  color:#eb874c;
  border-bottom:dotted 2px #eb874c;
}

.dfltLink:hover {
  text-decoration:none;
  color:#eb874c;
  border-bottom:solid 2px #eb874c;
}

strong {color:#1f2732; font-weight:700}
.clear {clear:both;}
#startPage {
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  background:none;
  border:none;
  visibility:hidden;
  opacity:0;
  z-index:-999999;
}

#waiting {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(28,37,46,0.7);
  z-index:999999;
  display:none;
  align-items: center;
  justify-content: center;
}

#waiting img {
  width: 10px;
  height: auto;
  animation: waitingLoop 3s ease-in-out infinite alternate;
}


@keyframes waitingLoop {
  from {width:0;}
  to {width:250px;}
}


#scrollUp {
  position:fixed;
  bottom:0;
  right:0;
  width:50px;
  height:50px;
  transform: rotate(-90deg);
  background:#0073a7;
  opacity:0.5;
  transition:opacity 0.5s ease;
  z-index:400;
  text-align:center;
  line-height:50px;
  color:#ffffff;
  display:none;
}

#scrollUp:hover {
  opacity:0.8;
  cursor:pointer;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color:#1f2732;
  margin:50px auto 20px auto;
}

h1 {font-size: clamp(1.6rem, 2.8vw, 2.4rem);}
h2 {font-size: clamp(1.2rem, 1.8vw, 1.6rem);}
h3 {font-size: clamp(1rem, 1vw, 1.3rem);}










.cookie-banner {
  position:fixed;
  width:90%;
  max-width:600px;
  bottom:10px;
  left:10px;
  background:rgba(28,37,46,0.7);
  border-radius: 8px;
  border:solid 2px #ffffff;
  z-index: 9999;
  color:#dae1f2;
  padding:30px;
  box-shadow:#808080 0px 0px 10px;
}

.cookie-banner a:link,
.cookie-banner a:active,
.cookie-banner a:visited,
.cookie-banner a:hover {
  color:#ffffff;
  text-decoration:none;
}

.cookie-buttons {margin-top:20px;}

.cookie-buttons button {
  padding: 8px 15px 8px 15px;
  border:solid 1px #ffffff;
  border-radius:8px;
  cursor: pointer;
  background:rgba(28,37,46,0.7);
  color:#ffffff;
  transition: background 0.4s ease,
              color 0.4s ease;
}

.cookie-buttons button:hover {
  background:#ffffff;
  color:#000000;
}


@media screen and (max-width:650px){
  .cookie-banner {
    max-width:90%;
    left:5%;
  }
}

.internal {position:relative; width:100%; max-width:1200px; padding:0 20px 0 20px; margin:0 auto 0 auto;}

.sectionCta:link,
.sectionCta:active,
.sectionCta:visited {
  position:relative;
  width: auto;
  max-width:260px;
  height: auto;
  border: solid 3px #0073a7;
  background:transparent;
  border-radius: 100vh;
  color:#0073a7;
  display:inline-block;
  align-items:center;
  justify-content:center;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:0.5px;
  margin:20px auto 20px auto;
  padding:20px 40px 20px 40px;
  font-variant:small-caps;
  transition: background-color 0.4s ease,
              color 0.4s ease,
              width 0.4s ease;
  opacity:1;
  text-decoration:none;
}

.sectionCta:hover {
  text-decoration:none;
  background: #0073a7;
  color:#ffffff;
  cursor:pointer;
}



.sectionCta1:link,
.sectionCta1:active,
.sectionCta1:visited {
  position:relative;
  width: auto;
  max-width:260px;
  height: auto;
  border: solid 3px #0073a7;
  background:#ffffff;
  border-radius: 100vh;
  color:#0073a7;
  display:inline-block;
  align-items:center;
  justify-content:center;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:0.5px;
  margin:-50px auto 20px auto;
  padding:20px 40px 20px 40px;
  font-variant:small-caps;
  transition: background-color 0.4s ease,
              color 0.4s ease,
              width 0.4s ease;
  opacity:1;
  text-decoration:none;
  z-index:20;
}

.sectionCta1:hover {
  text-decoration:none;
  background: #0073a7;
  color:#ffffff;
  cursor:pointer;
}







.sectionCta2:link,
.sectionCta2:active,
.sectionCta2:visited {
  position:relative;
  width: auto;
  max-width:260px;
  height: auto;
  border: solid 3px #0073a7;
  background:#0073a7;
  border-radius: 100vh;
  color:#ffffff;
  display:inline-block;
  align-items:center;
  justify-content:center;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:0.5px;
  margin:20px auto 20px auto;
  padding:20px 40px 20px 40px;
  font-variant:small-caps;
  transition: background-color 0.4s ease,
              color 0.4s ease,
              width 0.4s ease;
  opacity:1;
  text-decoration:none;
}

.sectionCta2:hover {
  text-decoration:none;
  background:#ffffff;
  color:#0073a7;
  cursor:pointer;
}


.sectionCta2.blog {
  z-index:20;
}











.sectionStart {
  position:absolute;
  top:-150px;
  left:0;
  width:1px;
  height:1px;
  opacity:0;
  visibility:hidden;
  background:none;
  border:none;
}



















.hero {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.hero video, .hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(25,31,40,0.7);
}

.hero .overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background-image: url(../image/slide/esagoni.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 350px;
  opacity: 0.1;
  pointer-events:none;
}

.hero .content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 2% 20px 2%;
  color:#ffffff;
  opacity: 0;
  transform: scale(1.5);
  transition: none;
}

.hero .slide.active .content {
  animation: zoomInContent 1s ease forwards;
}

@keyframes zoomInContent {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.hero h1,
.hero h2 {
  font-size: clamp(24px, 6vw, 80px);
  font-weight:300;
  color:#ffffff
}

.hero p {
  font-size: clamp(12px, 4vw, 40px);
  font-weight:200;
}

.hero .cta:link,
.hero .cta:visited,
.hero .cta:active {
  position:relative;
  width: clamp(160px, 18vw, 222px);
  height: clamp(48px, 6vw, 72px);
  border: solid clamp(2px, 0.4vw, 4px) #0073a7;
  background: #0073a7;
  border-radius: clamp(25px, 4vw, 40px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: clamp(0.5px, 0.2vw, 1.5px);
  margin-top: clamp(20px, 3vw, 30px);
  font-variant:small-caps;
  transition: background-color 0.4s ease,
              color 0.4s ease,
              transform 0.4s ease,
              width 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  text-decoration:none;
}

.hero .cta:hover {
  text-decoration:none;
  background:transparent;
  color:#0073a7;
  cursor:pointer;
}

.hero .slide.active .content .cta {
  animation: fadeInCTA 0.5s ease forwards;
  animation-delay: 1.1s;
}

@keyframes fadeInCTA {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (orientation: landscape) {
  .hero {height: 95vh;}
  .hero .mouse-icon {display:block}
}

@media (orientation: portrait) {
  .hero {height:500px;}
  .hero .mouse-icon {display:none}
}

.slider-btn {
  position: absolute;
  top: 50%;
  width:40px;
  height:80px;
  margin-top:-40px;
  background: rgba(0,0,0,0.4);
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  z-index: 4;
  transition: width 0.3s ease, background 0.3s ease;
}

.slider-btn.prev { left:0; border-radius:0 40px 40px 0}
.slider-btn.next { right:0; border-radius:40px 0 0 40px}
.slider-btn:hover {width:80px; background: rgba(0,115,167,1); }

.diagonal {
  position:absolute;
  top:100%;
  width:55%;
  height:30px;
  margin-top:-29px;
  background-color:#ffffff;
  z-index:10;
}

.diagonal.dx {
  right:-4%;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.diagonal.sx {
  left:-4%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.diagonalSup {
  position:absolute;
  width:100%;
  height:100px;
  top:-1px;
  left:0;
  background-color:#ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.diagonalInf {
  position:absolute;
  width:100%;
  height:100px;
  bottom:-1px;
  left:0;
  background-color:#ffffff;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}









.hero .mouse-icon {
  position:absolute;
  width: 40px;
  height: 70px;
  bottom:20px;
  left:50%;
  margin-left:-20px;
  background-image: url('../image/slide/mouse.png');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  animation: mouseUpDown 1.3s ease-in-out infinite alternate;
  z-index:30;
  opacity:0.6;
}

@keyframes mouseUpDown {
  0%   {background-position:center 0px;}
  50%  {background-position:center 10px;}
  100% {background-position:center 0px;}
}

.hero .mouse-icon:hover {
  opacity:0.8;
  cursor:pointer;
}

#headerPage {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:rgba(25,31,40,0.6);
  z-index:200;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
}

#headerPage.scrolled,
#headerPage.full {
  background: rgba(25,31,40,1);
}

#deskMenu ul {
  list-style: none;
  display: flex;
  height:90px;
  line-height:90px;
  padding: 0;
  margin: 0;

}

#deskMenu li {
  position: relative;
  padding: 0;
  color: #fafafa;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  font-variant:small-caps;
}

#deskMenu li:hover,
#deskMenu .selected {
  color:#0073a7;
}

#deskMenu a:link,
#deskMenu a:active,
#deskMenu a:visited
 {
  text-decoration: none;
  color: #fafafa;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  font-variant:small-caps;
}

#deskMenu a:hover,
#deskMenu a.selected {
  color:#0073a7;
}

#deskMenu .separator {
  position:relative;
  display:inline-block;
  width:5px;
  height:5px;
  margin:0 15px 0 15px;
  border-radius:100%;
  background:#ffffff
}

.deskMenuSub {
  position:absolute;
  top:100%;
  margin:0 0 0 -135px;
  left:50%;
  width:250px;
  padding:0 10px 0 10px;
  height:0;
  overflow:hidden;
  max-height:0px;
  background:#ffffff;
  opacity:0;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease;
  color:#1f2732;
  font-variant:normal;
  font-size:14px;
  line-height:normal;
  box-shadow:rgba(0,0,0,0.1) 0px 0px 10px;



}

.deskMenuSub.active {
  opacity:1;
  height:auto;
  max-height:500px;
}

#deskMenu ul li .deskMenuSub a:link,
#deskMenu ul li .deskMenuSub a:active,
#deskMenu ul li .deskMenuSub a:visited {
  color:#1f2732;
  font-variant:normal;
  font-size:14px;
  line-height:normal;
  font-weight:400;
  display:block;
  margin:15px auto 15px auto;
}

#deskMenu ul li .deskMenuSub a:hover,
#deskMenu ul li .deskMenuSub a.selected {
  color:#0073a7;
  font-variant:normal;
  font-weight:700;
}

#headerPage .logo {
  position:absolute;
  left:2%;
  background-image:url(../image/logo.png);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

#headerPage .cta {
  position:absolute;
  width:auto;
  height:60px;
  line-height:60px;
  top:15px;
  right:2%;
  font-family:'Inter', sans-serif;
  font-size:24px;
  font-weight:200;
  color:#fafafa;
  transition: color 0.3s ease;
}

#headerPage .cta:hover {
  color:#0073a7;
  cursor:pointer;
}


#mobMenuButton {
  position:absolute;
  top:26px;
  right:2%;
  width:30px;
  height:18px;
  background-image:url(../image/mobMenuButton.png);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  cursor:pointer;
}






@media screen and (min-width:1350px){
  #menuCta {display:block}
  #headerPage {justify-content:center; padding-right:0}
}
@media screen and (max-width:1349px){
  #menuCta {display:none}
  #headerPage {justify-content: flex-end; padding-right:2%}
}

#mobMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  max-width: 0;
  height: 100%;
  opacity: 0;
  background: #1f2732;
  z-index: 500;
  overflow: hidden;
  transition:
    width 0.4s ease,
    max-width 0.4s ease,
    opacity 0.3s ease;
}

#mobMenu.active {
  width: 100%;
  max-width: 100%;
  opacity: 1;
  overflow: auto;
}

#mobMenu .topper {
  position:relative;
  width:100%;
  height:70px;
  background:#111111;
  text-align:left;
  padding-left:2%;
  font-size:18px;
  line-height:70px;
  color:#ffffff;
}

#mobMenu .topper a:link,
#mobMenu .topper a:active,
#mobMenu .topper a:visited {
  color:#ffffff;
  text-decoration:none;
  font-weight:200;
}

#mobMenu .topper a:hover {
  color:#0073a7;
  text-decoration:none;
  font-weight:400;
}

#closeMenu {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

#closeMenu::before,
#closeMenu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 3px;
  background: #ffffff;
  transform-origin: center;
  transition: transform 0.3s ease;
}

#closeMenu::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#closeMenu::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#closeMenu:hover::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

#closeMenu:hover::after {
  transform: translate(-50%, -50%) rotate(-135deg);
}



#mobMenu li {
   font-variant:small-caps;
   margin:15px 0 15px 0;
   padding-left:15px;
   text-align:left;
   font-size:18px;
}

#mobMenu li a:link,
#mobMenu li a:active,
#mobMenu li a:visited {
   text-decoration:none;
   color:#ffffff;
   display:block;
}

#mobMenu li a:hover,
#mobMenu li a.selected {
   text-decoration:none;
   color:#0073a7;
}

@media screen and (min-width:1000px){
  #deskMenu{display:block}
  #mobMenuButton {display:none}
  #headerPage {height:90px;}
  #headerPage .logo {
    width:86px;
    height:60px;
    top:15px;
  }
}

@media screen and (max-width:999px){
  #deskMenu{display:none}
  #mobMenuButton {display:block}
  #headerPage {height:70px;}
  #headerPage .logo {
    width:71px;
    height:50px;
    top:10px;
  }
}


.vertSepCnt {
  position:relative;
  margin:30px auto 30px auto;
  text-align:center;
}

.verticalSep {
  position:relative;
  width:3px;
  height:14px;
  margin:6px auto 6px auto;
  border-radius:3px;
}

.verticalSep.blu {background:#0073a7}
.verticalSep.black {background:#1f2732}
.verticalSep.white {background:#ffffff}

.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

.service-thumb {
  flex: 1 1 calc(33.333% - 40px);
  text-align: center;
}

.service-thumb h2 {
  font-size: clamp(1rem, 1vw, 1.3rem);
}

.service-thumb img {width:120px}
.service-thumb h2 {margin:15px auto 15px auto}
.service-thumb img:hover {opacity:0.8;cursor:pointer;}
.service-thumb a:link,
.service-thumb a:active,
.service-thumb a:visited {
  text-decoration:none;
  color:#1f2732;
}

.service-thumb a:hover {
  text-decoration:none;
  color:#0073a7;
}



@media (max-width: 900px) {
  .service-thumb {
    flex: 1 1 calc(50% - 40px);
  }
}

@media (max-width: 600px) {
  .service-thumb {
    flex: 1 1 100%;
  }
}


.bgBlack {
  position:relative;
  margin-top:-50px;
  width:100%;
  background-image:url(../image/bg.jpg);
  background-repeat:repeat;
  padding-bottom:100px;
  color:#dae1f2;
}




.bgBlack .sectionCta:link,
.bgBlack .sectionCta:active,
.bgBlack .sectionCta:visited {
  position:absolute;
  width:260px;
  height:100px;
  line-height:30px;
  display:flex;
  align-items:center;
  top:100%;
  left:50%;
  margin:-100px 0 0 -130px;
  border:solid 4px #ffffff;
  box-shadow:#808080 0px 0px 10px;
  background:#ffffff;
  color:#1f2732;
  border-radius:50px;
  justify-content:center;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:0.5px;
  margin:0;
  font-variant:small-caps;
  transition: border 0.4s ease,
              color 0.4s ease,
              box-shadow 0.4s ease;
  opacity:1;
  text-decoration:none;
}

.bgBlack .sectionCta:hover {
  text-decoration:none;
  color:#0073a7;
  border:solid 4px #0073a7;
  box-shadow:none;
}


.bgBlack strong,
.bgBlack h2,
.bgBlack h3 {color:#ffffff; z-index:10}

.method-step {
  position:relative;
  text-align:center;
}

.method-step .img {
  position:relative;
  width:250px;
  height:250px;
  border-radius:100%;
  border:solid 10px #363d47;
  background-color:#363d47;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}


.method-step .img img {
  position:absolute;
  width:34px;
  height:136px;
  top:100%;
  margin-top:-40px;
}


.method-step .img img.dx {
  right:-20px;
}

.method-step .img img.sx {
  left:-20px;
}





.method-step .num {
  position:absolute;
  top:0;
  width:auto;
  font-weight:700;
  opacity:0.7;
}

.method-step h3 {
  position:absolute;
  font-weight:500;
  font-size:1.5rem;
}

.method-step .num.sx,
.method-step h3.sx {
  left:0;
  text-align:right;
}

.method-step .num.dx,
.method-step h3.dx {
  right:0;
  text-align:left;
}

.method-step .txt.dx {
  right:0;
}

.method-step .txt.sx {
  left:0;
}

@media screen and (min-width:1000px){
  .method-step .num {
    font-size:10rem;
    height:100%;
    display:flex;
    align-items:center;
  }
  .method-step h3 {
    width:calc(50% - 150px);
    top:50%;
    height:100px;
    margin-top:-50px;
    line-height:100px;
  }
  .method-step .txt {
    position:absolute;
    top:50%;
    width:calc(50% - 150px);
    transform:translateY(-50%);
  }
  .method-step .img {
    margin:0 auto 0 auto;
  }
  .method-step .img img {
    display:block;
  }
  .method-step {
    margin:40px 0 40px 0;
  }
  .method-step .txt.dx {
    text-align:left;
  }
  .method-step .txt.sx {
    text-align:right;
  }
}

@media screen and (max-width:999px){
  .method-step .num {
    font-size:2rem;
    height:auto;
  }
  .method-step h3 {
    width:100%;
    top:0;
    height:auto;
    margin:0;
  }
  .method-step .txt {
    position:relative;
    width:100%;
    margin-top:30px;
  }
  .method-step .img {
    top:50px;
    margin:0 auto 80px auto;
  }
  .method-step .img img {
    display:none;
  }
  .method-step {
    margin:60px 0 60px 0;
  }
  .method-step .txt.dx,
  .method-step .txt.sx {
    text-align:center;
  }


}



























.blog-wrapper {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  padding-bottom:150px;
}

.diagonal2 {
  position:absolute;
  bottom:0;
  width:50%;
  height:50px;
  background-color:#ffffff;
  z-index:10;
}

.diagonal2.dx {
  right:1px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.diagonal2.sx {
  left:1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.blogCarousel {
  display: flex;
  gap: 10px;
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.blogItem {
  position:relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}


.blogOverlay {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  padding:10px;
  background-color:rgba(0,0,0,0.6);
  display: flex;
  color:#ffffff;
  align-items: center;
  justify-content: center;
  font-size:18px;
  font-weight:400;
  text-shadow:none;
  transition: background-color 0.5s ease,
              text-shadow 0.5s ease;
}

.blogItem:hover .blogOverlay {
  background-color:rgba(0,0,0,0.3);
  cursor:pointer;
  text-shadow:#000000 3px 3px 5px;
}


.blogOverlay a:link,
.blogOverlay a:active,
.blogOverlay a:visited,
.blogOverlay a:hover {
  color:#ffffff;
  text-decoration:none;
}

@media (max-width: 768px) {
  .blog-wrapper {
    height: auto;
  }

  .blogItem {
    width: 100vw;
    height:auto;
    padding-bottom:0px;
  }
}

.blogNav {
  position: absolute;
  top:50%;
  width:40px;
  height:80px;
  margin-top:-115px;
  z-index: 10;
  background:#0073a7;
  color:#ffffff;
  border:none;
  padding:15px;
  cursor:pointer;
  font-size:20px;
  transition: width 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.blogNav:hover {
  width:80px;
  background:#f4f4f5;
  color:#1f2732;
}

.blogPrev {
  left:0;
  border-radius:0 40px 40px 0;
}

.blogNext {
  right:0;
  border-radius:40px 0 0 40px;
}
















#counter {
  position:relative;
  width:100%;
  margin:0 auto 0 auto;
  display: flex;
  align-items: flex-start;
}

.countTh {
  position:relative;
  flex: 1;
  padding: 20px;
  font-size:18px;
}

.countNum{
  font-size:22px;
  color:#ffffff;
  font-weight:600;
}

.countImg {
  position:relative;
  width:90px;
}



.diagonal3 {
  position:absolute;
  top:100%;
  width:50%;
  height:50px;
  margin-top:-49px;
  background-color:#f4f4f5;
  z-index:10;
}

.diagonal3.dx {
  right:0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.diagonal3.sx {
  left:0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}




@media (max-width:700px) {
  #counter {
    flex-direction: column;
  }

  .countTh {
    margin:10px auto 10px auto;
  }

}






























.reviews-wrapper {
  position:relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background:none;
  margin:50px auto 50px auto;
}

.reviews-track {
  display: flex;
  gap: 10px;
  height: 100%;
  transition: transform 0.4s ease;
}

.review-box {
  flex: 0 0 400px;
  height: 400px;
  background: #ffffff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  padding:20px;
}




.revService {
  font-variant:small-caps;
  color:#0073a7;
  font-weight:700;
}

.revName {
  position:relative;
  margin:15px 0 15px 0;
  color:#1f2732;
  font-size:1.5rem;
  font-weight:400;
}

@media (max-width: 699px) {
  .reviews-track {
    gap: 2%;
  }

  .review-box {
    flex: 0 0 96%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left:2%;
  }

  .reviews-wrapper {
    height: auto;
  }
}


.logoFt {
  position:absolute;
  width:90px;
  height:90px;
  top:0px;
  left:50%;
  margin:0 0 0 -45px;
  background:#1f2732;
  border-radius:100%;
  box-shadow:rgba(255,255,255,0.6) 0px 0px 20px;
  display:flex;
  align-items:center;
  justify-content:center;


}

.logoFt img {
  position:relative;
  width:60px;
}




.ftTelBox {
  margin:20px auto 20px auto;
  border:solid 1px #dae1f2;
  padding:15px;
  border-radius:8px;
  display:inline-block;
  background:rgba(218,225,242,0.1);
}









.sepFt {
  position:relative;
  margin:30px auto 30px auto;
  width:80%;
  min-width:300px;
  height:1px;
  background:rgba(218,225,242,0.2);
  box-shadow:#000000 -1px -1px 1px;
}


.ftCnt {
  position:relative;
  width:75%;
  min-width:300px;
  margin:0 auto 0 auto;
  height:auto;
  display: flex;
  align-items: stretch;
}








.sepFtVertical {
  position:relative;
  margin:0;
  width:1px;
  align-self: stretch;
  background:rgba(218,225,242,0.2);
  box-shadow:#000000 -1px -1px 1px;

}

.ftBox {
  position:relative;
  padding:20px;
  text-align:center;
  flex: 1;
  font-size:0.9rem;
}



.ftBox img {
  position:relative;
  width:30px;
  margin:0 10px 0 10px;
  opacity:0.6;
  transition:opacity 0.5s ease;
}

.ftBox img:hover {opacity:1;}



.ftBox a:link,
.ftBox a:active,
.ftBox a:visited {
  margin:5px auto 5px auto;
  display:inline-block;
  color:#dae1f2;
  text-decoration:none;
}

.ftBox a:hover {
  color:#ffffff;
  text-decoration:none;
  text-shadow:#dae1f2 0px 0px 10px;
}

#ftSep1 {display:none;}


@media (max-width:1300px) {
  .ftCnt {
    flex-direction: column;
    width:96%;
    min-width:96%;
  }

  .sepFtVertical {
    display:none
  }


  #ftSep1 {
    display:block
  }


}


.contForm {
  position:relative;
  z-index:10;
}


.contForm input,
.contForm select {
  position:relative;
  width:46%;
  height:58px;
  line-height:60px;
  border:solid 1px #f4f4f5;
  background:#f4f4f5;
  margin:10px calc(2% - 2px) 10px calc(2% - 2px);
  padding:0 5px 0 5px;
  color:#7f7f7f;
  font-family:'Inter', sans-serif;
  font-size:16px;
  font-weight:300;
}

.contForm textarea {
  position:relative;
  width:96%;
  height:268px;
  border:solid 1px #f4f4f5;
  background:#f4f4f5;
  margin:10px auto 10px auto;
  padding:10px;
  color:#7f7f7f;
  font-family:'Inter', sans-serif;
  font-size:16px;
  font-weight:300;
  overflow:auto;
  resize:none;
}

.contForm input,
.contForm select,
.contForm textarea {
  transition:border 0.5s ease;
}

.contForm input:focus,
.contForm select:focus,
.contForm textarea:focus {
  border:solid 1px #0073a7;
}

.contForm button {
  position:relative;
  width: auto;
  max-width:260px;
  height: auto;
  border: solid 3px #0073a7;
  background:#0073a7;
  border-radius: 100vh;
  color:#ffffff;
  display:inline-block;
  align-items:center;
  justify-content:center;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:0.5px;
  margin:20px auto 20px auto;
  padding:20px 40px 20px 40px;
  font-variant:small-caps;
  transition: background-color 0.4s ease,
              color 0.4s ease,
              width 0.4s ease;
  opacity:1;
  text-decoration:none;
}

.contForm button:hover {
  text-decoration:none;
  background:#ffffff;
  color:#0073a7;
  cursor:pointer;
}

.contForm a:link,
.contForm a:active,
.contForm a:visited {
  text-decoration:none;
  color:#0073a7;
}

.contForm a:hover {
  text-decoration:none;
  color:#0073a7;
  font-weight:500;
}

@media screen and (max-width:650px){
  .contForm input,
  .contForm select,
  .contForm textarea {
    width:100%;
    margin:10px auto 10px auto;
  }

}

.contBox {
  position:relative;
  width:50%;
  padding:20px;
  text-align:left;
}

.contBox.left {
  float:left;
}

.contBox.right {
  float:right;
}


@media screen and (max-width:900px){
  .contBox.left,
  .contBox.right {
    float:none;
  }


  .contBox {
    width:100%
  }



}













.approccio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  justify-content: center;
  margin:30px auto 30px auto;
}

.approccio-thumb {
  flex: 1 1 calc(50% - 60px);
  text-align: center;
  max-width:400px;
}

.approccio-thumb h3 {
  font-size: clamp(1rem, 1vw, 1.3rem);
}

.approccio-thumb img {width:120px}
.approccio-thumb h3 {margin:15px auto 15px auto}

@media (max-width: 600px) {
  .approccio-thumb {
    flex: 1 1 100%;
    max-width:100%;
  }
}