:root {
    --primary_font: 'Poppins', sans-serif;
    --hero_bg: linear-gradient(180deg, rgba(20, 128, 107, 0.00) 0%, rgba(68, 179, 158, 0.65) 100%);
    --title_color: rgba(246, 246, 246, 0.96);
    --text_color: #F6F6F6;
    --accent_color: #333333;
}

/* Hero Start */
.d2c_hero_wrapper {
    height: 100vh;
    padding: 100px 0px 12px;
    background: var(--hero_bg),  url('../images/banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
h2 {
    font-size: 46px;
    font-family: var(--primary_font);
    font-weight: 700;
    color: var(--title_color);
    text-transform: capitalize;
    margin-bottom: 30px;
}
p {
    color: var(--text_color);
    font-size: 16px;
    font-weight: 500;
    font-family: var(--primary_font);
    margin-bottom: 50px;
}
.btn {
    color: var(--text_color);
    background: var(--accent_color);
    font-size: 18px;
    font-family: var(--primary_font);
    font-weight: 700;
    padding: 10px 34px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.07);
    transition: 0.4s all;
}
.btn:hover {
    border-color:  var(--accent_color);
    color: var(--accent_color);
    background: transparent;
    transition: 0.4s all;
}
.btn:active {
    border-color:  var(--accent_color) !important;
    color: var(--accent_color) !important;
    background: transparent !important;
    transition: 0.4s all;
}
/* Hero End */



/* 
    Template Name: {{5+ HTML Hero Section Web UI kits for Professional Web Designer}}
    Template URL: {{https://designtocodes.com/product/5-html-hero-section-web-ui-kits}}
    Description: {{With a creative and user-friendly approach, these kits are designed to make your website shine and attract more visitors.}}
    Author: DesignToCodes
    Author URL: https://www.designtocodes.com
    Text Domain: {{Hero Section UI Kits}}
 */