/* =========================================================
   LIGHT THEME (Full rewrite)
   Keeps your selectors & layout, updates palette + gradients
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --bg-soft-2: #eef2f7;
  --surface: #ffffff;
  --surface-2: #fbfcfe;

  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;

  --border: rgba(15, 23, 42, 0.10);
  --border-2: rgba(15, 23, 42, 0.14);

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 6px 18px rgba(15,23,42,0.10);
  --shadow-lg: 0 18px 50px rgba(15,23,42,0.12);

  --accent: #2563eb;     /* blue */
  --accent-2: #16a34a;   /* green */
  --warn: #f59e0b;       /* amber */
  --danger: #ef4444;     /* red */

  --link: #2563eb;
  --link-hover: #1d4ed8;

  --radius: 12px;
}

/* ---------- Base ---------- */
body, html{
  font-family: 'Inter', sans-serif;
  margin: 0; padding: 0;
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}

body.mainpage{
  background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Inter', sans-serif;
  color: var(--text);
}

*{
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{
  width: 13px;
  height: 13px;
}
::-webkit-scrollbar-corner{
  background: transparent;
}
::-webkit-scrollbar-thumb{
  min-height: 20px;
  border: solid transparent;
  border-width: 1px 3px;
  border-radius: 8px;
  background-clip: content-box;
  box-shadow: inset 0 0 0 10px rgba(15,23,42,0.22);
}

/* ---------- Links ---------- */
a{
  color: var(--link);
  -webkit-transition: all .12s ease-in;
  transition: all .12s ease-in;
}
a:hover{
  color: var(--link-hover);
}

/* ---------- Typography helpers ---------- */
p, li{ font-size: 16px; color: var(--text-2); }

.mt-30{ margin-top: 30px; }
.aligncenter{ display:block; margin: 0 auto; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  padding: 0; margin: 0;
  font-size: 12px;
  font-weight: 300;
}
.breadcrumb > li{
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 400;
}
.breadcrumb a{ text-decoration: none !important; }
.breadcrumb-item:after{
  content: '\f105';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin: 0 6px;
  width: 10px;
  color: rgba(15,23,42,0.35);
}
.breadcrumb-item.active:after{ display:none; }

/* ---------- Container ---------- */
.container-fluid{
  max-width: 1400px;
}

/* ---------- Buttons ---------- */
.btn,
.btn:focus,
.btn:active{
  outline: none !important;
  -webkit-transition: all .22s ease;
  -o-transition: all .22s ease;
  -moz-transition: all .22s ease;
  transition: all .22s ease;
}

.btn i{ margin-right: 7px; }

.btn-action{
  background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
  color: #fff !important;
  font-weight: 600;
  padding: 10px 25px;
  font-size: 16px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.btn-action.btn-lg{
  padding: 18px 28px;
  font-size: 20px;
  border-radius: 14px;
}
.btn-action:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  filter: brightness(0.98);
}

.btn-visual{
  background-color: transparent;
  color: var(--accent);
  font-weight: 600;
  padding: 18px 28px;
  font-size: 20px;
  border: 2px solid rgba(37,99,235,0.35);
  border-radius: 14px;
  text-align: center;
}
.btn-visual:hover{
  color: var(--link-hover);
  border-color: rgba(29,78,216,0.45);
}

/* ---------- Header ---------- */
header{
  padding: 18px 0;
}

header.default{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(15,23,42,0.05);
}

.logotype img{ padding: 0 10px; }

.header-line{
  background: linear-gradient(90deg, #f8fafc 0%, #ffffff 60%, #f6f7f9 100%);
  border-bottom: 1px solid var(--border);
}
.header-line .logotype img{ padding: 0 10px; }
.header-line .btn-action{ padding-top: 6px; }

.nav-menu ul{
  padding: 0; margin: 0;
  list-style: none;
  text-align: right;
}
.nav-menu li, .nav-menu a{ display: inline-block; }

.nav-menu a{
  padding: 19px 40px 18px 0;
  text-decoration: none !important;
  color: rgba(15,23,42,0.65);
  font-size: 16px;
  font-weight: 600;
}
.nav-menu a:hover,
.nav-menu a:focus{
  color: rgba(15,23,42,0.92);
}
.nav-menu .current-menu-item a{
  color: var(--accent);
}

.nav-menu .sub-menu{
  display: none;
  position: absolute;
  padding-bottom: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
  overflow: hidden;
}
.nav-menu li:hover .sub-menu{ display:block; }

.nav-menu .sub-menu a,
.nav-menu .sub-menu li{
  display: block;
  min-width: 200px;
  color: var(--text);
}
.nav-menu .sub-menu a{
  padding: 10px 16px;
  font-size: 15px;
}
.nav-menu .sub-menu a:hover{
  background: var(--bg-soft);
  color: var(--text);
}

header.mainpage{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
header .nav-menu{ margin-top: 18px; }
header .nav-menu a{ padding: 0 32px 0 0; }

header.mainpage .nav-menu a{
  color: rgba(15,23,42,0.75);
}
header.mainpage .nav-menu a:hover,
header.mainpage .nav-menu a:focus{
  color: rgba(15,23,42,0.95);
}

.action-box{ margin-top: 8px; }

/* ---------- Headline ---------- */
.headline{
  display: inline-block;
  margin-bottom: 25px;
}
.headline:after{
  content: '';
  width: 75%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(37,99,235,0.2) 100%);
  display: block;
  margin-top: 7px;
  border-radius: 999px;
}

/* ---------- Visual Section ---------- */
section.visual{
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(900px 350px at 20% 0%, rgba(37,99,235,0.12) 0%, rgba(37,99,235,0) 60%),
    radial-gradient(700px 300px at 90% 30%, rgba(22,163,74,0.10) 0%, rgba(22,163,74,0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

section.visual .container-fluid{
  background-image: url('/static/img/visual.webp');
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: contain;
}

@media(max-width:820px){
  section.visual{ padding: 10px 0px !important; }
  section.visual .container-fluid{ background-image: none; }
}

section.visual .visual-area{ padding: 50px 0px; }

section.visual i{
  font-size: 5em;
  color: var(--accent);
  opacity: 0.95;
}

section.visual h1{
  margin: 15px 0 20px 0;
  font-weight: 800;
  color: var(--text);
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.02em;
}
section.visual h1 span{
  font-size: 42px;
  line-height: 52px;
  display: block;
  font-weight: 300;
  color: rgba(15,23,42,0.75);
}

section.visual h2{
  color: rgba(15,23,42,0.70);
  font-size: 18px;
  line-height: 26px;
  max-width: 30vw;
  display: inline-block;
  font-weight: 400;
}
section.visual .action-box{ margin-top: 30px; }

section.visual .container-fluid{ position: relative; }

/* ---------- Default Section ---------- */
section.default{
  padding: 60px 0;
  background:
    radial-gradient(800px 320px at 10% 10%, rgba(37,99,235,0.08) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid rgba(15,23,42,0.04);
}

section.default h2{
  font-size: 44px;
  margin: 10px 0 25px 0;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
section.default p{
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: rgba(15,23,42,0.72);
}
section.default div.title{
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}

/* ---------- GD list ---------- */
.gd-line{ margin-bottom: 25px; }
.gd-line i{
  display: inline-block;
  float: left;
  font-size: 40px;
  min-width: 80px;
  text-align: center;
  margin-bottom: 30px;
  color: var(--accent);
}

/* ---------- Process Section ---------- */
section.process{
  background:
    radial-gradient(900px 320px at 20% 20%, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
}

/* ---------- Page / Post / Blog / Item ---------- */
section.page,
section.post,
section.blog,
section.item{
  padding: 60px 0 80px;
  min-height: 600px;
  background: var(--card-bg);
}

section.page h2,
section.post h2,
section.blog h2,
section.item h2{
  color: var(--text);
  font-size: 38px;
  line-height: 38px;
  margin: 15px 0 25px 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}
section.page h2 sup{
  font-size: 13px;
  top: -1.2em;
  margin-left: 5px;
  color: rgba(15,23,42,0.55);
}
section.page article{ padding-left: 0; }

/* ---------- Services ---------- */
.services-grid{ margin-top: 15px; }
.service-item{ width: 33.33%; }

.service-content{
  margin: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: 40px 20px;
  border-radius: 14px;
}
.service-title{ margin-bottom: 7px; }
.service-title,
.service-title a{
  color: var(--text);
  font-size: 20px;
  text-decoration: none !important;
  font-weight: 700;
  line-height: 24px;
}
.service-title a:hover{ color: var(--accent); }
.service-text{
  font-size: 16px;
  color: rgba(15,23,42,0.68);
}

/* ---------- Article ---------- */
.article-text{
  padding: 1vh 5vw 5vh 5vw;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-2);
}
.article-text p{
  margin: 0 0 1.2em;
  color: var(--text-2);
}
.article-text em,
.article-text i,
.article-text small{
  color: rgba(15,23,42,0.60);
}
.article-text a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-text a:hover{
  color: var(--link-hover);
  text-decoration: none;
}
.article-text h2,
.article-text h3,
.article-text h4,
.article-text h5{
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
  margin: 1.6em 0 0.7em;
}
.article-text h2{ font-size: 1.9em; }
.article-text h3{ font-size: 1.45em; }
.article-text h4{ font-size: 1.25em; }

.article-text ul,
.article-text ol{
  margin: 0 0 1.2em 1.5em;
  padding: 0;
  color: var(--text-2);
}
.article-text ul{ list-style: disc; }
.article-text ol{ list-style: decimal; }
.article-text li{
  margin: 0.4em 0;
  line-height: 1.6;
  color: var(--text-2);
}
.article-text li ul,
.article-text li ol{ margin-top: 0.3em; }

.article-text blockquote{
  margin: 1.6em 0;
  padding: 1em 1.4em;
  border-left: 3px solid rgba(37,99,235,0.7);
  background: #f1f5f9;
  color: rgba(15,23,42,0.78);
  font-style: italic;
  border-radius: 10px;
}

.article-text img{
  padding: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  height: auto !important;
  display: block;
  margin: 1.3em auto;
  border-radius: 12px;
}
.article-text img.alignleft{
  float: left;
  margin: 0.4em 1.2em 1.2em 0;
  display: inline-block;
}
.article-text img.alignright{
  float: right;
  margin: 0.4em 0 1.2em 1.2em;
  display: inline-block;
}
.article-text img.aligncenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.article-text::after{
  content: "";
  display: block;
  clear: both;
}

.article-text table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.7em 0;
  font-size: 0.95em;
  color: var(--text-2);
}
.article-text th,
.article-text td{
  border: 1px solid rgba(15,23,42,0.12);
  padding: 0.7em 1em;
}
.article-text th{
  background: #f8fafc;
  font-weight: 700;
}

.article-text code{
  background: #f1f5f9;
  padding: 0.2em 0.4em;
  border-radius: 6px;
  color: var(--accent);
}
.article-text pre{
  background: #0b1220;
  color: #e5e7eb;
  padding: 1em;
  border-radius: 12px;
  overflow: auto;
  margin: 1.6em 0;
  box-shadow: var(--shadow-md);
}

/* ---------- Post navigation ---------- */
.post-navigation .pull-left,
.post-navigation .pull-right{
  width: 45%;
  text-align: center;
}

/* ---------- Blog grid ---------- */
.blog-grid{
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}
.blog-item{ width: 33.33%; }

.blog-content{
  margin: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: var(--shadow-md);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.blog-thumb img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.blog-inner{
  padding: 15px 20px 18px;
}

.blog-title{ margin: 0; }
.blog-title a{
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 20px;
  text-decoration: none !important;
}
.blog-title a:hover{
  color: var(--accent);
}

@media(max-width: 768px){
  .blog-item{ width: 50%; }
}
@media(max-width: 480px){
  .blog-item{ width: 100%; }
}

.page-submenu{}

/* ---------- Footer ---------- */
footer.default{
  background: #f8fafc;
  padding-top: 15px;
  border-top: 1px solid rgba(15,23,42,0.06);
}
footer.mainpage{
  background: #f8fafc;
}

.ft-menu{ padding: 0 0 40px 0; }

.ft-menu h5{
  color: rgba(15,23,42,0.55);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 800;
  margin: 25px 0 15px 0;
}

.ft-menu ul{
  padding: 0; margin: 0;
  list-style: none;
}
.ft-menu ul li{
  display: block;
  margin-top: 8px;
}
.ft-menu ul li:before{
  content: '-';
  display: inline-block;
  margin-right: 7px;
  color: rgba(15,23,42,0.35);
}
.ft-menu ul a{
  color: rgba(15,23,42,0.70);
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
}
.ft-menu ul a:hover{ color: var(--text); }

.ft-cline{
  color: rgba(15,23,42,0.70);
  font-size: 14px;
  position: relative;
  padding-left: 25px;
  margin-top: 15px;
}
.ft-cline sup{ margin-left: 7px; color: rgba(15,23,42,0.55); }
.ft-cline:before{
  content: '';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 0; left: 0;
  color: rgba(15,23,42,0.55);
}
.ft-cline.address:before{ content: '\f3c5'; }
.ft-cline.phones:before{ content: '\f879'; }
.ft-cline.email:before{ content: '\f0e0'; }
.ft-cline a{
  color: rgba(15,23,42,0.70);
  display: block;
  margin-bottom: 4px;
  text-decoration: none;
}
.ft-cline a:hover{ color: var(--text); }
.ft-cline.phones a span{
  min-width: 40px;
  display: inline-block;
  text-align: center;
  color: var(--text);
}

.map-link a{
  border-bottom: 1px dotted rgba(15,23,42,0.35);
  display: inline-block;
  padding-bottom: 3px;
}

.ft-links{ padding-top: 7px; }
.ft-links a{
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 22px;
  padding: 10px 15px;
  color: rgba(15,23,42,0.70);
  margin-right: 7px;
  text-decoration: none;
  border-radius: 12px;
}
.ft-links a:hover{
  color: var(--text);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.ft-copy{
  background: #f1f5f9;
  padding: 15px 0;
  color: rgba(15,23,42,0.55);
  font-size: 13px;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.mainpage .ft-copy{
  background: #f1f5f9;
}

/* ---------- Forms (#checkme / #callback) ---------- */
#checkme,
#callback{
  margin-top: 30px;
  text-align: center;
}

#checkme input,
#callback input{
  height: auto;
  padding: 13px 15px;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

#checkme h4,
#callback h4{
  margin-bottom: 15px;
  color: var(--text);
  font-weight: 800;
}
#checkme button,
#callback button{
  margin-bottom: 15px;
}
#checkme a,
#callback a{
  color: var(--text);
  text-decoration: none !important;
  font-weight: 800;
}

/* ---------- XS menu ---------- */
#xs-menu{ margin-top: 70px; }
#xs-menu ul{ list-style: none; padding: 0; margin: 0; }
#xs-menu li, #xs-menu a{ display: block; }
#xs-menu a{
  padding: 10px 12px;
  color: rgba(15,23,42,0.70);
  border-bottom: 1px dashed rgba(15,23,42,0.18);
  margin-bottom: 6px;
  font-size: 18px;
  text-decoration: none !important;
}
#xs-menu a:hover{ color: var(--text); background: var(--bg-soft); border-radius: 12px; }

.grecaptcha-badge{
  right: inherit !important;
  left: -999px !important;
}

/* ---------- WhatsApp bar ---------- */
#to-whatsapp_wrapper{
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
#to-whatsapp_wrapper a{
  display: block;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  padding: 15px 5px;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}
#to-whatsapp_wrapper i.to-whatsapp-icon{
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
  background: url('/static/img/whatsapp-logo.svg') no-repeat center left/auto 23px;
}
#to-whatsapp_wrapper p{
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 10px;
  padding: 0;
  color: #fff;
}
@media (min-width: 768px){
  #to-whatsapp_wrapper{ display:none; }
}

/* ---------- Owl ---------- */
.owl-nav .owl-prev,
.owl-nav .owl-next{
  position: absolute;
  top: 50%;
  margin-top: -20px;
  transition: 0.25s;
  opacity: 0.45;
  color: rgba(15,23,42,0.65);
}
.owl-nav .owl-prev span,
.owl-nav .owl-next span{
  display: block;
  font-size: 80px;
}
.owl-nav .owl-next{ right: -35px; opacity: 1; }
.owl-nav .owl-prev{ left: -35px; opacity: 1; }
.owl-nav .owl-next:hover,
.owl-nav .owl-prev:hover{
  color: rgba(15,23,42,0.95) !important;
  transform: translateY(-1px);
}

.owl-dots{
  position: absolute;
  bottom: 12px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.owl-dot{ outline: none; }
.owl-dot span{
  display: inline-block;
  margin-right: 7px;
  background-color: rgba(37,99,235,0.20);
  width: 14px; height: 14px;
  border-radius: 50%;
}
.owl-dot.active span{
  background-color: rgba(37,99,235,1);
}

/* ---------- Achievement ---------- */
#achievement{
  background:
    radial-gradient(700px 280px at 10% 20%, rgba(37,99,235,0.10) 0%, rgba(37,99,235,0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid rgba(15,23,42,0.05);
}
#achievement h2{ color: var(--text); }
.ach-item{ margin: 30px; text-align:center; }
.ach-item--value{
  margin-top: 35px;
  font-weight: 900;
  font-size: 46px;
  color: var(--text);
}
.ach-item--title{
  margin-top: 15px;
  color: rgba(15,23,42,0.70);
}

/* ---------- DV / IV / SV ---------- */
#dv{
  background:
    radial-gradient(900px 320px at 15% 30%, rgba(22,163,74,0.10) 0%, rgba(22,163,74,0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.dv-image .hint{
  display: inline-block;
  background-color: rgba(255,255,255,0.85);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: absolute;
  top: -25px; left: -10px;
  font-size: 33px;
  color: var(--accent);
  padding: 18px 16px;
  text-align: center;
  font-weight: 900;
}
.dv-image .hint span{
  font-weight: 600;
  margin-top: 10px;
  color: rgba(15,23,42,0.55);
  font-size: 10px;
  line-height: 12px;
  display: block;
}

#dv ul.options{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
}
#dv ul.options li{
  width: 100%;
  margin-top: 40px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: rgba(15,23,42,0.72);
}
#dv ul.options li strong{
  display:block;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 20px;
  color: var(--text);
}
#dv ul.options li i{
  text-align: center;
  min-width: 60px;
  min-height: 100px;
  float: left;
  margin-right: 15px;
  font-size: 40px;
  color: var(--accent);
}
#dv .btn{
  margin-top: 50px;
  padding: 15px 30px;
  font-size: 15px;
}

.options-flex{
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 25px 40px;
}
.options-flex li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: calc(50% - 20px);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(15,23,42,0.72);
}
.options-flex i{
  font-size: 24px;
  margin-top: 3px;
  color: var(--accent);
  min-width: 30px;
  text-align: left;
}
.options-flex strong{
  display:block;
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
@media (max-width: 767px){
  .options-flex li{ width: 100%; }
}

#iv{
  background:
    radial-gradient(900px 320px at 85% 20%, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#sv{}
#sv h2{ font-weight: 800; }
#sv img{ border-radius: 24px 24px 0 0; }

/* ---------- Packages ---------- */
.package-item{
  margin: 30px 15px;
  box-shadow: var(--shadow-md);
  border-radius: 16px;
  overflow: auto;
  border: 1px solid var(--border);
  background: var(--card-bg);
}

.package-title{
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  padding: 15px 20px;
  font-weight: 900;
  color: #0f172a;
  font-size: 25px;
}
.package-title.w-1{
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
}
.package-title.w-2{
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  color: #fff;
}
.package-title.w-3{
  background: linear-gradient(135deg, #111827 0%, #0b1220 100%);
  color: #fff;
}

.package-price{
  font-size: 24px;
  font-weight: 900;
  padding: 20px 0 25px 0;
  text-align: center;
  color: var(--text);
}

@media(min-width:1024px){
  .packages-carousel:hover .package-item{ opacity: 0.92; }
  .package-item{ transition: all .12s ease-in; }
  .package-item:hover{
    opacity: 1 !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

.package-line{
  padding: 10px;
  background-color: #f8fafc;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.package-line:nth-child(even){
  background-color: #f1f5f9;
}
.package-line div{ text-align:center; }

.package-line div.var{
  font-size: 13px;
  line-height: 16px;
  font-style: normal;
  color: rgba(15,23,42,0.60);
  margin-bottom: 5px;
  margin-top: 7px;
}
.package-line div.var span{ display:block; font-size: 11px; }
.package-line div.val{
  font-weight: 900;
  font-size: 16px;
  line-height: 18px;
  min-height: 30px;
  color: var(--text);
}
.package-line .fa-info-circle{ color: var(--accent); }
.package-line div.val span{
  display:block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(15,23,42,0.55);
}

.package-line .fa-times,
.package-line .fa-check{
  font-size: 26px;
  font-weight: 900;
  display:block;
  margin-top: 5px;
}
.package-line .fa-times{ color: var(--danger); }
.package-line .fa-check{ color: var(--accent-2); }

/* ---------- About / Why ---------- */
#about{}
#about h2{ font-weight: 400; }
#about h2 span{ font-weight: 900; }

#why{}
#why h2{ margin-bottom: 50px; }

.why-item{ position: relative; }

.why-image{
  position: absolute;
  padding: 18px 16px;
  top: 50%;
  margin-top: -75px;
  font-size: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.why-text{
  padding: 20px 30px 20px 60px;
  margin: 0 20px 0 40px;
}
.why-text span{
  font-weight: 900;
  font-size: 21px;
  display:block;
  margin-bottom: 15px;
  color: var(--text);
}
.why-text p{
  font-size: 16px !important;
  color: rgba(15,23,42,0.72);
}

/* ---------- Chat section ---------- */
#chat{
  background:
    radial-gradient(900px 340px at 15% 10%, rgba(37,99,235,0.12) 0%, rgba(37,99,235,0) 60%),
    radial-gradient(800px 300px at 85% 40%, rgba(22,163,74,0.10) 0%, rgba(22,163,74,0) 55%),
    linear-gradient(100deg, #ffffff 10%, #f8fafc 100%);
  position: relative;
  padding: 0;
  border-top: 1px solid rgba(15,23,42,0.05);
}

#chat .container-fluid{
  background-image: url('/static/img/chat.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  padding-top: 60px;
  padding-bottom: 60px;
}

#chat h2{ margin: 0; padding: 0; }
#chat .btn{ margin-top: 15px; }

/* ---------- Review ---------- */
#review{
  background:
    radial-gradient(900px 340px at 10% 20%, rgba(245,158,11,0.10) 0%, rgba(245,158,11,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid rgba(15,23,42,0.05);
}

.review-item{
  text-align: center;
  margin: 30px 15px;
  box-shadow: var(--shadow-md);
  background-color: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border);
}
.review-item p{
  font-size: 16px !important;
  padding: 20px 30px;
  min-height: 100px;
  color: rgba(15,23,42,0.72);
}
.review-item blockquote{ border:none; }
.review-item a{
  color: var(--accent);
  display:block;
  margin-bottom: 30px;
  text-decoration: none;
  font-weight: 900;
  font-size: 22px;
  font-style: normal;
}
.review-item a:hover{ color: var(--link-hover); }
.review-item i{ margin-right: 7px; }

/* ---------- Popup ---------- */
.popup{
  position: relative;
  background: var(--card-bg);
  padding: 20px;
  width: auto;
  max-width: 350px;
  margin: 20px auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.popup .title{
  font-size: 26px;
  font-weight: 900;
  text-align: left;
  margin-bottom: 20px;
  color: var(--text);
}
.popup .title i{ margin-right: 7px; }

.popup .content{ padding: 10px 20px; }

.popup .form-control{
  background-color: var(--card-bg);
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.popup a{ color: var(--accent) !important; }

input.error{
  border: 1px solid var(--danger) !important;
}

/* ---------- Windows / Auth ---------- */
.box-breadcrumb{ margin-bottom: 15px; }

.window{}

.window input{
  margin-bottom: 8px;
  background-color: var(--card-bg);
  color: var(--text);
  border-radius: 12px;
  border: 1px solid var(--border-2);
  outline: none;
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}
.window textarea{
  background-color: var(--card-bg);
  color: var(--text);
  border-radius: 12px;
  resize: vertical;
  width: 100%;
  height: auto;
  min-height: 100px;
  border: 1px solid var(--border-2);
  outline: none;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.window .btn{
  background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  padding: 12px 24px;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.window .btn:hover{
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.window.auth{
  background-color: var(--card-bg);
  border-radius: 16px;
  overflow: auto;
  padding: 30px;
  margin-top: 15vh;
  margin-bottom: 15vh;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.window.auth .title{
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 15px;
  text-align: center;
  color: var(--text);
}
.window.auth input{
  margin-bottom: 8px;
  background-color: var(--card-bg);
  color: var(--text);
  border-radius: 12px;
  border: 1px solid var(--border-2);
  outline: none;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.window.auth .btn{
  background: linear-gradient(135deg, var(--warn) 0%, #f59e0b 100%);
  color: var(--text);
  font-weight: 900;
  font-size: 14px;
  padding: 12px 24px;
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 12px;
}
.window.auth .btn:hover{
  opacity: 0.95;
  transform: translateY(-1px);
}

.window.linker{
  padding: 24px 12px;
  text-align: center;
}
.window.linker a{
  color: rgba(15,23,42,0.70);
  font-size: 12px;
}
.window.linker a:hover{ color: var(--text); }
.window.linker a i{ margin-right: 5px; }

/* =========================================================
   SERVICE BASE (COMMON FOR ALL SERVICES)
   ========================================================= */
#service-hero,
#service-about,
#service-features,
#service-pricing,
#service-cta{
  position: relative;
  background:
    radial-gradient(900px 340px at 10% 20%, rgba(37,99,235,0.10) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid rgba(15,23,42,0.05);
}

/* Typography helpers */
.section-label{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.55);
}
.section-title{
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 36px;
  color: var(--text);
}

/* HERO */
.service-hero{ padding: 120px 0 100px; }
.service-hero__row{
  display: flex;
  align-items: center;
}
.service-hero__content{ max-width: 620px; }
.service-hero__icon{
  font-size: 42px;
  color: var(--accent);
  margin-bottom: 20px;
}
.service-hero__title{
  font-size: 46px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.02em;
}
.service-hero__subtitle{
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  color: rgba(15,23,42,0.70);
}
.service-hero__text{
  margin: 26px 0 34px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(15,23,42,0.70);
}
.service-hero__btn{ padding: 14px 34px; }
.service-hero__image img{
  max-width: 100%;
  display: block;
  margin-left: auto;
}

/* ABOUT */
.service-about{
  padding: 90px 0;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.service-about__text p{
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 18px;
  color: rgba(15,23,42,0.72);
}

/* FEATURES */
.service-features{
  padding: 100px 0;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.service-features__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 50px;
}
.service-feature{
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.service-feature:hover{
  transform: translateY(-4px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: var(--shadow-lg);
}
.service-feature i{
  font-size: 30px;
  color: var(--accent);
  margin-bottom: 14px;
}
.service-feature h3{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--text);
}
.service-feature p{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15,23,42,0.68);
}

/* PRICING */
.service-pricing{
  padding: 110px 0;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.service-pricing .package.pro{
  border: 1px solid rgba(37,99,235,0.30);
}

/* CTA */
.service-cta{
  padding: 80px 0;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.service-cta__title{
  font-size: 34px;
  font-weight: 900;
  color: var(--text);
}

/* BUTTON OVERRIDES */
.service-hero .btn-primary,
.service-cta .btn-action{
  background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
  color: #fff;
  font-weight: 900;
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 12px;
}
.service-hero .btn-primary:hover,
.service-cta .btn-action:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* RESPONSIVE */
@media (max-width: 991px){
  .service-hero{ padding: 90px 0 70px; }
  .service-hero__title{ font-size: 38px; }
  .section-title{ font-size: 28px; }
  .service-cta__title{
    font-size: 28px;
    margin-bottom: 20px;
  }
  .service-hero__image{ display:none; }
}

@media(max-width:768px){

	.visual-area{
	    background-color: rgba(255, 255, 255, 0.65);
	    padding: 10px 15px !important;
	    border-radius: 20px;
	}
	section.visual h1 {
        font-size: 28px;
        line-height: 33px;
    }

}