* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow-x:none;
}
.navigation_content {
    height:80px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 0px 25px;
    border-radius: 60px;
}

.pages ul {
    display: flex;
    gap: 30px;
    list-style: none;
}

.click_buttom button {
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #4D74F2;
    color: white;
    font-size: 15px;
    font-weight: 600;
}
.bar{
    display: none;
}

.link {
    position: relative;
    cursor: pointer;
}

.link:before {
    content: "";
    background-color: black;
    position: absolute;
    left: auto;
    bottom: 0;
    right: 0;
    height: 1%;
    width: 0%;
    transition-property: width;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-duration: .9s;

}

.link:active::before,
.link:hover:before {
    left: 0;
    right: auto;
    width: 100%;
}
.pages ul li a{
    text-decoration: none;
    color: #424242;
    
}
.contact_content_container{
    height: 310px;
    margin: 20px 60px;
    display: flex;
    position: relative;
    border-bottom: 0.5px solid rgb(189, 188, 188);
}
.dot_contact{
    position: absolute;
    top: 120px;
    left: 80px;
}
.content_nice_meet h1{
font-size: 100px;
}
.content_nice_meet{
    height: 250px;
    text-indent: 14rem;
    margin: 50px 0px 0px 50px;
}
.Contact_vedio_container{
    width: 200px;
    height: 260px;
    position: absolute;
    right: 60px;
    bottom: 30px;
}

.second_section_container{
    display: flex;
    padding: 10px 50px;
    gap: 10px;
}
.second_section_part_one{
    flex-grow: 1; 
    flex-direction: column;
}
.second_section_part_second{
     flex-grow:30;
    padding-left: 50px;

}
.hate_contact_form{
    display: flex;
    gap: 40px;
}

.name_email,.phone_hear{
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
}

.name_email input,.phone_hear input,.hear_input select,.budget input{
padding: 15px 10px 5px 10px;
font-size:15px;
border-radius: 6px;
border: none;
border:0.5px solid rgb(184, 183, 183);
width: 300px;
height: 47px;

}

.name_input,.email_input,.phone_input,.hear_input,.text_input,.budget{
    position: relative;
    width: fit-content;
}

.name_input label,.email_input label,.phone_input label,.hear_input label,.text_input label,.budget label{
    position: absolute;
    font-size: 17px;
    top:10px;
    left: 15px;
    z-index: 2;
}
.text_input textarea{
padding: 15px 10px 5px 10px;
font-size:25px;
border-radius: 6px;
border: none;
border:0.5px solid rgb(184, 183, 183);
}
.subscribe{
    display:flex;
    gap: 10px;
}
.send_message_container{
    display: flex;
    align-items:end;
    gap: 30px;
}
.send_message_container button{
     padding: 10px 20px;
     background-color: #4D74F2;
     color: white;
     border: none;
     border-radius: 20px;
     font-weight: 600;
     font-size:14px;
}
.confirm_customer{
    color: #4D74F2;
    border-bottom: 1px solid blue;
}
.hear_input{
    position: relative;
}
.hear_input select{
    appearance: none;
}
label{
    pointer-events: none;
}

.hear_input:after{
    content:"";
    width: 8px;
    height: 8px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    position: absolute;
    top: 50%;
    right:20px;
    transform: rotate(45deg);
    margin-top: -10px;
    pointer-events: none;

}
/* Pop_up */
.Pop_up_container{
    padding: 20px 30px;
    background-color: rgb(99, 158, 240);
    width: 250px;
    height: 320px;
    display: grid;
    place-content: center;
    border-radius: 10px;
    border: 1px solid rgb(166, 166, 166);
    position: absolute;
    top: 30%;
    left:40%;
    visibility: hidden;
}
.animation_picture{
display: flex;
place-content:center;
}

.ok_button button{
width: 100%;
padding: 6px 0px;
font-size: 15px;
color: white;
background-color:#C245E8;
border: none;
}

.Pop_up_content p {
    line-height: 23px;  
}


#blur_1,#blur_2,#blur_3{
    filter: blur(10px);
}

 #show{
 visibility: visible;

}
#none{
    display: none;
}
#dollar_sign{
  position: absolute;
   right:20px;
   top: 10px;
   font-size: 20px;
}
form{
    width: 100vw;
}
@media (max-width:426px) {
    .navigation{
        width: 100vw;
    }
     .logo a img{
      width:10vw;
      height:9vh;
    }

    .bar{
        display:flex;
    }
    .pages{
        display: none;
    }
    .bar img{
        width:6vw;
        height:5vh;
        position: relative;
        top:2px;
         
    }
        .bar_page{
        display: flex;
         gap: 5px;
}
    .navigation_content{
      padding: 0px 10px;
      height: 9vh;
    }
.content_first_section_container{
    width: 100vw;
}

   .contact_content_container{
    margin: 5px 10px;
   }
   .dot_contact{
    top: 40px;
    left: 30px;
   }
   .content_nice_meet h1{
    font-size: 70px;
   }
   .second_section_container{
    padding: 8px 20px;
   }
   .second_section_part_one{
    display: none;
   }
   .second_section_part_second{
    padding-left: 0px;
   }
   .name_email,.phone_hear{
    flex-direction: column;
   }
     .text_input textarea{
    width: 100%;
}
.content_nice_meet{
    text-indent: 7rem;
}
#hear_select{
    font-size:15px;
}
.Pop_up_container{
    left:18%;
}

}