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


body{
    background-color:;
    overflow-x: hidden;
    
    /*min-width:100%;*/
}



section{
    display: flex;
    align-items:center ;
    justify-content: center;
    min-height: 100vh;
    width:100%;
    padding:20px;
   /* background-color: black /*lightblue */;   /*will change it to #001923*/  /*background-image:linear-gradient(#060872,#10172a) ;*/ background-color: rgb(20, 110, 189);
   background-image: url('/images/contact\ us\ 1\ bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;

}/*i removed the circles and put image as a bg for the last update*/
/*section::before & section::after 2 create circle */
 /*section::before{
     content: '';
    position:absolute;
    width:400px;
    height:400px;
    background:linear-gradient(#ffeb3b, #e91e63);
    border-radius: 50%;
    transform: translate(-420px, -180px);
}
/*will copy section::before and make it after and  ll change width, height & transform:translate, last part will make us create another circle */
 section::after{    
     content: '';
    position:absolute;
    width:320px;    /*it was 350 in the beginning */
     height:320px;
   /* background:linear-gradient(#2196f3, #83d3ff);  */ 
    border-radius: 50%;
     transform: translate (400px, 180px)/*(400px,  180px)*/ ;  
}
/*glass background*/
.container{
    position: relative;
    z-index: 1000;   /*1000*/
    width:100%;
    max-width: 1000px;
    padding:50px;
  
   /* background: rgba(255, 255, 255, 0.33); removed it and did it darker down*/ 
   background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.2px);
    -webkit-backdrop-filter: blur(5.2px);
    border: 1px solid rgba(255, 255, 255, 0.24);


    /*this part i did it in the beginning but i changed it to the part up
     background:rgba(255, 255, 255, 0.24);   /*rgba(255, 255, 255, 0.1)*/
    /* -webkit-backdrop-filter: blur(5.6px);
     box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;  /*0 25px 45px rgba(0,0,0,0.1)*/
    /* border-radius: 5px;
     border: 1px solid rgb(61, 60, 57);   /*rgba(225,225,225,0.25)*/
    
}
/*I THINK IM GONNA DELETE THIS PART container::before*/
.container::before{
    content: '';
    position: absolute;
    top:0;
    left:-40%;
    width:100%;
    height:100%;
    background-color: rgba(225, 225, 225, 0.05);
    pointer-events: none;
    transform: skewX(-15deg);
}

.container h2{
    color:#fff;
    font-size: 3rem;
    width:100%;
    text-align: center;
    padding-bottom:20px;  
    text-transform: capitalize;
}

.container .row100{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(250px ,1fr));  /*so to make them beside each other(grid)*/
    position: relative;
    width:100%;
}
 
.container .row100 .col{
    position: relative; 
    padding:0 10px;
     margin:30px 0 20px;
     width:100%;
}

.container .row100 .col .inputBox{
   position: relative;
    color:#fff;
    width:100%;
    height:40px;    
}

.container .row100 .col .inputBox .text{
    font-weight: 500;
    text-transform: capitalize;
}

.container .row100 .col .inputBox input,
.container .row100 .col .inputBox textarea  /*this line for the textarea*/
 {
    position: absolute;  /*will make me remove the span(1st name, last name , phone&email) and move it inside the input */
    /*right:10px;*/
    /* bottom: 10px; */
    width:100%;
    height:100%;
    background-color: transparent; /*to remove the bg from input and make the span appear inside*/
    box-shadow: none; /**/
    outline: none;    /**/
    border: none;
    font-size: 1.3rem;  /*from here its for the input typing*/
    padding: 10px;  /*0 10px*/
    z-index: 1;
    color:black
}

.container .row100 .col .inputBox .text{
    display:block;
    position: absolute;
    left: 0; /*left:10px;*/
    top:0;
    font-size: 1.5rem;
    line-height: 40px;
    padding: 0 10px;
    transition: 0.5s;
    pointer-events: none; /*the browser doesn't apply the hover state therefor, the tooltip doesn't show */
}


/*this part down directly NEW for me */
/*it will be for the text part(the span with text class to make the animation'when we click on the input the span(as a like space holder will move up)') */
.container .row100 .col .inputBox input:focus + .text,
.container .row100 .col .inputBox textarea:valid + .text
.container .row100 .col .inputBox textarea:focus + .text, /*add those after i did textarea:valid ~ .line*/
.container .row100 .col .inputBox textarea:valid + .text
{
    top:-35px;
    left:-10px; 
    
}

/*now we will make class line which for span 2 make it appear when the input are empty*/

.container .row100 .col .inputBox .line{
    position: absolute;
    bottom: 0; 
    display: block;
    width:100%;
    height:2px;
     background:#fff; 
    transition: 0.5s;
    border-radius: 2px;
    pointer-events: none;
}
/*   THIS WORKING AS IT MUST BE BUT WANAN TRY ANOTHER ONE DOWN IT 2 NOT DAMAGE THIS ONE
.container .row100 .col .inputBox input:focus ~ .line,
.container .row100 .col .inputBox textarea:valid ~ .line{
    height:100%;
}*/

/*.container .row100 .col .inputBox input:focus ~ .line,
.container .row100 .col .inputBox input:valid ~ .line{
    height:100%;
}*/


.container .row100 .col .inputBox input:focus ~ .line,   /*this will make the input and the span(as a placeHolder) disappear when i put input  */
.container .row100 .col .inputBox input:valid ~ .line{
    height:100%;  /*this will make the input height enough with the size of typing*/
}


.container .row100 .col .inputBox.textarea{
    position:relative;
    width:100%;
    height:100px;
    padding:10px 0;

}

.container .row100 .col .inputBox textarea:focus ~ .line,
.container .row100 .col .inputBox textarea:valid ~ .line{
    height:100%;
}

/*button*/
.container .row100 .col input[type="submit"]{
padding:10px 35px;
border: none;
font-size: 1.2rem;
cursor: pointer;
outline: none;
font-weight: 600;
border-radius: 5px;
transition: .5s ease-in-out;
}

.container .row100 .col input[type="submit"]:hover{
    background-color: black;
    color:#fff;
}


/*back-button*/
#back-btn{
    display:block ;
    position: fixed;
    bottom: 20px;
    left:10px;
    z-index: 99;  /*wanna try it another num*/
    border:none;
    outline: none;
    /*background-color: #e85b77;*/
    background-color: transparent;
    color:#fff;
    cursor: pointer;
    padding:15px;
    border-radius: 5px;
    font-size: 1rem;
    transition: .5s ease-in;
    z-index: 1000;
}

#back-btn:hover{
    background-color: white;
    color:#e85b77; 
    border: solid 1px #e85b77;
    transition: .5s ease-out;
}



@media(max-width:768px){
    section::before{
        transform: translate (-200px, -100px);
    }
     section::after{
        transform: translate((220px, 100px));
     }
     .container .row100 .col input[type="submit"]{
        border-radius: 5px; 
     }

}