*{
    box-sizing: border-box;
}

 body{
    margin:0;
    padding:0;

     background: linear-gradient(to right, #1A0324, #3A0A52, #6B1C8F);
    color:white;
     font-family: 'Inter', sans-serif;
   
} 



.contact .image{
   
    width:100%;
    height:300px;  
    overflow:hidden;
    margin-bottom:0px;
}

.contact .image img{
    width:100%;
    height:100%;
    object-fit:cover;  
    border-radius:10px;
    filter: brightness(60%);
}

  .contact .image .text{
    position:absolute;
    top:20%;
    left:50%;
    transform:translate(-50%, -50%);
    color:white;
    text-align: center;
    white-space: nowrap;
}

  .contact .image .text .heading{
    font-size:40px;
     
      
  }
   .contact .image .text .first{
    font-size:25px;
  font-family: ui-sans-serif, system-ui, sans-serif;
 
 
  }
   .contact .image .text .second{
    font-size:25px;
      line-height: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
       
  }



.div1{
    display:flex;
    justify-content:center;
    margin-top:40px;   
}



.div1 form{
    width:800px;
    background:#f2f4f8;
    padding:20px;
    border-radius:20px;
   
    display:flex;
    flex-direction:column;
    gap:20px;
}

.heading{
    display: flex;
    justify-content: center;
    color:#ffffff;
    
}

.box{
    width:100%;  
    padding:18px 45px 18px 20px; 
    border:none;
    border-radius:15px;
    background:#f2f4f8;
    box-shadow: inset 5px 5px 10px #d1d9e6,
                inset -5px -5px 10px #ffffff;
    outline:none;
}



.row{
    display:flex;
    gap:20px;
    width:100%;
}


.input-group{
    position: relative;  
    width:100%;
}
.input-group .box::placeholder {
  color: black;  
 
}



.input-group i{
        
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
 color: purple; 
    font-size:18px;
    pointer-events:none;
}


.input-group .box{
    padding-right:45px;
}
textarea.box{
    height:120px;
    resize:none;
    padding-top:18px;
}






.btn-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
}
.file-name{
  margin-top: 6px;
  font-size: 13px;
  color:#8c8291;
  display: block;   
  min-height: 16px; 
}

.attach{
    flex:1;
    padding:16px;
    border:none;
    border-radius:30px;
     background: linear-gradient(to right, #1A0324, #3A0A52, #6B1C8F);
    box-shadow: 5px 5px 15px #d1d9e6,
                -5px -5px 15px #ffffff;
    color: white; 
    cursor:pointer;
    transform: none;
    transition: all 0.3s ease;
}

.attach:hover{
    transform: translateY(-2px);
}

.send{
    flex:1;
    padding:16px;
    border:none;
    border-radius:30px;
       background: linear-gradient(to right, #1A0324, #3A0A52, #6B1C8F);
    color:white;
    font-weight:500;
    cursor:pointer;
    transform: none;
    transition: all 0.3s ease;
}

.send:hover{
    transform: translateY(-2px);
}




.footer{
  margin-top: 80px;
  padding: 40px 20px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  text-align: center;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.footer .div2 h2{
    
     font-size: 30px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.footer .info{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: #ddd;
}

.footer .info i{
  color: #ffffff;
}

.footer .copyright{
  margin-top: 25px;
  font-size: 14px;
  color: #aaa;
}



.toast{
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #1f2933;
    color: #fff;
    padding: 16px 22px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 9999;
}

.toast i{
    color: #4ade80;
    font-size: 20px;
}

.toast.show{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}