/*body{margin:0;background:#f5f5f5;font-family:"Open Sans",sans-serif}.page{display:flex;max-width:980px;margin:0 auto;background:#fff;min-height:760px}.sidebar{width:250px;color:#fff;padding:38px 24px;background:linear-gradient(#80b76f,#0a84bf)}.sidebar h2{margin:0 0 12px;font-weight:600}.sidebar p{font-size:14px;line-height:1.35}.content{flex:1;padding:30px 35px}.logo{text-align:center;font-size:54px;font-weight:300;letter-spacing:2px;margin-bottom:30px}.g{color:#63b45d}.b{color:#1277c9}.s{color:#666}.box{border:1px solid #999;padding:20px}.box h3{margin:0 0 20px}.grid{display:grid;grid-template-columns:38% 62%;gap:20px;font-size:14px;color:#666}ul{list-style:none;padding:0}li{text-transform:uppercase;line-height:1.5}em{font-style:italic;font-weight:600}footer{text-align:center;margin-top:90px;font-size:28px;letter-spacing:2px}*/

/*====================================================
  GREENBLUE STUDIO
====================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Open Sans',sans-serif;
    background:#f2f2f2;
    color:#444;
    line-height:1.6;

}

/*====================================================
 Wrapper
====================================================*/

.wrapper{

    width:100%;
    padding:30px;

}

.page{

    max-width:1150px;
    margin:auto;

    background:#ffffff;

    display:flex;

    align-items:stretch;

    border:1px solid #cfcfcf;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

}

/*====================================================
 Main Content
====================================================*/

.content{

    flex:1;

    padding:45px 50px;

    order:2;

}

/*====================================================
 Sidebar
====================================================*/

.sidebar{

    width:300px;

    background:linear-gradient(
        to bottom,
        #7fb769 0%,
        #5ea970 35%,
        #0b82bf 100%
    );

    color:#ffffff;

    padding:40px 28px;

    order:1;

}

.sidebar h2{

    font-size:34px;

    font-weight:300;

    letter-spacing:1px;

    margin-bottom:25px;

}

.sidebar p{

    font-size:15px;

    margin-bottom:22px;

    line-height:1.75;

}

.contact{

    margin-top:30px;

}

.contact h3{

    font-size:20px;

    font-weight:600;

    margin-bottom:10px;

}

.contact p{

    margin:0;

    line-height:1.9;

}

/*====================================================
 Logo
====================================================*/

.logo{

    width:100%;

    text-align:center;

    margin-bottom:45px;

}

.logo img{

    width:100%;

    max-width:470px;

    height:auto;

}

/*====================================================
 Areas Box
====================================================*/

.areas-box{

    border:1px solid #9d9d9d;

    padding:35px;

}

.areas-box h2{

    font-size:28px;

    color:#555;

    font-weight:300;

    letter-spacing:2px;

    margin-bottom:35px;

}

.areas-grid{

    display:grid;

    grid-template-columns:34% 66%;

    gap:45px;

}

/*====================================================
 Left Column
====================================================*/

.areas-left h3{

    margin-top:28px;

    margin-bottom:12px;

    font-size:22px;

    color:#666;

    font-weight:300;

}

.areas-left ul{

    list-style:none;

}

.areas-left li{

    font-size:15px;

    color:#666;

    padding:5px 0;

    text-transform:uppercase;

    letter-spacing:.5px;

}
/*====================================================
 Right Column
====================================================*/

.areas-right{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.work-item{

    border-bottom:1px solid #e5e5e5;

    padding-bottom:18px;

}

.work-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.work-item h4{

    font-size:18px;

    color:#666;

    font-weight:600;

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.work-item p{

    font-size:15px;

    color:#666;

    line-height:1.8;

}

/*====================================================
 Footer
====================================================*/

.footer{

    margin-top:70px;

    text-align:center;

    font-size:34px;

    color:#666;

    font-weight:300;

    letter-spacing:4px;

    text-transform:uppercase;

}

/*====================================================
 Links
====================================================*/

a{

    color:inherit;

    text-decoration:none;

}

a:hover{

    color:#0c7dc2;

}

/*====================================================
 Images
====================================================*/

img{

    display:block;

    max-width:100%;

}

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

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

    .wrapper{

        padding:15px;

    }

    .page{

        flex-direction:column;

    }

    .content{

        order:1;

        width:100%;

        padding:35px;

    }

    .sidebar{

        order:2;

        width:100%;

    }

    .areas-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .logo img{

        max-width:380px;

        margin:auto;

    }

}

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

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

    body{

        background:#ffffff;

    }

    .wrapper{

        padding:0;

    }

    .page{

        border:none;

        box-shadow:none;

        flex-direction:column;

    }

    .content{

        width:100%;

        order:1;

        padding:25px 20px;

    }

    .sidebar{

        width:100%;

        order:2;

        padding:30px 20px;

    }

    .logo{

        margin-bottom:30px;

    }

    .logo img{

        max-width:280px;

        margin:auto;

    }

    .areas-box{

        padding:20px;

    }

    .areas-box h2{

        font-size:24px;

        text-align:center;

        margin-bottom:25px;

    }

    .areas-grid{

        display:block;

    }

    .areas-left{

        margin-bottom:35px;

    }

    .areas-left h3{

        margin-top:25px;

    }

    .work-item{

        margin-bottom:25px;

    }

    .work-item h4{

        font-size:17px;

    }

    .work-item p{

        font-size:14px;

        line-height:1.7;

    }

    .sidebar h2{

        font-size:30px;

        text-align:center;

    }

    .sidebar p{

        font-size:14px;

        line-height:1.8;

    }

    .contact{

        margin-top:25px;

    }

    .contact h3{

        font-size:18px;

    }

    .footer{

        font-size:24px;

        margin-top:40px;

        letter-spacing:2px;

    }

}

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

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

    .content{

        padding:20px 15px;

    }

    .sidebar{

        padding:25px 15px;

    }

    .logo img{

        max-width:220px;

    }

    .areas-box{

        padding:15px;

    }

    .areas-box h2{

        font-size:22px;

    }

    .areas-left li{

        font-size:14px;

    }

    .work-item h4{

        font-size:16px;

    }

    .work-item p{

        font-size:13px;

    }

    .footer{

        font-size:20px;

    }

}