section [class^="container"] {
  padding: 4rem 2rem;
}
@media screen and (min-width: 1024px) {
  section [class^="container"] {
    padding: 4rem;
  }
  nav [class^="container"] {
    padding: 0 4rem;
  }
}

section:not(:first-of-type) {
  text-align: center;
}

section:nth-child(2n) {
  background-color: #fff3ec;
}

a {
  color: #000000;
  text-decoration: none;
  transition: all 0.3s;
}
a:not(.btn):hover {
  color: #ff4000;
}

section .card,
.btn-outline-dark {
  border: 2px solid #000000;
  box-shadow: 4px 4px #000000;
  transition: all 0.4s;
}
.btn-outline-dark:hover {
  box-shadow: 4px 4px #ff4000;
}
section .card {
  max-width: 22rem;
  margin-inline: auto;
}




/* NAVBAR */

.navbar {
  background-color: #ffffff;
}

.navbar-nav .nav-link {
  color: #000000;
  font-size: 1.1rem;
  transition: all 0.5s;
}
.navbar-nav .nav-link:hover {
  color: #ff4000;
}

.navbar-brand img {
  max-height: 100px; 
}


@media (max-width: 768px) {
  .navbar-brand img {
      max-height: 50px; 
  }
}


@media screen and (min-width: 1024px) {
  .navbar-nav .nav-item {
    padding: 0 1rem;
  }
  .navbar-brand {
    font-size: 0.75rem;
  }
}




/* HERO */

section.hero {
  padding-top: 72px;
}
@media screen and (max-width: 576px) {
  section.hero {
    text-align: center;
  }
  section.hero .img-fluid {
    width: 70%;
  }
}

/* enterprise */

section.enterprise i {
  font-size: 2rem;
  margin: 1rem auto 0;
  border: 2px solid #000000;
  color: #ffffff;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4000;
}

section.enterprise i.smaller {
  font-size: 2rem; /* Adjust as needed */
  width: 2rem; /* Adjust as needed */
  height: 2rem; /* Adjust as needed */
  margin-bottom: 2rem;
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #ff4000;
}




/* #personal */
section.personal i {
  font-size: 2rem;
  margin: 1rem auto 0;
  border: 2px solid #000000;
  color: #ffffff;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4000;
}


section.personal i.smaller {
  font-size: 2rem; /* Adjust as needed */
  width: 2rem; /* Adjust as needed */
  height: 2rem; /* Adjust as needed */
  margin-bottom: 2rem;
  background-color: #000000;
  color: #ffffff;
  border: 2px solid #ff4000;
}

/* ABOUT */

@media screen and (min-width: 1024px) {
  section.about .container,
  section.testimonials .container {
    width: 75%;
  }
}


.aboutImage img {
filter: grayscale(100%);
}

.text-div-about {
  text-align: justify;
}

.center-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}



/* CONTACT */

section.contact .social-media a {
  padding: 0 0.5rem;
  font-size: 1.3rem;
}








/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: fixed; /* Position the modal content relative to the viewport */
  top: 50%; /* Position the modal content at the middle of the viewport vertically */
  left: 50%; /* Position the modal content at the middle of the viewport horizontally */
  transform: translate(-50%, -50%); /* Shift the modal content back by half of its width and height to center it */
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;

  display: flex; /* Use flexbox to layout the modal content */
  flex-direction: column; /* Stack the modal content vertically */
  align-items: center; /* Center the modal content horizontally */

  overflow-y: auto;
  max-height: 70vh;
}

.modal-content h1 {
  margin-bottom: 30px; /* Add a 20px margin below the h1 element */
  font-size: 1.5rem; /* Adjust as needed */
}

.modal-content p {
  font-size: 1rem; /* Adjust as needed */
}

@media (max-width: 576px) { /* Adjust as needed */
  .modal-content {
    overflow-y: auto;
    max-height: 60vh; /* Adjust as needed */
  }
 
}







/* The Close Button */
.close {
  color: #aaaaaa;
  position: absolute; /* Position the close button relative to the modal content */
  top: 10px; /* Position the close button 10px from the top of the modal content */
  right: 20px; /* Position the close button 10px from the right of the modal content */
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #ff4000;
  text-decoration: none;
  cursor: pointer;
}