body {
  padding: 0;
  margin: 0;
}

/* ********************************************** */
/* ****************************************** */
/* ********    LOGO SECTION  ************* */

.logo-section {
  position: relative;
  text-align: center;
  background-color: black;
  margin-bottom: 0px;
}

.pastense-logo {
  width: 23%;
  margin: 1% 0px;
}

@media (max-width: 992px) {

  .pastense-logo {
  width: 50%;
  margin: 5% 0px;
    }
}

@media (min-width: 1500px) {

  .pastense-logo {
  width: 18%;
  margin: 1% 0px;
    }
}

/* ********************************************** */
/* ****************************************** */
/* ********    NAV BAR  ************* */

/* Add black top and bottom borders on hover */
.navbar-nav .nav-item .nav-link:hover {
  background-color: #500bf5;
  color: white;
  align-items: stretch;
}

.navbar-nav .nav-item {
  margin: 0;
}

.navbar-nav .nav-item .nav-link {
  padding: 1rem 1.5rem;
  /* Adjust the padding to control the hover area size */
  display: block;
  /* This ensures the padding takes effect properly */
}

/* Ensure the hover effect fills the entire height of the nav item */
.navbar-custom .navbar-nav {
  align-items: stretch;
  /* This will make the nav-items fill the height */
}

/* Optional: Remove the default underlines on hover */
.navbar-nav .nav-item .nav-link:hover {
  text-decoration: none;
}

.navbar-custom {
  background-color: rgb(245, 245, 245);
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 0px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;

}

nav a {
  font-family: "Barlow Condensed", sans-serif;
}

/* Center navbar items when the menu is collapsed */
@media (max-width: 991px) {
  .navbar-nav {
    text-align: center;
    width: 100%;
  }

  .nav-item {
    width: 100%;
    display: block;
  }

  .nav-link {
    width: 100%;
    display: block;
  }

  /* Change the background color of the opened menu, collapsed to red */
  .navbar-collapse.collapsing,
  .navbar-collapse.show {
    background-color: rgb(255, 255, 255);
  }
}

/* This is required to center the links inside the nav-item */
.nav-link {
  display: block;
  text-align: center;
}

/* Additional style to ensure the toggler icon is centered */
.navbar-toggler {
  display: flex;
  justify-content: center;
  border: none;
  margin: 1%;
  border-radius: 0px;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Ensure full width for the collapsed navbar */
.navbar-collapse {
  justify-content: center;
}


.navbar-nav .nav-item .contact-us:hover {
  background-color:#F6C844;
  color: rgb(0, 0, 0);
  align-items: stretch;
}

/* ********************************************** */
/* ****************************************** */
/* ******  FIRST CAROUSEL SECTION  ******* */

.carousel-custom1 {
  width: 100%;
  height: 40vh;
  overflow: hidden;
}

.carousel-img1-orange {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  transform: translateY(-25%);
}

.carousel-img1-green {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  transform: translateY(-30%);
}

.carousel-img1-doc {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  transform: translateY(-70%);
}


/* ********************************************** */
/* ****************************************** */
/* ********    ABOUT US  ************* */

.centered-svg {
  display: flex;
  justify-content: center;
  /* This will center the child horizontally */
  align-items: center;
  /* This will center the child vertically if the div has a specific height */
  height: 100px;
  /* Adjust the height as needed */
}

.about-us {
  height: 20%;
  padding: 10px;
  margin: 5% 0% 6% 0;
}

.about-us .container {
  max-width: 800px;
  text-align: center;
}

.black-titles {
  font-family: 'Fjalla One', sans-serif;
  font-size: 50px;
  align-items: center;
  text-align: center;
  margin: 2%;
}

span.squiggle {
  background: linear-gradient(to bottom, #E7106D 0%, #E7106D 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 100% 2px;
  color: inherit;
  text-decoration: none;
  padding-bottom: 1%; /* To ensure the line doesn't overlap the text */
  display: inline; /* Ensures the background only covers the text */
}

span.squiggle:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fill='none' stroke='%23E7106D' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-size: auto 4px;
}

/* ********************************************** */
/* ****************************************** */
/* ********    SERVICES  ************* */

.wiggly {
  position: absolute;

  height: 20%;
  /* Adjust if needed */
  right: 0;
  top: 130%;
  /* Adjust this value to position the line correctly */
  transform: translateY(40%);
  /* This will center the line vertically */
  z-index: 8;
  /* Make sure it's above other content */
}

.yellow-titles {
  font-family: 'Fjalla One', sans-serif;
  font-size: 50px;
  align-items: center;
  text-align: center;
  margin: 2%;
}

.service-section {
  background-color: rgb(0, 0, 0);
  /* Your preferred background color */
  padding: 40px 0;
  color: #F6C844;
}

.service-section b{
  color: #F6C844;
}

.service-item {
  margin-bottom: 3%;
  align-items: center;
  /* Aligns the text and image vertically */
}

.service-text {
  padding-right: 15px;
  color: white;
}

.service-text h3 {
  color: #E7106D;
  font-family: 'Fjalla One', sans-serif;
}

.service-image img {
  max-width: 100%;
  height: auto;
  border-radius: 2%;
}

.service-section .mobile2{
  display: none;
}


/* Responsive design adjustments */
@media (max-width: 767px) {

  .service-text,
  .service-image {
    padding: 0 15px;
    text-align: center;
  }
}

/* ********************************************** */
/* ****************************************** */
/* ********    FILM ARCHIVE  ************* */
.archive-section {
  background-color: #500bf5;
  /* Your preferred background color */
  padding: 2%;
  color: #000000;
  margin: 2%;
  display: flex;
  /* Establish flex container */
  justify-content: center;
  /* Center children horizontally */
  height: 100%;
  /* Full height to fill the section */
}

.archive-item {
  display: flex;
  /* Establish flex container */
  flex-direction: row;
  /* Layout children in a row */
  align-items: center;
  /* Align children vertically */
  justify-content: center;
  /* Center children horizontally */
  width: 100%;
  /* Full width of the container */
  height: 100%;
  /* Full height to align vertically */
}

.archive-text,
.archive-image {
  flex: 1;
  /* Each child will take up equal space */
  display: flex;
  /* Also make these flex containers */
  justify-content: center;
  /* Center their children */
  align-items: center;
  /* Center children vertically */
}

.text-background {
  background-color: white;
  /* White background for the text */
  padding: 20px;
  /* Adjust the padding as needed */
  border-radius: 5px;
  /* Optional rounded corners */
  color: black;
  /* Text color */
  width: 65%;
  /* Adjust width as needed */
  position: absolute;
  margin-left: 30%;
}

.archive-section h3 {
  font-family: 'Fjalla One', sans-serif;
}

.archive-image img {
  max-width: 100%;
  height: auto;
  border-radius: 2%;
}

@media (max-width: 767px) {

  .archive-image img {
    width: 110%;
    padding: 0;
    margin: 0;
    /* Adjust width on small screens */
  }
}

/* ********************************************** */
/* ****************************************** */
/* ********    PROJECTS  ************* */

.carousel-container {
  /*   box-sizing: border-box;  */
  box-sizing: border-box;
  max-width: 100%;
  margin: auto;
  /* Center the carousel */
  padding: 20px;
  /* Optional padding */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #F6C844;
  /* Optional shadow for better visibility */
  overflow: hidden;
}

@media (min-width: 768px) {
  .carousel-inner2 {
    display: flex;
  }

  .carousel-item2 {
    margin-right: 0;
    flex: 0 0 33.333333%;
    display: block;
  }
}

.carousel-inner2 {
  padding: 1em;
  margin: 0;
}

/* .card2{
  margin: 0 .5em;
  padding: 5%;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
  border-radius: 20px;
  background-color: #f1f0f0;
  overflow: hidden;
} */

.card2, .project {
  margin: 0 0.5em;
  position: relative;
  padding: 10%;
  border-radius: 20px;
  background-color: #ffffff; /* Change to white background */
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.1);
  border: none;
  overflow: hidden;
}

.prev2,
.next2 {
  background-color: #939393;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.carousel-img2 {
  border-radius: 2%;
  margin-bottom: 6%;
  transition: transform 0.3s ease;
}


.prev2:hover,
.next2:hover {
  background-color: #500bf5;
  opacity: 1;
}

.btn-projects {
  background-color: #E7106D;
  border: none;
  font-family: 'Fjalla One', sans-serif;
}

.btn-projects:hover {
  background-color: #500bf5;
}

/* .card2:hover .carousel-img2 {
  transform: scale(1.05);
}
 */


 /* HOVER EFFECT */

.overlay {
  transition: all 0.2s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  
}

.overlay h1 {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 0;
  color: #500bf5;
}

.project {
  position: relative;
}

.project:hover img {
  opacity: 0.2;
}

.project:hover .overlay {
  opacity: 1;
}

.overlay .iconos-contenedor {
  display: flex;
}

.overlay i {
  color: black;
  font-size: 60px;
  margin: 10px;
}

.carousel-img2 {
  border-radius: 2%;
  margin-bottom: 6%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover effect for the image to grow a little */
.carousel-img2:hover {
  transform: scale(1.05);
}


/* ********************************************** */
/* ****************************************** */
/* ********    TEAM  ************* */

.team4 {
  color: #5f5f5f;
  font-weight: 200;
  margin-bottom: 3%;
  margin-top: 2%;
}

.team4 h3 {
  color: #E7106D;
  font-family: 'Fjalla One', sans-serif;
  font-size: 50px;
  align-items: center;
  text-align: center;
  margin: 2%;
}

.team4 .subtitle {
  color: #8d97ad;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: #000000;
  font-family: 'Fjalla One', sans-serif;
}

.team4 h5 {
  line-height: 30px;
  font-size: 22px;
  color: #E7106D;
  font-family: 'Fjalla One', sans-serif;
}

.img-fluid {
  border-radius: 50%;
  object-fit: cover;
  width: 300px;
  height: 300px;
  margin: 0 auto; /* Centers the image in its container */
  display: block;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .img-fluid {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 768px) {
  .img-fluid {
    width: 300px;
    height: 300px;
  }
}
















/* ********************************************** */
/* ****************************************** */
/* ********    CONTACT  ************* */

/* Contacto */

.contacto .container {
  max-width: 1100px;
  min-height: 200px;
  padding: 20px;
}

.contacto .rectangulo {
  margin-top: -5rem;
  background-color:#500bf5;
  border: 2px solid white;
  border-radius: 10px
}

.contacto .row {
  width: 100%;
  display: flex;
  align-items: center;
}

.contacto .descripcion {
  color: white;
  font-size: 1.2rem;
}

.contacto button:hover i {
  color: black;
}

.contacto button {
  color: white;
  font-weight: bold;
  background-color: #500bf5; /* Match the rectangulo background */
  border: none;
  padding: 1.25em 2em;
  margin: 10px;
  border-radius: 100px;
  box-shadow:
    4px 4px 10px #44009d, /* Darker shadow for the button */
    -4px -4px 10px #5c00ff; /* Lighter shadow for the neumorphic effect */
    transition: all 0.2s ease-in-out;
}
.contacto button:hover {
  background-color: white;
  color: #500bf5;
  box-shadow: none; /* Remove the shadow for an 'active' effect */
}

  .contacto button i {
  margin-left: 0.5rem;
  transition: all 0.2s ease-in-out;
  }













/* ********************************************** */
/* ****************************************** */
/* ********    FOOTER  ************* */
.seccion-oscura {
  color: white;
  background-color: #000000;
}

footer {
  min-height: 400px;
}

.footer-logo {
  height: 190px;
  margin-top: -100px;
  margin-bottom: 20px;
}

.footer-texto {
  font-size: 1.5rem;
  padding: 20px;
  margin-bottom: 30px;
  font-family: 'Quicksand', sans-serif;
}

.iconos-redes-sociales a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 10px;
  border: 2px solid white;
  border-radius: 50%;
  transition: all 0.2s ease-in;
}

.iconos-redes-sociales i {
  color: white;
  font-size: 1.5rem;
  transition: all 0.2s ease-in;
}

.iconos-redes-sociales a:hover {
  background-color: white;
  border: 2px solid rgb(13, 110, 253);
}

.iconos-redes-sociales a:hover i {
  color: black;
}

.copyright {
  font-size: 15px;
  color: #aeaeae;
  padding: 20px;
}

























































/* ********************************************** */
/* ****************************************** */
/* ********    MEDIA QUERIES  ********** */

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


  /* Adjust the font sizes for smaller screens */
  .services-title,
  .archive-section h3 {
    font-size: 30px;
    /* Smaller font*/
  }

  .about-us {
    padding: 5%;
    margin: 5% 0;
  }

  .about-us .container,
  .service-section .container,
  .archive-section .container-archive {
    max-width: 100%;
    /* Full width containers */
    padding: 0 15px;
  }

  .service-item,
  .archive-item {
    flex-direction: column;
    /* Stack children vertically */
  }
  .archive-item {
    --bs-gutter-x: 0rem;
    /* Stack children vertically */
  }

  .service-text,
  .service-image,
  .archive-text,
  .archive-image {
    /* Ensure the text and images take full width on smaller screens */
    width: 100%;
    padding: 0;    /* Remove any padding that might be causing overflow */
  }

  .service-section{
    padding: 5%;
  }

  .service-section img{
    margin-bottom: 10%;
    margin-top: 5%;
  }

  .archive-image img {
    /* Adjust image styles */
    max-width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    margin-bottom: 20px;
    /* Add some space below the image */
    display: flex;
    align-items: center;
    justify-items: center;
  }

  .service-image img{
        max-width: 100%;
        height: auto;
        /* Add some space below the image */
        display: flex;
        align-items: center;
        justify-items: center;
  }

  .text-background {
    width: 100%;
    /* Full width for the background */
    position: relative;
    /* Reset the position */
    margin-left: 0;
  }

  .wiggly {
    position: absolute;
    width: 30%;
    /* Adjust if needed */
    right: 0;
    top: 90%;
    /* Adjust this value to position the line correctly */
    transform: translateY(30%);
    /* This will center the line vertically */
    z-index: 8;
    /* Make sure it's above other content */
    display: none;
  }

  .down_arrow {
    width: 100%;
    position: absolute;
    /* Position your arrow absolutely to the bottom of the carousel */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* This will center the arrow */
  }

  .centered-svg {
    position: absolute;
    /* Absolute position the arrow */
    bottom: 480px;
    /* Negative value to pull the arrow up towards the carousel */
    left: 50%;
    /* Center the arrow */
    transform: translateX(-50%);
    /* Align center properly */
    width: 80%;
    /* Optional: Adjust the width as needed */
    height: auto;
    /* Keep the aspect ratio */
    z-index: 10;
    /* Make sure the arrow is above the carousel */
    display: none;
  }

  .about-us {
    margin-top: auto;
    display: flex;
    align-items: center;
  }

  .copyright{
    display: flex;
    justify-content: center;
  }

  .team{
    padding: 5%;
  }

  footer{
    padding: 5%;
    display: flex;
    justify-content: center;
    text-align: center;
  }
  footer img{
    padding: 2%;
  }

  .overlay h1 {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 0;
    color: #500bf5;
  }
  .overlay p {
    font-size: 12px;

  }
  .service-image .workflow {
    max-width: 100%;
    height: auto;
    display: none;
    border-radius: 2%;
  }

  .service-image .development{
    display: none;
  }

  .service-section .mobile2{
    display:flex;
    max-width: 100%;
    height: auto;
    border-radius: 2%;
    margin-top: 1%;
  }

  .carousel-custom1 {
    height: 20vh; /* Let the height adjust based on image height */
  }

  .carousel-img1-orange,
  .carousel-img1-green,
  .carousel-img1-doc {
    width: 100%; /* Maintain full width */
    height: auto; /* Adjust height automatically */
    position: relative;
    top: 0; /* Reset the top property */
    transform: translateY(0%); /* Reset the transform property */
    object-fit: cover; /* This will cover the area without stretching the image */
  }

  .archive-section .text-background{
    display: flex;
    flex-direction: column
  }

  .archive-section .text-background img{
    display: flex;
    flex-direction: column
  }


}