@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

    #loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 1s ease, visibility 1s ease;
    }

    #loader.fade-out {
        opacity: 0;
        visibility: hidden;
    }

    /* Floating book pages */
    .page {
        position: absolute;
        width: 80px;
        height: 120px;
        background: white;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        opacity: 0;
        animation: pageFloat 4s ease-in-out infinite;
        border-radius: 4px;
        overflow: hidden;
    }



    @keyframes pageFloat {
        0% {
            opacity: 0;
            transform: translateY(100vh) rotate(0deg);
        }

        10%,
        90% {
            opacity: 0.6;
        }

        100% {
            opacity: 0;
            transform: translateY(-100px) rotate(180deg);
        }
    }

    .logo-container {
        /* position: relative; */
        display: flex;
        align-items: center;
        gap: 15px;
        perspective: 1000px;
    }

    .book-icon {
        width: 100px;
        height: 100px;
        /* position: relative; */
        opacity: 0;
        animation: bookOpen 2s ease-out forwards;
    }

    .book-cover {
        left: 100px;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url("../images/favicon.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        /* background: linear-gradient(180deg, #b0822f 0%, #10213f 100%); */
        transform-origin: left;
        animation: coverFlip 2s ease-out forwards;
    }

    @keyframes coverFlip {
        0% {
            transform: rotateY(0deg);
        }

        50%,
        100% {
            transform: rotateY(-180deg);
        }
    }

    @keyframes bookOpen {
        0% {
            opacity: 0;
            transform: scale(0.5);
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .book-pages {
        position: absolute;
        top: 5px;
        left: 10px;
        width: 70px;
        height: 90px;
    }

    .page-line {
        width: 100%;
        height: 2px;
        background: rgba(102, 126, 234, 0.3);
        margin: 8px 0;
        opacity: 0;
        animation: pageLineAppear 0.5s ease-out forwards;
    }

    .page-line:nth-child(1) {
        animation-delay: 1.5s;
    }

    .page-line:nth-child(2) {
        animation-delay: 1.6s;
    }

    .page-line:nth-child(3) {
        animation-delay: 1.7s;
    }

    .page-line:nth-child(4) {
        animation-delay: 1.8s;
    }

    @keyframes pageLineAppear {
        from {
            opacity: 0;
            width: 0;
        }

        to {
            opacity: 1;
            width: 100%;
        }
    }

    .letters {
        display: flex;
        gap: 5px;
    }

    .letter img {
        width: 100%;
        height: 10vh;
    }

    .letter {
        font-size: 0px;
        font-weight: bold;
        color: #2d3748;
        opacity: 0;
        transform: translateY(50px);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .letter-g {
        animation: letterSlideIn 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s forwards;
        color: #10213f;
    }

    @keyframes letterSlideIn {
        0% {
            opacity: 0;
            transform: translateY(400px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .sparkle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: #667eea;
        border-radius: 50%;
        opacity: 0;
        animation: sparkleEffect 1.5s ease-out forwards;
    }

    @keyframes sparkleEffect {
        0% {
            opacity: 0;
            transform: scale(0);
        }

        50% {
            opacity: 1;
            transform: scale(1.5);
        }

        100% {
            opacity: 0;
            transform: scale(0);
        }
    }

    .buttomsvg {
        width: 100%;
        height: auto;
    }



    @media (max-width: 768px) {
        .logo-container {
            gap: 5vw;
        }

        .book-icon {
            width: 80px;
            height: 80px;
        }

        .letters {
            gap: 9vw;
        }

        .letter img {
            width: 100%;
            height: 8vh;
        }

        .page {
            width: 12vw;
            height: 18vw;
        }
    }

    @media (max-width: 480px) {
        .book-icon {
            width: 60px;
            height: 60px;
        }

        .book-cover {
            left: 50px;
        }

        .letters {
            gap: 9vw;
        }

        .letter img {
            width: 100%;
            height: 5vh;
        }

        .page {
            width: 12vw;
            height: 18vw;
        }
    }

    .testimonial-wrapper {
        max-width: 1500px;
        margin: 120px auto 0px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 40px;
        padding: 20px;
        align-items: start;
        justify-content: space-between;
        justify-items: end;
    }

    .t-card img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
        margin-bottom: 15px;
        border: 3px solid #fff;
    }

    .t-left-heading img {
        width: auto;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
        margin-bottom: 15px;
        border: 3px solid #fff;
    }

    /* LEFT HEADING AREA */
    .t-left-heading h2 {
        font-family: "playfair display", serif;
        font-size: 42px;
        font-weight: 800;
        color: #0e1a3b;
    }

    .t-left-heading .subheading {
        font-family: "Noto Serif", serif;
        font-size: 18px;
        color: #666;
        margin-top: 12px;
        line-height: 1.5;
    }

    /* RIGHT SIDE TWO-COLUMN GRID */
    .t-right-grid {
        width: 75%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    /* SCROLL BOX */
    .scroll-box {
        height: 60vh;
        overflow: hidden;
        position: relative;
    }

    /* SCROLL CONTENT */
    .scroll-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        animation: scrollVertical 18s linear infinite;
    }

    /* CARD DESIGN */
    .t-card {
        background: linear-gradient(135deg, #e3c07c, #b08a37);
        padding: 18px;
        border-radius: 12px;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
        color: #222;
        font-size: 15px;
        line-height: 1.5;
    }

    /* VIDEO DESIGN */
    .video-card {
        width: 100%;
        height: 200px;
        border-radius: 12px;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    }

    /* FOOTER TEXT */
    .testimonial-light {
        text-align: center;
        font-size: 15px;
        color: #777;
        margin-top: 20px;
    }

    /* SCROLL ANIMATION */
    @keyframes scrollVertical {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-70%);
        }
    }

    /* RESPONSIVE */
    @media (max-width: 900px) {
        .testimonial-wrapper {

            grid-template-columns: 1fr;
            justify-items: center;
            align-items: center;
        }

        .t-right-grid {
            width: auto;
            grid-template-columns: 1fr;
        }

        .t-left-heading {

            text-align: center;
        }
    }

    @media (max-width: 1200px) {
        .t-right-grid {
            width: auto;
        }

    }

    .bg-gallery-wrapper {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .bg-gallery-wrapper::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: #000000d1;
        z-index: 1;
    }

    /* .bg-gallery-wrapper .bg-gallery {
        position: absolute;
        left: -100px;
        top: -50%;
        width: 100%;
        height: 200%;
        transform: rotate(-20deg);
        opacity: 0.4;
    }

    .bg-gallery-wrapper .bg-gallery .bg-item {
        width: 400px;
        height: 500px;
        position: absolute;
        right: 0;
        top: 0;
        transform: translate3d(-200%, 150%, 0);
    }

    .bg-gallery-wrapper .bg-gallery .bg-item img {
        width: auto;
        height: 100%;
        object-fit: cover;
    }  */

    .section-container {
        width: auto;
        text-align: center;
        padding: 8% 20px;
        background-image: url("../images/3.webp");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color: #fff;
    }


    .section-container1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .section-container2 {
        position: relative;
        z-index: 1;
        width: 50%;
        padding: 60px 0px 155px;
    }

    .heading {
        font-family: "Inter", sans-serif;
        font-size: 54px;
        font-weight: 900;
        color: #ffffff;
        text-shadow: #000000 -2px 2px 0px;
        margin-bottom: 15px;
    }
      .heading2 {
        display: none;
        font-family: "Inter", sans-serif;
        font-size: 54px;
        font-weight: 900;
        color: #ffffff;
        text-shadow: #000000 -2px 2px 0px;
        margin-bottom: 15px;
    }

    .sub-heading {

            font-family: "Poppins", sans-serif;
        font-size: 18px;
        color: #e2e2e2;
        max-width: 750px;
        margin: auto;
    }

    /* 
    .cta-btn {
        background: #b57e10;
        color: white;
        padding: 14px 32px;
        border-radius: 40px;
        margin-top: 25px;
        font-size: 18px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: 0.3s;
    } */
    .cta-btn {
        background: linear-gradient(to right, #b57e10, #f5d56f);
        border: none;
        padding: 12px 28px;
        border-radius: 30px;
        font-family: "Inter", sans-serif;
        font-size: 21px;
        margin-top: 25px;
        font-weight: 500;
        color: var(--primary);
        cursor: pointer;
    }

    .cta-btn:hover {
        background: linear-gradient(to right, #f5d66f00, #b57e1000);
        border: 1px solid #b57e10;
        color: #ffffff;
    }

    .cta-btn1 {
        /* background: linear-gradient(to right, #b57e10, #f5d56f); */
        border: 1px solid #b57e10;
        background-color: transparent;
        padding: 12px 28px;
        border-radius: 30px;
        font-family: "Inter", sans-serif;
        font-size: 21px;
        margin-top: 25px;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
    }

    .cta-btn1:hover {
        background: linear-gradient(to right, #f5d56f, #b57e10);
        color: var(--primary);
        border: 1px solid #ffffff00;
    }

    /* .cta-btn:hover,
    .cta-btn:focus {
        background: #b78d22;
        outline: none;
    } */


  
        @media (max-width:1024px) {
       

        .section-container2 {
            width: auto;
        }
        .about-container {
     gap: 0px; }


  @media (max-width: 900px) {
        .section-container {
        padding: 13% 19px 39%;


        }

        .section-container2 {
            width: auto;
            padding: 0%;
        }

  .heading {
            display: none;
            font-size: 31px;
        }
        .heading2 {
            display: block;
            font-size: 40px;
        }

        .sub-heading {
            font-size: 16px;
            padding: 0pc 7pc;
        }

        .cta-btn {
        width: auto;
        }
        
    }
          @media (max-width: 500px) {
        .heading {
            display: none;
            font-size: 31px;
        }
        .heading2 {
            display: block;
            font-size: 22px !important;
        }
         .section-container2 {
            width: auto;
    padding: 60px 0px 155px;
        }
         .sub-heading {
            font-size: 16px;
        }
            .sub-heading {
        font-size: 16px;
        padding: 0% ;
    }

     }
    }

    .features-section {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      padding: 1pc 0 1pc;
    }

    .features-container {
      margin-top: -9px;
      margin-bottom: -10px;
      height: 30vh;
      background-color: #121F3E;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      padding: 0 2rem;
    }

    .feature-item {
      text-align: center;
      padding: 1pc;
    }

    .feature-item h4 {
      font-family: "Inter", sans-serif;
      color: #fff;
      margin-top: 10px;
      font-weight: 500;
      font-size: 22px;
    }

    .buttomsvg12 {
        width: 100%;
        height: auto;
    }

    /* Media Queries for responsiveness */

    /* For screens smaller than 1200px */
    @media (max-width: 1200px) {
        .features-container {
            padding: 0 1rem; /* Reduced padding for smaller screens */
        }

        .feature-item h4 {
            font-size: 20px; /* Smaller font size for h4 */
        }
    }

    /* For screens smaller than 900px */
    @media (max-width: 900px) {
        .features-container {
            flex-direction: column; /* Stack items vertically */
            height: auto; /* Let the container grow based on content */
            align-items: flex-start; /* Align items to the left */
        gap: 30px;
        }

        .feature-item {
            width: 100%; /* Let the feature items take full width */
            margin-bottom: 1rem; /* Add space between items */
        }

        .feature-item h4 {
            font-size: 18px; /* Even smaller font size for mobile */
        }
    }

    /* For screens smaller than 600px */
    @media (max-width: 600px) {
        .feature-item h4 {
            font-size: 16px; /* Further reduce font size for small screens */
        }

        .buttomsvg12 {
           
    width: 100%;
    height: 45px; /* Make SVG images smaller */
        }
    }
    :root {
      --gold: #d6b26e;
      --gold-dark: #c3a45f;
      --text-dark: #1e1e1e;
      --muted: #555;
      --bg: #f9f9f9;
      --card-bg: #d6b26e;
      --card-radius: 14px;
      --text-light: #eee;
    }

    /* CONTAINER */
    .container {
     margin: auto;
    padding: 160px 18px 70px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    }

    /* LEFT COLUMN */
    .left h1 {
    font-family: 'Inter', sans-serif;
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #121f3e;
    }

    .left p {
      font-family: "Poppins", sans-serif;
      font-size: 18px;
      color: var(--muted);
      /* max-width: 420px; */
      line-height: 1.6;
    }

    /* RIGHT COLUMN */
    .testimonials-wrapper {
      height: 50vh;
      overflow: hidden;
      position: relative;
    }

    /* Horizontal scroll container */
 .testimonials {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: scrollLeft 40s linear infinite;
}


    /* Pause on hover */
    .testimonials-wrapper:hover .testimonials {
      animation-play-state: paused;
    }

    /* CARD */
    .card1 {
      background-color: var(--card-bg);
      border-radius: var(--card-radius);
      padding: 22px 24px;
      width: 340px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      flex-shrink: 0;
    }

    /* Card inner layout */
    .card-header {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* Trustpilot row */
    .trustpilot {
      display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    justify-content: space-between;
    }

    /* Avatar */
    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      object-fit: cover;
      background: #fff;
      border: 2px solid var(--gold);
      flex-shrink: 0;
    }

    /* Trustpilot logo */
    .trustpilot img.logo {
      width: 45%;
      height: auto;
    }

    /* Quote text */
    .quote {
      color: #121f3e;
      font-size: 17px;
      line-height: 1.5;
      text-align: left;
      margin-bottom: 12px;
      flex-grow: 1;
      /* pushes author to bottom */
    }

    /* Author */
    .author {
      font-weight: 700;
      font-size: 15px;
      color: #494949;
      text-align: right;
    }

    /* SCROLL ANIMATION */
@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


   /* EXTRA SMALL DEVICES (PHONES) */
@media (max-width: 600px) {
  .container {
    padding: 80px 16px 50px;
    gap: 40px;
  }

  .left h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  .left p {
    font-size: 15px;
  }

  .testimonials-wrapper {
        height: 350px;
  }

  .testimonials {
    gap: 16px;
    animation-duration: 60s; /* slower scroll for mobile */
  }

  .card1 {
    width: 260px;
    padding: 18px 20px;
  }

  .avatar {
    width: 48px;
    height: 48px;
  }

  .quote {
    font-size: 14.5px;
    line-height: 1.4;
  }

  .author {
    font-size: 14px;
  }

  .trustpilot img.logo {
    width: 40%;
  }
}