@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
/* ##################################################################################################### */
/* main, body */
/* ##################################################################################################### */
:root {
    --bg-1: radial-gradient(#0f172a, #0f1930, #0f1930);
    --bg-2: radial-gradient(#0f1930, #0f1930, #0f172a);
    --bg-3: #1a2642;
    --col-1: lavender;
    --op-1: 65%;
    --op-2: 80%;
    --op-3: 100%;
}

* {
    font-family: 'Poppins', Tahoma ,sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

body {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body, main, section {overflow-x: hidden;}

main {
    background: var(--bg-1);
}

/* ##################################################################################################### */
/* header */
/* ##################################################################################################### */

h1, h2, h3, h4, h5, h6, p, div, a{
    color: var(--col-1);
    width: 100%;
}

h2 {overflow: hidden;}
span {
    opacity: var(--op-3);
    color: white;
}

#desktop-mobile {
    display: none;
}

/* header */
.header {
    height: 50px;
    width: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    transition: z-index 0.3s;
    display: flex;
    align-items: center;
    padding-left: 5%;
}

#header-1 {position: fixed;z-index: 1;}
section {z-index: 0;}
button {cursor: pointer;}

/* ##################################################################################################### */
/* section-3 */
.container-2 {width: 100%;}

.wrapper {
    width: 80%;
    height: auto;
    margin: 0px auto;
    padding: 15px 0;
}

.wrapper-box {
    height: 165px;
    display: grid;
    grid-template-columns: 22% 78%;
}
.wrapper-box h1 {
    width: 100%;
    height: 100%;
    opacity: var(--op-2);
    float: left;
}
.box-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.box-item h3 {
    opacity: 0.95;
}
.box-item button {
    border: none;
    border-radius: 10px;
    padding: 1px 8px;
    margin-right: 10px;
    color: cyan;
    background: rgba(0, 255, 255, 0.2);
    transition: all 0.4s ease;
}
.box-item button:hover {
    color: cyan;
    background: rgba(0, 255, 255, 0.6);
}
.box-item h4 {
    opacity: var(--op-2);
    margin-bottom: 10px;
}

/* back */
.back {
    height: 40px;
}
#exp {
    cursor: pointer;
    opacity: var(--op-2);
}
#exp i {
    rotate: -45deg;
    transition: all 0.3s ease;
}
#exp:hover {
    opacity: var(--op-3);
}
#exp:hover i {
    transform: translate(8px, -2px);
}

/* not responsive */
@media only screen and (max-height:1000px) and (max-width:1100px) {
    main {
        display: none;
    }
    body {
        overflow: hidden;
        padding: 50px 100px;
        background: var(--bg-1);
    }
    #desktop-mobile {
        height: 100%;
        width: 100%;
        display: grid;
        text-align: center;
        color: var(--col-1);
        margin: auto auto;

    }
    #desktop-mobile h1 {
        width: 100%;
        font-size: 2rem;
        padding-bottom: 10px;
        display: block;
        border-bottom: 1px solid var(--col-1);
    }
    #desktop-mobile p {
        font-size: 0.9rem;
    }
    #desktop-mobile a {
        width: 100%;
        font-size: 1.3rem;
        color: black;
        background: lavender;
        border-radius: 30px;
        padding: 5px 20px;
    }
    #desktop-mobile a:hover {
        color: red;
    }
}