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

body{
    min-height:100vh;

    background-image:url("images/daregon\ bg.jpg.jpeg");
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;

    overflow-x:hidden;
}

.overlay{
    width:100%;
    min-height:100vh;

    background:rgba(0,0,0,.45);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px;
}

.container{

    width:100%;
    max-width:1300px;

    display:flex;
    justify-content:flex-end;
    align-items:center;

}

.right{

    width:100%;
    max-width:620px;

}

h1{

    color:#fff;
    font-size:64px;
    font-weight:700;

    margin-bottom:10px;

}

.subtitle{

    color:#ddd;
    font-size:22px;

    margin-bottom:40px;

}

.box{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;

    padding:25px 30px;

    border-radius:22px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    transition:.3s;

}

.box:hover{

    transform:translateX(8px);

    background:rgba(255,255,255,.18);

}

.box h2{

    color:#fff;

    font-size:34px;

    font-weight:600;

}

.box span{

    color:#00F7FF;

    font-size:42px;

    font-weight:700;

}

.note{

    margin-top:30px;

    padding:25px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.10);

    color:#fff;

    line-height:1.8;

    font-size:18px;

}

/* ===========================
        Tablet
=========================== */

@media(max-width:992px){

.container{

    justify-content:center;

}

.right{

    max-width:700px;

}

h1{

    text-align:center;
    font-size:52px;

}

.subtitle{

    text-align:center;

}

}

/* ===========================
        Mobile
=========================== */

@media(max-width:768px){

.overlay{

    padding:25px;

}

h1{

    font-size:42px;

}

.subtitle{

    font-size:18px;

}

.box{

    padding:18px 20px;

}

.box h2{

    font-size:24px;

}

.box span{

    font-size:30px;

}

.note{

    font-size:16px;

}

}

/* ===========================
      Small Mobile
=========================== */

@media(max-width:480px){

h1{

    font-size:34px;

}

.subtitle{

    font-size:16px;

}

.box{

    padding:15px;

}

.box h2{

    font-size:20px;

}

.box span{

    font-size:26px;

}

}