html {
    background-color: black;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes up full viewport height */
}

header {
    position: relative;
    z-index: 100; /* Ensure the navbar is above the sections */
}

.dm-sans {
    font-family: 'DM Sans';
}

.inter {
    font-family: 'Inter';
}

.arial {
    font-family: 'Roboto', sans-serif;
}

.epilogue {
    font-family: 'Epilogue';
}

.nunito {
    font-family: 'Nunito';
}

.bg-ft {
    background-color: rgba(211, 210, 218, 0.15);
}

.main-title {
    line-height: 74.69px !important;
}

/* Custom Scrollbar with Left Margin */
.custom-scrollbar {
    padding-right: 10px; /* Add left space between the scrollbar and content */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* Adjust the width as needed */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #D1C7D5; /* Light background (track) */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #172533; /* Dark scrollbar thumb */
    border-radius: 10px;
}

.hero-background {
    background: radial-gradient(circle at left, rgb(45, 83, 123) 0%, rgba(21,40,60,0.2) 25%),
                radial-gradient(circle at right, rgb(45, 83, 123) 0%, rgba(21,40,60,0.2) 25%);
    background-color: rgba(19, 34, 50, 1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.page-background {
background-color: #ffffff;
}

.nav-bg-before {
    background-color: transparent;
    transition: background-color 0.5s ease;
}

.nav-bg-after {
background-color: rgba(219, 232, 245, 1);
}

.nav-link {
    color: rgba(124, 152, 184, 1);
    position: relative;
    display: inline-block;
}

.nav-link::before {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: rgba(83, 128, 234, 1);
    position: absolute;
    top: -3px;
    left: 0;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.nav-link.selected::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.nav-link:hover::before {
    transform: scaleX(1); 
    transform-origin: bottom left;
}

.curved-banner {
    display: inline-block;
    width: 100%;
    padding: 10px;
    clip-path: ellipse(75% 100% at 50% 100%);
  }

.purple-card {
    height: 164px;
    border-color: rgba(73, 137, 200, 1); 
    background-color: rgba(15, 23, 42, 1);
}

.section-3-bg {
    background: linear-gradient(to bottom, rgb(130,154,179) 0%, rgb(219,232,245) 50%);
    height: 100%;
    width: 100%;
}

.section-4-bg {
    background: linear-gradient(to bottom, rgb(219,232,245) 0%, rgb(27,28,59) 97%);
    height: 100%;
    width: 100%;
}

.nosotros-bg {
    background: linear-gradient(to bottom, rgb(130,154,179) 0%, rgb(219,232,245) 50%);
    height: 100%;
    width: 100%;
}

.value {
    font-family: Nunito;
    font-size: 32px;
    font-weight: 700;
    line-height: 43.65px;
    letter-spacing: 0.03em;
    text-align: left;
    color: rgba(28, 24, 53, 1);
}

.content {
    position: relative;
    flex: 1;
    width: 100%;
    height: auto; /* Let the height adjust based on content */
    z-index: -1;
}

.section {
    display: none; /* Initially hide all sections */
    position: relative;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.section.visible {
    display: block; /* Show the active section */
    opacity: 1;
    visibility: visible;
    position: relative;
}

.general-background {
    background: radial-gradient(circle at left, rgb(45, 83, 123) 0%, rgba(21,40,60,0.2) 25%),
                radial-gradient(circle at top right, rgb(45, 83, 123) 0%, rgba(21,40,60,0.2) 25%);
    background-color: rgba(19, 34, 50, 1);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 100vh;
}

footer {
    background-color: #000;
    padding: 1rem;
    text-align: center;
    width: 100%;
    position: relative;
}

.card {
    position: relative;
    width: 300px; /* Adjust the width of the card as per your design */
    height: 320px; /* Adjust the height of the card */
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(182, 208, 233, 1);
    perspective: 1000px;
    cursor: pointer;
}

.card-background {
    position: absolute;
    top: 20px; /* Adjust top position as needed */
    left: 20px; /* Adjust left position to center the background */
    z-index: 1; /* Background stays behind */
}

.card-drop-shadow {
    box-shadow: 0 0 13px rgb(81,119,161);
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make sure the background image covers its container */
    filter: blur(2px); /* Apply blur */
    border-radius: 10px;
}

.card-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.foreground-image {
    padding-top: 30px;
    object-fit: contain; /* Keep aspect ratio intact */
    border-radius: 5px; /* Optional: add rounding */
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
}

.card-front {
    background-color: rgba(182, 208, 233, 1); /* Same as card background */
    pointer-events: none;
}

.card-back {
    background-color: rgba(81, 119, 161, 1); /* Back color */
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card.flip .card-inner {
    transform: rotateY(180deg);
}

.card-background,
.card-content {
    pointer-events: none; /* Makes these elements non-interactive */
}

.card-inner {
    pointer-events: auto; /* Ensures the whole card is clickable */
}