@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap');

:root{
    --ff-primary: 'Poppins', Heebo, sans-serif;

    /* Colors */
    --light-c: #edeef0;
    --main-light-c: #bcd9d7;
    --main-cold-c: #7ba9a9;

    --main-c: #425f4b;
    --main-warm-c: #10453b;
    --main-dark-c: #192e2f;

    --second-c: #A47052;
    --second-warm-c: #7F4C38 ;

    --partials-radius: .5rem;
    --child-radius: .25rem; /* parent radius ?rem - .25rem */

    --avg-gap: .5rem;
}

* {
    font-family: var(--ff-primary);
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    scroll-behavior: smooth;

}

*::after,
*::before{

    margin: 0;
    padding: 0;

}

body{
    width: 100%;
    position: relative;

    /* background: linear-gradient(140deg, var(--main-dark-c), var(--dark-c)); */
    background-color: #f6f6f6;
}

body, section {

    min-height: 100vh;
    min-height: 100svh;
}

img , video, picture{
    display: block;
    width: 100%;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
    -user-drag: none;


}

p{
    color: var(--sec-light-c);
    line-height: 1.6;
    font-size: clamp(1rem, calc(.5rem + .6vw), 1.5rem);
}

input[type=checkbox].hidden{
    display:none;
    position: absolute;
    visibility: hidden;
 }

header {
    display: grid;
    place-items: center;
    position: fixed;

    padding: .5rem;

    z-index: 30;
    width: 100%;
    height: 4rem;

    transition: top 150ms ease-in;

}

section{
    display: grid;
    grid-template-rows: 1fr auto;

    position: relative;

    background-color: var(--main-warm-c);
    box-shadow: 0 0 4px 6px var(--main-warm-c);
}

footer{
    display: grid;
    height: min-content;
}

/* text */

::-moz-selection { /* Code for Firefox */
    color: var(--main-warm-c);
    background: var(--main-light-c);
}

::selection {

    color: var(--main-warm-c);
    background: var(--main-light-c);
}

.context {

    font-size: clamp(.8rem, calc(.7rem + 1vw), 1rem);
    color: var(--main-dark-c);
}

/* class styling --------------------------*/

.nav-bar {

    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    position: relative;

    gap: .5rem;
    padding: .5rem;

    width: 100%;
    height: 3.5rem;

    border-radius: var(--partials-radius);
}


.logo-card {
    display: grid;
    place-items: center;
}

.logo-card .icon {
    display: grid;
    place-items: center;

    width: 100%;
}



.none:hover {

    /*box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.2) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;*/
    box-shadow: #7ba9a985 0px 3px 6px, #7ba9a940 0px 3px 6px;
}


.nav-bar,
.content-card {

    background-color: #7ba9a975;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(2px);
}

.main-nav,
.menu-nav,
.settings-nav,
.main-control {

    display: grid;

    width: 100%;
    height: 100%;

    gap: .5rem;
    transition: all 150ms ease-in;
    transition-duration: 150ms;
}

header .main-nav{

    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    position: relative;
}

.menu-nav,
.settings-nav{

    position: absolute;
    left: 0;

    border-radius: var(--partials-radius);

    height: max-content;
    width: 100%;

    background-color: #7ba9a975;
    padding: .5rem;

    visibility: hidden;
    z-index: -10;
    opacity: 0;

}

.menu-nav{

    grid-template-columns: repeat(2, minmax(4rem, 1fr));

    top: calc(100% + .5rem);
}

.settings-nav{

    top: calc(100% + 1rem);

    transform: translateY(100%);
    -webkit-transform: translateY(100%);
}

.settings-nav .nav-icon{

    display: grid;
    grid-auto-flow: column;
    place-items: center;
    gap: var(--avg-gap);
}




.nav-icon {
    display: grid;
    place-content: center;

    width: 100%;
    height: 100%;
    min-width: 2.5rem;
    min-height: 2.5rem;

    border-radius: var(--child-radius) ;
    background-color: var(--main-cold-c);
    text-decoration: none;
    color: var(--main-dark-c);
    font-size: 1.15rem;

    border-style: none;

}



.nav-icon:hover {
    transition: all 200ms;
    background-color: var(--main-light-c);
}

.main-control .nav-icon{

    background-color: var(--light-c);
    cursor: pointer;

    color: var(--main-dark-c);

}


.menu-nav .nav-icon,
.settings-nav .nav-icon{

    min-height: 2.5rem;
}


/* section style */

.main-section {

    background-color: transparent;
    box-shadow: 0 0 4px 6px var(--main-warm-c);
}

.main-section .main-view {
    display: grid;
    grid-template-columns: 1fr auto;

    height: 100%;
    padding: 4.5rem .5rem .5rem .5rem;
}


.main-view {
    display: grid;
    grid-auto-rows: auto;
    height: 100%;
    padding: .5rem;
}

.content-card{

    display: grid;

    border-radius: var(--partials-radius);
    height: 100%;
    padding: .5rem;
    position: relative;
}

.main-content {

    grid-template-rows: 1fr auto;

}

.main-context {

    display: grid;
    place-content: center;
}
.main-context .main {
    font-size: clamp(1.2rem, calc(1.2rem + 4vw), 4rem);
}
.main-context span {

    color: var(--main-warm-c);
}


.main-content .main-nav{

    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;

    gap: 1rem;

}
.main-content .navigate{

    width: fit-content;
    padding: .6rem calc(.5rem + 1vw);

    border-radius: var(--partials-radius);
    color: var(--main-dark-c);
    font-weight: 600;
    font-size: clamp(.8rem, calc(.6rem + 1vw), 1.2rem);

    cursor: pointer;
    text-decoration: none;

    color: var(--main-light-c);
    border: var(--main-light-c) 2px solid;

    height: fit-content;
    transition: all 150ms ease-out;

}

.main-content .primary-nav{
    color: var(--main-dark-c);
    background-color: var(--main-cold-c);

}

.main-content .navigate:hover {

    box-shadow: var(--main-light-c) 0px 2px 2px, var(--main-light-c) 0px 2px 6px -3px, var(--main-light-c) 0px -3px 0px inset;

}

.info-section .main-view .content-card{

    place-content: center;
    gap: 1.25rem;
    z-index: 5;
    position: relative;
}

.bg-branch{
    display: grid;
    justify-items: center;
    position: absolute;
    top: 0;

    width: 100%;
    height: 100%;


}

.img-branch{
    position: absolute;
    object-fit: cover;
    height: 100%;
}


.info-card{
    display: grid;
    place-items: center;
    gap: .25rem;

    border-radius: var(--partials-radius);
    width: 100%;
    height: fit-content;

    z-index: 5;
}


.info-card .card-img {
    border-radius: var(--child-radius);
    object-fit: cover;

    border: var(--main-warm-c) 2px solid;

    height: 100%;

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.info-card .space-img {
    display: none;
    visibility: hidden;
}


.info-card .card-context {

    display: grid;
    place-content: center;
    grid-auto-flow: column;

    padding: .5rem;
    gap: .25rem;

    width: 100%;
    height: 100%;
    font-weight: 600;
    color: var(--main-dark-c);
    font-size: clamp(.6rem, calc(.2rem + 2vw), 1.2rem);
    border-radius: var(--child-radius);

    background-color: #7ba9a960;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

}

.info-card .card-context .dot {

    width: calc(.5rem + 1vw);

    aspect-ratio: 1 / 1;
}


.under-construction .main-view .content-card{

    display: grid;
    place-content: center;


}

.under-construction .main-view .content-card .context{

    font-size: calc(.5rem + 2vw);
    font-weight: 600;

    padding: 1rem;
}



/* footer style */

footer .main-view{

    grid-template-rows: auto 1fr auto;
    gap: var(--avg-gap);
    background: linear-gradient(180deg, var(--main-warm-c), var(--main-dark-c));
    box-shadow: 0 0 8px 6px var(--main-warm-c);
    width: 100%;
}

footer .content-card{

    z-index: 20;
}

.general-nav {

    grid-template-columns: repeat(2, 1fr);
}

footer .logo-card .icon {
    display: grid;
    place-items: center;

    width: calc(6rem + 5vw);
}

.logo-card .icon .context{
    display: grid;
    place-items: center;
    font-size: calc(1rem + .8vw);
    width: 100%;
    font-weight: 600;
}


.social-media-nav {
    display: grid;
    place-content: center;
    gap: var(--avg-gap);

    height: 100%;
}

footer .social-media-nav {
    grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
}

.rights-card{
    display: grid;
    place-content: center;
}

.rights-card .context{

    color: var(--light-c);
}


/* back-grounds */

.bg-img{

    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -5;
    object-fit: cover;
}


.side-bg {

    display: grid;
    align-content: space-between;
    grid-template-columns: repeat(2, auto);


    position: absolute;
    width: 100%;
    height: 100%;
    overflow: clip;
}

.side-bg-img {
    z-index: 5;
}


.r-s{
    justify-self: end;
}


.lg {
    width: clamp(18rem, calc(8rem + 32vw), 24rem);
}

.mid {
    width: clamp(12rem, calc(6rem + 24vw), 16rem);

}

.sm {
    width: clamp(6rem, calc(4rem + 20vw), 10rem);
}

/* toggle classes */

.visible-card {

    opacity: 1;
    visibility: visible;
    z-index: 10;
}


/* leaf animations */

.leaves{
    display: grid;
    grid-auto-columns: min-content;
    grid-auto-flow: column;

    position:absolute;
    width:100%;
	height:100%;

}

.loader {
    display: grid;
}

.loader span {
    display: block;
    width: 80px;
    height: 80px;
	margin: -280px 40px 54px  -34px;

    z-index: 10;
}

.loader-l{

    -webkit-animation: loader-l 18s infinite  linear;
    -moz-animation: loader-l 18s infinite  linear;
}

.loader-r{

    -webkit-animation: loader-r 18s infinite  linear;
    -moz-animation: loader-r 18s infinite  linear;

}

.paused {
    visibility: hidden;
    animation-play-state: paused;
}



.l1 {
    position: absolute;
    top: 5%;
    left: -2rem;
}

.l2 {
    position: absolute;
    top: 20%;
    left: -3rem;
}

.l3 {
    position: absolute;
    left: 100%;

}


.l1 span {

    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
}
.l2 span {

    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
}
.l3 span {

    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
}

.loader img {

    width: clamp(3rem, calc(2rem + 5vw), 6rem);
}

@-webkit-keyframes loader-l {
  0% {
    width: 80px;
    height: 80px;
    opacity: 1;

	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    width: 80px;
    height: 80px;
    opacity: 1;

	-webkit-transform: translate(250px, 2000px) rotateZ(180deg);
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;

	-webkit-transform: translate(350px, 2500px) rotateZ(220deg);
  }
}
@-moz-keyframes loader-l {
    0% {
        width: 80px;
        height: 80px;
        opacity: 1;

        -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }
    75% {
        width: 80px;
        height: 80px;
        opacity: 1;

        -webkit-transform: translate(250px, 2000px) rotateZ(180deg);
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;

        -webkit-transform: translate(350px, 2500px) rotateZ(220deg);
    }
}

@-webkit-keyframes loader-r {
    0% {
        width: 80px;
        height: 80px;
        opacity: 1;

        -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }
    75% {
        width: 80px;
        height: 80px;
        opacity: 1;

        -webkit-transform: translate(-250px, 2000px) rotateZ(180deg);
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;

        -webkit-transform: translate(-350px, 2500px) rotateZ(220deg);
    }
}
@-moz-keyframes loader-r {
    0% {
        width: 80px;
        height: 80px;
        opacity: 1;

        -webkit-transform: translate(0, 0px) rotateZ(0deg);
    }
    75% {
        width: 80px;
        height: 80px;
        opacity: 1;

        -webkit-transform: translate(-250px, 2000px) rotateZ(180deg);
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;

        -webkit-transform: translate(-350px, 2500px) rotateZ(220deg);
    }
}


/* toggle status */

.on {

    color: var(--main-warm-c);
    border: var(--main-warm-c) 2px solid;
}

.off {

    color: rgb(79, 79, 79);
    border: gray 2px solid;

}



/* media --------------------------------------*/

@media screen and (min-width: 100rem) {

}

@media screen and (min-width: 900px) {

    /* sections */

    .info-card{

        width: calc(100% - 5vw);
    }

}

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

    /* header */

    header {

        width: 4rem;
        height: 100%;

    }

    .nav-bar,
    .main-nav,
    .menu-nav{
        grid-template-columns: none;
        grid-auto-flow: row;


    }

    .nav-bar {

        width: 3.5rem;
        height: 100%;
        grid-template-rows: auto .5fr 1fr auto;

    }

    .nav-bar nav:not(:first-child):not(:last-child)::before {
        display: grid;
        place-self: center;

        content: '';
        border-bottom: var(--main-dark-c) 1px solid;

        width: 55%;

    }

    .main-nav{

        width: 100%;

    }

    .main-control{
        display: none;
        visibility: hidden;
        z-index: -10;
    }

    .menu-nav,
    .settings-nav {

        position: static;
        top: auto;
        left: auto;

        visibility: visible;
        opacity: 1;
        z-index: 10;

        padding: 0;

        background-color: unset;

    }

    .menu-nav {

        grid-template-rows: 1px repeat(auto-fit, minmax(3rem , 1fr));
        height: 100%;
    }

    .settings-nav{

        grid-template-rows: 1px repeat(2, minmax(2.5rem, 1fr));

        transform: none;
        -webkit-transform: none;
    }


    .settings-nav .context{

        display: none;
    }


    /* sections style */

    .main-section .main-view {
        display: grid;
        padding: .5rem .5rem .5rem 4.5rem;
    }

    .main-view{

        padding: .5rem .5rem .5rem 4.5rem;
    }

    .info-section .content-card{

        justify-items: center;
        grid-auto-rows: 1fr;

        height: max-content;

    }

    .info-card{

        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        gap: 1rem;

        height: max-content;
    }

    .info-card .card-img {

        height: 28rem;
    }

    .info-card-swap .card-img{
        grid-column: 2 / 3;

    }

    .info-card .card-context {

        border-top: none;
        border-right: var(--main-warm-c) 2px solid;
    }

    .info-card-swap .card-context {
        border-right: none;
        border-left: var(--main-warm-c) 2px solid;
    }



    .info-card .space-img {

        visibility: visible;
        width: 40%;
        aspect-ratio: 1 / 1;
    }





    /* footer style */

    footer .main-view{
        grid-template-columns: .4fr 1fr auto;

        padding: .5rem .5rem 0 4.5rem;
    }


    .general-nav {

        grid-template-columns: repeat(4, 1fr);
        height: 2.5rem;
    }

    .social-media-nav {

        height: min-content;
    }

    .rights-card {

        grid-column: 1 / -1;
    }

}

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


    /* header */
    .settings-nav .nav-icon{
        justify-content: start;
        font-weight: 600;
        padding: 0 .5rem;
    }
}



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



    /* header */
    .nav-up {
        top: -4rem;
    }

    .nav-down {
        top: 0;
    }


    /* sections */

    .info-card .card-context {

        border-bottom: var(--main-warm-c) 2px solid;
    }


    /* footer */
    footer .main-view::after{
        display: grid;
        place-self: center;

        content: '';
        border-bottom: var(--main-cold-c) 1px solid;

        width: 55%;

    }
}

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

    /* footer */
    .logo-card {
        aspect-ratio: 1 / 1;
    }
}


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


    header .main-nav{

        position: absolute;
        top: calc(100% + .5rem);
        left: 0;

        border-radius: var(--partials-radius);

        height: max-content;
        width: 100%;

        background-color: #7ba9a975;
        padding: .5rem;


        visibility: hidden;
        opacity: 0;
        z-index: -10;

    }

    .main-control {
        grid-column: -1;
    }

    .menu-nav {
        top: calc(200% + 1rem);
    }

    .settings-nav{

        top: calc(200% + 1.5rem);
    }


    header .visible-card {

        opacity: 1;
        visibility: visible;
        z-index: 10;
    }
}

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

}