/* Default font for everything */
body {
    font-family: 'Quicksand', sans-serif;
    /* padding-top: 83px; Adjust this value as needed */
}

/* Stronger headings */
h1,
h2,
h3,
.display-4 {
    font-weight: 700;
    /* bold */
    letter-spacing: 1px;
}

p {
    font-weight: 400;
    line-height: 1.6;
}

/* Header section///////////////////////////////////////////// */


/* header {
    background:#000000e3 !important;
    background-image: url();
    border-bottom: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
     padding-top: 15px !important;   
        padding-bottom: 15px !important; 
        padding-left: 15px !important;  
        padding-right: 15px !important;
/* } */


 .navbar {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    } 


    /* ============================================
   HEADER STYLES (Copied from Home)
   ============================================ */

/* 1. The Black Bar */
header {
    background: #000000dd !important; /* The semi-transparent black */
    position: fixed; /* Keeps it stuck to top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4; /* Ensures it stays on top of everything */
      padding-top: 15px !important;   /* Was 2rem (approx 32px) */
        padding-bottom: 15px !important; 
        padding-left: 15px !important;  /* Reduce side padding too */
        padding-right: 15px !important;
    border-bottom: none !important;
    backdrop-filter: blur(5px); /* Optional: Makes the see-through part blurry/nice */
}

/* 2. Font Styles */
.nav-link {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #cfcac5; /* Light grey text */
}

.nav-link:hover, .nav-link.active {
    color: #747fe7 !important; /* Purple hover */
}

/* 3. Push Content Down (VERY IMPORTANT for Inner Pages) */
/* Since the header is "fixed", your inner page content will hide behind it.
   We need to add padding to the body to push it down. */
body {
    /* padding-top: 100px;  */
    padding-top: 68px;
}

/* 4. Mobile Menu Fixes */
@media (max-width: 768px) {
  .navbar-collapse {
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
  }
  
  header {
      padding-left: 15px !important;
      padding-right: 15px !important;
  }
}


/* hero section ///////////////////////////////////// */

#cstm-button {
    border-color: #5f69c8;
    color: #747fe7;
}
#cstm-button:hover {
  background-color: #5f69c8;
  color: #ffffff; /* makes text white on hover */
  border-color: #5f69c8;
}

#kits {
    color: #747fe7;
}

#playzone {
    color: #747fe7;
}

#about {
    color: #747fe7;
}

#contact {
    color: #747fe7;
}

#signup {
    background-color: #747fe7;
}

/* Cursorcanvas ///////////////////////////*/


#fireflyCanvas {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    z-index: 6;
    /* push it further back */
    pointer-events: none;
    /* allows clicks through canvas */
}

#hero .overlay {
    z-index: 1;
    /* overlay sits above canvas */
}

.hero-text,
.jugnu-header,
section,
footer {
    position: relative;
    z-index: 2;
    /* make sure content sits above canvas */
}
 
/* /////idea generator/////////////// */
.playzonehero{
    margin: 0px;
    margin-top: 0%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.386), rgba(0, 0, 0, 0.418)), url(imgs/new.svg) ;
    background-size: cover;
    background-repeat: no-repeat;
    height:800px;
    width:auto;  
    background-position: center;
  display: flex;
  align-items: center;   
  justify-content: center;
   
}
.pztext{
 color: #fffad8;
 text-align: center;
 font-size: 45px;
 text-shadow: #000000e3;
}

.inspiration-card {
  background-color: #ffffff;
  border: 2px solid #c5cbff;
  border-radius: 16px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
  padding: 25px;
  max-width: 350px;
  margin: 0 auto; /* centers the card */
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inspiration-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.idea1{
background-color: #d5dfff;
background-image:  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(./imgs/ideabg.jpg);
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
}


.idea {
  font-size: 2.8rem;
  font-weight: 500;
  color: #fbb03b;
  margin-bottom: 30px;
}

.hint {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 15px;
}

#cstm-button2 {
  border-color: #5f69c8;
  color: #747fe7;
  transition: all 0.2s ease;
}

#cstm-button2:hover {
  background-color: #fbb03b;
  color: #ffffff;
  border-color: #fbb03b;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.25);
}





/*/////////////// parallax effect section css */

.newbutton{
 background-color: #5961a9;
 padding: 5px;
 padding-left: 7px;
 padding-right: 7px;
 border-radius: 7px;
 border-color:#4f58a7 ;
 color:#ebe7e3;
 
}
 .newbutton:hover {
    background-color: #3e4693;
    transform: scale(1.05);  
 }


 /* ///////////////////In your jugnu-style2.css file ////////////////////*/

/* ========== Builder's Sanctum Section ========== */
.builder-sanctum {
  padding: 50px 0;
  background-color: #fdf8f0; /* Back to the warm, on-brand background */
}

.sanctum-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #5f69c8; /* Your brand's indigo */
  margin-bottom: 10px;
}

.sanctum-subtitle {
  font-size: 1.2rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
}

/* The circular image style */
.tutorial-img-circle {
  width: 160px; /* Slightly larger for more impact */
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.tutorial-column h3 {
  color: #343a40;
}

.tutorial-column p {
  color: #495057;
}

/* Interactive hover effect for the whole column */
.tutorial-column {
  transition: transform 0.3s ease;
}
.tutorial-column:hover {
  transform: translateY(-10px);
}

/* The custom, pill-shaped button from the first design */
.tutorial-btn {
  background-color: #747fe7;
  border-color: #747fe7;
  color: white;
  font-weight: 600;
  border-radius: 50px;
  padding: 10px 25px;
  transition: background-color 0.2s ease;
}

.tutorial-btn:hover {
  background-color: #5f69c8;
  border-color: #5f69c8;
  color: white;
}

/* //////////////////////flipcards///////////// */


        .clay-lab-section {
            padding: 60px 0;
        }

        .clay-lab-title {
            font-size: 2.8rem;
            font-weight: 700;
            color: #5f69c8;
            margin-bottom: 10px;
        }

        .clay-lab-subtitle {
            font-size: 1.2rem;
            color: #6c757d;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Core Flip Card CSS */
        .flip-card-container {
            perspective: 1000px; /* Creates the 3D space */
            cursor: pointer;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 350px; /* Fixed height for consistency */
            transition: transform 0.8s;
            transform-style: preserve-3d;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
        }
        
        /* This class is added by JavaScript on click */
        .is-flipped {
            transform: rotateY(180deg);
        }

        .flip-card-front,
        .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden; /* Safari */
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 25px;
            text-align: center;
        }
        
        /* Styling for the FRONT of the card */
        .flip-card-front {
            color: white;
        }
        
        .flip-card-front h3 {
            font-weight: 700;
            margin-top: 20px;
        }
        
        .flip-card-front .icon {
            width: 80px;
            height: 80px;
        }

        /* Unique background colors for each card */
        .card-color-1 { background: #747fe7; }
        .card-color-2 { background: #f7a325; }
        .card-color-3 { background: #e55a5a; }
        .card-color-4 { background: #3ab69d; }


        /* Styling for the BACK of the card */
        .flip-card-back {
            background-color: white;
            color: #495057;
            transform: rotateY(180deg);
        }
        
        .flip-card-back p {
            font-size: 1.1rem;
            line-height: 1.6;
        }

    /* blog///////////////////////////////// */
 /* ========== The Sparkle Spot - Blog Section ========== */
.sparkle-spot {
  padding: 80px 0;
  background-color: #fdf8f0; /* Your warm, inviting background */
}

.sparkle-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #5f69c8;
}

.sparkle-subtitle {
  font-size: 1.2rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
}

/* Featured Blog Post Styling */
.blog-post-featured {
  padding: 30px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.blog-post-title {
  font-weight: 700;
  color: #343a40;
}

.blog-post-meta {
  color: #adb5bd;
  margin-bottom: 20px;
}

.blog-post-meta a {
  color: #747fe7;
  text-decoration: none;
}

/* Sidebar Styling */
.about-box {
  background-color: #e9eafc; /* A soft lavender for the 'About' box */
}

.about-box h4 {
  color: #5f69c8;
}

.sidebar-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

/* Styling for the list of recent posts */
.sparkle-spot .list-unstyled a {
  transition: background-color 0.2s ease;
  padding: 10px;
  border-radius: 10px;
}
.sparkle-spot .list-unstyled a:hover {
  background-color: #f8f9fa;
}

/* Footer////////////////////////////////////////////////////////// */
    
.footer{
   
    margin-top: 20px;
    background-color: #4c56ad;
    color: #fdfcd9;
   
}

.last{
    color: #cdbdb1;
    text-decoration: none;
}

#subscribe-btn {
  background-color: #6b76d7;
  border: #3e4693;
}

.btn-primary {
    background-color: #747fe7; /* Purple */
    border-color: #747fe7;
    transition: all 0.3s ease; /* Makes the hover smooth */
}

/* 3. The Hover Effect */
.btn-primary:hover {
    background-color: #5f69c8 !important; /* Darker Purple on hover */
    border-color: #5f69c8 !important;
    transform: translateY(-2px); /* Optional: Moves button up slightly */
}


/* ==================================
   TOAST POPUP STYLING (Inner Pages)
   ================================== */

/* 1. Style the Header (The top purple part) */
#successToast .toast-header {
    background-color: #5f69c8 !important; /* Your Brand Indigo */
    color: white !important;
    font-weight: 700;
}

/* 2. Style the Body (The message part) */
#successToast .toast-body {
    background-color: #fdf8f0 !important; /* Warm Cream Background */
    color: #343a40 !important; /* Dark Grey Text <--- THIS FIXES THE INVISIBLE TEXT */
    font-weight: 600;
}