/*--------------------------------------------------------------
/** VARIABLES
--------------------------------------------------------------*/
:root {
         font-family: "Space Mono", monospace;
         --body-font: "Space Mono", monospace;
         --bs-btn-font-family: "Space Mono", sans-serif;

         color-scheme: only light;
}
:root {
        --bs-primary: #f38252;
        --bs-primary-rgb: 243, 130, 82;
        --bs-secondary: #8b43ff;
        --bs-secondary-rgb: 139, 67, 255;
        --bs-info-rgb: 13, 202, 240;
        --body-color: #515151;
        --bs-heading-color: #333636;
        --bs-heading-color: #F38252;
        --secondary-body: #d3d1d1;
        --bs-secondary-bg: #d3d1d1;
        --bs-secondary-bg-rgb: 211, 209, 209;
        --tertiary-bg: #4a2c6d;
        --bs-primary-bg-subtle: #dad7d6;
        --bs-link-color: var(--bs-heading-color);
        --bs-link-color-rgb: var(--bs-heading-color);
        --bs-link-hover-color: var(--bs-primary);
        --bs-link-hover-color-rgb: var(--bs-primary-rgb);

        --custom-drop-shadow-color: rgba(247, 30, 22, 0.6);

}

.bg-embracing-neurodiversity {
   background-color: #fdf0e1 !important;
}

.bg-white {
   background: white !important;
}

.bg-body-secondary {
    background:var(--bs-secondary-bg-rgb) !important;

}

.tertiary-bg {
   /* background-color: var(--tertiary-bg); */
   background: linear-gradient(180deg, #4a2c6d, #693388) !important;
   color: var(--secondary-body); 
}


body {
   font-family: var(--body-font);
   font-weight: 400;
   font-size: 18px;
   color: var(--body-color);

}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   text-transform: capitalize;
}

h1 {
   font-size: 4rem;
   font-weight: 700;
   font-family: 'Space Mono', monospace;

   @media only screen and (max-width: 768px) {
      font-size: 3rem; /* Smaller font size for mobile */
   }
  
}

h2 {
   font-size: 39px;
   font-weight: 600;
   font-family: var(--body-font);
}

h3 {
   font-size: 39px;
   font-weight: 400;
   font-family: var(--body-font);
}

h4 {
   font-size: 21px;
   font-weight: 600;
   font-family: var(--body-font);
}

h5 {
   font-size: 18px;
   font-weight: 500;
   font-family: var(--body-font);
}

h6 {
   font-size: 16px;
   font-weight: 500;
   font-family: var(--body-font);
}

.btn-primary {
   font-family: var(--bs-btn-font-family);
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-secondary);
   --bs-btn-border-color: var(--bs-secondary);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--bs-primary);
   --bs-btn-hover-border-color: var(--bs-primary);
   --bs-btn-focus-shadow-rgb: 49, 132, 253;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--bs-primary);
   --bs-btn-active-border-color: var(--bs-primary);
   text-transform: capitalize;
}

.btn-group-lg>.btn, .btn-lg {
   --bs-btn-padding-y: 0.9rem;
   --bs-btn-padding-x: 2rem;
   margin: 0  0 2rem 0 ;
}

 .container {
   margin-left: 2 rem;
   margin-right: 2 rem;

   @media only screen and (max-width: 768px) {
      margin-left: 1 rem;
      margin-right: 1 rem; 
   }
}

/* section padding and margin */
.section-padding{
   padding-top: 160px;
   padding-bottom: 100px;
}
.section-margin{
   margin-top: 160px;
   margin-bottom: 160px;
}

.navbar {
   --bs-navbar-active-color: var(--bs-primary);
   --bs-navbar-hover-color:  var(--bs-secondary-bg);

}

/* Default logo color */
.navbar-brand img {
   filter: brightness(0) invert(1); /* White logo */
   transition: filter 0.3s ease;

   @media only screen and (max-width: 768px) {
      width: 200px; /* Smaller font size for mobile */
   }
}

/* Black logo when header is sticky */
.navbar-brand img.logo-black {
   filter: brightness(0) invert(0); /* Black logo */
}

.nav-link {
   letter-spacing: 1px;
   color: var(--bs-secondary-bg);
}
 
.site-header {
   position: fixed;
   top: 0;
   background-color: transparent;
   width: 100%;
   z-index: 999999;
   transition: background-color 0.3s ease;
}

.site-header .nav-link:hover {
   filter: drop-shadow(0 0 6px rgba(112, 23, 255, 1));
   color: var(--bs-primary);
}

.site-header.sticky{
   background-color: rgba(245, 241, 241, 0.4);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(212, 212, 212, 0.5);

}


.site-header.sticky .nav-link {
   color: black;
   transition: color 0.3s ease;
}

.site-header.sticky .nav-link.active {
   color: #8b43ff;
}

.site-header.sticky .nav-link:hover {
   color: var(--bs-primary);
}

#home {
   background: url('assets/images/ADHDologia_stage_by_Kamil_Nawirski.png') no-repeat center center/cover;
   color: white; /* Adjust text color for visibility */
   /* text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);  *//* Optional: Improves text visibility */
   position: relative;
   overflow: hidden;
}

.h1 {
   columns: white;
   
}

.p {
   text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.5); /* Optional: Improves text visibility */
   text-align: justify !important;
}


#home::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7); /* Adjust opacity for desired darkening */
   z-index: 1;
}

#home .container {
   position: relative;
   z-index: 2; /* Ensures content is above the dark overlay */
}

.custom-drop-shadow {
   filter: drop-shadow(6px 6px 12px var(--custom-drop-shadow-color));
   -webkit-filter: drop-shadow(6px 6px 12px var(--custom-drop-shadow-color)); 

}

.custom-drop-shadow-black {
   filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.6));
   -webkit-filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.6)); 
}



/* REVIEWS */




#reviews {
   background: url('assets/images/ADHDologia_stage_by_Kamil_Nawirski.png') no-repeat center center/cover;
   background-attachment: fixed;

}




#reviews {
   background: url('assets/images/ADHDologia_stage_by_Kamil_Nawirski.png') no-repeat center center/cover;
   background-attachment: fixed;
   position: relative;
   overflow: hidden;
}

#reviews::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.4); /* Adjust opacity for desired darkening */
   z-index: 1;
}

#reviews .container {
   position: relative;
   max-width: 90%;
   z-index: 2; /* Ensures content is above the dark overlay */
}


/* Testimonial Card Grid */
.testimonial-card-wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Grid layout */
   gap: 5rem; /* Space between cards */
   justify-items: center;
   max-width: 100%; 
   margin: 5% auto; 
 }
 
 /* Testimonial Card Styles */
 .testimonial-card {
   background: #fff;
   border-radius: 12px;
   padding: 20px;
   max-width: 600px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   gap: 15px;
   text-align: left;
   margin: 0 auto; /* Centers the cards */
   height: fit-content;
   min-height: 350px; /* Ensure a minimum height for cards */
   transition: transform 0.3s ease, box-shadow 0.3s ease;

 }
 
 /* Testimonial Header: User Info */
 .testimonial-header {
   display: flex;
   align-items: center;
   gap: 15px;
 }
 
 .reviewer-photo {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #ddd;
 }
 
 .reviewer-details h4 {
   margin: 0;
   font-size: 1.2rem;
   color: #333;
 }
 
 .reviewer-details p {
   margin: 0;
   font-size: 0.9rem;
   color: #777;
 }
 
 .testimonial-text {
   position: relative; /* Establish a reference point for pseudo-elements */
   color: #6b6464; /* Subtle text color */
   line-height: 1.6; /* Improve readability */
 }
 
 .testimonial-text::before,
 .testimonial-text::after {
   font-family: "Georgia", serif; /* Classic font for aesthetic quotes */
   font-size: 12rem; /* Adjust size for emphasis */
   color: var(--bs-heading-color); /* Light color for decorative effect */
   position: absolute;
   line-height: 1; /* Align with text */
 }
 
 .testimonial-text::before {
   content: "“";
   left: -0.4em;
   top: -0.7em;
   rotate: 15deg;
   filter: drop-shadow( 0px 0px 10px var(--custom-drop-shadow-color));
}

.testimonial-text::after {
   content: "”";
   right: -0.3em;
   bottom: -0.8em;
   rotate: 15deg;
   filter: drop-shadow( 0px 0px 10px var(--custom-drop-shadow-color));
 }
 
 /* Optional User-Submitted Photo */
 .testimonial-photo {
   width: 100%;
   max-height: 500px;
   object-fit: cover;
   border-radius: 8px;
   margin: 10px 0;
 }
 

 @media (max-width: 480px) {
   .text-center h2 {
     font-size: 2rem; /* Adjust font size of title */
   }
 
   .testimonial-card {
     padding: 15px; /* Reduce padding for smaller screens */
   }
 
   .testimonial-header {
     gap: 10px; /* Adjust gap between photo and text */
   }
 
   .reviewer-photo {
     width: 60px; /* Smaller reviewer photo */
     height: 60px;
   }
 
   .reviewer-details h4 {
     font-size: 1rem; /* Adjust reviewer name size */
   }
 
   .reviewer-details p {
     font-size: 0.8rem; /* Adjust reviewer title size */
   }
 }


.form-label {
   color: var(--bs-primary);
}


#contact {
   display: flex;
   flex-wrap: wrap; /* Allows the columns to wrap into rows */
   justify-content: center; /* Centers the columns horizontally */
   gap: 30px; /* Adds consistent spacing between columns */
}

#contact  .col {
   display: flex; /* Enables flexbox within each column */
   flex-direction: column; /* Ensures vertical stacking of child elements */
   min-width: 300px;
   justify-content: center;
   align-items: center;
}

#ig-embed {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgb(255, 255, 255);
   width: 400px;
   margin: 0 30px 30px 30px;
   border-radius: 10px;
}

.footer-bottom {
   @media only screen and (max-width: 768px) {
      font-size: 1rem; 
   }
}


/* ANIMATIONS */

.animate-character
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #f38252 0%,
    #8b43ff 29%,
    #fa538b 67%,
    #f38252 100%
  );

  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 4s linear infinite reverse;
/*   display: inline-block;
      font-size: 190px; */
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}



 .v3 p {
   display: inline;
   background-repeat: no-repeat;
   transition: all 500ms ease-in-out;
   color: transparent;
   background-position: right;
   background-size: 100% 100%;
   background-image: linear-gradient(#4d3279, #412e5f);
 }
 .v3:hover p {
   color: #2a2935;
   background-size: 0% 100%;
 }


 .media-item {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   padding: 1rem;
   border-radius: 10px;
   max-width: 350px;
   min-width: 250px;
}

.media-item img {
   border-radius: 6px;
}

.media-item:hover {
   transform: translateY(-10px);
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.smol-grey{
   font-size: smaller;
   color: #8f8f8f;
}

.square-container {
   position: relative;
   width: 100%;
   padding-top: 100%; /* Creates a square container */
   overflow: hidden;  /* Ensures the image is cropped to fit the square */
   border-radius: 10px;  /* Optional: round the corners of the container */
 }
 
 .square-container img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translate(-50%, -50%); /* Centers the image within the container */
 }


.testimonial-card:hover {
   transform: translateY(-10px);
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}