:root {
    --colorPrimario: #e6e6e6;
    --colorPrimarioVariante: #808080;
    --colorSecundario: #0071bc;
    --colorTerciario: #002c70;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat";
}
p, span, a {
    font-family: "Manrope"
}

header {
    width: 100%;
    display: flex;
    justify-content: center;
}
.header-wrapper {
    width: 100%;
    padding: 2.5rem 15vw;
    background-color: #e6e6e6;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    z-index: 999;
}
.header-wrapper > img {
    height: 8rem;
    width: auto;
}
header nav {
    display: flex;
    align-items: center;
    gap: 2.5vw;
}
header nav a {
    color: #808080;
    text-decoration: none;
    font-size: 1.4rem;
}
header nav a.active {
    color: #0071bc;
}

.hamburger-menu-icon {
    display: none;
    max-width: 6rem;
    padding: 1.5rem;
    height: auto;
    transition: all 0.3s;
}
.hamburger-menu-icon.active {
    background-color: #d0d0d0;
}
.navmenu-dropdown-content {
    padding-bottom: 3vh;
    display: flex;
    background-color: #e6e6e6;
    position: absolute;
    width: 100%;
    top: -100vh;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    z-index: 5;
    transition: top 0.8s;
}
.navmenu-dropdown-content.visible {
    top: 100%;
}
.navmenu-dropdown-content a {
    color: #000;
    text-decoration: none;
    font-size: 1.8rem;
    text-align: center;
    font-weight: 500;
    padding: 3vh 5vw;
}
@media only screen and (max-aspect-ratio: 940/1030) {
    header {
        position: relative;
    }
    .header-wrapper {
        justify-content: space-between;
    }
    header nav {
        display: none;
    }
    .hamburger-menu-icon {
        display: flex;
    }
}

/*hero section*/
.hero-section {
    background-image: url('./res/tuna-herobg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 0 15vw;
    display: flex;
    flex-direction: column;
    gap: min(20vh, 12rem);
}
.hero-section > img {
    margin: 0 auto;
    margin-top: 3rem;
    max-width: 90%;
    max-height: 25vh;
}
.hero-text {
    background: linear-gradient(to top, rgba(0, 44, 112, 0.8), rgba(0, 44, 112, 0));
    padding: 3.5rem 2.5rem;
    width: min(100%, 550px);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.hero-text h2 {
    color: #e6e6e6;
    font-size: 3.5rem;
    font-weight: 900;
    font-family: "Montserrat";
}
.hero-text p {
    color: #e6e6e6;
    font-size: 1.5rem;
    font-weight: 300;
}
.hero-text p strong {
    color: #fff;
    font-weight: 700;
}
.hero-text a {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 1.3rem 4.5rem;
    color: #002c70;
    background-color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    text-decoration: none;
    font-family: "Manrope";
    text-transform: uppercase;
}

/*discover section*/
.discover-section {
    width: 100%;
    padding: 7.5rem 15vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5rem;
}
.discover-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
}
.discover-heading h4 {
    font-size: 1.5rem;
    color: #808080;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}
.discover-heading h2 {
    color: #002c70;
    font-size: 4rem;
    font-weight: 900;
    text-align: center;
}
.discover-heading h2 strong {
    color: #0071bc;
    font-weight: 900;
}
.discover-heading p {
    width: min(100%, 500px);
    color: #808080;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
}
.discover-heading p strong {
    color: #0071bc;
    font-weight: 700;
}
.products-grid {
    width: 100%;
    display: flex;
    gap: 1.5vw;
}
.product-card {
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.product-card img {
    max-width: 100%;
    height: max(200px, 25vh);
    -o-object-fit: cover;
       object-fit: cover;
}
.product-card span {
    color: #4b4b4b;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
}
.discover-section > a {
    margin-top: 3rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 1.3rem 3.5rem;
    background-color: #0071bc;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}
@media only screen and (max-width: 1000px) {
    .products-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5rem 1rem;
    }
    .product-card {
        max-width: 200px;
    }
}
@media only screen and (max-width: 500px) {
    .product-card img {
        max-height: 15vh;
    }
}

/*aboutus section*/
.aboutus-section {
    background-image: url('./res/fish-background.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
}
.aboutus-wrapper {
    background: linear-gradient(to top right, #cce3f2, rgba(204, 227, 242, 0.2));
    width: 100%;
    padding-top: 7.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7.5rem;
}
.aboutus-heading {
    padding: 0 15vw;
    display: flex;
    flex-direction: column;
    gap: 6.5rem;
}
.aboutus-heading h4 {
    margin: 0 auto;
    font-size: 1.7rem;
    color: #0071bc;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}
.aboutus-main-text {
    width: min(100%, 750px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.aboutus-main-text h2 {
    color: #002c70;
    font-size: 4rem;
    font-weight: 900;
}
.aboutus-main-text h2 strong {
    color: #0071bc;
}
.aboutus-main-text p {
    color: #4b4b4b;
    font-size: 1.7rem;
    font-weight: 500;
}
.aboutus-main-text p strong {
    color: #0071bc;
    font-weight: 700;
}

.aboutus-description {
    padding: 0 15vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}
.aboutus-description p {
    width: min(90%, 600px);
    color: #808080;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
}
.aboutus-description img {
    max-width: 90%;
    max-height: 50vh;
}

.aboutus-allies {
    margin-bottom: 3rem;
    background-color: #fff;
    padding: 3.5rem 15vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.5rem 1.9vw;
}
.aboutus-allies img {
    min-width: 5rem;
    width: 6vw;
    height: auto;
}
@media only screen and (max-width: 850px) {
    .aboutus-allies {
        flex-wrap: wrap;
    }
}

/*certifications section*/
.certifications-section {
    background-image: url('./res/fish-bg-2.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}
.certifications-wrapper {
    background: linear-gradient(to bottom, #ffffff 70%, rgba(255, 255, 255, 0.3));
    width: 100%;
    padding: 7.5rem 15vw min(25vh, 20rem) 15vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5.5rem;
}
.certifications-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.5rem;
}
.certifications-heading h4 {
    margin: 0 auto;
    font-size: 1.7rem;
    color: #0071bc;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}
.certifications-heading h2 {
    color: #002c70;
    font-size: 4rem;
    font-weight: 900;
}
.certifications-heading h2 strong {
    color: #0071bc;
}

.certifications-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: 4rem 10vw;
}
.certifications-grid .left, .certifications-grid .right {
    width: 100%;
}
.certifications-grid .left p {
    font-size: 1.6rem;
    color: #4b4b4b;
    font-weight: 500;
}
.certifications-grid .left p strong {
    color: #0071bc;
    font-weight: 700;
}
.certifications-grid .right img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
@media only screen and (max-width: 840px) and (max-height: 799px) {
    .certifications-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
    }
    .certifications-grid .left, .certifications-grid .right {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .certifications-grid .right img {
        max-width: min(90%, 550px);
    }
}
@media only screen and (max-width: 1000px) and (min-height: 800px) {
    .certifications-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
    }
    .certifications-grid .left, .certifications-grid .right {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .certifications-grid .right img {
        max-width: min(90%, 550px);
    }
}

/*contact section*/
.contact-section {
    background-color: rgba(0, 44, 112, 1);
    width: 100%;
}
.contact-wrapper {
    background-image: url('./res/sea-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 7.5rem 15vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: min(15vh, 10rem);
}
.contact-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 8vw;
}
.contact-heading h2 {
    color: #fff;
    font-size: 4rem;
    font-weight: 900;
}
.contact-heading span {
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.contact-content {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}
.contact-content form {
    width: min(90%, 550px);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.contact-input {
    background-color: #fff;
    border: none;
    outline: none;
    padding: 1.4rem 1.8rem;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Montserrat";
}
.contact-input::-webkit-input-placeholder {
    color: #a5a5a5;
    font-weight: 700;
}
.contact-input::-moz-placeholder {
    color: #a5a5a5;
    font-weight: 700;
}
.contact-input::placeholder {
    color: #a5a5a5;
    font-weight: 700;
}
.contact-send-button {
    background-color: #0071bc;
    color: #fff;
    border: none;
    outline: none;
    width: fit-content;
    padding: 1.3rem 5rem;
    font-size: 1.8rem;
    font-weight: 700;
    font-family: "Montserrat";
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
}
.contact-send-button:hover {
    cursor: pointer;
    opacity: 0.8;
}

@media only screen and (max-width: 1250px) and (min-height: 800px) {
    .contact-heading {
        flex-direction: column;
        gap: 3.5rem;
    }
}
@media only screen and (max-width: 870px) and (max-height: 799px) {
    .contact-heading {
        flex-direction: column;
        gap: 3.5rem;
    }
}
@media only screen and (max-width: 500px) {
    .contact-heading h2 {
        font-size: 3rem;
    }
}


@media only screen and (max-aspect-ratio: 1440/1030) {
    .header-wrapper, .main-section {
        padding-left: 10vw;
        padding-right: 10vw;
    }
    .aboutus-section, .certifications-section, .contact-section {
        padding-left: 0;
        padding-right: 0;
    }
}

/*!Animaciones*/
.reveal-up{
    transform: translateY(20vh);
    opacity: 0;
}
.reveal-up.active-up{
    transition: transform 0.8s ease, opacity 0.8s ease, padding 0.5s, outline 0.5s;
    transform: translateY(0);
    opacity: 1;
}

.reveal-right{
    transform: translateX(-10vw);
    opacity: 0;
}
.reveal-right.active-right{
    transition: transform 0.8s ease, opacity 0.8s ease;
    transform: translateX(0);
    opacity: 1;
}

.reveal-left{
    transform: translateX(10vw);
    opacity: 0;
}
.reveal-left.active-left{
    transition: transform 0.8s ease, opacity 0.8s ease;
    transform: translateX(0);
    opacity: 1;
}