@font-face {
        font-family: 'Nexa';
        src: url(./font/NexaText-Trial-Regular.woff),
        url(./font/NexaText-Trial-Regular.woff2);
    }

    @font-face {
        font-family: 'Proxima';
        src: url(./font/Fontspring-DEMO-proximanova-regular.otf) format("opentype");
    }
    
    @font-face {
        font-family: 'Proxima';
        font-weight: bold;
        src: url(./font/Fontspring-DEMO-proximanova-bold.otf) format("opentype");
    }
    
    @font-face {
        font-family: 'Poppins';
        src: url(./font/Poppins-Regular.ttf);
    }

    * {
        margin: 0;
        padding: 0;
    }

    img {
        width: 100%;
    }

    body {
        background-color: #e3f2fd;
        width: 100%;
    }

    /* p {
        font-family: 'Proxima';
        font-size: 1.3em;
    } */

    h1 {
        font-family: 'Proxima';
        font-weight: bold;
    }

    /* Scroll Button */
    #scrollBtn {
        height: 50px;
        width: 50px;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: #2196f3;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
        font-size: 1em;
        opacity: 0;
        transition: all 0.3s;
    }

    #scrollBtn:hover {
        background-color: #64b5f6;
        transform: translateY(-5px);
    }

    /* Header */

    .header {
        width: 100%;
        height: 100vh;
        background-image: url(./img/header.jpg);
        background-size: cover;
        transition: all 0.3s;
    }

    nav {
        display: flex;
        justify-content: end;
        flex-direction: row-reverse;
    }

    nav .links {
        display: flex;
        justify-content: end;
        height: 50px;
        align-items: center;
        margin-right: 15%;
        color: white;
        transition: all 0.3s;
    }
    
    nav ul .nav-list-wrapper {
        display: flex;
        list-style: none;
        width: 50%;
        justify-content: start;
    }

    nav ul li {
        margin-left: 20px;
        transition: all 0.3s;
    }
    
    nav ul li a {
        font-family: 'Proxima';
        color: #42a5f5 !important;
        text-decoration: none;
        font-size: 1.2em;
    }

    nav ul li a:hover {
        color: white !important;
        /* font-size: 1.3em; */
        /* margin-right: 10%; */
        text-shadow: 5px 5px 15px #90caf9;
    }

    .menu-toggle {
        margin: 5% 0 0 5%;
        position: relative;
        display: none;
        flex-direction: column;
        justify-content: space-around;
        height: 20px;
    }

    .menu-toggle input {
        position: absolute;
        width: 40px;
        height: 28px;
        left: -6px;
        top: -5px;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .menu-toggle span {
        display: block;
        width: 28px;
        height: 3px;
        background-color: white;
        border-radius: 3px;
        transition: all 0.5s;
    }

    /* Hamburger animation */
    .menu-toggle span:nth-child(2) {
        transform-origin: 0 0;
    }

    .menu-toggle span:last-child {
        transform-origin: 0 100%;
    }

    .menu-toggle input:checked~span:nth-child(2) {
        background-color: #42a5f5;
        transform: rotate(45deg) translate(-3px, -1.5px);
    }

    .menu-toggle input:checked~span:nth-child(4) {
        background-color: #42a5f5;
        transform: rotate(-45deg) translate(-3px, 0px);
    }

    .menu-toggle input:checked~span:nth-child(3) {
        transform: scale(0);
    }

    header {
        color: white;
        display: grid;
        height: 75vh;
        justify-items: center;
        justify-content: center;
        align-content: center;
        transition: 0.3s ease-in-out;
    }

    header .header-line {
        display: block;
        background-color: white;
        width: 95%;
        height: 5px;
    }

    header p {
        width: 60%;
        font-family: 'Poppins';
    }

    .header .header-icon {
        display: grid;
        transition: all 0.3s;
    }

    .header .header-icon:hover {
        font-size: 1.2em;
    }

    .header .expand-btn{
        margin-top: 60px;
        color: black;
        place-self: center;
    }

    /* Our Story */
    .story {
        background-image: url(./img/bgStory.jpg);
        background-position: center;
        background-size: cover;
        height: 100vh;
        margin: 10% 15%;
        display: grid;
        grid-template-columns: 3.5fr 2.5fr 6fr;
        grid-template-rows: 1fr 2fr ;
        gap: 5px;
        place-content: center;
        justify-content: center;
    }

    .story .story-title {
        grid-area: 1 / 1 / 2 / 2;
        place-self: end center;
        display: grid;
    }

    .story .story-title h1 {
        font-family: 'Proxima';
        font-weight: bold;
        font-size: 2.5em;
        place-self: end;
    }

    .story .story-title::after {
        content: '';
        background-color: #1976d2;
        display: block;
        width: 47%;
        height: 5px;
    }

    .story .groups {
        grid-area: 1/2/2/3;
        align-self: end;
        font-size: 3.5em;
    }

    .story .text {
        justify-self: end;
        grid-area: 2/1/3/3;
        font-family: 'Poppins';
    }

    .story img {
        width: 70%;
        margin-top: 3em;
        grid-column: 3/4;
        grid-row: 1/3;
    }

    /* Mission Section */
    .mission-policy {
        height: 100vh;
        background-image: url(./img/bgMissionPolicy.png);
        background-size: cover;
        background-position: center;
        display: flex;
    }

    .mission-policy i {
        font-size: 3em;
    }

    .mission-policy .content-container {
        margin: 5% auto;
        width: 75%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 2.5fr;
    }

    .mission-title{
        /* margin: 5% 20% 0 5%; */
        grid-area: 1/1/2/2;
    }
    
    .policy-title{
        /* margin: 5% 10% 0 15%; */
        grid-area: 1/2/2/3;
    }

    .mission-text{
        grid-area: 2/1/3/2;
        font-family: 'Poppins';
    }
    
    .policy-text {
        grid-area: 2/2/3/3;
        font-family: 'Poppins';
    }

    /* Gallery */

    .gallery {
        height: auto;
    }

    .carousel-container {
        display: flex;
        align-items: center;
        margin: 5vh auto;
        width: 65%;
        height: auto;
        background-color: white;
        transition: all 0.3s;
        flex-direction: column;
    }
    
    .carousel-container h4 {
        margin: 1% auto;
        transition: color 0.5s;
        color: #2196f3;
        transition: all 0.5s;
    }

   .carousel-container h4:hover{
        cursor: pointer;
        color: black;
        text-shadow: 2px 2px 10px #1976d2;
    }

    .carousel-container .ship-info {
        display: grid;
        grid-template-columns: 2fr 1fr;
        margin: 2% 10%;
        width: 70%;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

    .carousel-container .ship-info #ship-type {
        font-size: medium;
        font-weight: 600;
    }

    .carousel-container .ship-info .type {
        margin-left: 0;
    }

    .carousel-container .ship-info .type-wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr;
        justify-content: center;
        /* align-items: center; */
    }

    .carousel-container .ship-info .other-ship-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 0;
    }

    .carousel {
        margin-top: 5%;
        width: 90%;
    }

    .carousel-container:hover {
        box-shadow: 5px 5px 30px grey;
    }

    /* Experience */

    .experience {
        margin-top: 5vh;
        height: 105vh;
    }

    .experience-title {
        font-family: 'Proxima';
        font-weight: bold;
        /* font-size: 2.5em; */
    }

    .experience-title::after{
        content: '';
        height: 5px;
        width: 20%;
        background-color: #1976d2;
        display: block;
        margin: 5px auto auto auto;
    }

    .experience .card-container {
        height: 60%;
        margin: 5% 10% 0 10%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
    }

    .experience .custom-card {
        font-family: 'Poppins';
        display: flex;
        align-items: center;
        font-size: 1em;
        width: 80%;
        height: 90%;
        flex-direction: column;
        padding: 2%;
        background-image: url(./img/expCard.png);
        background-size: cover;
        background-position: center;
        transition: all 0.5s;
    }

    .experience .custom-card h1 {
        font-size: 3.5em;
    }
    
    .experience .custom-card:hover{
        font-size: 1.2em;
        width: 90%;
        height: 100%;
    }

    .experience .custom-card:hover h1{
        font-size: 3.7em;
    }

    /* Contact Us */
    .contact {
        height: 100vh;
        background-color: white;
        background-size: cover;
        background-position: center;
        display: flex;
        padding: 0 10% 0 10%;
        flex-direction: row;
        width: 100%;
    }
    
    .contact p{
        font-family: 'Poppins';
    }
    
    .contact a{
        font-family: 'Poppins';
        display: block;
        text-decoration: none;
        color: black;
        margin-bottom: 1em;
        transition: color 0.5s;
    }

    .contact a:hover {
        color: #3387dc;
    }

    .contact .form {
        display: flex;
        flex-direction: column;
        background-color: #90caf9;
        height: 640px;
        padding: 25px;
        /* align-items: space-around; */
        /* border-radius: 5%; */
        margin: 3% 0 0 2%;
    }

    .contact .form h1 {
        margin: 15px 0 15px 0;
    }

    .contact form label {
        margin: 5px 0 0 25px;
        font-size: 1em;
        color: white;
        cursor: pointer;
    }

    .contact form input, textarea {
        margin: 5px 0;
        padding: 10px 10px;
        width: 100%;
        outline: none;
        border: 1px solid #e3f2fd;
        display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -ms-transition: 0.2s ease all;
            -o-transition: 0.2s ease all;
            transition: 0.2s ease all;
            background-color: #e3f2fd;
    }

    .contact form input:focus, textarea:focus {
        outline: none;
        border-color: #42a5f5;
        background-color: #fff;
        box-shadow: 0 0 0 4px rgba(114, 153, 205, 10%);
    }

    button.submit {
        font-size: 1em;
        background: #1abc9c;
        color: white;
        padding: 0.7em 1em;
        padding-left: 0.9em;
        display: flex;
        align-items: center;
        border: none;
        overflow: hidden;
        transition: all 0.2s;
    }

    button.submit span {
        display: block;
        margin-left: 0.3em;
        transition: all 0.3s ease-in-out;
    }

    button.submit svg {
        display: block;
        transform-origin: center center;
        transition: transform 0.3s ease-in-out;
    }

    button.submit:hover .svg-wrapper {
        animation: fly-1 0.6s ease-in-out infinite alternate;
    }

    button.submit:hover svg {
        transform: translateX(1.2em) rotate(45deg) scale(1.1);
    }

    button.submit:hover span {
        transform: translateX(5em);
    }

    button.submit:active {
        transform: scale(0.95);
    }

    @keyframes fly-1 {
        from {
            transform: translateY(0.1em);
        }

        to {
            transform: translateY(-0.1em);
        }
    }

    .contact .contact-us {
        margin: 6% 0 0 5%;
        padding: 10px;
    }

    .contact::after{
        content: '';
        position: absolute;
        display: block;
        background-color: white;
        transform: rotate(45deg);
        height: 125px;
        width: 125px;
        margin: -25px 0 auto 36%;
        z-index: -1;
    }

    @media screen and (max-width: 1200px) {
        h1 {
            font-size: 2.3em;
        }
        p{
            font-size: 1.3em;
        }
    }

    @media screen and (max-width: 992px) {
        h1 {
            font-size: 2.1em;
        }

        p {
            font-size: 1.1em;
        }

        .mission-policy .content-container{
            margin-top: 10%;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1.2fr 1fr 3fr;
        }

        .mission-title {
            margin: 0;
            grid-area: 1/1/2/2;
            /* margin-right: 20%;
            margin-left: 5%; */
        }

        .mission-text {
            grid-area: 2/1/3/2;
        }

        .policy-title {
            grid-area: 3/1/4/2;
            /* margin-right: 20%;
            margin-left: 5%; */
        }

        .policy-text {
            grid-area: 4/1/5/2;
        }

        .gallery .carousel-container {
            box-shadow: 5px 5px 30px grey;
            width: 95%;
        }
        .experience{
            height: auto;
        }

        .experience-title {
            margin-top: 0%;
        }

        .experience .card-container {
            grid-template-columns: repeat(2, 2fr);
            grid-template-rows: 475px 400px;
            margin-left: 0 !important;
            margin-right: 0 !important;
            justify-content: center;
            align-content: center;
            align-items: center;
            margin: 10% 10% 0 10% ;
        }

        .experience .custom-card {
            background: #90caf9;
            border-radius: 5%;
            height: 90%;
        }

        .experience .custom-card h1 {
            margin: 5% 0 5% 0 !important;
        }

        .card-1 {
            grid-area: 1/1/2/2;
        }

        .card-2 {
            grid-area: 1/2/2/3;
        }
        
        .card-3 {
            grid-area: 2/1/3/3;
        }

        .contact {
            height: auto;
            margin-top: 10%;
        }

    }

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

        p {
            font-size: 1em;
        }

        h1 {
            font-size: 2em;
        }
        /* NAv */        
        nav {
            justify-content: center;
        }

        nav .links {
            display: flex;
            justify-content: center;
            height: 50px;
            align-items: center;
            margin: auto;
            color: white;
            transition: all 0.3s;
            width: 100%;
        }

        nav .links ul {
            padding: 0;
        }

        /* Our Story */
        .story {
            /* margin: -5% 15%; */
            grid-template-columns: 6fr 1fr 6fr;
            grid-template-rows: 0.8fr 2fr;
        }
        .story .story-title h1 {
            font-size: 2em;
        }

        .story .groups {
            font-size: 3em;
        }

        .story .text {
            font-size: 1em;
        }

        /* Mission Policy */
        .mission-policy {
            height: 115vh;
        }

        /* .mission-policy h1 {
            font-size: 2.5em;
        }

        .mission-policy-title {
            justify-content: center;
        }

        .mission-title {
            margin-right: 5%;
        }

        .policy-title {
            margin-left: 15%;
            margin-right: 10%;
        }

        .mission-text, .policy-text{
            font-size: 1em;
            text-align: justify;
        } */

        .gallery {
            height: auto;
        }

        /* Experience */

        .experience {
            margin-top: 5vh;
            height: auto;
            margin-bottom: 5%;
        }

        .experience-title {
            font-size: 2em;
        }

        .experience .card-container {
            display: flex;
            /* grid-template-columns: 1fr !important;
            grid-template-rows: repeat(3, 1fr) !important; */
            flex-direction: column;
            margin: 0% 15% 0 15%;
        }

        .experience .custom-card {
            background: #90caf9;
            margin: 5%;
            height: 90%;
            border-radius: 10px;
        }

        .experience .custom-card > h1 {
            margin: 5% auto;
        }

        .experience .custom-card p {
            margin: 0 auto;
        }

        /* Contact */
        .contact {
            margin-top: 0;
            margin-bottom: 0;
            height: auto;
            display: flex;
            flex-direction: column;
        }

        .contact > p {
            font-size: 1em;
        }

        .contact > h1 {
            font-size: 2em;
            margin: 0;
        }

        .contact .form {
            height: auto;
            margin: 5% auto ;
        }

        .contact .form h1 {
            margin: 15px auto 0 auto;
        }

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

        .contact::after {
            margin: -20px auto auto 35%;
        }
    }

    @media screen and (max-width: 600px) {
        p, a {
            font-size: 0.7em;
        }

        h4 {
            font-size: 1.2em;
        }

        h1 {
            font-size: 1.7em;
        }

        /* Nav */
        nav ul {
            position: absolute;
            right:0;
            top: 0;
            justify-content: start;
            height: 100vh;
            width: 90%;
            align-items: stretch;
            flex-direction: column;
            /* z-index: 1; */
            background-color:#e3f2fd;
            transform: translateX(-100%);
            transition: all 1s;
            opacity: 0;
        }

        nav ul .nav-list-wrapper{
            flex-direction: column;
            margin-left: 15%;
            margin-top: -5%;
        }
        
        nav ul li {
            margin-left: 15%;
            margin-top: 20%;
        }

        nav ul.slide {
            opacity: 1;
            transform: translateX(-15%);
        }

        .menu-toggle {
            display: flex;
        }

        /* Story */
        .story {
            margin: 10% 0;
            grid-template-columns: 4fr 1fr 2fr;
        }

        .story .text {
            margin-left: 5%;
        }

        /* Gallery */
        .carousel-container .ship-info {
            width: 80%;
        }

        .carousel-container .ship-info .type-wrapper {
            display: flex;
            flex-direction: column;
        }

        .carousel-container .ship-info .type-wrapper p {
            margin-bottom: 5px;
        }

        /* Gallery */

        .mission-policy .content-container {
            width: 90%;
        }

        /* Exp */
        .experience {
            height: auto;
            margin-top: 15vh;
        }

        .experience .card-container {
            margin: 0% 0 0 0;
        }

        /* Contact */
        .contact {
            height: auto;
            margin: 10% 0 0 0;
            padding: 0;
        }

        .contact .form {
            margin-top: 10%;
            height: auto;
            width: 100%;
            grid-template-rows: 0.1fr 1.5fr;
        }

        .contact h1{
            margin: 0;
        }

        .contact .contact-us {
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0 5%;
        }
        
        .contact-us .contact-info {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
            margin: 0 0 5% 0;
        }

        .contact-us .contact-info .contact-links {
            grid-area: 1/1/2/2;
            display: flex;
            flex-direction: row;
            margin-right: 0.5em;
        }

        .contact-us .contact-info .contact-text {
            grid-area: 2/1/3/2;
            display: flex;
            flex-direction: row;
        }

        .contact-info p {
            margin: 0 2% 0 0;
        }

        .contact-info a {
            margin: 0 2% 0 0;
        }

        .contact::after {
            content: '';
            position: absolute;
            display: block;
            background-color: white;
            transform: rotate(45deg);
            height: 125px;
            width: 125px;
            margin: -25px auto auto 25%;
            z-index: -1;
        }

    }