:root {
--accent: #20d7e8 !important;
--primary: #062c6d !important;
--secondary: #000000 !important;
--primary-font: Unna, sans-serif;
--secondary-font: Roboto, sans-serif;
}

.cs_gray_bg_2 {
    background-color: #01e6ea;
}
/*==================================================
    FOOTER NEWSLETTER
==================================================*/

.cs_footer_newsletter{
    display:block !important;
    width:100%;
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
}

/*--------------------------------------------------
    Title
---------------------------------------------------*/

.cs_footer_newsletter .cs_newsletter_title{
    max-width:100% !important;
    margin:0 0 12px;
    font-size:28px;
    line-height:1.25;
    font-weight:600;
    text-transform:uppercase;
    color:#fff;
}

/*--------------------------------------------------
    Description
---------------------------------------------------*/

.cs_footer_newsletter .cs_newsletter_desc{
    margin:0 0 24px;
    color:rgba(255,255,255,.72);
    font-size:15px;
    line-height:1.75;
}

/*--------------------------------------------------
    Form
---------------------------------------------------*/

.cs_footer_newsletter .cs_newsletter_form{
    position:static !important;
    width:100%;
    max-width:100% !important;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
}

/*--------------------------------------------------
    Input
---------------------------------------------------*/

.cs_footer_newsletter .cs_newsletter_input{
    width:100% !important;
    height:58px;

    background:transparent;
    color:#fff;

    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;

    padding:0 20px !important;

    outline:none;

    transition:.3s;
}

.cs_footer_newsletter .cs_newsletter_input::placeholder{
    color:rgba(255,255,255,.55);
}

.cs_footer_newsletter .cs_newsletter_input:focus{
    border-color:var(--accent);
}

/*--------------------------------------------------
    Button
---------------------------------------------------*/

.cs_footer_newsletter .cs_btn.cs_style_1{
    position:static !important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-width:230px;
    width:auto;

    height:54px;

    padding:0 28px;

    border-radius:14px;

    white-space:nowrap;

    transition:.3s;
}

.cs_footer_newsletter .cs_btn.cs_style_1 span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    margin-left:6px;
}

.cs_footer_newsletter .cs_btn.cs_style_1:hover{
    transform:translateY(-2px);
}

/*--------------------------------------------------
    Messages
---------------------------------------------------*/

.cs_footer_newsletter .text-danger,
.cs_footer_newsletter .text-success{
    margin-top:6px;
    font-size:14px;
}

/*==================================================
    FOOTER GRID
==================================================*/

.cs_footer_grid_4{
    display:grid;

    /* Gives the newsletter about 30% more space */
    grid-template-columns:1.15fr .95fr 1.15fr 1.35fr;

    gap:60px;

    align-items:start;
}

/*==================================================
    FOOTER WIDGETS
==================================================*/

.cs_footer_item{
    width:100%;
}

.cs_footer_item h2,
.cs_footer_item h3,
.cs_footer_item h4,
.cs_footer_item .cs_widget_title{
    margin-bottom:22px;
}

.cs_footer_item ul{
    margin:0;
    padding:0;
}

.cs_footer_item ul li{
    margin-bottom:14px;
}

.cs_footer_item ul li:last-child{
    margin-bottom:0;
}

.cs_footer_item ul li a{
    transition:.3s;
}

.cs_footer_item ul li a:hover{
    padding-left:5px;
}

/*==================================================
    CONTACT
==================================================*/

.cs_text_widget img{
    margin-bottom:24px;
    max-width:170px;
}

.cs_text_widget p{
    line-height:1.8;
}

.cs_text_widget strong{
    color:#fff;
}

/*==================================================
    LARGE DESKTOP
==================================================*/

@media (min-width:1400px){

    .cs_footer_grid_4{
        grid-template-columns:1.2fr 1fr 1.2fr 1.45fr;
        gap:70px;
    }

}

/*==================================================
    TABLET
==================================================*/

@media (max-width:1199px){

    .cs_footer_grid_4{
        grid-template-columns:repeat(2,1fr);
        gap:50px;
    }

    .cs_footer_newsletter .cs_newsletter_title{
        font-size:30px;
    }

}

/*==================================================
    MOBILE
==================================================*/

@media (max-width:767px){

    .cs_footer_grid_4{
        grid-template-columns:1fr;
        gap:40px;
    }

    .cs_footer_newsletter .cs_newsletter_title{
        font-size:26px;
    }

    .cs_footer_newsletter .cs_newsletter_desc{
        font-size:15px;
    }

    .cs_footer_newsletter .cs_newsletter_input{
        height:54px;
    }

    .cs_footer_newsletter .cs_btn.cs_style_1{
        width:100%;
        min-width:100%;
    }
}

.cs_side_header .cs_side_header_in {
    width: 500px;
    height: 100vh;
    background-color: #062C6D;
    flex: none;
    margin-left: auto;
    overflow: auto;
    padding: 70px 50px 50px 50px;
    position: relative;
    z-index: 2;
    right: -500px;
    transition: all 0.4s ease;
}
.cs_side_header .cs_side_header_heading {
    font-size: 28px;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: #fff;
}

.cs_side_header .cs_side_header_title {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 22px;
    color: #fff;
}

.cs_side_header .cs_newsletter.cs_style_1.cs_type_1 .cs_btn.cs_style_1 {
    right: 10px;
    top: 10px;
    padding: 12px 25px;
    background-color: #04a5d5;
}

.cs_side_header a {
    color: #fff;
}

.cs_side_header.active .cs_side_header_overlay, .cs_side_header.active .cs_close {
    opacity: 1;
    color: #fff;
}

.cs_post.cs_style_1 .cs_post_title a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 22px;
}

.cs_post.cs_style_1 .cs_post_meta > span {
    position: relative;
    font-size: 15px;
}

.cs_hero_social_wrap .cs_social_btns.cs_style_1 a {
    transform: rotate(-180deg);
    color: #ffffff;
    border-color: #ffffff;
}