/*
 Theme Name:   The Bakers SeoFactory
 Theme URI:    http://exemplu.ro/
 Description:  Child theme pentru Twenty Twenty-Five
 Author:       SeoFactory
 Template:     twentytwentyfive
 Version:      1.0.0
 Text Domain   seofactory
*/

/******************************
  GENERAL
*******************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --color-white: #FFFFFF;
  --color-black: #262626;
  --color-grey-20: #333;
  --color-dark-green: #535C4E;
  --color-dark-grey-33: #535C4E;
  --color-grey-87: #DDD;
  --color-orange-58: #CA9C5E;
  --color-orange-89: #F1E6D4;
  --color-azure: #00416A;
  --font-family: 'Poppins', sans-serif;
  --font-12: 12px;
  --font-14: 14px;
  --font-15: 15px;
  --font-16: 16px;
  --font-18: 18px;
  --font-24: 24px;
  --font-28: 28px;
  --font-30: 30px;
  --font-36: 36px;
  --font-48: 48px;
  --font-49: 49px;
  --font-54: 54px;
  --font-60: 60px;
  --font-80: 80px;
  --line-height-12: 12px;
  --line-height-14: 14px;
  --line-height-16: 16px;
  --line-height-18: 18px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-29: 29px;
  --line-height-30: 30px;
  --line-height-32: 32px;
  --line-height-35: 35px;
  --line-height-40: 40px;
  --line-height-48: 48px;
  --line-height-49: 53px;

  --line-height-54: 54px;
  --line-height-60: 60px;
  --line-height-72: 72px;
  --line-height-80: 80px;
  --line-height-95: 95px;
  --weight-100: 100;
  --weight-200: 200;
  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
}

@media (max-width: 1200px) {
  :root {
    --font-24: 22px;
    --font-30: 28px;
    --font-36: 33px
    --font-40: 30px;
    --font-48: 36px;
    --font-49: 36px;
    --font-50: 40px;
    --font-54: 42px;
    --font-60: 45px;
    --font-80: 60px;
    --line-height-29: 24px;
    --line-height-35: 32px;
    --line-height-40: 33px;
    --line-height-48: 36px;
    --line-height-49: 39px;
    --line-height-54: 42px;
    --line-height-60: 48px;
    --line-height-72: 52px;
    --line-height-80: 60px;
    --line-height-95: 65px;
  }
}

@media (max-width: 992px) {
  :root {
    --font-14: 12px;
    --font-16: 16px;
    --font-18: 18px;
    --font-20: 18px;
    --font-24: 22px;
    --font-28: 24px;
    --font-30: 25px;
    --font-32: 28px;
    --font-36: 26px;
    --font-40: 24px;
    --font-48: 28px;
    --font-49: 34px;
    --font-50: 30px;
    --font-54: 32px;
    --font-60: 35px;
    --font-80: 40px;
    --line-height-12: 12px;
    --line-height-14: 12px;
    --line-height-16: 14px;
    --line-height-18: 16px;
    --line-height-20: 20px;
    --line-height-24: 22px;
    --line-height-29: 24px;
    --line-height-32: 27px;
    --line-height-35: 29px;
    --line-height-40: 29px;
    --line-height-48: 28px;
    --line-height-49: 36px;
    --line-height-54: 32px;
    --line-height-60: 27px;
    --line-height-72: 30px;
    --line-height-80: 40px
    --line-height-95: 35px;
  }
}

*,
*::before,
*::after {
   box-sizing: border-box; 
}

.sf-row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

html {
    scroll-behavior: smooth;
}

#contact, #sortimente {
    scroll-margin-top: 95px;
}


body {
  font-family: var(--font-family, 'Poppins', sans-serif);
  padding-top: 95px;
}

p, h1, h2, h3, ul, ol {
  margin: 0;
}

ol, ul {
  padding: 0 20px;
}

  /*** ALIGN ***/ 
.sf-text-align-center{
  text-align: center;
}
.sf-text-align-left{
  text-align: left;
}
.sf-text-align-right{
  text-align: right;
}

  /*** BACKGROUND COLOR ***/  
.sf-background-color-black{
  background-color: var(--color-black);
}
.sf-background-color-dark-green {
  background-color: var(--color-dark-green);
}
.sf-background-color-grey-33 {
    background-color: var(--color-dark-grey-33);
}
.sf-background-color-orange-89 {
    background-color: var(--color-orange-89);
}

  /*** COLOR ***/
.sf-color-white{
  color: var(--color-white);
}
.sf-color-black{
  color: var(--color-black);
}
.sf-color-grey-20{
  color: var(--color-grey-20);
}
.sf-color-dark-green {
  color: var(--color-dark-green);
}
.sf-color-dark-grey-33 {
    color: var(--color-dark-grey-33);
}
.sf-color-orange-58 {
    color: var(--color-orange-58);
}
.sf-color-orange-89 {
    color: var(--color-orange-89);
}
.sf-color-grey-87 {
    color: var(--color-grey-87);
}
.sf-color-azure {
    color: var(--color-azure);
}

/*** BORDER ***/

.sf-border-style-solid{
  border-style: solid;
}
.sf-border-radius-4{
  border-radius: 4px;
}
.sf-border-none{
    border: none;
}


/*** DISPLAY ***/
.sf-display-block {
    display:block;
}  
.sf-display-inline-block{
  display: inline-block;
}
.sf-display-none{
    display: none;
}

.sf-display-flex{
  display: flex;
}

.sf-flex-wrap {
    flex-wrap: wrap;
}

.sf-flex-direction-column {
  flex-direction: column;
}

.sf-flex-reverse {
  flex-direction: row-reverse;
}

.sf-align-items-center{
  align-items: center;
}

.sf-align-items-end{
    align-items: flex-end;
}

.sf-align-items-start{
  align-items: flex-start;
}

.sf-justify-content-center{
    justify-content: center;
}
.sf-justify-content-space-between{
    justify-content: space-between;
}
.sf-justify-content-space-around{
    justify-content: space-around;
}
.sf-justify-content-space-evenly{
    justify-content: space-evenly;
}
.sf-justify-content-flex-end{
    justify-content: flex-end;
}

.sf-gap-20{
    gap:20px;
}

.sf-gap-30 {
    gap: 30px;
}

.sf-gap-50 {
    gap: 50px;
}

.sf-gap-60{
    gap: 60px;
}
.sf-gap-80 {
    gap: 80px;
}
.sf-gap-100{
    gap: 100px;
}

  /*** HEIGHT ***/

.sf-height-100p{
    height: 100%;
}

.sf-height-auto{
    height: auto;
}

  /** MARGIN **/
.sf-margin-left-auto{
  margin-left: auto;
}
.sf-margin-right-auto{
  margin-right: auto;
}

.sf-margin-0{
  margin: 0;
}
.sf-margin-top-0{
  margin-top: 0;
}
.sf-margin-right-0{
  margin-right: 0;
}
.sf-margin-bottom-0{
  margin-bottom: 0;
}
.sf-margin-left-0{
  margin-left: 0;
}
.sf-margin-bottom-7{
    margin-bottom: 7px;
}
.sf-margin-bottom-10{
    margin-bottom: 10px;
}
.sf-margin-top-10{
    margin-top: 10px;
}
.sf-margin-top-15 {
    margin-top: 15px;
}
.sf-margin-bottom-15 {
    margin-bottom: 15px;
}
.sf-margin-top-20 {
  margin-top: 20px;
}
.sf-margin-bottom-20 {
    margin-bottom: 20px;
}
.sf-margin-bottom-24 {
    margin-bottom: 24px;
}
.sf-margin-top-30{
  margin-top: 30px;
}
.sf-margin-bottom-30{
    margin-bottom: 30px;
}
.sf-margin-bottom-50 {
    margin-bottom: 50px;
}
.sf-margin-top-50{
 margin-top:50px;
}
.sf-margin-top-60{
    margin-top: 60px;
}
.sf-margin-top-65{
    margin-top: 65px;
}
.sf-margin-bottom-60{
    margin-bottom: 60px;
}
.sf-margin-top-80 {
    margin-top: 80px;
}

.sf-margin-bottom-145{
    margin-bottom: 145px;
}

@media(max-width: 992px){
    .sf-margin-bottom-145 {
      margin-bottom: 30px;
    }
    
    .sf-margin-bottom-60 {
        margin-bottom: 30px;
    }
    
    .sf-margin-top-60 {
        margin-top: 30px;
    }

}
.sf-margin-top-145{
    margin-top: 145px;
}

.sf-margin-bottom-40{
    margin-bottom: 40px;
}

/***********************
PADDING
*************************/
.sf-padding-left-0{
    padding-left: 0;
}
.sf-padding-top-0 {
    padding-top: 0;
}
.sf-padding-left-30{
    padding-left: 30px;
}
.sf-padding-left-40{
    padding-left: 40px;
}

.sf-padding-right-0{
    padding-right: 0;
}
.sf-padding-right-30 {
    padding-right: 30px;
}
.sf-padding-right-40 {
    padding-right: 40px;
}

.sf-padding-top-45 {
    padding-top: 45px;
}

.sf-padding-bottom-45 {
    padding-bottom: 45px;
}

.sf-padding-20{
    padding: 20px;
}

.sf-padding-30 {
    padding: 30px;
}

.sf-padding-15{
    padding: 15px;
}
.sf-padding-60{
    padding: 60px;
}
@media(max-width: 992px){
    .sf-padding-60 {
        padding: 30px;
    }
}

.sf-padding-top-7 {
    padding-top: 7px;
}
.sf-padding-top-10{
    padding-top: 10px;
}

.sf-padding-top-15 {
    padding-top: 15px;
}
.sf-padding-top-16{
    padding-top: 16px;
}
.sf-padding-top-20{
    padding-top: 20px;
}
.sf-padding-top-90{
    padding-top: 90px
}
.sf-padding-bottom-90{
    padding-bottom: 90px;
}

/****************
BORDER
****************/

.sf-border-none {
    border: none;
}
.sf-border-left {
    border-right: 1px solid black;
}

  /*** TEXT ***/
.sf-font-size-12{
  font-size: var(--font-12);
}
.sf-font-size-14{
  font-size: var(--font-14);
}
.sf-font-size-15{
  font-size: var(--font-15);    
}
.sf-font-size-16{
  font-size: var(--font-16);
}
.sf-font-size-18{
  font-size: var(--font-18);
}
.sf-font-size-20{
  font-size: var(--font-20);
}
.sf-font-size-22{
  font-size: var(--font-22);
}
.sf-font-size-24{
  font-size: var(--font-24);
}
.sf-font-size-28{
  font-size: var(--font-28);
}
.sf-font-size-30{
  font-size: var(--font-30);
}
.sf-font-size-32{
  font-size: var(--font-32);
}
.sf-font-size-36{
  font-size: var(--font-36);
}
.sf-font-size-40{
  font-size: var(--font-40);
}
.sf-font-size-48{
  font-size: var(--font-48);
}
.sf-font-size-49{
  font-size: var(--font-49);
}
.sf-font-size-50{
  font-size: var(--font-50);
}
.sf-font-size-54{
  font-size: var(--font-54);
}
.sf-font-size-60{
  font-size: var(--font-60);
}
.sf-font-size-80{
  font-size: var(--font-80);
}


/*LINE HEIGHT*/
.sf-line-height-14{
  line-height: var(--line-height-14);
}
.sf-line-height-16{
  line-height: var(--line-height-16);
}
.sf-line-height-18{
  line-height: var(--line-height-18);
}
.sf-line-height-20{
  line-height: var(--line-height-20);
}
.sf-line-height-24{
  line-height: var(--line-height-24);
}
.sf-line-height-29{
  line-height: var(--line-height-29);
}
.sf-line-height-30{
  line-height: var(--line-height-30);
}
.sf-line-height-32{
  line-height: var(--line-height-32);
}
.sf-line-height-35{
  line-height: var(--line-height-35);
}
.sf-line-height-40{
  line-height: var(--line-height-40);
}
.sf-line-height-48{
  line-height: var(--line-height-48);
}
.sf-line-height-49 {
  line-height: var(--line-height-49);
}
.sf-line-height-54{
  line-height: var(--line-height-54);
}
.sf-line-height-72{
  line-height: var(--line-height-72);
}
.sf-line-height-95{
  line-height: var(--line-height-95)
}

a.sf-outline-none,
a.sf-outline-none:active,
a.sf-outline-none:focus,
a.sf-outline-none:focus-visible,
a.sf-outline-none:focus-within,
a.sf-outline-none:hover,
a.sf-outline-none:target{
  outline: none;
}

.sf-text-decoration-none{
  text-decoration: none;
}
.sf-font-style-normal{
  font-style: normal;
}

.sf-cursor-pointer {
    cursor: pointer;
}


  /*** WEIGHT ***/
.sf-font-weight-100{
  font-weight: 100;
}
.sf-font-weight-200{
  font-weight: 200;
}
.sf-font-weight-300{
  font-weight: 300;
}
.sf-font-weight-400{
  font-weight: 400;
}
.sf-font-weight-500{
  font-weight: 500;
}
.sf-font-weight-600{
  font-weight: 600;
}
.sf-font-weight-700{
  font-weight: 700;
}
.sf-font-weight-800{
  font-weight: 800;
}
.sf-font-weight-900{
  font-weight: 900;
}

  /*** WIDTH ***/

.sf-width-60 {
  width: 60px;
}  
  
.sf-width-85 {
    width:85px;
}  

.sf-width-50p {
    width: 50%;
}
  
.sf-width-100p{
  width: 100%;
}

.sf-max-width-330 {
    max-width: 330px;
}

.sf-max-width-1920 {
    max-width: 1920px;
}

.sf-max-width-100p{
  max-width: 100%;
}
.sf-max-width-50{
  max-width: 50%;
}

/*** POSITION ***/
.sf-position-absolute{
  position: absolute;
}
.sf-position-relative{
  position: relative;
}


/***************
MENIU
***************/
   .nav-full-width {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1000;
    }
  
   .navbar {
      width: 100%;
      gap: 10px;
      padding: 30px 75px;
    }
 
   .nav-links {
      list-style-type: none;
      display: flex;
      gap: 30px;
      align-items: center;
      padding-left: 0;
      margin:0;
    }
  
  .nav-links li a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    line-height: 28px;
    font-size: 16px;
  }
  
  .hamburger-button {
    display: none;
    cursor: pointer;
    height: 24px;
  }
  
  .icons, .icons-mobile{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .icons-mobile {
      padding: 30px 30px 0 30px;
  }
  
  .icons a, .icons-mobile a {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
  
  .icons button, .icons-mobile button {
    background-color: #535C4E;
    color: white;
    border: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 16px;
    cursor: pointer;
  }
  
  .icons span, .icons-mobile span {
    background-color: #CA9C5E;
    width: 2px;
    height: 35px;
  }
  
  .mobile-menu {
    display: none;
    position: fixed;
    z-index: 10;
    top:95px;
    left: 0;
    width: 100%;
    background-color: #535C4E;
    color: white;
  }

  .mobile-menu ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
    padding:30px;
  }
  
  .mobile-menu li a {
    text-decoration: none;
    font-weight: 100;
  }
  
  .mobile-menu li a:hover, .icons a:hover, .nav-links li a:hover{
    color: #CA9C5E;
  }
 
 @media(min-width: 992px) and (max-width: 1199px){
     .nav-links {
         gap: 20px;
     }
     
     .navbar {
         padding: 30px;
     }

 }
  
  /*mobil*/
  
  @media(max-width: 992px) {
    .nav-full-width {
      border-bottom: 1px solid #CA9C5E;
    }    
        
    .navbar {
      padding: 30px;
    }
    
    .mobile-menu.visible {
      display: block
    } 
  
    .nav-links {
      display: none;
    }
    
    .icons {
        display: none;
    }
    
    .hamburger-button {
      display: block;
    }
  }



/**********************
HERO SECTION
*********************/

  .hero-section {
    background-image: url(assets/images/HERO-min.webp);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 1050px;
  }
  
    
    @media(max-width: 992px){
      .hero-section {
          height: 950px;
      }    
        
      .hero-section h1 {
          padding: 0 20px !important;
      }
  }
  
  .down-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
  }

  
/*******************
SF LISTARE CATEGORIE
*******************/

  .sf-pagina-categorie {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 580px;
  }
  
  .header-overlay {
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 0 60px;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }

  
  @media(max-width: 992px) {
    .header-overlay {
      padding: 30px;
    }
    
    .header-overlay h1 {
        text-align: center;
    }
  }
  
  .sf-pagina-categorie h1, .sf-pagina-categorie h2 {
    color: #F7F4EE;
    text-shadow: 2px 2px 3px #605545;
  }
  
  .produse-din-categorie {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .sf-card-produs {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .sf-card-produs a.titlu-produs {
      max-width: 254px;
      text-align: center;
  }

/*******************
SF DETALII PRODUS
*******************/
  .sf-header-pagina-produs {
    background-image: url(https://v1.the-bakers.ro/wp-content/uploads/2025/08/ImageBackground-min.jpg);
    background-size: cover;
    background-position: center;
    height: 350px;
  }
  
    .sf-prezentare-produs {
        margin-bottom: 30px;
    }

  .sf-content-pagina-produs {
    max-width: 1200px;
    margin: 0 auto;
  }

  .sf-content-pagina-produs-separator {
    width: 100%;
    height: 6px;
    background-color: #535C4E;
  }
  
  .sf-detalii-produs {
      padding: 0 0 0 30px;
  }
  
    .sf-buton-produs a{
      padding: 13px 90px;
    }
    
    .sf-descriere-generala-produse {
        padding: 30px 0;
    }
  
  .sf-table-header {
    width: 180px;
    text-align: center;
    padding: 5px;
  }
  
  .table-label {
    color: #535C4E;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 20px;
  }
  
  .table-value {
    width: 180px;
    background-color: #FEFDFB;
    border-bottom: 1px solid #DDD;
    padding: 5px 15px 5px 5px;
    color: #111;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
  }
  
  @media(min-width: 992px) and (max-width: 1265px) {
      .sf-imagine-produs {
          padding-left: 30px;
      }
  }
  
  @media(max-width: 1265px){
      .sf-detalii-produs {
          padding: 30px;
      }
      
      .sf-descriere-generala-produse {
          padding: 30px;
      }
  }
  
  @media(max-width: 992px){
    .sf-valori-si-alergeni {
      flex-direction: column;
      gap: 20px
    }
    
    .sf-buton-produs a{
      padding: 13px 38px;
      line-height: 20px;
    }
    
    .sf-descriere-generala-produse {
          padding:0 30px;
    }
    .sf-prezentare-produs {
        margin-bottom: 0;
    }
    
  }


/*******************
SF BLOC IMAGINE TEXT 
*******************/

  .sf-bloc-imagine-text img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }

/*******************
SECTIUNE CONTACT
*******************/
  .sf-contact .sf-col {
    padding: 0 !important;
  }
  
  .sf-contact iframe {
    width: 100%;
    min-height: 100%;
  }
  
  

/****************
FOOTER
*******************/

.sf-min-width-160 {
    min-width: 160px;
}

.footer-divider {
  display: flex;
  justify-content: space-evenly;
  
}

.footer-divider span {
  width: 40%;
  height: 3px;
  background-color: #535C4E;
}

@media(max-width: 992px){
  .footer-container {
    flex-wrap: wrap;
    padding: 30px;
  }
  
  .footer-logo {
    order: -1;
    width: 100%;
  }
  
  .footer-container {
      gap: 30px;
  }
  
  .footer-livrari, .footer-social {
      width: 400px;
      max-width: 100%;
  }
  
  .bottom-footer {
      padding: 30px;
  }
}


/****************
  Buttons
*****************/
 .sf-button-bakers {
  display: flex;
  align-items: center;
 }

.sf-button-bakers a {
  padding: 13px 38px;
  border-radius: 150px;
  border: 3px solid #CA9C5E;
  background-color: transparent;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.50);
  text-decoration: none;
  font-size: 16px;
  line-height: 17px;
}

.sf-button-bakers a:hover {
  border: 3px solid #fff;
}

.sf-button-bakers.sf-button-bakers-white a {
  border: 3px solid #FFF;
  color: white;
}

.sf-button-bakers.sf-button-bakers-white a:hover {
  border: 3px solid #CA9C5E;
}

    #scrollToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    z-index: 1000;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    cursor: pointer;
  }

  #scrollToTop:hover {
    opacity: 1;
  }
  
  .button-scroll {
    border: 3px solid #CA9C5E;
    border-radius: 28px;
    background-color: #F1E6D4;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.50);
    padding: 7px 13px;
    cursor: pointer;
    color: #535C4E;
  }

/****************************
 Custom Divider
 ***************************/
 
 .custom-divider {
    height: 3px;
    background-color: #CA9C5E;
  }

/************************
 LISTARE CATEGORII PRODUSE
 ***********************/
 
 @media(max-width: 1320px) {
     .sf-listare-categorie h3{
         margin-top: 20px;
         margin-bottom: 15px;
     }
 }


/*************************
SECTIUNE DUAL HOMEPAGE
*************************/

  .chef-container {
    padding-bottom: 60px;
    background: linear-gradient(to bottom, white 28%, black 28%);
  }
  
  .chef-image {
    background-image: url(assets/images/sectiune.png);
    min-height: 930px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 30px;
  }
  
  .chef-image-divider {
    background-color: #CA9C5E;
    width: 60px;
    height: 4px;
  }
  
  .chef-content {
    padding: 60px 30px 0 15px;
  }
  
  .sf-small-cards {
    gap: 15px;
    justify-content: space-between;
  }
  
  .sf-small-card {
    padding: 15px;
    max-width: 220px;
  }
  
  .sf-cum-functioneaza {
    padding: 15px 0;
  }
  
  .sf-cum-functioneaza .pasi {
    width: 25%;
    padding: 0 30px;
  }
  
  .sf-lrivrari {
    width: 40%;
  }
  
  @media(max-width: 1200px) {
    .chef-container {
      padding-bottom: 0;
    }
    
    .chef-image {
      margin-left: 0;
      min-height: 700px;
    }
    
    .chef-content {
      padding: 30px;
      background: linear-gradient(to bottom, white 24%, black 24%);
    }
    
    .sf-small-cards {
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 30px;
    }
    
    .sf-livrari {
      padding-left: 0;
    }
  }
  
  @media(max-width: 576px) {
    .sf-cum-functioneaza {
      flex-direction: column;
      padding: 0;
    }
    
    .sf-cum-functioneaza .pasi {
      width: 100%;
      border-right: 0;
      border-bottom: 1px solid black;
      padding: 15px 30px;
    }
    
    .sf-program {
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }
    
    .sf-program p {
      margin-bottom: 10px;
    }
  }


/* PAGINA EROARE 404 */

  .error-404-container {
    background-color: #66705f;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  
  .error-404-container a {
    padding: 13px 38px;
    border-radius: 150px;
    border: 3px solid #CA9C5E;
    background-color: transparent;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.50);
    text-decoration: none;
    font-size: 16px;
    line-height: 17px;
  }
  
  .error-404-container a:hover {
    border: 3px solid #FFF;
    color: white;
  }