/* =======================================     Embed fonts  */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@1,300');
@font-face {
    font-family: "Serenity";
    src: url(./font/Serenity.otf);
}

/* =======================================     Settings for body */
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
    font-weight: 100;
    cursor: none !important;
}
html {
    scroll-behavior: smooth;
}
body {
    background: #F1F1F3; 
    cursor: pointer;
} 

/* =======================================     section */
#hero, #missionSolutions, #works, #contact {
    height: auto;
}

/* =======================================     Navbar settings */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding: 3rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: 50px;
    z-index: -1;
}
.header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: .5s;
}
.header:hover::after {
    left: 100%;
}
svg path {
    fill: #3D4B6C;
}   
.navbar a {
    font-size: 1rem;
    color: #3D4B6C;
    text-decoration: none;
    font-weight: 300;
    margin-left: 2.5rem;
}
#check { 
    display: none;
}
.icons {
    position: absolute;
    right: 15%;
    font-size: 2.8rem;
    color: #3D4B6C;
    cursor: pointer;
    display: none;
}
.nav-cta {
    padding: .7rem 1.5rem;
    border: 1px solid;
    background-color: transparent;
    box-shadow: none;
    /* border-radius: .3rem; */
}
.nav-cta:hover {
    background-color: #3D4B6C;
    color: white;
    border-color: transparent;
}

@media (max-width: 992px) {
    .header {
        padding: 3rem 15%;
    }
}
@media (max-width: 768px) {
    .cursor, .cursor2 {
        cursor: none;
    }
    .icons {
        display: inline-flex;
    }
    #check:checked~.icons #menu-icon {
        display: none;
    }
    .icons #close-icon {
        display: none;
    }
    #check:checked~.icons #close-icon {
        display: block;
    }
    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 1px;
        bottom: 1px;
        opacity: 0;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
        overflow: hidden;
        transition: .3s ease;
    }
    #check:checked~.navbar {
        height: 100vh;
        top: 0;
        z-index: -1;
        padding-top: 7%;
        opacity: 1;
    }
    .navbar a {
        display: block;
        font-size: 1.5rem;
        font-weight: 500;
        margin: 7rem 5rem;
        text-align: center;
        transform: translateY(-50px);
        opacity: 0;
        transition: .3s ease;
    }
    #check:checked~.navbar a {
        transform: translateY(0);
        opacity: 1;
        transition-delay: calc(.15s * var(--i));
    }
}
/* =======================================     Hero Section */
#hero {
    .hero_BG {
        background: url('./assets/heroBG.png') no-repeat center center / cover;
        z-index: -2;
        width: 100%;
        height: 100vh;
    
        .hero_container {
            display: flex;
            /* justify-content: flex-end; */
            justify-content: center;
            height: 100vh;
            width: 90vw;
            flex-direction: column;
            margin: auto;
            gap: 5em;
            padding: 7vh 10vw 5vh 10vw;
            
            .hero_text {
                overflow: hidden !important;
                display: flex;
                justify-content: center;
                flex-direction: column;
                flex-wrap: wrap;
                align-items: center;
                /* padding-bottom: calc(5vh + 3vw); */
            }

            h1 {
                font-family: 'Poppins';
                color: #3D4B6C;
                font-size: calc(1.2rem + 1.9vw);
                text-align: center;
                font-weight: 100;
                text-wrap: balance;
            }
            text {
                /* font-weight: 200; */
                font-weight: 300;
                font-family: 'Noto Serif Display', serif;
                font-style: italic;
            }
            
        }
        .cta_container {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* margin-top: 5vh; */

            button {
                width: 3rem; 
                height: 3rem;
                color: #3D4B6C;
                transition: 0.3s ease-in-out;

                path {
                    fill: white;
                }

            }
            button:hover {
                box-shadow: #000;
                z-index: 2;
                transform: scale(1.5);
                transition: 0.3s ease-in-out;
            }
            p {
                padding-top: 1em;
                text-align: center;
                color: white;
                font-weight: 100;
            }
        }
    }
}
/* =======================================     missionSolutions Section */
#missionSolutions {
    display: flex;
    margin: 3em 0;
    justify-content: center;
    height: auto;

    .mission_text {
        max-width: 65rem;
        h3 {
            text-align: center;
            margin: 3em auto 2em auto;
            font-size: calc(1.3rem + 2vw);
            font-weight: 100;
        }
        h4 {
            font-size: calc(1rem + .5vw);
            font-weight: 300;
            padding: 0 10vw;
            margin: 5rem 0 1rem 0;
        }
        p {
            font-size: calc(1rem + .2vw);
            padding: 0 10vw;
        }
    }
}
/* =======================================     Works Section */
#works {
    display: flex;
    margin: 3em 0;
    justify-content: center;
    height: auto;
   
    h2 {
        text-transform: uppercase;
        font-family: 'serenity';
        font-size: calc(2rem + 3vw);
        margin: 10rem 0 1rem 0;
        padding: 0 10vw;
    }
    p {
        font-size: calc(1rem + .2vw);
        padding: 0 10vw;
        max-width: 65rem;
        margin-bottom: 3em;
    }
    .works_container {
        max-width: 65rem;

        .web {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            padding: 0 2em;

            img {
                max-height: 17em;
                margin: 3em 0;
                padding: 0.5em;
            }
        }
        .brand {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
            align-content: center;
            padding: 0 7em;

            .brand1 {
                height: 4em;
            }
            .brand2 {
                height: auto;
                max-height: 5em;
            }
            .brand3 {
                height: 6em;
            }
            img {
                height: 5em;
                margin: 3em 0;
            }
        }
        .fonts {
            padding: 0 2em;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;

            .font2, .font3 {
                height: auto;
                max-height: 31em;
            }              
            .font4, .font5 {
                width: 100%;
            }
            img {
                padding: 0.5em;
            }
        }
        .buyFont {
            height: auto;
            padding: 10em 0;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

            ol {
                list-style-type: decimal !important;
                margin: 0 1em;
                font-size: calc(1rem + .2vw);
                padding: 0 10vw;

                li {
                    padding: 1em;
                }
            }
            h3 {
                font-size: calc(1rem + .5vw);
                font-weight: 300;
                padding: 0 10vw 1em 10vw;
            }
            button {
                border: 2px solid #000;
                background: transparent;
                padding: 1em 2em;
                font-size: 1.2rem;
                margin: auto;
            }
        } 
        .charity {
            height: auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            padding-bottom: 5em;
            font-size: calc(1rem + .2vw);

            h3 {
                font-size: calc(1rem + .5vw);
                font-weight: 300;
                padding: 0 10vw 1em 10vw;
            }
            p {
                svg {
                    height: 1.2em;
                    width: 2em;

                    path {
                        fill: #cb4135;
                    }
                }

            }
        }
    } 
}
/* =======================================     Contact Section */
#contact {
    background: url('./assets/contact_BG.jpg') no-repeat center center / cover;
    width: 100%;
    height: auto;
    color: white;
    display: flex;
    justify-content: center;

    .contact_container {
        display: flex;
        max-width: 105rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 4em 0;
        align-items: center;
        padding: 0 10vw;
        gap: 10vw;

        .left {
            display: flex;
            max-width: 20em;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            margin: 5em auto;

            h2 {
                font-size: calc(2rem + 1vw);
                font-weight: 300;
                text-wrap: balance;
            }
            p {
                font-size: calc(1rem + .2vw);
                font-weight: 100;
                text-wrap: balance;
                margin: 2em 0 0 0;
            }
        }
        .right {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: 2em;
            border: 3px solid white;
            width: 18em;
            justify-content: center;
            height: 24em;

            h2 {
                font-size: calc(1rem + .2vw);
            }
            .links {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 22vh;
                margin-top: 4em;

                a {
                    text-decoration: none;
                    font-style: none;
                    color: white;
                }
                button {
                    color: white;
                    font-size: 1rem;
                }                
            }
        }
    }
}
/* ======================================= Footer */
footer {
    font-family: 'Poppins';
    font-size: .5rem;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.15rem;
    word-spacing: 0.2rem;
    color: #000;
    text-align: center;
    height: 5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .footer {
        padding-bottom: 0rem;
    }
}
/* ======================================= Cursor */
.cursor, .cursor2 {
    pointer-events: none;
    z-index: 100;
}

.cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #cb4135; 
    border-radius: 50%;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    transition: .1s;
}
.cursor2 {
    position: fixed;
    width: 50px;
    height: 50px;    
    border: 1px solid #ee5c4f67;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .15s;
}


/* ======================================= Cookies */
.cookie-consent-popup {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    padding: 1rem;
    background-color: #fff;
    z-index: 10;
    display: none;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 50%;
    margin: auto;
    border-radius: 1rem;
}
.cookie-consent-popup.active {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.cookie-consent-popup p {
    margin: 0;
    padding: 0;
    font-size: .7rem;
    max-width: 21rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    a {
        display: inline; 
        padding: 0; 
        margin: 0; 
        text-decoration: none; 
        color: #000;
    }
    a:hover {
        text-decoration: none;
    }
}
.cookie-consent-popup button {
    padding: .7rem 2rem;
    color: #3D4B6C;
    cursor: pointer;
    font-size: .7rem;
    max-width: 7rem;
    border: 1px solid #3D4B6C;
    background-color: transparent;
    box-shadow: none;
}
.cookie-consent-popup button:hover {
    background-color: #3D4B6C;
    color: #FFF;
}

@media (max-width: 650px) {
    .cookie-consent-popup.active {
        width: 75%;
        margin: auto;
        border-radius: 1rem;
    }
}
/* ======================================= Privacy Policy */
#policy {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    padding: 0 25vw;

    #logo { 
        display: flex;
        margin: 6rem 0 7rem 0;
        justify-content: center;
    }
    h1 {
        color: #1F6F8B;
        font-size: calc(1.7rem + 3.75vw);
        padding-bottom: 3rem;
    }
    h2 {
        margin: 4em 0 1em 0;
    }
    .Policy_body {
        width: 70;
        text-wrap: balance;
    }
    .return-button {
        padding: .7rem 1rem;
        color: #1F6F8B;
        cursor: pointer;
        font-size: .7rem;
        max-width: 14rem;
        border: 1px solid #1F6F8B;
        background-color: transparent;
        box-shadow: none;
        margin: 7em 0 5rem 0;
    }
}