:root {
    --c_primary: #16214a;
    --c_secondary: #222121;
    --c_white: #ffffff;
    --c_light: #f0f6f5;
    --bg_primary: #1cad8d;
    --bg_secondary: #162049;
    --bg_white: #ffffff;
    --bg_gray: #eff1f3;
}


/*
    font-family: 'DM Sans', sans-serif;
    font-family: 'Lexend Deca', sans-serif;
    font-family: 'Playfair Display', serif; 
*/

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--bg_gray);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
}

.ff_playfair {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    letter-spacing: -3px;
}

.c_primary {
    color: var(--c_primary)
}

.c_secondary {
    color: var(--c_secondary)
}

.c_white {
    color: var(--c_white)
}

.c_light {
    color: var(--c_light)
}

.bg_primary {
    background-color: var(--bg_primary)
}

.bg_secondary {
    background-color: var(--bg_secondary)
}

.bg_gray {
    background-color: var(--bg_gray)
}

.def_btn {
    font-size: 22px;
    line-height: 1.2727em;
    min-width: 11.3182em;
    padding: 0.9091em;
    border-radius: 0px;
    text-align: center;
    color: var(--c_white);
}

.def_btn:hover {
    color: var(--c_white);
}

.btn_primary {
    background-color: var(--bg_primary);
}

.btn_primary:hover {
    background-color: #1a967b;
    ;
}

.btn_primary:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(28, 173, 141, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(28, 173, 141, 0.25);
}

.btn_secondary {
    background-color: var(--bg_secondary);
}

.btn_secondary:hover {
    background-color: #101735;
}

.btn_secondary:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 33, 74, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(22, 33, 74, 0.25);
}


/*................ start header section ................*/

.header_sec {
    padding: 14px 0px 18px 0px;
    border-top: 8px solid var(--bg_primary);
    background-color: var(--bg_white);
    z-index: 100;
}

.header_logoLink {
    display: inline-block;
}

.header_logo {
    width: 152px;
    height: 70.63px;
}

.header_actBtns {
    margin-right: -37px;
    padding-top: 3px;
}

.header_actBtns .btn {
    margin-left: 0px;
}


/*................ end header section ................*/


/*................ start hero  section ................*/

.hero_sec {
    padding: 269px 0px 112px 0px;
    background-image: url("../img/hero_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
}

.heroSec_content {}

.heroSec_Title {
    font-size: 88px;
    line-height: 1.1805em;
    padding-left: 0.0568em;
    margin-bottom: 0.2386em;
    max-width: 9em;
}

.sec_desc {
    font-size: 25.6px;
    line-height: 1.89em;
    letter-spacing: 0.0048em;
    margin-bottom: 1.44em;
}

.heroSec_desc {
    max-width: 611px;
}


/*................ end hero  section ................*/


/*................ Start Introduction section ................*/

.intro_sec {}

.intro_contentArea {
    padding: 140px 0px 118px 0px;
    background-image: url("../img/introduction_contentBg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
}

.intro_content {
    max-width: 1120px;
}

.sec_title {
    font-size: 57.6px;
    line-height: 1.2912em;
    margin-bottom: 0.3509em;
    letter-spacing: 0.0035em;
}

.sec_title .ff_playfair {
    letter-spacing: 0.1px;
}

.intro_secImgBox {}

.intro_secImg {
    width: 100%;
}


/*................ end Introduction section ................*/


/*................ start benefits section ................*/

.benefits_sec {
    padding: 150px 0px 91px 0px;
    background-image: url("../img/Benefits_background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
}

.benefits_content {
    max-width: 1050px;
}

.benefits_secTitle {
    max-width: 796px;
}

.benefits_list {
    list-style: none;
    padding-left: 2px;
    padding-top: 29px;
}

.benefits_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 11px;
}

.beneftis_itemIconBox {
    margin-right: 45px;
    padding-top: 8px;
}

.beneftis_itemIcon {
    width: 81px;
}


/*................ end benefits section ................*/


/*................ start solution section ................*/

.solution_sec {
    padding: 129px 0px 0px 0px;
    /*! padding-top: 129px; */
}

.solution_content {
    max-width: 1136px;
}

.solution_contentRow1 {
    margin-bottom: 67px;
}

.sec_subTitle {
    font-size: 44.8px;
    line-height: 1.0909em;
}


/*................ end solution section ................*/


/*................ start contact section ................*/

.contact_sec {
    padding: 123px 0px 232px 0px;
    background-image: url("../img/contact_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    border-bottom: 8px solid var(--bg_primary);
}

.contact_secTitle {}

.contact_formBox {
    padding: 132px 135px 66px 135px;
    border-radius: 0px 472px 0px 472px;
    background-color: var(--bg_primary);
    margin: 32px;
}

.cus_inp {
    font-size: 25.6px;
    line-height: 1.664em;
    margin-bottom: 3em;
    background-color: transparent;
    border-radius: 0px;
    border: none;
    color: var(--c_white) !important;
    border-bottom: 2px solid var(--c_white);
}

.cus_inp:focus {
    background-color: transparent;
    border-color: var(--c_primary);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.cus_inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(255, 255, 255, 0.6);
}

.cus_inp::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(255, 255, 255, 0.6);
}

.cus_inp:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(255, 255, 255, 0.6);
}

.cus_inp:-moz-placeholder {
    /* Firefox 18- */
    color: rgba(255, 255, 255, 0.6);
}

.contact_addressBox {
    text-align: center;
    padding-top: 80px;
}

.contact_addressIcon {
    height: 50px;
}

.contact_address {
    font-size: 25.6px;
    line-height: 1.6em;
    margin-top: 0.4em;
}

.form_textarea {
    height: 55px;
    margin-bottom: 60px;
}

.form_submitBtn {
    min-width: 288px;
    padding: 25px;
}


/*................ end contact section ................*/


/*______________________________ start  media quries _____________________________*/

@media(min-width:1200px) {
    .container {
        max-width: 1086px;
    }
    .container_sm {
        max-width: 960px;
    }
}

@media(min-width:1400px) {
    .container {
        max-width: 1298px;
    }
    .container_sm {
        max-width: 1150px;
    }
}

@media(min-width:1800px) {
    .container {
        max-width: 1720px;
    }
    .container_sm {
        max-width: 1530px;
    }
}

@media(max-width:1799.98px) {
    .header_sec {
        border-top-width: 6px;
        padding: 9px 0px 15px 0px;
    }
    .header_logo {
        width: 112px;
        height: 52px;
    }
    .def_btn {
        font-size: 16px;
    }
    .header_actBtns {
        margin-right: -27px;
    }
    .heroSec_Title {
        font-size: 66px;
    }
    .hero_sec {
        padding: 203px 0px 83px 0px;
    }
    .sec_desc {
        font-size: 19px;
    }
    .heroSec_desc {
        max-width: 450px;
    }
    .sec_title {
        font-size: 43px;
    }
    .intro_contentArea {
        padding: 102px 0px 96px 0px;
    }
    .intro_content {
        max-width: 820px;
    }
    .benefits_sec {
        padding: 115px 0px 68px 0px;
    }
    .benefits_secTitle {
        max-width: 690px;
    }
    .benefits_content {
        max-width: 780px;
    }
    .benefits_list {
        padding-top: 18px;
    }
    .beneftis_itemIconBox {
        margin-right: 34px;
        padding-top: 4px;
    }
    .benefits_item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 8px;
    }
    .beneftis_itemIcon {
        width: 60px;
    }
    .solution_sec {
        padding: 95px 0px 0px 0px;
    }
    .solution_content {
        max-width: 840px;
    }
    .solution_contentRow1 {
        margin-bottom: 48px;
    }
    .sec_subTitle {
        font-size: 34px;
    }
    .contact_sec {
        padding: 94px 0px 175px 0px;
        border-bottom-width: 6px;
    }
    .contact_formBox {
        padding: 102px 105px 48px 105px;
        margin: 23px;
        border-radius: 0px 360px 0px 360px;
    }
    .cus_inp {
        font-size: 20px;
        margin-bottom: 46px;
        border-bottom-width: 1px;
    }
    .form_submitBtn {
        min-width: 216px;
        padding: 18px;
    }
    .contact_addressBox {
        padding-top: 62px;
    }
    .contact_addressIcon {
        height: 40px;
    }
    .contact_address {
        font-size: 18px;
    }
}

@media(max-width:1399.98px) {
    .header_sec {
        border-top-width: 5px;
        padding: 8px 0px 10px 0px;
    }
    .header_logo {
        width: 94px;
        height: 43.68px;
    }
    .def_btn {
        font-size: 14px;
    }
    .header_actBtns {
        margin-right: -22px;
    }
    .heroSec_Title {
        font-size: 55px;
    }
    .hero_sec {
        padding: 166px 0px 71px 0px;
    }
    .sec_desc {
        font-size: 16px;
    }
    .heroSec_desc {
        max-width: 380px;
    }
    .sec_title {
        font-size: 36px;
    }
    .intro_contentArea {
        padding: 85px 0px 77px 0px;
    }
    .intro_content {
        max-width: 690px;
    }
    .benefits_sec {
        padding: 92px 0px 50px 0px;
    }
    .benefits_secTitle {
        max-width: 590px;
    }
    .benefits_content {
        max-width: 650px;
    }
    .beneftis_itemIconBox {
        margin-right: 26px;
    }
    .beneftis_itemIcon {
        width: 50px;
    }
    .solution_sec {
        padding: 78px 0px 0px 0px;
    }
    .solution_content {
        max-width: 710px;
    }
    .solution_contentRow1 {
        margin-bottom: 42px;
    }
    .sec_subTitle {
        font-size: 28px;
    }
    .contact_sec {
        padding: 76px 0px 146px 0px;
        border-bottom-width: 4px;
    }
    .contact_formBox {
        padding: 78px 100px 32px 100px;
        margin: 20px;
        border-radius: 0px 300px 0px 300px;
    }
    .cus_inp {
        font-size: 16px;
        margin-bottom: 42px;
    }
    .form_textarea {
        height: 40px;
        margin-bottom: 40px;
    }
    .form_submitBtn {
        min-width: 180px;
        padding: 15px;
    }
    .contact_addressBox {
        padding-top: 50px;
    }
    .contact_addressIcon {
        height: 32px;
    }
    .contact_address {
        font-size: 16px;
    }
}

@media(max-width:1199.98px) {
    .header_actBtns {
        margin-right: 0px;
    }
    .hero_sec {
        background-position: left center;
    }
    .solution_content {
        max-width: 100%;
    }
    .contact_formBox {
        border-radius: 0px 200px 0px 200px;
    }
}

@media(max-width:991.98px) {
    .hero_sec {
        background-position: 30% center;
    }
    .intro_content,
    .benefits_content {
        max-width: 100%;
    }
    .contact_formBox {
        border-radius: 0px 150px 0px 150px;
    }
    .contact_sec {
        padding: 76px 0px 125px 0px;
    }
}

@media(max-width:767.98px) {
    .hero_sec {
        background-position: center;
        background: -webkit-gradient(linear, left top, right top, from(white), to(#ffffff30)), url("../img/hero_bg.png");
        background: -o-linear-gradient(left, white, #ffffff30), url("../img/hero_bg.png");
        background: linear-gradient(to right, white, #ffffff30), url("../img/hero_bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .def_btn {
        min-width: 140px;
    }
    .heroSec_Title {
        font-size: 44px;
    }
    .contact_formBox {
        padding: 78px 60px 32px 50px;
    }
    .sec_title {
        font-size: 34px;
    }
    .sec_subTitle {
        font-size: 24px;
    }
}

@media(max-width:575.98px) {
    .container {
        padding-left: 25px;
        padding-right: 25px;
    }
    .sec_title {
        font-size: 32px;
    }
    .contact_formBox {
        margin: 25px 0px;
    }
    .contact_formBox {
        padding: 78px 40px 32px 30px;
    }
    .header_actBtns {
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: var(--bg_white);
        padding: 10px 25px;
        text-align: center;
    }
    .header_actBtns .btn {
        min-width: 45%;
    }
    .contact_formBox {
        border-radius: 0px 100px 0px 100px;
    }
    .beneftis_itemIcon {
        width: 40px;
    }
}

@media(max-width:459.98px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero_sec {
        padding: 130px 0px 71px 0px;
    }
    .heroSec_Title {
        font-size: 36px;
    }
    .cus_inp {
        margin-bottom: 26px;
    }
    .contact_addressBox {
        padding-top: 32px;
    }
}/* Button used to open the contact form - fixed at the bottom of the page */.open-button {  background-color: #555;  color: white;  padding: 16px 20px;  border: none;  cursor: pointer;  opacity: 0.8;  position: fixed;  bottom: 23px;  right: 28px;  width: 280px;}/* The popup form - hidden by default */.form-popup {  display: none;  position: fixed;  bottom: 0;  right: 15px;  border: 3px solid #f1f1f1;  z-index: 9;}/* Add styles to the form container */.form-container {  max-width: 300px;  padding: 10px;  background-color: white;}/* Full-width input fields */.form-container input[type=text], .form-container input[type=password] {  width: 100%;  padding: 15px;  margin: 5px 0 22px 0;  border: none;  background: #f1f1f1;}/* When the inputs get focus, do something */.form-container input[type=text]:focus, .form-container input[type=password]:focus {  background-color: #ddd;  outline: none;}/* Set a style for the submit/login button */.form-container .btn {  background-color: #04AA6D;  color: white;  padding: 16px 20px;  border: none;  cursor: pointer;  width: 100%;  margin-bottom:10px;  opacity: 0.8;}/* Add a red background color to the cancel button */.form-container .cancel {  background-color: red;}/* Add some hover effects to buttons */.form-container .btn:hover, .open-button:hover {  opacity: 1;}


/*______________________________ end  media quries _____________________________*/