/* =========================
   VARIABLES & BASE TYPOGRAPHY
   ========================= */
:root{
  /* Bright Theme Palette */
  --color-primary:#ff6b6b;
  --color-primary-dark:#e63946;
  --color-secondary:#845ef7;
  --color-accent:#38d9a9;
  --color-light:#ffffff;
  --color-dark:#222222;
  --color-text:#333333;
  --gradient-main:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  --gradient-alt:linear-gradient(135deg,#ffd43b,#ffa94d);
  /* Morphing Animation */
  --morph-duration:8s;
  --morph-ease:cubic-bezier(0.25,0.1,0.25,1);
  /* Shadows */
  --shadow-lg:0 8px 24px rgba(0,0,0,0.15);
  --shadow-md:0 4px 12px rgba(0,0,0,0.1);
}

html{scroll-behavior:smooth;}
body{
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  color:var(--color-text);
  background:#fafafa;
  line-height:1.6;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family:'Raleway',sans-serif;
  font-weight:800;
  color:var(--color-dark);
  text-align:center;
  margin-bottom:.75rem;
}
.section-title{position:relative;padding-bottom:1rem;}
.section-title::after{
  content:'';
  width:60px;height:4px;
  background:var(--color-accent);
  display:block;
  margin:0.5rem auto 0;
  border-radius:2px;
}

/* =========================
   NAVBAR
   ========================= */
.navbar{
  background:var(--gradient-main);
}
.navbar-item,
.navbar-burger span{color:var(--color-light);}
.navbar-item:hover{background:rgba(255,255,255,0.1);}

/* =========================
   HERO
   ========================= */
#hero{
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  color:var(--color-light);
}
#hero .title,
#hero .subtitle{
  color:var(--color-light);
  text-shadow:1px 1px 4px rgba(0,0,0,0.6);
}
#hero .button{
  border-radius:50px;
}
/* Dark overlay applied via inline style in HTML ensures readability */

/* =========================
   GLOBAL BUTTONS
   ========================= */
.btn,
button,
input[type='submit'],
.button{
  background:var(--gradient-main);
  color:var(--color-light);
  border:none;
  border-radius:8px;
  padding:0.75rem 1.5rem;
  font-weight:600;
  transition:transform .3s,box-shadow .3s;
}
.btn:hover,
button:hover,
input[type='submit']:hover,
.button:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.btn:active,
button:active,
input[type='submit']:active,
.button:active{
  transform:translateY(0);
  box-shadow:none;
}

/* Read More links */
a.read-more{
  color:var(--color-primary);
  font-weight:600;
  position:relative;
}
a.read-more::after{
  content:'→';
  margin-left:4px;
  transition:margin-left .2s;
}
a.read-more:hover::after{margin-left:8px;}

/* =========================
   SECTIONS & LAYOUT HELPERS
   ========================= */
section{
  padding:3rem 0;
}
.section-gradient{
  background:var(--gradient-alt);
}
.bg-accent{
  background:var(--color-accent);
  color:var(--color-light);
}
.bg-accent h2,
.bg-accent p{color:var(--color-light);}
.pt-navbar-offset{padding-top:100px;} /* For privacy & terms pages */

/* Utility Flex */
.d-flex{display:flex;}
.j-center{justify-content:center;}
.a-center{align-items:center;}
.flex-col{flex-direction:column;}

/* =========================
   CARDS & IMAGES
   ========================= */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:var(--shadow-md);
  border-radius:12px;
  overflow:hidden;
  transition:transform .3s;
  background:#ffffff;
}
.card:hover{transform:translateY(-5px);}
.card-image,
.image-container{
  width:100%;
  height:260px;
  overflow:hidden;
}
.card-image img,
.image-container img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}
.card-content{padding:1.25rem;}

/* =========================
   STATISTICS WIDGET
   ========================= */
.stats-item{
  text-align:center;
  padding:1rem;
}
.stats-item .number{
  font-size:3rem;
  font-weight:800;
  color:var(--color-primary);
}

/* =========================
   MORPHING BACKGROUND UTILITY
   ========================= */
.morphing-bg{
  animation:morph var(--morph-duration) var(--morph-ease) infinite alternate;
}
@keyframes morph{
  0%{border-radius:42% 58% 62% 38%/42% 51% 49% 58%;}
  50%{border-radius:60% 40% 37% 63%/60% 35% 65% 40%;}
  100%{border-radius:42% 58% 62% 38%/42% 51% 49% 58%;}
}

/* =========================
   SUCCESS PAGE
   ========================= */
.page-success{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--gradient-main);
  color:var(--color-light);
  text-align:center;
}

/* =========================
   FOOTER
   ========================= */
footer{
  background:var(--color-dark);
  color:var(--color-light);
  padding:3rem 0;
}
footer a{color:var(--color-light);transition:color .2s;}
footer a:hover{color:var(--color-accent);}
footer ul{list-style:none;padding:0;}
footer li{margin-bottom:0.5rem;}

/* Social Text Icons */
footer .social-link{
  font-weight:700;
  letter-spacing:.5px;
}
footer .social-link::before{
  content:'#';
  margin-right:4px;
  color:var(--color-accent);
}

/* =========================
   COOKIES POPUP
   ========================= */
#cookiePopup{
  backdrop-filter:blur(4px);
}
#cookiePopup p{margin-bottom:0.5rem;}

/* =========================
   RESPONSIVE ADJUSTMENTS
   ========================= */
@media(max-width:768px){
  .navbar-menu{background:var(--gradient-main);}
  h1{font-size:2rem;}
  section{padding:2rem 0;}
  .card-image,.image-container{height:220px;}
}