/* ==================== html ==================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root {
    /* border */
    --brd: 1px solid black;    
    --border: .1rem solid rgba(0, 0, 0, 0.3);

    /* color */
    --bg: #ffffff;
    --bgblue: #0b2149;
    --main-color: #d3ad7f;
    --txt: #1865f2;
    --black: black;

    --col1: #fc5f9b;
    --col2: #a362ea;
    --col3: #0ed095;
}
* {
    font-family: 'Poppins', Tahoma ,sans-serif;
    margin: 0; padding: 0;
    box-sizing: border-box;
    outline: none; border: none;
    text-decoration: none;
    text-transform: capitalize;
    user-select: none;
}
html {
    font-size: 75%;
    overflow-x: hidden;
    scroll-padding-top: 5rem;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
a, button {cursor: pointer !important;}
button {
    height: 4rem; width: 20rem;
    font-size: 1.5rem; text-align: center; font-weight: bolder;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; background: var(--txt);
    border: none; border-radius: 0.25rem;
    position: relative;
    cursor: pointer;
}
button:hover::after {
    content: " ";
    height: 100%; width: 100%;
    padding: 0.1rem;
    position: absolute;
    border: 0.2rem solid var(--txt); border-radius: 0.5rem;
}
/* menghilangkan efek biru pada saat klik link di mobile */
*, *:before, *:after {
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;
}
/* select text */
*:not(input)::selection {
    background: transparent; color: inherit;
}

/* =============== header =============== */
header {
    height: 5rem; width: 100%;
    padding: 2.5rem 7%;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between; align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--bg);
    border-bottom: var(--border);
    z-index: 100;    
}

/* navbar */
header .logo-content img {height: 4rem; width: 4rem; display: flex;}
header .logo-content h1 {
    margin-left: 0.75rem; font-size: 2rem; 
    font-weight: 400; opacity: 0.75;
    font-family: Impact;
}
header .navbar {
    display: flex; gap: 1rem;
}
header .navbar, .profil {font-size: 1.5rem; font-weight: bold;}

/* hover a */
header .navbar a, .profil a::after {position: relative;}
header .navbar a::after{
    content: ""; position: absolute;
    bottom: -3px; left: 0;
    width: 0; height: 0.2rem;
    background: var(--main-color);
    transition: width 0.3s ease;
}
header .navbar a:hover::after{width: 100%;}
header a:hover {color: var(--main-color) !important;}
header a:visited, header a {color: var(--txt);}

/* a active */
header .navbar a.active {color: var(--main-color) !important;}
header .navbar a.active::after {
    content: ""; position: absolute;
    bottom: -3px; left: 0;
    width: 100%; height: 0.2rem;
    background: var(--main-color);
    transition: width 0.3s ease;
}

header img {height: 4.75rem; cursor: pointer;}
/* header .navbar a.active::after{width: 100%;} */

/* =============== main =============== */
main {
    height: auto; width: 100%;
    padding: 5rem 7%;
    padding-bottom: 0;
    display: flex; flex-wrap: wrap;
}
/* main {padding: 5rem 0;} section, aside {padding: 0 7%;} */
.container {
    height: auto; width: 100%;
    display: flex;
}
.heading {
    height: 5rem; width: 100%;
    font-size: 2rem; font-weight: 700;
    line-height: 2.5rem; letter-spacing: 0.1rem;
    display: flex; justify-content: center; align-items: center;
    text-transform: capitalize; color: var(--black);
}
.heading span {
    margin-left: 1rem;
    color: var(--main-color);
}
h1.heading {text-transform: capitalize;}
p {text-transform: none;}

/* ========== home ========== */
.home {
    height: calc(100vh - 5rem);
    padding-bottom: 4rem;
    gap: 2.5rem;
    background: #fff;
}

.home div {
    height: 40rem;
    margin: auto;
    display: flex; flex-grow: 1;
}

.home .image {height: 100%; width: 40rem;}
.home img {
    height: 40rem; width: 40rem;
    object-fit: contain;
    padding: 2rem;
    margin: auto;
}

.home .content {
    height: auto; width: 100%;
    display: flex;
    flex-direction: column;
}
.home .content h1 {
    font-size: 2.8rem; font-weight: 500;
    line-height: 2.8rem; letter-spacing: 0.1rem;
}
.home .content p {
    font-size: 1.4rem;
    opacity: 0.9;
    line-height: 2.5rem;
    margin: 1.5rem auto;
}

.home .content .button {
    height: 6rem; width: 100%;
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap;
}

/* ========== about ========== */
.about {
    height: auto; width: 100%;
    padding: 2rem 0;
    display: flex; flex-direction: column;
}
.about .container {
    height: calc(100vh - 20rem);
    margin: 2rem 0 5rem;
    display: flex;
}

/* ===== about container-1 ===== */
.about .container:nth-child(2) {
    display: grid; flex-direction: row;
    grid-template-columns: repeat(3, calc(100% / 3));
    gap: 0; justify-content: flex-start;
}
.about .container:nth-child(2) .content {
    padding: 12.5% 2% 5% 2%;
    display: flex; justify-content: center; flex-direction: column;
    align-items: center; gap: 1rem 0; text-align: center;
}
.about .container:nth-child(2) .content img {
    height: 10rem; width: auto; padding: 10px;
    display: flex; object-fit: scale-down;
}
.about .container:nth-child(2) .content h1 {
    font-size: 1.6rem; font-weight: 400; opacity: 0.95;
}
.about .container:nth-child(2) .content p {
    font-size: 1.3rem; font-weight: 400;
    flex-grow: 1; opacity: 0.8;
}

/* ===== about container-2 ===== */
.about .container:nth-child(2)~.container {
    height: calc(100vh - 15rem);
    display: flex;
}
.about .container:nth-child(2)~.container img {
    height: auto; width: 55%; object-fit: contain;
}
.about .container:nth-child(2)~.container .content {
    display: flex; width: 45%;
    flex-direction: column; padding: 0 3rem; justify-items: center; justify-content: center;
}
.about .container:nth-child(2)~.container .content h2 {
    display: flex; height: auto; 
    opacity: 0.4; padding: 0.5rem 0 2rem 0;
}
.about .container:nth-child(2)~.container .content h1 {
    display: flex; height: auto; font-size: 3.2rem;
    opacity: 0.9; font-weight: 400; font-family: Tahoma; padding-bottom: 2rem;
}
.about .container:nth-child(2)~.container .content p {
    display: flex; height: auto; font-size: 1.35rem;
    opacity: 0.85; font-weight: 500; padding-bottom: 1rem;
}
.about .container:nth-child(2)~.container .content div {padding-top: 0.5rem;}

.about .container-2 {
    display: flex; flex-direction: column;
}
.about .container-2 h1 {
    display: flex; height: auto; font-size: 2.35rem; font-weight: 400;
    padding: 1.5rem 3rem; opacity: 0.95; text-transform: none;
}
.about .container-2 .content {
    display: flex; height: 20rem; font-size: 120%; display: flex;  flex-direction: row;
    width: 100% !important; padding: 0 0 !important;
    flex-grow: 0 !important; flex-direction: row !important; justify-content: right !important; align-items: center;
}
.about .container-2 .content div {
    width: auto; display: flex; flex-direction: column;
}
.about .container-2 .content div h1 {
    justify-content: flex-end; opacity: 0.95;  padding: 0;
    align-items: flex-end; letter-spacing: 0.15rem;
    font-family: 'Poppins' !important; font-size: 2rem !important; font-size: 1.75em !important;
}
.about .container-2 .content div h2 {
    justify-content: flex-end; opacity: 0.8; font-size: 1.2em;
}
.about .container-2 .content img {
    height: 100% !important; width: 8em !important; padding-left: 0.5rem;
}

/* ========== learn ========== */
.learn {
    flex-direction: column; padding: 0 10%; height: auto;  width: 100%;
}

/* ===== learn article-1 ===== */
.learn article {
    display: flex; flex-direction: column; gap: 2rem; position: relative; padding: 1.5rem 0;
}
.learn article .box {
    position: relative; background: #fff; width: 22.5rem; height: 7.5rem; margin: 0 auto;
    display: flex; justify-items: center; 
    cursor: pointer; box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.025); transition: 0.5s ease-in-out;
}
.learn article .box:nth-child(1) {transform: translateX(-70px);}
.learn article .box:nth-child(3) {transform: translateX(70px);}
.learn article:hover .box:nth-child(1) {transform: translateX(0);}
.learn article:hover .box:nth-child(3) {transform: translateX(0);}

.learn article .box::before {
    content: "";
    position: absolute; width: 0.35rem; height: 100%;
    background: var(--clr); transition: 0.5s ease-in-out;
}
.learn article .box:hover::before {
    width: 100%;
}
.learn article .box .content {
    position: relative; display: flex; align-items: center; height: 100%;
}
.learn article .box .content i {
    position: relative; min-width: 5rem; display: flex; transition: 0.3s ease-in-out;
    justify-content: center; align-items: center; color: var(--clr);
}
.learn article .box:hover .content i {color: #fff;}
.learn article .box .content div h3 {
    font-weight: 500; color: var(--clr); transition: 0.4s ease-in-out
}
.learn article .box .content div p {
    font-size: 0.9em; color: #999; transition: 0.3s ease-in-out
}
.learn article .box:hover .content div h3 {color: #fff;}
.learn article .box:hover .content div p {color: #fff;}

/* ===== learn article-2 ===== */
.learn article:nth-child(2)~article h1.heading {color: var(--clr); position: relative;}
.learn article:nth-child(2)~article h1.heading div {position: relative; transition: 0.5s ease-in-out;}
.learn article:nth-child(2)~article i {padding: 0 1rem;}
.learn article:nth-child(2)~article h1.heading span {color: var(--clr); transition: 0.5s ease-in-out;}
.learn article:nth-child(2)~article h1.heading::before {
    content: "";
    position: absolute; width: 0.35rem; height: inherit; left: 0;
    background: var(--clr); transition: 0.3s ease-in-out;
}

.learn article:nth-child(2)~article h1.heading:hover::before {width: 100%;}
.learn article:nth-child(2)~article h1.heading:hover {color: #fff;}
.learn article:nth-child(2)~article h1.heading:hover span {color: #fff;}

.learn article:nth-child(2)~article h1.heading.active::before {width: 100%;}
.learn article:nth-child(2)~article h1.heading.active {color: #fff !important;}
.learn article:nth-child(2)~article h1.heading.active span {color: #fff;}

.learn article:nth-child(2)~article ul {
    padding: 0.2rem 0rem 0 3rem; 
    display: flex; flex-direction: column; align-items: center;
}
.learn article:nth-child(2)~article ul li {
    font-size: 1.5rem; list-style: none; width: 100%;
    padding: 0 1rem; text-transform: none; font-weight: 500;
    display: flex; align-items: center; justify-content: space-between; gap: 0 1rem;
}
.learn article:nth-child(2)~article ul li::before {
    content: ""; position: absolute; left: 0;
    height: 1.5rem; width: 1.5rem; border-radius: 50%; background: var(--clr);
}
.learn article:nth-child(2)~article ul li label:hover {
    background: var(--clr);
}
.learn article:nth-child(2)~article ul li label {
    display: flex; flex-direction: column; font-size: 1.5rem; flex-grow: 1; padding: 1rem;
}
.learn article:nth-child(2)~article ul li input {
    height: 1.8rem; width: 1.8rem;
}

/* ========== comunity ========== */
.comunity {
    height: calc(100vh - 5rem- 5rem); width: 60%;
    padding: 0.5rem 0 3rem 0; flex-direction: column;
}
.comunity h1.heading {
    margin-bottom: 0.5rem; background: #8295BA; width: 98%;
}
.comunity h1.heading:hover {background: var(--main-color);}
.comunity h1.heading:hover span {color: #8295BA;}
.comunity h1 {margin-bottom: 0.5rem;}
.comunity .chanel {
    flex-grow: 1; height: 50vh; overflow-y: scroll; overflow-x: hidden;
}
.comunity .chanel .search {
    position: absolute; background: #eeefff; width: 50%;
}
.comunity .chanel div {display: flex; flex-direction: row;}
.comunity .chanel ul li {list-style: none;}

.comunity .chanel #search {width: 100%; margin: 1rem;}
.comunity .chanel label, .comunity .chanel i {
    display: flex; align-items: center; cursor: pointer; padding-right: 1rem;
}
.comunity .chanel label:hover, 
.comunity .chanel i:hover {color: var(--main-color);}

.comunity .chanel #names {flex-grow: 1; margin-top: 5rem;}
.comunity .chanel #names .chat li {
    display: flex; flex-direction: row; background: #fff; margin: 0.5rem 1rem; padding-right: 1rem;
}
.comunity .chanel #names div {display: flex; flex-direction: column; flex-grow: 1;}
.comunity .chanel #names div a {color: var(--txt); font-size: 1.35rem; display: flex; height: 2rem;}
.comunity .chanel #names i:hover {color: var(--main-color);}

.comunity .chanel #names img {height: 5rem; width: 5rem; padding: 0.5rem; border-radius: 50%;}

/* ========== aside ========== */
aside {
    height: calc(100vh - 5rem - 5rem); width: 39%;
    padding: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
}
a:visited {color: var(--black);}
aside h1.heading {margin-bottom: 0.5rem; background: #8295BA;}
aside h1.heading:hover {background: var(--main-color);}
aside h1.heading:hover span {color: #8295BA;}

/* ===== aside login ===== */
aside .content {
    height: 10%; width: 100%;
    padding: 0 5%; margin-bottom: 0.5rem;
    display: flex; flex-grow: 1;
}

aside .form {
    display: flex; flex-direction: column; flex-grow: 1;
    padding-bottom: 5%;
}
aside label {
    font-size: 1.35rem; padding-top: 0.5rem;
    display: flex; 
}
input {
    border: 1px solid lightgray; opacity: 0.8;
    height: 3rem; width: 100%;
    padding: 0 2%; font-size: 1.5rem;
    display: flex; border-radius: 0.5rem;
    background: #efefef; text-transform: lowercase;
}
input:focus {background: #8295BA;}
aside button {
    height: 3rem; width: 100%;
    margin: 5% auto 0 auto;
}
aside .login{
    display: flex; flex-direction: column;
}

/* ===== aside profill ===== */
aside .user{
    display: flex; flex-direction: column;
    padding: 1rem 2rem;
    display: none;
}

aside .user-1 {
    height: auto; width: 100%;
    display: flex; overflow: hidden;
}
aside .user-1 .content {
    display: grid; grid-template-columns: auto 100%; gap: 1% 5%;
    height: 100%;
}
aside .user-1 img {height: 9rem; border-radius: 50%;}
aside .user-1 i {margin: auto; transform: scale(0.9);}
aside .user-1 h1 {font-size: 1.5rem; font-weight: 400; flex-grow: 1; display: flex; align-items: center;}
aside .user-1 h2 {font-size: 1.2rem; font-weight: 400; flex-grow: 1; display: flex; align-items: center;}

/* =============== footer =============== */
footer {
    width: 100%; height: 30vh;
    display: flex; flex-direction: column;
    background: var(--bgblue);
}
footer h1 {color: #8295BA !important; opacity: 0.9; font-size: 1.4rem;}
footer .content {
    display: grid;
    grid-template-columns: repeat(4, 20%); padding: 0 2%;
    flex-grow: 1; justify-content: space-around;
}
footer .content .box {
    display: flex;
    flex-direction: column; 
}
footer .content .box a {
    color: #fff !important; opacity: 0.8; font-size: 1.3rem; transition: 0.2s ease-in;
}
footer .content .box a:hover {
    color: var(--main-color) !important; opacity: 1;
}


/* media quaries */
/* ==================== media quaries ==================== */
@media (max-width:991px) {
    html {font-size: 70%;}

    /* main */
    .home img {height: 30rem;}
    .about .container:nth-child(2)~.container img {width: 45%;}
    .about .container:nth-child(2)~.container .content {width: 55%;}
    .about .container-2 h1 {font-size: 2.1rem;}
    .about .container-2 .content {font-size: 100%;}
    aside .user-1 img {height: 7rem;}
}

@media (max-width:768px) {
    html {font-size: 60%;}
    /* ===== header ======*/
    header .navbar {
        position: absolute;
        top: 102%; right: -100%;
        height: calc(100vh - 5rem); width: 30rem;
        display: flex; flex-wrap: wrap;
        align-items: flex-start; align-content: flex-start;
        transition: all 0.2s linear; background: #efefef;
    }
    header .navbar a {
        width: 100%; color: var(--txt);
        margin: 0.5rem; padding: 0.5rem;
        display: block; font-size: 2rem;
    }
    header .navbar.active {right: 0;}

    /* ===== main ===== */
    /* home */
    .home {flex-wrap: wrap;}
    .home .image {height: auto;}
    .home img {margin-left: 0;}
    .home .content {margin-top: -2.5rem;}

    /* about */
    .about {padding: 1rem;}
    .about .container:nth-child(2) {height: calc(100vh - 15rem); padding-bottom: 0rem;display: flex; flex-direction: column;}
    .about .container:nth-child(2) .content {padding: 5% 0; height: calc(100% / 3);}
    .about .container:nth-child(2) .content img {height: 7rem; padding: 0;}
    .about .container:nth-child(2) .content p {flex-grow: 1;}

    .about .container:nth-child(2)~.container {flex-direction: column;}
    .about .container:nth-child(4) {flex-direction: column-reverse !important;}
    .about .container:nth-child(2)~.container img {width: 100%; height: 50%;}
    .about .container:nth-child(2)~.container .content {width: 100%; flex-grow: 1;}
    .about .container:nth-child(2)~.container .content h1 {font-size: 2.8rem;}
    .about .container:nth-child(2)~.container .content p {font-size: 1.2rem;}

    .about .container-2 h1 {font-size: 2rem;}
    .about .container-2 .content {font-size: 120%;}

    /* comunity */
    .comunity {height: calc(100vh - 5rem); width: 100%;}
    .comunity h1.heading {width: 100%;}
    .comunity .chanel .search {width: 80%;}

    /* aside */
    aside {height: calc(70vh - 5rem); width: 100%;}
    aside form {padding-right: 35%;}
    aside .user-1 img {height: 8rem;}
 
}

@media (max-width:450px) {
    html {font-size: 50%;}
    .about .container-2 h1 {font-size: 2.3rem;}
    footer .content {
        grid-template-columns: repeat(2, 40%); padding: 0 2%;
        grid-template-rows: repeat(2, 40%); row-gap: 5%;
    }
}

@media (max-width:350px) {
    html {font-size: 40%;}
    .about .container-2 h1 {font-size: 2.4rem;}
}