html {
   scroll-behavior: smooth;
   }
 
    /* RESET */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'PT Sans', sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #fafafa;
      overflow-x: hidden;
    }
    h4{
      font-family: 'PT Sans', sans-serif;
      color: #ff9800;
    }    
    /* HERO */
    .hero {
      height: 100vh;
      background: url(https://cdn.pixabay.com/photo/2020/06/09/15/32/camp-5278843_640.png) center/cover no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #fff;
      margin-top: 70px;
      padding: 0 20px;
    }
    .hero h1 {
      font-size: 2.8rem;
      text-shadow: 0 3px 12px rgba(0,0,0,0.4);
      animation: fadeIn 2s ease-in-out;
    }
    .hero p {
      font-size: 1.2rem;
      margin: 15px 0 30px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.3);
      max-width: 600px;
      animation: fadeIn 2.5s ease-in-out;
    }

    @keyframes fadeIn {
        from {opacity: 0; transform: translateY(20px);}
        to {opacity: 1; transform: translateY(0);}
    }
    
    .play-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      padding: 12px 25px;
      border-radius: 50px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      text-decoration: none;
      transition: 0.3s;
      font-weight: 600;
      font-family:  'PT Sans', sans-serif;
    }
    .play-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
    .play-btn .fa-google-play { color: #fff; font-size: 1.2rem;}

    /* MAIN SECTION */
    main {
      padding: 70px 20px;
      max-width: 1100px;
      margin: auto;
    }
    main h4, main h5, main h6 {
       color: #ff9800;
       margin: 20px 0 10px;
       text-transform: uppercase;
       font-weight: 600;
       font-family: 'PT Sans', sans-serif;
       }
    main p { color: #555; margin-bottom: 15px; }

    #main_par {
        font-size: 20px;
        text-align: center;
        margin-bottom: 30px;
    }

    h4 {
        font-size:35px;
        text-align: center;
    }
    /*SHORT PARAGRAPHS*/
    .short_par{
        font-size: 15px;
        margin-left: 62px;
        margin-top: -13px;
    }
    
    .other_par {
        font-size: 18px;
        text-align: center;
    }

    /*Read buttons on reflections and devotion*/
    .read_button{
    color: #fafafa;
    font-size: 15px;
    font-weight: 600;
    font-family: 'PT Sans', sans-serif;
    background-color: linear-gradient(135deg, #FFC107 0%, #FF9800 50%, #F57C00 100%);
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .read_button:hover {
      background: linear-gradient(45deg, #b89200, #e8c200);
      transform: translateY(-3px);
    }

    /* Center the entire section */
    .get-started-section {
    text-align: center;       /* centers text inside */
    display: flex;
    flex-direction: column;   /* stack elements vertically */
    align-items: center;      /* center horizontally */
    justify-content: center;  /* optional: center vertically if container has height */
    padding: 40px 20px;       /* spacing around the section */
    max-width: 800px;         /* optional: limit width for readability */
    margin: 0 auto;           /* center the container itself */
   }

    /* Button styling */
    #get_started_button {
    background-color: linear-gradient(135deg, #FFC107 0%, #FF9800 50%, #F57C00 100%);
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'PT Sans', sans-serif;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s;
    }

    #get_started_button:hover {
    background-color: linear-gradient(135deg, #FFB300 0%, #FB8C00 50%, #E65100 100%);
    transform: translateY(-2px);
    }

   .get-started-section {
      padding: 20px;
    }
    #main_par {
      font-size: 18px;
    }
    
    #get_started_button {
      padding: 10px 20px;
      font-size: 14px;
    }
   
    /* ===== Audio Container ===== */
    .audio-container {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: #fff;
      padding: 18px 20px;
      border-radius: 15px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      gap: 15px;
      width: 90%;
      max-width: 420px;
      margin-bottom: 30px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .audio-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }

    /* ===== Album Art ===== */
    .album-cover {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid #ff9800;
      animation: spin 6s linear infinite, pulse 1.4s ease-in-out infinite;
      animation-play-state: paused;
      flex-shrink: 0;
    }

    .album-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ===== Play Button ===== */
    .plays-btn {
      background: linear-gradient(135deg, #FFC107 0%, #FF9800 50%, #F57C00 100%);
      color: #fff;
      border: none;
      outline: none;
      border-radius: 50%;
      width: 55px;
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 26px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      flex-shrink: 0;
    }

    .plays-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 0 15px linear-gradient(135deg, #FFB300 0%, #FB8C00 50%, #E65100 100%);
    }

    /* ===== Audio Info ===== */
    .audio-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }

    .audio-title {
      font-weight: 600;
      color: #333;
      margin-bottom: 6px;
      font-size: 15px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    /* ===== Progress Bar ===== */
    .progress-bar {
      width: 100%;
      height: 6px;
      background: #eee;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .progress {
      height: 100%;
      width: 0%;
      background: linear-gradient(135deg, #FFC107 0%, #FF9800 50%, #F57C00 100%);
      transition: width 0.1s linear;
    }

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

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    /* ===== Responsive Design ===== */
    @media (max-width: 600px) {
      .audio-container {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        max-width: 95%;
        margin-bottom: 30px;
      }

      .album-cover {
        width: 60px;
        height: 60px;
        border-width: 2.5px;
      }

      .plays-btn {
        width: 50px;
        height: 50px;
        font-size: 22px;
      }

      .audio-title {
        font-size: 14px;
      }

      .progress-bar {
        height: 5px;
      }
      }

    /*CARD ICON FOR DEVOTIONS SUNRISE*/
    #sunrise {
    color: #ff9800;                /* Sun icon color */
    background-color: #fdf2e0;  /* Soft orange background */
    border-radius: 50%;         /* Makes it round */
    width: 50px;                /* Circle size */
    height: 50px;
    font-size: 25px;            /* Icon size */
    display: flex;              /* Center content */
    justify-content: center;    /* Horizontally center icon */
    align-items: center;        /* Vertically center icon */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    }

    /* Hover effect */
    #sunrise:hover {
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    }
/*CARD ICON FOR THE REFLECTIONS SUNSET*/
 #sunset {
  color: #000;                /* Sun icon color */
  background-color: #f8f8f8;  /* Soft orange background */
  border-radius: 50%;         /* Makes it round */
  width: 50px;                /* Circle size */
  height: 50px;
  font-size: 25px;            /* Icon size */
  display: flex;              /* Center content */
  justify-content: center;    /* Horizontally center icon */
  align-items: center;        /* Vertically center icon */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover effect */
#sunset:hover {
  transform: rotate(15deg) scale(1.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
   }

    /* GRID FOR DEVOTION + REFLECTION */
/* Full-width colored background */
.MajorColorSection1 {
  background-color: #f7f6f6; /* dark background color */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 60px 0;
  text-align: center; /* optional for titles */
  color: #fff;        /* make text readable on dark background */
}

/*title + description for cards of devotion & reflections*/
#dev_title1 {
  color: #ff9800;
  font-size: 24px;
  margin-left: -230px;
  margin-top: -50px;
  margin-bottom: 0px;
}
#dev_desc1 {
  font-size: 14px;
  margin-left: 76px;
  margin-top: -10px;
}

#dev_title {
  color: #ff9800;
  font-size: 24px;
  margin-left: -270px;
  margin-top: -50px;
  margin-bottom: 0px;
}
#dev_desc {
  font-size: 14px;
  margin-left: 76px;
  margin-top: -10px;
}

/* Centered content inside the section */
.section-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left; /* align text to the left */
}

/* Cards container */
.devotion-reflection {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

/* Your existing card style */
.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  flex: 1;
  min-width: 300px;
  transition: 0.3s;
  color: #f7f6f6; /* text color for dark background */
}

#course_title {
  color: #000000; /* Dark text for titles */
  font-size: 21px;
}
/* Responsive: 1 column on small screens */
@media (max-width: 768px) {
  .devotion-reflection {
    grid-template-columns: 1fr;
  }
  #dev_title1 {
    margin-left: 0;
    text-align: center;
  }
  #dev_title {
    margin-left: -35px;
    text-align: center;
  }
  #dev_desc1 {
    margin-left: 57px;
    text-align: center;
  }
  #dev_desc {
    margin-left: 70px;
    text-align: center;
  }
}
  /* READ MORE LINK */
  .read-more {
    color: #ff9800;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    margin-top: 5px;
    text-align: left;     /* aligns text to the left */
    margin: 0;            /* optional: remove default margin */
    padding: 0;           /* optional: remove default padding */
    }
    .read-more:hover { text-decoration: underline; }

   /* MOTIVATIONAL SPEECHES SECTION */
   .motivational_speeches_section {
    margin-top: 60px;
    background-color: #fafafa; /* light background for contrast */
    width: 100%;            /* ensures full width */
    padding: 40px 0;        /* optional: adds space above/below content */
    width: 100vw;        /* full viewport width */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;  /* shift to center full-bleed */
    margin-right: -50vw;
    padding: 40px 0;     /* optional: spacing */
    }
    .motivational_speeches_section h4 {
    text-align: center;
    margin-bottom: 10px;
    }
    /* Container styling */
.speeches {
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* Card styling */
.speech-card {
  border: 40px solid #f7f6f6;
  border-radius: 0px;
  overflow: hidden;
  margin: 20px auto 0;
  cursor: pointer;
  box-shadow: 0 4px 8px #0000001a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 90%;             /* default for mobile */
  max-width: 600px;       /* cap max width */
}

.speech-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Image inside card */
.speech-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Text inside card */
.speech-card-content {
  padding: 10px 15px;
  text-align: center;
}

/* ========================= */
/* RESPONSIVE ADJUSTMENTS */
/* ========================= */

/* Small phones */
/* ========================= */
/* MOBILE / SMALL PHONES */
/* ========================= */
@media (max-width: 480px) {
  .speech-card {
    width: 95%;
    border-width: 20px; /* thinner border for mobile */
  }

  .speech-card img {
    width: 100%;        /* full width of card */
    height: auto;       /* maintain aspect ratio */
    aspect-ratio: 3/4;  /* portrait ratio: height > width */
    object-fit: cover;  /* cover the area */
  }
}
/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
  .speech-card {
    width: 80%;
  }
}

/* Small desktops and up */
@media (min-width: 769px) {
  .speech-card {
    width: 50%;
  }
}

    

    /* COURSES CARDS ARE HERE */
    .courses {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    .course-card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      overflow: hidden;
      transition: 0.3s;
    }
    .course-card:hover { transform: translateY(-3px); }
    .course-card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
    .course-card-content {
      padding: 15px;
    }
    .course-card-content h6 {
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 8px;
    }

    /* CATEGORY SLIDER */
    .category-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    gap: 15px; /* space between images */
    scroll-behavior: smooth;
    }
    /* Base (desktop) */
   .category-slider img {
    width: 550px;
    max-width: 580px;
    height: 230px;
    object-fit: cover;
    border-radius: 0px;
    flex-shrink: 0;
    }

    /* Medium screens (tablets) */
    @media (max-width: 992px) {
    .category-slider img {
    width: 400px;
    max-width: 420px;
    height: 300px;
    }
   }
   /* Small screens (large phones) */
   @media (max-width: 768px) {
  .category-slider img {
    width: 500px;
    max-width: 600px;
    height: 300px;
    justify-content: center; /* center the single image */
    gap: 0;                  /* optional: no extra gap */
   }
  }

  /* Very small screens (phones) */
  @media (max-width: 480px) {
  .category-slider img {
    width: 100%;
    max-width: 100%;
    height: 160px;}
  }

    /*FEATURES SECTION*/
    .features {
      margin-top: 60px;
    }

    /* KEY FEATURES GRID */
     /* Features grid default (desktop) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns by default */
  gap: 20px; /* spacing between grid items */
  padding: 0 20px; /* default padding on sides */
  margin: 0 auto; /* center container */
  max-width: 1200px; /* optional max width */
}

/* On small screens (below 768px) */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr; /* single column */
    gap: 15px;                  /* slightly smaller gap */
    padding-left: 40px;
    padding-right: 40px;        /* more space on sides */
  }
}

    .feature-card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      padding: 20px;
      text-align: center;
      transition: 0.3s;
    }
    .feature-card h6 {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }
    .feature-card:hover { transform: translateY(-3px); }
    .feature-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
      color: #ff9800;
      font-size: 30px;
      background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    }

    /* FOOTER */
    footer {
      background: #121830;
      padding: 50px 20px;
      color: #000;
    }
    .footer-container {
      max-width: 1100px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 40px;
    }
    .footer-left {
      flex: 1;
      min-width: 250px;
    }
    .footer-left h4 {
      font-size: 1.5rem;
      font-weight: bold;
      color:  #ff9800;;
      margin-bottom: 10px;
      text-align: left;
      letter-spacing: 1px;
    }
    .footer-left h5 {
      color: #f8f8f8;
      margin-top: 30px;
      margin-bottom: -25px;
      font-size: 16px;
    }
    .footer-left p {
      color:  #a8a8a8;;
      line-height: 1.5;
    }
    .social-icons {
      display: flex;
      gap: 10px;
      margin-top: 40px;
    }
    .social-icon:hover {
    transform: scale(1.1);          /* slight grow on hover */
    }
    .social-icons a {
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
      text-decoration: none;
    }
    
    /* SOCIAL LINKS UNIQUE COLORS */
    #fb { background: linear-gradient(45deg, #1877F2, #3b5998);}
    #ig{background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); font-size: 23px;}
    #tt { background: #000000;}
    #mail { background: linear-gradient(45deg, #1DA1F2, #0d8ddb);}
    #tk { background:linear-gradient(45deg, #69C9D0, #EE1D52);}
    #yt { background: linear-gradient(45deg, #FF0000, #CC0000);}
    #ln { background: linear-gradient(45deg, #0A66C2, #004182);}
 
   .footer-right {
      flex: 1;
      min-width: 250px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .footer-section {
      min-width: 120px;
    }
    .footer-section h5 {
      color: #f8f8f8;
      margin-bottom: 8px;
      font-size: 16px;
    }
    .footer-section ul {
      list-style: none;
      padding: 0;
    }
    .footer-section li {
      margin: 4px 0;
      cursor: pointer;
      color: #a1a1a1;
    }
    /* QUICK LINKS GRID */
    .quick_links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-auto-rows: auto; /* rows adjust automatically */
    gap: 04px 20px; /* space between rows and columns */
}

  /* Optional: style each list item */
.quick_links li a {
  text-decoration: none;
  color: #dbdbdb; /* change to your desired link color */
  font-size: 16px;
  transition: color 0.3s ease;
}

.quick_links li a:hover {
  color: #ff9800; /* hover color */
}

#footer-links li {
  margin: 8px 0;  /* space between list items */
  gap: 10px;
}

.footer-section li:hover { color: #ff9800; }
.footer-section a {text-decoration: none; color: inherit;}
.footer-section a:hover { color: #ff9800; }

 hr {
      border: none;
      height: 1px;
      background: #aaa;
      margin: 30px 0 15px;
    }
    .footer-bottom {
      text-align: center;
      font-size: 1rem;
      color: #a8a8a8;
    }