@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');

@layer base {
    body {
        @apply m-0 p-0 leading-normal tracking-normal bg-cover bg-fixed;
    }
    h1 {
        @apply relative text-3xl text-center md:text-start lg:text-5xl block px-4 py-4 font-[1000] text-black z-20;
    }
    p {
        @apply block text-center md:text-start px-4 py-4 text-lg lg:text-xl text-gray-600;
    }
}
@layer components {
    .nav-bar {
        @apply bg-white border-gray-200 fixed -mt-6 h-24 lg:h-32 pt-7 w-full shadow-lg z-30;
    }
    .nav-box {
        @apply max-w-1200 w-19/20 flex flex-wrap items-center justify-between mx-auto p-4;
    }
    .fully-logo {
        @apply flex items-center pr-6 text-green-700 mt-2 no-underline hover:no-underline font-black text-2xl lg:text-5xl;
    }
    .fully-btn {
        @apply text-white bg-fully-green hover:bg-green-800 transition-colors duration-300 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-md text-sm px-4 py-2 text-center mr-3;
    }
    .fully-btn-1 {
        @apply text-white ml-4 bg-fully-green hover:bg-green-800 transition-colors duration-300 focus:ring-4 focus:outline-none font-medium rounded-md text-xs lg:text-base px-4 py-2 text-center mb-1 mr-3;
    }
    .nav-menu-li {
        @apply block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent transition-colors duration-300 focus:outline-none md:border-0 hover:text-green-800 p-0;
    }
    .mobile-menu {
        @apply absolute flex-col transition-colors duration-300 items-center rounded-lg self-end py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md;
    }
    .banner-box {
        @apply z-10 hidden md:block md:absolute -mt-10 ml-8;
    }
    .main-div {
        @apply w-full;
    }
    .inner-div-1 {
        @apply w-full flex min-h-fit;
    }
    .inner-div-2 {
        @apply my-0 w-full mx-auto;
    }
    .inner-div-3 {
        @apply block md:flex justify-center items-center text-white py-11 mx-auto max-w-1200 w-19/20;
    }
    .inner-div-4 {
        @apply md:w-2/5;
    }
    .banner-content {
        @apply text-green-700 text-xs lg:text-base inline-block mx-3;
    }
    .banner-fig {
        @apply md:w-3/5 block md:flex;
    }
    .logo {
        @apply flex w-24 md:w-36 rounded-full;
    }
    .main-ref {
        @apply max-w-1200 w-19/20 mx-auto my-10 shadow-xl rounded-3xl;
    }
    .inner-ref-1 {
        @apply w-full rounded-3xl bg-opacity-25 min-h-fit;
    }
    .inner-ref-2 {
        @apply my-0 mx-auto w-11/12;
    }
    .inner-ref-3 {
        @apply text-white items-end py-11;
    }
    .inner-ref-text {
        @apply text-black mx-auto my-4;
    }
    .ref-logo {
        @apply mx-auto flex items-center justify-evenly flex-wrap mb-6;
    }
}

html {
    scroll-behavior: smooth;
  }

.w-200 {
    width: 40rem;
}
/* Hamburger Menu */
.hamburger {
    cursor: pointer;
    width: 24px;
    height: 24px;
    transition: all 0.25s;
    position: relative;
    /* transform: rotate(0);
    transition: all 0.5s; */
}
.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 2px;
    transform: rotate(0);
    background: #000;
    transition: all 0.5s;
}
.hamburger-middle {
    transform: translateY(7px);
}
.hamburger-bottom {
    transform: translateY(14px);
}
.open {
    transform: rotate(90deg);
    transform: translateY(0px);
}

.open .hamburger-top {
    transform: rotate(45deg) translateY(6px) translate(6px);
}
.open .hamburger-middle {
    display: none;
}
.open .hamburger-bottom {
    transform: rotate(-45deg) translateY(6px) translate(-6px);
}
/* Reset. */
* {
    box-sizing: border-box;
}

/* Panels. */
.splitview {
    position: relative;
    width: 100%;
    min-height: 45vw;
    overflow: hidden;
}

.panel {
    position: absolute;
    width: 100vw;
    min-height: 45vw;
    overflow: hidden;
}

    .panel .content {
        position: absolute;
        width: 100vw;
        min-height: 45vw;
        color: #FFF;
    }

    .panel .description {
        width: 25%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
    }

    .panel img {
        box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
        width: 35%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


.bottom {
    background-color: rgb(44, 44, 44);
    z-index: 1;
}

    .bottom .description {
        right: 5%;
    }

.top {
    background-color: #3c7e72;
    z-index: 2;
    width: 50vw;

    /*-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);*/
}

    .top .description {
        left: 5%;
    }

/* Handle. */
.handle {
    height: 100%;
    position: absolute;
    display: block;
    background-color: rgb(253, 171, 0);
    width: 5px;
    top: 0;
    left: 50%;
    z-index: 3;
}

/* Skewed. */
.skewed .handle {
    top: 50%;
    transform: rotate(30deg) translateY(-50%);
    height: 200%;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
}

.skewed .top {
    transform: skew(-30deg);
    margin-left: -1000px;
    width: calc(50vw + 1000px);
}

.skewed .top .content {
    transform: skew(30deg);
    margin-left: 1000px;
}

/* Responsive. */
@media (max-width: 900px) {
    body {
        font-size: 75%;
    }
}