:root {
  --fontsize-web-h2 : 35px;
  --fontsize-web-h3 : 22px;
  --fontsize-web-xxl : 190px;

   --fontsize-movil-h2 : 18px;
   --fontsize-movil-h3 : 15px;

   --background-primary : #2B2B2B;
   --text-color-primary : #fff;
   --text-color-terceary : #ccc;

   --background-secondary: #c5986e;
   --text-color-secondary : #fff;

   --padding-primary : 5px 5px;
   --padding-secondary : 2px 2px;

   --letterspacing-primary : 6px;
}


* {

    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    line-height: 1.6;
}

body {

  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;

  
}


.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}


/* WEB */

input {
    border: none;
    outline-style: none;
    letter-spacing: 2px;
    padding-left: 10px;
    color: var(--text-color-primary);
}

textarea {
    border: none;
    padding-left: 10px;
    color: var(--text-color-primary);
    outline-style: none;
}

h3 {
    font-size: var(--fontsize-web-h3);
}

h2 {
    font-size: var(--fontsize-web-h2);
}

a {
    color: var(--text-color-primary);
    font-size: 13px;
}

p {
    font-size: 12px;
}



/* MOVIL */

.container-dashboard {

    width: 100%;
    height: auto;
}

header {
    width: 100%;
    
}


body {
    background-color: var(--background-primary);
}
.container-father {

    width: 100%;
    height: 650px;
    background-image: url('/img/image.jpg');
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;

    display: flex;
    justify-content: space-between;
}

.container-left {
  
    width: 280px;
    height: 650px;

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--text-color-primary);
}


.left-one {
    
    height: 160px;
    width: 100%;
    background-color: var(--background-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    

}

.arch {

    width: 100%;

    position: absolute;
    left: -100%;
    transition: 2.5s ease-in-out;
}

.arch div {
    text-align: center;
    padding: var(--padding-primary);
}

.date {
  
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.month {
    width: 100%;
    margin: auto;
    max-width: 100px;

    
}

.month p {
    text-align: right;
    color: #ccc;
}

.day {
    width: 100%;
   
}

.day h3  {
    font-size: 40px;
}



.left-two {
  
    width: 100%;
    height: 490px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.architecture-title{
    padding: var(--padding-secondary);
    width: 45%;
  
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--background-primary);

}

.architecture-title div {
    height: auto;
   
}

.text-vertical {
    width: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 10px;   /* Espaciado horizontal entre letras */
    display: flex;
    align-items: center;
}

.text-vertical p {
    text-align: center;
    font-size: 9px;
}


.slash {
    width: 100%;

   


}

.slash p {
    text-align: center;
 
    color: #ccc;
   
}

.social-list {
    width: 100%;
   
}

.social-list ul li a {
    font-size: 12px;
    color: #ccc;

    /*
    color: #666666;
    */
}

.controls {
    width: 55%;
    
}

.empty {
    width: 100%;
    height: 60px;
    background-color: var(--background-primary);
}

.buttons {


    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}

.buttons a {

    width: 70px;
    height: 50px;

    font-size: 9px;
    letter-spacing: 4px;
    font-weight: bold;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.buttons a:hover {
    color: #c5986e;
    transition: 0.3s ease-in-out;
}

.container-right {

    width: 85%;
    
}


.container-right .info {
 
    position: absolute;
    right: -100%;
    transition: 2.5s ease-in-out;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 100px;

   
   
}

.telephone {
    width: 100%;
    max-width: 150px;
    align-items: center;
    display: flex;
    height: 100px;
    justify-content: center;
    text-align: center;
}

.telephone a {
    width: 100%;
       letter-spacing: 1px;

}

.telephone a:hover {

    transition: 0.3s ease-in-out;
    color: #c5986e;
 
}

.links {
   
    width: 100%;
    max-width: 600px;
    height: 100px;
    padding-right: 10px;

 
}


.links nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 100px;
}

.links nav ul li {
    margin: 5px 5px;
    
}


.links nav ul li a {
    color: #c5986e;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 11px;
}


.links nav ul li a:hover {

    color: #3C3C3C;
    transition: 0.3s ease-in-out;
} 

.links .logout-btn {

    border: none;
    background-color: transparent;
    color: #c5986e;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 3px;
}

.links .logout-btn:hover {

   color: #3C3C3C;
   transition: 0.3s ease-in-out;
   cursor: pointer;
}



.project {
   
    width: 100%;
    height: 100%;
    max-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;

}


.info {

    max-width: 1000px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px 10px;

    display: flex;
    height: auto;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: right;
   
}

.project div h2 {

    width: 100%;
    text-align: right;
    height: auto;
    color: var(--text-color-primary);
    letter-spacing: 6px;
}



.project div p {
     text-align: right;
    width: 100%;
    height:auto;

    color: var(--text-color-primary);
    margin: 15px 0px;
}

.project div a {
    
    width: 100%;
    max-width: 150px;
    height: auto;
   
    background-color: var(--background-secondary);
    color: var(--text-color-secondary);
    padding: 10px 10px;
    border-radius: 10px 10px 10px 10px;
    text-align: center;
}




/* ABOUT */

.container-about{
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--background-primary);
    color: var(--text-color-primary);
    padding-bottom: 50px;
  
}

.about-title {
    width: 100%;
    font-size: var(--fontsize-web-h3);
    height: 120px;
   
    display: flex;
    align-items: center;
    justify-content: center;

 
}

.content-about {
  
 
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    position: absolute;
    left: -100%;
    transition: 2.5s ease-in-out;



}

.about-title h3 {
    letter-spacing: var(--letterspacing-primary);
}



.content-about div {
    width: 100%;
    max-width: 300px;
    margin: 15px 15px;
 

}

.content-about .one {
    max-height: 300px;
    height: auto;
    
}

.content-about .two{
    height: 400px;
    overflow-y: auto;
    
    
}



.content-about .tree {
    height: 400px;
 
    
}


.content-about .one h3 {
    font-size: var(--fontsize-web-h3);
    padding: 15px 5px;
}


.content-about .one p {

    text-align: justify;
}


.content-about .two h3 {
    font-size: var(--fontsize-web-h3);
    padding: 15px 5px;
}



.content-about .two ul li {
    height: auto;

    width: 100%;
    letter-spacing: 3px;
    font-size: 10px;
    margin: 10px 0px;
    text-transform: uppercase;

}

.content-about .two ul li i{

    font-size: 20px;
}

.content-about .tree img {
    
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* PROJECT */

.container-project{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--background-primary);
    color: var(--text-color-primary);
 
    
}

.project-title {

    width: 100%;

    max-width: 1000px;
    font-size: var(--fontsize-web-h3);
    height: auto;
 
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px 20px;
    margin-bottom: 20px;
}

.project-title h3 {
    width: 100%;
    max-width: 350px;
    text-align: center;
    letter-spacing: var(--letterspacing-primary);
    margin-bottom: 20px;

    margin-right: 10px;
    font-size: 18px;
    
}

.project-title p {
    width: 100%;
    max-width: 600px;
    text-align: left;
    font-size: 13px;
}



.content-project {
    margin-top: 20px;
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;

    position: absolute;
    right: -100%;
    transition: 1.5s ease-in-out;


}

.content-project a {

    width: 100%;
    max-width: 400px;
    margin: 40px 10px;
    height: 450px;
    position: relative;
    display: flex;
    align-content: center;
    justify-content: right;
    flex-wrap: wrap;
    
   
    
}


.content-project a div {

    position: absolute;
    bottom: 10%;
    left: 0;
     background-color: rgba(0,0,0,0.5);

}






.content-project a:hover {
    opacity: 0.5;
    transition: 0.3s ease-in-out;
}

.content-project a h3 {
   width: 300px;
   margin: left;

   padding: 10px 10px;
   position: relative; 
   z-index: 2;
   color: var(--text-color-primary);
   font-size: 15px;
   letter-spacing: 2px;

   font-weight: lighter;
   text-transform: uppercase;
  
}

.content-project a p {
   width: 100%;
   color: var(--text-color-primary);
   z-index: 2;
   letter-spacing: 6px;
   padding: 5px 5px;

}


.content-project a img {
    
    width: 85%;
    height: 100%;
 
    object-fit: cover;
    
 

}


/*  container-year-experiences */


.container-year-experiences {
    width: 100%;

    display: flex;
    justify-content: center;
    background-color: var(--background-primary);
    color: var(--text-color-primary);

}

.container-year-experiences div {
    
    width: 100%;
    max-width: 1000px;
    margin: auto;

}

.container-year-experiences div h3 {
    text-align: center;

}

.container-year-experiences div h3 .title {

    color: var(--background-secondary);
   
}

.number {

    font-size: var(--fontsize-web-xxl);
    background-image: url('https://img.freepik.com/fotos-premium/hermoso-mar-dorado-sol-brillar-al-atardecer_49071-1549.jpg');
      background-size: 200%;
      background-position: center;
      
      /* Esto es lo importante: */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
}


/* CONTAINER OUR CLIENTES*/

.container-our-clients {

    width: 100%;
    background-color: var(--background-primary);
    color: var(--text-color-primary);
    
}

.content-our-clients {

    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
}

.content-our-clients .button-our-client {

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    margin-bottom: 30px;
}

.content-our-clients .button-our-client a {
    max-width: 300px;
    height: 50px;
}

.container-our-clients .content {
    width: 100%;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

}

.container-our-clients .content div {
    width: 100%;
    max-width: 300px;
    margin: 30px 10px;
    height: 100px;
    color: #ccc;

    background-color:#3C3C3C ;
    border-radius: 5px 5px;
    padding: 10px 10px;    


    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}


.container-our-clients .title {
    width: 100%;
    max-width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-our-clients .title h3 {
    letter-spacing: var(--letterspacing-primary);
    font-size: var(--fontsize-web-h3);
}

.container-our-clients .content i {
    font-size: 25px;
    width: 100%;
    text-align: center;
}

.container-our-clients .content p {

    font-size: 12px;
    letter-spacing: 6px;
}

.container-our-clients a {

    width: 200px;
    

}




/* CONTACT */


.container-contact {
    width: 100%;
    padding: 0px 20px;
    text-align: center;
   background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.9)),url('https://www.blogdelfotografo.com/wp-content/uploads/2017/08/surface-945444_1920.jpg');
    color: var(--text-color-primary);
}

.content-contact {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;


}

.container-contact .content {
    
    width: 100%;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.container-contact .title {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: var(--letterspacing-primary);
    font-size: var(--fontsize-web-h3);
   
}


.container-contact .info {

    width: 100%;
    max-width: 200px;
    height: 250px;
   

}

.container-contact .info ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.container-contact .info ul li {
    width: 100%;
    margin: 5px 0px;
}

.container-contact .info ul li a {
    color: #ccc;
}


.container-contact .form {

    width: 100%;
    max-width: 650px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.container-contact .form form {
  
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: space-between;
}

.container-contact .form form input {

    
    width: 200px;
    height: 50px;
    margin: 5px 5px;
    background-color: transparent;
    border-bottom: 1px solid #686767;

}

.container-contact .form form textarea {

    width: 200px;
    height: 50px;
    margin: 5px 5px;
    background-color: transparent;
        border-bottom: 1px solid #686767;

}


::placeholder {
    padding-left: 10px;
}


textarea::placeholder {
    
      padding: 10px 10px;
      
}


.contact-button {

    width: 100%;
    height: 120px;
    display: flex;
    justify-content: right;
    align-items: center;
}

.container-contact a {
    width: 100%;
    max-width: 100px;
}


/* CONTAINER FOOTER */

.container-footer {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    background-color: var(--background-primary);
    color: var(--text-color-primary);
   

    
}

.container-footer .content-footer {

    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

}


.container-footer .content-footer p {
    text-align: center;
}


/* REUTILIZABLE BUTTON */


.button {
    
    width: 100%;
    max-width: 150px;
    height: auto;
    background-color: var(--background-secondary);
    color: var(--text-color-secondary);
    padding: 10px 10px;
    border-radius: 10px 10px 10px 10px;

    display: flex;
    justify-content: space-around;
    align-items: center;
}


.text-camel {
    color: var(--background-secondary);
}

.text-white {
    color: var(--text-color-primary);
}




/* DASHBOARD*/

.container-dashboard {
    
    width: 100%;
    background-color: var(--background-primary);
    height: 100vh;
    letter-spacing: 2px;
  
}

.help-link {


    margin: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #3C3C3C;
    height: 50px;
    text-align: center;


}


.nav_dashboard ul {

    width: 100%;
    max-width: 1000px;
    margin: left;
    height: 60px;
    display: flex;
    justify-content: space-around;
    padding: 0px 20px;
    align-items: center;
    background: #3C3C3C;
    margin-bottom: 15px;
}

.nav_dashboard ul li a {
    text-transform: uppercase;
    font-weight: bold;
}

.nav_dashboard ul li a:hover {
    color: #c5986e;
    transition: 0.3s ease-in-out;
    border-bottom: 1px solid #c5986e;
}

.list_create_title {
    color: var(--text-color-primary);
}

.dashboard_title_blog{

    display: block;              /* Asegura que el width se aplique */
    white-space: nowrap;         /* Evita el salto de línea */
    overflow: hidden;            /* Oculta el desbordamiento */
    text-overflow: ellipsis;     /* Agrega los "..." */
    width: 90%;
    margin: 15px 10px;
    padding: 15px 10px;
    font-size: 12px;
    color: var(--text-color-primary);
    height: 50px;
    background-color: #3C3C3C;
    text-align: center;
}

.dashboard_title_portfolio{

    display: block;              /* Asegura que el width se aplique */
    white-space: nowrap;         /* Evita el salto de línea */
    overflow: hidden;            /* Oculta el desbordamiento */
    text-overflow: ellipsis;     /* Agrega los "..." */
    width: 90%;

    padding: 15px 10px;

    margin: 15px 10px;
    font-size: 12px;
    color: var(--text-color-primary);
    height: 50px;
    background-color: #3C3C3C;
    text-align: center;
 
}

.dashboard_title_portfolio:hover {

    background-color: #c5986e;
    transition: 0.3s ease-in-out;
}


.dashboard_title_blog:hover {
    background-color: #c5986e;
    transition: 0.3s ease-in-out;
}

#detail-stage-dinamic {
    margin: 10px 0px;
    width: 100%;
    padding: 20px 20px;
    background-color: #3C3C3C;
    width: 100%;
    max-height: 650px;
    overflow-y: scroll;
    cursor: auto;

}

#detail-stage-dinamic ul {

    width: 100%;
    flex-wrap: wrap;
    display: flex;
    justify-content: left;
    align-items: center;
}

#detail-images {

    display: flex;
    justify-content: space-around;
    width: 100%;
}

#detail-stage-dinamic ul li {
    width: 100%;
    margin: 10px 5px;
    color: var(--text-color-primary);
    font-size: 12px;
}

#detail-stage-dinamic-description {
    white-space: pre-wrap;
}



#detail-stage-dinamic ul li img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    background-repeat: none;
    border-radius: 10px 10px;
}

#detail-stage-fixed ul {


    background-color: #3C3C3C;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#detail-stage-fixed ul li a{
    cursor: pointer;
}

#detail-stage-fixed ul li a:hover {
    color: #c5986e;
    transition: 0.3s ease-in-out;
}

.master-list{
    height: 650px;
    overflow: hidden;
    overflow-y: scroll;
}


#dashboard_form_create_blog {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


#dashboard_form_create_blog label {
    width: 100%;
    height: 50px;
    color: var(--text-color-primary);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: left;
}

#dashboard_form_create_blog input {
    margin: 4px 0px;
    width: 100%;
    padding: 10px 10px;
    background-color: var(--background-primary);
}

#dashboard_form_create_blog textarea {
    width: 100%;
    min-height: 350px;
    height: auto;
    background-color: var(--background-primary);
}

#dashboard_form_create_blog button {

    border: none;
    border-style: none;
    margin: 15px 0px;
    cursor: pointer;

}



#dashboard_form_create_portfolio {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


#dashboard_form_create_portfolio label {
    width: 100%;
    height: 50px;
    color: var(--text-color-primary);
    font-size: 12px;
    display: flex;
    justify-content: left;
    align-items: center;
}

#dashboard_form_create_portfolio input {

    margin: 4px 0px;
    width: 100%;
    padding: 10px 10px;
    background-color: var(--background-primary);

}


#dashboard_form_create_portfolio textarea {
    width: 100%;
    min-height: 350px;
    height: auto;
    background-color: var(--background-primary);
}


#dashboard_form_create_portfolio button {

    border: none;
    border-style: none;
    margin: 15px 0px;
    cursor: pointer;

}



::-webkit-scrollbar {
    display: none; /* Oculta la barra de desplazamiento */
}

body {
    overflow: scroll; /* Mantiene el desplazamiento activo */
}
/* LOGIN USER*/
.container-login {
    width: 100%;

    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--background-primary);
    color: var(--text-color-primary);
}

.container-login div {
    width: 100%;
    max-width: 1000px;
    height: 400px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.container-login div p {
    width: 100%;

    text-align: center;
    font-size: 12px;
    color: #Fff;
    text-transform: uppercase;
    letter-spacing: 2px;

}



.container-login div form input {

    width: 100%;
    height: 50px;
    margin: 5px 5px;
    background-color: #3C3C3C;
    font-size: 12px;
}

.container-login div form label {

    width: 100%;
    letter-spacing: 2px;
    height: 50px;
    margin: 5px 5px;
       font-size: 12px;
}

.container-login div form button {
    


    width: 100%;
    height: 50px;
    max-width: 200px;
    background-color: #c5986e;
    color: var(--text-color-primary);
    border: none;
    border-radius: 10px 10px;
    border-style: none;
    margin-top: 15px;
    letter-spacing: 2px;
       font-size: 12px;
}



#message {
    color: #c5986e;
}




.container-blog-public {

    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
    
    background-color: var(--background-primary);
 
}



.container-blog-public h3 {


    width: 100%;
    max-width: 1200px;
    min-height: 100px;
    height: auto;
    color: #fff;
    font-size: var(--fontsize-web-h3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 10px 10px;
    background-color: #c5986e;
}



.container-blog-public ul {
    
    margin: 15px 15px;
    width: 100%;
    max-width: 1200px;
    height: auto;

    background-color: #3C3C3C;
    padding: 15px 15px;
    border-radius: 10px 10px;
 
}

.container-blog-public ul #title {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 400;
    text-transform: uppercase;
}



.container-blog-public ul li {
    overflow-wrap: break-word;
    word-wrap: break-word;
    width: 100%;

    font-size: 14px;
    margin: 15px 0px;

}


.container-blog-public ul li img {
  
    width: 100%;
    max-width: 600px;
    border-radius: 10px 10px;
    object-fit: contain;



}

.container-blog-public ul li span {
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

.container-blog-public ul #fuente-images {


    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-style: italic;
    justify-content: center;
    margin-top: 50px;

}



.container-blog-public ul #image_author {

    width: 100px;
    height: 100px;

    
}


.container-blog-public ul #image_author img{

    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
 
}

#base_form_contact_mail button {
    width: 200px;
    height: 50px;
    margin: 5px 5px;
    cursor: pointer;
    background-color: var(--background-secondary);
    color: var(--text-color-primary);
    border: none;
    border-radius: 5px 5px;
    letter-spacing: 3px;

}
#base_form_contact_mail button:hover {
    background-color: #fff;
    color: #2B2B2B;
    transition: 0.3s ease-in-out;
}



#loader {
    display: none;
    animation: spin 1s linear infinite;
}


#image_author img {
    
    border-radius: 20px 20px;
 
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



@media (min-width: 320px) and (max-width: 970px) {

    .container-father {
        height: auto;
    }

    .container-right {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        height: 100%;
        
    }

    .nav{
       
        height: auto;
        max-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .project {
        
        height: 400px;
    }

    .links nav ul li a {

        font-size: 9px;
        
    }

    a {
        font-size: 11px;
    }

    p {
        font-size: 10px;
    }
    
    .day h3 {
        font-size: 14px;
    }

     .telephone{

        max-width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;

 
     }  

     .telephone a {
               font-size: 14px;
     }


     .links {
        width: 100%;
        padding: 5px 5px;
        height: 100%;
     }



     .project .info {

        width: 250px;
        height: 250px;
     }

     .arch div h3 {
        font-size: 13px;
     }

     .buttons a {
        font-size: 7px;
     }

     .project .info h2 {
        font-size: 10px;
        text-align: left;
     }

     .project .info p {
          white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
     }

     .project .info p {
        font-size: 11px;
     }

     .project .info a {
        margin: 0px 10px;

     }

     .content-project {
        justify-content: space-between;
     }


     .content-our-clients .content {
        justify-content: space-between;
     }


     

     .container-contact .content-contact {
        justify-content: space-around;
        flex-wrap: wrap;
        
     }

     .container-contact .content-contact .content {

        justify-content: space-around;
     }

     .container-contact .content-contact .form {
        max-width: 100%;
        padding: 0px 10px;
       
     }

     .container-contact .content-contact .form form {

        display: flex;
        justify-content: space-around;
     }

    .container-year-experiences div {
    
    padding: 0px 10px;

    }


    .content-our-clients .content {
            
        padding: 0px 10px;
    }


    .content-about {
        justify-content: center;
    }
    
    .content-about .two {
        text-align: center;

    }

    .content-about .two h3 {
        font-size: 18px;
    }

    .content-about .tree {
        height: 300px;
    }

    .content-about .two ul li {
        font-size: 10px;
        text-align: left;
    }

    .about-title {
        max-width: 300px;
        text-align: center;
    }
    .about-title h3 {
        font-size: 18px;
    }

    .content-project {
        justify-content: center;
    }

    .content-project a img {
        width: 100%;
        height: 100%;
    }

    
    .content-our-clients .content{
        justify-content: center;
    }



    .content-our-clients .content div p {
        font-size: 12px;
    }


    .content-our-clients .title h3 {
        font-size: 18px;
    }




     .project-title {
        max-width: 300px;
        padding: 0px;
        margin: 0;
     }

     .project-title p {
        font-size: 10px;
     }

     .content-project a {
        max-width: 300px;
        height: 250px;
     }

     .container-year-experiences {
        margin-bottom: 30px;
     }

     .container-year-experiences div {
        max-width: 300px;
     }

     .container-year-experiences div h3 {
        font-size: 18px;
     }

     
     .container-year-experiences div h3 .number{
        font-size: 80px;
     }

     .container-contact {
        display: block;
        height: auto;
        padding-bottom: 30px;
     }

     .content-contact {
        max-width: 300px;
     }


     .content-contact .info {
        max-width: 100%;
        height: 300px;
        display: block;
     }


          #base_form_contact_mail {
            height: 300px;
            width: 100%;

          }


     #base_form_contact_mail input {
        width: 100%;
     }

          #base_form_contact_mail textarea {
        width: 100%;
     }

          #base_form_contact_mail button {
        width: 100%;
        margin-top: 30px;
     }

     .content-contact .title h3 {
        font-size: 18px;
     }

     .content-contact .content .info {
        margin-bottom: 30px;
     }

     .container-footer {
        padding: 20px 0px;
     }

     .container-footer div h3 {
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
     }

    .container-footer div p {
        width: 100%;
        text-align: center;
          margin-bottom: 5px;
     }

     .left-one {
        display: flex;
        align-items: center;
     }




     footer {
              padding: 10px 10px;
     }
 }