/* RESET */
*{margin:0;padding:0;box-sizing:border-box}

/* BODY */
body{
 font-family:'Inter',sans-serif;
 color:#fff;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic4Hcn9iy25Jy87nvrtX7lbJcs-yjzB1NvaaKmRksoULBmmFo01zBV2kem2EDNA4xdqyGlJdJ7p799mYG4VP9-dVRFE2LmZz9NxaxvjEseZ_SGgXbmqkaKUTnGCjYN77mRT4LDLSmeW4ZfGP0-EjjnUkcABWs_uHDIOHKOfd8_nk-7cgi7kXBCi0cVXxA/s16000/ChatGPT%20Image%20Mar%2024,%202026,%2001_34_18%20PM.png') center/cover fixed;
 overflow-x:hidden;
}

#typing::after{
 content:"";
 display:inline-block;
 width:3px;
 height:1em;
 background:#00eaff;
 margin-left:6px;
 animation:blink 1s infinite;
 vertical-align:bottom;
}

@keyframes blink{
 0%,100%{opacity:1;}
 50%{opacity:0;}
}

.cursor{
 position:fixed;
 width:18px;
 height:18px;
 border-radius:50%;
 background:#00eaff;
 pointer-events:none;
 transform:translate(-50%,-50%);
 box-shadow:0 0 20px #00eaff;
 z-index:9999;
 transition:transform 0.08s ease;
}

/* OVERLAY */
body::before{
 content:"";
 position:fixed;
 width:100%;
 height:100%;
 background:
 radial-gradient(circle at center, rgba(0,234,255,0.12), transparent 60%),
 linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
 z-index:-1;
}

/* NAVBAR BASE */
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 18px 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;

  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.05);

  transition: all 0.4s ease;
}

/* SHRINK ON SCROLL */
.nav.scrolled {
  padding: 12px 8%;
  background: rgba(0, 0, 0, 0.7);
}

/* LOGO */
.logo img {
  height: 40px;
}

/* MENU */
.menu {
  display: flex;
  gap: 30px;
}

/* LINKS */
.menu a {
  position: relative;
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
}

/* REMOVE PURPLE */
.menu a:visited,
.menu a:active {
  color: #fff;
}

/* HOVER GLOW */
.menu a:hover {
  color: #00eaff;
}

/* UNDERLINE ANIMATION */
.menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #00eaff;
  transition: 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

/* ACTIVE LINK */
.menu a.active {
  color: #00eaff;
}

.menu a.active::after {
  width: 100%;
}

/* HERO */
.hero{
 height:100vh;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
}

.hero h1{
 font-size:72px;
 font-weight:700;
 letter-spacing:1px;
 color:#00eaff;
 text-shadow:0 0 30px rgba(0,234,255,0.5);
 animation:fadeHero 1.2s ease;
}

@keyframes fadeHero{
 from{
  opacity:0;
  transform:translateY(40px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

.hero p{
 margin-top:10px;
 opacity:.7;
}

/* SECTION */
.section{
 padding:140px 10%;
 max-width:1100px;
 margin:auto;
 text-align:center;
 opacity:0;
 transform:translateY(120px) scale(0.95);
 transition:all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.section{
 opacity:0;
 transform:translateY(80px);
 transition:all 0.8s ease;
}

.section.show{
 opacity:1;
 transform:translateY(0);
}

.section h2{
 font-size:42px;
 font-weight:600;
 margin-bottom:20px;
 text-shadow:0 0 20px rgba(0,234,255,0.25);
 transform:translateY(20px);
 transition:0.6s ease;
}

.section.show h2{
 transform:translateY(0);
}
  
/* GRID */
.grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:30px;
 margin-top:50px;
}

/* CARD */
.card{
 position:relative;
 background:rgba(255,255,255,0.06);
 backdrop-filter:blur(20px);
 border-radius:20px;
 padding:30px;
 transition:.4s;
 cursor:pointer;
 overflow:hidden;
 transform-style:preserve-3d;
}
.card{
 transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* ADVANCED HOVER */
.card:hover{
 transform:perspective(1000px) rotateX(6deg) rotateY(-6deg) scale(1.07);
 box-shadow:0 30px 60px rgba(0,0,0,0.7),
            0 0 50px rgba(0,234,255,0.4);
 background:rgba(0,234,255,0.1);
}
/* GLOW */
.card:hover{
 transform:scale(1.05) translateY(-10px);
 box-shadow:0 0 30px rgba(0,234,255,0.3);
}

/* RIPPLE */
.ripple{
 position:absolute;
 border-radius:50%;
 background:rgba(0,234,255,0.4);
 transform:scale(0);
 animation:ripple 0.6s linear;
}

@keyframes ripple{
 to{transform:scale(4);opacity:0}
}

/* ICON */
.card img{
 width:70px;
 height:70px;
 border-radius:50%;
 border:2px solid #00eaff;
 margin-bottom:15px;
}

/* CONTACT */
.contact-card{
 padding:14px 28px;
 min-width:160px;
 text-align:center;
 border:1px solid #00eaff;
 border-radius:30px;
 font-size:16px;
 letter-spacing:0.5px;
 transition:all 0.3s ease;
 cursor:pointer;
}

/* PREMIUM HOVER */
.contact-card:hover{
 background:#00eaff;
 color:#000;
 transform:translateY(-4px);
 box-shadow:0 0 20px rgba(0,234,255,0.6);
}
  
/* FLEX */
.contact-grid{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:20px;
 margin-top:30px;
 flex-wrap:wrap;
 max-width:800px;
 margin-left:auto;
 margin-right:auto;
}

html {
  scroll-behavior: smooth;
}

.section {
  scroll-margin-top: 100px;
}

.contact-card {
  text-decoration: none;   /* remove underline */
  color: inherit;          /* use original text color */
}

.contact-card:hover {
  color: #000; /* or your original hover color */
}

.menu a {
  text-decoration: none;   /* remove underline */
  color: #fff;             /* your original white color */
  font-weight: 500;
  transition: 0.3s ease;
}

.menu a:hover {
  color: #00eaff;
}

.menu a:visited,
.menu a:active {
  color: #fff;
}

.menu a {
  position: relative;
}

.menu a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  left: 0;
  bottom: -5px;
  background: #00eaff;
  transition: 0.3s;
}

.menu a:hover::after {
  width: 100%;
}

/* BUTTON CENTER FIX */
.page-buttons{
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* EXPLORE SECTION SPACING */
.explore-section{
  margin-top: 100px;
  text-align: center;
}

/* HEADING PREMIUM LOOK */
.explore-section h2{
  font-size: 42px;
  margin-bottom: 40px;
  color: #fff;
  letter-spacing: 1px;
}

.btn{
  padding: 12px 22px;
  border-radius: 30px;
  border: 1px solid #00eaff;
  color: #00eaff;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn:hover{
  background:#00eaff;
  color:#000;
  box-shadow: 0 0 20px rgba(0,234,255,0.6);
  transform: translateY(-3px);
}

.page-container{
  max-width: 900px;
  margin: 140px auto 60px;
  padding: 20px;
}

.page-content{
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255,255,255,0.9);
}

.page-content h2{
  font-size: 40px;
  margin-bottom: 20px;
  color: #00eaff;
}

.page-buttons{
  margin-top: 30px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.legal-container{
  max-width: 900px;
  margin: 140px auto;
  padding: 20px;
}

.legal-container h1{
  font-size: 40px;
  margin-bottom: 20px;
  color: #00eaff;
}

.legal-content{
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,0.85);
}

.legal-content h2{
  margin-top: 30px;
  color: #00eaff;
  font-size: 22px;
}

.social-buttons{
  margin-top: 5px; /* increase spacing from heading */
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.email-box{
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.email-text{
  font-size: 15px;
  color: rgba(255,255,255,0.85);
}

.page-content h3{
  margin-top: 35px;
  margin-bottom: 8px;
}

.email-box{
  margin-top: 12px;
}

.footer-links{
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.footer-btn{
  padding: 8px 18px;
  border: 1px solid #00eaff;
  border-radius: 25px;
  color: #00eaff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.footer-btn:hover{
  background: #00eaff;
  color: #000;
  box-shadow: 0 0 15px rgba(0,234,255,0.6);
}

.page-content h2{
  font-size: 42px;
  color: #00eaff;
  margin-bottom: 20px;
}

.page-content h3{
  font-size: 22px;
  color: #00eaff;
  margin-top: 35px;
  margin-bottom: 10px;
}

.page-content{
  max-width: 900px;
  line-height: 1.9;
  color: rgba(255,255,255,0.9);
}

/* MAIN TITLE */
.page-content h2{
  font-size: 42px;
  color: #00eaff;
  margin-bottom: 25px;
}

/* SUBHEADINGS */
.page-content h3{
  font-size: 22px;
  color: #00eaff;
  margin-top: 30px;   /* SPACE FROM ABOVE */
  margin-bottom: 8px; /* SPACE BELOW */
}

/* PARAGRAPHS */
.page-content p{
  margin-bottom: 14px;
  color: rgba(255,255,255,0.85);
}

/* SPECIAL FIX (BEST PART) */
.page-content p + h3{
  margin-top: 35px;
}

.page-content p{
  margin-bottom: 10px;
  color: rgba(255,255,255,0.85);
}

.page-content ul{
  margin-left: 20px;
  margin-top: 10px;
}

.page-content li{
  margin-bottom: 6px;
}

a{
  text-decoration: none;
  color: inherit;
}

.page-content h2, 
.page-content h3{
  text-shadow: 0 0 10px rgba(0,234,255,0.4);
}

#cursor{
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00eaff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px #00eaff;
  z-index: 9999;
}