*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body{
  background:#020617;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.container{
  width:1200px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:180px 180px 180px 180px;
  gap:20px;
}

/* CARD STYLE */

.card{
  background: linear-gradient(145deg,#07142a,#020617);
  border-radius:22px;
  padding:20px;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

/* IMAGE FIX */

.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
}

/* PROFILE IMAGE */

.profile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.profile-img{
  width:90px;
  height:90px;
  border-radius:16px;
  object-fit:cover;
  margin-bottom:10px;
}

/* SOCIAL GRID */

.social-grid{
  height:80%;
    width: 50%;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}

.social-grid div{
  background:#071a34;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

/* BUTTON */

button{
  margin-top:15px;
  padding:10px 18px;
  background:#071a34;
  border:none;
  border-radius:10px;
  color:white;
}



.hero{ grid-column: span 2; grid-row: span 1; }
.phone{ grid-column: 3; grid-row: 1; }
.tablet{ grid-column: 4; grid-row: 1; }

.social{ grid-column: 1; grid-row: 2; }
.profile{ grid-column: 2; grid-row: 2; }
.laptop{ grid-column: 3 / span 2; grid-row: 2 / span 2; }

.resources{ grid-column: 1 / span 2; grid-row: 3; }
.learning{ grid-column: 1 / span 2; grid-row: 4; }
.contact{ grid-column: 3; grid-row: 4; }

/* TEXT */

.small{ color:#7aa2ff; margin-bottom:10px; }
h1{ margin-bottom:10px; font-size:28px; }