/**
 * @ Author: ICT SOCIETY OF DHARMARAJA COLLEGE
 * @ Create Time: 2024-08-25 00:04:14
 * @ Modified time: 2025-05-12 18:21:15
 */

@font-face {
    font-family: "Old-English";
    src: url(../../fonts/oldenglish.ttf);
}

* {
    margin: 0;
    padding: 0;
    font-family: poppins,sans-serif;
}

html {
    scroll-behavior: smooth;
}

a {
    color: rgb(0, 0, 0);
    text-decoration: none;
}



.explore {
    display: block;
    padding: 0.5em 1.8em;
    margin: 2em 0 1em 0;
    width: fit-content;
    font-size: 1.5em;
    letter-spacing: 0.2em;
    border-radius: 2em;
    border: 2px solid black;
    font-weight: 500;
    background-color: white;
    cursor: pointer;
    transition: 0.6s;
}

.explore:hover {
    background-color: black;
    color: white;
    filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0));
    backdrop-filter: blur(35px) saturate(8);
}

.explore-hero {
    display: block;
    padding: 0.5em 1.8em;
    margin: 2em 0 1em 0;
    width: auto;
    font-size: 1.5em;
    letter-spacing: 0.2em;
    border-radius: 2em;
    border: 2px solid black;
    font-weight: 500;
    background-color: transparent;
    color: rgb(0, 0, 0);
    cursor: pointer;
    transition: 0.6s;
}

.explore-hero:hover {
    background-color: black;
    color: white;
    filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0));
    backdrop-filter: blur(35px) saturate(8);
}

.explore-Footer {
    display: block;
    padding: 0.5em 1.8em;
    margin: 2em 0 1em 0;
    width: fit-content;
    font-size: 1.5em;
    letter-spacing: 0.2em;
    border-radius: 2em;
    border: 2px solid rgb(255, 255, 255);
    font-weight: 500;
    
    cursor: pointer;
    transition: 0.6s;
}
.explore-Footer:hover {
    filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
    backdrop-filter: blur(35px) saturate(8);
}

.explore-ttp {
    display: block;
    padding: 0.5em 1.8em;
    margin: 2em 0 1em 0;
    width: fit-content;
    font-size: 1.5em;
    letter-spacing: 0.2em;
    border-radius: 2em;
    border: 2px solid rgb(255, 255, 255);
    font-weight: 500;
    
    cursor: pointer;
    transition: 0.6s;
}

#main {
    max-width: 105vw;
    overflow-x: hidden;
}

#hero > a.logo,
#banner > a.logo {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 21;
    & > img {
        height: 65px;
    }
}

#header {
    padding: 7px 8px;
    padding-left: 10px;
    width: 35vw;
    max-width: 500px;
    min-width: 320px;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    border-bottom-left-radius: 30px;
    z-index: 20;
    background-color: #000;
    &::before,
    &::after {
        position: absolute;
        height: 51px;
        width: 41px;
        top: 0;
        left: -40px;
        display: block;
        content: "";
        background-image: radial-gradient(at 3% 100%, transparent 40px, black 42px);
        pointer-events: none;
    }

    &::after {
        top: 69px;
        left: auto;
        right: 0;
    }

    & > section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;

        &::after {
            content: "";
            display: block;
            position: absolute;
            right: 79px;
            border-radius: 60%;
            top: 15px;
            height: 38px;
            aspect-ratio: 1/1;
            background: url(../media/search.png);
            background-size: cover;
        }

        & > input {
            display: inline-block;
            width: 100px;
            border: none;
            height: 49px;
            border-radius: 3em;
            color: black;
            padding: 0.5em 1em;
            font-size: 1.2em;
            flex-grow: 1;
        }

        & > #menu-btn {
            height: 25px;
            width: 24px;
            padding: 10px;
            top: 0;
            padding: 15px;
            right: 0;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;

            & > i {
                transition: 0.6s ease-in-out;
                transform-origin: 50% 50%;
                height: 4px;
                margin-top: 6px;
                border-radius: 5px;
                width: 100%;
                background-color: #000000;
                display: block;

                &:nth-child(1) {
                    margin-top: 0;
                }
            }
        }
    }

    & > ul {
        display: flex;
        flex-direction: column;
        max-height: 0px;
        overflow: hidden;
        transition: 0.6s ease;
        border-radius: 1em;

        & > li {
            display: block;
            padding: 1em 2em;

            & > a {
                color: rgb(255, 255, 255);
            }
        }
    }
}

#header.open {
    & > section > #menu-btn > i {
        &:nth-child(1) {
            transform: translateY(10px) rotate(45deg);
        }
        &:nth-child(2) {
            transform: rotate(-45deg);
        }
        &:nth-child(3) {
            opacity: 0;
        }
    }

    & > ul {
        max-height: 500px;
    }
}

#features > section {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 90dvh;

    /* Two fold */
    & > div {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        max-width: 40vw;
        text-align: center;

        & > h2 {
            padding-bottom: 0.3em;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: capitalize;
            font-size: 3.5em;
            font-family: "Old-English";
        }

        & > p {
            font-size: 1.3em;
            font-weight: 400;
            max-width: 500px;
            color: #292929;
        }
    }

    & > section {
        min-height: 60%;
        position: relative;
        min-width: 40%;
        --card-move: 30px;
        & > img {
            margin: 10px;
            min-width: auto;
            max-width: 250px;
            height: 60vh;
            aspect-ratio: 1/2.7;
            background-color: beige;
            box-shadow: 3px 3px 20px 2px rgba(0, 0, 0, 0.5);
            border-radius: 1em;
            object-fit: cover;
            opacity: 0;
            transition: 1s;
            transform: translateY(-30px);
            &:nth-child(even) {
                transform: translateY(30px);
            }
        }
    }

    &:nth-child(even) {
        flex-direction: row-reverse;
    }

    & > section.rev > img {
        opacity: 1;
        transform: translateY(var(--card-move));
        &:nth-child(even) {
            transform: translateY(calc(-1 * var(--card-move)));
        }
    }
}

footer {
    background-color: black;
    color: white;
    padding-top: 50px;
    & > hr {
        border: none;
        height: 0.4em;
        width: 80%;
        background-color: rgb(87, 87, 87);
        border-radius: 0.2em;

        margin: auto;
    }

    & > h5 {
        text-align: center;
        padding: 2em;
        font-weight: 500;
        color: rgb(180, 180, 180);
    }
    & > section {
        padding: 30px 0;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        

        & > div {
            min-width: 200px;
            & > img {
                width: 250px;
                filter: drop-shadow(0 0 0.05em rgb(255, 255, 255));
                backdrop-filter: blur(20px) saturate(0);
            }
            & > p {
                font-weight: 500;
                color: rgb(185, 185, 185);
                font-size: 0.99em;
                max-width: 370px;
            }
            & > a{
                filter: drop-shadow(0 0 0.5em rgb(255, 255, 255));
                backdrop-filter: blur(20px) saturate(0);

            }
            & > ul {
                list-style-type: none;
                & > li {
                    text-align: left;
                    line-height: 2em;
                    margin: 0.1em 0;
                    & > img {
                        height: 1.1em;
                        width: 2.2em;
                        object-fit: contain;
                        vertical-align: middle;
                        padding: 0.45em;
                        padding-right: 0.8em;
                        
                    }
                }
            }

            & > section {
                display: flex;
                & > a {
                    display: block;
                    margin: 20px 20px 0 0;
                    & > img {
                        height: 30px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1250px) {
    div#features > section {
        flex-direction: column-reverse;
        height: fit-content;

        &:nth-child(even) {
            flex-direction: column-reverse;
        }

        & > section {
            padding: 3em 0;
            /* & > img {
                width: 15vw;
            } */
        }
    }
}

/* Tablet */
@media screen and (max-width: 860px) {
    footer > section {
        flex-direction: column;
        gap: 15px;
        & > img{
            margin: 10px;
        }
        & > div {
            width: fit-content;
            margin: auto;
            text-align: center;
            &:nth-child(3) {
                margin: auto;
                display: flex;
                padding: 0 1.5em;
                width: 100%;
                max-width: 400px;
                box-sizing: border-box;
                justify-content: space-between;
            }
            & > div {
                text-align: left;
            }
            
            /* socal icons */
            & > section {
                justify-content: space-evenly;
                & > a {
                    margin: 10px 12px 0px 0px;
                }
            }
        }
    }
}

/* Mobile */
@media screen and (max-width: 670px) {
    header#header {
        width: 100%;
        border-radius: 0px;
        background-color: white;
        padding: 25px;
        padding-top: 15px;
        &::before,
        &::after {
            display: none;
        }

        & > section {
            justify-content: flex-end;

            & > input,
            &::after {
                content: none;
                display: none;
            }
        }
        & > ul {
            background-color: #0002;
            & > li > a {
                color: #000;
            }
        }
    }

    #header.open > ul {
        margin-top: 20px;
    }

    #lnd > a.logo,
    #banner > a.logo {
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        & > img {
            height: 45px;
        }
    }

    div#features > section {
        height: fit-content;
        padding: 1em 0;

        & > section {
            margin-bottom: 1em;
            --card-move: 19px;

            & > img {
                height: unset;
                filter:drop-shadow(0.3rem rgba(0, 0, 0, 0.3)); 
                width: 20vw;
                min-width: 100px;
                border-radius: 1em;
            }
        }

        & > div {
            max-width: 80vw;
            & > h2 {
                font-size: 2em;
            }
            & > p {
                font-size: 1em;
            }
        }
    }

    footer {
        position: relative;
        &::before {
            content: "";
            display: block;
            position: absolute;
            height: 4px;
            border-radius: 2px;
            width: 5em;
            background-color: #a9a9a9;
            top: 2em;
            left: calc(50% - 2.5em);
        }
    }
}