/*!
Theme Name: bluejayhomes
Theme URI: https://bluejayhomes.co.in/
Author: bluejayhomes
Author URI: https://bluejayhomes.co.in/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bluejayhomes
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

bluejayhomes is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

}

.header-scrolled {
  padding: 10px 0 !important; /* reduced height */
  background: #fff !important; /* scroll background */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-brand .logo {
  height: 60px;
}

.nav-links {
  display: flex;
  gap: 2rem;

}

.nav-link {
  background: #00b6fb;
  color: #fff;
  padding: 8px 15px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.nav-link:hover {
    background: #00a0b0;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 188, 212, 0.6);
}

/* Hero Section */
.hero {
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="30" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="15" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="45" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
  opacity: 0.3;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-text {
  color: white;
}

.hero-text h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #E8D5E8;
}

.hero-description {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #D1C4D1;
  line-height: 1.6;
}

.hero-cta-button {
  background: white;
  color: #8B458B;
  border: none;
  padding: 10px 15px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 2rem;
}

.hero-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hero-image {
  position: relative;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
  .hero .container .hero-content .hero-text {
    margin-top: 70px !important;
  }
}


/* Courses Section */
.courses {
  background: #fff;
  padding: 5rem 0;
}

.section-title {
  color: 000;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.course-card {
  background: #1a1a1a;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease;
  border: 2px solid #7c2148;
}

.course-card:hover {
  transform: translateY(-10px);
}

.course-card img {
  width: 100%;
  height: 328px;
  object-fit: cover;
}

.course-info {
  padding: 2rem;
  color: white;
}

.course-info h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #7c2148;
}

.course-info ul {
  list-style: none;
  margin-bottom: 2rem;
}

.course-info li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #333;
}

.course-info li:last-child {
  border-bottom: none;
}

.course-btn {
  background: #7c2148;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.course-btn:hover {
  background: #A855A8;
  transform: translateY(-2px);
}

/* Reviews Section */
.reviews {
  background: #f8f9fa;
  padding: 5rem 0;
}

.reviews-header {
  text-align: center;
  margin-bottom: 3rem;
}

.reviews-header h2 {
  background: #7c2148;
  color: white;
  display: inline-block;
  padding: 0.5rem 2rem;
  border-radius: 25px;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.reviews-header h3 {
  font-size: 2rem;
  color: #333;
}

.reviews-slider {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-behavior: smooth;
}

.review-card {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  min-width: 300px;
  flex-shrink: 0;
  text-align: center;
  border: 2px solid #E8D5E8;
}

.review-card.active {
  border-color: #8B458B;
}

.google-icon {
  margin-bottom: 1rem;
}

.stars {
  color: #FFD700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.review-card p {
  font-style: italic;
  margin-bottom: 1rem;
  color: #666;
  line-height: 1.6;
}

.reviewer {
  font-weight: 600;
  color: #8B458B;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dot.active {
  background: #8B458B;
}

/* How To Section */
.how-to {
  background: #f8f9fa;
  padding: 3rem 0;
}

.how-to-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.how-to-card {
  background: linear-gradient(135deg, #7c2148 0%, #7c2148 100%);
  border-radius: 15px;
  padding: 2rem;
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-content {
  text-align: center;
  z-index: 2;
}

.how-to-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.how-to-card h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.play-button {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.oranegtb-map {
    height: 380px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* Gallery Section */
    .gallery {
      background: white;
      padding: 5rem 0;
    }
    .gallery .section-title {
      color: #000000;
      text-align: center;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    /* Swiper Slider */
    .gallery-slider .swiper-slide img {
      width: 90%;
      height: 250px;
      object-fit: cover;
      border-radius: 10px;
      transition: transform 0.3s ease;
    }
    .gallery-slider .swiper-slide img:hover {
      transform: scale(1.05);
    }

    /* Navigation & Pagination */
    .gallery-slider .swiper-button-next,
    .gallery-slider .swiper-button-prev {
      color: #7c2148;
      background: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .gallery-slider .swiper-button-next:after,
    .gallery-slider .swiper-button-prev:after {
      font-size: 1rem;
    }
    .gallery-slider .swiper-pagination-bullet {
      background: #ccc;
      opacity: 1;
    }
    .gallery-slider .swiper-pagination-bullet-active {
      background: #ccc;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
      .gallery {
        padding: 3rem 0;
      }
      .gallery .section-title {
        font-size: 2.4rem;
        padding: 0.4rem 1.5rem;
      }
      .gallery-slider .swiper-button-next,
      .gallery-slider .swiper-button-prev {
        display: none; /* Hide arrows on mobile */
      }
      
      .gallery-slider .swiper-slide img {
      width: 90%;
      height: 250px;
      object-fit: cover;
      border-radius: 10px;
      transition: transform 0.3s ease;
      margin-left: 20px;
    }
    
    }
    
     @media (max-width: 768px) {
       .gallery .section-title {
        font-size: 40px;
        text-align: center;
    }
         
}

/* Contact Section */
.contact {
  background: #f8f9fa;
  padding: 5rem 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.contact-info h3 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1rem;
}

.contact-info p {
  color: #666;
  margin-bottom: 2rem;
}

.contact-details {
  margin-bottom: 2rem;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}

.contact-item .label {
  font-weight: 600;
  color: #333;
}

.contact-item .value {
  color: #333;
}

.contact-form {
  padding: 2rem;
  border-radius: 15px;
  color: white;
}

.contact-form h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.contact-form h4 {
  font-size: 1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  color: #000000 !important;
  backdrop-filter: blur(10px);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.contact-form select {
  color: white;
}

.contact-form select option {
  background: #8B458B;
  color: white;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
}

.checkbox-group label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.submit-btn {
  background: white;
  color: #8B458B;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Footer */
.footer {
  background: #231f20;
  color: white;
  padding: 3rem 0 1rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.footer-brand .logo {
  height: auto;
  width: 130px;
  margin-bottom: 1rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  color: white;
  transition: opacity 0.3s ease;
}

.social-links a:hover {
  opacity: 0.7;
}

.footer-info p {
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 2.2rem;
  }

  .courses-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .navbar {
    padding: 1rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .reviews-slider {
    flex-direction: column;
  }

  /*.review-card {
    min-width: auto;
  }*/
  .review-card {
  max-width: 350px;
  margin: 50px auto;
  padding: 30px 40px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  text-align: center;
  border: 1px solid #eee;
}

  .how-to-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 2.2rem;
    margin-top: 30px;
  }

  .section-title {
    font-size: 2rem;
  }

  .courses-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .course-card {
    margin: 0 1rem;
  }

  .container {
    padding: 0 15px;
  }
}


/*video section*/
.video-section {
  max-width: 1200px;
  margin: 10px auto;
  padding: 0 20px;
  text-align: center;
}

.section-title {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 35px;
  color: #7c2148; /* Purple */
}

/* ✅ 3 Columns Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns */
  gap: 25px;
}

/* ✅ Thumbnail Card */
.video-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  background: #7c2148;
}

.video-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .35s ease;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  background: #7c2148;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
  transition: .25s;
}

.video-caption {
  background: #7c2148;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 6px;
}

/* Hover Effects */
.video-card:hover img {
  transform: scale(1.08);
}
.video-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.15);
}

/* ✅ Mobile & Tablet Responsive */
@media (max-width: 992px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns on tablet */
  }
}
@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: repeat(1, 1fr); /* One column on mobile */
  }
}


.contact-link {
  color: #fff;
  text-decoration: none;
  transition: .3s ease;
}

.contact-link:hover {
  opacity: .8;
}


/*About Us*/

.about-us {
      background: white;
      padding: 5rem 0;
    }

    .about-us .section-title {
      color: white;
      background: #7c2148;
      display: inline-block;
      padding: 0.5rem 2rem;
      border-radius: 25px;
      font-size: 1.5rem;
      margin: 0 auto 3rem;
      text-align: center;
      width: fit-content;
    }

    .about-card {
      background: #ccc;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-wrap: wrap;
    }

    .about-image {
      flex: 1 1 300px;
      overflow: hidden;
      order: 1; /* Default: image first (left) */
    }

    .about-content {
      flex: 1 1 400px;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(135deg, #fdfbff 0%, #f8f5ff 100%);
      order: 2; /* Default: content second (right) */
    }

    .about-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .about-content h1 {
      font-size: 28px;
      font-weight: 700;
      color: #2d1b4e;
      margin-bottom: 20px;
      line-height: 1.3;
    }

    .about-content p {
      font-size: 16px;
      color: #555;
      line-height: 1.7;
      margin-bottom: 18px;
    }

    .about-content p strong {
      color: #2d1b4e;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background-color: #7c2148;
      color: white;
      padding: 14px 28px;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      width: fit-content;
      margin-top: 10px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
    }

    .cta-button:hover {
    background: #A855A8;
    transform: translateY(-2px);
    }

    .cta-button .chat-icon {
      width: 20px;
      height: 20px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9-2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>') no-repeat center;
      background-size: contain;
      display: inline-block;
    }

    .about-card.right-image .about-image {
      order: 2;
    }

    .about-card.right-image .about-content {
      order: 1;
    }

    @media (max-width: 992px) {
      .about-card {
        flex-direction: column;
      }
      .about-image,
      .about-content {
        order: initial !important; /* Stack normally: image on top */
      }
      .about-content {
        padding: 30px 25px;
      }
      .about-content h1 {
        font-size: 24px;
      }
    }

    @media (max-width: 600px) {
      .about-content h1 {
        font-size: 22px;
      }
      .about-content p {
        font-size: 15px;
      }
      .cta-button {
        padding: 12px 24px;
        font-size: 15px;
      }
      .about-us .section-title {
        font-size: 1.3rem;
        padding: 0.4rem 1.5rem;
      }
    }
    
@media (max-width: 768px) {
    .bj-btn {
        width: 100% !important;
        max-width: 320px;
    }
}    
    
    
    /* Universal Section Spacing Fix for Mobile */
@media (max-width: 480px) {
  section,
  .bj-slideshow-section,
  .why-choose-section,
  .courses,
  .reviews,
  .how-to,
  .gallery,
  .contact,
  .about-us,
  .video-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important; 
  }
}