:root{
  --content:980px;
  --cyan:#35c5d2;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Roboto,Arial,sans-serif;
  color:#2b2b2b;
  font-size:16px;
}
.content{
  width:var(--content);
  max-width:calc(100% - 56px);
  margin:auto;
}

/* HERO */
.hero{
  height:650px;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#1d2940;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.4s ease, transform 7s ease;
}
.hero-bg.active{
  opacity:1;
  transform:scale(1.0);
}
.hero-bg-1{
  background-image:url("assets/slider1.jpg");
  /*background-image:url("https://images.unsplash.com/photo-1755464903932-e6edc1a4f872?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=82&w=2400");*/
}
.hero-bg-2{
  background-image:url("assets/slider2.jpg");
}
.overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(80,35,91,.32) 0%,
      rgba(42,42,67,.13) 42%,
      rgba(4,24,43,.54) 100%);
}
.hero-inner{
  position:relative;
  height:100%;
  z-index:2;
  text-align:center;
  padding-top:62px;
}
.the7-logo{
  width:118px;
  height:118px;
  border:3px solid rgba(255,255,255,.44);
  border-radius:50%;
  margin:0 auto 28px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.the7-logo span{
  position:absolute;
  top:-9px;
  font:700 15px/1 "Roboto Condensed",sans-serif;
  letter-spacing:.06em;
}
.the7-logo strong{
  font:300 72px/.95 "Roboto Condensed",sans-serif;
  margin-top:8px;
}
.hero h1{
  font-family:"Roboto Condensed",sans-serif;
  font-size:72px;
  line-height:1;
  margin:0 0 16px;
  font-weight:700;
  letter-spacing:-2px;
}
.hero h2{
  font-family:"Roboto Condensed",sans-serif;
  font-size:34px;
  line-height:1;
  margin:0;
  font-weight:700;
  letter-spacing:-.3px;
}

.slider-shell{
  position:absolute;
  left:50%;
  bottom:76px;
  transform:translateX(-50%);
  width:1280px;
  max-width:96%;
  display:flex;
  align-items:center;
}
.slider-viewport{overflow:hidden;flex:1}
.slider-track{
  display:flex;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.slide-item{
  flex:0 0 25%;
  padding:0 22px;
  text-align:center;
  min-width:0;
}
.circle-icon{
  width:48px;
  height:48px;
  margin:0 auto 15px;
  border-radius:50%;
  background:rgba(115,128,147,.75);
  display:grid;
  place-items:center;
}
.circle-icon svg{
  width:25px;
  height:25px;
  stroke:#fff;
  stroke-width:1.8;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.slide-item h3{
  font-family:"Roboto Condensed",sans-serif;
  font-size:18px;
  line-height:1.2;
  margin:0 0 10px;
  font-weight:700;
  white-space:nowrap;
}
.slide-item p{
  font-size:14px;
  line-height:1.5;
  margin:0 auto;
  color:rgba(255,255,255,.94);
  max-width:270px;
}
.slider-arrow{
  width:58px;
  flex:0 0 58px;
  border:0;
  background:none;
  color:rgba(255,255,255,.72);
  font:300 54px/1 Arial;
  cursor:pointer;
  padding:0 0 10px;
  transition:.2s;
}
.slider-arrow:hover{color:#fff;transform:scale(1.08)}
.slider-dots{
  position:absolute;
  bottom:40px;
  left:0;right:0;
  display:flex;
  justify-content:center;
  gap:10px;
}
.slider-dots button{
  width:9px;height:9px;padding:0;
  border:1px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.slider-dots button.active{
  background:#9fd5e3;
  border-color:#9fd5e3;
}

/* WELCOME */
.welcome{
  min-height:200px;
  background:#fff;
  padding:68px 0 70px;
}
.welcome h2{
  font-family:"Roboto Condensed",sans-serif;
  font-size:34px;
  line-height:1;
  margin:0 0 58px;
  text-align:center;
  font-weight:700;
}
.welcome-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:54px;
  align-items:start;
}
.welcome-copy h3{
  font-family:"Roboto Condensed",sans-serif;
  font-size:19px;
  line-height:1.42;
  margin:0 0 25px;
  font-weight:700;
}
.welcome-copy>p{
  font-size:15px;
  line-height:1.72;
  color:#858585;
  margin:0;
}
.check-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:24px;
}
.check-grid ul{list-style:none;padding:0;margin:0}
.check-grid li{
  position:relative;
  padding-left:22px;
  margin-bottom:14px;
  font-size:14px;
  color:#858585;
}
.check-grid li:before{
  content:"›";
  position:absolute;
  left:0;
  top:1px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--cyan);
  color:#fff;
  text-align:center;
  font:bold 14px/12px Arial;
}
.gallery img{
  display:block;
  width:100%;
  height:200px;
  object-fit:cover;
}

/* FOOTER */
.footer{
  background:#1c1d21;
  color:#96989d;
  font-size:14px;
}
.footer-grid{
  padding:58px 0 48px;
  display:grid;
  grid-template-columns:1fr 1.12fr 1fr;
  gap:70px;
}
.footer h4{
  font-family:"Roboto Condensed",sans-serif;
  color:#fff;
  font-size:17px;
  margin:0 0 22px;
}
.footer b{
  color:#e4e4e4;
  font-size:14px;
  font-weight:500;
}
.footer p{
  margin:7px 0 15px;
  line-height:1.55;
}
.social{
  display:flex;
  gap:7px;
  margin-top:16px;
}
.social span{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#34353a;
  color:#b6b7bb;
  font-size:12px;
}
.services{list-style:none;margin:0;padding:0}
.services li{
  position:relative;
  padding-left:20px;
  margin-bottom:11px;
  color:#e2e2e2;
  font-size:14px;
}
.services li:not(.description):before{
  content:"⌄";
  position:absolute;
  left:0;top:1px;
  width:14px;height:14px;
  line-height:12px;
  text-align:center;
  background:#292a2e;
  color:#777a80;
}
.services .description{
  padding:0;
  color:#96989d;
  line-height:1.55;
  margin:-1px 0 13px;
}
.posts article{
  display:flex;
  gap:13px;
  margin:0 0 14px;
}
.posts img{
  width:58px;
  height:46px;
  object-fit:cover;
}
.posts strong{
  display:block;
  color:#eee;
  font-weight:500;
  font-size:14px;
  margin-bottom:7px;
}
.posts small{
  display:block;
  font-size:12px;
  color:#85868a;
}
.footer-bottom{
  min-height:62px;
  border-top:1px solid #34353a;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#d2d2d3;
}
.brand-small{
  display:flex;
  align-items:center;
  gap:11px;
}
.brand-small i{
  font-style:normal;
  width:27px;
  height:27px;
  border-radius:50%;
  border:1px solid #36bfe2;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:14px;
}
.footer-bottom nav{display:flex;gap:23px}
.footer-bottom a{color:#eee;text-decoration:none}

@media(max-width:1000px){
  :root{--content:calc(100% - 36px)}
  .hero{height:760px}
  .hero h1{font-size:58px}
  .hero h2{font-size:29px}
  .slide-item{flex-basis:50%}
  .slider-shell{bottom:72px}
  .welcome-grid{grid-template-columns:1fr}
  .gallery img{height:auto}
  .footer-grid{grid-template-columns:1fr;gap:35px}
}
@media(max-width:620px){
  .hero{height:600px}
  .hero h1{font-size:43px}
  .hero h2{font-size:24px}
  .the7-logo{width:100px;height:100px}
  .the7-logo strong{font-size:60px}
  .slide-item{flex-basis:100%}
  .slide-item h3{font-size:18px;white-space:normal}
  .slide-item p{font-size:14px}
  .welcome h2{font-size:30px}
  .welcome-copy h3{font-size:18px}
  .check-grid{grid-template-columns:1fr}
  .footer-bottom{padding:18px 0;flex-direction:column;align-items:flex-start;gap:16px}
  .footer-bottom nav{flex-wrap:wrap}
}