@import url('https://fonts.googleapis.com/css2?family=Flow+Rounded&display=swap');
:root {
    --h-header: 3rem;
}
body {margin: 0;}

/* .section:first-of-type {
    min-height: 50vh;
} */
/* 
header>.logo+nav>ul>li*4>a:link

main>
section>h2+p+button.call-to-action^
section>h2+.option>.icon+h3+p^^
section>.left>h2+p+button^.right>img^^
section>ul.slider>li*8>.card


footer>.footer-nav>h3+.sitemap>ul*3>li*5>a:link
#copy-r+.water-mark 
    
*/

/*
header
.logo
nav
nav > ul 
nav > a:link

main
section
h2
p
button

.option
.icon
h3

.left
.right
.img

ul.slider
.slider .card


footer
.footer-nav
.sitemap
.sitemap ul 
.sitemap a:link

#copy-r
.water-mark 
*/



/*
header {}
.logo {}
nav {}
nav > ul {}
nav > a:link {}

main {}
section {}
h2 {}
p {}
button {}

.option {}
.icon {}
h3 {}

.left {}
.right {}
.img {}

ul.slider {}
.slider .card {}

footer {}
.footer-nav {}
.sitemap {}
.sitemap ul {}
.sitemap a:link {}

#copy-r {}
.water-mark {}
*/
/* *{
    outline: 1px dashed #fff8;
    outline: 1px dashed #0008;
} */
/* *{
    outline: 1px dashed #0638;
} */
/* p {
    font-family: 'Flow Rounded', cursive;
    font-size: 20px;
} */

/* ::-webkit-scrollbar { height: 0px; width: 10px; }
::-webkit-scrollbar-track { 
    background-color: #0000;
    box-shadow: inset 0 0 6px #0630;
    opacity: 0;
}
::-webkit-scrollbar-thumb { 
    background-color: #777f; 
    border-radius: 5px; 
    transition: background-color 200ms ease-in-out;
    box-shadow: 
    inset 2px 2px 4px #fffd,
    inset -2px -2px 4px #0638;
}
::-webkit-scrollbar-thumb:hover { background-color: #777a; } */

#section-1 h2 {
    color: #fff;
    text-shadow: 1px 1px 1px #1119;
}
h2, h3 {
    color: #063;
}

header, main {
    /* width: calc(100vw - 17px); */
    max-width: 100vw;
    /* width: 100vw; */
}
header, main, section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

header {
    box-sizing: border-box;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.logo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #063;
}
nav {
    margin: 0 1rem;
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: max-content;
}
nav li {
    margin: 0 .5rem;
}
a:link {
    text-decoration: none;
    color: #0a5;
}
a:link:hover {
    text-decoration: underline;
}
/* nav a:link {
    text-decoration: none;
    color: #38d;
} */
/* nav a:link:hover {
    text-decoration: underline;
} */

main {}
section {
    width: 100%;
    margin: 2rem 0;

    width: 95vw;
    margin: 2rem auto;
    overflow: hidden;
}
section:first-of-type {margin-top: 0rem;}
#section-1 {
    min-height: 50vh;
    background-image: linear-gradient(to bottom right, #3f9, #063);
    width: 100%;
}
#section-1 h2 {
    font-size: 32px;
}
#section-1 p {
    position: relative;
    text-align: center;
    /* background-color: #0633; */
    /* background-image: linear-gradient(to top left, #3f99, #0639); */
    color: #fff;
    text-shadow: 1px 1px 1px #1119;
    font-size: 18px;

    padding: .5rem;
    z-index: 1;
}
/* :root {--z-deg: -15deg;} */
#section-1 p {--z-deg: 2deg;}
#section-1 p::after {--rotateZ: calc(var(--z-deg) * -1);}
#section-1 p::before {--rotateZ: var(--z-deg);}
#section-1 p::after,
#section-1 p::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 120%; width: 120%;
    /* height: calc(80% + 1rem); width: calc(80% + 1rem); */
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    background-image: linear-gradient(to top left, #3f99, #0639);
    z-index: -1;
    mix-blend-mode: overlay;
    transition: transform 200ms ease-in-out;
}
#section-1 p::after {
    background-image: linear-gradient(to bottom right, #3f99, #0639);
}
#section-1 p::before {
    background-image: linear-gradient(to top left, #3f99, #0639);
}
#section-1 p:hover::after,
#section-1 p:hover::before {
    transform: translateX(-50%) translateY(-50%) rotate(var(--rotateZ));
}
#section-1:hover p::after,
#section-1:hover p::before {
    transform: translateX(-50%) translateY(-50%) rotate(var(--rotateZ));
}

h2 {}
p {
    /* max-width: 50ch; */
    /* max-width: 50vw; */
    /* width: 77ch; */
    /* max-width: 100%; */
    max-width: min(77ch, 100%);
    color: #021;
}
button {
    font-size: 20px;
    padding: .25em .5em;
    margin: .25em .5em;
    padding: .5em 1em;
    margin: 1em;
    border: 0;
    background-color: #063;
    color: #fff;
    transition: 
    background-color 200ms ease-in-out,
    color 200ms ease-in-out,
    box-shadow 200ms ease-in-out,
    text-shadow 200ms ease-in-out;
}
button.call-to-action {
    background-color: #fff;
    background-color: #0c6;
    background-color: hsl(150, 100%, 50%);
    background-color: #00ff80;
    background-color: hsl(150, 100%, 45%);
    background-color: hsl(150, 80%, 50%);
    color: #063;
    color: #fff;
    text-shadow: 1px 1px 1px #1119;
}
button:hover {
    background-color: #0c6;
    color: #fff;
    text-shadow: 1px 1px 1px #1119;
    box-shadow: 2px 2px 4px #1119;
}
button.call-to-action:hover {
    background-color: #fff;
    color: #063;
    /* box-shadow: 2px 2px 4px #1119; */
    /* background-color: #0c6; */
    text-shadow: 0px 0px 0px #0000;
    /* box-shadow: 2px 2px 4px #1119; */
}

.options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 2.5vw;
}
.option {
    width: 25vw;
    max-width: 200px;
}
.option {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
}
.card-description {}
.icon {
    min-height: 5rem;
    min-width: 5rem;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    background-color: hsl(90, 60%, 40%);
    margin: .5rem 1rem 1rem;
    
    transform: rotateY(0deg);
    transition: transform 800ms ease-in-out;
    transition: transform 800ms cubic-bezier(0.43, 1.5, 1, 1);
    transition: 
    border-radius 400ms cubic-bezier(0.43, 1.5, 1, 1) 900ms,
    transform 800ms cubic-bezier(0.43, 1.5, 1, 1);
}
.icon:hover {
    border-radius: 0%;
    transform: rotateZ(180deg);
    /* transform: rotateY(180deg); */
    transition: 
    border-radius 300ms cubic-bezier(0.43, 1.5, 1, 1),
    transform 800ms cubic-bezier(0.43, 1.5, 1, 1);
}
h3 {}
.option h3 {
    width: max-content;
    margin: 0 auto;
    margin: .5rem auto;
}

/* #section-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
}
.left, .right {
    height: 100%; width: 100%;
}
.left {padding: 2rem; box-sizing: border-box;}
.right {}
.img {
    height: 100%; width: 100%;
    min-width: 35vw;
    background-color: #93f;
    background-image: radial-gradient(circle at 50% 50%, #f93, #f93 50%, #f930 50%);
    background-color: #063;
    background-image: radial-gradient(circle at 50% 50%, #3f9, #0c6 50%, #0c60 50%);
}
.right-in .img {
    height: 8rem; width: 8rem;
    margin: 0 0 1rem 1rem;
    background-color: #93f;
    background-image: radial-gradient(circle at 50% 50%, #f93, #f93 50%, #f930 50%);
    background-color: #063;
    background-image: radial-gradient(circle at 50% 50%, #3f9, #0c6 50%, #0c60 50%);
} */


.slider {
    max-width: 95vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    overflow: scroll;
}
.slider::-webkit-scrollbar { height: 10px; width: 0px; }
.slider::-webkit-scrollbar-track { box-shadow: inset 0 0 6px #3690; }
.slider::-webkit-scrollbar-thumb { 
    background-color: #063; 
    border-radius: 5px; 
    transition: 
    background-color 200ms ease-in-out,
    box-shadow 200ms ease-in-out;
    box-shadow: 
    inset 1px 1px 2px #fff0,
    inset -1px -1px 2px #3f90;
}
.slider::-webkit-scrollbar-thumb:hover {
    /* background-color: #0c6;
    box-shadow: 
    inset 2px 2px 4px #fffd,
    inset -2px -2px 4px #0638; */

    box-shadow: 
    inset 2px 2px 4px #fffc,
    inset -2px -2px 4px #3f98;
}

.slider ul {
    counter-reset: li-counter;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
}
.slider li {
    /* counter-reset: section; */
    /* counter-reset: li-counter; */
    counter-increment: li-counter; 
    margin: .5rem;
}
.slider .card {
    position: relative;
    min-width: 5rem;
    min-height: 5rem;
    background-color: #722;
    background-color: #063;
    background-image: conic-gradient();
    background-image: conic-gradient( 
     #0c6 0deg 45deg, 
     #0c60 45deg 315deg, 
     #0c6 315deg 0deg);
    background-size: .5rem .5rem;
    transition: transform 200ms ease-in-out;
    transform: rotate(0deg);
}
.slider .card:hover {
    transform: rotate(10deg);
}
.slider .card::before {
    /* counter-increment: section; */
    /* counter-increment: li-counter; */
    /* content: "- " counter(section) " -"; */
    content: "- " counter(li-counter) " -";
    position: absolute;
    height: 100%; width: 100%;
    color: #fff;
    text-shadow: 1px 1px 1px #1119;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}

footer {
    margin: 1rem 0;
}
#footer-nav, .sitemap {
    display: flex;
    align-items: center;
    justify-content: center;
}
#footer-nav {
    width: max-content;
    /* margin: 0 auto; */
    flex-direction: column;
}
#footer-nav h3 {
    /* width: 100%;
    text-align: left; */
    margin: .5rem;
    width: 90%;
}
.sitemap {
    flex-direction: row;
    margin-bottom: 1rem;
}
.sitemap ul {}
/* .sitemap a:link {
    text-decoration: none;
    color: #38d;
}
.sitemap a:link:hover {
    text-decoration: underline;
} */
/* .sitemap a {
    font-family: 'Flow Rounded', cursive;
} */

#copy-r {
    margin: .5rem;
    color: #555;
    color: hsl(150, 15%, 35%);
    color: hsl(150, 30%, 30%);
}
.water-mark {
    display: none;
}

::marker {
    color: #021;
    color: #063;
}

/* ───────────────  ───────────────  ─────────────── */


section {
    width: 100%;
    margin: 2rem 0;
    
    width: 95vw;
    margin: 2rem auto;
}


.content {
    width: 90%;
    /* padding: 2rem;  */
    /* box-sizing: border-box; */
}
/* .left, .right {height: 100%; width: 100%;} */
/* .left {padding: 2rem; box-sizing: border-box;} */

.rl-in {}

.left-in {
    /* width: 50%;
    max-width: 50vw; */
    max-width: min(60ch, 100%);
}
.right-in {
    float: right;
}
.right-in .img {
    height: 8rem; width: 8rem;
    background-color: #063;
    background-image: radial-gradient(circle at 50% 50%, #3f9, #0c6 50%, #0c60 50%);
    
    height: 0rem; width: 0rem;
    margin: 0rem 0rem 0rem 1rem;
    padding: 12rem 3rem;
    padding: 25vh 10vw;
    padding: calc(30vh - 10vw) 25vw;
    padding: calc(45vh - 12vw) 20vw;
    transition: 
    margin 500ms ease-in-out,
    padding 500ms ease-in-out;
}

.right-in .img-s {
    /* Small Size */
    margin: 0rem 0rem 1rem 1rem;
    padding: 0rem 0rem;
}
.right-in .img-l {
    /* Large side Size */
    margin: 0rem 0rem 0rem 1rem;
    padding: 12rem 3rem;
    padding: 25vh 10vw;
}


@media (max-width: 740px){
    .left {width: max-content;}
    .right {display: none;}
    
    #section-3 button {margin: 0 auto;}
    .left-in {
        width: 100%;
        max-width: 100%;
    }
    .right-in .img {
        margin: 0rem 0rem 1rem 1rem;
        padding: 0rem 0rem;
        padding: 8vh 12vw;
        padding: 12vh 18vw;
    }
}
@media (max-width: 540px){    
    .left {width: 100%;}

    /* .right-in {display: none;} */
    .right-in .img {
        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem;
        padding: 0vh 0vw;
    }
    .left-in {
        width: 100%;
        max-width: 100%;
    }
}

#section-1 p {max-width: 60vw;}
@media (max-width: 740px){
    #section-1 p {max-width: 80vw;}
    #section-1 p::after,
    #section-1 p::before {
        height: 100%; width: 100%;
        /* height: calc(80% + 1rem); width: calc(80% + 1rem); */
    }
}


@media (max-width: 540px){
    .options {
        /* flex-direction: column; */
        grid-template-columns: repeat(1, 1fr);
    }
    .option {
        width: 100%;
        max-width: 80vw;
    }
    .option {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }
    .card-description {}
    
    /* #section-3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
    }
    .left {width: 100%;}
    .right {display: none;}
    p{max-width: 100%;} */

    p{max-width: 100%;}
    #section-1 p {max-width: 80vw;}

    #footer-nav {
        margin: 0 auto;
    }
    #footer-nav h3 {
        width: max-content;
    }
}