/* =========================================
   METALISTIC FUTURE STYLE
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
  font-family:'Poppins', sans-serif;
}

body{

  background:
  radial-gradient(circle at top left,#1e293b,#020617 60%);

  color:white;

  overflow-x:hidden;
}

/* =========================================
   NAVBAR
========================================= */

header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  padding:20px 8%;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:rgba(15,23,42,0.6);

  backdrop-filter:blur(10px);

  border-bottom:
  1px solid rgba(255,255,255,0.1);

  z-index:999;
}

header h1{

  font-size:28px;

  font-weight:700;

  background:
  linear-gradient(
    90deg,
    #38bdf8,
    #ffffff,
    #38bdf8
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
  0 0 15px #38bdf8;
}

nav a{

  text-decoration:none;

  color:#cbd5e1;

  margin-left:25px;

  font-size:15px;

  position:relative;

  transition:0.4s;
}

nav a:hover{

  color:#38bdf8;

  text-shadow:
  0 0 10px #38bdf8;
}

nav a::after{

  content:'';

  position:absolute;

  left:0;
  bottom:-6px;

  width:0%;
  height:2px;

  background:#38bdf8;

  box-shadow:
  0 0 10px #38bdf8;

  transition:0.4s;
}

nav a:hover::after{

  width:100%;
}

/* =========================================
   HERO
========================================= */

.hero{

  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;

  text-align:center;

  padding:120px 20px;
}

.hero img{

  width:220px;
  height:220px;

  object-fit:cover;

  border-radius:50%;

  border:5px solid #38bdf8;

  box-shadow:
  0 0 20px #38bdf8,
  0 0 50px #38bdf8,
  0 0 80px #0ea5e9;

  animation:glow 3s infinite alternate;
}

@keyframes glow{

  0%{

    box-shadow:
    0 0 20px #38bdf8,
    0 0 40px #38bdf8;
  }

  100%{

    box-shadow:
    0 0 30px #38bdf8,
    0 0 80px #0ea5e9,
    0 0 120px #38bdf8;
  }

}

.hero h2{

  margin-top:30px;

  font-size:65px;

  font-weight:700;

  background:
  linear-gradient(
    90deg,
    #ffffff,
    #38bdf8,
    #ffffff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{

  margin-top:15px;

  max-width:700px;

  color:#94a3b8;

  line-height:1.8;

  font-size:18px;
}

/* =========================================
   BUTTON
========================================= */

button{

  margin-top:30px;

  padding:15px 35px;

  border:none;

  border-radius:50px;

  background:
  linear-gradient(
    90deg,
    #0ea5e9,
    #38bdf8
  );

  color:white;

  font-size:16px;

  font-weight:600;

  cursor:pointer;

  transition:0.4s;

  box-shadow:
  0 0 15px #38bdf8,
  0 0 30px #0ea5e9;
}

button:hover{

  transform:
  translateY(-5px)
  scale(1.05);

  box-shadow:
  0 0 20px #38bdf8,
  0 0 50px #0ea5e9,
  0 0 80px #38bdf8;
}

/* =========================================
   CONTENT
========================================= */

.content{

  padding:120px 10%;

  text-align:center;
}

.content h2{

  font-size:45px;

  margin-bottom:50px;

  color:#38bdf8;

  text-shadow:
  0 0 15px #38bdf8;
}

/* =========================================
   PROFILE AREA
========================================= */

.profile-area{

  display:flex;

  justify-content:center;
  align-items:center;

  gap:50px;

  margin-bottom:60px;

  flex-wrap:wrap;
}

.profile-area img{

  width:220px;
  height:220px;

  object-fit:cover;

  border-radius:50%;

  border:5px solid #38bdf8;

  box-shadow:
  0 0 20px #38bdf8,
  0 0 50px #0ea5e9;
}

.profile-text{

  max-width:600px;

  text-align:left;
}

.profile-text h3{

  font-size:40px;

  margin-bottom:15px;

  color:#38bdf8;

  text-shadow:
  0 0 10px #38bdf8;
}

.profile-text p{

  color:#cbd5e1;

  line-height:1.8;
}

/* =========================================
   INFO CONTAINER
========================================= */

.info-container{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:25px;
}

.info-box{

  padding:30px;

  border-radius:20px;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );

  border:
  1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(10px);

  transition:0.5s;

  box-shadow:
  0 0 15px rgba(56,189,248,0.2);
}

.info-box:hover{

  transform:translateY(-10px);

  border:1px solid #38bdf8;

  box-shadow:
  0 0 20px #38bdf8,
  0 0 40px rgba(14,165,233,0.5);
}

.info-box h4{

  margin-bottom:12px;

  color:#38bdf8;

  font-size:20px;
}

.info-box p{

  color:#cbd5e1;

  line-height:1.7;
}

/* =========================================
   CONTACT SECTION
========================================= */

.contact-section{

  min-height:100vh;

  padding:150px 10% 100px;
}

/* =========================================
   CONTACT TITLE
========================================= */

.contact-title{

  text-align:center;

  margin-bottom:70px;
}

.contact-title h2{

  font-size:60px;

  margin-bottom:15px;

  background:
  linear-gradient(
    90deg,
    #ffffff,
    #38bdf8,
    #ffffff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
  0 0 15px #38bdf8,
  0 0 40px #38bdf8;
}

.contact-title p{

  color:#94a3b8;

  font-size:17px;
}

/* =========================================
   CONTACT GRID
========================================= */

.contact-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:35px;
}

/* =========================================
   CONTACT CARD
========================================= */

.contact-card{

  position:relative;

  overflow:hidden;

  padding:45px 30px;

  border-radius:30px;

  text-align:center;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );

  border:
  1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(15px);

  transition:0.5s;

  box-shadow:
  0 0 15px rgba(56,189,248,0.15);
}

.contact-card:hover{

  transform:
  translateY(-12px)
  scale(1.03);

  border:1px solid #38bdf8;

  box-shadow:
  0 0 25px #38bdf8,
  0 0 60px rgba(14,165,233,0.5),
  0 0 120px rgba(56,189,248,0.3);
}

/* =========================================
   CONTACT GLOW
========================================= */

.contact-glow{

  position:absolute;

  width:220px;
  height:220px;

  background:#38bdf8;

  border-radius:50%;

  filter:blur(90px);

  top:-100px;
  right:-100px;

  opacity:0.2;

  transition:0.5s;
}

.contact-card:hover .contact-glow{

  opacity:0.5;
}

/* =========================================
   CONTACT ICON
========================================= */

.contact-icon{

  width:90px;
  height:90px;

  margin:auto auto 25px;

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:50%;

  font-size:38px;

  color:white;

  background:
  linear-gradient(
    145deg,
    #0ea5e9,
    #38bdf8
  );

  box-shadow:
  0 0 15px #38bdf8,
  0 0 40px #0ea5e9;
}

/* =========================================
   CONTACT TEXT
========================================= */

.contact-card h3{

  font-size:30px;

  margin-bottom:10px;

  color:#38bdf8;

  text-shadow:
  0 0 10px #38bdf8;
}

.contact-card span{

  display:block;

  margin-bottom:18px;

  color:#94a3b8;

  font-size:14px;

  letter-spacing:1px;
}

.contact-card p{

  color:#e2e8f0;

  line-height:1.8;

  margin-bottom:25px;

  font-size:16px;
}

/* =========================================
   CONTACT BUTTON
========================================= */

.contact-card a{

  display:inline-block;

  padding:12px 28px;

  border-radius:50px;

  text-decoration:none;

  color:white;

  font-size:14px;

  background:
  linear-gradient(
    90deg,
    #0ea5e9,
    #38bdf8
  );

  transition:0.4s;

  box-shadow:
  0 0 10px #38bdf8;
}

.contact-card a:hover{

  transform:scale(1.05);

  box-shadow:
  0 0 20px #38bdf8,
  0 0 50px #0ea5e9;
}

/* =========================================
   FOOTER
========================================= */

footer{

  text-align:center;

  padding:30px;

  background:#020617;

  border-top:
  1px solid rgba(255,255,255,0.1);

  color:#64748b;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

  header{

    flex-direction:column;
  }

  nav{

    margin-top:15px;
  }

  nav a{

    display:inline-block;

    margin:8px;
  }

  .hero h2{

    font-size:42px;
  }

  .hero p{

    font-size:15px;
  }

  .profile-text{

    text-align:center;
  }

  .contact-title h2{

    font-size:40px;
  }

  .contact-grid{

    grid-template-columns:1fr;
  }

}

.contact-card{
  cursor:pointer;
}

/* =========================================
   CONTACT SECTION
========================================= */

.contact-section{

  padding:120px 8%;

  min-height:100vh;
}

/* =========================================
   CONTACT TITLE
========================================= */

.contact-title{

  text-align:center;

  margin-bottom:70px;
}

.contact-title h2{

  font-size:60px;

  font-weight:700;

  margin-bottom:15px;

  background:
  linear-gradient(
    90deg,
    #ffffff,
    #38bdf8,
    #ffffff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
  0 0 15px #38bdf8;
}

.contact-title p{

  color:#94a3b8;

  font-size:17px;
}

/* =========================================
   CONTACT GRID
========================================= */

.contact-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));

  gap:35px;
}

/* =========================================
   CONTACT CARD
========================================= */

.contact-card{

  position:relative;

  overflow:hidden;

  padding:40px 30px;

  border-radius:30px;

  text-align:center;

  text-decoration:none;

  color:white;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );

  border:
  1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(15px);

  transition:0.5s;

  cursor:pointer;

  box-shadow:
  0 0 15px rgba(56,189,248,0.15);
}

.contact-card:hover{

  transform:
  translateY(-10px)
  scale(1.02);

  border:
  1px solid #38bdf8;

  box-shadow:
  0 0 25px #38bdf8,
  0 0 60px rgba(14,165,233,0.3);
}

/* =========================================
   CONTACT GLOW
========================================= */

.contact-glow{

  position:absolute;

  width:220px;
  height:220px;

  background:#38bdf8;

  border-radius:50%;

  filter:blur(90px);

  top:-100px;
  right:-100px;

  opacity:0.2;

  transition:0.5s;
}

.contact-card:hover .contact-glow{

  opacity:0.5;
}

/* =========================================
   CONTACT ICON
========================================= */

.contact-icon{

  width:90px;
  height:90px;

  margin:auto auto 25px;

  display:flex;

  justify-content:center;
  align-items:center;

  border-radius:50%;

  font-size:38px;

  color:white;

  background:
  linear-gradient(
    145deg,
    #0ea5e9,
    #38bdf8
  );

  box-shadow:
  0 0 15px #38bdf8,
  0 0 40px rgba(14,165,233,0.5);

  transition:0.4s;
}

.contact-card:hover .contact-icon{

  transform:
  scale(1.1)
  rotate(8deg);
}

/* =========================================
   CONTACT TEXT
========================================= */

.contact-card h3{

  font-size:30px;

  margin-bottom:10px;

  color:#38bdf8;

  text-shadow:
  0 0 10px #38bdf8;
}

.contact-card span{

  display:block;

  margin-bottom:18px;

  color:#94a3b8;

  font-size:13px;

  letter-spacing:2px;
}

.contact-card p{

  color:#e2e8f0;

  line-height:1.8;

  font-size:16px;

  margin-bottom:25px;
}

/* =========================================
   BUTTON
========================================= */

.contact-card a{

  display:inline-block;

  padding:12px 28px;

  border-radius:50px;

  text-decoration:none;

  color:white;

  font-size:14px;

  font-weight:600;

  background:
  linear-gradient(
    90deg,
    #0ea5e9,
    #38bdf8
  );

  transition:0.4s;

  box-shadow:
  0 0 10px #38bdf8;
}

.contact-card a:hover{

  transform:scale(1.05);

  box-shadow:
  0 0 20px #38bdf8,
  0 0 50px rgba(14,165,233,0.5);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

  .contact-title h2{

    font-size:42px;
  }

  .contact-grid{

    grid-template-columns:1fr;
  }

}