/* ==========================================================================
   ref-match.css — Visual overrides to match bookpub.co layout
   Load AFTER style.css. Brand remains Exclusive Book Publishing.
   Image paths: ../images/...
   ========================================================================== */

/* --------------------------------------------------------------------------
   13. Typography (global)
   -------------------------------------------------------------------------- */

   body,
   body.home,
   .home,
   .home *,
   .btn,
   .nav-link,
   .section-heading,
   .section-subheading,
   input,
   textarea,
   select,
   button {
     font-family: 'Inter', sans-serif;
   }
   
   .book-head h4,
   .book-item .book-head h4 {
     font-family: 'Aguafina Script', cursive;
   }
   
   /* --------------------------------------------------------------------------
      12. Buttons — global match (wipe hover)
      -------------------------------------------------------------------------- */
   
   .btn {
     display: inline-block;
     padding: 15px 25px;
     font-size: 20px;
     font-weight: 600;
     line-height: 1.2;
     text-transform: uppercase;
     text-decoration: none;
     border: 2px solid;
     border-radius: 5px;
     margin: 5px;
     position: relative;
     z-index: 1;
     overflow: hidden;
     transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.45s ease, transform 0.25s ease;
     transform: none;
   }
   
   .btn::before,
   .btn::after {
     content: none !important;
     display: none !important;
   }
   
   .btn:hover,
   .btn:active {
     transform: translateY(-2px);
   }
   
   .btn-primary {
     background: #016b72;
     border-color: #016b72;
     color: #ffffff;
     text-shadow: 1px 1px 2px hsl(0deg 0% 0% / 42%);
     box-shadow: inset 0 0 0 0 #ffffff;
   }
   
   .btn-primary:hover,
   .btn-primary:focus-visible {
     color: #174a4c !important;
     border-color: #016b72;
     background: #016b72;
     text-shadow: none;
     box-shadow: inset 0 0 0 100vmax #ffffff;
   }
   
   .btn-outline,
   .btn-outline-light {
     background: transparent;
     border-color: #ffffff;
     color: #ffffff;
     box-shadow: inset 0 0 0 0 #016b72;
   }
   
   .btn-outline:hover,
   .btn-outline-light:hover,
   .btn-outline:focus-visible,
   .btn-outline-light:focus-visible {
     border-color: #016b72;
     color: #ffffff !important;
     background: transparent;
     box-shadow: inset 0 0 0 100vmax #016b72;
   }
   
   .btn-outline-dark {
     background: transparent;
     border-color: #000000;
     color: #000000;
     box-shadow: inset 0 0 0 0 #016b72;
   }
   
   .btn-outline-dark:hover,
   .btn-outline-dark:focus-visible {
     border-color: #016b72;
     color: #ffffff !important;
     box-shadow: inset 0 0 0 100vmax #016b72;
   }
   
   .btn-secondary,
   .btn-dark-gray {
     background: #3d4040;
     border-color: #3d4040;
     color: #ffffff;
     text-shadow: 1px 1px 2px hsl(0deg 0% 0% / 42%);
     box-shadow: inset 0 0 0 0 #ffffff;
   }
   
   .btn-secondary:hover,
   .btn-dark-gray:hover,
   .btn-secondary:focus-visible,
   .btn-dark-gray:focus-visible {
     background: #3d4040;
     border-color: #3d4040;
     color: #212529 !important;
     text-shadow: none;
     box-shadow: inset 0 0 0 100vmax #ffffff;
   }
   
   .btn-white {
     background: #ffffff;
     border-color: #ffffff;
     color: #212529;
     box-shadow: inset 0 0 0 0 #212529;
   }
   
   .btn-white:hover,
   .btn-white:focus-visible {
     color: #ffffff !important;
     box-shadow: inset 0 0 0 100vmax #212529;
   }
   
   /* --------------------------------------------------------------------------
      1. Header
      -------------------------------------------------------------------------- */
   
   .home .site-header,
   body.home .site-header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1100;
     padding: 20px 0;
     background: transparent;
     box-shadow: none;
   }
   
   .home .site-header .header-inner,
   .home .site-header .container,
   .home .header-inner.container {
     max-width: 1700px;
     width: 100%;
     margin-inline: auto;
     padding-left: 20px;
     padding-right: 20px;
   }
   
   .home .site-logo img {
     max-height: 70px;
     width: auto;
   }
   
   .home .nav-list {
     justify-content: flex-end;
     flex: 1;
     margin-top: 30px;
     gap: 0;
   }
   
   .home .nav-link {
     color: #ffffff;
     font-size: 16px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.02em;
     padding: 8px 14px;
   }
   
   .home .nav-link:hover,
   .home .nav-item.active > .nav-link,
   .home .nav-item.is-active > .nav-link {
     color: #000000;
   }
   
   .home .header-top-links {
     position: absolute;
     right: 220px;
     top: 18px;
     z-index: 3;
   }
   
   .home .header-phone {
     color: #ffffff;
     font-size: 18px;
     font-weight: 600;
     text-decoration: none;
   }
   
   .home .header-phone span {
     color: #ffffff;
   }
   
   .home .header-phone:hover,
   .home .header-phone:hover span {
     color: #000000;
     opacity: 1;
   }
   
   .home .header-cta .btn,
   .home .header-cta .btn-primary {
     background: #ffffff;
     border-color: #ffffff;
     color: #000000;
     font-size: 16px;
     padding: 12px 22px;
     text-shadow: 1px 2px 2px hsla(0, 0%, 24%, 0.42);
   }
   
   .home .header-cta .btn::before,
   .home .header-cta .btn::after {
     background: #ffffff;
   }
   
   .home .header-cta .btn:hover {
     background: #ffffff;
     border-color: #ffffff;
     color: #0098a2;
   }
   
   /* Scrolled — dark teal bar */
   .home .site-header.is-scrolled,
   .home .site-header.header-solid {
     position: fixed;
     background-color: #174a4c;
     padding: 12px 0;
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
   }
   
   .home .site-header.is-scrolled .site-logo img {
     max-height: 55px;
   }
   
   .home .site-header.is-scrolled .nav-list {
     margin-top: 10px;
   }
   
   .home .site-header.is-scrolled .header-top-links {
     top: 10px;
   }
   
   .home .dropdown-menu {
     width: 250px;
     padding-bottom: 0;
     margin-top: 0;
     border: none;
     border-radius: 0;
     overflow: hidden;
   }
   
   .home .dropdown-menu::before {
     content: "";
     position: absolute;
     height: 5px;
     width: 100%;
     background: #016b72;
     top: 0;
     left: 0;
     z-index: 1;
   }
   
   .home .dropdown-item {
     font-size: 14px;
     white-space: normal;
     border-bottom: 1px solid #212529;
     color: #212529;
     padding: 10px 14px;
   }
   
   .home .dropdown-item:hover {
     background: #016b72;
     color: #000000;
   }
   
   /* --------------------------------------------------------------------------
      2. Hero
      -------------------------------------------------------------------------- */
   
   .home .hero {
     position: relative;
     min-height: 820px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     color: #ffffff;
     background-color: #212529;
     background-image: url('../images/banner-green.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     overflow: hidden;
   }
   
   .home .hero-inner {
     position: relative;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     flex: 1;
     width: min(100% - 40px, 1200px);
     max-width: 1700px;
     margin-inline: auto;
     padding-top: 250px;
     padding-bottom: 40px;
     z-index: 2;
   }
   
   .home .hero-content {
     max-width: 600px;
     flex: 1;
     position: relative;
     z-index: 2;
     padding-bottom: 40px;
   }
   
   .home .hero-title {
     font-size: 40px;
     font-weight: 700;
     color: #ffffff;
     line-height: 1.3;
     max-width: 600px;
     margin-bottom: 20px;
   }
   
   .home .hero-text {
     font-size: 25px;
     color: #b8bbd1;
     margin-bottom: 20px;
     line-height: 1.45;
   }
   
   .home .hero-banner-img {
     position: absolute;
     bottom: 0;
     right: 8%;
     max-width: 30%;
     z-index: 1;
     pointer-events: none;
   }
   
   .home .hero-banner-img img {
     width: 100%;
     height: auto;
     display: block;
   }
   
   .home .hero-bottom {
     position: relative;
     z-index: 2;
     padding: 25px;
   }
   
   .home .hero-bottom::before {
     content: "";
     position: absolute;
     width: 63%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: -1;
     background: rgba(1, 107, 114, 0.72);
   }
   
   .home .hero-bottom-text {
     font-size: 18px;
     color: rgba(255, 255, 255, 0.95);
     width: 50%;
     max-width: 960px;
     margin-bottom: 0;
     line-height: 1.4;
   }
   
   .home .hero-bottom-text span {
     color: #ffffff;
     font-weight: 700;
   }
   
   /* Hero buttons — blue3 / outline */
   .home .hero .btn-primary,
   .home .hero-actions .btn-primary {
     background: #3d4040;
     border-color: #3d4040;
     color: #ffffff;
     font-size: 20px;
     padding: 15px 25px;
     text-shadow: 1px 1px 2px hsl(0deg 0% 0% / 42%);
   }
   
   .home .hero .btn-primary:hover,
   .home .hero-actions .btn-primary:hover {
     background: #3d4040;
     border-color: #3d4040;
     color: #000000 !important;
     text-shadow: none;
     box-shadow: inset 0 0 0 100vmax #ffffff;
   }
   
   .home .hero .btn-outline,
   .home .hero-actions .btn-outline {
     background: transparent !important;
     border: 2px solid #ffffff !important;
     color: #ffffff !important;
     font-size: 20px;
     padding: 15px 25px;
     text-shadow: none !important;
     box-shadow: inset 0 0 0 0 #ffffff !important;
     transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.45s ease, transform 0.25s ease !important;
   }
   
   .home .hero .btn-outline:hover,
   .home .hero-actions .btn-outline:hover,
   .home .hero .btn-outline:focus-visible,
   .home .hero-actions .btn-outline:focus-visible {
     border-color: #ffffff !important;
     color: #016b72 !important;
     background: transparent !important;
     text-shadow: none !important;
     box-shadow: inset 0 0 0 100vmax #ffffff !important;
     transform: translateY(-2px);
   }
   
   /* --------------------------------------------------------------------------
      3. Looking section
      -------------------------------------------------------------------------- */
   
   .looking-section {
     padding: 100px 0;
     background: url('../images/looking-bg.png');
     background-size: cover;
     background-position: bottom;
     color: #212529;
     position: relative;
     overflow: hidden;
   }
   
   .looking-section .section-heading,
   .looking-section h2 {
     font-size: 42px;
     color: #212529;
     font-weight: 600;
     line-height: 1.25;
     margin-bottom: 20px;
   }
   
   .looking-section .section-subheading,
   .looking-section h3,
   .looking-section h4.section-subheading {
     font-size: 30px;
     color: #5c6387;
     font-weight: 400;
     margin-bottom: 30px;
     line-height: 1.35;
   }
   
   .looking-section p {
     font-size: 22px;
     color: #212529;
     line-height: 1.5;
     margin-bottom: 18px;
   }
   
   .looking-section .row {
     align-items: center;
   }
   
   .looking-section .container-fluid {
     max-width: 100%;
     padding-left: 0;
     padding-right: 0;
   }
   
   .looking-section .looking-content {
     padding-left: 20px;
     padding-right: 20px;
   }
   
   .looking-image {
     padding: 0;
   }
   
   .looking-image img,
   .looking-image-side,
   .looking-1,
   .looking-2 {
     mix-blend-mode: darken;
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   .looking-section .looking-image:first-child img,
   .looking-section .col-lg-3.looking-image img {
     margin-left: 0;
     width: 100%;
     object-fit: contain;
   }
   
   .looking-section .looking-image:last-child img,
   .looking-section .col-lg-4.looking-image img {
     margin-right: 0;
     width: 100%;
     object-fit: contain;
   }
   
   .check-list {
     display: block;
     margin-bottom: 30px;
     padding: 0;
     list-style: none;
   }
   
   .check-list li {
     display: inline-block;
     font-size: 22px;
     vertical-align: top;
     line-height: 1.4;
     color: #212529;
     padding-left: 32px;
     position: relative;
   }
   
   .check-list li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 4px;
     width: 22px;
     height: 22px;
     background-color: #016b72;
     mask: url('../images/check.svg') center / contain no-repeat;
     -webkit-mask: url('../images/check.svg') center / contain no-repeat;
     flex: none;
     margin: 0;
   }
   
   .check-list li a {
     color: #212529;
     text-decoration: none;
   }
   
   .check-list li a:hover {
     color: #016b72;
   }
   
   .looking-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     align-items: center;
   }
   
   /* --------------------------------------------------------------------------
      4. Ready section — NOT card grid
      -------------------------------------------------------------------------- */
   
   .ready-section,
   section.ready {
     padding: 50px 0 70px;
     background-color: #f5f7fa;
     background-image: url('../images/ready-bg.png');
     background-size: cover;
     background-position: center;
   }
   
   .ready-section .section-heading,
   .ready-section .ready-title h3,
   .ready-title h3 {
     text-align: center;
     width: 70%;
     max-width: 900px;
     margin: 0 auto 20px;
     font-size: 38px;
     color: #212529;
     font-weight: 500;
     line-height: 1.3;
   }
   
   .ready-section .section-subheading,
   .ready-title h5 {
     text-align: center;
     width: 70%;
     max-width: 820px;
     margin: 0 auto 60px;
     font-size: 20px;
     color: #212529;
   }
   
   .ready-title {
     text-align: center;
     width: 70%;
     margin: 0 auto 60px;
   }
   
   /* Kill card look on ready features */
   .ready-section .features-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 40px 60px;
     max-width: 960px;
     margin: 0 auto;
     background: transparent;
   }
   
   .ready-section .feature-card,
   .ready-section .read-content,
   .read-content {
     position: relative;
     text-align: left;
     padding: 20px 20px 20px 50px;
     background: transparent;
     border: none;
     border-radius: 0;
     box-shadow: none;
   }
   
   .ready-section .feature-card:hover,
   .ready-section .read-content:hover {
     transform: none;
     box-shadow: none;
   }
   
   .ready-section .feature-card::after,
   .ready-section .read-content::after,
   .read-content::after {
     content: "";
     position: absolute;
     width: 87px;
     height: 87px;
     border-radius: 50%;
     background: #0ba6b1db;
     left: -50px;
     top: 10px;
     z-index: 0;
     pointer-events: none;
   }
   
   .ready-section .feature-card h3,
   .ready-section .read-content h3,
   .read-content h3 {
     position: relative;
     z-index: 1;
     font-size: 28px;
     font-weight: 600;
     color: #212529;
     margin-bottom: 12px;
   }
   
   .ready-section .feature-card h3 span,
   .ready-section .read-content h3 span,
   .ready-section .feature-card span,
   .read-content span {
     color: #0ba6b1;
   }
   
   .ready-section .feature-card p,
   .ready-section .read-content p,
   .read-content p {
     position: relative;
     z-index: 1;
     font-size: 18px;
     color: #555555;
     margin: 0;
   }
   
   /* --------------------------------------------------------------------------
      5. Book genre section — CRITICAL MATCH
      -------------------------------------------------------------------------- */
   
   .book-section,
   .genre-section.genre-books-section {
     padding: 0;
     overflow: hidden;
   }
   
   .book-section > .container-fluid,
   .book-section .container-fluid {
     max-width: 100%;
     padding: 0;
   }
   
   .book-section .row {
     display: flex;
     flex-wrap: wrap;
     margin: 0;
     min-height: 640px;
   }
   
   .book-left,
   .book-right,
   .book-middle {
     position: relative;
     padding: 40px 30px;
   }
   
   .book-left {
     flex: 0 0 22%;
     max-width: 22%;
     background: #016b72 url('../images/b-1.png') center / cover no-repeat;
     color: #ffffff;
     border: 4px solid #ffffff;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
   
   .book-left h4 {
     text-transform: uppercase;
     font-size: 20px;
     font-weight: 600;
     letter-spacing: 0.04em;
     margin-bottom: 16px;
     color: #ffffff;
   }
   
   .book-left h3,
   .book-left .section-heading {
     font-size: 40px;
     font-weight: 700;
     color: #ffffff;
     line-height: 1.25;
     margin: 0;
   }
   
   .book-left p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     margin-top: 20px;
   }
   
   .book-middle {
     flex: 0 0 56%;
     max-width: 56%;
     padding: 0;
     background: #0a3d40;
   }
   
   .book-wrapper {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 1fr);
     height: 100%;
     min-height: 640px;
   }
   
   .book-right {
     flex: 0 0 22%;
     max-width: 22%;
     background: #174a4c url('../images/b-2.png') center / cover no-repeat;
     border: 4px solid #ffffff;
     color: #ffffff;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
   
   .book-right h3,
   .book-right h4,
   .book-right p {
     color: #ffffff;
   }
   
   /* Book items inside middle grid */
   .book-section .book-item,
   .book-wrapper .book-item {
     padding: 35px;
     padding-top: 20px;
     padding-right: 20px;
     color: #ffffff;
     background: #016b72;
     height: 100%;
     border: none;
     border-radius: 0;
     box-shadow: none;
     display: flex;
     flex-direction: column;
   }
   
   .book-section .book-item:hover,
   .book-wrapper .book-item:hover {
     transform: none;
     box-shadow: none;
   }
   
   .book-item.book-1,
   .book-item.book-4,
   .book-item.book-5 {
     background: #016b72;
   }
   
   .book-item.book-2,
   .book-item.book-3,
   .book-item.book-6 {
     background: #174a4c;
   }
   
   .book-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 16px;
   }
   
   .book-head h4 {
     font-family: 'Aguafina Script', cursive;
     font-size: 44px;
     font-weight: 400;
     opacity: 0.4;
     color: #ffffff;
     margin: 0;
     line-height: 1;
   }
   
   .book-head img {
     height: 180px;
     width: auto;
     max-width: 45%;
     object-fit: contain;
   }
   
   .book-body h5,
   .book-body h3,
   .book-section .book-item h5 {
     font-size: 26px;
     font-weight: 600;
     color: #ffffff;
     margin-bottom: 10px;
   }
   
   .book-body p,
   .book-section .book-item p {
     font-size: 15px;
     color: rgba(255, 255, 255, 0.9);
     margin: 0;
     line-height: 1.45;
   }
   
   .book-body a,
   .book-section .book-item a {
     color: #ffffff;
     text-decoration: underline;
   }
   
   /* Fallback: current genre-books-grid → teal tile layout */
   .genre-books-section .genre-books-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0;
     background: #0a3d40;
   }
   
   .genre-books-section .book-item {
     padding: 35px 20px 35px 35px;
     color: #ffffff;
     background: #016b72;
     height: 100%;
     border-radius: 0;
     box-shadow: none;
     min-height: 280px;
   }
   
   .genre-books-section .book-item:nth-child(2),
   .genre-books-section .book-item:nth-child(3),
   .genre-books-section .book-item:nth-child(6),
   .genre-books-section .book-item.branding,
   .genre-books-section .book-item.video-book,
   .genre-books-section .book-item.cover-design {
     background: #174a4c;
   }
   
   .genre-books-section .book-item.online,
   .genre-books-section .book-item.web-design,
   .genre-books-section .book-item.audio-book,
   .genre-books-section .book-item:nth-child(1),
   .genre-books-section .book-item:nth-child(4),
   .genre-books-section .book-item:nth-child(5) {
     background: #016b72;
   }
   
   .genre-books-section .book-item h3,
   .genre-books-section .book-item h4 {
     font-size: 26px;
     font-weight: 600;
     color: #ffffff;
   }
   
   .genre-books-section .book-item p,
   .genre-books-section .book-item a {
     color: rgba(255, 255, 255, 0.92);
   }
   
   .genre-books-section .book-item-icon img {
     height: 80px;
     width: auto;
     filter: brightness(0) invert(1);
     opacity: 0.85;
   }
   
   .genre-books-section .book-item-link {
     color: #ffffff;
     text-decoration: underline;
     font-weight: 600;
     margin-top: auto;
   }
   
   .genre-books-section .section-heading {
     font-size: 40px;
     font-weight: 600;
     color: #212529;
   }
   
   .genre-books-section .section-subheading {
     font-size: 28px;
     color: #5c6387;
   }
   
   /* --------------------------------------------------------------------------
      6. Get-ready CTA
      -------------------------------------------------------------------------- */
   
   .get-ready-section,
   .cta-strip.get-ready-section {
     padding: 50px 0;
     background-color: #0098a2;
     background-image: url('../images/ready-bg1.png');
     background-size: cover;
     background-position: center;
   }
   
   .get-ready-section .row {
     align-items: center;
   }
   
   .get-ready-section h2,
   .get-ready-content h2 {
     font-size: 42px;
     color: #000000;
     font-weight: 700;
     margin-bottom: 8px;
   }
   
   .get-ready-section p,
   .get-ready-content p {
     font-size: 17px;
     color: #ffffff;
     margin-bottom: 0;
   }
   
   .get-ready-image {
     text-align: center;
   }
   
   .get-ready-image img {
     max-width: 160px;
     margin: 0 auto;
     display: block;
   }
   
   .get-ready-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 10px;
     justify-content: flex-end;
   }
   
   .get-ready-section .btn-primary {
     background: #ffffff;
     border-color: #ffffff;
     color: #212529;
     box-shadow: inset 0 0 0 0 #212529;
   }
   
   .get-ready-section .btn-primary:hover {
     color: #ffffff !important;
     background: #ffffff;
     border-color: #ffffff;
     box-shadow: inset 0 0 0 100vmax #212529;
   }
   
   .get-ready-section .btn-outline {
     background: transparent;
     border-color: #000000;
     color: #000000;
     box-shadow: inset 0 0 0 0 #ffffff;
   }
   
   .get-ready-section .btn-outline:hover {
     color: #000000 !important;
     border-color: #000000;
     box-shadow: inset 0 0 0 100vmax #ffffff;
   }
   
   .get-ready-phone {
     display: block;
     width: 100%;
     margin-top: 12px;
     color: #ffffff;
     font-size: 18px;
     font-weight: 600;
     text-align: right;
   }
   
   .get-ready-phone:hover {
     color: #000000;
   }
   
   /* --------------------------------------------------------------------------
      7. Portfolio
      -------------------------------------------------------------------------- */
   
   .portfolio-section {
     padding: 75px 0 80px;
     background: #ffffff;
   }
   
   .portfolio-section .container,
   .portfolio-section .container3 {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 16px;
   }
   
   .portfolio-section .section-top,
   .portfolio-section .detective-style,
   .detective {
     text-align: center;
     margin-bottom: 40px;
   }
   
   .portfolio-section .section-heading,
   .detective-style,
   .detective h1,
   .detective h2 {
     font-size: 32px;
     line-height: 1.3;
     max-width: 820px;
     margin: 0 auto;
     text-align: center;
     text-transform: uppercase;
     font-weight: 700;
     color: #212529;
     letter-spacing: 0.02em;
   }
   
   .portfolio-section .section-subheading,
   .detective p {
     font-size: 16px;
     line-height: 1.6;
     max-width: 640px;
     margin: 10px auto 0;
     text-align: center;
     color: #555555;
     text-transform: none;
     font-weight: 400;
   }
   
   .portfolio-tabs,
   .tabs-container3 .tabs3 {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
     margin: 30px 0 40px;
     padding: 10px;
   }
   
   .portfolio-tab,
   .genre-tab {
     background: #d0d0d0;
     color: #212529;
     border: none;
     padding: 12px 24px;
     border-radius: 6px;
     font-size: 15px;
     font-weight: 600;
     text-transform: uppercase;
     cursor: pointer;
     transition: background-color 0.25s ease, color 0.25s ease;
   }
   
   .portfolio-tab:hover,
   .genre-tab:hover {
     background: #bdbdbd;
     color: #000000;
   }
   
   .portfolio-tab.is-active,
   .portfolio-tab.active,
   .genre-tab.is-active,
   .genre-tab.active {
     background: #016b72;
     color: #ffffff;
   }
   
   .book-cover-grid,
   .book-container3 {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 40px;
     justify-content: center;
     margin-bottom: 40px;
   }
   
   .book-cover,
   .genre-book.book-cover {
     border: 1px solid #ddd;
     border-radius: 8px;
     overflow: hidden;
     background: #ffffff;
     box-shadow: none;
     height: 400px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .book-cover:hover,
   .genre-book.book-cover:hover {
     transform: translateY(-6px);
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
   }
   
   .book-cover img,
   .genre-book.book-cover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 8px;
   }
   
   /* Inactive categories hidden by JS; reinforce */
   .book-cover[hidden],
   .genre-book[hidden],
   .book-cover.is-hidden,
   .genre-book.is-hidden {
     display: none !important;
   }
   
   /* --------------------------------------------------------------------------
      8. Steps
      -------------------------------------------------------------------------- */
   
   .step-section,
   .steps-section {
     padding-top: 100px;
     padding-bottom: 80px;
     background-image: url('../images/step-bg.png');
     background-size: cover;
     background-position: bottom;
     background-color: #f5f7fa;
   }
   
   .step-section .section-heading,
   .steps-section .section-heading {
     font-size: 40px;
     font-weight: 600;
     color: #212529;
     max-width: 85%;
     margin-bottom: 40px;
   }
   
   .steps-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
   }
   
   .step-item,
   .step-card {
     position: relative;
     padding: 15px;
     padding-bottom: 70px;
     height: 100%;
     background: transparent;
     border: none;
     box-shadow: none;
     border-radius: 0;
   }
   
   .step-card::before {
     display: none;
   }
   
   .step-item img,
   .step-card-icon img {
     margin-bottom: 20px;
     max-width: 90px;
     height: auto;
   }
   
   .step-item h5,
   .step-card h3,
   .step-card h4 {
     font-size: 20px;
     font-weight: 600;
     color: #212529;
     margin-bottom: 10px;
   }
   
   .step-item p,
   .step-card p {
     font-size: 14px;
     color: #555555;
     margin: 0;
   }
   
   /* --------------------------------------------------------------------------
      9. Hire / testimonials
      -------------------------------------------------------------------------- */
   
   .hire-section {
     padding: 0;
     background: none;
     overflow: hidden;
   }
   
   .hire-split {
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 640px;
     width: 100%;
   }
   
   .hire-left {
     background-image: url('../images/cta-bg.png');
     background-size: cover;
     background-position: right;
     padding: 60px;
     color: #212529;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   
   .hire-left h4 {
     font-size: 30px;
     margin-bottom: 20px;
     font-weight: 600;
     text-transform: uppercase;
     color: #212529;
     letter-spacing: 0;
   }
   
   .hire-left .section-heading,
   .hire-left h2 {
     font-size: 40px;
     font-weight: 600;
     font-style: italic;
     color: #212529;
     margin-bottom: 20px;
     line-height: 1.25;
   }
   
   .hire-left .section-heading span,
   .hire-left h2 span {
     position: relative;
     display: inline-block;
     color: #212529;
   }
   
   .hire-left .section-heading span::before,
   .hire-left h2 span::before {
     content: "";
     height: 4px;
     width: 100%;
     bottom: 0;
     background: #212529;
     position: absolute;
   }
   
   .hire-left p {
     font-size: 28px;
     font-weight: 600;
     color: #212529;
     margin-bottom: 24px;
     line-height: 1.35;
   }
   
   .hire-left .btn-primary {
     background: #016b72;
     border-color: #016b72;
     color: #ffffff;
     display: inline-flex;
     align-items: center;
     gap: 10px;
   }
   
   .hire-left .get-ready-phone {
     color: #212529;
     text-align: left;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     width: auto;
   }
   
   .hire-left .get-ready-phone:hover {
     color: #016b72;
   }
   
   .hire-left .get-ready-actions {
     justify-content: flex-start;
     flex-direction: column;
     align-items: flex-start;
   }
   
   .hire-right {
     display: flex;
     flex-direction: column;
     padding: 0;
     background: #ffffff;
   }
   
   .hire-right > .row,
   .hire-right > div:first-child:not(.testimonial-wrap) {
     background: #016b72;
     color: #e7ecf7;
     padding: 40px 50px;
     margin: 0;
     align-items: center;
   }
   
   .hire-right > .row h3,
   .hire-right > div:first-child h3 {
     font-size: 28px;
     font-weight: 600;
     color: #ffffff;
     margin-bottom: 10px;
   }
   
   .hire-right > .row p,
   .hire-right > div:first-child p {
     font-size: 18px;
     color: #e7ecf7;
     margin: 0;
   }
   
   .hire-right .testimonial-wrap {
     background: #212529;
     color: #ffffff;
     text-align: center;
     padding: 50px 40px;
     flex: 1;
     max-width: none;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
   
   .testimonial-wrap .testimonial-author-info,
   .testimonial-wrap h4 {
     font-size: 22px;
     font-weight: 700;
     color: #ffffff;
     text-transform: none;
     margin-bottom: 20px;
   }
   
   .testimonial-quote,
   .testimonial-wrap .testimonial-quote,
   .testimonial-wrap p.testimonial-quote {
     font-size: 28px;
     line-height: 1.45;
     color: #ffffff;
     font-style: normal;
     text-align: center;
     margin-bottom: 30px;
   }
   
   .testimonial-author {
     justify-content: center;
     flex-direction: column;
     gap: 12px;
   }
   
   .testimonial-dots,
   .testimonial-nav {
     justify-content: center;
     margin-top: 24px;
   }
   
   /* --------------------------------------------------------------------------
      10. FAQ
      -------------------------------------------------------------------------- */
   
   .faq-section {
     padding: 70px 0;
     background-image: url('../images/faq-bg.png');
     background-size: cover;
     background-position: bottom;
     background-color: #eef2f7;
   }
   
   .faq-section .row {
     align-items: center;
   }
   
   .faq-intro .section-heading {
     font-size: 42px;
     font-weight: 600;
     position: relative;
     padding-bottom: 20px;
     margin-bottom: 30px;
     color: #212529;
   }
   
   .faq-intro .section-heading::before {
     content: "";
     position: absolute;
     width: 70px;
     height: 4px;
     background: #212529;
     bottom: 0;
     left: 0;
   }
   
   .faq-intro p {
     font-size: 20px;
     margin-bottom: 40px;
     color: #212529;
   }
   
   .faq-accordion {
     background: transparent;
     padding: 0;
     box-shadow: none;
     border-radius: 0;
   }
   
   .faq-item {
     background: #ffffff;
     border: none;
     border-radius: 6px;
     margin-bottom: 14px;
     padding: 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
     overflow: hidden;
   }
   
   .faq-question {
     padding: 18px 22px;
     font-size: 20px;
     font-weight: 600;
     color: #212529;
   }
   
   .faq-icon {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: 2px solid #016b72;
     color: #016b72;
     font-size: 22px;
     font-weight: 400;
     line-height: 1;
   }
   
   .faq-item.is-open .faq-icon,
   .faq-item.active .faq-icon {
     transform: rotate(45deg);
     background: #016b72;
     color: #ffffff;
   }
   
   .faq-answer {
     padding-left: 22px;
     padding-right: 22px;
   }
   
   .faq-item.is-open .faq-answer,
   .faq-item.active .faq-answer {
     padding-bottom: 18px;
   }
   
   .faq-answer p {
     font-size: 16px;
     font-weight: 500;
     color: #555555;
   }
   
   /* --------------------------------------------------------------------------
      11. Footer
      -------------------------------------------------------------------------- */
   
   .site-footer {
     background-color: #03115a;
     background-image: url('../images/footer-bg.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     padding-top: 100px;
     color: #ffffff;
     min-height: 500px;
   }
   
   .site-footer a {
     color: #ffffff;
   }
   
   .site-footer a:hover {
     color: #0aadc0;
   }
   
   .site-footer h2,
   .site-footer h3,
   .site-footer h4 {
     color: #ffffff;
     padding-top: 10px;
     padding-bottom: 15px;
   }
   
   .footer-brand,
   .footer-grid {
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     padding-bottom: 40px;
     margin-bottom: 40px;
   }
   
   .footer-brand .site-logo {
     display: inline-block;
     margin-bottom: 20px;
     padding-bottom: 20px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
     width: 100%;
   }
   
   .footer-brand p {
     color: rgba(255, 255, 255, 0.85);
     font-size: 16px;
   }
   
   .footer-contact li {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 16px;
   }
   
   .footer-contact .icon,
   .footer-contact li img.icon {
     width: 40px;
     height: 40px;
     padding: 8px;
     border-radius: 50%;
     background: #ffffff;
     object-fit: contain;
     flex-shrink: 0;
   }
   
   .footer-social a {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #ffffff;
     color: #03115a;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-right: 8px;
   }
   
   .footer-social a:hover {
     background: #0aadc0;
     color: #ffffff;
   }
   
   .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     padding: 24px 0 40px;
   }
   
   .footer-bottom,
   .footer-bottom a,
   .copyright {
     color: rgba(255, 255, 255, 0.85);
   }
   
   /* --------------------------------------------------------------------------
      Section headings (shared polish)
      -------------------------------------------------------------------------- */
   
   .home .section-heading {
     font-family: 'Inter', sans-serif;
     font-weight: 600;
     color: #212529;
   }
   
   .home .section-subheading {
     font-family: 'Inter', sans-serif;
     color: #5c6387;
   }
   
   /* --------------------------------------------------------------------------
      14. Responsive
      -------------------------------------------------------------------------- */
   
   @media (max-width: 1199px) {
     .home .hero-title {
       font-size: 34px;
     }
   
     .home .hero-text {
       font-size: 22px;
     }
   
     .home .header-top-links {
       right: 180px;
     }
   
     .book-left,
     .book-right {
       flex: 0 0 100%;
       max-width: 100%;
       min-height: 280px;
     }
   
     .book-middle {
       flex: 0 0 100%;
       max-width: 100%;
     }
   
     .book-wrapper {
       grid-template-columns: repeat(2, 1fr);
       min-height: auto;
     }
   
     .book-cover-grid {
       grid-template-columns: repeat(4, 1fr);
       gap: 30px;
     }
   
     .book-cover,
     .genre-book.book-cover {
       height: 340px;
     }
   }
   
   @media (max-width: 991px) {
     .home .nav-list {
       margin-top: 0;
     }
   
     .home .header-top-links {
       display: none;
     }
   
     .home .hero {
       min-height: 680px;
     }
   
     .home .hero-inner {
       padding-top: 180px;
       flex-direction: column;
       align-items: flex-start;
     }
   
     .home .hero-banner-img {
       max-width: 42%;
       right: 0;
       opacity: 0.85;
     }
   
     .home .hero-bottom::before {
       width: 100%;
     }
   
     .home .hero-bottom-text {
       width: 100%;
       font-size: 20px;
     }
   
     .looking-section {
       padding: 60px 0;
     }
   
     .looking-section .section-heading,
     .looking-section h2 {
       font-size: 32px;
     }
   
     .looking-section .section-subheading {
       font-size: 24px;
     }
   
     .looking-section p {
       font-size: 18px;
     }
   
     .check-list li {
       width: 100%;
       margin: 6px 0;
       font-size: 20px;
     }
   
     .looking-image {
       text-align: center;
       margin-bottom: 20px;
     }
   
     .ready-section .section-heading,
     .ready-section .section-subheading,
     .ready-title {
       width: 90%;
     }
   
     .ready-section .features-grid {
       grid-template-columns: 1fr;
       gap: 30px;
     }
   
     .ready-section .feature-card::after,
     .ready-section .read-content::after,
     .read-content::after {
       left: -20px;
       width: 64px;
       height: 64px;
     }
   
     .genre-books-section .genre-books-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   
     .get-ready-section {
       background: #0098a2 !important;
       text-align: center;
       padding: 30px 0;
     }
   
     .get-ready-actions {
       justify-content: center;
     }
   
     .get-ready-phone {
       text-align: center;
     }
   
     .book-cover-grid {
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
     }
   
     .steps-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   
     .hire-split {
       grid-template-columns: 1fr;
     }
   
     .hire-left {
       padding: 40px 30px;
     }
   
     .hire-left .section-heading,
     .hire-left h2 {
       font-size: 30px;
     }
   
     .hire-left p {
       font-size: 22px;
     }
   
     .testimonial-quote,
     .testimonial-wrap .testimonial-quote {
       font-size: 22px;
     }
   
     .footer-brand,
     .footer-grid {
       border-bottom: none;
     }
   }
   
   @media (max-width: 767px) {
     .home .site-logo img {
       max-height: 52px;
     }
   
     .home .hero {
       min-height: 560px;
     }
   
     .home .hero-inner {
       padding-top: 140px;
       padding-bottom: 20px;
     }
   
     .home .hero-title {
       font-size: 28px;
     }
   
     .home .hero-text {
       font-size: 18px;
     }
   
     .home .hero-banner-img {
       display: none;
     }
   
     .home .hero .btn,
     .home .hero-actions .btn {
       font-size: 16px;
       padding: 12px 18px;
       width: 100%;
       text-align: center;
     }
   
     .home .hero-bottom {
       padding: 18px 12px;
     }
   
     .home .hero-bottom-text {
       font-size: 18px;
     }
   
     .btn {
       font-size: 16px;
       padding: 12px 18px;
     }
   
     .looking-section .section-heading {
       font-size: 28px;
     }
   
     .ready-section .section-heading,
     .ready-title h3 {
       font-size: 28px;
       width: 100%;
     }
   
     .book-wrapper {
       grid-template-columns: 1fr;
     }
   
     .book-head img {
       height: 120px;
     }
   
     .book-head h4 {
       font-size: 36px;
     }
   
     .book-left h3 {
       font-size: 30px;
     }
   
     .genre-books-section .genre-books-grid {
       grid-template-columns: 1fr;
     }
   
     .book-cover-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 16px;
     }
   
     .book-cover,
     .genre-book.book-cover {
       height: 280px;
     }
   
     .portfolio-section .section-heading {
       font-size: 24px;
     }
   
     .step-section .section-heading,
     .steps-section .section-heading {
       font-size: 28px;
       max-width: 100%;
     }
   
     .steps-grid {
       grid-template-columns: 1fr;
     }
   
     .faq-intro .section-heading {
       font-size: 32px;
     }
   
     .faq-question {
       font-size: 17px;
     }
   
     .site-footer {
       padding-top: 60px;
       background-image: url('../images/footer-bg.jpg');
     }
   }
   
   @media (max-width: 480px) {
     .book-cover-grid {
       grid-template-columns: 1fr 1fr;
       gap: 12px;
     }
   
     .portfolio-tab,
     .genre-tab {
       padding: 10px 14px;
       font-size: 13px;
     }
   
     .get-ready-section h2 {
       font-size: 30px;
     }
   }
   
   /* ===== CRITICAL LAYOUT FIXES (post-HTML rewrite) ===== */
   
   .home .site-header .header-inner {
     max-width: 1700px;
     width: min(100% - 40px, 1700px);
   }
   
   .btn-header,
   .home .header-cta .btn {
     background: #fff !important;
     border-color: #fff !important;
     color: #000 !important;
     font-size: 18px !important;
     text-shadow: 1px 2px 2px hsla(0, 0%, 24%, 0.42);
     box-shadow: inset 0 0 0 0 #0098a2 !important;
     transition: color 0.35s ease, box-shadow 0.4s ease !important;
   }
   .btn-header:hover,
   .home .header-cta .btn:hover {
     color: #0098a2 !important;
     background: #fff !important;
     box-shadow: inset 0 0 0 100vmax #e8f7f8 !important;
   }
   
   .btn-dark-gray,
   .hero .btn-primary.btn-dark-gray {
     background: #3d4040 !important;
     border-color: #3d4040 !important;
     color: #fff !important;
     box-shadow: inset 0 0 0 0 #ffffff !important;
   }
   .btn-dark-gray:hover,
   .hero .btn-primary.btn-dark-gray:hover {
     color: #000 !important;
     background: #3d4040 !important;
     border-color: #3d4040 !important;
     box-shadow: inset 0 0 0 100vmax #ffffff !important;
   }
   
   .hero {
     position: relative !important;
     overflow: hidden !important;
   }
   .hero-inner {
     position: relative;
     z-index: 2;
     min-height: 820px;
     padding-top: 250px;
     padding-bottom: 40px;
     display: block !important;
   }
   .hero-content {
     max-width: 58%;
   }
   .hero-banner-img {
     position: absolute !important;
     bottom: 0 !important;
     right: 8% !important;
     max-width: 30% !important;
     width: 30% !important;
     z-index: 1 !important;
     margin: 0 !important;
   }
   .hero-banner-img img {
     width: 100%;
     height: auto;
     display: block;
   }
   
   .looking-sub {
     font-size: 30px !important;
     color: #5c6387 !important;
     font-weight: 500 !important;
     margin-bottom: 30px !important;
     line-height: 1.35;
   }
   .looking-section .an-check-llist,
   .looking-section .check-list {
     list-style: none;
     margin: 0 0 30px;
     padding: 0;
     flex: 0 0 50%;
     display: flex;
     flex-wrap: wrap;
   }
   .looking-section .an-check-llist li,
   .looking-section .check-list li {
     display: inline-block !important;
     font-size: 22px !important;
     vertical-align: top;
     padding-left: 0 !important;
     display: flex !important;
     flex: 0 0 45%;
   }
   .looking-section .an-check-llist li::before,
   .looking-section .check-list li::before {
     display: none !important;
     content: none !important;
   }
   .looking-section .an-check-llist li img {
     margin-right: 10px;
     width: 22px;
     height: 22px;
     vertical-align: middle;
   }
   .looking-2 {
     mix-blend-mode: darken;
     max-width: 100%;
   }
   .looking-section .pl-0 { padding-left: 0 !important; }
   .looking-section .pr-0 { padding-right: 0 !important; }
   .looking-section .text-right { text-align: right; }
   
   /* Ready */
   .ready-title {
     text-align: center;
     width: 70%;
     margin: 0 auto 60px;
   }
   .ready-title h3 {
     font-size: 38px;
     color: #212529;
     font-weight: 500;
     line-height: 1.35;
   }
   .ready-title h4 {
     font-size: 18px;
     color: #212529;
     font-weight: 400;
     margin-top: 16px;
   }
   .read-content {
     position: relative;
     max-width: 900px;
   }
   .read-content.two {
     margin: 60px 0 0;
   }
   .read-content::after {
     content: '';
     position: absolute;
     top: -12px;
     left: -50px;
     background-color: #0ba6b1db;
     width: 87px;
     height: 87px;
     border-radius: 50%;
     z-index: -1;
   }
   .read-content h4 {
     color: #212529;
     font-size: 26px;
     font-weight: 600;
   }
   .read-content span {
     color: #0ba6b1;
   }
   .read-content p {
     font-size: 15px !important;
     color: #212529;
     margin-bottom: 30px;
   }
   
   /* Book section - exact reference structure */
   .book-section {
     padding: 0;
   }
   .book-section .container-fluid {
     padding: 0;
     max-width: 100%;
   }
   .book-section-row {
     display: flex;
     flex-wrap: wrap;
     margin: 0;
   }
   .book-section .col-lg-4,
   .book-section .col-lg-6,
   .book-section .col-lg-2 {
     padding: 0;
   }
   .book-left {
     background-image: url('../images/b-1.png');
     background-size: cover;
     background-position: bottom;
     color: #fff;
     padding: 50px;
     min-height: 700px;
     flex: 0 0 33.333%;
     max-width: 33.333%;
   }
   .book-left > div {
     position: relative;
     border: 4px solid #fff;
     border-left: none;
     padding: 20px;
     padding-left: 0;
     padding-bottom: 100px;
     height: 100%;
     min-height: 600px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
   }
   .book-left > div::before {
     content: "";
     position: absolute;
     width: 4px;
     height: calc(100% - 295px);
     background: #fff;
     left: 0;
     top: 0;
   }
   .book-left > div::after {
     content: "";
     position: absolute;
     width: 4px;
     height: 90px;
     background: #fff;
     left: 0;
     bottom: 0;
   }
   .book-left h4 {
     font-size: 20px;
     color: #fff;
     margin-bottom: 0;
     text-transform: uppercase;
   }
   .book-left h3 {
     font-size: 40px;
     font-weight: 600;
     color: #fff;
     margin: 10px 0 0;
   }
   .book-middle {
     flex: 0 0 50%;
     max-width: 50%;
   }
   .book-right {
     background-image: url('../images/b-2.png');
     background-size: cover;
     background-position: center;
     flex: 0 0 16.666%;
     max-width: 16.666%;
     min-height: 700px;
   }
   .book-wrapper .row {
     display: flex;
     flex-wrap: wrap;
     margin: 0;
   }
   .book-wrapper .row > .col-md-6 {
     flex: 0 0 50%;
     max-width: 50%;
     padding: 0 !important;
   }
   .book-item {
     padding: 0 0 35px 35px;
     color: #fff;
     background: #016b72;
     height: 100%;
   }
   .book-item.book-2,
   .book-item.book-3,
   .book-item.book-6 {
     background: #174a4c;
   }
   .book-item.book-4,
   .book-item.book-5,
   .book-item.book-1 {
     background: #016b72;
   }
   .book-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .book-head h4 {
     font-family: 'Aguafina Script', cursive !important;
     font-size: 44px !important;
     position: relative;
     opacity: 0.4;
     color: #fff !important;
     margin: 0;
     text-transform: none !important;
     font-weight: 400 !important;
   }
   .book-head img {
     height: 180px;
     width: auto;
     object-fit: contain;
   }
   .book-body {
     padding-right: 35px;
   }
   .book-body h5 {
     font-size: 26px;
     font-weight: 600;
     color: #fff;
     margin: 0 0 10px;
   }
   .book-body p {
     font-size: 15px;
     color: #fff;
     line-height: 1.5;
     margin: 0;
   }
   .book-body p a {
     color: #fff;
     text-decoration: underline;
   }
   
   /* Portfolio reference */
   .container3 {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 16px 40px;
   }
   .detective {
     text-align: center;
     margin-bottom: 40px;
     padding: 75px 0 0;
   }
   .detective h1 {
     font-size: 32px !important;
     line-height: 1.3;
     max-width: 820px;
     margin: 0 auto;
     text-align: center;
     color: #212529 !important;
     font-weight: 700;
     text-transform: uppercase;
   }
   .subtitle3 {
     font-size: 1.2rem;
     color: #666;
     font-weight: 300;
     max-width: 640px;
     margin: 10px auto 0;
   }
   .tabs3 {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 5px;
     padding: 10px;
   }
   .tab-btn3 {
     background: #d0d0d0 !important;
     border: 2px solid transparent !important;
     color: #333 !important;
     padding: 12px 24px !important;
     border-radius: 6px !important;
     cursor: pointer;
     font-weight: 600;
     font-size: 15px;
     text-transform: none !important;
     margin: 0 !important;
   }
   .tab-btn3:hover {
     background: #c0c0c0 !important;
   }
   .tab-btn3.active,
   .tab-btn3.is-active {
     background: #016b72 !important;
     color: #fff !important;
   }
   .book-container3 {
     display: flex;
     justify-content: center;
     margin-bottom: 60px;
   }
   .book3 {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     max-width: 1200px;
     width: 100%;
   }
   .book-page3 {
     flex: 0 0 calc(20% - 24px);
     max-width: calc(20% - 24px);
     height: 400px;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 8px;
     overflow: hidden;
     transition: transform 0.3s ease;
   }
   .book-page3:hover {
     transform: translateY(-5px);
   }
   .book-page3 img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   /* Hire section */
   .hiring-section .hire-split,
   .hire-section .hire-split {
     display: flex;
     flex-wrap: wrap;
     margin: 0;
   }
   .hire-left {
     background-image: url('../images/cta-bg.png') !important;
     background-size: cover !important;
     background-position: right !important;
     padding: 60px !important;
     color: #212529 !important;
     flex: 0 0 50%;
     max-width: 50%;
   }
   .hire-left > div {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
     min-height: 640px;
   }
   .hire-left h4 {
     font-size: 30px !important;
     margin-bottom: 20px;
     font-weight: 600;
     text-transform: uppercase;
     color: #212529 !important;
   }
   .hire-left .an-primary-heading {
     font-size: 36px !important;
     font-weight: 600 !important;
     font-style: italic !important;
     color: #212529 !important;
     text-align: left !important;
     max-width: 100% !important;
     padding: 0 !important;
     margin-bottom: 20px !important;
   }
   .hire-left .an-primary-heading::before {
     display: none !important;
   }
   .hire-left p {
     font-size: 28px !important;
     font-weight: 600 !important;
     color: #212529 !important;
   }
   .cta-box {
     display: flex;
     margin-top: 70px;
     align-items: flex-end;
   }
   .cta-box .cta-book {
     margin-left: -40px;
     margin-bottom: -40px;
     max-width: 56%;
   }
   .cta-box > div {
     text-align: right;
   }
   .cta-box .chat {
     display: block;
     margin-left: -20px;
   }
   .cta-box .chat img {
     max-width: 180px;
   }
   .cta-box .tel {
     font-size: 28px;
     color: #030d40;
     font-weight: 600;
     display: block;
     text-decoration: none;
   }
   .cta-box .tel span {
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     text-transform: uppercase;
     font-size: 20px;
     color: #020c40;
     line-height: 20px;
     font-weight: 600;
     gap: 8px;
   }
   .hire-right {
     flex: 0 0 50%;
     max-width: 50%;
     display: flex;
     flex-direction: column;
     padding: 0 !important;
   }
   .hire-right-top {
     background: #016b72;
     color: #e7ecf7;
     padding: 10px 0;
   }
   .hire-right-top h3 {
     font-size: 28px;
     color: #e7ecf7;
     margin: 8px 0;
     font-weight: 600;
   }
   .hire-right-top .newdemands {
     font-size: 22px;
     margin-bottom: 10px;
   }
   .hire-right-top .col-sm-8 {
     padding: 10px 40px;
   }
   .testimonial-wrap {
     padding: 50px !important;
     background: #212529 !important;
     color: #fff !important;
     text-align: center !important;
     flex: 1;
   }
   .testimonial-wrap h4 {
     font-size: 30px !important;
     font-weight: 600;
     text-transform: uppercase;
     color: #fff !important;
   }
   .testimonial-wrap p {
     font-size: 22px !important;
     color: #fff !important;
     line-height: 1.45;
   }
   .tes-bottom {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 16px;
     margin-top: 24px;
   }
   
   /* Footer match */
   .site-footer {
     background-color: #03115a !important;
     background-image: url(../images/footer-bg.jpg) !important;
     background-size: cover !important;
     background-repeat: no-repeat !important;
     padding-top: 100px !important;
     color: #fff !important;
     background-position: inherit;
   }
   .site-footer a { color: #fff; }
   .site-footer a:hover { color: #0aadc0; }
   
   .get-ready-section {
     background: #0098a2 !important;
     padding: 50px 0 !important;
   }
   .get-ready-section h2 { color: #000 !important; font-size: 42px !important; }
   .get-ready-section p { color: #fff !important; }
   .btn-white {
     background: #fff !important;
     border-color: #fff !important;
     color: #212529 !important;
     box-shadow: inset 0 0 0 0 #212529 !important;
   }
   .btn-white:hover {
     color: #fff !important;
     background: #fff !important;
     box-shadow: inset 0 0 0 100vmax #212529 !important;
   }
   .btn-dark {
     background: #212529 !important;
     border-color: #212529 !important;
     color: #fff !important;
     box-shadow: inset 0 0 0 0 #ffffff !important;
   }
   .btn-dark:hover {
     color: #212529 !important;
     background: #212529 !important;
     box-shadow: inset 0 0 0 100vmax #ffffff !important;
   }
   
   @media (max-width: 991px) {
     .hero-content { max-width: 100%; }
     .hero-banner-img { display: none; }
     .hero-inner { min-height: auto; padding-top: 160px; }
     .book-left, .book-middle, .book-right {
       flex: 0 0 100% !important;
       max-width: 100% !important;
     }
     .book-right { min-height: 200px; }
     .book-wrapper .row > .col-md-6 {
       flex: 0 0 100% !important;
       max-width: 100% !important;
     }
     .hire-left, .hire-right {
       flex: 0 0 100% !important;
       max-width: 100% !important;
     }
     .ready-title { width: 100%; }
     .read-content::after { left: -10px; width: 60px; height: 60px; }
     .book-page3 {
       flex: 0 0 calc(50% - 16px);
       max-width: calc(50% - 16px);
       height: 320px;
     }
     .looking-section .an-check-llist li,
     .looking-section .check-list li {
       width: 100% !important;
     }
   }