:root {
    /* Font */
    --primary_font: 'Roboto', sans-serif;
    --secondary_font: 'Poppins', sans-serif;
    /* Color */
    --primary_color: #2E3845;
    --secondary_color: #46494F;
    --accent_color: #0252AF;
    --default_color: #FFFFFF;
    /* BG */
    --primary_bg: #F1FCFE;
}


/* Hero Start */
.d2c_hero_wrapper {
    height: 100vh;
    padding: 100px 0px;
    background: url(../images/backgroundshape.png), var(--primary_bg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: bottom right;
}
h2 {
    color: var(--primary_color);
    font-family: var(--primary_font);
    font-size: 64px;
    font-weight: 700;
    position: relative;
    margin-bottom: 64px;
}
h2 span {
    color: var(--accent_color);
}
h2:after {
    content: "";
    width: 270px;
    height: 4px;
    background: var(--accent_color);
    position: absolute;
    bottom: -32px;
    left: 0;
}
p {
    color: var(--secondary_color);
    font-family: var(--primary_font);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 42px;
}
.btn {
    color: var(--default_color);
    background: var(--accent_color);
    border: 1px solid var(--accent_color);
    padding: 9px 32px 8px;
    border-radius: 100px;
    font-family: var(--secondary_font);
    font-size: 16px;
    font-weight: 700;
    transition: 0.4s all;
}
.btn:hover {
    color: var(--accent_color);
    background: transparent;
    border: 1px solid var(--accent_color);
    transition: 0.4s all;
}
.btn:active {
    color: var(--accent_color) !important;
    background: transparent !important;
    border: 1px solid var(--accent_color) !important;
    transition: 0.4s all;
}
.d2c_hero_wrapper img:nth-child(2) {
    position: absolute;
    top: 53%;
    left: 37%;
}
.d2c_hero_wrapper img:nth-child(3) {
    position: absolute;
    top: 30%;
    left: 45%;
}
/* 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}}
 */