#email-data {
   z-index: 9999;
   position: relative;
   background: rgba(0, 0, 0, 0.7); /* Or a lighter contrasting background */
   padding: 10px;
   border-radius: 5px;
   color: #fff;
}

/* Full viewport background with dark overlay */
.background-container {
  background: url("../media/images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  position: relative;
  height: 90vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Dark overlay */
.background-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

/* Left-side logo panel */
.logo-panel {
  width: 33%;
  background: rgba(23, 54, 93, 0.75);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  height: 100%;
}

.logo-panel img {
  width: 80%;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


/* Vertical carousel */
.carousel-vertical {
  height: 100%;
  width: 100%;
  overflow: hidden; /* hide native scrollbar */
  scroll-snap-type: none; /* optional */
  position: relative;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  background: rgba(255, 255, 255, 0.9);
}

.carousel-track {
  display: flex;
  flex-direction: column;
  animation: slide-vertical 15s linear infinite;
}

.carousel-track img {
  width: 98%;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.5cm; /* vertical gap between images */
  display: block;       /* remove extra inline spacing */
}

@keyframes slide-vertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Right side: buttons card */
.login-panel {
  flex: 1;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* Amar 2025 */


.carousel-vertical:hover .carousel-track {
  animation-play-state: paused;
}




.form-container {
  flex: 1;
  padding: 0px 20px;
  display: flex;
  flex-direction: row; /* ❗ changed */
  justify-content: center; /* puts both panels side by side */
  gap: 30px;
  align-items: flex-start; 
  position: relative;
  z-index: 10;
  min-height: auto; /* can be min-height, not fixed */
}

.user_card {
  flex: 0 1 480px;
  width: 70%;              
  min-width: 520px;
  max-width: 640px;
  height: auto;
  min-height: 63vh;
  max-height: calc(80vh - 20px);
  display: flex;          /* <- required */
  flex-direction: column; /* <- required */
  background: rgba(116, 207, 191, 0.85);
  padding: 15px 15px;
  margin-bottom: 0;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  overflow: auto;        /* so outer card doesn’t scroll */
}

.user_card form {
  flex: 1;         
  display: flex;   
  flex-direction: column;
  overflow-y: auto;
}


.user_card form .input-group {
  flex: 1;                  /* each input-group stretches equally */
  display: flex;
  align-items: center;       /* keep icons + inputs aligned */
}

.user_card form .form-control {
  flex: 1;                  /* make the input itself stretch */
}


#form-title {
  color: #fff;
  font-size: 1.1rem;     /* smaller font */
  text-align: center;
  margin-bottom: 0.75rem;  /* reduce bottom gap */
  font-weight: 600;       /* a bit lighter */
  letter-spacing: 0.3px;  /* optional – cleaner look */
}
.input-group {
  margin-bottom: 0..25rem;
}



h3 {
  font-size: 1rem;
  margin: 0.3rem 0;   /* less spacing between messages */
}


.login_btn, .btn-success {
  width: 100%;
  background: #33ccff;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  padding: 10px;
  border-radius: 6px;
  transition: background 0.2s;
}

.login_btn:hover, .btn-success:hover {
  background: #289ec9;
}




  .input-group-text {
    background-color: #33ccff;
    color: #fff;
  }

  .form-control {
    width: 100%;
  }

  

.account-panel {
  flex: 0 1 240px;   /* fixed column width */
  width: 35%;              /* Takes 70% of parent width */
  max-width: 360px;        /* But never bigger than 780px */
  max-height: 360px;       /* Panel height limited to 360px */
  overflow-y: auto;        /* Adds vertical scroll if content exceeds 360px */
  background: linear-gradient(135deg, rgba(23,54,93,0.95), rgba(50,175,210,0.85));
  margin-top: 0;   
  padding:5px 5px;
  text-align:center;
  display: flex;           /* Makes content flexible vertically */
  flex-direction: column;  /* Children arranged top → bottom */
  border-radius:12px;
  color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,0.35);
}

.account-panel p { font-size:1.25rem; margin-bottom:12px; }
.login-link {
  background: rgba(255, 255, 255, 0.55);
  padding:12px 12px;
  border-radius:6px;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  font-size:1.1rem;
  transition:0.25s;
}
.login-link:hover { background:#1e91c2; }


@media screen and (orientation: portrait), (max-width: 768px) {
  .background-container {
    flex-direction: column;  /* Stack items vertically in portrait mode */
    height: auto;            /* Allow flexible height */
    width: 100%;  
      
  }

  .logo-panel {
    order: 1;                /* Ensures the logo panel comes first in the stack */
    width: 100%;             /* Ensure it takes up the full width */
    height: auto;            /* Allow flexible height */
    max-height: 1920px;
  }


.form-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 10px;
  flex-wrap: wrap;
  max-height: 80vh;  /* container height reference */
  box-sizing: border-box;
}

.user_card {
  flex: 0 1 720px;
  min-height: 600px;   
  width: 100%;
  max-width: 720px;
  height: calc(90vh - 20px);            /* content-based height */
  max-height: calc(80vh - 40px);  /* slightly smaller than container */
  padding: 30px 25px;
  border-radius: 12px;
  background: rgba(116, 207, 191, 0.85);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  overflow-y: auto;        /* scroll if content exceeds */
  box-sizing: border-box;
}


 .account-panel {
    max-width: 1020px;
    width: 100%;
    padding: 10px 10px; /* reduce this if it's too large */
    margin: auto;
    max-height: 240px;
    
  }

    
    
}


/* Horizontal scroll container */
.horizontal-scroll {
  width: 100%;
  height: 5cm; /* fixed height */
  overflow: hidden;
  position: relative;
  background: #f9f9f9;
  border-top: 1px solid #ccc;
}

/* Track for continuous scrolling */
.horizontal-scroll-track {
  display: flex;
  flex-direction: row;
  position: absolute;
  white-space: nowrap;
  width: max-content;
  animation: scroll-left 25s linear infinite;
}

/* Individual ad item */
.horizontal-scroll-track .ad-item {
  flex: 0 0 auto;
  min-width: 180px;
  margin-right: 20px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 6px;
  padding: 5px;
  white-space: nowrap;
    
}


.ad-item {
  position: relative;
  overflow: hidden;
}
.ad-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 3px 5px;
  text-align: center;
}



/* Continuous scroll animation */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* moves half because of duplication */
}

.notice-text {
  font-size: 0.9rem;
  white-space: normal !important;   /* allow wrapping */
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 200px;   /* text width limit */
  margin: 5px auto 0;
  text-align: center;
  line-height: 1.3;
}


/* Scrollbar hidden */
.horizontal-scroll::-webkit-scrollbar {
  display: none;
}
.horizontal-scroll {
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;  /* Firefox */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .horizontal-scroll {
    height: 100px;
  }

  .horizontal-scroll-track .ad-item img {
    height: 80px;
    width: auto;
  }
}