/* 
   ======================== ***** ============================= 
    Template Name: WritLine - AI Content Writer SaaS Landing Page Template
    Template URI:  https://designtocodes.com/product/writline-ai-saas-landing-page-template
    Description:   WritLine is the ultimate SaaS Landing Page Template for AI-based tools. The landing template is best for all types of AI tools such as content generators, Image generators, copywriting, content writing, blog post generators, chatbots, and other AI tools.
    Author:        DesignToCodes
    Author URI:    https://www.designtocodes.com
    Text Domain:   WritLine
*/


:root {

    /* Global Color */
    --primary_color: #09C778;
    --secondary_color: #252666;
    --accent_color: #01A0F9;
    --text_color: #777676; 
    --default_color_one: #FFFFFF;
    --box_shadow: 0rem 0rem 1.5625rem 0rem #33333314;
    --border_radius: 0.625rem;


    /* global google font */
    --primary_font: 'Sora', sans-serif;

}

/*Typography
-----------------------*/
p{
    font-weight: 400;
    color: var(--text_color);
    font-size: 1.0625rem;
}
h1,h2,h3,h4,h5,h6{
    color: var(--secondary_color);
    text-transform: capitalize;
    font-weight: 600;
}

h2 {
    font-size: 3.125rem;
}

/*Preloader*/
.preloader {
    background: linear-gradient(90deg, #09C778 -27.54%, #01A0F9 153.19%);
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 1100;
}
.preloader > img {
    max-width: 10.625rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}
/* Preloader CSS */

/*Custom Style
-----------------------*/
html {
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    font-family: var(--primary_font);
}
::selection {
    background: var(--secondary_color);
    color: var(--default_color_one);
}
#scrollToTopBtn{
    display: none;
}
a,
button,
select,

input,
label {
    cursor: pointer;
    transition: 0.4s all;
}
a:focus,
button:focus,
select:focus,
input:focus,
label:focus {
    outline: 0;
}
a {
    text-decoration: none;
    color: var(--text_color);
    font-weight: 400;
}
section {
    padding: 6.25rem 0rem;
}
ul li{
    list-style-type: none;
    font-weight: 400;
    color: var(--text_color);
}
ul li i{
    color: var(--primary_color);
}
/* button */
.d2c_btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--default_color_one);
    background: linear-gradient(90deg, rgba(9, 199, 120, 0.98) -27.54%, rgba(1, 160, 249, 0.98) 153.19%);
    border: none;
    border-radius: 0.375rem;
    text-align: center;
    padding: 0.8125rem 2.1875rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: capitalize;
    transition: 0.4s all;
    position: relative;
    z-index: 99;
}
.d2c_btn:focus {
    outline: 0;
    box-shadow: none;
    color: var(--default_color_one);
}
.d2c_btn:hover {
    color: var(--default_color_one);
    border-color: var(--primary_color);
    transition: 0.4s all;
}
.d2c_btn:active {
    box-shadow: none;
}

.d2c_btn::after{
    content: '';
    position: absolute;
    inset: 0;
    width: 0.0625rem;
    height: 0.0625rem;
    background: var(--secondary_color);
    margin: auto;
    transition: .4s all ease;
    opacity: 0;
    border-radius: 0.375rem;
}
.d2c_btn:hover::after{
    width: 100%;
    height: 100%;
    transition: .4s all ease;
    opacity: 1;
    z-index: -1;
}
/* title */
.d2c_title{
    font-weight: 600;
    font-size: 2.625rem;
    color: var(--secondary_color);
    text-transform: capitalize;
    margin-bottom: 1.25rem;
}
.d2c_subtitle{
    font-size: 1.5625rem;
    font-weight: 700;
}

.d2c_hero_title {
    font-size: 3.75rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* card item */
.d2c_card{
    background: var(--default_color_one);
    box-shadow: var(--box_shadow);
    padding: 3.125rem 2.5rem;
    border-radius: var(--border_radius);
    transition: .4s all ease;
    z-index: 2;
}
.d2c_card:hover{
    cursor: pointer;
    transition: .4s all ease;
}
.d2c_card h3,.d2c_card p{
    transition: .4s all ease;
}
.d2c_card:hover h3,.d2c_card:hover p{
    color: var(--default_color_one);
    transition: .4s all ease;
}
.d2c_card::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(90deg, #09C778 -27.54%, #01A0F9 153.19%);
    border-radius: 0.6875rem;
    opacity: 0;
    transition: .4s all ease;
}
.d2c_card:hover::after{
    z-index: -1;
    opacity: 1;
    transition: .4s all ease;
}
/* navbar start */
.navbar-brand{
    max-width: 10rem;
}
.d2c_navbar{
    padding: 0.625rem 0rem;
    background: linear-gradient(90deg, rgb(80 214 162) 0%, rgb(83 192 249) 100%);
}
.d2c_navbar .navbar-nav .nav-item{
    margin: 0rem 0.9375rem;
    display: flex;
    align-items: center;
}
.d2c_navbar .navbar-nav .nav-item:last-child{
    margin-right: 0;
}
.d2c_navbar .navbar-nav .nav-link{
    color: var(--default_color_one);
    font-weight: 500;
    font-size: 1rem;
    transition: .4s all ease;
    padding: 0.4375rem 0rem 0.4375rem 0rem;
    position: relative;
    text-transform: capitalize;
}
.d2c_navbar .navbar-nav .nav-link:hover{
    color: var(--secondary_color);
    transition: .4s all ease;
}
.d2c_navbar .navbar-nav .nav-link::after{
    content: '';
    position: absolute;
    width: 0%;
    height: 0.125rem;
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    background: var(--secondary_color);
    transition: .4s all ease;
}
.d2c_navbar .navbar-nav .nav-link:hover::after{
    opacity: 1;
    width: 100%;
    transition: .4s all ease;
}
.d2c_nav_right .d2c_btn{
    background: var(--secondary_color);
}
.d2c_nav_right .d2c_btn:hover{
    color: var(--secondary_color) !important;
}
.d2c_nav_right .d2c_btn:hover::after{
    background: var(--default_color_one);
}
.navbar .d2c_btn{
    padding: 0.8125rem 2.1875rem 0.75rem !important;
}
/* Nav Item Show from Side */
body .d2c_mobile_view {
    position: fixed;
    height: 100vh;
    inset: 0;
    opacity: 1;
}
.navbar-nav .d2c_btn{
    padding-left: 1.875rem !important;
    padding-right: 1.875rem !important;
}
.navbar.d2c_mobile_view_body .navbar-nav {
    width: 100%;
}

.navbar.d2c_mobile_view_body .nav-item {
    margin-right: 0;
}

.d2c_mobile_view .show_width {
    max-width: 14.625rem;
    width: 100%;
    height: 100vh;
    position: absolute;
    right: -23.75rem;
    top: 0;
    transition: 0.5s;
    padding: 1.25rem 0.9375rem;
    background-color: #51ccc6;
    overflow: scroll;
    z-index: 9999;
    box-shadow: 0rem 0rem 0.625rem rgb(0 0 0 / 15%);
}

.d2c_mobile_view.show .show_width {
    right: 0;
    transition: 0.5s;
}
.hide_width{
    max-width: 15.625rem;
    width: 100%;
    height: 100vh;
    position: absolute;
    right: -23.75rem !important;
    top: 0;
    transition: 0.5s !important;
    padding: 1.25rem 0.9375rem;
    background-color: #D9F0F3;
    overflow: scroll;
    z-index: 9999;
}

.navbar-toggler:focus{
    box-shadow: none;
}
.navbar-toggler {
    border: 0.0625rem solid var(--default_color_one);
    color: var(--default_color_one);
    padding: 0.3125rem 0.625rem;
    width: 2.75rem;
    margin-left: 0.9375rem;
    transition: .4s all ease;
}
.navbar-toggler:hover{
    background: #46afdb;
    transition: .4s all ease;
}
.d2c_cross_btn{
    width: auto;
    border: none;
    color: var(--default_color_one);
}
@media only screen and (min-width:61.9375rem) {
    body .d2c_mobile_view {
        opacity: 0;
        transition: .5s;
    }
}
.navbar-nav .d2c_btn.active{
    border: 0.063rem solid #019eb2;
}
.navbar-nav .d2c_btn.active::after{
    width: 100%;
    height: 100%;
    opacity: 1;
    color: var(--secondary_color);
    z-index: -1;
}

.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {
    color: var(--secondary_color) !important;
}
.navbar-nav .nav-link.active::after{
    opacity: 1;
    width: 100%;
    transition: .4s all ease;
}
/* navbar end */

/* ========== hero section start ========== */

.d2c_hero{
    background: linear-gradient(90deg, #09c778b5 0%, #01a0f9ad 100%),url(../images/bg_wave.png);
    background-repeat: no-repeat;
    background-position: top;
}
.d2c_hero_content{
    padding: 13.125rem 0rem;
}
.d2c_hero_content .d2c_btn{
    background: var(--default_color_one);
    color: var(--primary_color);
}
.d2c_play_btn{
    width: 3.125rem;
    height: 3.125rem;
    display: inline-flex;
}
.d2c_play_btn::after{
    border-radius: 50%;
}

/* ========== hero section end ========== */

/* ========== About section start ========== */
.d2c_about_content{
    padding-top: 5rem;
}
.d2c_about_content ul li{
    margin: 0.875rem 0rem;
}
.d2c_section_right_image{
    width: 90%;
}

/* ========== About section end ========== */

/* ========== why choose us section start ========== */

.d2_choose_us{
    background: linear-gradient(90deg, #09C778 -27.54%, #01A0F9 153.19%);
}
.d2_choose_us .d2c_btn{
    background: var(--default_color_one);
    color: var(--primary_color);
}

.d2c_choose_us_card{
    background: var(--default_color_one);
    border-radius: var(--border_radius);
    padding: 2.1875rem 1.25rem;
}
.d2c_choose_us_card .d2c_icon{
    width: 3.125rem;
    height: 3.125rem;
    margin: 0 auto 1.25rem auto;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #09C778 -27.54%, #01A0F9 153.19%);
}

/* ========== why choose us section start ========== */

/* ========== works section start ========== */

.d2c_works_video{
    height: 31.25rem;
    background: linear-gradient(0deg, rgba(102,98,227,1) 0%, rgba(53,38,117,0.5298494397759104) 0%),url('../images/works_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 5rem;
    border-radius: var(--border_radius);
}
.d2c_works_video i{
    width: 3.4375rem;
    height: 3.4375rem;
    font-size: 3.75rem;
    display: flex;
    border-radius: 50%;
    color: var(--secondary_color);
    background: var(--default_color_one);
    align-items: center;
    justify-content: center;
}
.d2c_works_video button:active{
    border: none !important;
}
.modal-body{
    height: 25rem;
}
.modal-body iframe{
    border-radius: 0.3125rem;
}
.d2c_works_card_icon{
    width: 4.375rem;
    height: 4.375rem;
    border-radius: 0.375rem;
    border: 0.125rem solid var(--secondary_color);
    color: var(--secondary_color);
    margin: 0rem auto 1.25rem auto;
    transition: .4s all ease;
}
.d2c_card:hover .d2c_works_card_icon{
    color: var(--default_color_one);
    border-color: var(--default_color_one);
    transition: .4s all ease;
}
/* ========== works section end ========== */

/* ========== testimonial section start ========== */

.d2c_testimonial_card{
    border-radius: var(--border_radius);
    background: var(--default_color_one);
    box-shadow: 0rem 0rem 0.625rem 0rem rgba(51, 51, 51, 0.08);
    padding: 1.875rem;
    margin: 0.625rem;
    width: 25rem;
    height: 100%;
}
.d2c_client_image{
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 0.375rem;
}
.d2c_testimonial_card h3{
    font-size: 1.25rem;
}
.d2c_review i{
    color: var(--primary_color);
    margin-right: 0.0625rem;
}
/* ========== testimonial section end ========== */

/* ========== FAQ section start ========== */

.d2c_faq_main{
    background: linear-gradient(90deg, #09c778d1 0%, #01a0f9c7 100%),url(../images/bg_wave_1.png);
    background-repeat: no-repeat;
    background-position: bottom;
}
.d2c_faq_card{
    padding: 1.5rem 1.875rem;
    border-radius: var(--border_radius);
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(0.625rem);
    transition: .4s all ease;
    z-index: 2;
}
.d2c_faq_card:hover{
    cursor: pointer;
}
.d2c_faq_card h3{
    font-size: 1.375rem;
    margin-bottom: 0.9375rem;
}
.d2c_faq_card h3 i{
    font-size: 1.5rem;
}
.d2c_faq_card::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #352675 0%, #01A0F9 100%);
    border-radius: var(--border_radius);
    transition: .4s all ease;
    opacity: 0;
    z-index: -2;
}
.d2c_faq_card:hover::after{
    opacity: 1;
    z-index: -1;
    transition: .4s all ease;
}

/* ========== FAQ section end ========== */

/* ========== contact section start ========== */

.d2c_contact{
    background-image: url(../images/top_wave.png),url(../images/bottom_wave.png);
    background-position: top left, right bottom;
    background-repeat: no-repeat, no-repeat;
}
.form-label{
    font-size: 1.125rem;
    color: var(--secondary_color);
    font-weight: 500;
}
.form-control{
    border-radius: 0.375rem;
    background: linear-gradient(90deg, rgba(9, 199, 120, 0.10) 0%, rgba(1, 160, 249, 0.10) 100%);
    border: none;
    padding: 0.8125rem 1.25rem;
    color: var(--secondary_color);
    border-color: transparent;
}
.form-control::placeholder{
    color: rgba(78, 78, 78, 0.70);;
}
.form-control:focus{
    box-shadow: none;
    color: var(--secondary_color);
}
.d2c_contact_left img{
    max-width: 80% !important;
}

/* ========== contact section end ========== */

/* ========== Footer section start ========== */

.d2c_footer{
    padding: 4.375rem 0rem;
    background: linear-gradient(90deg, rgba(9, 199, 120, 0.98) 0%, rgba(1, 160, 249, 0.98) 100%);
}
.d2c_footer .d2c_btn{
    background: var(--default_color_one);
    color: var(--primary_color);
}
/* copyright */
.d2c_copyright{
    background: rgba(255, 255, 255, 0.30);
    padding: 1.25rem;
    border-radius: var(--border_radius);
    margin-top: 4.375rem;
}
.d2c_social_link a{
    background: var(--default_color_one);
    color: var(--accent_color);
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.1875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}
.d2c_social_link a:hover{
    background: var(--secondary_color);
}
.d2c_copyright p a{
    color: var(--default_color_one);
}
.d2c_copyright p a:hover{
    color: var(--secondary_color);
    transition: .4s all ease;
}

/* ========== Footer section end ========== */

/* ========================== bottom to top scroll start ============================ */
#scrollToTopBtn{
    display: none;

}
#scrollToTopBtn a{
    text-decoration: none;
}
#scrollToTopBtn a i{
    background: var(--secondary_color);
    box-shadow: 0rem 0rem 1.25rem rgb(0 0 0 / 15%);
    font-size: 1.25rem;
    color: var(--default_color_one);
    border-radius: 0.25rem;
    width: 2.188rem;
    height: 2.188rem;
    position: fixed;
    z-index: 9999;
    bottom: 3%;
    right: 5%;
    transition: 0.4s all ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
#scrollToTopBtn a i:hover{
    background: var(--primary_color);
    transition: 0.4s all ease;
}