@charset "UTF-8";
/*
Theme Name: Ruposhi
Theme URI: https://www.s7template.com/tf/ruposhi
Author: S7template
Author URI: https://www.s7template.com
Description: Ruposhi is an Actor, Model Portfolio HTML template
Version: 1.0.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Typography & Google Fonts
# Normalize / Reset
# Accessibility
# Globals & Spacing Utilities
# Alignments & Clearings
# Posts & Pages
# Captions & Galleries
# Gutenberg Default Styles
# Block Color Palette
# Sections
    ## Breadcrumb
    ## Comments
    ## Widgets
    ## Navbar
    ## Info Bar
    ## Header
    ## Footer
    ## Error 404
    ## Hero Banner
    ## About Area
    ## Biography Area
    ## Work Progress
    ## Service Area
    ## Portfolio / Gallery
    ## Lets Work
    ## Testimonial
    ## Brand Logo
    ## Fun Facts
    ## Contact Area
    ## Blog Area
# Elements
    ## Back To Top
    ## Preloader
    ## Search Popup
    ## Video Modal
    ## Buttons
    ## Section Title
    ## Contact Form
--------------------------------------------------------------*/

/* ============================================================
   # TYPOGRAPHY & GOOGLE FONTS
   ============================================================ */
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700|Source+Serif+Pro:400,600,700&display=swap");

/* ============================================================
   # CSS VARIABLES
   ============================================================ */
:root {
  --main-color:       #BC885D;
  --hover-color:      #815937;
  --secondary-color:  #30373f;
  --heading-color:    #fff;
  --paragraph-color:  #B2B2B2;
  --body-font:        'DM Sans', sans-serif;
  --heading-font:     'DM Sans', sans-serif;
  
  /* Modern Premium Tokens */
  --glass-bg:         rgba(255, 255, 255, 0.05);
  --glass-border:     rgba(255, 255, 255, 0.1);
  --glass-blur:       10px;
  --shadow-sm:        0 2px 4px rgba(0,0,0,0.1);
  --shadow-md:        0 10px 30px rgba(0,0,0,0.2);
  --shadow-lg:        0 20px 50px rgba(0,0,0,0.3);
  --transition:       all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius:    12px;
}

/* ============================================================
   # NORMALIZE / RESET
   ============================================================ */
html {
  overflow-x: hidden;
  font-family: var(--body-font);
  scroll-behavior: smooth;
}

@supports (text-size-adjust: 100%) or (-webkit-text-size-adjust: 100%) {
  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  outline: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  color: var(--paragraph-color);
  overflow-x: hidden;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  width: 100%;
  max-width: 100vw;
}

h1 { font-size: 48px; line-height: 1.0833; }
h2 { font-size: 36px; line-height: 1.4444; }
h3 { font-size: 24px; line-height: 1.0833; }
h4 { font-size: 20px; line-height: 1.238; }

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

p {
  color: var(--paragraph-color);
  -webkit-hyphens: auto;
  hyphens: auto;
  margin-bottom: 10px;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
  color: #faa603;
}

a i { padding: 0 2px; }

img { 
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

pre { word-break: break-word; }

code { color: #faa603; }

ol {
  counter-reset: counter;
  padding-left: 0;
}
ol li {
  list-style: none;
  margin-bottom: 1rem;
}
ol li::before {
  counter-increment: counter;
  content: counter(counter);
  font-weight: 500;
  margin-right: 10px;
}

dl, ol, ul { padding-left: 15px; }

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=number]:focus,
textarea:focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus,
select:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid #ddd;
}

/* ============================================================
   # UTILITY CLASSES
   ============================================================ */
.gray-bg        { background-color: #f8f8f8; }
.dark-bg        { background-color: #111d5c; }
.section-bg-1   { background-color: #f4f7fc; }
.min-height-600 { min-height: 600px; }

/* Padding top */
.padding-top-10  { padding-top: 10px; }
.padding-top-20  { padding-top: 20px; }
.padding-top-30  { padding-top: 30px; }
.padding-top-40  { padding-top: 40px; }
.padding-top-50  { padding-top: 50px; }
.padding-top-60  { padding-top: 60px; }
.padding-top-70  { padding-top: 70px; }
.padding-top-80  { padding-top: 80px; }
.padding-top-90  { padding-top: 90px; }
.padding-top-95  { padding-top: 95px; }
.padding-top-100 { padding-top: 100px; }
.padding-top-105 { padding-top: 105px; }
.padding-top-110 { padding-top: 110px; }
.padding-top-115 { padding-top: 115px; }
.padding-top-120 { padding-top: 120px; }

/* Padding bottom */
.padding-bottom-10  { padding-bottom: 10px; }
.padding-bottom-20  { padding-bottom: 20px; }
.padding-bottom-30  { padding-bottom: 30px; }
.padding-bottom-40  { padding-bottom: 40px; }
.padding-bottom-50  { padding-bottom: 50px; }
.padding-bottom-60  { padding-bottom: 60px; }
.padding-bottom-65  { padding-bottom: 65px; }
.padding-bottom-70  { padding-bottom: 70px; }
.padding-bottom-80  { padding-bottom: 80px; }
.padding-bottom-85  { padding-bottom: 85px; }
.padding-bottom-90  { padding-bottom: 90px; }
.padding-bottom-95  { padding-bottom: 95px; }
.padding-bottom-100 { padding-bottom: 100px; }
.padding-bottom-105 { padding-bottom: 105px; }
.padding-bottom-110 { padding-bottom: 110px; }
.padding-bottom-115 { padding-bottom: 115px; }
.padding-bottom-120 { padding-bottom: 120px; }
.padding-bottom-130 { padding-bottom: 130px; }
.padding-bottom-135 { padding-bottom: 135px; }

/* Padding both */
.padding-10  { padding: 10px 0; }
.padding-20  { padding: 20px 0; }
.padding-30  { padding: 30px 0; }
.padding-40  { padding: 40px 0; }
.padding-50  { padding: 50px 0; }
.padding-60  { padding: 60px 0; }
.padding-70  { padding: 70px 0; }
.padding-80  { padding: 80px 0; }
.padding-90  { padding: 90px 0; }
.padding-100 { padding: 100px 0; }
.padding-110 { padding: 110px 0; }
.padding-120 { padding: 120px 0; }

/* Margin top */
.margin-top-10  { margin-top: 10px; }
.margin-top-20  { margin-top: 20px; }
.margin-top-30  { margin-top: 30px; }
.margin-top-40  { margin-top: 40px; }
.margin-top-50  { margin-top: 50px; }
.margin-top-55  { margin-top: 55px; }
.margin-top-60  { margin-top: 60px; }
.margin-top-70  { margin-top: 70px; }
.margin-top-80  { margin-top: 80px; }
.margin-top-90  { margin-top: 90px; }
.margin-top-100 { margin-top: 100px; }
.margin-top-120 { margin-top: 120px; }

/* Margin bottom */
.margin-bottom-0   { margin-bottom: 0 !important; }
.margin-bottom-10  { margin-bottom: 10px; }
.margin-bottom-15  { margin-bottom: 15px; }
.margin-bottom-20  { margin-bottom: 20px; }
.margin-bottom-25  { margin-bottom: 25px; }
.margin-bottom-30  { margin-bottom: 30px; }
.margin-bottom-40  { margin-bottom: 40px; }
.margin-bottom-50  { margin-bottom: 50px; }
.margin-bottom-55  { margin-bottom: 55px; }
.margin-bottom-60  { margin-bottom: 60px; }
.margin-bottom-70  { margin-bottom: 70px; }
.margin-bottom-80  { margin-bottom: 80px; }
.margin-bottom-90  { margin-bottom: 90px; }

/* Padding left/right */
.padding-left-0  { padding-left: 0; }
.padding-right-0 { padding-right: 0; }

/* ============================================================
   # ALIGNMENTS
   ============================================================ */
.alignleft   { float: left; clear: both; margin-right: 20px; }
.alignright  { float: right; clear: both; margin-left: 20px; }
.aligncenter { clear: both; display: block; margin: 0 auto 1.75em; }
.alignfull   { margin: 1.5em 0; max-width: 100%; }
.alignwide   { max-width: 1100px; }

/* ============================================================
   # CLEARINGS
   ============================================================ */
.clear::before, .clear::after,
.entry-content::before, .entry-content::after,
.comment-content::before, .comment-content::after,
.site-header::before, .site-header::after,
.site-content::before, .site-content::after,
.site-footer::before, .site-footer::after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear::after,
.entry-content::after,
.comment-content::after,
.site-header::after,
.site-content::after,
.site-footer::after { clear: both; }

/* ============================================================
   # ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  top: 5px;
  width: auto;
  z-index: 100000;
}

#content[tabindex="-1"]:focus { outline: 0; }

/* ============================================================
   # POSTS & PAGES
   ============================================================ */
.sticky  { display: block; }
.updated:not(.published) { display: none; }

.blog-pagination { display: block; width: 100%; }
.blog-pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-pagination ul li { display: inline-block; }
.blog-pagination ul li + li { margin: 0 5px; }
.blog-pagination ul li a,
.blog-pagination ul li span {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #e2e2e2;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
  transition: 0.3s ease-in;
}
.blog-pagination ul li span.current,
.blog-pagination ul li a:hover {
  background-color: var(--main-color);
  color: #fff;
}

/* ============================================================
   # CAPTIONS & GALLERIES
   ============================================================ */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
  clear: both;
}
.wp-caption img[class*=wp-image-] {
  display: block;
  margin: 0 auto;
}
.wp-caption-text { text-align: center; }

.gallery            { margin-bottom: 1.5em; }
.gallery-item       { display: inline-block; text-align: center; vertical-align: top; width: 100%; }
.gallery-columns-2 .gallery-item { max-width: 50%; }
.gallery-columns-3 .gallery-item { max-width: 33.33%; }
.gallery-columns-4 .gallery-item { max-width: 25%; }
.gallery-columns-5 .gallery-item { max-width: 20%; }
.gallery-columns-6 .gallery-item { max-width: 16.66%; }
.gallery-columns-7 .gallery-item { max-width: 14.28%; }
.gallery-columns-8 .gallery-item { max-width: 12.5%; }
.gallery-columns-9 .gallery-item { max-width: 11.11%; }
.gallery-caption    { display: block; }

embed, iframe, object { max-width: 100%; }
.custom-logo-link { display: inline-block; }

/* ============================================================
   # GUTENBERG DEFAULT STYLES
   ============================================================ */
.wp-block-image img { display: block; }
.wp-block-image.alignleft,
.wp-block-image.alignright { width: 100%; }
.wp-block-image.alignfull img { width: 100vw; }

.wp-block-gallery:not(.components-placeholder) { margin: 1.5em auto; }

.wp-block-table { display: block; overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { padding: 0.5em; }

.wp-block-embed.type-video > .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.wp-block-embed.type-video > .wp-block-embed__wrapper > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0; bottom: 0; right: 0;
}

.wp-block-quote.is-large   { margin: 0 auto 16px; }
.wp-block-separator        { margin: 3em auto; padding: 0; }
.wp-block-pullquote        { border-top: 4px solid #555d66; border-bottom: 4px solid #555d66; color: #40464d; }
.wp-block-pullquote > p:first-child { margin-top: 0; }
.wp-block-quote:not(.is-large):not(.is-style-large) { border-left: 4px solid #000; padding-left: 1em; }

.single-post-details-item .entry-content > .alignwide { max-width: 1100px; }
.single-post-details-item .entry-content > .alignfull  { margin: 1.5em 0; max-width: 100%; }

@media screen and (min-width: 768px) {
  .wp-block-cover-text p { padding: 1.5em 0; }
}

/* ============================================================
   # BLOCK COLOR PALETTE
   ============================================================ */
.has-strong-blue-color              { color: #0073aa; }
.has-strong-blue-background-color   { background-color: #0073aa; }
.has-lighter-blue-color             { color: #229fd8; }
.has-lighter-blue-background-color  { background-color: #229fd8; }
.has-very-light-gray-color          { color: #eee; }
.has-very-light-gray-background-color { background-color: #eee; }
.has-very-dark-gray-color           { color: #444; }
.has-very-dark-gray-background-color  { background-color: #444; }

/* ============================================================
   # CHECK LIST
   ============================================================ */
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  display: block;
  padding-left: 20px;
  position: relative;
}
.check-list li::after {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "fontawesome";
  content: "";
  color: var(--main-color);
}

/* ============================================================
   # NAVIGATION (PAGINATION)
   ============================================================ */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation { clear: both; }

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous { float: left; width: 50%; }

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next { float: right; text-align: right; width: 50%; }

.comment-navigation .nav-previous > a,
.posts-navigation .nav-previous > a,
.post-navigation .nav-previous > a,
.comment-navigation .nav-next > a,
.posts-navigation .nav-next > a,
.post-navigation .nav-next > a { transition: 0.3s ease-in; }

.comment-navigation .nav-previous:hover > a,
.posts-navigation .nav-previous:hover > a,
.post-navigation .nav-previous:hover > a,
.comment-navigation .nav-next:hover > a,
.posts-navigation .nav-next:hover > a,
.post-navigation .nav-next:hover > a { color: var(--main-color); }

/* ============================================================
   # MAGNIFIC POPUP
   ============================================================ */
.mfp-zoom-in .mfp-content        { opacity: 0; transition: all 0.5s ease-in-out; transform: scale(0.7); }
.mfp-zoom-in.mfp-bg               { opacity: 0; transition: all 0.5s ease-in-out; }
.mfp-zoom-in.mfp-ready .mfp-content { opacity: 1; transform: scale(1); }
.mfp-zoom-in.mfp-ready.mfp-bg    { opacity: 0.7; }
.mfp-zoom-in.mfp-removing .mfp-content { transform: scale(0.7); opacity: 0; }
.mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; }

.video-play-btn {
  border: 4px solid rgba(255,255,255,0.3);
  height: 80px;
  width: 80px;
  line-height: 75px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in;
}
.video-play-btn:hover {
  color: var(--main-color);
  border-color: var(--main-color);
}

/* ============================================================
   # UNIT TEST / WP LINK PAGES
   ============================================================ */
.wp-link-pages {
  margin: 25px 0 30px;
}
.wp-link-pages span,
.wp-link-pages a {
  border: 1px solid #e2e2e2;
  padding: 5px 15px;
  display: inline-block;
}
.wp-link-pages a { margin: 0 5px; transition: 0.3s ease-in; }
.wp-link-pages .current,
.wp-link-pages a:hover {
  background-color: var(--main-color);
  color: #fff;
  border-color: var(--main-color);
}
.wp-link-pages span:first-child { margin-right: 5px; }

.post-password-form input {
  display: block;
  border: 1px solid #e2e2e2;
  height: 50px;
  border-radius: 3px;
  padding: 0 20px;
}
.post-password-form label { font-weight: 600; color: #333; }
.post-password-form input[type=submit] {
  width: 100px;
  height: 50px;
  background-color: var(--main-color);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: 0.3s ease-in;
}
.post-password-form input[type=submit]:hover { background-color: #121A2F; }

.footer-widget .table td,
.footer-widget .table th { padding: 0.5rem !important; }

/* ============================================================
   # BREADCRUMB
   ============================================================ */
.breadcrumb-area {
  padding: 200px 0 60px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 0;
}
.breadcrumb-area::before {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  content: "";
  background-color: transparent;
  z-index: -1;
}
.breadcrumb-area .breadcrumb-inner .title {
  margin-bottom: 35px;
  font-size: 60px;
  line-height: 75px;
  font-weight: 700;
  text-transform: capitalize;
  color: #fff;
  position: relative;
}
.breadcrumb-area .breadcrumb-inner .title::before {
  position: absolute;
  content: "";
  left: 0;
  top: -35px;
  height: 10px;
  width: 60px;
  background: url("../assets/img/line.png") no-repeat center/cover;
  filter: brightness(111);
}
.breadcrumb-area .breadcrumb {
  background: transparent;
  display: inline-flex;
  padding: 0;
  margin: 0;
}
.breadcrumb-area .breadcrumb .breadcrumb-item {
  color: #999999;
  font-size: 18px;
  font-weight: 500;
  padding-left: 20px;
  transition: all 0.3s ease-in;
}
.breadcrumb-area .breadcrumb .breadcrumb-item:first-child { padding-left: 0; }
.breadcrumb-area .breadcrumb .breadcrumb-item::before { color: #999999; padding-right: 20px; }
.breadcrumb-area .breadcrumb .breadcrumb-item:hover,
.breadcrumb-area .breadcrumb .breadcrumb-item.active { color: #fff; }

/* ============================================================
   # COMMENTS
   ============================================================ */
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }
.comments-area { margin-top: 30px; }

.comments-area .comments-title {
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  margin-bottom: 25px;
}
.comments-area .comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 20px;
}
.comments-area .comment-list li { margin-bottom: 30px; }
.comments-area .comment-list li:last-child { margin-bottom: 0; }
.comments-area .comment-list li ul.children {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.comments-area .comment-list li ul.children li { margin-left: 50px; }
.comments-area .comment-list .children li:last-child { margin-bottom: 30px; }

.comments-area .comment-list li .single-comment-wrap {
  display: flex;
  align-self: flex-start;
}
.comments-area .comment-list li .single-comment-wrap .thumb {
  margin-right: 20px;
  min-width: 80px;
  border-radius: 50%;
}
.comments-area .comment-list li .single-comment-wrap .thumb img {
  margin-bottom: 10px;
  border-radius: 50%;
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
}
.comments-area .comment-list li .single-comment-wrap .date {
  display: block;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 20px;
}
.comments-area .comment-list li .single-comment-wrap .content {
  flex: 1;
  position: relative;
}
.comments-area .comment-list li .single-comment-wrap .content .title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  font-family: var(--heading-font);
}
.comments-area .comment-list li .single-comment-wrap .content p {
  font-size: 16px;
  line-height: 26px;
  word-break: break-word;
}
.comments-area .comment-list li .single-comment-wrap .content p:last-child { margin-bottom: 0; }
.comments-area .comment-list li .single-comment-wrap .content .reply {
  position: absolute;
  top: 0; right: 0;
  color: var(--paragraph-color);
  transition: all 0.3s ease-in;
}
.comments-area .comment-list li .single-comment-wrap .content .reply:hover { color: var(--main-color); }

.comments-area .reply-title,
.comments-area .comment-reply-title {
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  margin-bottom: 20px;
}
.comments-area .form-submit { margin-bottom: 0; }

.comment-form .form-group.textarea .form-control {
  min-height: 160px;
  resize: none;
  line-height: 26px;
}
.comment-form .form-group .form-control {
  height: 50px;
  line-height: 50px;
  border: 1px solid #e2e2e2;
}
.comment-form .submit-btn {
  height: 50px;
  border-radius: 5px;
  font-weight: 400;
  background-color: var(--main-color);
  border: none;
  cursor: pointer;
  transition: 0.3s ease-in;
  color: #fff;
}
.comment-form .submit-btn:hover {
  background-color: var(--secondary-color);
  color: #fff;
}
.comment-form-cookies-consent input[type=checkbox] { margin-right: 5px; }

/* ============================================================
   # WIDGETS
   ============================================================ */
.widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.widget ul li {
  display: block;
  margin: 8px 0;
  word-break: break-word;
}
.widget ul li:first-child { margin-top: 0; }
.widget ul li:last-child  { margin-bottom: 0; }
.widget ul li a { color: inherit; transition: all 0.3s ease-in; }
.widget ul li a:hover { color: var(--main-color); }

.widget select { width: 100%; height: 50px; padding: 10px 20px; }

.widget .widget-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 30px;
  color: #fff;
  position: relative;
}

.widget:last-child { margin-bottom: 0; }

.widget ul.social-area { display: inline-flex; }
.widget ul.social-area li {
  display: inline-block;
  margin: 0 10px;
  color: #d4d4d4;
}

/* Footer Widget */
.widget.footer-widget {
  background-color: transparent !important;
  padding: 0;
  margin-bottom: 30px;
}

.widget.footer-widget .subscribe-form .form-group .form-control {
  background-color: #515457;
  color: #fff;
}
.widget.footer-widget .subscribe-form .form-group .form-control::placeholder { color: rgba(255,255,255,0.6); }
.widget.footer-widget .subscribe-form .submit-btn:hover {
  background-color: #fff;
  color: var(--main-color);
}

.widget.footer-widget .widget-title { color: rgba(255,255,255,0.9); }
.widget.footer-widget p,
.footer-widget.widget_tag_cloud .tagcloud a,
.widget.footer-widget.widget_calendar caption,
.widget.footer-widget.widget_calendar th,
.widget.footer-widget.widget_calendar td { color: rgba(255,255,255,0.6); }

.widget.footer-widget ul li,
.widget.footer-widget ul li a { color: rgba(255,255,255,0.6); }
.widget.footer-widget ul li a:hover { color: var(--hover-color); }

/* Footer Nav Menu */
.footer-widget.widget_nav_menu ul li a {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: #a8a8a8;
}
.footer-widget.widget_nav_menu ul li a::after {
  position: absolute;
  left: 0; top: 2px;
  content: "";
  font-weight: 900;
  color: var(--hover-color);
  line-height: 1;
}

/* Nav Menu Widget */
.widget.widget_nav_menu ul { margin: 0; padding: 0; list-style: none; }
.widget.widget_nav_menu ul li { margin: 22px 0; line-height: 1; }
.widget.widget_nav_menu ul li:first-child { margin-top: 0; }
.widget.widget_nav_menu ul li:last-child  { margin-bottom: 0; }
.widget.widget_nav_menu ul li a { border: none; line-height: 1; }
.widget.widget_nav_menu ul li.menu-item-has-children::after { display: none; }

/* Submenu inside widget */
.widget ul li ul.sub-menu {
  position: initial;
  visibility: visible;
  opacity: 1;
  background-color: transparent;
  border-top: none;
  box-shadow: none;
  margin-top: 10px;
}
.widget ul li ul.sub-menu li a { padding: 0 0 0 10px; }
.widget ul li ul.sub-menu li a:hover { background-color: transparent; }

/* Search Widget */
.widget_search .search-form { position: relative; }
.widget_search .search-form .form-group { margin-bottom: 0; }
.widget_search .search-form .form-group .form-control {
  height: 50px;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 0 70px 0 15px;
}
.widget_search .search-form .submit-btn {
  position: absolute;
  right: 0; top: 0;
  width: 60px; height: 50px;
  line-height: 50px;
  padding: 0;
  font-size: 18px;
  border-radius: 0 5px 5px 0;
  background-color: var(--main-color);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: 0.3s ease-in;
}
.widget_search .search-form .submit-btn:hover {
  background-color: var(--secondary-color);
  color: #fff;
}

/* Author Meta Widget */
.widget_author_meta { text-align: center; }
.widget_author_meta .thumb { width: 80px; height: 80px; margin: 0 auto 20px; }
.widget_author_meta .thumb img { border-radius: 50%; }
.widget_author_meta .content .name { font-size: 21px; font-weight: 700; }
.widget_author_meta .content p { font-size: 16px; line-height: 26px; }
.widget_author_meta .content ul { margin-top: 25px; }
.widget_author_meta .content ul li { display: inline-block; margin: 0 5px; }
.widget_author_meta .content ul li a {
  display: block;
  width: 40px; height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  transition: all 0.3s ease-in;
}
.widget_author_meta .content ul li a:hover { background-color: var(--main-color); color: #fff; }

/* Tag Cloud Widget */
.widget_tag_cloud { padding-bottom: 25px; }
.widget_tag_cloud .tagcloud a {
  display: inline-block;
  padding: 0 14px;
  height: 30px;
  line-height: 26px;
  border: 2px solid #e8e8e8;
  margin: 5px 2px;
  transition: all 0.3s ease-in;
  font-weight: 500;
  font-size: 12px !important;
}
.widget_tag_cloud .tagcloud a:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

/* Categories Widget */
.widget.widget_categories ul li {
  border: 2px solid #e8e8e8;
  font-size: 14px;
  font-weight: 700;
  padding-left: 30px;
  height: 50px;
  line-height: 50px;
  margin: 10px 0;
}
.widget.widget_categories ul li:first-child { margin-top: 0; }
.widget.widget_categories ul li:last-child  { margin-bottom: 0; }
.widget.widget_categories ul li span {
  float: right;
  width: 50px;
  height: 100%;
  text-align: center;
  background: #e8e8e8;
}

/* Popular Posts Widget */
.widget_popular_posts .popular-post-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.widget_popular_posts .popular-post-list li {
    margin-bottom: 15px;
}
.widget_popular_posts .popular-post-list li:last-child {
    margin-bottom: 0;
}
.widget_popular_posts .popular-post-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.widget_popular_posts .popular-post-item:hover {
    background-color: #f8f8f8;
    border-color: #e8e8e8;
}
.widget_popular_posts .post-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
}
.widget_popular_posts .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.widget_popular_posts .popular-post-item:hover .post-thumb img {
    transform: scale(1.1);
}
.widget_popular_posts .post-content {
    flex: 1;
    min-width: 0;
}
.widget_popular_posts .post-content h6 {
    font-size: 14px;
    font-weight: 600;
    color: #0a0a0a;
    margin: 0 0 5px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}
.widget_popular_posts .popular-post-item:hover .post-content h6 {
    color: var(--main-color);
}
.widget_popular_posts .post-date {
    font-size: 12px;
    color: #888;
}

/* Recent Comments Widget */
.widget.widget_recent_comments ul li {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f1f1f1;
}
.widget.widget_recent_comments ul li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.widget.widget_recent_comments ul li .thumb { margin-right: 20px; }
.widget.widget_recent_comments ul li .media-body h5 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.widget.widget_recent_comments ul li .media-body p { font-size: 14px; margin-bottom: 0; }
.widget.widget_recent_comments ul li .media-body p i { margin-right: 8px; }

/* Sidebar Widgets */
.widgets-area .widget {
  border: 2px solid #e8e8e8;
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.06);
  margin-bottom: 30px;
  padding: 25px 30px 30px;
}
.widgets-area .widget .title {
  font-weight: 700;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f1f1f1;
  color: #0a0a0a;
}

/* Widget Search (sidebar) */
.widget.widget-search .single-search-inner { position: relative; }
.widget.widget-search .single-search-inner input {
  width: 100%;
  border: 1px solid #e8e8e8;
  height: 60px;
  padding: 0 70px 0 30px;
}
.widget.widget-search .single-search-inner button {
  position: absolute;
  top: 0; right: 0;
  height: 60px; width: 60px;
  line-height: 60px;
  background: var(--heading-color);
  border: 0;
  color: #fff;
}

/* About Me Widget */
.widget .about-me img    { margin-bottom: 26px; }
.widget .about-me h6     { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: #0a0a0a; }
.widget .about-me p      { font-size: 16px; color: #555; }
.widget .about-me .widget-social-icon { margin-top: 17px; margin-bottom: -7px; }

/* About Me Widget - Hover Effect & Clickable */
.widget_author_profile_widget .about-me {
    cursor: pointer;
    display: block;
    text-decoration: none;
}
.widget_author_profile_widget .about-me img {
    margin-bottom: 26px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.widget_author_profile_widget .about-me img:hover {
    border: 2px solid var(--main-color);
    box-shadow: 0 0 15px rgba(188, 136, 93, 0.3);
}
.widget_author_profile_widget .about-me:hover h6 {
    color: var(--main-color);
    transition: color 0.3s ease;
}

/* Social Share Widget */
.widget .social_share {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
}
.widget .social_share li {
  width: calc(100% / 3);
  margin: 0;
  display: block;
  padding: 20px 0 12px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
}
.widget .social_share li i   { display: block; margin-bottom: 10px; font-size: 20px; }
.widget .social_share li + li { margin-left: 10px; }
.widget .social_share li.facebook  { background-color: #3b5999; }
.widget .social_share li.twitter   { background-color: #55acee; }
.widget .social_share li.instagram { background-color: #e4405f; }
.widget .social_share li a:hover   { color: #fff; }

/* Recent Posts Widget */
.widget .recent_post_item { margin: 0; padding: 0; list-style: none; }
.widget .recent_post_item li { display: block; }
.widget .recent_post_item li + li { margin-top: 20px; }
.widget .recent_post_item li.single-recent-post-item {
  display: flex;
  align-items: center;
}
.widget .recent_post_item li.single-recent-post-item .thumb {
  width: 70px; height: 70px;
  margin-right: 15px;
}
.widget .recent_post_item li.single-recent-post-item .content { flex: 1; }
.widget .recent_post_item li.single-recent-post-item .content .title {
  margin: 0;
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
  color: #fff;
  transition: all 0.3s ease-in;
}
.widget .recent_post_item li.single-recent-post-item .content .title a  { color: #fff; }
.widget .recent_post_item li.single-recent-post-item .content .title:hover { color: var(--main-color); }
.widget .recent_post_item li.single-recent-post-item .content .author-name {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 400;
  color: #555;
}
.widget .recent_post_item li.single-recent-post-item .content .author-name a {
  text-decoration: none;
  color: #999;
  transition: all 0.3s ease-in;
}
.widget .recent_post_item li.single-recent-post-item .content .author-name a:hover { color: var(--hover-color); }

/* Instagram Widget */
.widget_instagram_feeds ul { column-count: 3; }
.widget_instagram_feeds ul li {
  margin-bottom: 15px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.widget_instagram_feeds ul li:hover img { transform: scale(1.1); }
.widget_instagram_feeds ul li img { width: 100%; height: 100%; transition: all 0.3s ease-in; }

/* Contact Info Widget */
.contact_info_list { margin: 0; padding: 0; list-style: none; }
.contact_info_list li { display: block; }
.contact_info_list li.single-info-item { position: relative; margin-bottom: 20px; }
.contact_info_list li.single-info-item .details {
  padding-left: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: #a8a8a8;
}

.about_us_widget .footer-logo {
  margin-bottom: 30px; display: block; }

/* Testimonial Widget */
.widget-testimonial .icon {
  font-size: 70px;
  line-height: 60px;
  color: var(--main-color);
  opacity: 0.5;
  margin-bottom: 16px;
}
.widget-testimonial p { color: rgba(255,255,255,0.8); line-height: 1.6; }
.widget-testimonial .author-meta { display: flex; margin-top: 24px; }
.widget-testimonial .author-meta .thumb { margin-right: 20px; }
.widget-testimonial .author-meta .thumb img { max-width: 80px; height: 80px; border-radius: 50%; }
.widget-testimonial .author-meta .content { flex: 1; margin-top: 15px; }
.widget-testimonial .author-meta .content .name {
  font-size: 18px; line-height: 26px; font-weight: 700; color: #fff; margin-bottom: 0;
}
.widget-testimonial .author-meta .content .designation { color: rgba(255,255,255,0.8); font-size: 14px; }

/* Calendar Widget */
.widget.widget_calendar { padding-right: 24px; padding-left: 24px; }
.widget.footer-widget.widget_calendar table   { margin-bottom: 0; }
.widget.footer-widget.widget_calendar caption { padding-bottom: 0; }

/* ============================================================
   # NAVBAR
   ============================================================ */
.navbar.navbar-area.white .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.50)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar.navbar-area .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.50)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.header-area {
  position: sticky !important;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 999 !important;
  padding-right: 0 !important;
  background: rgba(24, 28, 38, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  min-height: 80px !important;
  transform: none !important;
  transition: none !important;
}

.header-area * {
  transition: none !important;
  transform: none !important;
}

.header-area img {
  max-width: 120px !important;
  height: auto !important;
  object-fit: contain !important;
  transition: none !important;
  transform: none !important;
}

.header-area .logo-wrapper {
  min-width: 120px;
  min-height: 80px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 991px) {
  .header-area .navbar-collapse:not(.active) .navbar-nav { opacity: 0; visibility: hidden; }
  .header-area .navbar-collapse.active .navbar-nav { opacity: 1; visibility: visible; }
}

/* Desktop: togglebar hides/shows the horizontal menu (collapse without .active) */
@media only screen and (min-width: 992px) {
  /* Same bar height with menu open or closed — avoids flex reflow moving the right icons */
  .navbar-area.navbar-expand-lg.nav-style-01 .nav-container {
    min-height: 90px;
    align-items: center !important;
    padding-left: 24px !important;
    padding-right: 32px !important;
  }

  .header-area.style-1 {
    min-height: 90px !important;
  }

  /* Keep language / search / toggle anchored to the right; independent of collapse visibility */
  .navbar-area.navbar-expand-lg.nav-style-01 .nav-container .nav-right-content {
    position: absolute !important;
    right: 15px;
    top: 0;
    bottom: 0;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    z-index: 2;
  }

  .navbar-area.navbar-expand-lg.nav-style-01 .nav-container .navbar-collapse {
    flex-grow: 1;
    /* Reserve space for logo + lang + theme + search + toggle (was 180px; theme toggle added ~52px) */
    padding-right: 260px;
    box-sizing: border-box;
    display: flex !important;
  }

  .navbar-area.navbar-expand-lg.nav-style-01 .nav-container .navbar-collapse.hidden {
    display: none !important;
    padding-right: 0;
  }
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15), 0 0 0 8px rgba(255,255,255,0.3);
  margin-left: 0 !important;
  margin-top: 5px;
  position: relative;
  top: 2px;
  transition: all 0.3s ease;
}
.logo-wrapper img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.logo-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2), 0 0 0 12px rgba(255,255,255,0.4);
}

.navbar-area { 
  padding: 0; 
  position: relative !important;
  transform: none !important;
  transition: none !important;
}
.navbar-area .nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 15px !important;
    transform: none !important;
    transition: none !important;
}
.navbar-area .nav-container .nav-right-content {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.navbar-area .nav-container .nav-right-content ul {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: center !important;
  gap: 12px !important;
}
.navbar-area .nav-container .nav-right-content ul li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #6a7795;
}
.navbar-area .nav-container .nav-right-content ul li:last-child { margin-right: 0; }
.navbar-area .nav-container .nav-right-content ul li a { color: #6a7795; transition: all 0.3s ease-in; }
.navbar-area .nav-container .nav-right-content ul li a:hover { color: var(--main-color); }

.navbar-area .nav-container .nav-right-content ul li.search {
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #000;
  text-align: center;
  transition: all 0.3s ease-in;
}
.navbar-area .nav-container .nav-right-content ul li.search:hover { color: var(--main-color); }

.navbar-area .nav-container .nav-right-content ul li.togglebar {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  color: #fff !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-area .nav-container .nav-right-content ul li.togglebar .line {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #fff !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  border-radius: 1px !important;
}

.navbar-area .nav-container .nav-right-content ul li.togglebar:hover {
  transform: scale(1.05) !important;
}



.navbar-area .nav-container .nav-right-content ul li.togglebar.active .line {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  width: 20px !important;
  height: 2px !important;
}

.navbar-area .nav-container .nav-right-content ul li.togglebar.active .line:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.navbar-area .nav-container .nav-right-content ul li.togglebar.active .line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.navbar-area .nav-container .navbar-brand .site-title {
  font-weight: 700;
  font-size: 30px;
  font-family: var(--heading-font);
  line-height: 90px;
  color: var(--heading-color);
}
.navbar-area .nav-container .navbar-collapse {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

.navbar-area .nav-container .navbar-collapse .navbar-nav {
  text-align: right;
  padding-right: 20px;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 90px;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li + li { margin-left: 55px; }
.navbar-area .nav-container .navbar-collapse .navbar-nav li.current-menu-item a { color: var(--main-color); }
.navbar-area .nav-container .navbar-collapse .navbar-nav li a {
  color: #fff;
  transition: all 0.3s ease-in;
  text-transform: capitalize;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li a:hover { color: var(--main-color); }

/* Dropdown */
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children {
  position: relative;
  z-index: 0;
  padding-right: 15px;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children::before {
  position: absolute;
  right: 0; top: 50%;
  content: "";
  font-family: "fontawesome";
  transform: translateY(-50%);
  transition: all 0.3s ease-in;
  font-size: 12px;
  color: #fff;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu {
  position: absolute;
  text-align: left;
  min-width: 220px;
  margin: 0; padding: 0;
  list-style: none;
  left: 0; top: 100%;
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.05);
  background-color: #fff;
  z-index: 9;
  border-bottom: 4px solid var(--main-color);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li {
  display: block;
  margin-left: 0;
  line-height: 24px;
  font-size: 16px;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li + li {
  border-top: 1px solid #e2e2e2;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li a {
  display: block;
  padding: 12px 30px;
  background-color: #fff;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  color: #999;
  text-transform: capitalize;
  transition: all 0.3s ease-in;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li a:hover {
  background-color: var(--main-color);
  color: #fff;
}

/* Nested dropdown */
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .menu-item-has-children {
  position: relative;
  padding-right: 0;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .menu-item-has-children::before {
  position: absolute;
  right: 15px; top: 50%;
  content: "";
  font-family: "fontawesome";
  transform: translateY(-50%);
  color: #fff;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .menu-item-has-children > .sub-menu {
  left: 100%;
  top: 20px;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .menu-item-has-children > .sub-menu .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .menu-item-has-children:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
}

/* Mobile Navbar */
@media only screen and (max-width: 991px) {
  .navbar-area .nav-container {
    position: relative;
    z-index: 0;
    min-height: 80px;
    padding: 20px 0;
  }
  .navbar-area .nav-container .navbar-brand .navbar-toggler {
    position: absolute;
    right: 10px;
    border: 1px solid #e2e2e2;
  }
  .navbar-area .nav-container .navbar-collapse .navbar-nav {
    display: block;
    margin-top: 20px;
    text-align: left;
  }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li {
    display: block;
    line-height: 30px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e2e2;
  }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li:last-child { border-bottom: none; }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li + li { margin-left: 0; }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children::before { top: 25px; right: 20px; }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:hover { padding-bottom: 0; }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:hover > .sub-menu {
    visibility: visible;
    height: auto;
    opacity: 1;
    background-color: transparent;
    border-bottom: none;
  }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu {
    position: initial;
    display: block;
    width: 100%;
    box-shadow: none;
    margin-left: 0;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    max-height: 250px;
    overflow-y: scroll;
    transition: height 500ms;
  }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li { padding: 0; }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li + li { border-top: none; }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li:first-child { border-top: 1px solid #e2e2e2; }
  .navbar-area .nav-container .navbar-collapse .navbar-nav li a { color: #656565; }

  .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.current-menu-item a,
 .navbar-area .nav-container .navbar-nav li a:hover,
.navbar-area .nav-container .navbar-nav li.active a {
    color: #faa603 !important;
}
  .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children::before { color: #656565; }
  .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li a { background-color: transparent; color: var(--paragraph-color); }
  .navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li a:hover { background-color: var(--main-color); color: #fff; }
  
  /* Mobile nav-right-content fixes */
  .navbar-area .nav-container .nav-right-content ul {
    gap: 8px;
  }
  
  .search-trigger {
    width: 34px;
    height: 34px;
  }
  
  .navbar-area .nav-container .nav-right-content ul li.togglebar {
    width: 35px !important;
    height: 35px !important;
  }
  
  .navbar-area .nav-container .nav-right-content ul li.togglebar .line {
    width: 16px !important;
  }
  
  .navbar-area .nav-container .nav-right-content ul li.togglebar.active .line {
    width: 18px !important;
  }
  
  /* Hide request quote on mobile */
  .info-bar-inner .right-content .request-quote {
    display: none;
  }
}

@media only screen and (max-width: 575px) {
  .navbar-area .nav-container { margin: 0 15px; }
}

/* Extra small devices */
@media only screen and (max-width: 480px) {
  .navbar-area .nav-container .nav-right-content ul {
    gap: 5px;
  }
  
  /* Hide language text, show only icon */
  .language-selector .dropdown-toggle span {
    display: none;
  }
  
  .language-selector .dropdown-toggle {
    padding: 4px 6px;
  }
  
  .search-trigger {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .navbar-area .nav-container .nav-right-content ul li.togglebar {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ============================================================
   # INFO BAR
   ============================================================ */
.info-bar-area.style-three .info-bar-inner { padding: 10px 0 18px; }
.info-bar-area.style-three .info-bar-inner .social-icon { margin-top: 15px; }
.info-bar-area.style-two .info-bar-inner { padding: 0; }
.info-bar-area .social-icon .title {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--heading-color);
}

.info-bar-inner { padding: 32px 0 35px; }
.info-bar-inner div { display: inline-block; }
.info-bar-inner .logo-wrapper .logo { margin-top: 5px; display: block; }
.info-bar-inner .logo-wrapper .site-title { font-size: 35px; font-weight: 700; margin-top: 10px; }
.info-bar-inner .right-content { float: right; }
.info-bar-inner .right-content .request-quote { margin-left: 40px; }
.info-bar-inner .right-content .request-quote .rq-btn {
  padding: 15px 25px;
  background-color: var(--main-color);
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
  text-transform: capitalize;
  display: block;
  position: relative;
  top: -5px;
  transition: all 0.3s ease-in;
}
.info-bar-inner .right-content .request-quote .rq-btn.blank {
  background-color: #f1f1f1;
  border-radius: 0;
  top: 0;
  padding: 15px 40px;
  color: var(--heading-color);
}
.info-bar-inner .right-content .request-quote .rq-btn.blank i { color: var(--main-color); transition: all 0.3s ease-in; }
.info-bar-inner .right-content .request-quote .rq-btn.blank:hover { background-color: var(--main-color); color: #fff; }
.info-bar-inner .right-content .request-quote .rq-btn.blank:hover i { color: #fff; }
.info-bar-inner .right-content .request-quote .rq-btn:hover { background-color: var(--secondary-color); }

.info-items { display: inline-block; margin: 0; padding: 0; list-style: none; }
.info-items li { display: inline-block; margin: 0 30px; }
.info-items li:first-child { margin-left: 0; }
.info-items li:last-child  { margin-right: 0; }
.info-items li:hover .single-info-item .content .title { color: var(--main-color); }
.info-items li .single-info-item { display: flex; align-self: flex-start; }
.info-items li .single-info-item .icon { margin-right: 20px; font-size: 40px; line-height: 40px; color: var(--main-color); }
.info-items li .single-info-item .content .title { font-size: 16px; line-height: 26px; font-weight: 700; margin-bottom: 0; transition: all 0.3s ease-in; }
.info-items li .single-info-item .content .details { font-size: 14px; line-height: 24px; }

.info-items-two { display: inline-block; margin: 10px 0 0; padding: 0; list-style: none; }
.info-items-two li { display: inline-block; margin: 0 30px; }
.info-items-two li:first-child { margin-left: 0; }
.info-items-two li:last-child  { margin-right: 0; }
.info-items-two li:hover .single-info-item .content .title { color: var(--main-color); }
.info-items-two li .single-info-item { display: flex; align-self: flex-start; }
.info-items-two li .single-info-item .icon { margin-right: 15px; font-size: 30px; line-height: 30px; color: var(--main-color); }
.info-items-two li .single-info-item .content { margin-top: 3px; }
.info-items-two li .single-info-item .content .title { font-size: 16px; line-height: 26px; font-weight: 700; margin-bottom: 0; transition: all 0.3s ease-in; }
.info-items-two li .single-info-item .content .details { margin-left: 5px; font-size: 14px; line-height: 24px; font-weight: 500; color: var(--paragraph-color); }

/* ============================================================
   # ERROR 404
   ============================================================ */
.error-404 { text-align: center; }
.error-404 .title { font-size: 200px; line-height: 160px; font-weight: 700; margin-bottom: 45px; color: var(--main-color); }
.error-404 .subtitle { font-size: 24px; line-height: 34px; font-weight: 600; margin-bottom: 20px; }
.error-404 .search-form { position: relative; margin-top: 36px; }
.error-404 .search-form .form-control { height: 54px; padding: 0 20px; }
.error-404 .search-form .submit-btn { position: absolute; right: 0; top: 0; width: 70px; height: 55px; padding: 0; text-align: center; }

/* ============================================================
   # HERO BANNER
   ============================================================ */
.hero-banner-area {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 30% center;
  z-index: 0;
  background-attachment: scroll;
}
.hero-banner-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 30%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.2) 100%);
  z-index: -1;
}
.hero-banner-area .container { padding-top: 100px; padding-bottom: 50px; }

.hero-banner-area .banner-text .banenr-subtitle {
  position: relative;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 500;
  color: #999;
}
.hero-banner-area .banner-text .banenr-subtitle::before {
  content: none;
  display: none;
}
.hero-banner-area .banner-text .banenr-title {
  margin-bottom: 35px;
  font-size: 65px;
  line-height: 80px;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: #fff;
}
.hero-banner-area .banner-text .banenr-title span {
  color: var(--main-color);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
}
.hero-banner-area .banner-text .banner-content {
  margin-bottom: 44px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #999;
}

@media (max-width: 992px) {
  .hero-banner-area {
      min-height: 80vh;
      /* Safari-də şəklin zoom olunmasını dayandıran əsas sətirlər: */
      background-attachment: scroll !important;
      background-size: cover;
      background-position: center center; /* Şəkli tam mərkəzə gətirir */
   }
  .hero-banner-area .container { padding-top: 120px; padding-bottom: 80px; }
}
@media (max-width: 768px) {
  .hero-banner-area { min-height: 70vh; }
}

/* Banner Slider */
.banner-slider { position: relative; }
.banner-slider .slider-nav { position: absolute; right: -120px; bottom: 20px; }
.banner-slider .slider-nav .slick-list { margin: 0 -10px; width: 720px; }
.banner-slider .slider-nav .slick-slide { margin: 0 10px; position: relative; }
.banner-slider .slider-nav .slick-slide::after {
  content: "";
  position: absolute;
  height: 100%; width: 100%;
  border: 9px solid white;
  left: 0; top: 0;
  opacity: 0;
  transition: 0.5s;
}
.banner-slider .slider-nav .slick-slide img { width: 100%; }
.banner-slider .slider-nav .slick-slide.slick-current::after { opacity: 0.44; }
.banner-slider .slider-nav .slick-slide.slick-current .btn { opacity: 0; visibility: hidden; }
.banner-slider .slider-nav .slick-slide.item { position: relative; }
.banner-slider .slider-nav .slick-slide.item .btn {
  width: auto;
  left: 50%; top: 50%;
  position: absolute;
  padding: 0;
  transition: 0.5s;
  margin: -30px 0 0 -30px;
}
.banner-slider .slider-nav .slick-arrow,
.banner-slider .slider-nav .slick-dots { display: none !important; }

/* Hide play icons in slider nav */
.slider-nav .item img.btn,
.slider-nav .item .play-btn,
.slider-nav .item .video-play-btn { display: none !important; }

/* ============================================================
   # ABOUT AREA
   ============================================================ */
.about-area { background: #090909; }
.about-area.about-intro-section {
  padding: 170px 0 120px;
  position: relative;
  z-index: 1;
}
.about-area .about-intro-top-pill {
  margin: 0 0 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #f6debf;
  border-color: #c08c5f;
  background: rgba(10, 10, 10, 0.78);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-weight: 700;
}

/* Haqqımda intro: pill centered over photo */
.about-area .about-intro-thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.about-area .about-intro-thumb-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.about-area .about-intro-pill-on-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  text-align: center;
  max-width: calc(100% - 2rem);
  background: rgba(9, 9, 9, 0.75);
  border-color: #bc885d;
  color: #e8c9a8;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

@media only screen and (max-width: 991px) {
  .about-area.about-intro-section {
    padding: 140px 0 100px;
  }
  .about-area .about-intro-top-pill {
    margin-bottom: 18px;
  }
}

.about-area .about-info p { margin-bottom: 15px; font-size: 18px; line-height: 30px; color: #4a4a4a; }
.about-area .section-title .title { color: #fff; }
.about-area .about-inner p,
.about-area .single-works-wrap p { 
  color: #4a4a4a; 
  font-size: 18px; 
  line-height: 28px;
  margin-top: 10px;
}
.about-area .single-works-wrap h6 { 
  color: #222; 
  font-size: 24px; 
  font-weight: 700; 
}

.progress-item .progress-count-wrap { position: absolute; top: -35px; right: -19px; }
.progress-item.add-progress-start .progress-count-wrap { position: absolute; top: -35px; right: -5px; }
.progress-item.add-progress-full  .progress-count-wrap { position: absolute; top: -35px; right: 11px; }
.progress-item .counting-icons { display: inline-block; color: #fff; position: absolute; font-size: 18px; top: 20px; font-weight: 700; z-index: 1; }
.progress-item .progress-bg { position: relative; border-radius: 0; background: #1F1F1F !important; height: 2px !important; }
.progress-item .progress-bg .progress-rate {
  position: absolute; left: 0; top: 0;
  width: 0; border-radius: 0;
  background: var(--main-color);
  transition: 2.5s;
  height: 70px !important;
  transform: translateY(-50%);
}

.single-progressbar { padding-top: 35px; position: relative; margin-bottom: 63px; }
.single-progressbar h4 { position: absolute; font-size: 18px; font-weight: 700; text-transform: capitalize; z-index: 1; left: 30px; top: 50%; margin: 6px 0 0; }
.single-progressbar .percentCount { color: #fff; position: absolute; right: -65px; top: 20px; font-weight: 700; z-index: 1; }
.single-progressbar .progressbar  { background: #1F1F1F !important; height: 2px !important; }
.single-progressbar .proggress    { height: 70px !important; position: absolute; top: 0; transform: translateY(-50%); }

/* ============================================================
   # HOME SECTION PILL (Portfolio / Biography labels)
   ============================================================ */
.home-section-pill {
  display: inline-block;
  border: 1px solid #8b5e3c;
  border-radius: 50px;
  color: #8b5e3c;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none !important;
}
a.link-no-underline .home-section-pill:hover {
  border-color: #a6734a;
  color: #a6734a;
}
.biography-section-heading {
  text-align: center;
  width: 100%;
  margin-bottom: 32px;
}

/* ============================================================
   # BIOGRAPHY AREA
   ============================================================ */
.biography-area {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.biography-slider {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: none;
  transition: all 0.3s ease;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.biography-slider:hover { transform: translateY(-10px); box-shadow: none; }

.biography-slider-inner { 
  position: relative; 
  width: 100%; 
  flex: 1;
  min-height: 400px; 
  overflow: hidden; 
}

.slide-item { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease-in-out; z-index: 1; }
.slide-item.active { opacity: 1; z-index: 2; }
.slide-item img { width: 100%; height: 100%; object-fit: cover !important; transition: transform 0.5s ease; }
.biography-slider:hover .slide-item.active img { transform: scale(1.05); }

.slide-caption {
  position: absolute;
  bottom: 20px; left: 20px;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 8px 20px;
  border-radius: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  z-index: 3;
}

.slider-controls {
  position: absolute;
  bottom: 20px; right: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 10;
}
.prev-btn, .next-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
  transition: all 0.3s ease;
}
.prev-btn:hover, .next-btn:hover { background: var(--main-color); color: #fff; transform: scale(1.1); }

.slider-dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.3s ease; }
.dot.active { width: 25px; border-radius: 10px; background: #fff; }


/* Reverted Biography Styles */
.biography-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  gap: 40px;
}
.biography-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.biography-slider {
  height: 100%;
}

.bio-info {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
.bio-name {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px 0;
  line-height: 1.2;
}
.title-badge { display: flex; gap: 10px; margin-bottom: 25px; }
.title-badge span { color: var(--main-color); font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }

.bio-quote { margin-bottom: 30px; }
.bio-quote p { font-size: 18px; color: var(--paragraph-color); line-height: 1.8; }

.bio-text p { line-height: 1.8; color: var(--paragraph-color); margin-bottom: 30px; }

.bio-stats { display: flex; gap: 40px; }
.stat-item { text-align: left; }
.stat-number { display: block; font-size: 36px; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 8px; }
.stat-label  { display: block; font-size: 14px; color: var(--main-color); text-transform: uppercase; letter-spacing: 1px; }

/* Biography responsive */
@media (max-width: 992px) {
  .biography-row {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  
  .biography-slider {
    min-height: 400px;
    width: 100%;
    max-width: 500px;
  }
  
  .biography-slider-inner { height: 400px; }
  
  .bio-info {
    text-align: center;
    width: 100%;
  }
  
  .bio-name { font-size: 32px; }
  .bio-stats { gap: 15px; justify-content: center; }
  .stat-item { padding: 10px 15px; }
  .stat-number { font-size: 24px; }
}
@media (max-width: 768px) {
  .biography-slider {
    min-height: 350px;
    max-width: 100%;
  }
  
  .biography-slider-inner { height: 350px; }
  
  .slider-controls { bottom: 10px; right: 10px; }
  .title-badge span { font-size: 12px; padding: 4px 12px; }
  .bio-quote p { font-size: 14px; }
  
  .bio-stats {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* ============================================================
   # WORK PROGRESS
   ============================================================ */
.work-progress-area .single-work-progress { margin-bottom: 30px; }
.work-progress-area .single-work-progress .porgress-count {
  margin-bottom: 30px;
  font-size: 60px;
  line-height: 1;
  color: var(--main-color);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  opacity: 0.4;
  transition: all 0.5s;
}
.work-progress-area .single-work-progress h3 { margin-bottom: 15px; letter-spacing: -1px; font-size: 26px; font-weight: 700; text-transform: capitalize; color: #111; }
.work-progress-area .single-work-progress p { margin-bottom: 37px; font-size: 16px; line-height: 26px; color: #777; }
.work-progress-area .single-work-progress .read-btn { display: inline-block; }
.work-progress-area .single-work-progress .read-btn .btn-icon {
  display: inline-block;
  width: 50px; height: 50px; line-height: 50px;
  background: #fff;
  box-shadow: 16px 0 32px rgba(0,0,0,0.1);
  font-size: 18px; color: #777;
  text-align: center;
  transition: all 0.5s;
}
.work-progress-area .single-work-progress .read-btn .btn-text {
  font-size: 16px; font-weight: 700;
  text-transform: capitalize; color: #111;
  margin-left: 0; opacity: 0;
  transition: all 0.5s;
}
.work-progress-area .single-work-progress .read-btn:hover .btn-icon { background: var(--main-color); color: #fff; }
.work-progress-area .single-work-progress .read-btn:hover .btn-text { margin-left: 10px; opacity: 1; }
.work-progress-area .single-work-progress:hover .porgress-count { opacity: 1; }
.work-progress-area .single-work-progress:hover .read-btn .btn-icon { background: var(--main-color); color: #fff; }
.work-progress-area .single-work-progress:hover .read-btn .btn-text { margin-left: 10px; opacity: 1; }

.single-works-wrap { text-align: center; margin-bottom: 30px; }
.single-works-wrap .thumb {
  position: relative;
  height: 250px; width: 250px;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  background: #fdfdfd;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(188, 136, 93, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 !important;
}
.single-works-wrap .thumb img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  clip-path: circle(50% at 50% 50%);
}
.single-works-wrap:hover .thumb {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(188, 136, 93, 0.4), inset 0 0 25px rgba(255, 255, 255, 0.2);
  border-color: var(--main-color);
}
.single-works-wrap:hover .thumb img {
  transform: scale(1.1);
  filter: brightness(1.1) contrast(1.05);
}
.single-works-wrap .thumb .number {
  height: 40px; width: 40px;
  border-radius: 50%;
  background: var(--heading-color);
  box-shadow: 0 0 32px rgba(0,0,0,0.06);
  line-height: 40px;
  text-align: center;
  font-size: 14px; font-weight: 700;
  position: absolute; right: 5px; top: 5px;
  color: #fff;
}
.single-works-wrap h6 { 
  margin-top: 40px; 
  margin-bottom: 10px;
}

/* ============================================================
   # FADE DIVIDER
   ============================================================ */
.fade-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #815937 50%, transparent 100%);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ============================================================
   # SERVICE AREA
   ============================================================ */
.service-area { 
  padding-top: 40px; 
  background: #090909;
}

/* Ana səhifə nailiyyət bloku — əvvəl fon təyin olunmayıb, şəffaf zonada açıq görünürdü */
.achievement-area {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: #090909;
}

/* İç-içə hero tam viewport məcburiyyətini götür — nailiyyət üçün məntiqi hündürlük */
.achievement-area .hero-banner-area {
  min-height: 0 !important;
  display: block;
  align-items: stretch;
  padding: 70px 0 55px;
}

@media (max-width: 992px) {
  .achievement-area .hero-banner-area {
    padding: 55px 0 45px;
  }
}

/* Ana səhifə biografiya — şəffaf boşluq olmasın */
.page-background .biography-area {
  margin-top: 0;
  margin-bottom: 0;
  background-color: #090909;
}

.page-background > section {
  margin-left: 0;
  margin-right: 0;
}

.service-area .single-service { margin-bottom: 30px; }
.service-area .single-service .service-thumbnail { position: relative; overflow: hidden; }
.service-area .single-service .service-thumbnail img { width: 100%; height: auto; object-fit: cover; transition: all 0.3s ease-in; }
.service-area .single-service .service-thumbnail .service-overlay {
  display: flex; justify-content: center; align-items: center;
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease-in;
}
.service-area .single-service .service-thumbnail .service-overlay .view-btn { color: #fff; font-size: 30px; transition: all 0.3s ease-in; }
.service-area .single-service .service-thumbnail .service-overlay .view-btn:hover { color: var(--main-color); }
.service-area .single-service:hover .service-thumbnail img { transform: scale(1.1) rotate(-7deg); }
.service-area .single-service:hover .service-thumbnail .service-overlay { opacity: 1; transform: scale(1); }
.service-area .more-work-btn { transform: translateY(-15px); }
/* ============================================================
   # PORTFOLIO / GALLERY
   ============================================================ */

/* Portfolio Category Filter */
.portfolio-filter {
  margin-bottom: 50px;
  position: relative;
}

.filter-buttons {
  display: inline-flex;
  gap: 20px;
  background: transparent;
  padding: 12px 20px;
  border-radius: 70px;
  border: 3px solid #d4af37;
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
  position: relative;
  overflow: hidden;
}

.filter-buttons::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
  opacity: 0.1;
  z-index: 0;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.category-btn {
  background: transparent;
  border: none;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.category-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: none;
  color: #d4af37;
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.8);
}

.category-btn.active {
  background: #BC885D;
  color: #fff;
  transform: none;
  font-weight: 700;
  text-shadow: none;
  border: 2px solid #BC885D;
}

.category-btn.active::before {
  display: none;
}

/* Ripple effect on click - disabled */
.category-btn::after {
  display: none;
}

.category-btn:active::after {
  display: none;
}

/* Portfolio Categories */
.portfolio-category {
  width: 100%;
  background: transparent;
}

.category-filters {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.gallery-item { margin-bottom: 30px; transition: all 0.3s ease; }
.gallery-item:hover { transform: translateY(-10px); }
.gallery-item .thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 320px;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(188, 136, 93, 0.25);
  transition: var(--transition);
}
.gallery-item .thumb img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover !important; 
  transition: transform 0.5s ease; 
}
.gallery-item:hover .thumb img { transform: scale(1.1); }

.gallery-item .thumb .video-play-btn {
  position: absolute;
  top: 50% !important; 
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px; height: 60px;
  background: rgba(188,136,93,0.9);
  border-radius: 50%;
  display: flex !important;
  align-items: center !important; 
  justify-content: center !important;
  color: #fff;
  font-size: 20px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 5;
  border: none;
  line-height: normal;
}
.gallery-item:hover .thumb .video-play-btn { 
  opacity: 1; 
  transform: translate(-50%, -50%) scale(1.1) !important; 
}
.gallery-item .thumb .video-play-btn:hover { background: #fff; color: #BC885D; }

.gallery-item .thumb .youtube-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
}

.gallery-item:hover .thumb .youtube-overlay {
  opacity: 1;
}

.gallery-item .thumb .youtube-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background: #FF0000;
  border-radius: 50%;
  color: white;
  font-size: 32px;
  text-decoration: none;
  transition: all 0.3s ease;
  transform: scale(0.8);
}

.gallery-item:hover .thumb .youtube-btn {
  transform: scale(1);
}

.gallery-item .thumb .youtube-btn:hover {
  background: #CC0000;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

.gallery-item .thumb .youtube-btn i {
  margin-left: 3px; /* Adjust YouTube icon positioning */
}

.gallery-details { margin-top: 20px; padding: 0 10px; text-align: center; }
.project-category { font-size: 14px; color: #BC885D; margin-bottom: 8px; font-weight: 500; }
.project-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.project-title a { color: #fff; transition: color 0.3s ease; }
.project-title a:hover { color: #BC885D; }
.project-desc { font-size: 14px; color: #888; line-height: 1.5; }

.section-description { color: #999; font-size: 16px; margin-top: 10px; text-align: center; }

/* Portfolio Details */
.portfolio-details-area p span {
  font-size: 80px; font-weight: 700;
  color: var(--heading-color);
  height: 120px; width: 120px;
  background-color: #fff;
  display: inline-block;
  line-height: 120px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  flex: none; text-align: center;
  margin-right: 40px; margin-bottom: 20px;
}
.portfolio-details-area h3 { font-size: 26px; font-weight: 700; margin-bottom: 16px; }
.portfolio-details-area blockquote { border: 2px solid #F4F4F4 !important; padding: 50px 50px 39px !important; margin: 41px 0 45px; }
.portfolio-details-area blockquote img { margin-right: 30px; }
.portfolio-details-area blockquote p { font-size: 30px; font-weight: 700; color: var(--heading-color); }
.portfolio-details-area blockquote cite { font-size: 14px; font-weight: 700; color: var(--heading-color); font-style: normal; }
.portfolio-details-area blockquote cite span { color: var(--paragraph-color); font-weight: 400; }

.portfolio-inner { position: relative; margin: 0 50px; }
.portfolio-inner .portfolio-details-wrap {
  background-color: #fff;
  padding: 20px 50px;
  position: absolute;
  bottom: 0; width: 100%;
}

@media (max-width: 992px) {
  .gallery-item .thumb img { height: 250px; }
  .project-title { font-size: 18px; }
}
@media (max-width: 768px) {
  .gallery-item .thumb img { height: 220px; }
  .project-category { font-size: 12px; }
  .project-title { font-size: 16px; }
  .project-desc { font-size: 12px; }
}

/* ============================================================
   # LETS WORK
   ============================================================ */
.lets-work-area {
  padding: 130px 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.lets-work-area .lets-work-title {
  font-size: 6vw; line-height: 1;
  font-weight: 700; color: #fff;
  text-align: center;
}
.lets-work-area .lets-work-title span {
  color: var(--main-color);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
}

/* ============================================================
   # FUN FACTS
   ============================================================ */
.single-fact-wrap { margin-bottom: 30px; }
.single-fact-wrap h2 { font-size: 60px; font-weight: 700; margin-bottom: -12px; }
.single-fact-wrap p { color: #999; }

.fun-fact-area {
    position: relative;
    overflow: hidden;
    min-height: 400px; /* Minimum hündürlük */
}
.fun-fact-area .fun-fact-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}
/* Mobil versiya (768px-dən kiçik) */
@media only screen and (max-width: 768px) {
    .fun-fact-area {
        min-height: 300px; /* Mobil üçün azaldılmış hündürlük */
    }
    
    .fun-fact-area .fun-fact-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; /* cover əvəzinə contain - şəkil tam göstərilir */
        object-position: center center; /* Mərkəzləşdir */
        background-size: contain; /* contain ilə zoom olmur */
    }
}

/* Çox kiçik ekranlar (480px-dən kiçik) */
@media only screen and (max-width: 480px) {
    .fun-fact-area {
        min-height: 250px;
    }
    
    .fun-fact-area .fun-fact-bg {
        object-fit: contain;
        object-position: top center;
    }
}
/* Background image ilə gələn div üçün düzəliş */
.fun-fact-area .hero-banner-area {
    position: relative;
    width: 100%;
    height: 500px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Mobil versiya (768px-dən kiçik) */
@media only screen and (max-width: 768px) {
    .fun-fact-area {
        height: auto;
        min-height: 0;
        background: #0a0a0a; /* Fallback rəng */
    }
    
    .fun-fact-area .hero-banner-area {
        min-height: 0;
        background-size: cover !important; /* cover -> contain */
        background-position: center center !important;
        padding: 40px 0;
    }
}

/* Çox kiçik ekranlar (480px-dən kiçik) */
@media only screen and (max-width: 480px) {
    .fun-fact-area .hero-banner-area {
        height: 350px;
        background-size: cover !important;
        background-position: center !important;
    }
}



.fun-facts-area { background: #111111; }
.fun-facts-area .video-area { position: relative; }
.fun-facts-area .video-area .video-play-btn {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 140px; height: 140px; line-height: 140px;
  border-radius: 50%;
  background: #fff;
  margin: auto;
  font-size: 20px;
  color: var(--main-color);
  border: none;
  transition: all 0.3s ease-in;
}
.fun-facts-area .video-area .video-play-btn::before {
  position: absolute;
  content: "";
  width: 100%; height: 100%;
  left: 0; top: 0;
  border-radius: 50%;
  transform: scale(1.3);
  border: 2px solid rgba(255,255,255,0.3);
}
.fun-facts-area .video-area .video-play-btn:hover { color: #fff; background: var(--main-color); }
.fun-facts-area .fun-fact-info { padding: 50px 30px 50px 70px; }
.fun-facts-area .fun-fact-content p { font-size: 18px; line-height: 30px; color: #999; }
.fun-facts-area .feature-area .single-feature { display: flex; align-items: center; }
.fun-facts-area .feature-area .single-feature .feature-left {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px;
  background: #fff;
  margin-right: 15px;
}
.fun-facts-area .feature-area .single-feature .feature-left h2 { font-size: 50px; font-weight: 700; color: #111; margin: 0; line-height: 1; }
.fun-facts-area .feature-area .single-feature .feature-left h2 sub { bottom: 0; font-size: 18px; color: var(--main-color); }
.fun-facts-area .feature-area .single-feature .feature-title { font-size: 18px; line-height: 26px; font-weight: 500; text-transform: capitalize; color: #fff; }

.video-icon {
  position: relative;
  height: 200px; width: 200px;
  display: inline-block;
  border-radius: 50%;
  border: 4px solid #fff;
  padding: 30px;
  margin-bottom: 52px;
}
.video-icon:hover .video-play-btn { background: var(--main-color); color: #fff; }
.video-icon .video-play-btn {
  position: initial;
  transform: none;
  height: 100%; width: 100%;
  border: none;
  line-height: 135px;
  background: #fff;
  font-size: 24px;
  color: #111;
}

/* Fancy Cards (Fun Facts) */
.fancy-card {
  background: linear-gradient(135deg, #1e1e2f, #2a2a40);
  padding: 40px 20px;
  border-radius: 15px;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.fancy-card::before {
  content: "";
  position: absolute;
  width: 150%; height: 150%;
  background: rgba(255,255,255,0.05);
  top: -50%; left: -50%;
  transform: rotate(25deg);
}
.fancy-card:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.count-num { font-size: 42px; font-weight: bold; color: #ffcc00; }
.fancy-card p { font-size: 18px; margin-top: 10px; }

/* ============================================================
   # TESTIMONIAL
   ============================================================ */
.testimonial-area .testimonial-slide { position: relative; z-index: 1; }
.testimonial-area .testimonial-slide .owl-controls .owl-nav div {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 60px; height: 60px; line-height: 60px;
  background: #fff; text-align: center;
  box-shadow: 16px 0 32px rgba(0,0,0,0.1);
  font-size: 25px; transition: all 0.3s ease-in;
}
.testimonial-area .testimonial-slide .owl-controls .owl-nav div:hover { background: var(--main-color); color: #fff; }
.testimonial-area .testimonial-slide .owl-controls .owl-nav .owl-prev { left: -80px; }
.testimonial-area .testimonial-slide .owl-controls .owl-nav .owl-next { right: -80px; }
.testimonial-area .testimonial-slide .owl-controls .owl-dots { text-align: center; margin-top: 35px; }
.testimonial-area .testimonial-slide .owl-controls .owl-dots .owl-dot {
  height: 6px; width: 24px;
  border-radius: 40px;
  background-color: rgba(255,255,255,0.04);
  display: inline-block; margin: 0 5px;
  transition: all 0.3s ease-in;
}
.testimonial-area .testimonial-slide .owl-controls .owl-dots .owl-dot.active { width: 44px; background-color: var(--main-color); }

.testimonial-area .single-testimonial {
  text-align: left;
  background-color: #000;
  padding: 41px 77px 50px 40px;
  background-image: url(../img/testimonial/bg.png);
  background-position: right bottom;
  background-repeat: no-repeat;
}
.testimonial-area .single-testimonial p { color: #B2B2B2; font-size: 20px; margin-bottom: 25px; }
.testimonial-area .single-testimonial .clint-info .clint-img img { width: auto; border-radius: 50%; }
.testimonial-area .single-testimonial .clint-info .clint-name { margin: 0; font-size: 18px; font-weight: 700; text-transform: capitalize; }
.testimonial-area .single-testimonial .clint-info .clint-pro { margin: 0; font-size: 14px; color: var(--main-color); line-height: initial; margin-top: 5px; }

/* ============================================================
   # TEAM
   ============================================================ */
.single-team-wrap { margin-bottom: 30px; }
.single-team-wrap:hover .thumb { border: 1px solid #171717; }
.single-team-wrap:hover .wrap-details .social-area { opacity: 1; }
.single-team-wrap .thumb {
  border: 1px solid transparent;
  display: inline-block;
  transition: all 0.3s ease-in;
  border-radius: 50%;
  padding: 20px;
}
.single-team-wrap .thumb img { border-radius: 50%; }
.single-team-wrap .wrap-details { margin-top: 10px; }
.single-team-wrap .wrap-details p { margin-bottom: 5px; }
.single-team-wrap .wrap-details h5 { margin-bottom: 15px; }
.single-team-wrap .wrap-details .social-area { opacity: 0; transition: all 0.3s ease-in; }

/* ============================================================
   # BRAND LOGO
   ============================================================ */
.brand-logo-area .brand-list {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  margin: 0; padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-logo-area .brand-list:last-child { border-bottom: none; }
.brand-logo-area .brand-list .single-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%; height: 140px;
  list-style: none; text-align: center;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.brand-logo-area .brand-list .single-brand:first-child { text-align: left; border-left: none; justify-content: start; }
.brand-logo-area .brand-list .single-brand:last-child { text-align: right; justify-content: flex-end; }

.single-brand img { width: 250px; height: 150px; object-fit: contain; padding: 10px; }

/* ============================================================
   # INSTAGRAM
   ============================================================ */
.instagram-area { position: relative; }
.instagram-area .primary-btn { position: absolute; top: 50%; left: 50%; z-index: 9; transform: translate(-50%, -50%); }

/* ============================================================
   # PRICING
   ============================================================ */
.single-pricing-wrap { border: 2px solid #e9e9e9; padding: 60px; margin-bottom: 30px; }
.single-pricing-wrap .price { border-bottom: 1px solid #eaeaea; margin-top: -7px; padding-bottom: 10px; margin-bottom: 31px; }
.single-pricing-wrap .price span { display: inline-block; }
.single-pricing-wrap .price h2 { display: inline-block; font-size: 60px; }
.single-pricing-wrap .pricing-list { padding: 0; margin: 0 0 33px; list-style: none; }
.single-pricing-wrap .pricing-list li { font-size: 16px; }
.single-pricing-wrap .pricing-list li.unable { color: #cdcdcd; }
.single-pricing-wrap .pricing-list li i { margin-right: 20px; }
.single-pricing-wrap .more-work-btn { width: 100%; }
.single-pricing-wrap .primary-btn { background: var(--heading-color); }

.pricing-tabs .nav-tabs { display: inline-block; border: none; }
.pricing-tabs .nav-tabs .nav-item {
  border: none; border-radius: 0;
  display: inline-block;
  height: 60px; line-height: 60px;
  padding: 0; width: 130px; text-align: center;
  box-shadow: 0 0 32px rgba(0,0,0,0.06);
  margin-left: -5px; color: var(--heading-color);
}
.pricing-tabs .nav-tabs .nav-item.active { background: var(--heading-color); color: #fff; }

/* ============================================================
   # EXPERIENCED / SKILLS
   ============================================================ */
.about-area .skills-circle-thumb {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.about-area .skills-circle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.about-skills-circle-card h6 { margin-top: 0.5rem; }

.single-experienced-wrap {
  border: 2px solid #f2f2f2;
  box-shadow: 8px 13.856px 32px 0 rgba(0,0,0,0.06);
  width: 166px; height: 166px;
  display: block; text-align: center;
  margin: auto auto 30px;
  transition: 0.5s;
}
.single-experienced-wrap .thumb { margin-top: 30px; margin-bottom: 16px; }
.single-experienced-wrap .thumb img { height: 70px; filter: contrast(0.01); transition: 0.5s; }
.single-experienced-wrap h6 { color: var(--paragraph-color); transition: 0.5s; }
.single-experienced-wrap:hover { box-shadow: none; }
.single-experienced-wrap:hover h6 { color: var(--heading-color); }
.single-experienced-wrap:hover .thumb img { filter: contrast(1); }

.single-bio-details h6 span { color: var(--main-color); font-weight: 400; }

/* ============================================================
   # CONTACT AREA
   ============================================================ */
.contact-area .contact-details ul { margin: 0; padding: 0; }
.contact-area .contact-details ul li {
  list-style: none;
  padding: 20px 0 0;
  border-bottom: 1px solid #e4e4e4;
}
.contact-area .contact-details ul li:first-child { padding-top: 0; }
.contact-area .contact-details ul li:last-child   { border-bottom: none; }
.contact-area .contact-details ul li .icon {
  margin-right: 25px;
  height: 80px; width: 80px;
  border-radius: 50%; line-height: 80px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0,0,0,0.16);
}
.contact-area .contact-details ul li h4 { margin: 0 0 8px; font-size: 18px; font-weight: 700; text-transform: capitalize; color: #111; }
.contact-area .contact-details ul li p  { margin: 0; font-size: 14px; color: #777; line-height: 1; }
.contact-area .contact-right { padding: 80px 60px; background: #f7f7f7; }

.location-map .mapouter { position: relative; text-align: right; height: 600px; width: 100%; }
.location-map .gmap_canvas { overflow: hidden; background: none !important; height: 600px; width: 100%; }
.location-map iframe { width: 100%; height: 600px; border: 0; }

/* ============================================================
   # BLOG AREA
   ============================================================ */
.blog-area {
  padding-top: 30px;
  padding-bottom: 90px;
}

.blog-area .container,
.blog-details-area .container {
  max-width: 1400px;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) {
  .blog-area .container,
  .blog-details-area .container { padding-left: 20px; padding-right: 20px; }
}

/* Single Blog Card */
.single-blog { margin-bottom: 30px; }
.single-blog .blog-thumbnail { position: relative; }
.single-blog .blog-thumbnail .catagory-name {
  display: inline-block; position: absolute;
  bottom: 0; left: 20px;
  padding: 10px 20px;
  background: #fff;
  font-size: 14px; line-height: 1; font-weight: 700; text-transform: capitalize; color: #111;
  transition: all 0.3s ease-in;
}
.single-blog .blog-thumbnail .catagory-name:hover { color: var(--main-color); }
.single-blog .blog-thumbnail .blog-date {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 60px; height: 60px;
  position: absolute; bottom: -30px; right: 20px;
  background: #fff;
  box-shadow: 16px 0 32px rgba(0,0,0,0.1);
  text-align: center;
}
.single-blog .blog-thumbnail .blog-date h3 { font-size: 24px; font-weight: 700; color: #111; margin: 0; }
.single-blog .blog-thumbnail .blog-date span { font-size: 14px; line-height: 1; color: #777; text-transform: capitalize; }
.single-blog .blog-thumbnail a { display: block; overflow: hidden; }
.single-blog .blog-thumbnail img { width: 100%; height: auto; transition: all 0.5s linear; }
.single-blog .blog-info {
  padding: 30px 20px;
  background: #fff;
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.06);
  border: 2px solid #e9e9e9; border-top: none;
}
.single-blog .blog-info .author-name { margin-bottom: 15px; font-size: 14px; color: #111; }
.single-blog .blog-info .author-name a { color: #111; transition: all 0.3s ease-in; }
.single-blog .blog-info .author-name a:hover { color: var(--main-color); }
.single-blog .blog-info .post-title { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 0; }
.single-blog .blog-info .post-title a { color: #111; transition: all 0.3s ease-in; }
.single-blog .blog-info .post-title a:hover { color: var(--main-color); }
.single-blog:hover .blog-thumbnail img { transform: scale(1.1); }

/* Blog List Item */
.single-blog-list-item .blog-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  margin-bottom: 25px;
}
.single-blog-list-item .blog-thumb a   { display: inline-block; }
.single-blog-list-item .blog-thumb img { width: 100%; height: 381px; object-fit: cover; transition: transform 0.3s ease; }
.single-blog-list-item .blog-thumb img:hover { transform: scale(1.03); }

.single-blog-list-item .blog-thumb .category {
  position: absolute; left: 20px; bottom: 20px;
  background: #fff; padding: 8px 25px;
  border-radius: 30px;
  font-size: 14px; font-weight: 700; color: #111;
  z-index: 2; transition: all 0.3s ease; text-decoration: none;
}
.single-blog-list-item .blog-thumb .category:hover { background: var(--main-color); color: #fff; }

.single-blog-list-item .blog-thumb .author {
  position: absolute; right: 20px; bottom: 20px;
  background: #fff; padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px; font-weight: 600; color: #111;
  display: flex; align-items: center; gap: 10px;
  z-index: 2; transition: all 0.3s ease; text-decoration: none;
}
.single-blog-list-item .blog-thumb .author:hover { background: var(--main-color); color: #fff; }
.single-blog-list-item .blog-thumb .author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.single-blog-list-item .blog-thumb .video-play-btn {
  position: absolute;
  height: 80px; width: 80px;
  background: #fff;
  display: inline-block;
  left: 50%; top: 50%;
  border-radius: 10px;
  text-align: center;
  line-height: 80px;
  font-size: 20px; border: 0;
  color: var(--heading-color);
}

.single-blog-list-item .blog-details {
  padding: 50px;
  border: 2px solid #e8e8e8;
}
.single-blog-list-item .blog-details .blog-title h2 { font-weight: 700; line-height: initial; margin-bottom: 13px; color: goldenrod; transition: all 0.3s ease-in; }
.single-blog-list-item .blog-details .blog-title h2:hover { color: var(--main-color); }
.single-blog-list-item .blog-details .blog-content p { font-size: 16px; }
.single-blog-list-item .blog-details .blog-meta { margin-top: 25px; border-top: 1px solid #e7e7e7; font-size: 14px; padding-top: 20px; display: flex; gap: 25px; }
.single-blog-list-item .blog-details .blog-meta span { border-right: 1px solid #dcdcdc; margin-right: 30px; padding-right: 26px; }
.single-blog-list-item .blog-details .blog-meta i,
.single-blog-list-item .blog-details .blog-meta svg { margin-right: 8px; }

@media (max-width: 992px) { .single-blog-list-item .blog-thumb img { height: 280px; } }
@media (max-width: 768px) {
  .single-blog-list-item .blog-thumb img { height: 220px; }
  .single-blog-list-item .blog-thumb .category,
  .single-blog-list-item .blog-thumb .author { padding: 5px 15px; font-size: 12px; }
  .single-blog-list-item .blog-thumb .author img { width: 25px; height: 25px; }
  .single-blog-list-item .blog-details .blog-title h2 { font-size: 20px; }
}
@media (max-width: 576px) { .single-blog-list-item .blog-thumb img { height: 180px; } }

/* Blog Thumb Overlay - Image height constraint */
.blog-thumb-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}
.blog-thumb-overlay > a > img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
}
@media (max-width: 992px) { .blog-thumb-overlay > a > img { max-height: 350px; } }
@media (max-width: 768px) { .blog-thumb-overlay > a > img { max-height: 300px; } }
@media (max-width: 576px) { .blog-thumb-overlay > a > img { max-height: 250px; } }

/* Blog Details */
.blog-details-area .single-blog-list-item .blog-details {
  padding: 50px;
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.06);
}
.blog-details-area .single-blog-list-item .blog-details .category {
  border: 2px solid #e8e8e8;
  height: 30px; padding: 0 18px; line-height: 28px;
  font-size: 14px; font-weight: 700; display: inline-block;
}
.blog-details-area .single-blog-list-item .blog-details h3 { font-size: 30px; }
.blog-details-area .single-blog-list-item .blog-details .blog-article {
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  padding: 35px 0 38px;
}
.blog-details-area .single-blog-list-item .blog-details .blog-article h3 { margin-bottom: 30px; }
.blog-details-area .single-blog-list-item .blog-details .blog-list-inner {
  display: inline-block; padding: 0; margin: 13px 0 0; list-style: none;
}
.blog-details-area .single-blog-list-item .blog-details .blog-list-inner li { font-size: 16px; }
.blog-details-area .single-blog-list-item .blog-details .blog-list-inner li i { margin-right: 10px; }
.blog-details-area .single-blog-list-item .blog-details blockquote {
  text-align: center;
  border: 2px solid #e8e8e8;
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.06);
  padding: 50px 40px;
  position: relative;
  margin: 33px 0 31px;
}
.blog-details-area .single-blog-list-item .blog-details blockquote::after {
  content: "";
  position: absolute; color: whitesmoke;
  top: 28px; right: 35px;
  font: normal normal normal 182px/1 FontAwesome;
  z-index: -1;
}
.blog-details-area .single-blog-list-item .blog-details blockquote cite { font-size: 14px; font-style: inherit; }
.blog-details-area .single-blog-list-item .blog-details blockquote p { font-size: 28px; font-weight: 700; color: var(--heading-color); line-height: 1.4; margin-top: 15px; }
.blog-details-area .single-blog-list-item .blog-details .blog-post-tag { margin-top: 28px; }
.blog-details-area .single-blog-list-item .blog-details .blog-post-tag h6 { font-size: 20px; font-weight: 700; margin-bottom: 19px; }
.blog-details-area .single-blog-list-item .blog-details .blog-post-tag .tag-cloud {
  display: inline-block; padding: 0 14px;
  height: 30px; line-height: 26px;
  border: 2px solid #e8e8e8;
  margin: 5px 2px;
  font-weight: 500; font-size: 12px !important;
  transition: all 0.3s ease-in;
}
.blog-details-area .single-blog-list-item .blog-details .blog-post-tag .tag-cloud:hover { background-color: var(--main-color); border-color: var(--main-color); color: #fff; }

/* Blog Author */
.blog-author {
  display: flex; align-items: center;
  background: #fff;
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.06);
  border: 2px solid #e9e9e9;
  padding: 35px;
  margin-bottom: 45px;
}
.blog-author .thumb { flex: none; margin-right: 40px; }
.blog-author .blog-author-details span { font-size: 12px; }
.blog-author .blog-author-details h2 { line-height: inherit; margin: 5px 0 14px; }
.blog-author .blog-author-details p { font-size: 14px; }

/* Post Comments */
.post-comments { border-bottom: 1px solid #f3f3f3; padding-bottom: 32px; margin-bottom: 45px; }
.post-comments .latest-comments ul { list-style: none; margin: 0; padding: 0; }
.post-comments .latest-comments ul li { border-top: 1px solid #f3f3f3; margin-top: 13px; padding-top: 30px; }
.post-comments .latest-comments ul li:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.post-comments .latest-comments ul li .comments-avatar { flex: none; margin-right: 30px; }
.post-comments .latest-comments ul li .comments-text .avatar-name { margin-bottom: 11px; }
.post-comments .latest-comments ul li .comments-text .avatar-name h5 { font-size: 18px; font-weight: 700; margin-bottom: 0; }
.post-comments .latest-comments ul li .comments-text .avatar-name span { font-size: 14px; }
.post-comments .latest-comments ul li .comments-text .avatar-name span i,
.post-comments .latest-comments ul li .comments-text .avatar-name span svg { margin-right: 5px; }
.post-comments .latest-comments ul li .comments-text .avatar-name .comment-reply-link {
  font-size: 14px; height: 40px;
  line-height: 37px;
  border: 2px solid #e8e8e8;
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.06);
  float: right; margin-top: -17px; padding: 0 20px;
  transition: 0.5s;
}
.post-comments .latest-comments ul li .comments-text .avatar-name .comment-reply-link:hover { background: var(--main-color); border-color: var(--main-color); color: #fff; }
.post-comments .latest-comments ul li .comments-text p { font-size: 14px; }

.comment-form-area .comments-entry-form { margin-top: 44px; padding: 50px; background: #f7f7f7; }
.comment-form-area .contact-form .form-group .form-control { padding: 10px 25px; }
.comment-form-area .contact-form .form-group .text-box { height: 145px; padding-top: 20px; }

/* ============================================================
   # HOME-2 VARIANT
   ============================================================ */
.home-2 {
  --heading-color: #111111;
  --paragraph-color: #777777;
}
.home-2 .navbar-area .nav-container .navbar-collapse .navbar-nav li.current-menu-item a,
.home-2 .navbar-area .nav-container .navbar-collapse .navbar-nav li a:hover { color: var(--main-color); }
.home-2 .navbar-area .nav-container .nav-right-content ul li.search { box-shadow: 8px 0 32px 0 rgba(0,0,0,0.06); }
.home-2 .navbar-area .nav-container .nav-right-content ul li.togglebar:hover { background: var(--main-color); }
.home-2 .search-popup .search-form .submit-btn { color: #fff; }
.home-2 .hero-banner-area { background-size: 50% 100%; background-position: left; padding: 300px 0 225px; }
.home-2 .hero-banner-area .banner-text .banenr-title { color: var(--main-color); }
.home-2 .hero-banner-area .banner-text .banenr-subtitle::before { filter: grayscale(1); opacity: 0.5; }
.home-2 .lets-work-area .lets-work-title span { color: rgba(255,255,255,0.4); }
.home-2 .single-blog .blog-info .post-title a:hover,
.home-2 .single-blog .blog-thumbnail .catagory-name:hover { color: var(--hover-color); }
.home-2 .section-title .title { color: var(--heading-color); }
.home-2 .section-title .sub-title { color: var(--paragraph-color); text-decoration: none; font-size: 18px; }

/* ============================================================
   # BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed; right: 30px; bottom: 30px;
  width: 50px; height: 50px; line-height: 50px;
  background-color: var(--main-color);
  color: #fff; text-align: center;
  border-radius: 50%; z-index: 99;
  font-size: 25px; cursor: pointer;
  display: none;
}

/* ============================================================
   # PRELOADER
   ============================================================ */
.pre-wrap { position: fixed; content: ""; transform: translate(-100%, -240%); font-size: 62px; }

.preloader-inner {
  position: fixed; inset: 0;
  z-index: 9; background-color: #fff;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  align-items: center; justify-content: center;
}
.preloader-inner .cancel-preloader { position: absolute; bottom: 30px; right: 30px; }
.preloader-inner .cancel-preloader a {
  background-color: #fff; font-weight: 600;
  text-transform: capitalize; color: var(--main-color);
  width: 200px; height: 50px;
  text-align: center; line-height: 50px;
  border-radius: 30px; display: block;
  transition: all 0.3s ease-in;
}
.preloader-inner .cancel-preloader a:hover { background-color: var(--secondary-color); color: #fff; }

.spinner {
  margin: 120px auto;
  width: 60px; height: 60px;
  position: relative; text-align: center;
  animation: sk-rotate 2s infinite linear;
}
.dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: var(--main-color); border-radius: 100%; animation: sk-bounce 2s infinite ease-in-out; }
.dot2 { top: auto; bottom: 0; animation-delay: -1s; }

@keyframes sk-rotate { 100% { transform: rotate(360deg); } }
@keyframes sk-bounce {
  0%, 100% { transform: scale(0); }
  50%       { transform: scale(1); }
}

/* ============================================================
   # SEARCH POPUP - INLINE EXPANDING
   ============================================================ */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-trigger {
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #333;
  transition: all 0.3s ease;
  z-index: 10;
}

.search-trigger:hover,
.search-trigger.active {
  background: var(--main-color);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(188, 136, 93, 0.22);
}

.search-content {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  z-index: 9999;
  width: min(90vw, 460px);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.search-popup {
  position: relative;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform-origin: right center;
  transform: translateX(14px) scaleX(0.22);
  filter: blur(1.6px);
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.2);
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.26s ease, filter 0.28s ease, visibility 0s linear 0.28s;
  pointer-events: none;
}

.search-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scaleX(1);
  filter: blur(0);
  padding: 6px;
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.26s ease, filter 0.28s ease, visibility 0s;
  pointer-events: auto;
}

.search-popup .search-form {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(17,24,39,0.08);
  padding: 6px;
}

.search-popup .search-form .submit-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  padding: 0;
  font-size: 12px;
  margin-left: 10px;
}

.search-popup .search-form .form-control {
  flex: 1;
  border: none;
  border-radius: 20px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  font-size: 14px;
  color: #333;
  outline: none;
  box-shadow: none;
}

.search-popup .search-form .form-control::placeholder {
  color: #999;
}

.search-popup .search-form .form-control:focus {
  outline: none;
  box-shadow: none;
}

.search-popup .search-form .submit-btn:hover {
  background: var(--hover-color);
}

/* Search Suggestions Dropdown */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  z-index: 10000;
  display: none;
}

.search-suggestions.active {
  display: block !important;
}

.search-suggestions .suggestion-item {
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-suggestions .suggestion-item:last-child {
  border-bottom: none;
}

.search-suggestions .suggestion-item:hover {
  background: #f8f8f8;
}

.search-suggestions .suggestion-item .suggestion-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--main-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.search-suggestions .suggestion-item .suggestion-content {
  flex: 1;
}

.search-suggestions .suggestion-item .suggestion-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 3px 0;
  line-height: 1.3;
}

.search-suggestions .suggestion-item .suggestion-desc {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.3;
}

.search-suggestions .suggestion-item .suggestion-highlight {
  color: var(--main-color);
  font-weight: 700;
}

.search-suggestions .no-results {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.search-suggestions .suggestions-loading {
  padding: 20px;
  text-align: center;
  color: #999;
}

.search-suggestions .suggestions-loading i {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .search-popup.active {
    width: 250px;
  }
  
  .search-suggestions {
    width: 300px;
    right: -50px;
  }
}

@media (max-width: 480px) {
  .search-content {
    position: fixed;
    top: 70px;
    left: 15px;
    right: 15px;
    transform: none;
  }
  
  .search-popup.active {
    width: 100%;
  }
  
  .search-suggestions {
    width: 100%;
    right: 0;
  }
}

/* ============================================================
   # VIDEO MODAL
   ============================================================ */
.video-modal {
  display: none;
  position: fixed; inset: 0;
  background: #000;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.video-modal-content { position: relative; width: 100%; height: 100%; background: #000; }

.close-btn {
  position: absolute; top: 20px; right: 30px;
  color: #fff; font-size: 40px; font-weight: 300;
  cursor: pointer; z-index: 100;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}
.close-btn:hover { background: #ff4444; transform: rotate(90deg); }

.modal-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.modal-video.fill { object-fit: cover; }

.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; }
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

@media (max-width: 768px) {
  .close-btn { top: 10px; right: 15px; font-size: 30px; width: 40px; height: 40px; }
}

/* ============================================================
   # BUTTONS
   ============================================================ */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: var(--main-color);
  color: #fff;
  font-size: 16px; 
  font-weight: 600;
  text-transform: capitalize;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border: 1px solid transparent;
}
.primary-btn i { margin-left: 8px; transition: var(--transition); }
.primary-btn:active, .primary-btn:focus, .primary-btn:hover { 
  color: #fff; 
  background: var(--hover-color); 
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.primary-btn:hover i { transform: translateX(3px); }

.more-work-btn {
  display: inline-block;
  padding: 12px 30px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  font-size: 16px; font-weight: 600;
  text-transform: capitalize; 
  color: var(--heading-color);
  border-radius: var(--border-radius);
  transition: var(--transition);
}
.more-work-btn:focus, .more-work-btn:active, .more-work-btn:hover { 
  background: var(--main-color); 
  color: #fff; 
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Glassmorphism Utilities */
.glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  padding: 30px;
  transition: var(--transition);
}
.glass-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.social-area { list-style: none; margin: 0; padding: 0; display: inline-block; }
.social-area li { display: inline-block; padding: 0 8px; transition: all 0.3s ease-in; }
.social-area li:hover { color: var(--main-color); }
.social-area li:last-child { padding-right: 0; }
.social-area li:first-child { padding-left: 0; }

/* ============================================================
   # SECTION TITLE
   ============================================================ */
.section-title { margin-top: -5px; }
.section-title .line-arrow { margin-bottom: 25px; line-height: 1; }
.section-title .sub-title { margin-bottom: 15px; font-size: 16px; font-weight: 400; text-decoration: underline; text-transform: capitalize; color: var(--main-color); }
.section-title .title { font-size: 46px; line-height: 56px; font-weight: 700; color: #fff; margin: 0; }

.bl-list-inner { padding: 0; margin: 0; }
.bl-list-inner li { list-style: none; margin-bottom: 20px; }
.bl-list-inner li i {
  height: 35px; width: 35px; line-height: 35px;
  border-radius: 50%; display: inline-block;
  background: #fff; text-align: center;
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.06);
  color: var(--heading-color); margin-right: 20px;
}

/* ============================================================
   # CONTACT FORM
   ============================================================ */
.contact-form .form-group { position: relative; margin-bottom: 30px; }
.contact-form .form-group .icon { position: absolute; left: 20px; top: 20px; }
.contact-form .form-group .form-control {
  width: 100%; height: 60px;
  background: #fff; border: 2px solid #e9e9e9;
  border-radius: 0; padding: 10px 20px 10px 45px;
  font-family: var(--body-font); font-size: 16px; color: #999;
}
.contact-form .form-group .form-control:focus { box-shadow: none; }
.contact-form .form-group .text-box { height: 180px; padding-top: 15px; }

/* ============================================================
   # INSTAGRAM SECTION - IMPROVED DESIGN
   ============================================================ */
.instagram-area {
  background: #090909;
  padding: 80px 0;
}

.instagram-area .section-title {
  margin-bottom: 50px;
}

.instagram-area .section-title .sub-title {
  color: #ffd700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 15px;
  display: block;
}

.instagram-area .section-title .title {
  color: #ffffff;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 0;
}

.instagram-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  margin-bottom: 40px;
}

.instagram-gallery .instagram-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.instagram-gallery .instagram-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.instagram-gallery .instagram-item:hover img {
  transform: scale(1.1);
}

.instagram-gallery .instagram-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(188, 136, 93, 0.9) 0%, rgba(129, 89, 55, 0.9) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.instagram-gallery .instagram-item:hover .overlay {
  opacity: 1;
}

.instagram-gallery .instagram-item .overlay i {
  color: #fff;
  font-size: 32px;
  transform: scale(0);
  transition: transform 0.4s ease 0.1s;
}

.instagram-gallery .instagram-item:hover .overlay i {
  transform: scale(1);
}

.instagram-area .primary-btn {
  background: #BC885D;
  color: #fff;
  padding: 15px 35px;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.instagram-area .primary-btn:hover {
  background: #815937;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(188, 136, 93, 0.3);
}

/* Responsive */
@media (max-width: 1200px) {
  .instagram-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .instagram-area .section-title .title {
    font-size: 32px;
  }
  
  .instagram-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .instagram-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .instagram-area {
    padding: 60px 0;
  }
}

/* ============================================================
   # FOOTER - IMPROVED DESIGN
   ============================================================ */
.footer-area {
  background: #090909;
  padding-top: 100px;
  position: relative;
}

.footer-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(188, 136, 93, 0.5) 50%, transparent 100%);
}

.footer-inner {
  padding-bottom: 60px;
}

.footer-inner .section-title {
  margin-bottom: 40px;
}

.footer-inner .section-title .sub-title {
  color: #BC885D;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 20px;
  display: inline-block;
  font-weight: 500;
  border: 2px solid rgba(188, 136, 93, 0.4);
  padding: 12px 30px;
  border-radius: 30px;
  transition: all 0.4s ease;
  text-decoration: none;
}

.footer-inner .section-title .sub-title:hover {
  background: linear-gradient(135deg, #BC885D 0%, #815937 100%);
  border-color: #BC885D;
  color: #fff;
}

.footer-inner .section-title .title {
  color: #ffffff;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 0;
  transition: all 0.3s ease;
}

.footer-inner .section-title .title:hover {
  color: #BC885D;
}

.footer-social-media {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-social-media li {
  margin: 0;
}

.footer-social-media li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(188, 136, 93, 0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  transition: all 0.4s ease;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.footer-social-media li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #BC885D 0%, #815937 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.footer-social-media li a:hover {
  border-color: #BC885D;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(188, 136, 93, 0.3);
}

.footer-social-media li a:hover::before {
  opacity: 1;
}

.footer-bottom {
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px;
}

.footer-bottom .copyright-area p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 0;
  letter-spacing: 1px;
}

/* Responsive Footer */
@media (max-width: 768px) {
  .footer-inner .section-title .title {
    font-size: 32px;
  }
  
  .footer-social-media li a {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
}

/* ============================================================
   # TEAM SECTION - SUBTITLE IMPROVED DESIGN
   ============================================================ */

.team-area .section-title .sub-title,
.service-area .section-title .sub-title,
.fun-fact-area .section-title .sub-title,
.contact-area .section-title .sub-title {
  color: #BC885D;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 15px;
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid rgba(188, 136, 93, 0.4);
  padding: 12px 30px;
  border-radius: 30px;
  transition: all 0.4s ease;
}

.team-area .section-title .sub-title:hover,
.service-area .section-title .sub-title:hover,
.fun-fact-area .section-title .sub-title:hover,
.contact-area .section-title .sub-title:hover {
  background: linear-gradient(135deg, #BC885D 0%, #815937 100%);
  border-color: #BC885D;
  color: #fff;
}

.team-area {
  background: #090909;
  padding: 40px 0 60px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 50px;
}

.team-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
  background: #1a1a1a;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(188, 136, 93, 0.2);
}

.team-image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card:hover .team-image img {
  transform: scale(1.1);
}

.team-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 20px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.team-card:hover .team-overlay {
  opacity: 1;
  transform: translateY(0);
}

.team-info {
  text-align: center;
}

.team-info h5 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.team-info p {
  color: #BC885D;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 576px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .team-card {
    max-width: 320px;
    margin: 0 auto;
  }
  
  .team-overlay {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  }
}

/* ============================================================
   # SOCIAL MEDIA EMBEDS GRID
   ============================================================ */
.social-platform-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.platform-instagram { background: rgba(225,48,108,0.15); color: #e1306c; border: 1px solid rgba(225,48,108,0.3); }
.platform-facebook  { background: rgba(24,119,242,0.15); color: #1877f2; border: 1px solid rgba(24,119,242,0.3); }
.platform-tiktok    { background: rgba(255,255,255,0.08); color: #fff;    border: 1px solid rgba(255,255,255,0.2); }
.platform-youtube   { background: rgba(255,0,0,0.12);    color: #ff3333; border: 1px solid rgba(255,0,0,0.25); }
.platform-twitter   { background: rgba(29,161,242,0.12); color: #1da1f2; border: 1px solid rgba(29,161,242,0.25); }
.platform-linkedin  { background: rgba(10,102,194,0.15); color: #0a66c2; border: 1px solid rgba(10,102,194,0.3); }
.platform-telegram  { background: rgba(44,165,224,0.15); color: #2ca5e0; border: 1px solid rgba(44,165,224,0.3); }
.platform-other     { background: rgba(180,180,180,0.12); color: #aaa;   border: 1px solid rgba(180,180,180,0.25); }

.social-embeds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.social-embed-item {
  width: 100%;
  max-width: 100%;
}

.social-embed-item .instagram-item {
  display: block;
}

.social-embeds-grid .team-image {
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.social-embeds-grid .team-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.embed-wrapper {
  display: flex;
  justify-content: center;
}

.embed-wrapper iframe,
.embed-wrapper blockquote {
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .social-embeds-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ============================================================
   # MODERN PAGINATION STYLES
   ============================================================ */
.pagination-modern {
  display: inline-flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination-modern .page-item {
  margin: 0;
}

.pagination-modern .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 45px;
  padding: 0 15px;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  color: #0a0a0a;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pagination-modern .page-link:hover {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(188, 136, 93, 0.3);
}

.pagination-modern .page-item.active .page-link {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
  box-shadow: 0 5px 15px rgba(188, 136, 93, 0.4);
}

.pagination-modern .page-item.disabled .page-link {
  background: #f5f5f5;
  border-color: #e0e0e0;
  color: #aaa;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pagination-container {
  padding: 20px 0;
}

.pagination-info {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.pagination-info span {
  background: #f5f5f5;
  padding: 5px 15px;
  border-radius: 20px;
}

/* ============================================================
   # LANGUAGE SELECTOR DROPDOWN FIX
   ============================================================ */
.language-selector {
  position: relative;
}

.language-selector .dropdown {
  position: relative;
}

/* Dropdown menu hidden by default */
.language-selector .dropdown-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute;
  top: calc(100% + 10px);
  left: auto;
  right: 0;
  min-width: 160px;
  padding: 8px;
  margin: 0;
  background-color: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  z-index: 9999;
  border: 1px solid rgba(188, 136, 93, 0.2);
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.language-selector .dropdown-menu:not(.show):not(.open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Show when open — Bootstrap 4 əlavə edir: .show əsasən .dropdown-menu üzərində */
.language-selector .dropdown-menu.show,
.language-selector .dropdown-menu.open,
.language-selector .dropdown.show .dropdown-menu,
.language-selector .dropdown.open .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.language-selector .dropdown-menu li {
  display: block;
  margin: 0 0 8px 0;
}

.language-selector .dropdown-menu li:last-child {
  margin-bottom: 0;
}

/* Button style for language options */
.language-selector .dropdown-menu li a {
  display: block;
  width: 100%;
  padding: 12px 16px;
  color: #b0b0b0;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.language-selector .dropdown-menu li a:hover {
  background-color: rgba(188, 136, 93, 0.15);
  color: #fff;
}

/* Dropdown toggle button style */
.language-selector .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #6a7795;
  text-decoration: none;
  transition: all 0.3s ease;
}

.language-selector .dropdown-toggle:hover {
  color: var(--main-color);
}

.language-selector .dropdown-toggle .fa-globe {
  font-size: 16px;
}

.language-selector .dropdown-toggle span {
  font-weight: 600;
  font-size: 14px;
}

/* Consistent font for all languages - FORCE DM Sans everywhere */
* {
  font-family: 'DM Sans', sans-serif !important;
}

/* Override for font-awesome icons */
.fa, .fas, .far, .fal, .fab {
  font-family: 'FontAwesome' !important;
}

/* Yalnız footer-dan sonra gələn popular-posts-widget-i gizlət */
footer + th\:block,
footer + [th\:block],
body > th\:block:last-of-type {
  display: none !important;
}

/* Və ya birbaşa fragment-i gizlət */
th\:block[th\:fragment="popular-posts-widget"] {
  display: none !important;
}

/* ============================================================
   # HEADER POSITIONING FINAL FIX - NO MOVEMENT ALLOWED
   ============================================================ */

/* Ensure header stays in correct position - NO MOVEMENT ALLOWED */
.header-area {
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1050 !important;
    padding-right: 0 !important;
    background: transparent !important;
    min-height: 80px !important;
    transform: none !important;
    transition: none !important;
}

.navbar-area {
    position: relative !important;
    padding: 15px 0 0 0 !important;
    transform: none !important;
    transition: none !important;
}

.hidden { display: none !important; }

.navbar-area .nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 15px !important;
    transform: none !important;
    transition: none !important;
}

/* Prevent any header movement when togglebar is active */
.header-area *,
.navbar-area *,
.navbar-area .nav-container * {
    transform: none !important;
}

/* Allow only togglebar lines to transform */
.navbar-area .nav-container .nav-right-content ul li.togglebar .line {
    transform: none !important;
    transition: all 0.3s ease !important;
}

.navbar-area .nav-container .nav-right-content ul li.togglebar.active .line:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.navbar-area .nav-container .nav-right-content ul li.togglebar.active .line:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.hero-banner-area .navbar-area .nav-container .navbar-collapse .navbar-nav li.current-menu-item a,
.hero-banner-area .navbar-nav li.current-menu-item a,
body:not(.home) .navbar-nav li.current-menu-item a {
    color: #BC885D !important;
}

/* Banner üzrə təmiz overlay: əsas hero mövcuddursa masaüstdə header möhkəm qalsa və üstdə yüngül scrim — menyu daha səliqəli görünsün */
@media only screen and (min-width: 992px) {
  body:has(> header.header-area + div > .hero-banner-area:first-child) .header-area.style-1,
  body:has(> header.header-area + div.news-page-premium > section.hero-banner-premium:first-child) .header-area.style-1 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    background: transparent !important;
  }

  body:has(> header.header-area + div > .hero-banner-area:first-child) .header-area.style-1::before,
  body:has(> header.header-area + div.news-page-premium > section.hero-banner-premium:first-child) .header-area.style-1::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(104px, 22vh, 200px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.24) 68%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }

  body:has(> header.header-area + div > .hero-banner-area:first-child) .header-area.style-1 .navbar-area,
  body:has(> header.header-area + div.news-page-premium > section.hero-banner-premium:first-child) .header-area.style-1 .navbar-area {
    position: relative !important;
    z-index: 1;
  }
}


/* Mobile dropdown panel: rules live in responsive.css (avoids conflicting position/max-height with fixed header). */

/* ============================================================
   # GRID LAYOUT STYLES
   ============================================================ */
.grid-layout {
    display: block;
}

.category-section {
    margin-bottom: 60px;
}

.category-section:last-child {
    margin-bottom: 0;
}

.category-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--main-color);
}

.grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.grid-row .carousel-card {
    flex: 0 0 calc(33.3333% - 14px);
    width: calc(33.3333% - 14px);
    max-width: calc(33.3333% - 14px);
}

/* ============================================================
   # CAROUSEL STYLES
   ============================================================ */
.carousel-container {
    position: relative;
    overflow: hidden;
    padding: 20px 60px;
    display: flex;
    align-items: center;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
    flex: 1;
}

.carousel-card {
    flex: 0 0 calc(33.333% - 14px);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.carousel-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.95);
}

.card-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.carousel-card:hover .card-image img {
    transform: scale(1.05);
}

.card-header {
    margin-bottom: 15px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
}

.card-actions {
    margin-top: auto;
    display: flex;
    justify-content: center;
}

.details-btn {
    background: var(--main-color);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.details-btn:hover {
    background: var(--hover-color);
    transform: scale(1.05);
}

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.carousel-nav-btn:hover {
    background: var(--main-color);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav-left {
    left: 0;
}

.carousel-nav-right {
    right: 0;
}

.carousel-nav-btn i {
    font-size: 18px;
}

/* ============================================================
   # MODAL STYLES
   ============================================================ */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    position: relative;
    animation: slideIn 0.3s ease;
    overflow: hidden;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: var(--main-color);
    color: #fff;
}

.modal-body {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-body img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    flex-shrink: 0;
}

.modal-details {
    padding: 30px;
}

.modal-details h3 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.modal-details p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.modal-link {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-link .link-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.modal-link .link-url {
    color: var(--main-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.modal-link .link-url:hover {
    color: var(--hover-color);
    text-decoration: underline;
}

/* ============================================================
   # RESPONSIVE STYLES
   ============================================================ */
@media (max-width: 992px) {
    .carousel-card {
        flex: 0 0 calc(50% - 10px);
    }
    
    .grid-row .carousel-card {
        flex: 0 0 calc(50% - 10px);
        width: calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .carousel-card {
        flex: 0 0 100%;
    }
    
    .grid-row .carousel-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    
    .category-title {
        font-size: 20px;
    }
    
    .modal-body img {
        height: 300px;
    }
    
    .modal-details {
        padding: 20px;
    }
    
    .modal-details h3 {
        font-size: 20px;
    }
    
    .modal-details p {
        font-size: 14px;
    }
}

/* ============================================================
   # HOME RECENT BLOG CARDS
   ============================================================ */
.recent-blog-area .recent-blog-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.recent-blog-area .recent-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.recent-blog-area .recent-blog-thumb {
    display: block;
    height: 220px;
    overflow: hidden;
}

.recent-blog-area .recent-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.recent-blog-area .recent-blog-card:hover .recent-blog-thumb img {
    transform: scale(1.05);
}

.recent-blog-area .recent-blog-empty-thumb {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    color: #fff;
}

.recent-blog-area .recent-blog-body {
    padding: 22px 24px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recent-blog-area .recent-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: #8b5e3c;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.recent-blog-area .recent-blog-title {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}

.recent-blog-area .recent-blog-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.recent-blog-area .recent-blog-title a:hover {
    color: #8b5e3c;
}

.recent-blog-area .recent-blog-excerpt {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html[data-theme="dark"] .recent-blog-area .recent-blog-card {
    background: #1d1f25;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .recent-blog-area .recent-blog-title a {
    color: #f1f3f7;
}

html[data-theme="dark"] .recent-blog-area .recent-blog-excerpt {
    color: #c5c8d0;
}

/* ============================================================
   # ABOUT EXPERIENCE / EDUCATION TIMELINE
   ============================================================ */
.experience-timeline-offset {
    padding-top: clamp(18px, 3vw, 38px);
}

@media (max-width: 767.98px) {
    .experience-timeline-offset {
        padding-top: 16px;
    }
}

.about-timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.about-timeline-list::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 23px;
    width: 2px;
    background: rgba(139, 94, 60, 0.25);
}

.about-timeline-item {
    position: relative;
    padding-left: 70px;
    margin-bottom: 28px;
}

.about-timeline-item:last-child {
    margin-bottom: 0;
}

.about-timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #8b5e3c;
    color: #8b5e3c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.about-timeline-body {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.about-timeline-body h5 {
    margin: 0 0 6px;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
}

.about-timeline-body p {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
}

.about-achievement-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 26px 26px 22px;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-achievement-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.1);
}

.about-achievement-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(139, 94, 60, 0.12);
    color: #8b5e3c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.about-achievement-card h6 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
}

.about-achievement-card p {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
}

html[data-theme="dark"] .about-timeline-body,
html[data-theme="dark"] .about-achievement-card {
    background: #1d1f25;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .about-timeline-icon {
    background: #1d1f25;
}

html[data-theme="dark"] .about-timeline-body h5,
html[data-theme="dark"] .about-achievement-card h6 {
    color: #f1f3f7;
}

html[data-theme="dark"] .about-timeline-body p,
html[data-theme="dark"] .about-achievement-card p {
    color: #c5c8d0;
}