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

body{
  font-family:'Poppins',sans-serif;
  background:#050507;
  color:white;
  overflow-x:hidden;
}

/* 🌈 RGB Glow Background */
.bg-glow::before,
.bg-glow::after{
  content:'';
  position:fixed;
  width:400px;
  height:400px;
  border-radius:50%;
  filter:blur(120px);
  animation:move 10s infinite alternate;
}

.bg-glow::before{
  background:#ff00cc;
  top:10%;
  left:10%;
}

.bg-glow::after{
  background:#00f7ff;
  bottom:10%;
  right:10%;
}

@keyframes move{
  from{transform:translate(0,0);}
  to{transform:translate(50px,50px);}
}


/* Navbar */
.navbar {
  position: fixed;
  width: 100%;
  height: 100px;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 9999;
  box-sizing: border-box; /* 🔥 important */
  justify-content: center;
}
 .navbartext{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px 20px;


 }


/* Logo */
.logo {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
   text-decoration: none;
  
}

/* Menu */
.menu {
  list-style: none;
  display: flex;
  gap: 15px; /* কমাও */
  margin: 0;
  padding: 0;
  flex-wrap: wrap; /* 🔥 important */
}

.menu a {
  text-decoration: none;
  color: #ccc;
  font-size: 14px;
  transition: 0.3s;
}

.menu a:hover {
  color: #fff;
}

@media(max-width:768px){
  .navbartext{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: 5px; /* 🔥 important: gap control */
    padding-top: 5px; /* 🔥 কমিয়ে দাও */
  }

  .logo{
    margin: 0;
    padding: 0;
   
  }

  .menu{
    justify-content: center;
    align-items: center;
    margin-top: 2px; /* 🔥 আগে 8px ছিল → কমাও */
  }
}

@media(max-width: 768px){

  .navbar {
    padding: 10px 15px;
  }

  .menu {
    gap: 10px;
  }

  .menu a {
    font-size: 12px;
  }

}



/* SECTION */
.contact-section{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:140px;
  padding-left: 30px;
  padding-right: 30px;
  text-align:center;
}



.title{
  font-size:3rem;
  margin-bottom:10px;
  background:linear-gradient(90deg,#ff00cc,#00f7ff);
  -webkit-background-clip:text;
  color:transparent;
}

.subtitle{
  margin-bottom:40px;
  opacity:0.7;
}

/* CONTAINER */
.contact-container{
  display:flex;
  gap:40px;
  max-width:1100px;
  width:100%;
  flex-wrap:wrap;
  justify-content:center;
}

/* GLASS BOX */
.contact-info,
.contact-form{
  flex:1;
  min-width:300px;
  padding:30px;
  border-radius:20px;
  backdrop-filter:blur(15px);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 0 30px rgba(0,0,0,0.3);
}

/* INFO */
.contact-info h2{
  margin-bottom:10px;

}

.info-box{
  display:flex;
  gap:10px;
  margin:15px 0;
  justify-content: center;
}

.socials a{
  display:inline-block;
  margin-right:10px;
  margin-top:10px;
  text-decoration:none;
  color:#00f7ff;
}

/* FORM */
.input-box{
  position:relative;
  margin-bottom:25px;
}

.input-box input,
.input-box textarea{
  width:100%;
  padding:12px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:10px;
  outline:none;
  color:white;
}

.input-box textarea{
  height:120px;
  resize:none;
}

/* FLOAT LABEL */
.input-box label{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  pointer-events:none;
  transition:0.3s;
  color:#aaa;
}

.input-box input:focus + label,
.input-box input:valid + label,
.input-box textarea:focus + label,
.input-box textarea:valid + label{
  top:-10px;
  font-size:12px;
  color:#00f7ff;
}

/* BUTTON */
button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:linear-gradient(90deg,#ff00cc,#00f7ff);
  color:white;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

button:hover{
  transform:scale(1.05);
}

/* MOBILE */
@media(max-width:768px){
  .title{
    font-size:2rem;
  }
}


.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  width:60px;
  height:60px;
  background:#25D366;
  color:white;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 0 20px rgba(37,211,102,0.6);
  transition:0.3s;
  z-index:999;
}

.whatsapp-float:hover{
  transform:scale(1.1);
}