html, body { overflow: hidden; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', serif;
}


.background{
  height: 100%;
  background-color: none;
  margin: 0;
  padding: 0;
}

/* Header Starts */

.header {
  height: auto;
  background-color: none;
  display: flex;
  padding-top: 5px;
  padding-bottom: 5px;
}

.logo{
  height: auto;
  background-color: none;
border-radius: 15px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(1px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}

.logo img{
  height: 60px;
  width: 80%;
  margin-left: 10%;
  padding: 10px;


}

.logo-mobile{
  height: auto;
  background-color: none;
border-radius: 15px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(1px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}

.logo-mobile img{
  height: 25px;
  width: auto;
  margin: 5px;

}

.menu {
  height: auto;
  background-color: none;
  padding-top: 0px; 
}

.navbar-nav {
--bs-nav-link-color: rgb(0 0 0);

border-radius: 12px;
color: #000000;
text-decoration: none;
font-weight: 500;
padding: 0px;

transition: all 0.3s;

background-color: none;
background: rgba(255, 255, 255, 0.6);
font-size: 15px;
width: auto;
text-align: center;
}

.bg-body-tertiary {
background-color: rgb(248 249 250 / 0%) !important;
}

.dropdown-menu
{
--bs-dropdown-spacer: 0.6rem;
margin-left: -10px;
border-radius: 20px;
--bs-dropdown-bg: rgba(255, 255, 255, 0.6);
}

.dropdown-item {
  border-radius: 8px;
}

.chevron {
font-size: 1rem;
transition: transform 0.3s ease;
}

/* Rotate when submenu is open */
a[aria-expanded="true"] .chevron {
transform: rotate(180deg);
}


/* Header Ends */




/* Brain Starts */


.main-bg{
  height: 80vh;
  margin-top: 2vh;
  margin-bottom: 0vh;
  background-color: none;
  }
  
  .brain-bg{
    height: auto;
    background-color: none;
  }

.brain-main {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(1px);
border-radius: 20px;
height: auto; /* fallback height  */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 5px;
text-align: center;
}

/* Clock time styling */
.clock-time {
font-size: 5rem;
font-family: 'clockicons', sans-serif !important;
letter-spacing: 3px;
color: #000000;
margin-bottom: -5px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Clock date */
.clock-date {
font-size: 1.8rem;
color: #000000;
margin-bottom: 15px;
font-weight: 500;
}

#weather-icon{
/* scales smoothly across devices */
font-size: clamp(4.5rem, 8vw, 5.5rem);
/* line-height: 1; keeps it vertically aligned */
}

#weather-temp{
/* font-size will be min 20px, scale up with viewport width, max 32px */
font-size: clamp(20px, 4vw, 32px);
}

#weather-wind{
/* font-size will be min 20px, scale up with viewport width, max 32px */
font-size: clamp(10px, 2vw, 20px);
display: none;
}

/* Location */
.clock-location {
font-size: 1.4rem;
color: #000000;
margin-bottom: 30px;
font-weight: 500;
margin-top: 20px;
}

/* Button */
.world-clocks-btn {
background: rgba(255, 255, 255, 0.6);
color: #000000;
border: none;
padding: 15px 35px;
border-radius: 50px;
font-weight: 600;
font-size: 15px;
/* transition: all 0.3s; */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.world-clocks-btn:hover {
background: #000000 !important;
color: white !important;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn:hover {
  background: #000000;
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* -------------------------------
RESPONSIVE FIXES
--------------------------------*/

/* Tablets (≤992px) */
@media (max-width: 992px) {
.clock-box {
max-width: 500px;
min-height: 280px;
}
.clock-time {
font-size: 4rem;
}
.clock-date {
font-size: 1.5rem;
}
.clock-location {
font-size: 1.2rem;
}
}

/* Mobiles (≤768px) */
@media (max-width: 768px) {
.clock-box {
max-width: 100%;
min-height: 250px;
padding: 15px;
margin-top: 15vh;
}
.clock-time {
font-size: 3rem;
}
.clock-date {
font-size: 1.3rem;
}
.clock-location {
font-size: 1rem;
}
.world-clocks-btn {
padding: 10px 20px;
font-size: 14px;
}
}

/* Small Mobiles (≤480px) */
@media (max-width: 480px) {
.clock-time {
font-size: 2.4rem;
}
.clock-date {
font-size: 1.1rem;
}
.clock-location {
font-size: 0.9rem;
}
.world-clocks-btn {
padding: 8px 18px;
font-size: 13px;
}
}

/* Brain Ends */



/* Footer Starts */


footer {
font-family: 'Libre Baskerville', serif;
backdrop-filter: blur(2px);
}

.footer-text {
font-size: clamp(10px, 2vw, 14px);
}

/* Footer Ends */



/* Cookies */

/* Cookie pop-up styling */
.cookie-banner {
display: none; /* hidden by default */
margin-top: 50px;
}

@media (max-width: 767.98px) {
.cookie-banner span {
display: block;
margin-bottom: 10px;
text-align: center;
}
}










  /* ===== Media Queries ===== */

/* Extra small devices (phones, <576px) */
@media (max-width: 575.98px) {
.dropdown-menu
{
margin-left: 50% !important;
--bs-dropdown-bg: white;
}

.logo img {
height: 35px !important;
}

.logo{
padding: 10px;
}

.logo-mobile{
  padding: 2px !important;
}

.btn {
--bs-btn-font-size: 1rem;
}


.navbar-nav {
background: rgb(0 0 0);

}

.nav-link {
color: rgb(255 255 255);
}

.nav-link:focus, .nav-link:hover {
color: white;
}

.brain-main {
  height: auto; /* fallback height  */
  }

  .main-bg {
    height: 70vh;
    margin-top: 0vh;
    min-height: auto;
    max-height: auto;
    background-color: none;
    margin-bottom: 20vh;
  }

  html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* disables both vertical and horizontal scroll */
  height: 100%;
  width: 100%;
  touch-action: none; /* disables swipe/scroll on mobile */
}

.map-scroll-area{
  flex: 1;
  overflow-y: auto;
  padding: 0px !important;
  /* background-color: red; */
  max-height: 400px !important; /* 👈 set desired height */
 }

 .content {
  padding: 0px !important;
  }



}

/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
.dropdown-menu
{
margin-left: 50% !important;
--bs-dropdown-bg: white;
}

.logo img {
height: 35px !important;
}

.logo{
padding: 10px;
}

.btn {
--bs-btn-font-size: 1rem;
}


.navbar-nav {
background: rgb(0 0 0);

}

.nav-link {
color: rgb(255 255 255);
}

.nav-link:focus, .nav-link:hover {
color: white;
}

.background{
  background-color: none;
}

.brain-main {
  height: auto; /* fallback height  */
  background-color: none;
  }

  .main-bg {
    height: auto;
    margin-top: 5vh;
    min-height: auto;
    max-height: auto;
    background-color: none;
    margin-bottom: 0vh;
  }

  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* disables both vertical and horizontal scroll */
    height: 100%;
    width: 100%;
    touch-action: none; /* disables swipe/scroll on mobile */
  }

  .terms-of-service{
    max-height: 400px !important;
  }

  .privacy-policy{
    max-height: 400px !important;
  }

  .album-cover { width: 100px !important; height: 100px !important; }

  #weather-icon {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.card {
  width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
}


.puzzlecard {
  width: 100px !important;
  height: 50px !important;
  font-size: 25px !important;
}


/* Scrollable area */
.scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 0px !important;
  /* background-color: red; */
  max-height: 420px !important; /* 👈 set desired height */
  }

  .blog-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: none;
    max-height: 300px !important; /* 👈 set desired height */
 }

 .map-scroll-area{
  flex: 1;
  overflow-y: auto;
  padding: 0px !important;
  /* background-color: red; */
  max-height: 300px !important; /* 👈 set desired height */
 }


}

/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.dropdown-menu
{
margin-left: 50% !important;
--bs-dropdown-bg: white;
}

.logo img {
height: 35px !important;
}

.logo{
padding: 10px;
}

.btn {
--bs-btn-font-size: 1rem;
}


.navbar-nav {
background: rgb(0 0 0);

}

.nav-link {
color: rgb(255 255 255);
}

.nav-link:focus, .nav-link:hover {
color: white;
}

.background{
  background-color: none;
}

.brain-main {
  height: auto;
  background-color: none;
  padding: 0px;
}

.scroll-area {
  padding: 0px !important;
  background-color: none;
}

.board {
  max-width: 250px !important;
  margin: 20px auto;
}

.cell {
  aspect-ratio: 3 / 1 !important;
  font-size: 1rem;
}

.stat-box {
  padding: 2px 5px !important;
}

  .main-bg {
    height: auto;
    margin-top: 0vh;
    min-height: auto;
    max-height: auto;
    background-color: none;
    margin-bottom: 0vh;
  }


  #weather-icon {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
}

#weather-temp {
  font-size: clamp(20px, 4vw, 20px);
}

.clock-time {
  font-size: 2rem;
}

.clock-date {
  font-size: 1.1rem;
}

.clock-location {
  font-size: 0.9rem;
}

.world-clocks-btn {
  padding: 8px 14px;
  font-size: 10px;
  margin-bottom: 10px;
}

.btn {
--bs-btn-font-size: 1rem;
}

.win-message {
   padding: 0px !important;
  }

   html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* disables both vertical and horizontal scroll */
  height: 100%;
  width: 100%;
  touch-action: none; /* disables swipe/scroll on mobile */
}

.footer-text {
  font-size: clamp(10px, 2vw, 11px);
}


.card {
  width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
}

.puzzlecard {
  width: 200px !important;
  height: 40px !important;
  font-size: 25px !important;
}

/* Memory Puzzle Game */


.game-board {
  display: grid;
  grid-template-columns: repeat(4, 0fr);
  gap: 2px !important;
  margin-bottom: 10px auto;
  text-align: center;
  align-content: space-around;
  justify-content: center;
}

.puzzlecards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px !important;
  width: 100%;
  height: 100%;
  padding: 0px !important;
  box-sizing: border-box;
}

.album-cover { width: 100px !important; height: 100px !important; }

/* Scrollable area */
.scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 0px;
  /* background-color: red; */
  max-height: 350px !important; /* 👈 set desired height */
  }

  .blog-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    /* background-color: red; */
    max-height: 300px !important;
}

.map-scroll-area{
  flex: 1;
  overflow-y: auto;
  padding: 0px !important;
  /* background-color: red; */
  max-height: 300px !important; /* 👈 set desired height */
 }

}

/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

  


}

/* Extra large devices (≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {




}

/* XXL devices (≥1400px) */
@media (min-width: 1400px) {


 /* Scrollable Content */
 .blog-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: none;
  max-height: auto; /* 👈 set desired height */
}





}


/* Mark Mac (≥2800px) */
@media (min-width: 2200px) {


  /* Scrollable Content */
  .blog-scroll {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
   background-color: none;
   max-height: 700px !important; /* 👈 set desired height */
 }

}