Body, html {
  background-color:rgb(35, 1, 1) !important; 
  padding:0px !important;
  margin:0px !important;
  overflow-x: hidden;
 } 
 @media (max-width: 1078px) {
  .nav-link {
    letter-spacing: 1px !important;
    width: 8em !important;
  }

}

 @media screen and (max-width: 999px) {
  
  .nav-link {
    font-size:1em !important;
    letter-spacing: 1px !important;
    width: 7.5em !important;

  }
} 
/* Responsive styles */
@media screen and (max-width: 1005px) {
  
  .top-line {
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
  }

  .logo-container {
    margin: 0;
    margin-bottom: 1em;
    margin-left: 4.25em;

  }

  .contact-info1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1em;
  }

  .contact-link-container {
    margin-bottom: 0.5em; 
  }

    .navbar-nav {
    margin-top: 15px;
    padding-right: 32em;
    gap:1em;
  }
  
  .navbar {
    flex-direction: column;
    padding: 1em;
  }
  
  .navbar-nav {
    margin-top: 0; 
    gap:0em;
  }

  .nav-link {
    width: 6em;
    margin: 0 7px; 
  }
  
}

/* Responsive styles for smaller screens */
@media screen and (max-width: 600px) {
  .top-line {
    font-size: 0.75em ;
    font-weight: bold;
    gap:0em;
  }
  
  .contact-info1 {
    margin-top: 0.5em;
    font-size: 0.75em ;
  }
  
  .logo-container {
    margin: 0;
    margin-bottom: 1em;
    margin-left: 4.15em;
    justify-content: center;

  }
  
  .navbar-toggler {
    margin-right: 0; 
  }
  .contact-link{
    margin-right: 0.25em;
    
    }
    .nav-link {
      width: 6em;
      margin: 0 7px; 
  }
  
  .habout {
    color: #fff;
    font-family: 'Cairo', 'Arial, sans-serif';
    text-shadow: 3px 2px 2px #f2a8a8;
    font-size: 2em;
    font-weight:bolder;
    text-align: center;
    animation: slideIn 2s ease-in;
  }
}
@media  screen and (max-width: 400px){
  .top-line {
    font-size: 0.55em ;
    font-weight: bold;
    gap:0em;
  }

  .logo-container {
    margin: 0;
    margin-bottom: 1em;
    margin-left: 4em;
    width: auto;
  }

  .contact-info1 {
    margin: 0;
    margin-top: 1em;
    font-size: 0.5em ;

  }

  .navbar-toggler {
    margin-right: 0; /* Remove margin for toggler on smaller screens */
  }
  .contact-link{
    margin-right: 0.25em;
    
    }
    .nav-link {
      width: 6em;
      margin: 0 7px; /* Add spacing around text in NavBar */
  }
  
  
}

/* NavBar */
 
/* Logo and Contact Information */

.top-line {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  font-family: 'Cairo', 'Montserrat', 'Merriweather', 'Open Sans', 'Lato';
  justify-content:space-between; 
  background-color: rgb(94, 32, 32);
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #f6f0f0;
  width: 100%;
  padding-right: 3em;
  padding-top: 0rem;
  margin: 0px !important;
  animation: fade-in 2s ease-in forwards; 
}

.logo-container {
  display: flex;
  justify-content: center;
padding-right: 5em; 
color:#c9c9c9; 
}

.Logopic {
  display: flex;
  padding-right: 2em;
}

.contact-info1 {
  display: flex;
  justify-content: end;
  align-items: center;
  padding-right: 2em;
  gap:2em;
}
.contact-link-container {
  display: flex;
  align-items: center;
  position: relative;
}


.contact-link {
  display: grid;
  position: relative;
  font-family: 'Cairo', 'Montserrat', 'Merriweather', 'Open Sans', 'Lato';
  font-size: 1.1em;
  color:hwb(60 98% 1%);
  text-decoration: none;
  margin-right: 15px;
  overflow: hidden;
}

/* Animated Line for First Line */
.contact-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background-color: #e65a5a;
  text-decoration: none;
  /* transform: scaleX(0); */
  transform-origin: bottom right;
  transition: width 0.3s ease;
}

.contact-link:hover {
  text-decoration: none; 
  color:#faf1b2;
}

.contact-link:hover::before {
  width: 100%;
}

/* Main Navigation Bar */
.navbar-container {
  /* display: grid; */
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  justify-content: space-between;
  align-items: center;
  padding-top: 0px;
}
.active-link {
  background-color: #9c202c; 
  color: #fff;
}

/* Ensure the text color for inactive links is white */

.navbar {
  font-family: 'Cairo', 'Montserrat', 'Merriweather', 'Open Sans', 'Lato', Helvetica;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  align-content: right;
  margin-bottom: 0;
}

.navbar-brand {
  padding: 10px; 
  margin-right: 0; 
}
.navbar-nav {
  margin-top: 12px;
  padding-right: 3em;
  gap:3em;
}


.nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cairo', 'Montserrat', 'Merriweather', 'Open Sans', 'Lato', Helvetica;
  font-size: 1.15em;
  font-weight: bold;
  text-align: center;
  letter-spacing: 4px;
  width: 9.18em;
  height: 2.5em;
  border: none;
  /* color: #fcfcfc; */
  padding: 58px; 
  color:#d8dddd!important;
  border-radius: 15px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background-color: #9c2222;
  transition: width 0.3s ease;
  /* content: '\260E';  */
  margin-right: 5px;
}

.nav-link:hover {
  color: #fefed6 !important;
}

.nav-link:hover::before {
  width: 100%;
}

.nav-link span {
  margin-left: 5px;
}

.nav-link:active {
  color: #10110f;
  background: rgb(95, 60, 60);
}


/* Footer */
.container-footer {
  background-color: rgb(94, 32, 32);
  color: white;
  text-align: center;
  padding: 1.75em;
  gap:2em;
}

.footer-row {
  margin: 0;
}

/* Contact Us section */
.contact-footer-colum {
  padding: 1.75em;
  text-align: center;
 }

.contact-us2{
  font-size: 2em;
  letter-spacing: 3px;
}
.info-box-footer {
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.company-info-footer {
  text-align: left;
  padding-bottom: 0.5em; 
}

.contact-information,
.about-information {
  padding-left: 1.75em;
}

.company-info {
  margin-bottom: 0.25em;
  text-align: left;
  font-size: 1.1em;
}

.footer-icons {
  display: flex;
  justify-content: start;
  margin-right: 0.5em; 
}

/* footer-About section- */
.about-box-footer {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 50%;
}

.about {
  letter-spacing: 5px;
  text-align: left;
  font-size: 2em;
  letter-spacing: 3px;
}

.company-info-footer {
  text-align: center;
  padding-bottom: 1em;
  font-size: 1em;
}

/* Media query for responsiveness */
@media (max-width: 767px) {
  .contact-footer-colum {
    padding: 0.25em; 
  }

  .about-box-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    padding: 0.25em; 
  }
}


/* Media query for responsiveness */
@media (max-width: 400px) {
  .col-md-6.text-justify {
    padding: 0.5em; 
  }

  .about-box-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    padding: 0.25em; 
  }
}


/*home */
/* Responsive Styles */
@media screen and (max-width: 1124px) {
  .phome {
    font-size: 3rem;
    margin-top: 5rem; 
    padding: 13rem 1rem 0.5rem 1rem !important;
    letter-spacing: 1px;

  }
  .section2-home {
    margin-top: 2rem;
    width: 100%;
  }

  .pics-3-home-section2 {
    margin-bottom: 2rem;
  }
  .carpark, .toil, .kitchen {
    justify-content: center;
    width: 80%;
  }

  .h2home-section2 {
    font-size: 2.5em !important;
    margin-top: 2.75rem;
    width: 100%;
  }
  .image-container-home {
    order: 3; 
    width: 100%; 
  }

  .homepic {
    width: 100% !important;
    margin: 1em auto; 
    padding-left: 1rem;
  }

  .scroll-text {
    font-size: 1.2rem;
    margin-top: 1em;
  }
}


@media screen and (max-width: 768px) {
  .phome {
    font-size: 2.1rem;
    margin-top: 5rem; 
    padding: 12rem 1rem 0.5rem 1rem !important;
    letter-spacing: 1px;

  }
  .section2-home {
    margin-top: 1.5rem;
    width: 100%;
  }

  .pics-3-home-section2 {
    margin-bottom: 2rem;
  }
  .carpark, .toil, .kitchen {
    justify-content: center;
    width: 75%;
  }

  .h2home-section2 {
    font-size: 1.55em;
    margin-top: 2.6rem;
    width: 100%;
  }
  .image-container-home {
    order: 3; 
    width: 100%; 
  }

  .homepic {
    width: 100% !important;
    margin: 1em auto; 
  }

  .scroll-text {
    font-size: 1.1rem;
    margin-top: 1em;
  }
}

@media screen and (max-width: 420px) {
  .phome {
    font-size: 1.9rem !important;
    margin-top: 4rem; 
    padding: 10rem 1rem 0.5rem 1rem !important;
  letter-spacing: 1px;
  }


  .h2home-section2 {
    font-size: 1.5rem !important;
    text-align: center;
    margin: 2.5rem 1.5rem 1rem 1.5rem;
    width: 100%;
  }

  .homepic {
    width: 100% !important;
    margin: 1em auto; 
  }

  .section2-home {
    margin-top: 1.5rem;
    width: 100%;

  }

  .pics-3-home-section2 {
    margin-bottom: 2rem;
    padding-left: 0rem;
  }
  .carpark, .toil, .kitchen {
    justify-content: center;
    width: 67%;
  }
  .scroll-text {
    font-size: 0.75rem;
    margin-top: 1rem; 
  }
}

@media screen and (max-width: 280px) {
  .phome {
    font-size: 1.5rem;
    margin-top: 4rem; 
    padding: 6rem 0.5rem 0.5rem 0.5rem !important;
    letter-spacing: 1px;

  }

  .section2-home {
    margin-top: 1rem;
    width: auto;

  }

  .h2home-section2 {
    font-size: 1em !important;
    margin-top: 1.25rem;
    letter-spacing: 2px;
    line-height: 25px;
   
  }

  .homepic {
   margin: 1em auto; 
  }


  .pics-3-home-section2 {
    margin-bottom: 1.75rem;
    padding-left: 0rem;
  }
  .carpark, .toil, .kitchen {
    justify-content: center;
    width: 55%;
  }
  .scroll-text {
    font-size: 0.50rem;
    margin-top: 1rem; 
  }
}


.Bodyhome {
  background: #100e0e;
  justify-content: center;
  align-items: center;
  margin: 0rem;
  padding: 0rem;
 /* background:-webkit-linear-gradient(290deg, rgb(17, 23, 25) 0%, rgb(15, 17, 18) 100%); */
}
 .content-wrapper {
  background-size: cover;
  width: 100%;
  height: 80%;
  justify-content: center;
  align-items: center;
  margin: 0;
  border-bottom: '5px solid darkred';
  animation: fade-in 2s ease-in forwards; 
}

.phome {
  font-family: 'Cairo','Open Sans',Arial,'Cairo','Montserrat', Arial, Helvetica, sans-serif;
  color: white;
  font-size: 3.1rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  letter-spacing: 4px;
  font-weight: 600;
  /* text-shadow: 0px 0px #e9c1c1; */
  margin: auto;
  padding: 15rem 2rem 1rem 2rem;
}

.scroll-down-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-text {
  color: white!important;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 10px;
  /* text-shadow: 1px 1px #dfa9a9; */
 letter-spacing: 3px;
}

.arrow-home {
  color: rgb(252, 251, 251)!important;
  font-size: 2rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}


.section2-home{
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  width: 100%;
  /* grid-template-rows:auto; */
  justify-content: center;
  align-items: center;
  text-align: center;

}

.h2home-section2{
  font-family: 'Cairo','Montserrat', Arial, Helvetica, sans-serif;
  color: rgb(249, 246, 246);
  font-size: 2em;
  letter-spacing: 3px;
  width: 100%;
  font-weight: 500;
  margin-top: 1rem;
  padding: 2rem 2rem 3rem 2rem;
  text-shadow: 1px 1px #dfa9a9;
}
.texthome-section2 {
  display: grid;
  grid-template-columns: auto;
}

.pics-3-home-section2 {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  justify-items: center;
  align-content: center;
  width: 100%;
  gap: 1em;
  margin-top: 3.5rem;
  margin: 10px;
  padding: 3rem;
}
.carpark, .toil, .kitchen {
  justify-content: center;
  width: 85%;
  border: solid 0.5em rgb(250, 231, 231);
  border-radius: 55% 40% 50% 12%;
  animation: slideIn 3s ease-out; 

}

.image-container-home {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.homepic {
  display: grid;
  width: 41%;
  height: auto;
  border-radius: 30px;
  margin-top: 3em;
  box-shadow: 2px 2px #57595a;

}

   /*AboutUs */

   .about-us-container {
    background-color: #1d1c1c;
    width: 100vw;
   }
   
  .section1-about {
   display: grid;
   grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
   font-family: 'Arial, Helvetica, sans-serif';
 color: rgb(21, 20, 20);
 align-items: center;
 padding-top: 0px;
 line-height: 2em;
 padding: 2em;
 margin: 0px;
 width: 100%;
}

.h2about {
  font-size: 3em;
  letter-spacing: 0.3em;
  font-family: 'Cairo', 'Arial, Helvetica, sans-serif';
  color: #f8e6ca;
  font-weight: 50;
  text-shadow: 1px 1px 2px #f2a8a8;
  border-bottom: 1px solid #dbc7c7;
  text-align: left;
  padding: 1.05em 0em 1em 1.80em;
 }

.pabout{
  font-size: 1.5rem;
  font-family: 'Cairo', 'Arial, Helvetica, sans-serif';
  color: #f8ece7;
  width: 80%;
  text-align:left;
  padding:2rem;
  text-shadow: #000 2px;
  /* word-spacing: -1.5px; */
}
  
.picabout1-animation-container {
   display: flex;
   grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
   
  }
  
.pic-2-section1 {
  display: grid;
  grid-template-rows: auto;
  margin: 0%;
} 

.picabout1, .picabout2, .picabout3{
  justify-content: center;
  /* align-items: center; */
  margin: 1em;
}

.about1 {
  width: 19rem;
  height: auto;
  margin: 1rem 0.2rem 0.2rem 2rem;
  padding: 0%;
  cursor: pointer;
}
.pic1 {
  margin: 0.1 rem 0.2rem 0.2rem 2rem;
}
.about1-1{
  width: 25rem;
  height: auto;
  margin: 0px;
  padding: 2rem 0.2rem 2rem 0.2rem;
  /* z-index: 5; */
}


/* section3-aboutus */

.section3-about{
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  width: 100%;
  font-size: 16.5px;
  font-family: 'Arial, Helvetica, sans-serif';
  text-align: justify;
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0em;
  padding-top: 2em;
  animation: slideout 2s ease-out; 
  /* line-height: 2em; */
}
.h2about3 {
  font-size: 3em;
  font-family: 'Cairo', 'Arial, Helvetica, sans-serif';
  color: #f7e9d3;
  letter-spacing: 2px;
  font-weight: bold;
  text-shadow: 2px 1px 5px #f2a8a8;
  text-align: left;
  padding: 2rem 2rem 0.25rem 2.5rem;
  animation: slideout 2s ease-out; 
}

.pabout3{
  font-size: 1.5rem;
  font-family: 'Cairo', 'Arial, Helvetica, sans-serif';
  color: #f9f4f1;
  text-align:center;
  padding-left:4rem;
  text-shadow: #000 2px;
  text-justify: distribute;
  word-spacing: -1.5px;
  animation: slideout 2s ease-out; 
   }
   
   .about3 {
    width: 28rem;
    height: auto;
    justify-content: center;
    align-items: center;
    margin: 4rem 0rem 2rem 3rem;
    cursor: pointer;
    border-radius: 100% 100% 75% 46%;
    animation: slideout 2s ease-out; 
    border: solid 0.75em rgb(250, 231, 231);
  }
   
   .logo-about3{
    display: flex;
    /* flex-direction: column; */
    justify-content: start;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    margin:0rem 0rem 2rem 3rem;
    padding: 0rem 0rem 2rem 3rem;
    gap:4rem;
    animation: slideout 2s ease-out; 

   }
.LogoMetal{
  /* flex:1; */
width: 19rem;
height: 4.5rem;
}

.Logobluebird{
  /* flex: 2; */
  width: 19.75rem;
  height: auto;
  padding-right: 1rem;
}
       
  .h2about2-section2{
    width: 90%;
    padding: 0.25em;
    padding-top: 2em;
    margin: 0px 0px 0px 45px;
    color:rgb(76, 29, 5);
    font-weight: bold;
    font-size: 2em;
  }
  
 .section3-about{
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  
  font-family: 'Arial, Helvetica, sans-serif';
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0em;
  padding-top: 2em; 
 }  */
/* .h2about3 {
  font-size: 2.70em;
  color: #f8f0e3;
  padding: 2em 0em 0.25em 2.5em;
}

.pabout3{
  font-size: 1.5em;
  font-family: 'Cairo', 'Arial, Helvetica, sans-serif';
  color: #f9f4f1;
  text-align:center;
  padding-left:4em;
  text-shadow: #000 2px;
  text-justify: distribute;
  word-spacing: -1.5px;
  animation: slideout 2s ease-out; 
   }
   
   .about3 {
    width: 28em;
    height: 29em;
    justify-content: center;
    align-items: center;
    margin: 5em 0em 2em 3em;
    border-radius: 55% 20% 35% 12%;
  }
   
   .logo-about3{
    display: flex;
    justify-content: start;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    margin:0em 0em 2em 3em;
    padding: 0em 0em 2em 3em;
    gap:4em;

   }
.LogoMetal{
width: 20em;
height: 5em;
}

.Logobluebird{
  width: 21em;
  height: 6.5em;
}
}  */

 @media screen and (max-width: 1600px) {

  .picabout1-animation-container {
    display: flex;
    flex-direction: column;
    padding: 3rem;
    margin-top: 3rem;
      } 
     
      .about1, .about1-1{
    width: 20rem;
    height: 16rem;
    margin: 10px 3px 2px 10px;
    padding: 0%;
    cursor: pointer;
   }
  }
  

@media screen and (max-width: 1300px) {

.picabout1-animation-container {
  display: flex;
  flex-direction: column;
   } 
 .about1-1{
  width: 19rem;
  height: auto;
  margin: 10px 3px 10px 10px;
  padding: 0%;
  cursor: pointer;
  
 }
 .about3 {
  width: 19rem;
  height: 20rem;
  justify-content: center;
  align-items: center;
  margin: 5rem 0rem 2rem 2rem;
  border-radius: 55% 20% 35% 12%;
}
 
 .logo-about3{
  display: flex;
  /* flex-direction: column; */
  justify-content: start;
  margin:0rem 0rem 2rem 1.2rem;
  padding: 0rem 0rem 2rem 1.75rem;
  gap:3rem;

 }
.LogoMetal{
width: 16rem;
height: 3rem;
}

.Logobluebird{
width: 17rem;
height: 4.75rem;
}
}

@media screen and (max-width: 1000px) {
  .h2about {
    font-size: 2.60em;
    letter-spacing: 0.1em;
    font-family: 'Cairo','Montserrat', Arial, Helvetica, sans-serif ;
    color: #f8e6cb;
    font-weight: bold;
    text-shadow: 1px 1px 5px #f2a8a8;
    padding: 1.75em 0em 0.25em 1.2em;
    word-spacing:-5px;
}
.pabout{
  font-size: 1.35em;
  color: #f4e7e0;
  /* text-align:justify; */
  padding:1.75em 0.5em 1.75em 1.5em;
  /* text-shadow: #000 2px; */
  word-spacing:-5px;
 }
 .picabout1-animation-container {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
   /* margin: 0em 1em 0em 0em; */
   } 
   .about1, .about1-1 {
    width: 18em;
    height: 13em;
    margin: 10px 3px 2px 10px;
    padding: 0%;
    cursor: pointer;
    /* transition: transform 0.3s ease; */ 
  }

  /* section3-aboutus */

 .section3-about{
  display: grid;
  margin: 0px;
  padding: 0em;
  padding-top: 1.75em;
  /* line-height: 2em; */
 } 
.h2about3 {
  font-size: 2.55em;
  color: #f8f0e3;
  padding: 2rem 2rem 0.25rem 2rem;
}

/* img */
  .about3 {
    width: 19em;
    height: 20em;
    justify-content: center;
    align-items: center;
    margin: 5em 0em 2em 2em;
    border-radius: 55% 20% 35% 12%;
  }
   
   .logo-about3{
    display: flex;
    /* flex-direction: column; */
    justify-content: start;
    margin:0em 0em 2em 1.5em;
    padding: 0em 0em 2em 2em;
    gap:3em;

   }
.LogoMetal{
width: 16em;
height: 3em;
}

.Logobluebird{
  width: 17em;
  height: 4.75em;
}

}

@media screen and (max-width: 710px) {

  .section1-about {
    padding: 0.75em;
    margin: 0px;
    width: 100%;
   }
  .h2about {
    font-size: 2.5em;
    letter-spacing: 0.1em;
    color: #fee6c2;
    text-shadow: 1px 1px 5px #f2a8a8;
    padding: 1.75em 0em 0.25em 1.2em;
    word-spacing:-7px;
}
.pabout{
  font-size: 1.30em;
  color: #f4e7e0;
  padding:1.75em 0.25em 1.75em 1.5em;
  /* text-shadow: #000 2px; */
  word-spacing: -5.5px;
 }
 .picabout1-animation-container {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
   /* margin: 0em 1em 0em 0em; */
   } 
   .about1, .about1-1 {
    width: 15.5em;
    height: 10em;
    margin: 10px 3px 2px 10px;
    padding: 0%;
    cursor: pointer;
    /* transition: transform 0.3s ease; */ 
  }
  
   /* section2-aboutus */

  .h2about2-section2{
    width: 85%;
    padding: 0.25em;
    padding-top: 1.75em;
    /* margin: 4%; */
    margin: 0px 0px 0px 40px;
    color:#2a2824;
    font-size: 1.75em;
    line-height: 1em;
  } 

  /* section3-aboutus */

 .section3-about{
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0em;
  padding-top: 1.75em;
  /* line-height: 2em; */
 } 
.h2about3 {
  font-size: 2.25em;
  color: #f8f0e3;
  padding: 2rem 1.75rem 0.25rem 1.75rem;
}

.pabout3{
  font-size: 1.20em;
  color: #f9f4f1;
  text-align:center;
  padding-left:1.10em;
  text-shadow: #000 2px;
  text-justify: distribute;
  animation: slideout 2s ease-out; 
   }
   
   .about3 {
    width: 17em;
    height: 18em;
    justify-content: center;
    align-items: center;
    margin: 5em 0em 2em 0.5em;
    border-radius: 55% 20% 35% 12%;
  }
   
   .logo-about3{
    display: flex;
    /* flex-direction: column; */
    justify-content: start;
    margin:0em 0em 2em 1em;
    padding: 0em 0em 2em 2em;
    gap:2.5em;

   }
.LogoMetal{
width: 15em;
height: 2.75em;
}

.Logobluebird{
  width: 14em;
  height: 4.5em;
}

}

@media screen and (max-width: 680px) {

  .section1-about {
    padding: 0.25em;
    margin: 0px;
    width: 100%;
   }
  .h2about {
    font-size: 2.5em;
    letter-spacing: 0.1em;
    color: #fee6c2;
    text-shadow: 1px 1px 5px #f2a8a8;
    padding: 1.75em 0em 0.25em 0.85em;
    word-spacing:-7px;
}
.pabout{
  font-size: 1.30em;
  color: #f4e7e0;
  padding:1.75em 0.2em 1.75em 1.25em;
  /* text-shadow: #000 2px; */
  word-spacing: -4px;
 }
 .picabout1-animation-container {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
   /* margin: 0em 1em 0em 0em; */
   } 
   .about1, .about1-1 {
    width: 14em;
    height: 15em;
    margin: 10px 3px 2px 10px;
    padding: 0%;
    cursor: pointer;
    /* transition: transform 0.3s ease; */ 
  }
  
   /* section2-aboutus */

  .h2about2-section2{
    width: 85%;
    padding: 0.25em;
    padding-top: 1.75em;
    /* margin: 4%; */
    margin: 0px 0px 0px 40px;
    color:#2a2824;
    font-size: 1.75em;
    line-height: 1em;
  } 

  /* section3-aboutus */

 .section3-about{
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0em;
  padding-top: 1.5em;
  /* line-height: 2em; */
 } 
.h2about3 {
  font-size: 2.2em;
  color: #f8f0e3;
  padding: 2rem 2rem 0.25rem 2rem;
}

.pabout3{
  font-size: 1.20em;
  color: #f9f4f1;
  text-align:center;
  padding-left:0.5em;
  text-shadow: #000 2px;
  text-justify: distribute;
  animation: slideout 2s ease-out; 
   }
   
   .about3 {
    width: 14.5em;
    height: 15.5em;
    justify-content: center;
    align-items: center;
    margin: 5em 0em 2em 0.5em;
    border-radius: 55% 20% 35% 12%;
  }
   
   .logo-about3{
    display: flex;
    /* flex-direction: column; */
    justify-content: start;
    margin:0em 0em 2em 0.75em;
    padding: 0em 0em 2em 2em;
    gap:1.5em;

   }
.LogoMetal{
width: 13em;
height: 2.5em;
}

.Logobluebird{
  width: 13em;
  height: 4.5em;
}

}
@media screen and (max-width: 580px) {
  .about1, .about1-1 {
    width: 12em;
    height: auto;
    margin: 10px 3px 0px 10px;
    padding: 0%;
    cursor: pointer;
    /* transition: transform 0.3s ease; */ 
  }
}

@media screen and (max-width: 450px) {
  .h2about {
    font-size: 2.5em;
    letter-spacing: 0.1em;
    font-family: 'Cairo','Montserrat', Arial, Helvetica, sans-serif ;
    color: #fee6c2;
    font-weight: bold;
    text-shadow: 1px 1px 5px #f2a8a8;
    padding: 1.75em 0em 0.25em 1.2em;
    word-spacing:-7px;
}
.pabout, .pabout3{
  font-size: 1.25em;
  font-family: 'Cairo', 'Arial, Helvetica, sans-serif';
  color: #faf2ed;
  /* text-align:justify; */
  padding:1.5em;
  /* text-shadow: #000 2px; */
  word-spacing:-5.2px;
 }
 .picabout1-animation-container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
   } 
   .about1-1{
    width: 20em;
    height: 16em;
    margin: 10px 3px 10px 10px;
    padding: 0%;
    cursor: pointer;
     /* z-index: 5; */
   }
  .h2about2-section2{
    width: 80%;
    padding: 0.25rem;
    padding-top: 1.70rem;
    /* margin: 4%; */
    margin: 0px 0px 0px 37px;
    color:rgb(92, 34, 5);
    font-size: 1.70em;
    line-height: 1rem;
  }
  /* section3 */

  .about3 {
    width: 17rem;
    height: 18rem;
    justify-content: center;
    align-items: center;
    margin: 3rem 0rem 2rem 4rem;
    border-radius: 55% 20% 35% 12%;
  }

  .logo-about3{
    display: flex;
    /* flex-direction: column; */
    justify-content: start;
    margin:0.5em 0.5em 2em 0.75em;
    padding: 0em 0em 2em 1.2em;
    gap:1.5em;

   }
.LogoMetal{
width: 15rem;
height: 2rem;
}

.Logobluebird{
  width: 16rem;
  height: 4rem;
}

}
    
  /* Services */
  @media screen and (max-width: 100px) {
    .h1serv {
      padding-top: 14rem !important;
      font-size: 3rem !important;
      padding-left: 3.5rem !important; 
      letter-spacing: 6px; 

 
    }
  
    .h3serv {
      font-size: 1.3rem; 
      padding-left: 3.5rem !important; 
      padding-bottom: 2rem;
      letter-spacing: 2px; 

    }
  
  }
/* Styles for tablets and smaller devices */
 @media screen and (max-width: 768px) {
  
 .picbanserv,
  .textbanserv {
    width: 100%; 
  }

  .h1serv {
    padding-top: 18rem !important;
    font-size: 2.2rem; 
    padding-left: 1rem !important; 
    letter-spacing: 5px; 


  }

  .h3serv {
    font-size: 1.3rem; 
    padding-left: 1rem; 
    padding-bottom: 2rem;
    letter-spacing: px; 

  }

  .h2services, .h3services, .pbanner {
    font-size: 1.2rem; 
  }

  
  .servicepic1, .servicepic2, .servicepic3, .servicepic4
   {
    width: 100%;
    margin: 0.5rem 0; 
  }

  .pserve-section, .pserve-section2, .pserve-section5-6 {
    font-size: 1rem;
    padding-left: 1rem; 
    padding-right: 1rem; 
  }
  .pserve-section5-6 {
    padding: 2rem !important;
   }
} 
@media screen and (max-width: 508px) {
  .h1serv {
    padding-top: 5.5rem !important;
    font-size: 1.75rem; 
    padding-left: 3rem;
    letter-spacing: 4px; 

  }

  .h3serv {
    font-size: 1.2rem; 
    padding-left: 2.5rem; 
    padding-bottom: 2rem;
    letter-spacing: 2px; 

  }
  .pserve-section5-6 {
    padding: 2rem !important;
   }

}
/* Styles for mobile phones */
 @media screen and (max-width: 400px) {
  .h1serv {
    font-size: 1.55rem;
    padding-top: 4.75rem;
    padding-left: 2.2rem;
    letter-spacing: 4px; 

  }

  .h3serv {
    font-size: 1.1rem;
    padding-bottom: 1.75rem;
    padding-left: 2.2rem;
    letter-spacing: 2px; 
 
  }

  .h2services, .h3services, .pbanner,
  .pserve-section, .pserve-section2, .pserve-section5-6 {
    font-size: 0.9rem;
  }
  .pserve-section5-6 {
   padding: 2rem !important;
  }
} 
/* servicepage style */

  .containerservices {
     /* display: grid;
     grid-template-columns:auto; */
     background:#240b0b;
  }
.bannerservices {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    font-family: 'Cairo', 'Montserrat', 'Arial, Helvetica, sans-serif';
    padding-top: 0px;
    margin: 0px;
    width: 100%; 
    border-bottom: 5px solid darkred !important;
  }
  /* text bannerarea */
  .textbanserv {
    background-color: rgb(94, 32, 32);
    color: white;
    width: auto!important;
    padding: 2rem 2rem 2rem 6rem;
    line-height: 2.70rem;
    /* animation: fade-in 2s ease-in-out forwards;  */
  }
  /* bannerside */
  .h3services, .h2services, .pbanner{
    padding: 0rem 0rem 0rem 1rem;
    color:#efebeb;
    font-weight: 400;
    /* animation: slideIn 2s ease-in-out forwards;  */
  }
  .pbanner {
    font-size: 1rem;
    padding-right:2rem;
  }
  .picbanserv {
    background-image: url('/assets/services.jpg');
    background-size: cover;
    width: 100%;
    height: auto;
    /* animation: slideout 2s ease-in-out forwards;  */

}
   

  .banner-content {
    width: 40%;
    /* color: rgb(253, 253, 253); */
    text-shadow:23px 2px 2px #f0bfbf;
    
  }
  
  .h1serv, .h3serv {
    color: rgb(246, 230, 230);
    /* color: rgb(94, 32, 32);  */
     text-shadow: 1px 1px 1px #fccaca;
     padding-left: 5.5rem;
     justify-content: center; 
     align-items: center;
     font-weight: 550;
     margin: 0;

        /* background-color: transparent; */
        /* display: inline-block; */
      }
      
      .h1serv{
        font-size: 4rem;
        /* font-family:  'Montserrat', 'Arial, Helvetica, sans-serif'; */
        letter-spacing: 9px !important;
        padding-top: 10rem;
        justify-content: center;
        align-items: center;
      }
      .h3serv {
        font-size: 2rem;
        font-weight: bold;
        padding-bottom: 3rem;
        letter-spacing: 3px;
      }
      .h2services {
        font-size: 2rem;
        padding-top:1rem;
        letter-spacing: 4px;
        font-weight: 400;
        animation: slideout 2s ease-in-out forwards; 

      }
      /* body services   */
      
      .services-body {
        background-color: #131212;
        color: white;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        
      }
      .text-top-body-service {
        padding: 2rem;
        color: white;
      }
      .h2servbody {
        padding: 2rem 0rem 0rem 2rem;
      letter-spacing: 4px;
      font-weight: 400;
      justify-content: center;
      align-items: center;
      }
      
      .pservebody {
        color: white;
        padding: 0.2rem 2rem 2rem 2rem;
        font-size: 2rem;
        animation: fade-out 2s ease-in-out forwards; 
        
      }
      /* pics and text body services */
      .services-wraper {
        display: grid;
        grid-template-columns:auto;
        font-family: 'Cairo', 'Montserrat', 'Arial, Helvetica, sans-serif';
        color: white;
        justify-content: center;
        align-items: center;
        animation: fade-in 2s ease-in-out forwards;
        margin: 0px;
        padding: 0rem;
        padding-left: 3rem;
      } 
      
      
 .section1-services, .section2-services, 
 .section3-services, .section4-services
  {
  display: grid;
  /* grid-template-columns: repeat(3, auto); */  
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  height: auto;
  width: 95%;
  margin: 0;
  font-family: 'Cairo', 'Montserrat', 'Arial, Helvetica, sans-serif';
  color: white;
  justify-content: center; 
  align-items: center;
  gap: 1.2em;
  margin: 0px;
  animation: fade-in 2s ease-in-out forwards;
  /* padding-left: 1em; */
}

.h2serveboby {
  letter-spacing: 4px;
  padding: 6rem 3rem 0.5rem 3rem !important;
  width: 100%;
}
.pserve-section {
  font-size: 1.5rem;
  padding: 1rem ;
  justify-content: end;
  width: 100%;
 }
  .servicepic1, .servicepic2, 
  .servicepic3, .servicepic4 {
    width:100%;
    height: auto;
    margin-left: 0px;
    border: 12px solid #e3d8c7 ;
    box-shadow: 2px 2px  #57595a;
    margin: 1.5rem 1rem 0rem 0rem ;
    /* animation: slideIn 2s ease-in-out forwards; */

  }
  .servicepic1 {
    border-radius: 15rem 14rem 4rem 5rem;
  }
  
  .servicepic2{   
    border-radius: 14rem 15rem 13rem 13rem;
  }
  .servicepic3 {
   border-radius: 1rem 12rem 12rem 8rem;
   }
  .servicepic4 {
    border-radius: 8rem 6rem 13rem 11rem;
   }

  .pserve-section5-6 {
  width: 100%;
  font-size: 1.5rem;
  padding: 1rem 3rem 3rem 3rem;
  justify-content: center;
  text-align: left;
    } 

  
/*Projects */

.projectheader{
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-items: center; */
  padding: 4em;
  text-align: center;
  align-items: center;
  color:#e0c397
 }

 .h1proj{
  display: flex;
  font-family:' Arial, Helvetica, sans-serif'; 
  text-align:justify;
  align-items: center;
  justify-content: center;
  margin-top: 3em;
 }
 .h2proj{
  margin-top: 0.5em;
  margin-bottom: 2em;
 }

 .grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  height: auto;
  width: 60%;
  margin: auto;
  font-family: 'Arial, Helvetica, sans-serif';
  text-align: justify;
  word-spacing: -1.5px;
  color: white;
  justify-content: center; 
  grid-gap: 1.2em;
  opacity: 0;
  animation: fade-in 2s ease-in-out forwards;
  margin: 0px;
}


.grid1,
.grid2,
.grid3 {
  display: grid;
  grid-template-rows: repeat(2, auto);
  font-size: 18.5px;
  font-family: 'Cairo', 'Montserrat', 'Arial, Helvetica, sans-serif';
  color: rgb(21, 20, 20);
  background-color: #f3f2ed;
  border-radius: 35px;
  box-shadow: 2px #737779;
  padding: 20px;
  align-items: center;
  padding-top: 0px;
  text-align: justify;
  text-justify: distribute;
  margin: 0px;
  box-shadow: 15% 12% 15% #999;
  word-spacing: -1.5px;
  line-height: 1.78em;
}
  /* text-align-last: left; */

/* Gallery */
/* Styles for mobile phones */
@media screen and (max-width: 480px) {
  .hgallery {
    font-size: 1.95em;
    justify-content: start;
    align-items: center;
    padding-left: 0.75rem !important ; 
  }
}
@media screen and (max-width: 280px) {
  .hgallery {
    font-size: 1.5em;
    justify-content: start;
    align-items: center;
    padding-left: 0.5em !important; 
  }
}
.gallerybody {
  background-color: #1b1616;
  padding: 20px;
}

.hgallery {
  padding: 2em 0em 0.25em 1.75em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #888;
  font-family:  'Montserrat', 'Arial', 'Cairo','Helvetica, sans-serif';
  color: white;
  font-size: 2.7em ;
  font-weight: 450;
  letter-spacing: 10px;
  justify-content: start;
  animation: scroll-In 2s ease-in forwards;

}

.pgallery{
  padding-bottom: 1em;
  font-family: 'Cairo', 'Montserrat', 'Arial, Helvetica, sans-serif';
  font-size: 1.5em ;
  text-align: left;
  color: white;
  line-height: 2em;
  font-weight: normal;
  padding: 2em;
}

.galpic {
  display: flex;
  grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
  height: auto;
  width: 90%;
  margin: auto;
  font-family: 'Arial, Helvetica, sans-serif';
  text-align: justify;
  word-spacing: -1.5px;
  color: white;
  justify-content: center;
  grid-gap: 1.2em;
  padding: 20px;
  opacity: 1;
  margin: 20px;
  animation: fade-in 2s ease-in forwards;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  object-fit: cover;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.gallery-image {
  width: 365px;
  height: 390px;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.05); /* Scale the image by 1.1 on hover */
  opacity: 0.6;
}

.modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background: rgba(6, 6, 0, 0);
  z-index: 999;
}

.modal-image {
  width: auto;
  max-height: auto;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.9);
  margin: 0px;
}

.image-placeholder {
  background-color: #ccc; /* Placeholder color */
  height: 100%;
  width: 100%;
}


/* overlay */
.image-container {
  position: relative;
  overflow: hidden;
}

.image-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5) !important; /* Dark transparent background */ 
   opacity: 0;
   transition: opacity 0.3s ease;
   object-fit: contain;
   opacity: 0; /* Make overlay invisible by default */
   pointer-events: none; /* Ensure clicks pass through the overlay to the image below */
  }
  
  .image-container:hover .image-overlay {
  opacity: 0;
}
.modal-container {
  background-color: transparent !important;
  width: auto;
  height: auto; 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* z-index: 1050; High z-index to ensure it's on top of other elements */

}
.custom-modal-dialog .modal-dialog {
  margin: auto;
  width: auto;
  max-width: 100%;
}

.modal-content {
  background-color: rgba(23, 20, 20, 0.95); /* Increase the alpha for a darker background */
  border-radius: 10px;
  position: relative;
  border: none;
  width: auto;
  height: auto;
  /* max-width: 100%;  */
  /* max-height: auto;  */
  object-fit: contain;
  overflow: auto;
  margin: 0px;
  padding: 0rem;
  overflow-y: auto; /* Allows scrolling within the modal if content overflows */
}



.image-container:hover .image-overlay {
  opacity: 1; /* Show overlay on hover */
}
.modal-container {
  background-color: transparent ;
  width: auto;
  height: auto; 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* z-index: 1050; High z-index to ensure it's on top of other elements */

}
.custom-modal-dialog .modal-dialog {
  margin: auto;
  width: auto;
  max-width: 100%;
}

.modal-content {
  background-color: rgba(23, 20, 20, 0.95); /* Increase the alpha for a darker background */
  border-radius: 10px;
  position: relative;
  border: none;
  width: auto;
  height: auto;
  /* max-width: 100%;  */
  /* max-height: auto;  */
  object-fit: contain;
  overflow: auto;
  margin: 0px;
  padding: 0rem;
  overflow-y: auto; /* Allows scrolling within the modal if content overflows */
}



.download-button {
  display: flex;
  justify-content: center;
  font-family: 'Cairo', 'Montserrat', 'Arial, Helvetica, sans-serif';
  font-size: 1.75rem;
  font-weight: 400;
  color:#090909;
  border:dashed 2px #e0c397;
  background-color: rgb(99, 9, 9);
  border-radius: 15px;
  padding: 0.5rem 0rem; 
  margin-top: 0.25rem; 
  cursor: pointer;
  text-decoration: none; 
  
}

.download-button a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
  text-decoration: none !important; 
  
}

.download-button a:hover {
  color: rgb(198, 235, 34) !important; 
  text-decoration: none !important;
  font-weight: 550 !important; 
}

.download-button:hover {
  background-color: #8b0000; 
}



.close {
  font-size: 2rem !important;
  color: rgb(239, 40, 40) !important;
  cursor: pointer;
  position: absolute;
  position: fixed;
  top: 25px;
  right: 10px;
  left:90px;
  transform: translateY(-10%);
  z-index: 1051; /* Above the modal content */
  /* margin-bottom: 0.5em; */
}


.arrow {
  font-size: 3rem !important;
  color: rgb(190, 31, 31);
  font-weight: 700;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1050; /* Ensure it's above the modal content */
}

.arrow-left {
  left: 0px;
}

.arrow-right {
  right: 0px;
}



  /* ContactUs */

@media screen and (max-width: 600px) {
  form {
    display: flex;
    flex-direction: column;
    margin: 2rem important;
  }
  .get-in-touch {
    padding-top: 2.5em;
  }
  
}

 @media (max-width: 768px) {
   .form-container {
     flex-direction: column;
   }
   .get-in-touch {
    padding-top: 3em;
  }
 }
  

  .container-zone{
    display: flex; 
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    /* background-image: url('NZ1.png');
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0; */
    
    
  } 

  .contact-container{
    display: flex;
    
    flex-direction: column; 
  }
  
  .form-animation-container {
    display: flex;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    /* flex-direction: row;  */
    /* justify-content: space-between; */
  }
  
  .form-animation-container {
    animation: slideIn 2s ease-out; /* Define animation */
  }
  @keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  
  .form-animation-container {
    animation: slideIn 2s ease-out; /* Define animation */
  }
  
  
.allform {
  /* background-color: #e3d2d2; */
  font-family: 'Cairo',Arial, Helvetica, sans-serif;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 0;
}
.contactform{
  padding-top: 3em;

}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding: 1em; */
  width: auto; /* Adjusted width to take up half of the container */
}

.info-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1em;
  color: #141313;
  font-size: 1.2em;
  box-shadow: 7px #ed5f18;

}
.info-box2 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #141313;
  font-size: 1.2em;
}
.icon {
  font-size: 1.5em;
  color: white;
  padding-right: 0.25em;
}
.get-in-touch {
  padding-top: 1em;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: bold;
  
}

.form-part {
  flex: 1;
  margin-right: 15px; 
}
.form-group {
  margin-bottom: 10px; 
}
.message{
  height: 5em;
}
.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}
.custom-btn {
  display: flex;
  flex-direction: row;
  padding-bottom: 10px 0px;
  /* background-color: red; 
  font-family: 'Cairo', Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  height: 3em;
  width: 50%;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  justify-items: center;
  font-size: 1.4em;
  font-weight: bold;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.custom-btn:hover {
  background-color: rgb(70, 2, 2); /* Change the hover background color if needed */
}

.custom-btn:active {
  background-color: #b5b270;
  box-shadow: 02px #c9c9c9;
  transform: translateY(5px);
}

.popup {
  background-color: rgba(29, 27, 27, 0.8);
  position: fixed;
  top: 26%;
  left: 50%;
  border: 3px solid grey;
  padding: 30px;
  transform: translate(-50%, -50%);
  z-index: 9999;
  border-radius: 10px;
  font-size: 1.45em;
  color: rgb(223, 216, 216);
  text-align: center;
  box-shadow: 2px 2px #868889;
}

.popup p {
  margin-bottom: 10px;
}