:root {
    --primary: #FFFFFF;
    --white: #fff;
    --text-white: #fff;
    --text-light: #dadfe2;
    --text-dark: #0b1944;
    --bg-color: #0a0b0d;
    --bg-secondary: #151515;
    --bg-dark: #000000;
    --text-black: #000000;
    --card-bg: #181818;
}

.main-header.header_area {
    z-index: 999 !important;
    transition: all .5s;
}

.main-header.header_area .navbar-brand img {
    max-width: 180px;
}

.main-header.header_area.navbar_fixed {
    background-color: #000000b0 !important;
    backdrop-filter: blur(10px)
}

.main-header.header_area .sticky_logo img.dark-theme-logo {
    display: block;
}

.main-header.header_area .sticky_logo img.light-theme-logo {
    display: none;
}

.main-header.header_area.navbar_fixed .menu_poss .w_menu .nav-item .nav-link,
.main-header.header_area.navbar_fixed .menu_poss .w_menu .nav-item:hover .nav-link {
    color: var(--text-white)
}

.menu>.nav-item .nav-link {
    color: var(--text-white) !important
}

.main-header .menu>.nav-item.submenu .dropdown-menu {
    background: #f3f9fb !important;
    padding: 7px !important;
    border-radius: 8px !important;
    min-width: 300px;
}



.main-header.header_area.navbar_fixed .menu_poss .w_menu .nav-item .nav-link:before,
.main-header.header_area.navbar_fixed .menu_poss .w_menu .nav-item:hover .nav-link:before {
    background: var(--text-white) !important
}

.main-header.header_area .nav-item .nav-link i {
    display: inline-block;
    font-size: 13px;
    min-width: 20px;
    text-align: right;
    color: #959A9F;
    position: relative;
    top: 2px;
}

.main-header.header_area .menu_poss .w_menu .nav-item .nav-link .dropdown-menu .nav-link,
.main-header.header_area.navbar_fixed .w_menu .nav-item .dropdown-menu .nav-link strong {
    color: var(--text-white) !important
}

.menu>.nav-item.submenu .dropdown-menu .nav-item.dropdown_item {
    padding: 0 !important;
}

.menu>.nav-item.submenu .dropdown-menu .nav-item.dropdown_item .nav-link {
    color: #000 !important;
    font-weight: 500;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    padding: 5px 25px 5px 20px !important;
    position: relative;
    overflow: hidden;
    transition: .3s;
    border-radius: 8px !important
}

.menu>.nav-item.submenu .dropdown-menu .nav-item.dropdown_item .nav-link:hover {
    background: #fff;
}

.menu_toggle .hamburger-cross span,
.menu_toggle .hamburger span {
    background: var(--text-white);
}

.f_700 {
    font-weight: 700 !important;
}

.er_btn {
    color: var(--text-black) !important;
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    padding: 3px 15px;
    width: fit-content;
    border-radius: 50px;
    min-width: 110px;
    text-align: center;
}

.er_btn:hover {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    box-shadow: 0px 13px 40px -11px var(--primary);
}

.er_btn.getDemoButton {
    background: var(--primary);
    color: var(--white) !important;
}

.er_btn.getDemoButton:hover {
    background: var(--white);
    color: var(--primary) !important;
}

.er_btn.getDemoButton:hover {
    background: var(--white) !important;
    color: var(--primary) !important;
}

.section_container .intro {
    height: fit-content;
    padding-top: 110px;

}

a.btn_primary {
    min-width: 140px;
    min-height: 45px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    width: fit-content;
    color: var(--text-white);
    background: var(--primary);
    font-size: 15px;
    border: 2px solid transparent;
    transition: all .3s;
}

a.btn_primary:hover {
    border-color: var(--primary);
    background: none;
    color: var(--primary);
    box-shadow: 0 10px 40px -15px var(--primary) !important;
    /* transform: scale(1.04); */
}

form .form-group textarea,
form .form-group input {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 8px;
    border: 0 !important;
    height: 53px;
    width: 100%;
    color: var(--text-white);
    outline: 0 !important;
    font-size: 18px;
}

form .form-group textarea {
    height: fit-content;
    line-height: normal;
}

form .form-group input::placeholder,
form .form-group textarea::placeholder {
    color: #4E4E4E;
    /* your desired color */
    opacity: 1;
    /* ensures full visibility in Firefox */
}

/* For older WebKit browsers (Chrome, Safari, Edge Chromium) */
form .form-group input::-webkit-input-placeholder,
form .form-group textarea::-webkit-input-placeholder {
    color: #4E4E4E;
}

/* For Mozilla Firefox 19+ */
form .form-group input::-moz-placeholder,
form .form-group textarea::-moz-placeholder {
    color: #4E4E4E;
    opacity: 1;
}

/* For Mozilla Firefox 4 to 18 */
form .form-group input:-moz-placeholder,
form .form-group textarea:-moz-placeholder {
    color: #4E4E4E;
    opacity: 1;
}

/* For Internet Explorer 10–11 */
form .form-group input:-ms-input-placeholder,
form .form-group textarea:-ms-input-placeholder {
    color: #4E4E4E;
}

/* For Microsoft Edge (Legacy) */
form .form-group input::-ms-input-placeholder,
form .form-group textarea::-ms-input-placeholder {
    color: #4E4E4E;
}

button.btn {
    color: var(--text-black) !important;
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    border-radius: 8px;
    padding: 5px;
    width: fit-content;
    min-width: 170px;
    height: 50px;
    font-size: 16px;
    font-weight: 500;
}

a.btn_primary span {
    display: block;
    margin: auto;
    width: fit-content;
}

a.btn_primary.connectUsBtn {
    color: #172D8C;
    background: var(--white);
    font-weight: 500;

}

a.btn_primary.connectUsBtn:hover {
    border-color: var(--primary);
    background: none;
    color: var(--text-white);
    box-shadow: 0 10px 40px -15px var(--primary) !important;
}

.open .joinNowForm {
    display: none !important;
}

.open.open2 .contactForm {
    display: none !important;
}

.open.open2 .joinNowForm {
    display: block !important;
}

.section_container .intro .intro_content {
    position: relative;
    top: 0 !important;
}

.side_menu {
    position: fixed;
    bottom: 100px;
    display: block;
    right: 0;
    z-index: 999;
}

.side_menu a {
    display: flex;
    width: fit-content;
    border: 0 !important;
    padding: 6px 22px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    min-width: 140px;
    align-items: center;
    border-radius: 50px 0 0 50px;
    position: relative;
    right: -20px;
    transition: all 0.4s;
    color: var(--white) !important;
}

.side_menu a img {
    min-width: 17px;
    max-width: 17px;
    margin-right: 11px;
}

.side_menu a.WhatsApp {
    background: #44c452 !important;
    box-shadow: 0 16px 12px -4px rgb(68 196 82 / 73%) !important;
}

.side_menu a.skype {
    background: #00a9f1 !important;
    box-shadow: 0 16px 12px -4px rgb(0 169 241 / 51%) !important;
}

.side_menu a:hover {
    right: 0;
}

.erp_testimonial_item .content {
    min-height: 260px;
}

.search_boxs .btn_three {
    display: block;
    border-radius: 50px;
    padding: 10px 0px;
    min-width: 150px;
}

footer .list-unstyled li img {
    max-width: 35px;
    min-width: 35px;
    margin-right: 15px;
}

.section_title {
    padding-bottom: 50px;
}

.section_title p {
    color: var(--text-white);
    opacity: .6;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
}

.sec_pad {
    padding: 65px 0;
}

.section_title h2 {
    font-size: 40px;
    color: var(--text-white);
    margin: 0;
    line-height: 50px;
}

.section_title h1 {
    font-size: 40px;
    color: var(--text-white);
    margin: 0;
    line-height: 50px;
}

.sec_sub_text {
    font-size: 20px;
    color: var(--text-white);
    margin: 0;
    padding-bottom: 15px;
}

.sec_sub_text_p {
    color: #B3C8CD !important;
    font-size: 15px;
    line-height: 30px;
}

.icon_box {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.icon_box img {
    max-width: 60px;
}

.software_banner_area {
    background: url('../img/bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.software_banner_btn {
    background: #F0F0F0;
    color: var(--text-black) !important;
}

.software_banner_btn:hover {
    color: var(--primary);
}

.hosting_service_area {
    background: var(--bg-dark);
}

.software_banner_area {
    height: fit-content;
    min-height: 100vh;
}

.software_banner_area::before {
    display: none !important;
}

.software_banner_area .software_banner_content {
    position: relative;
    z-index: 999;
    min-width: 100%;
}

.hosting_features_area {
    background: var(--bg-dark);
}

.software_featured_area_two {
    background: linear-gradient(116.63deg, #303030 23.46%, #111111 76.54%);
}

.software_featured_content .btn_four {
    color: #112161 !important;
}

.hosting_service_area.list_of_benefits .hosting_service_item {
    background: var(--card-bg) !important;
    border: 0;
    border-radius: 0;
    margin: 0;
    height: 100%;
}

.hosting_features_area.all_in_one {
    background: var(--bg-color);
}

.design_tab_area {
    background: var(--bg-dark);
}

.design_tab_area .nav-item {
    margin-bottom: 15px;
}

.design_tab_area .nav-item .nav-link {
    background: var(--card-bg);
    padding: 25px 30px;
}

.design_tab_area .nav-item .nav-link p {
    line-height: normal !important;
    font-weight: 500;
}

.design_tab_area .nav-item .nav-link.active {
    background: linear-gradient(116.63deg, #464646 23.46%, #262626 76.54%);
}

.pos_about_area {
    background: linear-gradient(116.63deg, #303030 23.46%, #111111 76.54%);

}

.pos_about_area li {
    display: flex;
    padding: 0 0 34px;
    margin: 0 !important;
    color: var(--text-white);
    font-size: 18px;

}

.pos_about_area li::before {
    display: none !important;
}

.pos_about_area li span {
    display: block;
    min-width: 40px;
}

.pos_about_area li span img {
    width: 24px;
}

.pos_subscribe .form-group input {
    width: 100%;
    height: 50px;
    font-size: 15px;
    color: var(--text-white);
    padding: 0 20px;
    background: var(--bg-dark);
}

.pos_subscribe .btn_pos {
    background: var(--primary);
    font-size: 15px;
    font-weight: 500;
    padding: 12px 0px;
    text-align: center;
    width: 100%;
    border-radius: 50px;
    color: var(--text-black) !important;
}

.footer_area {
    background: var(--bg-dark);
}

.footer_area p {
    color: #7F8490;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}


.breadcrumb_area {
    background: linear-gradient(116.63deg, #303030 23.46%, #111111 76.54%);

    padding: 150px 0px 70px;
}

.role_section {
    background: var(--bg-secondary);
}

.product_info .hosting_features_area {
    position: relative;
}

.bring_efficiency_section {
    background: linear-gradient(116.63deg, #464646 23.46%, #262626 76.54%);

}

.product_info .pos_about_area {
    background: var(--bg-dark) !important;
}

.benefits_section {
    position: relative;
}

.benefits_section .benefits_banner_img img {
    width: 320px;
}


.start_growing {
    background: url('../img/start-growing.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}


.start_growing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #262626e8;
    backdrop-filter: blur(2px);
}

.start_growing .container {
    position: relative;
    z-index: 99;
}

.start_growing a.btn_primary.connectUsBtn {
    min-width: 200px;
    border-radius: 10px;
    color: #000000;
    background: #F0F0F0;
    border: 0 !important;
}

.service_area {
    background: var(--bg-dark);
}

.service_area .service_info {
    padding: 0 20px;
    margin: 0 -7px !important;
}

.service_area .service_info .col-12 {
    padding: 0 7px !important;
}


.service_area .service_info .service_item {
    margin: 0;
    background: var(--card-bg);
    cursor: unset;
    border: 0;
    box-shadow: none;
    width: 100%;
    border-radius: 5px;
    padding: 25px 25px 40px;
    height: 100%;
}

.service_area .service_info .service_item h4 {
    font-size: 20px;
    color: var(--text-white);
    margin: 0;
    line-height: 30px;
}

.service_area .service_info .service_item h6 {
    margin: 0;
    display: flex;
    align-items: center;
    min-width: 50px;
    width: 50px;
    height: 50px;
    background: #ffffff63;
    border-radius: 50%;
    position: relative;
}

.service_area .service_info .service_item h6::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin: auto;
    background: #F0F0F0;
    border-radius: 50%;
}

.service_area .service_info .service_item h6 strong {
    position: relative;
    z-index: 99;
    display: block;
    margin: auto;
    color: #000;
    font-size: 20px;
    font-weight: 600;
}

.service_area .service_info .service_item p {
    color: #B3C8CD !important;
    font-size: 15px;
    line-height: 30px;
}

.why-Zatract .benefits_section {
    background: var(--bg-secondary);
}

.hosting_features_area.love_Zatract {
    background: linear-gradient(116.63deg, #464646 23.46%, #262626 76.54%);
}

.why-Zatract .hosting_features_area .feature_banner_img img,
.product_info .hosting_features_area .feature_banner_img img {
    border-radius: 10px 0 0 10px;
    box-shadow: 0 0px 0px 10px #6767671A;
}

.why-Zatract .hosting_features_area.left_side_image .feature_banner_img img,
.product_info .hosting_features_area.left_side_image .feature_banner_img img {
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0 0px 0px 10px #6767671A;
}

.plans .header_area,
.connect-us .header_area,
.why-Zatract .header_area {
    /* background: linear-gradient(116.63deg, #303030 23.46%, #111111 76.54%); */
    background: url('../img/bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.plans .header_area.navbar_fixed,
.connect-us .header_area.navbar_fixed,
.why-Zatract .header_area.navbar_fixed {
    background: #000000b0 !important;
}

.contact_info_area {
    background: var(--bg-dark);
}

.contact_info_area .contact_info_item {
    border: 0 !important;
}

.contact_info_area .contact_info_item h6 {
    font-size: 20px;
    color: var(--text-white);
    margin-bottom: 10px !important;
}

.contact_info_area .contact_info_item p {
    color: #B3C8CD !important;
    font-size: 15px;
    line-height: 30px;
}

.contact_info_area .contact_info_item p a {
    color: #B3C8CD !important;
    font-size: 15px;
    padding: 0 5px;
}

.connect-us .pos_about_area {
    background: var(--bg-secondary) !important;
}

.plans .pos_about_area {
    background: var(--bg-dark) !important;
}

.plans .pos_about_area .note h6 {
    margin: 0;
    padding: 10px 10px 20px;
    font-size: 15px;
    color: var(--text-white);
    opacity: .5;
    font-weight: 400;
}

.toggle-switch {
    width: fit-content;
    margin: 0 15px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 26px;
    margin: 0 !important;
}

.switch::after {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    bottom: 0;
    margin: auto;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: 1px solid #2C2C2C;
    border-radius: 50px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: var(--bg-secondary);
    transition: .4s;
    border-radius: 34px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: var(--text-black);
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--primary);
}

input:checked+.slider::before {
    background-color: var(--bg-color);
}


input:checked+.slider:before {
    transform: translateX(33px);
}

.plans .section_title h6 {
    width: fit-content;
    margin: 0 auto;
    font-size: 15px;
    color: var(--text-white);
    font-weight: 300;
}

.price_item {
    /* background: var(--bg-secondary); */
    padding: 25px;
    border-radius: 10px;
    height: 100%;
    text-align: center;
    position: relative;
}

.price_item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(177deg, #bbb6b6 24.33%, rgba(173, 167, 167, 0.4392156863) 75.67%) !important;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    margin: auto;
    border-radius: 6px;
    opacity: 0.4;
}


.price_item::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    border: 0 !important;
    left: 0 !important;
    bottom: 0;
    right: 0;
    background: linear-gradient(285.05deg, #181818 24.33%, #242424 75.67%);
    width: calc(100% - 2px) !important;
    height: calc(100% - 2px) !important;
    margin: auto;
    display: block !important;
    border-radius: 6px !important;
}

.price_item .price_item_inner {
    position: relative;
    z-index: 99;
}

.price_item h5 {
    font-size: 16px;
    text-transform: uppercase;
    color: var(--text-white);
    padding-bottom: 15px;
    letter-spacing: 1px;
}

.price_item h5 span {
    background: #482603;
    letter-spacing: 0;
    font-size: 10px;
    text-transform: capitalize !important;
    padding: 4px 5px;
    min-width: 72px;
    text-align: center;
    border-radius: 50px;
    color: #FF823F;
}

.price_item .img_box {
    margin-bottom: 20px;
}

.price_item .img_box img {
    width: 90px;
}

.price_item h2 {
    margin: 0;
    padding-bottom: 0;
    color: var(--text-white);
    font-size: 40px;
    font-weight: 600;
}

.price_item h2 sup {
    font-size: 13px;
    font-weight: 300;
    top: -2em;
}

.price_item ul {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

.price_item ul li {
    display: flex;
    align-items: center;
    padding: 0px 0 30px;
}

.price_item h3 {
    margin: 0;
    color: #676767;
    font-weight: 500;
    font-size: 15px;
    padding-bottom: 10px;
}

.price_item ul li h6 {
    margin: 0;
    color: #676767;
    font-size: 15px;
    width: 100%;
}

.price_item ul li i {
    display: block;
    min-width: 30px;
}

.price_item ul li i img {
    width: 17px;
    display: block;
}

.price_item ul li i img.if_active {
    display: none;
}

.price_item ul li.active i img.if_active {
    display: block;
}

.price_item ul li.active i img.if_disabled {
    display: none !important;
}

.price_item ul li.active h6 {
    color: var(--text-white);
}

.price_item a.price_btn {
    color: var(--text-black);
    border-color: var(--primary);
    background: var(--primary);
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    height: 45px;
    border-radius: 8px;
    line-height: 45px;
}

.price_item a.price_btn:hover {
    color: var(--white);
    border-color: var(--white);
    background: transparent;
}

.price_item .offer {
    border-bottom: 1px dashed #000000;
    display: block;
    height: fit-content;
    padding: 15px 20px 20px;
    width: fit-content;
    margin: 0 auto;
}

@media only screen and (max-width: 600px) {}

@media only screen and (min-width: 600px) {}

@media only screen and (min-width: 768px) {
    .benefits_section .benefits_banner_img img {
        width: calc(100% - 100px);
        max-width: 500px;
    }
}

@media only screen and (min-width: 992px) {
    .software_banner_area {
        padding-top: 100px !important;
    }

    .software_banner_area .software_banner_img {
        position: absolute;
        top: 100px;
        bottom: 0;
        height: fit-content;
        margin: auto 0;
        width: 100%;
        right: 0%;
    }

    .menu>.nav-item:hover .dropdown-menu::after {
        content: '';
        position: absolute;
        top: -8px;
        left: 63px;
        height: 17px;
        width: 17px;
        background: #f3f9fb;
        transform: rotate(45deg);
        z-index: -1;
    }


    .why-Zatract .hosting_features_area .feature_banner_img,
    .product_info .hosting_features_area .feature_banner_img {
        position: absolute;
        right: 0%;
        top: 0;
        bottom: 0;
        width: 100%;
        height: fit-content;
        margin: auto 0;
        max-height: calc(100vh - 0px);
    }

    .why-Zatract .hosting_features_area .feature_banner_img img,
    .product_info .hosting_features_area .feature_banner_img img {
        /* max-width: 100%; */
        position: relative;
        right: -0%;
        max-height: 500px;
    }


    .why-Zatract .hosting_features_area.left_side_image .feature_banner_img img,
    .product_info .hosting_features_area.left_side_image .feature_banner_img img {
        /* max-width: 100%; */
        position: relative;
        right: unset;
    }

    .benefits_section .benefits_banner_img {
        position: absolute;
        top: unset;
        right: 0;
        bottom: 0;
        margin: auto 0;
        width: 100%;
        height: fit-content;
    }

    .benefits_section .benefits_banner_img img {
        width: calc(100% - 0px);
        max-width: 100%;
    }


    .service_area .service_container {
        max-width: 960px;
        margin: 0 auto !important;
    }

    /* .service_area .service_info {
        padding: 0 0;
        overflow: hidden;
        scroll-snap-type: unset;
        scrollbar-width: unset;
        gap: 0
    } */

    /* .service_area .service_info .col-12 {
        margin: 0;
        scroll-snap-align: none;
        height: 100%;
        width: 100%;
        padding: 0 7px !important;
    } */

}

@media only screen and (max-width: 991px) {
    .header_area {
        background-color: #000000b0 !important;
        backdrop-filter: blur(10px) !important;
    }

    .navbar-collapse {
        background: none !important;
    }

    .navbar-collapse .navbar-nav {
        background: none !important;
    }

    .service_area .service_info {
        padding: 0 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        flex-wrap: nowrap;
        display: flex;
        gap: 15px;
        margin: 0 0 !important;
    }

    .service_area .service_info .col-12 {
        width: 260px !important;
        max-width: 260px;
        padding: 0 !important;
        scroll-snap-align: center;
    }
}

@media only screen and (min-width: 1200px) {
    .benefits_section .benefits_banner_img img {
        width: fit-content;
        max-width: fit-content;
        max-height: 450px;
    }
}

@media only screen and (min-width: 1250px) {
    .service_area .service_container {
        max-width: 1200px;
    }
}