:root {
  card-w: min(46rem, 92vw);
  pad: clamp(12px, 2vw, 20px);
  radius: 16px;             /* ← semicolon */
}

body{
    font-family: Segoe UI, system-ui, -apple-system, Arial, sans-serif;
    font-family: Segoe, sans-serif;
    font-size: clamp(1rem, 1.5vw, 2rem); 
    margin: 0;                         /* Reset margin (not just top) */
    padding-top: 5px;                /* Replace margin-top for consistency */
    width: 100%;                      
    color: #222222;
    min-height: 100vh;
    background: linear-gradient(180deg, #f5f9ff 50%, #aec0d2 90%);


}
.logo {
    margin-top: 15px;
    margin-left: 10px;
}

.logo img {
    width: clamp(3rem, 5vw, 4rem);
    height: auto;
    display: block;
}

.avatar {
    width: clamp(3rem, 5vw, 4rem);
    height: 50px;
    border-radius: 50%; /* makes it perfectly round */
    object-fit: cover;  /* ensures it fills the circle without distortion */
    border: 2px solid #ccc; /* optional: adds a thin border */
    margin-top: 10px;
}

.header {
  background: transparent;
  display: flex;
  margin-top: 1px; ;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}


.header img {
    width: clamp(3rem, 6vw, 5rem);
    height: auto;
    border-radius: 50%;
}




.title{
    width: clamp(20rem, 80vw, 55rem); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 3rem); 
    font-weight: bold; 
    margin-top: clamp(.8rem, 1vh, 0.5rem);
    z-index: 1;
}


.subtitle{
    width: clamp(20rem, 80vw, 55rem); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 1.8rem); 
    font-weight: bold; 
    margin-bottom: 20px;
    z-index: 1;
}

.login{
    width: clamp(20rem, 80vw, 55rem); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.2rem, 2vw, 1.3rem); 
    margin-top: 10px;
    z-index: 1;
}



.wrap{
    /*min-height: 100vh;  from top */
    display: grid;
    place-items: center;
    padding: 24px;
  }

/* ========== Default: side-by-side ========== */
.card{
  display: grid;
  grid-template-columns: max(15%, clamp(4rem, 8vw, 7rem)) 1fr;
  align-items: start;
  column-gap: 15px;
  width: clamp(20rem, 80vw, 50rem);
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  padding: clamp(0.8rem, 2vw, 0.8rem);
  background: linear-gradient(180deg, #eeeef7 50%, #c9c9e4 90%);
  border-radius: 15px;
  gap: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.button-bar {
  background: transparent;
  display: flex;
  width: clamp(25rem, 10vw, 30rem);
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.card img{
  width: clamp(6rem, 10vw, 8rem);
  height: auto;
  border-radius: 12px;
  border: 1px solid #e1e1e1;
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}

.card > :not(img){
    align-items: top;
    margin-top: 0px;
    grid-column: 2;    /* text in col-2 */
    min-width: 0;      /* prevent overflow */
}

/*-----------------new-------------*/

/* Make the row span the full card width (so grid columns don’t squeeze it) */
.card .link-item{
  grid-column: 1 / -1 !important;
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
   
}

/* Media (icon) stays on the left; grows with row height */
.link-item .media{
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}





.mytext{
  flex: 1 1 auto;
  min-width: 0;          
  white-space: normal;    
  overflow: visible;      
  text-overflow: clip;    
  line-height: 1.05;
  text-decoration: none;
}

/*  --------------end -----------------*/





.card:hover{
    transform: scale(1.05);
    box-shadow: 0 10px 10px #e2e2f1, inset 0 4px 18px #e2e2f1;
    background-color: rgb(255, 255, 206, 0.55);
}
/* ========== Phone: stack with full-width image ========== */
@media (max-width: 600px){
  .card{
    grid-template-columns: 1fr;   /* one column */
    gap: .5rem;
  }
  
  


/* If you also use a .row wrapper, define it clearly */
.row{
  display: grid;
  gap: 20px;
  width: clamp(20rem, 80vw, 55rem);
  
}

.description{
  line-height: 1.6;
  font-size: clamp(1.2rem, 2.5vw, 1.4rem); /* fixed clamp */
}



.card-text{
  align-self: start;
}

.card h2{
  margin: 0 0 6px 0;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
}

.card p{
  margin: 0;
  line-height: 1.3;
  color: #333;
  font-size: clamp(1.2rem, 2vw, 1.3rem);
}




  /* <------- Slide-in animations */
  @keyframes slideInLeft {
    from { transform: translateX(-110%); opacity: 0; }
    to   { transform: translateX(0);      opacity: 1; }
  }
  @keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
  }

  /* Assign animations */
  .from-left  { animation: slideInLeft  .7s ease-out forwards; }
  .from-right { animation: slideInRight .7s ease-out forwards; }

  /* Small entrance delay so they don’t hit at the exact same time */
  .from-left  { animation-delay: .12s; }
  .from-right { animation-delay: .28s; }

  /* Accessibility: respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .card, .from-left, .from-right{
      animation: none !important;
      opacity: 1;
      transform: none;
    }
    .card:hover{ transform: none; }
  }