*{
  margin:0; padding:0; box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}
body{
  height:100vh;
  width:97vw;
  overflow-x: hidden;
  background:linear-gradient(120deg,#0f2027,#203a43,#2c5364);
  color:#fff;
}
.main{
  height:100%;
  width:100%;
  display:grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 20% 60% 20%;
  gap:15px;
  padding:20px;
}
.box{
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  border-radius:18px;
  padding:20px;
}
.header{
  grid-column:1 / 4;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header h1{font-size:28px;}
button{
  padding:12px 20px;
  border:none;
  border-radius:30px;
  background:#00ffd5;
  color:#000;
  font-weight:bold;
  cursor:pointer;
}
.left{
  grid-row:2;
}
.center{
  grid-row:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.center img{
  height:140px;
  width:220px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:15px;
}
.right{
  grid-row:2;
}
.footer{
  grid-column:1 / 4;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}
.info{
  background:rgba(0,0,0,0.25);
  border-radius:14px;
  padding:15px;
  text-align:center;
}
.info h3{margin-bottom:8px; font-size:16px; color:#00ffd5;}
.info p{font-size:18px;}

.bdrPara{
  height: auto;
  width: 100%;
  margin: 5px 0;
}

/* =========================
   TABLET (max-width: 1024px)
   ========================= */
@media (max-width: 1024px) {

  .main{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .header{
    grid-column: 1 / 3;
  }

  .left{
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .center{
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .right{
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .footer{
    grid-column: 1 / 3;
    grid-template-columns: repeat(2,1fr);
  }
}


/* =========================
   MOBILE (max-width: 600px)
   ========================= */
@media (max-width: 600px) {

  body{
    width: 100vw;
  }

  .main{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 12px;
  }

  .header{
    flex-direction: column;
    gap: 12px;
    text-align: center;
    grid-column: 1;
  }

  .left,
  .center,
  .right{
    grid-column: 1;
    grid-row: auto;
  }

  .center img{
    width: 100%;
    height: auto;
  }

  .footer{
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  button{
    width: 100%;
  }
}