/*----------------------------------------------------
This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.
---------------------------------------------------- */
/*=====================================================================
@Template Name: Saasland
@Author: DroitThemes
@Developed By: Md Shahadat Hussain

@Default Styles

Table of Content:
01/ variables
02/ predefine
03/ button
04/ preloader
05/ header
06/ banner
07/ breadcrumb
08/ features
09/ service
10/ price
11/ about
12/ testimonial
13/ screenshot
14/ joblist
15/ faq
16/ portfolio
17/ contact
18/ error
19/ shop
20/ blog
21/ footer

=====================================================================*/
/*====================================================*/
/*=== fonts ====*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@300;400;500;600;700;900&display=swap");
/*===== color =====*/
/*====================================================*/
/*====================================================*/
a {
    text-decoration: none !important;
}
a:hover,
a:focus {
    text-decoration: none !important;
}

.row.m0 {
    margin: 0px;
}

.p0 {
    padding: 0px;
}

i:before {
    margin-left: 0px !important;
}

body {
    font: 400 15px/28px "Poppins", sans-serif;
    letter-spacing: 0px;
    color: #677294;
    padding: 0px;
    overflow-x: hidden;
    z-index: 0;
}

.body_wrapper {
    z-index: 20;
    overflow: hidden;
}

a,
.btn,
button {
    text-decoration: none;
    outline: none;
}
a:hover,
a:focus,
.btn:hover,
.btn:focus,
button:hover,
button:focus {
    text-decoration: none;
    outline: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
    box-shadow: none;
}

.seo_sec_title h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    color: #263b5e;
    margin-bottom: 15px;
}
.seo_sec_title p {
    font-size: 16px;
    font-weight: 300;
    color: #6a7695;
    margin-bottom: 0;
}

@media (min-width: 1250px) {
    .container {
        max-width: 1200px;
    }
}
@media (max-width: 767px) {
    .container {
        max-width: 100%;
    }
}
.container.custom_container {
    max-width: 1520px;
}

.f_size_50 {
    font-size: 50px;
}

.f_size_40 {
    font-size: 40px;
}

.f_size_30 {
    font-size: 30px;
}

.f_size_28 {
    font-size: 28px;
}

.f_size_22 {
    font-size: 22px;
}

.f_size_24 {
    font-size: 24px;
}

.f_size_20 {
    font-size: 20px;
}

.f_size_18 {
    font-size: 18px;
}

.f_size_16 {
    font-size: 16px;
}

.f_size_15 {
    font-size: 15px;
}

.l_height60 {
    line-height: 60px;
}

.l_height50 {
    line-height: 50px;
}

.l_height45 {
    line-height: 45px;
}

.l_height40 {
    line-height: 40px;
}

.l_height30 {
    line-height: 30px;
}

.l_height34 {
    line-height: 34px;
}

.l_height28 {
    line-height: 28px;
}

.f_p {
    font-family: "Poppins", sans-serif;
}

/*=========== font-weight ==============*/
.f_300 {
    font-weight: 300;
}

.f_400 {
    font-weight: 400;
}

.f_500 {
    font-weight: 500;
}

.f_600 {
    font-weight: 600;
}

.f_700 {
    font-weight: 700;
}

.f_900 {
    font-weight: 900;
}

.t_color {
    color: #051441;
}

.w_color {
    color: #fff;
}

.t_color2 {
    color: #3f4451;
}

.t_color3 {
    color: #222d39;
}

.d_p_color {
    color: #bdbed6;
}

.bg_color {
    background: #fbfbfd;
}

.dk_bg_one {
    background: #090a21;
}

.dk_bg_two {
    background: #0f1029;
}

.seo_title_color {
    color: #263b5e;
}

.mt_60 {
    margin-top: 60px;
}

.mt_30 {
    margin-top: 30px;
}

.mt_40 {
    margin-top: 40px;
}

.mt_70 {
    margin-top: 70px;
}

.mt_75 {
    margin-top: 75px;
}

.mt_100 {
    margin-top: 100px;
}

.mt_130 {
    margin-top: 130px;
}

.mb_70 {
    margin-bottom: 70px;
}

.mb_20 {
    margin-bottom: 20px;
}

.mb_15 {
    margin-bottom: 15px;
}

.mb_30 {
    margin-bottom: -30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb_40 {
    margin-bottom: 40px;
}

.mb_50 {
    margin-bottom: 50px;
}

.mb-50 {
    margin-bottom: -50px;
}

.mb_60 {
    margin-bottom: 60px;
}

.mb_90 {
    margin-bottom: 90px;
}

.pl_20 {
    padding-left: 20px;
}

.pl-30 {
    padding-left: 30px;
}

.pl_40 {
    padding-left: 40px;
}

.pl_50 {
    padding-left: 50px;
}

.pl_100 {
    padding-left: 100px;
}

.pl_70 {
    padding-left: 70px;
}

.pl_120 {
    padding-left: 120px;
}

.pr_100 {
    padding-right: 100px;
}

.pr_120 {
    padding-right: 120px;
}

.pr_70 {
    padding-right: 70px;
}

.pr_50 {
    padding-right: 50px;
}

.pr_20 {
    padding-right: 20px;
}

.pt_150 {
    padding-top: 150px;
}

.pt_120 {
    padding-top: 40px;
}

.sec_pad {
    padding: 120px 0px;
}

/*====================================================*/
/*====================================================*/
.btn_hover {
    overflow: hidden;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    z-index: 1;
    cursor: pointer;
    transition: all 0.3s linear;
}
.btn_hover:hover {
    color: #fff;
}

.btn_get {
    font: 500 14px/47px "Poppins", sans-serif;
    color: #1cb54c;
    border: 2px solid rgb(204, 197, 250);
    border-radius: 4px;
    box-shadow: 0px 20px 24px 0px rgba(0, 11, 40, 0.1);
    padding: 0px 23px;
    transform: perspective(1px) translateZ(0);
    transition-property: color;
    transition: all 0.3s ease;
    min-width: 120px;
    text-align: center;
}
.btn_get:hover {
    color: #fff;
    background: #1cb54c;
    border-color: #1cb54c;
    box-shadow: none;
}

.btn_get_two {
    box-shadow: none;
    background: #2a6fee;
    border-color: #2a6fee;
    color: #fff;
}
.btn_get_two:hover {
    background: transparent;
    color: #2a6fee;
}

.price_btn {
    font: 500 15px/53px "Poppins", sans-serif;
    color: #1cb54c;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 0px 25px;
    display: inline-block;
    transition: background 0.2s linear;
}
.price_btn:hover {
    color: #fff;
}

.slider_btn {
    font: 500 14px/20px "Poppins", sans-serif;
    border-radius: 45px;
    padding: 15px 35px;
    background: #fff;
}
.slider_btn:hover {
    color: #fff;
}

.btn_three {
    font: 500 14px "Poppins", sans-serif;
    color: #fff;
    background: #7444fd;
    border-radius: 3px;
    padding: 15px 30px;
    border: 1px solid #7444fd;
    margin-top: 50px;
    transition: all 0.3s linear;
    cursor: pointer;
    display: inline-block;
}
.btn_three:hover {
    color: #7444fd;
    background: transparent;
}

.agency_banner_btn {
    font: 500 14px "Poppins", sans-serif;
    color: #fff;
    background: #2a6fee;
    box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
    border-radius: 3px;
    padding: 16px 38px;
    border: 1px solid #2a6fee;
    transition: all 0.2s linear;
    cursor: pointer;
}
.agency_banner_btn:hover {
    color: #2a6fee;
    box-shadow: none;
    background: transparent;
}

.agency_banner_btn_two {
    font: 500 14px "Poppins", sans-serif;
    color: #222d39;
    position: relative;
    margin-left: 50px;
    transition: color 0.2s linear;
}
.agency_banner_btn_two:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #60656d;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: background 0.2s linear;
}
.agency_banner_btn_two:hover {
    color: #2a6fee;
}
.agency_banner_btn_two:hover:before {
    background: #2a6fee;
}

.software_banner_btn {
    font: 500 14px "Poppins", sans-serif;
    color: #fff;
    background: #3d64f4;
    box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
    display: inline-block;
    padding: 16px 42px;
    border-radius: 45px;
    border: 0px;
    transition: all 0.2s linear;
}
.software_banner_btn:hover {
    color: #3d64f4;
    background: #fff;
}

.video_btn {
    font: 500 14px "Poppins", sans-serif;
    color: #fff;
    margin-left: 30px;
}
.video_btn .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    color: #3d64f4;
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    margin-right: 18px;
    vertical-align: middle;
    box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.19);
}
.video_btn span {
    display: inline-block;
    position: relative;
}
.video_btn span:before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    background: #fff;
}
.video_btn:hover {
    color: #fff;
}

.btn_four {
    font: 500 14px "Poppins", sans-serif;
    padding: 16px 40px;
    border-radius: 45px;
    color: #fff;
    border: 1px solid #3d64f4;
    background: #3d64f4;
    cursor: pointer;
}
.btn_four:hover {
    color: #3d64f4;
    background: transparent;
}

.saas_banner_btn {
    padding: 16px 40px;
    background: #3d57f4;
    border-radius: 4px;
    color: #fff;
}
.saas_banner_btn:hover {
    color: #3d57f4;
    background: #fff;
}

.btn_five {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 3px;
    padding: 12px 28px;
}
.btn_five:hover {
    background: #3d57f4;
    border-color: #3d57f4;
}

.app_btn {
    box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
    background-color: rgb(64, 105, 235);
    display: inline-block;
    padding: 14px 40px;
    color: #fff;
    border-radius: 45px;
    border: 1px solid rgb(64, 105, 235);
}
.app_btn:hover {
    color: rgb(64, 105, 235);
    background: #fbfbfd;
    box-shadow: none;
}

.gr_btn {
    font: 500 14px "Poppins", sans-serif;
    color: #23b1fe;
    display: inline-block;
    padding: 15px 31px;
    position: relative;
    min-width: 140px;
    border-radius: 4px;
    background-image: linear-gradient(
        -48deg,
        rgb(35, 126, 253) 0%,
        rgb(36, 176, 254) 46%,
        rgb(36, 226, 255) 100%
    );
    z-index: 1;
    transition: color 0.2s linear;
}
.gr_btn:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 50%;
    width: calc(100% - 2px);
    bottom: 1px;
    border-radius: 4px;
    background: #fff;
    z-index: 0;
    transition: opacity 0.2s linear;
    transform: translatex(-50%);
}
.gr_btn .text {
    position: relative;
    z-index: 1;
}
.gr_btn:hover {
    color: #fff;
}
.gr_btn:hover:before {
    opacity: 0;
}

.btn_six {
    font-size: 15px;
    border: 1px solid #17c7bd;
    padding: 13px 35px;
    transition: all 0.3s linear;
    display: inline-block;
}
.btn_six + .btn_six {
    background: #ebfaf9;
    color: #17c7bd;
    margin-left: 20px;
}
.btn_six + .btn_six i {
    padding-right: 5px;
}
.btn_six + .btn_six:hover {
    background: #17c7bd;
    color: #fff;
}

.seo_btn {
    display: inline-block;
    padding: 11px 40px;
    border-radius: 4px;
}

.seo_btn_one {
    color: #2a6fee;
    background: #e8e1fc;
}
.seo_btn_one:hover {
    background: #2a6fee;
    color: #fff;
}

.seo_btn_two {
    color: #00c99c;
    background: #d4f6ee;
}
.seo_btn_two:hover {
    background: #00c99c;
    color: #fff;
}

.btn_1 {
    border: 1px solid #2a6fee;
    border-radius: 25px;
    display: inline-block;
    padding: 10px 40px;
    background: #2a6fee;
    color: #fff;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    transition: 0.5s;
    box-shadow: 0px 20px 50px 0px rgba(123, 78, 245, 0.3);
}
.btn_1:hover {
    color: #fff;
    box-shadow: none;
}

.play_btn {
    z-index: 1;
    width: 111px;
    height: 111px;
    line-height: 111px;
    text-align: center;
    position: relative;
    display: inline-block;
}
.play_btn:before {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    content: "";
    position: absolute;
    border-radius: 100%;
    border: 1px dashed #d1d0cf;
    animation: spinner 7s infinite linear;
}
.play_btn span {
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    color: #ffffff;
    font-size: 40px;
    line-height: 74px;
    position: absolute;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    box-shadow: 1.392px 9.903px 10px 0px rgba(66, 97, 234, 0.21);
    background-image: linear-gradient(90deg, #2a3bd8 0%, #5075ef 100%);
}

@keyframes spinner {
    to {
        transform: rotateZ(360deg);
    }
}
/*====================================================*/
/*====================================================*/
/*=========== Preloader ============*/
.ctn-preloader {
    align-items: center;
    cursor: default;
    display: flex;
    height: 100%;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9000;
}
.ctn-preloader .animation-preloader {
    z-index: 1000;
}
.ctn-preloader .animation-preloader .spinner {
    animation: spinner 1s infinite linear;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000000;
    height: 9em;
    margin: 0 auto 3.5em auto;
    width: 9em;
}
.ctn-preloader .animation-preloader .txt-loading {
    font: bold 5em "Poppins", sans-serif;
    text-align: center;
    user-select: none;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading {
    color: rgba(5, 20, 65, 0.2);
    position: relative;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
    animation: letters-loading 4s infinite;
    color: rgb(0, 32, 130);
    content: attr(data-text-preloader);
    left: 0;
    opacity: 0;
    font-family: "Poppins", sans-serif;
    position: absolute;
    top: -3px;
    transform: rotateY(-90deg);
}
.ctn-preloader
    .animation-preloader
    .txt-loading
    .letters-loading:nth-child(2):before {
    animation-delay: 0.2s;
}
.ctn-preloader
    .animation-preloader
    .txt-loading
    .letters-loading:nth-child(3):before {
    animation-delay: 0.4s;
}
.ctn-preloader
    .animation-preloader
    .txt-loading
    .letters-loading:nth-child(4):before {
    animation-delay: 0.6s;
}
.ctn-preloader
    .animation-preloader
    .txt-loading
    .letters-loading:nth-child(5):before {
    animation-delay: 0.8s;
}
.ctn-preloader
    .animation-preloader
    .txt-loading
    .letters-loading:nth-child(6):before {
    animation-delay: 1s;
}
.ctn-preloader
    .animation-preloader
    .txt-loading
    .letters-loading:nth-child(7):before {
    animation-delay: 1.2s;
}
.ctn-preloader
    .animation-preloader
    .txt-loading
    .letters-loading:nth-child(8):before {
    animation-delay: 1.4s;
}
.ctn-preloader.dark .animation-preloader .spinner {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
}
.ctn-preloader.dark .animation-preloader .txt-loading .letters-loading {
    color: rgba(255, 255, 255, 0.2);
}
.ctn-preloader.dark .animation-preloader .txt-loading .letters-loading:before {
    color: #fff;
}
.ctn-preloader p {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 8px;
    color: #3b3b3b;
}
.ctn-preloader .loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    z-index: 1;
    pointer-events: none;
}
.ctn-preloader .loader .row {
    height: 100%;
}
.ctn-preloader .loader .loader-section {
    padding: 0px;
}
.ctn-preloader .loader .loader-section .bg {
    background-color: #ffffff;
    height: 100%;
    left: 0;
    width: 100%;
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.ctn-preloader .loader.dark_bg .loader-section .bg {
    background: #111339;
}
.ctn-preloader.loaded .animation-preloader {
    opacity: 0;
    transition: 0.3s ease-out;
}
.ctn-preloader.loaded .loader-section .bg {
    width: 0;
    transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
}

@keyframes spinner {
    to {
        transform: rotateZ(360deg);
    }
}
@keyframes letters-loading {
    0%,
    75%,
    100% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    25%,
    50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}
@media screen and (max-width: 767px) {
    .ctn-preloader .animation-preloader .spinner {
        height: 8em;
        width: 8em;
    }
    .ctn-preloader .animation-preloader .txt-loading {
        font: bold 3.5em "Poppins", sans-serif;
    }
}
@media screen and (max-width: 500px) {
    .ctn-preloader .animation-preloader .spinner {
        height: 7em;
        width: 7em;
    }
    .ctn-preloader .animation-preloader .txt-loading {
        font: bold 2em "Poppins", sans-serif;
    }
}
/*====================================================*/