/*
  Theme: Reveal (customized)
  Base: BootstrapMade Reveal
*/

/* ========== General ========== */

:root{
  --primary:#50d8af;
  --primary-2:#51d8af;
  --brand:#0c2e8a;
  --text:#444;
}

html{ scroll-behavior:smooth; }

body{
  background:#fff;
  color:var(--text);
  font-family:"Open Sans", sans-serif;
}

a{
  color:var(--primary);
  transition:.3s;
  text-decoration:none;
}
a:hover,a:active,a:focus{
  color:var(--primary-2);
  outline:0;
  text-decoration:none;
}

p{ margin:0 0 30px; }

h1,h2,h3,h4,h5,h6{
  font-family:"Montserrat",sans-serif;
  font-weight:400;
  margin:0 0 20px;
  padding:0;
}

/* Back to top */
.back-to-top{
  position:fixed;
  display:none;
  right:15px; bottom:15px;
  background:var(--primary);
  color:#fff;
  padding:6px 12px 9px;
  font-size:16px;
  border-radius:2px;
  transition:background .3s;
}
.back-to-top:hover,.back-to-top:focus{ background:var(--brand); color:#fff; }

/* ========== Topbar ========== */

#topbar{
  background:#fff;
  padding:10px 0;
  border-bottom:1px solid #eee;
  font-size:14px;
  position:relative;
  z-index:10060;
}
#topbar .contact-info a{ color:#555; }
#topbar .contact-info a:hover{ color:var(--primary); }
#topbar .contact-info i{ color:var(--primary); padding:4px; }
#topbar .contact-info .fa-phone{
  padding-left:20px; margin-left:20px; border-left:1px solid #e9e9e9;
}
#topbar .social-links a{
  color:#555; padding:4px 12px; display:inline-block; line-height:1px;
  border-left:1px solid #e9e9e9;
}
#topbar .social-links a:first-child{ border-left:0; }
#topbar .social-links a:hover{ color:var(--primary); }

/* ========== Header (sticky + flex) ========== */

#header{
  position:sticky; top:0; z-index:10050;
  background:#fff;
  box-shadow:0 6px 9px rgba(0,0,0,.06);
  padding:20px 0;
  min-height:84px;
}
#header .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
}
#logo, #logo.pull-left{ float:none; }
#logo{ margin-right:16px; flex:0 0 auto; }
#header #logo h1{
  font-size:42px; margin:0; line-height:1; font-weight:700;
  font-family:"Montserrat",sans-serif;
}
#header #logo h1 a{ color:var(--brand); display:inline-block; }
#header #logo h1 a span{ color:var(--primary); }
#header #logo img{ margin:0; padding:0; }

/* ========== Navigation (desktop) ========== */

#nav-menu-container{
  float:none;
  flex:1 1 auto;
  min-width:0;
  margin:0;
  z-index:10070;
}

.nav-menu,
.nav-menu *{ list-style:none; margin:0; padding:0; }

#nav-menu-container .nav-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  column-gap:10px;
}

#nav-menu-container .nav-menu > li{
  position:relative;
  float:none;
  white-space:nowrap;
}
.nav-menu > li > a{
  display:inline-block;
  padding:10px 8px;
  color:#555;
  font-family:"Raleway",sans-serif;
  font-weight:700; font-size:14px;
}
.nav-menu > li:hover > a,
.nav-menu .menu-active > a{ color:var(--primary); }

.nav-menu ul{
  position:absolute; top:100%; left:0;
  display:none;
  margin:4px 0 0; padding:10px;
  min-width:180px;
  background:#fff;
  box-shadow:0 0 30px rgba(127,137,161,.25);
  z-index:9999;
}
.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul{ display:block; }
.nav-menu ul li{ position:relative; transition:.3s; }
.nav-menu ul li a{
  display:block; padding:10px; color:#333; font-size:13px; text-transform:none;
}
.nav-menu ul li:hover > a{ color:var(--primary); }
.nav-menu ul ul{ top:0; left:100%; margin:0; }

/* arrows */
.sf-arrows .sf-with-ul{ padding-right:22px; }
.sf-arrows .sf-with-ul:after{
  content:"\f107"; position:absolute; right:8px; font-family:FontAwesome;
}
.sf-arrows ul .sf-with-ul:after{ content:"\f105"; }

/* language switcher */
.nav-menu > li.lang-switcher{ margin-left:0; }
.nav-menu .lang-switcher > a{ text-transform:uppercase; letter-spacing:.5px; }
.nav-menu .lang-switcher ul{ min-width:160px; }

/* ========== Mobile Nav (Reveal clones menu) ========== */

#mobile-nav-toggle{
  position:fixed; right:0; top:0; z-index:999;
  margin:20px; border:0; background:none; font-size:24px; display:none;
  transition:.4s; outline:none; cursor:pointer;
}
#mobile-nav-toggle i{ color:#555; }

#mobile-nav{
  position:fixed; top:0; bottom:0; left:-260px; width:260px; padding-top:18px;
  background:rgba(52,59,64,.9); overflow-y:auto; transition:.4s; z-index:998;
}
#mobile-nav ul{ margin:0; padding:0; }
#mobile-nav ul li{ position:relative; }
#mobile-nav ul li a{
  color:#fff; font-size:16px; display:block; padding:10px 22px 10px 15px;
}
#mobile-nav ul .menu-has-children i{
  position:absolute; right:0; padding:15px; cursor:pointer; color:#fff; z-index:99;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up{ color:var(--primary); }
#mobile-nav ul .menu-item-active{ color:var(--primary); }

#mobile-body-overly{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(52,59,64,.9); display:none; z-index:997;
}

body.mobile-nav-active{ overflow:hidden; }
body.mobile-nav-active #mobile-nav{ left:0; }

/* включаем мобильное меню заранее (до 1200px) */
@media (max-width:1199.98px){
  #nav-menu-container{ display:none; }
  #mobile-nav-toggle{ display:block; }
}

/* ========== Intro ========== */

#intro .intro-content{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  text-align:center;
}
#intro .intro-content h2{
  color:var(--brand); margin-bottom:30px; font-size:64px; font-weight:700;
}
#intro .intro-content h2 span{ color:var(--primary); text-decoration:underline; }
#intro .intro-content .btn-get-started,
#intro .intro-content .btn-projects{
  font-family:"Raleway",sans-serif; font-size:15px; font-weight:700; letter-spacing:1px;
  display:inline-block; padding:10px 32px; border-radius:2px; transition:.3s; margin:10px; color:#fff;
}
#intro .intro-content .btn-get-started{ background:var(--brand); border:2px solid var(--brand); }
#intro .intro-content .btn-projects{ background:var(--primary); border:2px solid var(--primary); }
#intro .intro-content .btn-get-started:hover{ background:none; color:var(--brand); }
#intro .intro-content .btn-projects:hover{ background:none; color:var(--primary); }

#intro #intro-carousel{ z-index:8; }
#intro #intro-carousel::before{
  content:""; position:absolute; inset:0; z-index:7; background:rgba(255,255,255,.7);
}
#intro #intro-carousel .item{
  width:100%; height:60vh; background-size:cover; background-position:center;
  transition-property:opacity;
}

/* ========== Sections ========== */

.section-header{ margin-bottom:30px; }
.section-header h2{
  font-size:32px; color:var(--brand); text-transform:uppercase; font-weight:700;
  position:relative; padding-bottom:20px;
}
.section-header h2::before{
  content:""; position:absolute; left:0; bottom:0; width:50px; height:3px; background:var(--primary);
}
.section-header p{ margin:0; }

/* anchor offset under sticky header */
section[id]{
  scroll-margin-top:90px;   /* десктоп */
}
@media (max-width:991.98px){
  section[id]{ scroll-margin-top:90px; } /* мобила */
}

/* About */
#about{ padding:60px 0 30px; }
#about .about-img{ overflow:hidden; }
#about .about-img img{ margin-left:-15px; max-width:100%; }
#about .content h2{
  color:var(--brand); font-weight:700; font-size:36px; font-family:"Raleway",sans-serif;
}
#about .content h3{ color:#555; font-weight:300; font-size:18px; line-height:26px; font-style:italic; }
#about .content p{ line-height:26px; }
#about .content i{ font-size:20px; padding-right:4px; color:var(--primary); }
#about .content ul{ list-style:none; padding:0; }
#about .content ul li{ padding-bottom:10px; }

/* Services */
#services{ padding:30px 0 0; }
#services .box{
  padding:40px; margin-bottom:40px; background:#fff;
  box-shadow:10px 10px 15px rgba(73,78,92,.1); transition:.3s;
}
#services .box:hover{ box-shadow:0 0 30px rgba(73,78,92,.15); transform:translateY(-10px); }
#services .box .icon{ float:left; }
#services .box .icon i{
  color:#444; font-size:64px; transition:.5s; line-height:0; margin-top:34px;
}
#services .box .icon i:before{
  background:linear-gradient(45deg, var(--primary) 0%, #a3ebd5 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#services .box h4{ margin-left:100px; font-weight:700; margin-bottom:15px; font-size:22px; color:#444; }
#services .box p{ font-size:14px; margin-left:100px; margin-bottom:0; line-height:24px; }

/* Clients */
#clients{ padding:30px 0; }
#clients img{ max-width:100%; opacity:.5; transition:.3s; padding:15px 0; }
#clients img:hover{ opacity:1; }
#clients .owl-dot{ display:inline-block; margin:0 5px; width:12px; height:12px; border-radius:50%; background:#ddd; }
#clients .owl-dot.active{ background:var(--primary); }

/* Gallery cards */
.gallery-thumb{
  height:300px; width:100%; object-fit:cover; border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,.05); transition:transform .3s; background:#fff; padding:5px;
}
.gallery-thumb:hover{ transform:scale(1.03); }
.gallery-info h5{ margin-top:10px; font-size:16px; font-weight:500; color:#333; }

/* Testimonials */
#testimonials {
  padding: 30px 0;
}

#testimonials .testimonial-item {
  box-sizing: content-box;
  padding: 30px 30px 0;
  margin: 30px 15px;
  text-align: center;
  min-height: 350px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

#testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0 auto;
}

#testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0 5px;
  color: #111;
}

#testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0;
}

#testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px;
}

/* фикс размеров кавычек */
#testimonials .testimonial-item p img.quote-sign-left,
#testimonials .testimonial-item p img.quote-sign-right {
  width: 8px;
  height: auto;
  max-width: none;
  display: inline-block;
  vertical-align: middle;
  opacity: .85;
}
#testimonials .testimonial-item p img.quote-sign-left {
  margin-top: -4px;
  margin-right: 10px;
}
#testimonials .testimonial-item p img.quote-sign-right {
  margin-bottom: -4px;
  margin-left: 10px;
}

#testimonials .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
}
#testimonials .owl-dot.active { background: var(--primary); }

/* CTA */
#call-to-action{ background:#081e5b; background-size:cover; padding:40px 0; }
#call-to-action .cta-title{ color:#fff; font-size:28px; font-weight:700; }
#call-to-action .cta-text{ color:#fff; }
#call-to-action .cta-btn{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:16px; letter-spacing:1px;
  display:inline-block; padding:8px 26px; border-radius:3px; transition:.3s; margin:10px;
  border:3px solid #fff; color:#fff;
}
#call-to-action .cta-btn:hover{ background:var(--primary); border-color:var(--primary); }

/* Blog */
#blog{ background:#f8f9fa; padding:60px 0; }
.blog-item{
  background:#fff; padding:20px; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,.1);
  margin-bottom:30px; transition:transform .3s;
}
.blog-item:hover{ transform:translateY(-5px); }
.blog-item h4{ margin-top:15px; font-size:20px; font-weight:700; }
.blog-item p{ font-size:15px; color:#666; }
.read-more{ display:inline-block; margin-top:10px; color:#0077b5; font-weight:700; }
.read-more:hover{ text-decoration:underline; }

/* Team */
#team{ background:#fff; padding:30px 0 0; }
#team .member{ text-align:center; margin-bottom:20px; }
#team .member .pic{ overflow:hidden; text-align:center; }
#team .member .pic img{ max-width:100%; }
#team .member .details{
  background:var(--primary); color:#fff; padding:15px; border-radius:0 0 3px 3px;
}
#team .member h4{ font-weight:700; margin-bottom:2px; font-size:18px; }
#team .member span{ font-style:italic; display:block; font-size:13px; }
#team .member .social{ margin-top:5px; }
#team .member .social i{ font-size:16px; margin:0 2px; color:#fff; }

/* LinkedIn button */
.linkedin-link{
  display:inline-block; background:#0077b5; color:#fff; padding:8px 12px; border-radius:5px;
  font-weight:700; transition:.3s;
}
.linkedin-link i{ margin-right:5px; }
.linkedin-link:hover{ background:#005983; color:#fff; }

/* Contact */
#contact{ padding:30px 0; }
#contact .contact-info{ margin-bottom:20px; text-align:center; }
#contact .contact-info i{ font-size:48px; display:inline-block; margin-bottom:10px; color:var(--primary); }
#contact .contact-info h3{
  font-size:18px; margin-bottom:15px; font-weight:700; text-transform:uppercase; color:#999;
}
#contact .contact-info a{ color:#000; }
#contact .contact-info a:hover{ color:var(--primary); }
#contact .contact-address, #contact .contact-phone, #contact .contact-email{ margin-bottom:20px; }

#contact .form #sendmessage{
  color:var(--primary);
  border:1px solid var(--primary);
}

/* ======= MOBILE HEADER CLEAN PATCH (no JS) ======= */

/* 1) Базовые уровни поверх слайдера */
#mobile-nav-toggle{ z-index:10110; }
#mobile-nav{ z-index:10100; }
#mobile-body-overly{ z-index:10090; }

/* 2) Мобильные размеры шапки + логотип */
@media (max-width: 767.98px){
  :root{
    --hdrH: 56px;                 /* единая высота шапки на мобиле */
  }

  #topbar{ padding:6px 0; font-size:12px; }

  #header{
    position: sticky;
    top: 0;
    z-index: 10050;
    background: #fff;
    box-shadow: 0 6px 9px rgba(0,0,0,.06);
    min-height: var(--hdrH);
    padding: 0;                   /* убираем вертикальные паддинги — высоту задаёт --hdrH */
    display: flex;
    align-items: center;          /* контент по центру по высоте */
  }

  #header .container{
    display:flex;
    align-items:center;           /* логотип по центру по высоте */
    justify-content:space-between;
  }

  #header #logo{ margin-right:10px; }
  #header #logo h1{
    font-size: clamp(18px, 6vw, 24px);
    line-height:1.1;
    margin:0;
  }
  #header #logo h1 a{ white-space:nowrap; }
  @media (max-width: 360px){
    #header #logo h1 a{ white-space:normal; }
  }
}

/* 3) Бургер: один-единственный способ позиционирования (без конфликтов)
      Центр по высоте за счёт известной высоты шапки (--hdrH) */
@media (max-width:1199.98px){
  /* показываем мобильное меню, скрываем десктопное */
  #nav-menu-container{ display:none; }

  #mobile-nav-toggle{
    position: fixed;                   /* закрепили относительно окна */
    right: 10px;
    top: calc(var(--hdrH, 56px) / 2 - 22px); /* центр по высоте шапки */
    width: 44px; height: 44px;
    margin:0;
    display:block !important;
    background: rgba(255,255,255,.92);
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
  }
  #mobile-nav-toggle i{
    display:block;
    font-size:22px;
    line-height:44px;                 /* иконка по центру внутри квадрата */
    text-align:center;
    color:#222 !important;
  }
}

/* 4) Интро: компактнее текст и кнопки на мобиле */
#intro{ position:relative; min-height:60vh; }
#intro #intro-carousel{ position:relative; z-index:8; }
#intro #intro-carousel::before{
  content:""; position:absolute; inset:0; z-index:7; background:rgba(255,255,255,.55);
}
#intro .intro-content{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  text-align:center; padding:12px;
}
@media (max-width: 767.98px){
  #intro .intro-content h2{
    color:var(--brand);
    font-size: clamp(22px, 7vw, 30px);
    line-height:1.15;
    margin-bottom:16px;
  }
  #intro .intro-content .btn-get-started,
  #intro .intro-content .btn-projects{
    padding:8px 16px; font-size:14px;
  }
}
@media (max-width:480px){
  #intro .intro-content h2 br{ display:none !important; }
}

/* 5) Якоря под «липкой» шапкой — запас на мобиле */
@media (max-width: 991.98px){
  section[id]{ scroll-margin-top: calc(var(--hdrH, 56px) + 24px); }
}

/* 6) Слайдер высота */
#intro .owl-carousel,
#intro .owl-carousel .owl-stage-outer,
#intro .owl-carousel .owl-stage,
#intro .owl-carousel .owl-item{ height:100%; }
#intro .owl-dots{
  position:absolute; left:0; right:0; bottom:10px;
  text-align:center; z-index:11;
}
#intro .owl-dot{
  display:inline-block; width:10px; height:10px; margin:0 4px;
  border-radius:50%; background:#ddd;
}
#intro .owl-dot.active{ background:var(--primary); }