/*
Template Name: Jewelry
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/
/*********************contact****************/
#contact_top{ 
 padding-bottom:40px;
 }

.detail_14 h2{
margin-bottom:20px;  
  }
.detail_14 .form-control{
 margin-bottom:20px;
 border-radius:0;
 height:50px;
 font-size:16px;
 background:none;
 border-color:#dfb8584d;
 box-shadow:none;
 }
.detail_14 .form_1{
 height:150px; 
  }
#contact_last{
 background:#dfb85838;
 padding-top:40px;
 padding-bottom:40px;
  }
.contact_last_2{
 margin-top:20px;
 }
.contact_last_2i h4{
font-size:24px;
 }
.contact_last_2i hr{
 border-color:#dfb858;
 border-width:3px;
 width:13%;
 margin-left:0; 
  }



  

 body {

  margin: 0;
  padding: 0;
}

.element_a {
  padding: 20px;
  opacity: 0; /* Commence caché */
  transform: translateY(80px); /* Déplacement vers le bas */
  transition: opacity 4s ease-out, transform 2s ease-out;/* Transition pour l'animation */
}

/* Animation pour la première section */
#contact_top.visible {
  opacity: 1; /* Rendre visible */
  transform: translateX(0); /* Déplacement vers la position originale */
}
.first{
  opacity: 0; /* Commence caché */
  transform: translateX(-50px); /* Déplacement vers la gauche */
  transition: opacity 0.8s ease-out, transform 2s ease-out;
}
#contact_top.visible .first{
  opacity: 1; /* Rendre visible */
  transform: translateX(0); /* Remonter à la position originale */
}

/* Animation pour la deuxième section */
#contact_last.visible {
  opacity: 1; /* Rendre visible */
  transform: translateY(0); /* Remonter à la position originale */
}

/* Styles supplémentaires */
.container {
  max-width: 1200px;
  margin: auto;
}
/*********************contact_end****************/

@media screen and (max-width : 767px){
.detail_14 {
 text-align:center;
 margin-top:15px;
 }
#contact_last{
 text-align:center; 
  }
.contact_last_1r {
margin-top:15px; 
 }
.contact_last_2i{
margin-bottom:10px; 
 }
.contact_last_2i hr{
margin-left:auto; 
 }
 .logo_about{
  width: 200px;
  height: 200px;
  margin-left: 35%;
}
 

}

@media (min-width:100px) and (max-width:500px) {
  .logo_about{
    margin-left: 20% ;
  }
 }
 
@media (min-width:768px) and (max-width:991px) {

 }
@media (min-width:992px) and (max-width:1200px) {

 }
@media (min-width:1201px) and (max-width:1220px) {

 }