body {
      font-family: 'Open Sans', Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      background: #fff;
      color: #000;
    }
    
    h1, h2, h3, h4, h5, h6,
    .section-title,
    .hero h1,
    .form-box h2,
    .nav-pills .nav-link,
    .card-custom p,
    .bottom-section p {
      font-family:  Arial, sans-serif;
      font-weight: 700;
    }
    
    h1 {
      font-size: 2.5rem;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    h3 {
      font-size: 1.75rem;
    }
    
    p {
      font-family: 'Open Sans', Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
    }

    /* Top bar */
    .top-bar {
      background-color: #F39D17;
      color: #fff;
      text-align: center;
      padding: 12px 15px;
      font-size: 15px;
      font-weight: 500;
      font-family: 'Montserrat', Arial, sans-serif;
    }

    /* Navbar */
    .navbar-nav {
      padding: 20px;
    }
    .navbar-nav .nav-link {
      font-weight: 500;
      color: #333 !important;
      margin: 0 15px;
      position: relative;
      transition: all 0.3s ease;
      font-size: 16px;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link.active {
      color: #F39D17 !important;
    }
    .navbar-nav .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #F39D17;
      transition: width 0.3s ease;
    }
    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link:focus::after,
    .navbar-nav .nav-link.active::after {
      width: 100%;
    }

    /* Buttons */
    .btn-orange, .btn-custom {
      background: #F39D17;
      color: #fff !important;
      font-weight: 600;
      padding: 10px 18px;
      border-radius: 6px;
      border: none;
      transition: 0.3s;
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 16px;
    }
    .btn-orange:hover, .btn-custom:hover {
      background: #000;
      color: #fff !important;
    }
    
    /* Wiggle animation for Live Chat and Phone buttons */
    @keyframes wiggle {
      0%, 7% { transform: rotateZ(0); }
      15% { transform: rotateZ(-5deg); }
      20% { transform: rotateZ(4deg); }
      25% { transform: rotateZ(-4deg); }
      30% { transform: rotateZ(3deg); }
      35% { transform: rotateZ(-2deg); }
      40%, 100% { transform: rotateZ(0); }
    }
    .wiggle-animation {
      animation: wiggle 2s linear infinite;
      display: inline-block;
    }

    /* Hero Section */
    .hero {
      background: url('images/homebanner.webp') no-repeat center/cover;
      position: relative;
      color: #fff;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.65);
    }
    .hero .container {
      position: relative;
      z-index: 1;
      padding-top: 70px;
      padding-bottom: 70px;
    }
    .hero h1 {
      font-size: 2.5rem;
      font-weight: 700;
    }
    .hero ul {
      list-style: none;
      padding: 0;
      margin: 20px 0;
    }
    .hero ul li {
      margin-bottom: 10px;
      font-family: 'Open Sans', Arial, sans-serif;
      font-size: 16px;
    }
    .hero ul li::before {
      content: "✔";
      color: #F39D17;
      margin-right: 8px;
      font-weight: bold;
    }

    /* Form box */
    .form-box {
      background: #fff;
      border-radius: 12px;
      padding: 25px;
      border: 2px solid #F39D17;
      box-shadow: 0 5px 20px rgba(247, 148, 29, 0.8);
    }
    .form-box h2 {
      font-size: 1.5rem;
      text-align: center;
      margin-bottom: 15px;
      color: #000;
    }
    .form-control:focus {
      box-shadow: none !important;
      border-color: #ddd !important;
    }
    .form-box input,
    .form-box textarea {
      border-radius: 6px;
      margin-bottom: 12px;
      border: 1px solid #ddd;
      font-family: 'Open Sans', Arial, sans-serif;
      font-size: 16px;
    }
    .form-box button {
      width: 100%;
      border-radius: 6px;
      font-weight: 600;
      padding: 12px;
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 16px;
    }

    /* Floating quote button */
    .quote-btn {
      position: fixed;
      top: 50%;
      right: 0;
      transform: translateY(-50%) rotate(-90deg);
      transform-origin: right center;
      background: #F39D17;
      color: #fff;
      padding: 10px 20px;
      font-weight: bold;
      border-radius: 6px 6px 0 0;
      cursor: pointer;
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 16px;
    }

    /* Book Showcase */
    .section {
      padding: 50px 20px;
      text-align: center;
    }
    .nav-pills .nav-link.active {
      background-color: #f8a71b !important;
      color: #fff !important;
    }
    /* Nav pills customization */
    .nav-pills .nav-link {
      color: #000; 
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 16px;
    }

 .book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 30px;
  gap: 0; 
}

.book {
  text-align: center;
}

.book img {
  max-width: 70%;
  height: auto;
  animation: floatUpDown 3s infinite ease-in-out;
}



    /* Floating Animation */
    @keyframes floatUpDown {
      0%   { transform: translateY(0); }
      50%  { transform: translateY(-15px); }
      100% { transform: translateY(0); }
    }

    .load-more {
      margin-top: 20px;
    }
    
    .load-more .btn-link {
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 16px;
      text-decoration: none;
    }

    /* 📱 Mobile Responsive Styling */
    @media (max-width: 768px) {
      body {
        font-size: 14px;
      }
      
      h1 {
        font-size: 1.8rem;
      }
      
      h2 {
        font-size: 1.5rem;
      }
      
      h3 {
        font-size: 1.3rem;
      }
      
      .section h1 {
        font-size: 1.8rem;
        line-height: 1.4;
      }

      /* hide nav tabs on mobile */
      .nav-pills {
        display: none;
      }

      /* grid 2x2 books */
      .book-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }

      /* arrows with category title */
      .carousel-arrows {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0;
      }
      .carousel-arrows button {
        background: #f8a71b;
        border: none;
        padding: 5px 10px;
        font-weight: bold;
        border-radius: 4px;
        color: #fff;
        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 14px;
      }
      .carousel-arrows h3 {
        margin: 0;
        font-size: 1.3rem;
        font-weight: bold;
      }

      /* load more button center */
      .load-more {
        text-align: center;
      }
    }

    /* Publishing Solutions */
    .section-title {
      font-size: 2rem;
      font-weight: bold;
    }
    .highlight {
      color: #F39D17;
    }
    .card-custom {
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      transition: 0.3s;
      background: #fdfdfd;
      height: 100%;
    }
    .card-custom img {
      max-width: 60px;
      margin-bottom: 10px;
    }
    .card-custom:hover {
      background: #F39D17;
      color: #fff;
      transform: translateY(-5px);
    }
    .card-custom p {
      font-size: 16px;
      margin-bottom: 0;
    }

    .five-col-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* Always 5 columns */
      gap: 20px;
      text-align: center;
      max-width: 1100px;
      margin: 0 auto;
    }

    .five-col-grid .card-custom {
      background: #fff;
      border: 1px solid #F39D17;
      padding: 15px;
      border-radius: 8px;
      transition: 0.3s;
      color: #8d8d8d;
    }

    .five-col-grid .card-custom img {
      max-width: 100px;
      margin-bottom: 10px;
    }

    .five-col-grid .card-custom:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      color: #686767;
    }

    .empty-slot {
      visibility: hidden; /* Blank slots hide but take space */
    }

    /* responsive */
    @media (max-width: 992px) {
      .five-col-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media (max-width: 768px) {
      .five-col-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 576px) {
      .five-col-grid {
        grid-template-columns: 1fr;
      }
    }

    .bottom-section {
      text-align: center;
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .bottom-section p {
      font-size: 18px;
      font-weight: 600;
    }


    
        .bg-dark-custom {
            background-color: #0d0d0d;
        }

        .text-secondary-custom {
            color: #a0a0a0 !important;
        }

        .border-secondary-custom {
            border-color: #333 !important;
        }

        .btn-live-chat {
            background-color: #F39D17;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            transition: background-color 0.3s;
        }

        .btn-live-chat:hover {
            background-color: #F39D17;;
        }

        .btn-phone {
            background-color: transparent;
            color: #ff9900;
            border: 1px solid #ff9900;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            transition: background-color 0.3s, color 0.3s;
        }

        .btn-phone:hover {
            background-color: #ff9900;
            color: #fff;
        }

        .list-link-item {
            margin-bottom: 0.5rem;
        }

.pub{
  font-size: 46px;
}
           
.story{
   /* Full-width background styles */
      background-color:black ;
           
}

.story1{
  font-size:32px;
  margin-top: 20px;
}

        /* Define the floating animation for the image/book and button */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .float-animation {
            animation: float 3s ease-in-out infinite;
        }

        .btn-custom-livechat2 {
            background-color: #F39D17;
            color: #ffffff;
            font-weight: bold;
            border: none;
            padding: 1rem 2rem;
        
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .btn-custom-livechat:hover {
            transform: scale(1.05);
            color: #FFEB3B;
            background-color: black;
        }

        .btn-custom-phone {
            background-color: transparent;
            color: white;
            font-weight: bold;
            border: 2px solid white;
            padding: 1rem 2rem;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .btn-custom-phone:hover {
            transform: scale(1.05);
            color: white;
            background-color: transparent;
        }
 
.consultant{
    background:linear-gradient(190deg, #F39D17, #100F0F);
}
        /* Define the floating animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .float-animation {
            animation: float 3s ease-in-out infinite;
        }

        /* Custom button styles to match the image */
        .btn-custom-livechat {
            background-color: #000000; /* A vibrant orange from the image */
            color: #F39D17;
            font-weight: bold;
            border: none;
            padding: 1rem 2rem;
            /* Changed border-radius to a small value for a slightly rounded rectangular shape */
            border-radius: 8px;
            box-shadow: 0 0 10px #F39D17; /* Glowing effect */
            transition: transform 0.3s ease;
        }

        .btn-custom-livechat:hover {
            transform: scale(1.05);
            background-color: #F39D17;
            color: black;
        }

        .btn-custom-phone {
            background-color: white;
            color: #F39D17;
            font-weight: bold;
            border: 2px solid #F39D17; /* Orange border from the image */
            padding: 1rem 2rem;
            /* Changed border-radius to a small value for a slightly rounded rectangular shape */
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Subtle glow */
            transition: transform 0.3s ease;
        }
        
        .btn-custom-phone:hover {
            transform: scale(1.05);
            color: black;
            background-color: white;
        }

        
        /* Removed max-width on .main-container to allow it to take full width */
        .section-box {
            border-radius: 12px;
            padding: 2.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out; /* Add transition for a smooth effect */
        }

        /* Hover effect for the cards */
        .section-box:hover {
            transform: translateY(-5px); /* Moves the card up slightly */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increases the shadow */
        }
        
        .box-orange {
            background-color: #F39D17;
            color: black;
        }

        /* Define hover state for the orange box */
        .box-orange:hover {
            background-color: #F39D17;
            color: white;
        }

        .box-light-orange {
            background-color: #FFF3E0;
            color: black;
        }

        /* Define hover state for the light orange boxes */
        .box-light-orange:hover {
            background-color: #F39D17;
            color: white;
        }

          .review {
            background: linear-gradient(190deg, #185244, #100F0F);
        }
        
        .bg-light-orange {
            background-color: #FFF3E0;
            border-radius: 12px;
        }

        /* Define the floating animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        .rating-stars {
            color: #F39D17; /* Orange color for the stars */
        }
        .review-box {
            background-color: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .list-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.75rem;
        }
        /* Changed icon color to black */
        .list-icon {
            color: black;
            font-size: 1.25rem;
        }
        .form-control-custom {
            border: none;
            border-bottom: 2px solid #F39D17; /* Orange border bottom */
            border-radius: 0;
            background-color: transparent;
        }
        .btn-livechat {
            background-color: #F39D17 !important;
            color: black;
            font-weight: bold;
            border-radius: 8px;
            box-shadow: 0 0 10px #F39D17;
        }
        .btn-phone {
            background-color: white;
            color: black;
            font-weight: bold;
            border: 2px solid #F39D17;
            border-radius: 8px;
        }
        .btn-sign-up {
            background-color: #F39D17;
            color: black;
            font-weight: bold;
            border-radius: 8px;
        }