/*
  Theme: PT Arindhita Mega Kencana
  Redesign: Premium Luxury Light Mode — v2
  Designer: Professional Web Design Standard
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — Premium Design System
   ============================================================ */
:root {
  --primary:       #1B3A5C;
  --primary-light: #2C5F8A;
  --primary-dark:  #0E2240;
  --accent:        #C99A2E;
  --accent-light:  #E8B84D;
  --accent-dark:   #A07B1E;
  --teal:          #2A8A9C;
  --teal-light:    #3AAFBF;

  --bg-white:   #FFFFFF;
  --bg-light:   #F5F7FA;
  --bg-section: #EDF0F5;

  --text-dark:   #16202E;
  --text-medium: #4A5568;
  --text-light:  #7A8598;

  --border:      #E0E5ED;
  --border-dark: #CBD3DF;

  --shadow-xs: 0 1px 3px rgba(28,53,87,0.05);
  --shadow-sm: 0 2px 8px rgba(28,53,87,0.07);
  --shadow-md: 0 4px 20px rgba(28,53,87,0.10);
  --shadow-lg: 0 10px 36px rgba(28,53,87,0.13);
  --shadow-xl: 0 18px 56px rgba(28,53,87,0.17);

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-pill:50px;

  --transition: all 0.30s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   1. GLOBAL BASE
   ============================================================ */
html, body { height: 100%; }

body {
  background: var(--bg-white);
  color: var(--text-medium);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  color: var(--text-medium);
  margin: 0 0 20px;
  line-height: 1.85;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', 'Raleway', Georgia, serif;
  color: var(--text-dark);
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

h1 { font-size: 54px; }
h2 { font-size: 44px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent); text-decoration: none; }
a:focus, a:active { outline: none; }

img { max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
.fix { overflow: hidden; }
.clear { clear: both; }

.floatleft  { float: left; }
.floatright { float: right; }
.alignleft  { float: left;  margin-right: 15px; margin-bottom: 15px; }
.alignright { float: right; margin-left:  15px; margin-bottom: 15px; }
.aligncenter { display: block; margin: 0 auto 15px; }

::selection       { background: var(--accent); color: #fff; text-shadow: none; }
::-moz-selection  { background: var(--accent); color: #fff; text-shadow: none; }

input, select, textarea, button { -moz-appearance: none; box-shadow: none !important; }

/* ============================================================
   LAYOUT
   ============================================================ */
.area-padding   { padding: 100px 0 110px; }
.area-padding-2 { padding: 80px 0 60px; }
.padding-2      { padding-bottom: 100px; }

/* ============================================================
   SECTION HEADINGS — Elegant with gold rule
   ============================================================ */
.section-headline { margin-bottom: 24px; }

.section-headline h2 {
  display: inline-block;
  font-size: 42px;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 80px;
  position: relative;
  text-transform: capitalize;
  letter-spacing: -0.5px;
}

.section-headline h2::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-light));
  border-radius: 3px;
}

.section-headline h2::before {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: var(--border);
}

.sec-head {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 0;
  transition: var(--transition);
}

/* Preloader */
div#preloader {
  position: fixed;
  left: 0; top: 0;
  z-index: 99999;
  width: 100%; height: 100%;
  background: var(--bg-white) url('../img/preloader.gif') no-repeat center center;
}

/* Back to top */
.back-to-top {
  position: fixed;
  display: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 9px 14px;
  font-size: 14px;
  border-radius: var(--radius-md);
  right: 22px;
  bottom: 22px;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
  z-index: 500;
}
.back-to-top:hover, .back-to-top:focus {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   2. HEADER / NAVIGATION
   ============================================================ */
.header-area {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(14,34,64,0.92) 0%, rgba(14,34,64,0.78) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  transition: var(--transition);
  border-bottom: 1px solid rgba(200,154,46,0.25);
}

.header-deco-line {
  height: 3px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-light), var(--accent-dark));
  width: 100%;
}

.navbar-header a.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 70px;
  padding: 13px 0;
  margin-left: 0;
}

.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(200,154,46,0.35);
  transition: var(--transition);
}

.navbar-brand:hover .logo-icon {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(200,154,46,0.45);
}

.logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0.3px;
}

.logo-pt {
  color: var(--accent-light);
  font-weight: 800;
}

.sticky-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.sticky-logo h1 {
  display: none;
}

.main-menu ul.navbar-nav li {
  display: inline-block;
  padding: 0 4px;
}

.main-menu ul.navbar-nav li a {
  background: transparent;
  color: rgba(255,255,255,0.88);
  font-size: 12.5px;
  font-weight: 600;
  padding: 24px 12px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  border-radius: 6px;
  transition: var(--transition);
}

.main-menu ul.navbar-nav li a::after {
  content: '';
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--accent-light);
  transition: width 0.3s ease, left 0.3s ease;
  border-radius: 1px;
}

.main-menu ul.navbar-nav li a:hover::after,
.main-menu ul.navbar-nav li.active a::after { width: 60%; }

.main-menu ul.navbar-nav li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}

.main-menu ul.navbar-nav li.active a {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* CTA Button — Hubungi Kami */
.nav-cta {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light)) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  margin-top: 16px;
  margin-left: 8px;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 4px 14px rgba(200,154,46,0.30);
  border: none !important;
}

.nav-cta::after { display: none !important; }

.nav-cta:hover {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)) !important;
  box-shadow: 0 6px 20px rgba(200,154,46,0.45);
  transform: translateY(-1px);
}

.navbar { border: none; margin-bottom: 0; }
.navbar-default { background: transparent; }

.navbar-default .navbar-toggle {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 18px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: rgba(255,255,255,0.15);
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff; width: 22px; height: 2px;
  transition: var(--transition);
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus { background: none; color: #fff; }

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus { background-color: transparent; color: #fff; }

.top-right.text-right {
  float: right; position: relative; top: 24px; margin-left: 20px;
}
.top-right.text-right > li { float: right; margin: 0 8px; }
.top-right.text-right li a { color: #fff; }

/* ============================================================
   2.1 STICKY NAVIGATION — Premium white bar
   ============================================================ */
.header-area.stick {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(28,53,87,0.10);
  height: 70px;
  position: fixed; top: 0; width: 100%; z-index: 1000;
  border-bottom: 1px solid rgba(28,53,87,0.08);
}

.stick .header-deco-line {
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
}

.stick .navbar-header a.navbar-brand { display: inline-flex; height: 70px; }
.stick .navbar-brand > img          { display: none; }
.stick .navbar-brand.sticky-logo > img { display: block; }

.stick .logo-text { color: var(--primary); }
.stick .logo-pt   { color: var(--accent); }
.stick .logo-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 4px 12px rgba(27,58,92,0.25);
}

.stick .main-menu ul.navbar-nav li a          { color: var(--text-medium); }
.stick .main-menu ul.navbar-nav li.active a   { color: var(--primary); }
.stick .main-menu ul.navbar-nav li a:hover    { color: var(--primary); background: rgba(27,58,92,0.04); }
.stick .main-menu ul.navbar-nav li a::after   { background: var(--accent); }

.stick .main-menu ul.nav > li > a {
  color: var(--text-medium); line-height: 22px; padding: 24px 12px;
  text-transform: uppercase; letter-spacing: 1.4px;
}

.stick .navbar-default .navbar-toggle .icon-bar { background-color: var(--primary); }
.stick .navbar-default .navbar-toggle { padding: 10px 0; border-color: var(--border); }

.stick .main-menu ul.navbar-nav li.active a::after {
  border: none; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  position: absolute; width: 60%;
}
.stick .main-menu ul.nav > li > a:hover { color: var(--primary); }

.stick .nav-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(27,58,92,0.25);
}

.stick .nav-cta:hover {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light)) !important;
  color: #fff !important;
}

/* ============================================================
   3. ABOUT AREA
   ============================================================ */
.about-area {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
}

.single-well > a { display: block; }

.single-well ul li {
  color: var(--text-medium);
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.single-well ul li:last-child { border-bottom: none; }

.single-well ul li i { color: var(--accent); padding-right: 12px; font-size: 12px; }
.single-well p { color: var(--text-medium); line-height: 1.85; }

.single-well video {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: 100% !important;
  height: auto !important;
  margin-bottom: 20px;
}

.single-well img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   4. SERVICES AREA
   ============================================================ */
.services-area { background: var(--bg-white); }

.services-area .row {
  display: flex;
  flex-wrap: wrap;
}

.services-area .row > [class*="col-"] {
  display: flex;
  margin-bottom: 28px;
}

.services-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  margin-bottom: 24px;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(28,53,87,0.06), rgba(28,53,87,0.02));
  border: 1px solid rgba(28,53,87,0.08);
  color: var(--primary);
  transition: var(--transition);
}

.section-headline.services-head > h2 { margin-bottom: 25px; }

.services-details {
  padding: 40px 30px 36px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.services-details:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(28,53,87,0.14);
  transform: translateY(-6px);
}

.services-details:hover h4,
.services-details:hover h5,
.services-details:hover .services-icon { color: var(--accent); }

.services-details:hover .services-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.services-details h4,
.services-details h5 {
  color: var(--primary);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 12px;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0;
}

.services-details p {
  color: var(--text-medium);
  font-size: 14px;
  line-height: 1.80;
  margin-bottom: 12px;
}

.services-details p:last-child {
  margin-bottom: 0;
}

.row.second-row { margin-top: 28px; }

/* ============================================================
   5. SKILL AREA
   ============================================================ */
.our-skill-area {
  position: relative;
  background: url("../img/background/bg1.jpg") no-repeat fixed center top / cover;
}

.test-overly {
  background: rgba(14, 34, 64, 0.88);
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
}

.progress-h4 {
  color: rgba(255,255,255,0.90);
  font-weight: 600;
  font-size: 14px;
  margin-top: 14px;
  letter-spacing: 0.8px;
  font-family: 'Open Sans', sans-serif;
}

/* ============================================================
   6. FAQ / INFORMATION AREA
   ============================================================ */
.faq-area { background: var(--bg-light); }

.faq-details .panel-heading { padding: 0; }

.panel-default > .panel-heading {
  background-color: transparent; border: none; color: var(--text-dark);
}

.faq-details h4.check-title {
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  overflow: hidden;
}
.faq-details h4.check-title:hover { border-color: var(--primary); }

.faq-details h4.check-title a {
  color: var(--text-dark);
  display: block;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-left: 44px;
  padding: 12px 12px;
  text-decoration: none;
  transition: var(--transition);
}

.panel-body {
  padding: 14px 14px 12px 52px;
  color: var(--text-medium);
  font-size: 14px;
  line-height: 1.80;
}

.faq-details a span.acc-icons { position: relative; }

.faq-details a span.acc-icons::before {
  content: "\f078";
  font-family: fontawesome; font-size: 14px;
  height: 44px; left: -44px; line-height: 44px;
  position: absolute; text-align: center; top: -12px; width: 40px;
  color: var(--text-light); transition: var(--transition);
}

.faq-details h4.check-title a.active,
.faq-details a.active span.acc-icons::before { color: var(--accent); }

.faq-details a.active span.acc-icons::before { content: "\f077"; }

/* Tabs */
.tab-menu { display: block; text-align: center; }
.tab-menu ul.nav { margin: 0; padding: 0; }
.tab-menu ul.nav li { border: none; display: inline-block; }

.tab-content {
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 24px 24px 20px;
  background: var(--bg-white);
}

.tab-menu ul.nav li a {
  background: transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-medium);
  display: block;
  font-weight: 600;
  margin-right: 3px;
  padding: 12px 24px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
  transition: var(--transition);
}

.tab-menu ul li.active a,
.tab-menu ul li.hover a,
.tab-menu ul li.focus a {
  border-bottom: 2px solid var(--accent) !important;
  color: var(--primary) !important;
  font-weight: 700;
}

.tab-menu .nav-tabs {
  border-bottom: 1px solid var(--border);
}

.tab-menu .nav-tabs > li > a:hover { border-color: var(--border); }

.event-content.head-team h4 {
  background: transparent;
  color: var(--primary);
  padding: 20px 0 10px;
  font-weight: 600;
}

.tab-main-img a { position: relative; display: block; }
.tab-main-img a:hover span.events-offer { height: 20%; }
.tab-main-img a span.events-offer {
  background: rgba(28,53,87,0.80);
  bottom: 0; color: #fff; content: ""; font-size: 18px; font-weight: 700;
  height: 0%; left: 0; line-height: 70px; padding: 0; position: absolute;
  text-align: left; transition: all 0.5s ease; width: 100%; padding: 0 12px;
}

/* ============================================================
   7. WELCOME AREA
   ============================================================ */
.wellcome-area {
  background: url("../img/background/bg1.jpg");
  background-size: cover; background-position: center;
  background-attachment: fixed; background-repeat: no-repeat;
  position: relative;
}
.wellcome-area::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(14, 34, 64, 0.84);
}

.well-bg { position: relative; }
.wellcome-text { margin: 70px 0; padding: 40px 48px; position: relative; z-index: 1; }
.wellcome-text .section-headline p { margin-bottom: 0; }

.well-text > h2 { color: #fff; font-size: 46px; font-weight: 700; line-height: 1.28; }
.well-text p { font-size: 18px; font-style: italic; color: rgba(255,255,255,0.82); }

.subs-feilds {
  border: 1px solid rgba(255,255,255,0.35);
  display: inline-block; height: 52px; margin-top: 30px;
  width: 60%; border-radius: var(--radius-pill); overflow: hidden;
}

.suscribe-input input {
  background: transparent; border: none; color: #fff;
  float: left; font-size: 14px; padding: 14px 20px; width: 70%; height: 50px;
}

.suscribe-input button {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  border: none; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  color: #fff; float: left; font-size: 20px; font-weight: 700;
  padding: 14px 20px; width: 30%; transition: var(--transition);
}
.suscribe-input button:hover { opacity: 0.9; }

/* ============================================================
   8. TEAM AREA
   ============================================================ */
.our-team-area { background: var(--bg-white); }

.our-team-area .team-row {
  display: flex;
  flex-wrap: wrap;
}

.our-team-area .team-row > [class*="col-"] {
  display: flex;
  margin-bottom: 28px;
}

.team-member {
  background: rgba(28,53,87,0.65);
  display: block; margin-right: -15px; padding: 10px;
  position: relative; overflow: hidden;
}

.team-member::before {
  background: url("../img/team/team01.jpg") no-repeat center / cover;
  content: ""; display: block;
  height: 100%; left: 0; margin-right: -15px; padding: 10px;
  position: absolute; top: 0; width: 100%; z-index: -1;
  transition: 5s; transform: scale(1);
}
.team-member:hover.team-member::before { transform: scale(1.2); }

.single-team-member {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  background: var(--bg-white);
  box-shadow: var(--shadow-xs);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.single-team-member:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: rgba(28,53,87,0.13);
}

/* Director card — wider, more prominent */
.team-director {
  max-width: 420px;
  margin: 0 auto;
}

.team-img {
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
}
.team-img > a {
  display: block;
}

.team-img > a img {
  transition: transform 0.5s ease;
  width: 100%;
  height: auto;
  display: block;
}

.single-team-member:hover .team-img > a img { transform: scale(1.06); }

.team-img > a::after {
  background: rgba(14, 34, 64, 0.76);
  bottom: 0; content: ""; height: 100%; left: 0;
  position: absolute; transition: var(--transition);
  width: 100%; opacity: 0;
}

.single-team-member:hover .team-img > a::after { opacity: 1; }
.single-team-member:hover .team-social-icon   { top: 40%; opacity: 1; }

.team-social-icon {
  left: 50%; margin-left: -61px;
  opacity: 0; position: absolute; top: 30%;
  transition: all 0.4s ease; z-index: 10;
}

.team-social-icon ul li { display: inline-block; }

.team-social-icon ul li a {
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 50%; color: #fff; display: block;
  font-size: 14px; height: 36px; line-height: 36px;
  margin: 0 4px; width: 36px; transition: var(--transition);
}
.team-social-icon ul li a:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.team-content {
  padding: 18px 16px 16px;
  background: var(--bg-white);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team-content > h4, .team-content > h6 { margin-bottom: 4px; }
.team-content > p { color: var(--text-light); font-size: 13px; margin-bottom: 0; }

/* ============================================================
   EXPERT CARDS — Tenaga Ahli (no photo)
   ============================================================ */
.expert-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  box-shadow: var(--shadow-xs);
  padding: 36px 24px;
  text-align: center;
  transition: var(--transition);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.expert-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: rgba(28,53,87,0.13);
}

.expert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  font-size: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.expert-card:hover .expert-icon {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
}

.expert-card h6 {
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: 'Raleway', sans-serif;
}

.expert-card p {
  color: var(--text-light);
  font-size: 13px;
  margin-bottom: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.team-left-text h4 { color: #fff; font-size: 28px; font-weight: 700; text-transform: uppercase; }
.team-left-text p  { color: rgba(255,255,255,0.88); font-size: 16px; line-height: 1.7; }

.head-team h4 {
  display: inline-block; font-size: 22px; font-weight: 700;
  padding-bottom: 8px; text-transform: uppercase;
}

.email-news { display: block; margin: 28px 0; overflow: hidden; text-align: center; width: 100%; }

.email-news .email_button input {
  background: transparent; border: 1px solid #fff; color: #fff;
  float: left; font-size: 13px; padding: 8px; width: 81%;
}
.email-news .email_button > button {
  background: transparent; border: 1px solid #fff; color: #fff;
  float: left; font-size: 15px; padding: 8px 12px; text-align: center;
}
.email-news .email_button > button:hover { background: var(--accent); border-color: var(--accent); }

.team-left-icon ul li { display: inline-block; }

.team-left-icon ul li a {
  border: 2px solid #fff; color: #fff; display: block;
  font-size: 15px; height: 40px; line-height: 36px; margin: 0 3px; width: 40px;
  border-radius: 50%; transition: var(--transition);
}
.team-left-icon ul li a:hover { color: var(--primary); background: #fff; }

.team-left-icon.text-center { margin-bottom: 20px; }

.team-member-carousel .single-team-member { overflow: hidden; width: 100%; }

/* Director card circle */
.vc_single_image-wrapper.vc_box_circle {
  border-radius: 50%; overflow: hidden; display: inline-block;
  border: 4px solid var(--accent); padding: 3px; box-shadow: var(--shadow-md);
}

/* ============================================================
   9. REVIEWS AREA
   ============================================================ */
.reviews-area {
  background: url(../img/background/bg1.jpg) no-repeat fixed center top / cover;
  overflow: hidden; position: relative;
}

.work-left-text {
  background: linear-gradient(155deg, var(--accent-dark), var(--accent-light));
  width: 50%;
}

.work-right-text {
  background: rgba(14,34,64,0.90);
  float: right; height: 100%; overflow: hidden;
  padding: 71px 0; width: 50%;
  position: absolute; right: 0; top: 0;
}

.work-right-text h2 { color: #fff; text-transform: uppercase; font-size: 24px; }

.work-right-text h5 {
  color: rgba(255,255,255,0.88); font-size: 18px;
  font-weight: 700; line-height: 34px; text-transform: uppercase;
}

.work-right-text .sus-btn { margin-left: 0; margin-top: 20px; }

.single-awesome-4 { display: block; float: left; overflow: hidden; width: 33.33%; }
.single-awesome-4 .add-actions { padding: 10px 20px; }

/* ============================================================
   10. PORTFOLIO AREA
   ============================================================ */
.portfolio-area { background: var(--bg-light); }
.pst-content    { padding-left: 10px; }

.project-menu { margin-bottom: 40px; text-align: center; }
.project-menu li { display: inline-block; }

.project-menu li a {
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-medium);
  cursor: pointer; display: inline-block;
  font-size: 13px; font-weight: 600;
  margin: 0 4px 8px; padding: 9px 22px;
  text-transform: capitalize; transition: var(--transition);
  letter-spacing: 0.4px; box-shadow: var(--shadow-xs);
}

.project-menu li a.active,
.project-menu li a:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff; text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.single-awesome-portfolio { float: left; overflow: hidden; padding: 15px; width: 25%; position: relative; }

.single-awesome-project {
  overflow: hidden; margin-bottom: 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.single-awesome-project:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.awesome-img { display: block; width: 100%; height: 100%; position: relative; }
.awesome-img > a { display: block; position: relative; overflow: hidden; }
.awesome-img > a img { transition: transform 0.5s ease; }
.single-awesome-project:hover .awesome-img > a img { transform: scale(1.06); }
.single-awesome-project:hover .awesome-img > a::after { opacity: 1; }
.single-awesome-project:hover .add-actions { opacity: 1; bottom: 0; }

.awesome-img > a::after {
  background: rgba(14,34,64,0.78);
  content: ""; height: 100%; left: 0;
  position: absolute; top: 0; width: 100%;
  opacity: 0; transition: 0.4s;
}

.add-actions {
  background: rgba(14,34,64,0.62);
  bottom: 30px; display: block; height: 100%; left: 0;
  opacity: 0; overflow: hidden; padding: 10px 16px;
  position: absolute; transition: all 0.4s ease; width: 100%;
}

.project-dec { display: block; height: 100%; width: 100%; }
.project-dec a { display: block; height: 100%; width: 100%; }
.project-dec h4 { margin-bottom: 6px; }

.project-dec h4 {
  color: #fff; font-size: 20px;
  margin-top: -45px; padding-top: 50%;
  text-decoration: none; text-transform: uppercase; font-weight: 700;
}
.project-dec h4:hover { color: var(--accent-light); }
.project-dec span    { color: rgba(255,255,255,0.82); font-size: 13px; letter-spacing: 0.4px; }

.project-action-btn { display: block; height: 100%; text-align: center; transition: all 1s ease; width: 100%; }
.project-action-btn li { display: block; height: 100%; width: 100%; }
.project-action-btn li a { display: block; height: 100%; width: 100%; }

/* ============================================================
   11. PRICING TABLE
   ============================================================ */
.pricing-area { background: var(--bg-light); }

.pri_table_list {
  border: 1px solid var(--border);
  text-align: center; transition: var(--transition);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pri_table_list:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }

.pri_table_list > h3 {
  color: var(--primary); font-size: 22px; font-weight: 700;
  line-height: 1.3; padding: 30px 0 20px; text-transform: uppercase;
  transition: var(--transition); background: var(--bg-light);
}
.pri_table_list h3 span { font-size: 15px; font-weight: 400; color: var(--text-medium); }

.pri_table_list ol { list-style: none; margin: 0; padding: 0 0 25px; }

.pri_table_list ol li {
  border-bottom: 1px solid var(--border);
  color: var(--text-medium); padding: 12px 15px;
  position: relative; text-align: left;
}

.pri_table_list li.check.cross::after {
  content: "\f00d"; font-family: fontawesome;
  font-size: 13px; position: absolute; right: 50px; top: 13px; color: #e06c6c;
}
.pri_table_list li.check::after {
  content: "\f00c"; font-family: fontawesome;
  font-size: 13px; position: absolute; right: 50px; top: 13px; color: var(--accent);
}

.pri_table_list button {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none; color: #fff;
  margin-bottom: 25px; padding: 12px 35px;
  text-transform: uppercase; transition: var(--transition);
  border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.8px;
}
.pri_table_list > button:hover {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
}

.pri_table_list.active {
  transition: var(--transition); position: relative; overflow: hidden;
  border-color: var(--primary); box-shadow: var(--shadow-lg);
}

.saleon {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  color: #fff; font-size: 12px; font-weight: 700;
  left: -26px; padding: 2px 25px; position: absolute;
  text-transform: uppercase; top: 16px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.active > h3 {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff; transition: var(--transition);
}
.active > button {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  color: #fff; transition: 0.4s;
}
.active > button:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

/* ============================================================
   12. TESTIMONIALS
   ============================================================ */
.testimonials-area {
  background: url("../img/background/slider1.jpg") no-repeat fixed center top / cover;
  height: auto; width: 100%; position: relative;
}

.testi-inner { position: relative; width: 100%; height: auto; z-index: 1; }

.testi-overly {
  background: rgba(12, 26, 54, 0.88);
  height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1;
}

.quate {
  border: 1.5px solid rgba(200,150,26,0.45);
  border-radius: 50%; color: var(--accent-light); display: inline-block;
  font-size: 22px; height: 68px; line-height: 68px; width: 68px;
  background: rgba(200,150,26,0.10); transition: var(--transition);
}
.quate:hover { background: rgba(200,150,26,0.20); color: var(--accent-light); }

.testi-img img {
  border: 2px solid rgba(200,150,26,0.30);
  border-radius: 50%; height: 80px; margin: 0 auto; padding: 4px;
  transition: background 0.6s; width: 80px !important;
  box-shadow: var(--shadow-sm);
}

.testi-text p {
  color: rgba(255,255,255,0.90); font-size: 17px;
  line-height: 1.72; margin: 26px 0; letter-spacing: 0.2px; font-style: italic;
}

.testi-text h6 { color: var(--accent-light); font-size: 15px; font-weight: 600; }

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot > span {
  background: rgba(255,255,255,0.35); display: inline-block;
  height: 8px; width: 8px; transition: 0.4s; border-radius: 4px;
}

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots {
  bottom: -30px; display: block; left: 50%; margin-left: -20px; position: absolute;
}

.testimonial-content { margin-bottom: 15px; }

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot {
  display: inline-block; margin: 0 3px;
}

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active span {
  background: var(--accent-light); width: 22px;
}

.testi-text.text-center > h6 {
  color: var(--accent-light); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
}

.guest-rev { color: rgba(255,255,255,0.55); font-size: 14px; }
.guest-rev > a { color: var(--accent-light); font-size: 13px; }

/* ============================================================
   13. BLOG AREA
   ============================================================ */
.blog-area { height: auto; width: 100%; background: var(--bg-white); }

.blog-area .blog-row {
  display: flex;
  flex-wrap: wrap;
}

.blog-area .blog-row > [class*="col-"] {
  display: flex;
  margin-bottom: 28px;
}

.single-blog {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
  width: 100%;
  display: flex;
  flex-direction: column;
}
.single-blog:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: rgba(28,53,87,0.12);
}

.single-blog-img {
  overflow: hidden;
  height: 220px;
}
.single-blog-img a {
  display: block;
  height: 100%;
}
.single-blog-img a img {
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.single-blog:hover .single-blog-img a img { transform: scale(1.05); }

.blog-meta {
  border-bottom: 1px solid var(--border);
  padding: 11px 20px;
  background: var(--bg-light);
}

.blog-content .blog-meta { border-bottom: 1px solid var(--border); }

.comments-type > a,
.date-type,
.blog-meta span.comments-type {
  color: var(--text-light); letter-spacing: 0.3px; margin-right: 8px; font-size: 13px;
}

.blog-meta .comments-type i { padding-right: 0 !important; }
.blog-meta span i { padding-right: 8px; }

.blog-content-right .comments-type > a,
.blog-content-right .date-type,
.blog-content-right .blog-meta span.comments-type,
.blog-content-right .blog-text p {
  color: #fff; letter-spacing: 0.3px;
}

.blog-text {
  padding: 20px 20px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-text h4 {
  color: var(--text-dark); margin-bottom: 12px;
  font-size: 18px; font-family: 'Raleway', sans-serif;
  font-weight: 700; line-height: 1.4;
}
.blog-text h4 a  { color: var(--text-dark); }
.blog-text h4 a:hover { color: var(--primary); }
.blog-text p { color: var(--text-medium); font-size: 14px; line-height: 1.78; flex: 1; }

.blog-btn-wrap {
  padding: 0 20px 20px;
  margin-top: auto;
}

.blog-read-more {
  display: inline-block;
  padding: 10px 28px;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-pill);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: var(--transition);
  cursor: pointer;
}
.blog-read-more:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  text-decoration: none;
}

.blog-read-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   14. SUBSCRIBE / CTA BANNER
   ============================================================ */
.suscribe-area {
  background: linear-gradient(130deg, var(--primary-dark) 0%, var(--primary-light) 100%);
  padding: 40px 0; position: relative; overflow: hidden;
}
.suscribe-area::before {
  content: ''; position: absolute; top: -60%; right: -5%;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(200,150,26,0.10);
}
.suscribe-area::after {
  content: ''; position: absolute; bottom: -60%; left: -4%;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
}

.suscribe-text { display: block; padding: 10px 0; position: relative; z-index: 1; }

.suscribe-text h3 {
  color: #fff; display: inline-block;
  font-size: 22px; font-weight: 600; margin: 0;
  text-transform: none; letter-spacing: 0.3px;
  font-family: 'Raleway', sans-serif;
}

.sus-btn {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  border: none; color: #fff; display: inline-block;
  font-size: 14px; font-weight: 700; margin-left: 24px;
  padding: 13px 32px; text-decoration: none; text-transform: uppercase;
  border-radius: var(--radius-pill); letter-spacing: 1px;
  box-shadow: 0 5px 18px rgba(200,150,26,0.35);
  transition: var(--transition); position: relative; z-index: 1;
}
.sus-btn:hover {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  color: #fff; transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(200,150,26,0.45);
}

/* ============================================================
   15. CONTACT AREA
   ============================================================ */
.contact-area { background: var(--bg-light); }

.contact-content { padding: 80px; background: var(--primary-dark); }
.contact-content-right { padding: 80px; }

.contact-form input[type="text"],
.contact-form input[type="email"] {
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text-dark);
  height: 50px; margin-bottom: 16px;
  padding-left: 18px; width: 100%;
  transition: var(--transition); font-size: 14px;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgba(27,58,92,0.10) !important;
}

.contact-form textarea {
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text-dark); height: 150px;
  padding: 18px; width: 100%;
  transition: var(--transition); font-size: 14px; resize: vertical;
}
.contact-form textarea:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgba(27,58,92,0.10) !important;
}

.contact-form button[type="submit"] {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none; color: #fff;
  font-size: 14px; font-weight: 700; margin-top: 8px;
  padding: 14px 44px; text-transform: uppercase; transition: var(--transition);
  border-radius: var(--radius-pill); letter-spacing: 1px;
  box-shadow: var(--shadow-md);
}
.contact-form button[type=submit]:hover {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  transform: translateY(-2px); box-shadow: var(--shadow-lg);
}

.contact-form #sendmessage {
  color: #276748; border: 1px solid #276748; background: rgba(39,103,72,0.05);
  display: none; text-align: center; padding: 15px; font-weight: 600;
  margin-bottom: 15px; border-radius: var(--radius-sm);
}
.contact-form #errormessage {
  color: #c0392b; display: none; border: 1px solid #c0392b;
  background: rgba(192,57,43,0.05); text-align: center; padding: 15px;
  font-weight: 600; margin-bottom: 15px; border-radius: var(--radius-sm);
}
.contact-form #sendmessage.show, .contact-form #errormessage.show, .contact-form .show { display: block; }

#contact .form .validation {
  color: #c0392b; display: none; margin: 0 0 20px;
  font-weight: 400; font-size: 12px;
}

.single-icon i {
  font-size: 22px; width: 60px; height: 60px;
  border: 1.5px solid var(--border); line-height: 56px;
  border-radius: 50%; margin-bottom: 16px; color: var(--primary);
  background: var(--bg-white); transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.single-icon:hover i { background: var(--primary); color: #fff; border-color: var(--primary); }

.single-icon p { font-size: 15px; line-height: 1.75; color: var(--text-medium); }
.contact-icon  { margin-bottom: 40px; }

#google-map {
  height: 370px; margin-bottom: 20px;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ============================================================
   16. FOOTER
   ============================================================ */
.footer-area {
  padding: 60px 0 36px;
  background: var(--bg-white);
  border-top: 3px solid var(--primary);
}

.footer-head p { color: var(--text-medium); font-size: 14px; line-height: 1.80; }

.footer-head h4 {
  color: var(--primary); font-size: 13px; font-weight: 700;
  letter-spacing: 2.5px; padding-bottom: 12px; text-transform: uppercase;
  border-bottom: 2px solid var(--accent); display: inline-block; margin-bottom: 22px;
}

.footer-logo { padding-bottom: 18px; }

.footer-logo h2 {
  color: var(--primary); padding: 0; margin: 0;
  font-size: 28px; font-weight: 700; line-height: 1;
  font-family: 'Playfair Display', serif;
}
.footer-logo h2 span { color: var(--accent); }

.footer-icons { margin-top: 20px; }
.footer-icons ul li { display: inline-block; }

.footer-icons ul li a {
  border: 1.5px solid var(--border); color: var(--text-medium);
  display: block; font-size: 15px; height: 40px; line-height: 38px;
  margin-right: 6px; text-align: center; width: 40px;
  border-radius: 50%; transition: var(--transition); background: var(--bg-white);
}

.footer-icons ul li a:hover,
.popular-tag ul li a:hover {
  background: var(--primary); border-color: var(--primary);
  color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm);
}

.footer-contacts p span { color: var(--accent); font-weight: 700; }
.footer-contacts p { font-size: 14px; line-height: 1.8; color: var(--text-medium); }

.popular-tag ul li { display: inline-block; }

.popular-tag ul li a {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-medium); display: block;
  font-size: 12px; font-weight: 600; margin: 5px 3px;
  padding: 5px 13px; text-transform: capitalize;
  transition: var(--transition); width: auto; text-align: center;
  background: var(--bg-white);
}

.flicker-img > a { float: left; padding: 2px; width: 33.33%; }

.flicker-img > a img {
  border-radius: 3px; transition: var(--transition);
}
.flicker-img > a:hover img { opacity: 0.82; transform: scale(1.03); }

/* Footer bottom bar */
.footer-area-bottom {
  background: var(--primary-dark); padding: 16px 0;
}

.copyright > p   { margin-bottom: 0; color: rgba(255,255,255,0.60); font-size: 13px; }
.copyright a     { color: var(--accent-light); }
.copyright a:hover { color: #fff; }

.copyright-text a       { color: rgba(255,255,255,0.60); }
.copyright-text a:hover { color: var(--accent-light); text-decoration: underline; }

.credits     { padding-top: 5px; text-align: center; }
.credits a   { color: var(--accent-light); }

/* ============================================================
   GLOBAL BUTTONS
   ============================================================ */
.ready-btn {
  border: 2px solid rgba(255,255,255,0.78);
  border-radius: var(--radius-pill);
  color: #fff; cursor: pointer; display: inline-block;
  font-size: 14px; font-weight: 700;
  margin-top: 30px; padding: 14px 38px;
  text-align: center; text-transform: uppercase;
  letter-spacing: 1.5px; transition: var(--transition); z-index: 222;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(4px);
}
.ready-btn:hover {
  color: var(--primary); background: #fff; border-color: #fff;
  text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg);
}

.right-btn {
  margin-right: 14px;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  border-color: transparent;
}
.right-btn:hover { background: #fff; border-color: #fff; color: var(--primary); }

/* ============================================================
   HOME PAGE 2 / 3
   ============================================================ */
.header-bg {
  background: url(../img/slider/slider1.jpg) no-repeat fixed top center / cover;
}

.header-bg.home-2 { width: 100%; height: 100%; position: relative; }

.home-overly { background: rgba(14,34,64,0.52); height: 100%; position: absolute; width: 100%; }

.home-2 .layer-1-3, .home-3 .layer-1-3 { margin: 10px 0 0; }

.home-video { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; }

.header-image.home-3 { width: 100%; height: 100%; position: relative; }

.table      { width: 100%; height: 100%; display: table; }
.table-cell { width: 100%; height: 100%; display: table-cell; vertical-align: middle; }

/* ============================================================
   BLOG PAGE
   ============================================================ */
.page-area { position: relative; }

.blog-page .banner-box { margin-bottom: 40px; }

.search-option {
  border: 1.5px solid var(--border); height: 48px; margin-bottom: 28px;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-white);
}
.search-option input {
  border: none; padding: 8px 16px; width: 80%;
  color: var(--text-dark); font-size: 14px;
}
.search-option button {
  background: transparent; border: none; font-size: 18px;
  padding: 10px 20px; color: var(--text-medium); transition: var(--transition);
}
.search-option button:hover { color: var(--primary); }

.left-blog h4 {
  border-bottom: 1px solid var(--border); color: var(--primary);
  font-size: 13px; font-weight: 700; margin-bottom: 0;
  padding: 16px 14px; text-transform: uppercase; letter-spacing: 2px;
}

.left-blog {
  background: var(--bg-light); margin-bottom: 28px; overflow: hidden;
  padding-bottom: 18px; border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.left-blog li { border-bottom: 1px solid var(--border); display: block; }
.left-blog li:last-child { border-bottom: 0; }

.left-blog ul li a {
  color: var(--text-medium); display: block; font-size: 14px;
  padding: 11px 14px; transition: var(--transition);
}
.left-blog ul li a:hover { color: var(--primary); padding-left: 20px; }

.pst-content p a         { color: var(--text-dark); font-size: 13px; line-height: 1.5; }
.pst-content p a:hover   { color: var(--primary); }

.recent-single-post {
  border-bottom: 1px solid var(--border); display: block;
  overflow: hidden; padding: 14px 14px;
}

.blog-page .single-blog { margin-bottom: 40px; }

.post-img     { display: inline-block; float: left; padding: 0 8px 0 0; width: 35%; }
.pst-content  { display: inline-block; float: left; width: 65%; padding-left: 6px; }

.header-bottom h1, .header-bottom h2 { color: #fff; }

.blog-tags { padding: 1px 0; }

.popular-tag.left-blog ul li a:hover { color: #fff; }
.popular-tag.left-side-tags.left-blog ul { padding: 0 10px; }

.left-tags .left-side-tags ul li { border-bottom: 0; }
.left-tags .left-side-tags ul li a { padding: 3px 10px; width: auto; }
.left-side-tags h4 { margin-bottom: 15px; }

.blog-1 .banner-box { margin-bottom: 30px; }

/* ============================================================
   BLOG DETAILS
   ============================================================ */
.post-information h2 { color: var(--text-dark); font-size: 22px; text-transform: uppercase; }
.post-information    { padding: 20px 0; }

.post-information .entry-meta span a {
  color: var(--text-medium); display: inline-block; padding: 10px 0; transition: var(--transition);
}
.entry-meta span a:hover { color: var(--primary); }

.post-information .entry-meta { border-bottom: 1px solid var(--border); margin: 20px 0; }

.post-information .entry-meta span i { padding: 0 10px; color: var(--accent); }

.entry-content > p { color: var(--text-medium); line-height: 1.85; }
.entry-meta > span { color: var(--text-light); font-size: 13px; }

.entry-content blockquote {
  background: var(--bg-light); border-left: 4px solid var(--accent);
  font-size: 17px; font-style: italic;
  margin: 0 0 20px 28px; padding: 20px 22px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-medium);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--primary); border-color: var(--primary); color: #fff; z-index: 3;
}

.social-sharing {
  background: var(--bg-light); border: 1px solid var(--border);
  display: block; margin: 30px 0; border-radius: var(--radius-md);
}
.social-sharing > h3 { display: inline-block; font-size: 17px; margin: 0; padding: 18px 16px; color: var(--text-dark); }

.sharing-icon { display: inline-block; float: right; padding: 14px 12px; }
.sharing-icon a {
  border: 1.5px solid var(--border); color: var(--text-medium);
  display: block; float: left; font-size: 16px; height: 36px; line-height: 34px;
  margin-left: 8px; text-align: center; width: 36px; border-radius: 50%; transition: var(--transition);
}
.sharing-icon a:hover { color: var(--primary); border-color: var(--primary); background: rgba(28,53,87,0.05); }

.single-blog .author-avatar     { float: left; margin-right: 14px; }
.single-blog .author-description h2 { font-size: 18px; margin: 0; padding: 0 0 5px; }

.author-info {
  background: var(--bg-light); float: left; margin: 30px 0;
  padding: 20px; width: 100%; border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.author-avatar     { display: inline-block; float: left; width: 10%; }
.author-description h2 { color: var(--text-medium); font-size: 20px; text-transform: uppercase; }
.author-description h2 a       { color: var(--primary); }
.author-description h2 a:hover { color: var(--accent); }

.single-post-comments { margin-bottom: 60px; max-width: 650px; }

.comments-heading h3, h3.comment-reply-title {
  border-bottom: 1px solid var(--border); color: var(--text-dark);
  font-size: 18px; margin: 0 0 20px; padding: 0 0 8px; text-transform: uppercase;
}

.comments-list ul li { margin-bottom: 24px; }

.comments-list-img { float: left; margin-right: 14px; }

.comments-content-wrap {
  color: var(--text-medium); font-size: 13px; line-height: 1.5;
  margin: 0 0 15px 80px; padding: 13px; position: relative;
  background: var(--bg-light); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.comments-content-wrap span b  { margin-right: 5px; }
span.post-time { margin-right: 5px; }

.comments-content-wrap p {
  color: var(--text-medium); line-height: 1.6;
  margin-bottom: 5px; margin-top: 10px;
}

.comments-content-wrap span a       { color: var(--text-dark); }
.comments-content-wrap span a:hover { color: var(--primary); }

li.threaded-comments { margin-left: 50px; }

.comment-respond   { margin-top: 60px; }

span.email-notes { color: var(--text-light); display: block; font-size: 12px; margin-bottom: 10px; }
.comment-respond p { color: var(--text-medium); margin-bottom: 8px; }

.comment-respond input[type=text],
.comment-respond input[type=email] {
  border: 1.5px solid var(--border); border-radius: 10px;
  height: 44px; margin-bottom: 14px; padding: 0 14px; width: 100%;
  transition: var(--transition); color: var(--text-dark); font-size: 14px;
}
.comment-respond input[type=text]:focus,
.comment-respond input[type=email]:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgba(27,58,92,0.10);
}

.comment-respond textarea#message-box {
  border: 1.5px solid var(--border); border-radius: 10px;
  max-width: 100%; padding: 14px; height: 130px; width: 100%;
  transition: var(--transition); font-size: 14px; color: var(--text-dark);
}
.comment-respond textarea#message-box:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgba(27,58,92,0.10);
}

.comment-respond input[type="submit"] {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none; border-radius: var(--radius-pill); box-shadow: none;
  color: #fff; display: inline-block; font-size: 13px; font-weight: 700;
  height: 44px; line-height: 14px; margin-top: 20px; padding: 10px 26px;
  text-shadow: none; text-transform: uppercase; transition: var(--transition);
  white-space: nowrap; letter-spacing: 0.5px;
}
.comment-respond input[type=submit]:hover {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent-light));
  transform: translateY(-2px);
}

.single-blog .blog-pagination {
  border-top: 1px solid var(--border); margin: 0; padding-top: 30px;
}

/* ============================================================
   AMK DETAIL PAGE — Blog Post Wrapper
   ============================================================ */
.blog-post-wrapper .post-thumbnail {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.blog-post-wrapper .post-thumbnail img {
  width: 100%;
  display: block;
}

/* ============================================================
   ANIMATION ENHANCEMENTS
   ============================================================ */
.services-details,
.single-team-member,
.single-awesome-project,
.single-blog,
.pri_table_list {
  will-change: transform, box-shadow;
}

/* ============================================================
   SCROLLBAR PREMIUM
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* ============================================================
   END CSS
   ============================================================ */