/**###########################################
#START


--------#####--------
Template Name: Attor
Template URI: 
Description: This is HTML5 template
Author: Md Ridoy Khan
Author URI: https://github.com/Md-ridoyKhan
Support: ridoykhan.cse.web@gmail.com
Version: 1.0.0
--------#####--------

===========================
CSS INDEX
===========================

1) home-one
    1.1) preloader area here
    1.2) header area here
    1.3) hero area here
    1.4) company logo area here
    1.5) features area here
    1.6) about features area here
    1.7) grow area here
    1.8) apps area here
    1.9) testimonials area here
    1.10) choose area here
    1.11) cta area here
    1.12) footer area here

2) about
    2.1) about hero area here
    2.2) about funfact area here
    2.3) about features area here
    2.4) about values area here

3) pricing
    3.1) choose area here
    3.2) pricing offer area here
    3.3) about values area here

4) integrates
    4.1) about values area here
    4.2) integrates area here

5) integrates-details
    5.1) integrates details hero area here
    5.2) integrates details about area here
    5.3) integrates area here

6) blog
    6.1) about hero area here
    6.2) blog filter area here
    6.3) blog area here

7) blog-details
    7.1) about hero area here
    7.2) blog details area here

8) contact
    8.1) contact hero area here
    8.2) contact area here
    8.3) contact accordion area here

9) sign-up
    9.1) sign up area here

10) sign-in
    10.1) sign in area here

11) home-two
    11.1) header area here
    11.2) hero two area here
    11.3) company logo area here
    11.4) features two area here
    11.5) customer area here
    11.6) testimonial2 area here
    11.7) offer area here
    11.8) funfact area here
    11.9) choose area here
    11.10) latest blog area here
    11.11) cta2 area here
    11.12) footer area here


#theEND
###########################################**/


.mb30 {
	margin-bottom:30px !important
}

.mt15 {
	margin-top:15px !important
}

img.funkcje {
    -webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,0.6);
    box-shadow: 0 0 100px 0 rgba(0,0,0,0.6);
}

.grow_thumb {
    margin-bottom: 30px;
}

li.fw_list {
    line-height: 27px;
}


.text-center button {
    margin: auto;
}


img.lbarcode {
    width: 71px;
}

.mt10 {
	margin-top:10px !important
}


/*########################
1) home-one ---------------[########################]
########################*/

/*===========================
1.1) preloader area here
===========================*/
.preloder {
	width: 100%;
	height: 100vh;
	position: fixed;
	background: var(--yellowH2);
	top: 0;
	left: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.preloder.preloderH2 {
	background: var(--greenH2);
}
.pre-loading {
	position: relative;
	width: 70px;
	height: 70px;
	background: transparent;
	border: 10px solid var(--blackDesH2);
	border-top: transparent;
	border-bottom: transparent;
	border-radius: 50%;
	animation: loading 1.2s linear infinite;
}

@keyframes loading {
	25% {
		background: transparent;
	}
	to {
		transform: rotate(360deg);
	}
}
/*---------------------------
1.1) preloader area ends here
---------------------------*/


/*===========================
1.2) header area here
===========================*/
/* common button  */
.buttonH1 {
    padding: 19px 22px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    /* text-transform: capitalize; */
    border-radius: 4px;
}
.mainButton.buttonH1 {
    color: var(--white);
    background: var(--blackH1);
    border: 1px solid var(--blackH1);
}
.secondaryButton.buttonH1 {
    color: var(--blackH1);
    background: var(--yellowH1);
    border: 1px solid var(--yellowH1);
}
.transparentButton.buttonH1 {
    color: var(--blackH1);
    background: transparent;
    border: 1px solid var(--blackH1);
}
.mainButton.buttonH1:hover, 
.secondaryButton.buttonH1:hover, 
.transparentButton.buttonH1:hover {
    color: var(--blackH1) !important;
    background: var(--yellowHover) !important;
    border: 1px solid var(--yellowHover) !important;
}
/* vector & pattern images area here  */
.vector {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.vector img {
    position: absolute;
}
.patterns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.patterns img{
    position: absolute;
}
/* common button ends */
header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--white);
    z-index: 100000;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    z-index: 200000;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
}
.header_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* logo container */
.logo_container {
    margin-right: 120px;
}
.logo_container a {
    display: inline-block;
}
/* header container  */
.header_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
/* closing bar  */
.closing_container {
    display: none;
}
.closing_container .content {
    width: 40px;
    height: 40px;
    background: var(--blackH1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.closing_container .content span {
    font-size: 20px;
    line-height: 100%;
    color: var(--white);
}
.closing_container .content:hover {
    background: var(--blackDesH1);
}
/* nav content  */
.header .header_container .header_nav .navigation {
    display: flex;
    align-items: center;
    gap: 40px;
}
.header .header_container .header_nav .navigation > li {
    position: relative;
}
.header .header_container .header_nav .navigation > li > a {
    color: var(--blackH1);
    font-weight: 500;
    line-height: 24px;
    display: inline-block;
    /* padding: 40px 0px; */
    /* text-transform: capitalize; */
    padding-top: 40px;
    padding-bottom: 5px;
    margin-bottom: 35px;
}
.header .header_container .header_nav .navigation li a:hover{
    color: var(--blackDesH1);
}
.header .header_container .header_nav .navigation li .sub {
    background: var(--white);
    position: absolute;
    width: max-content;
    top: 130%;
    left: 0;
    padding: 24px 0px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    border-top: 4px solid var(--yellowH1);
    border-bottom: 4px solid var(--yellowH1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.header2 .header_container .header_nav .navigation li .sub {
    border-top: 4px solid var(--greenH2);
    border-bottom: 4px solid var(--greenH2);
}
.header .header_container .header_nav .navigation > li:hover .sub {
    top: 100%;
    opacity: 1;
    visibility: visible;
}
.header .header_container .header_nav .navigation li .sub li a {
    padding: 10px 30px;
    display: block;
}
.header.sticky .header_container .header_nav .navigation > li > a {padding-top: 28px;}
/* button content  */
.header_container .header_button {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header_container .header_button .buttonH1 {
    padding: 14px 18px;
}
/* Mobile menu bar container */
.bar_container {
    display: none;
}
.bar_container .content {
    width: 40px;
    height: 40px;
    background: var(--blackH1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.bar_container .content span {
    font-size: 20px;
    line-height: 100%;
    color: var(--white);
}
.bar_container .content:hover {
    background: var(--blackDesH1);
}
/* sub header area ends */
/*---------------------------
1.2) header area ends here
---------------------------*/


/*===========================
1.3) hero area here
===========================*/
/* common area  */
.section_header {
    margin-bottom: 60px;
}
.section_heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
span.marking {
    background: url("../images/vector/headerCircleircle.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    font-family: inherit;
}
/* common area ends */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: 104px;
}
.hero_wrapper {
    background: var(--blackH1);
    position: relative;
    overflow: hidden;
    padding: 160px 0px;
    z-index: 0;
}
/* content  */
.hero_container .hero_header {
    color: var(--white);
}
.hero_container .hero_des {
    color: rgba(211, 211, 211, 1);
    line-height: 32px;
    margin: 30px 0px 48px;
}
/* button area here  */
.hero_container .hero_button {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.hero_container .hero_button .transparentButton.buttonH1 {
    color: var(--white);
    background: transparent;
    border: 1px solid var(--white);
}
/* hero condition  */
.hero_container .hero_condition {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 80px;
}
.hero_container .hero_condition li p {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
}
/* banner image  */
.hero_wrapper .banner_image {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 46%;
}
/* vector image  */

.hero_wrapper .vector img {
    max-width: 5%;
    bottom: 0;
    left: 0;
}
/*---------------------------
1.3) hero area ends here
---------------------------*/


/*===========================
1.4) company logo area here
===========================*/
.company_logo {
    position: relative;
    overflow: hidden;
}
.company_logo .cl_wrapper {
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(18, 20, 29, 0.2);
}
.company_logo .cl_wrapper .cl_container {
    text-align: center;
}
.cl_container .cl_headline {
    margin-bottom: 60px;
}
.cl_container .cl_headline span {
    font-weight: 700;
    text-decoration: underline;
}
.cl_container .cl_item {
    display: flex;
    justify-content: center;
}
.cl_container .cl_item img {
    width: auto !important;
}
/*---------------------------
1.4) company logo area ends here
---------------------------*/


/*===========================
1.5) features area here
===========================*/
.features {
    position: relative;
    overflow: hidden;
}
.features .features_wrapper {
    background: url("../images/banner/featuresBanner.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    padding-bottom: 100px;
}
.features_container .features_items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}
.features_container .features_item {
    background: #FFFFFF;
    box-shadow: 0px 60px 80px -32px rgba(0, 0, 0, 0.06);
    padding: 56px 50px;
}
.features_container .features_content .thumb {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellowH1);
    border-radius: 50%;
}
.features_container .features_content .thumb img {
    max-width: 30px;
}
.features_container .features_content .content h4 {
    font-weight: 900;
    line-height: 29px;
    padding: 30px 0px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.features_container .features_content .content p {
    font-size: 16px;
    line-height: 26px;
}
/*---------------------------
1.5) features area ends here
---------------------------*/


/*===========================
1.6) about features area here
===========================*/
.about_features {
    position: relative;
    overflow: hidden;
}
.abf_container .abf_items .abf_item:not(:last-child) {
    margin-bottom: 110px;
}
.abf_container .abf_content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    grid-gap: 100px;
}
.abf_container .abf_content .section_header {
    margin-bottom: 30px !important;
}
.abf_container .abf_content .section_heading {
    text-align: start;
    max-width: 100%;
}
.abf_container .abf_list li:not(:last-child) {
    margin-bottom: 20px;
}
.abf_container .abf_list li p {
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
    line-height: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.abf_container .abf_list li p img {
    max-width: 24px;
}
.abf_container .abf_button {
    margin-top: 40px;
}
.abf_container .abf_button .buttonH1 {
    text-transform: uppercase;
}
.abf_container .abf_description p {
    line-height: 32px;
    font-family: 'Urbanist', sans-serif;
}
/*---------------------------
1.6) about features area ends here
---------------------------*/


/*===========================
1.7) grow area here
===========================*/
.grow {
    position: relative;
    overflow: hidden;
}
.grow_wrapper {
    background: var(--bgH1);
}
.grow_wrapper .grow_container .grow_thumb {
    margin-bottom: 30px;
}
.grow_container .grow_content {
    background: var(--blackH1);
    position: relative;
    padding: 100px 80px;
    z-index: 0;
}
.grow_container .grow_items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 60px;
}
.grow_container .grow_items .grow_item {
    overflow: hidden;
}
.grow_item .content h4 {
    color: var(--white);
    line-height: 29px;
    margin-bottom: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grow_item .content p {
    color: var(--whiteDes);
    font-size: 16px;
    line-height: 26px;
    font-family: 'Urbanist', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* vector  */
.grow_container .grow_content .vector {
    display: flex;
    max-width: max-content;
    right: 0;
    left: inherit;
    z-index: -1;
}
.grow_container .grow_content .vector img {
    position: revert;
}
/*---------------------------
1.7) grow area ends here
---------------------------*/


/*===========================
1.8) apps area here
===========================*/
.apps {
    position: relative;
    overflow: hidden;
}
.apps_thumb {
    text-align: center;
}
/*---------------------------
1.8) apps area ends here
---------------------------*/


/*===========================
1.9) testimonials area here
===========================*/
.testimonials {
    position: relative;
    overflow: hidden;
}
.testimonials .testimonials_wrapper {
    background: url("../images/banner/featuresBanner.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.testimonials_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}
.testimonials_item .content {
    background: var(--white);
    box-shadow: 9.24769px 77.951px 79.2659px -41.5739px rgba(18, 20, 29, 0.15);
    padding: 60px 40px;
}
.testimonials_item .content .star {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.testimonials_item .content .star li a {
    color: #FFC947;
}
.testimonials_item .content .description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    font-family: 'Urbanist', sans-serif;
}
.testimonials_item .content hr {
    margin: 30px 0px;
}
.testimonials_item .content .meta {
    display: flex;
    align-items: center;
    gap: 20px;
}
.testimonials_item .content .meta .thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 100px;
}
.testimonials_item .content .meta .info h5 {
    font-weight: 800;
    line-height: 28px;
    margin-bottom: 2px;
}
.testimonials_item .content .meta .info p {
    font-size: 16px;
    line-height: 26px;
    font-family: 'Urbanist', sans-serif;
}
/*---------------------------
1.9) testimonials area ends here
---------------------------*/


/*===========================
1.10) choose area here
===========================*/
.choose {
    position: relative;
    overflow: hidden;
}
.choose_plan .choose_nav {
    margin-bottom: 60px;
    text-align: center;
}
.choose_nav .choose_nav_content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 13px 63px -20px #888888;
    padding: 3px;
}
.choose_nav_content li .nav-link {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--blackH1);
    width: 130px;
    height: 56px;
    border-radius: 0;
}
.choose_nav_content li .nav-link.active {
    background: var(--yellowH1);
    color: var(--blackH1);
}
/* list content  */
.choose_list .choose_list_content {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 30px;
}
.choose_list_content .choose_content {
    box-shadow: 7px 59.0047px 60px -31.4692px rgba(18, 20, 29, 0.2);
    background: var(--white);
    padding: 60px 30px 140px;
    position: relative;
}
.choose_content .package_name {
    margin-bottom: 15px;
}
.choose_content .package_name p {
    font-weight: 600;
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 15px;
}
.choose_content .package_price {
    margin-bottom: 15px;
}
.choose_content .package_price h2 {
    font-size: 36px;
    line-height: 46px;
}
.choose_content .package_price h2 span {
    font-size: 22px;
    line-height: 100%;
    margin-right: 2px;
}
.choose_content .package_date {
    display: block;
}
.choose_content .package_date span {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: block;
    color: var(--blackDesH1);
}
.choose_content hr {
    color: var(--blackH1);
    margin: 30px 0px;
}
.choose_content .package_condition li:not(:last-child) {
    margin-bottom: 20px;
}
.choose_content .package_condition .content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.choose_content .package_condition .content .thumb img {
    max-width: 20px;
}
.choose_content .package_condition .content .text h6 {
    line-height: 100%;
    font-weight: 500;
}
.choose_content .package_submit {
    position: absolute;
    bottom: 40px;
}
/* hover area */
.choose_list_content .choose_content:hover {
    background: var(--blackH1);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.choose_list_content .choose_content:hover .package_name p,
.choose_list_content .choose_content:hover .package_price h2,
.choose_list_content .choose_content:hover .package_date span,
.choose_list_content .choose_content:hover hr,
.choose_list_content .choose_content:hover .package_condition .content .text h6
{
    color: var(--white);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.choose_list_content .choose_content:hover .package_submit .mainButton.buttonH1 {
    background: var(--yellowH1);
    color: var(--blackH1);
    border: 1px solid var(--yellowHover);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
/*---------------------------
1.10) choose area ends here
---------------------------*/


/*===========================
1.11) cta area here
===========================*/
.cta {
    position: relative;
    overflow: hidden;
}
.cta .cta_wrapper {
    background: url("../images/banner/cta-banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    padding: 100px 0px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.cta .cta_wrapper::after {
    content: '';
    position: absolute;
    background: linear-gradient(90.67deg, #12141D 24.1%, rgba(18, 20, 29, 0) 84.85%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
}
.cta_container {
    max-width: 470px;
}
.cta_container .section_header {
    margin-bottom: 40px;
}
.cta_container .section_heading {
    color: var(--white);
    text-align: start;
    max-width: 100%;
    margin: inherit;
}
/* cta form  */
.cta_form_content {
    position: relative;
}
.cta_input input {
    width: 100%;
    padding: 20px 160px 20px 20px;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    border: none;
    background: var(--white);
}
.cta_input input::placeholder {
    color: var(--blackDesH1);
}
.cta_button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}
.cta_button .secondaryButton.buttonH1 {
    border: none !important;
    border-radius: 0;
    padding: 0px 20px;
    width: 150px;
    height: 100%;
}
.cta_button .secondaryButton.buttonH1:hover {
    color: var(--white) !important;
    background: var(--blackH1) !important;
}
.cta .cta_wrapper .vector {
    /* width: auto; */
    /* height: auto; */
    position: absolute;
    bottom: inherit;
    left: 0;
    top: 5%;
    /* transform: translateY(-50%); */
    z-index: -1;
}
.cta .cta_wrapper .vector svg {
    max-width: 90%;
}
/*---------------------------
1.11) cta area ends here
---------------------------*/


/*===========================
1.12) footer area here
===========================*/
.footer {
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
}
.footer .footer_container {
    padding: 100px 0px 80px;
}
.footer_container .footer_items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}
.footer_widget .fw_title {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    /* text-transform: capitalize; */
    margin-bottom: 24px;
}
.footer_widget .fw_list a {
    font-weight: 400;
    font-size: 16px;
    /* line-height: 44px; */
    /* text-transform: capitalize; */
    display: block;
    color: var(--blackDesH1);
}
.footer_widget .fw_list a:hover {
    color: var(--blackH1);
}
/* copyright  */
.copyright_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.copyright_container .copyright_link {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}
.copyright_container .social {
    display: flex;
    align-items: center;
    gap: 16px;
}
.copyright_container .social li a:hover {
    color: var(--blackDesH1);
}
.copyright_container .copyright_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
.copyright_container .copyright_menu li a {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Urbanist', sans-serif;
    color: var(--blackH1);
}
.copyright_container .copyright_menu li a:hover{
    color: var(--blackDesH1);
}
.copyright_container .copyright_text p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Urbanist', sans-serif;
    color: var(--blackH1);
}
/*---------------------------
1.12) footer area ends here
---------------------------*/


/*########################
2) about ---------------[########################]
########################*/

/*===========================
2.1) about hero area here
===========================*/
.aHero {
    position: relative;
    overflow: hidden;
    margin-top: 104px;
}
.aHero_container .section_header {
    text-align: center;
    margin-bottom: 40px;
}
.aHero_container .section_header .section_heading {
    margin-bottom: 20px;
}
.section_header .section_heading .decoration {
    /* text-transform: capitalize; */
    position: relative;
}
.section_header .section_heading .decoration::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--yellowH1);
}
.aHero_container .section_header p {
    max-width: 750px;
    margin: 0 auto;
}
.aHero_container .thumb {
    text-align: center;
}
.aHero_container .thumb img {
    /* width: 100%; */
    height: 500px;
    /* object-fit: contain; */
}
/*---------------------------
2.1) about hero area ends here
---------------------------*/


/*===========================
2.2) about funfact area here
===========================*/
.aFunfact {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.aFunfact_container .section_header {
    text-align: center;
}
.aFunfact_container .section_heading {
    max-width: 420px;
    margin-bottom: 20px;
}
.aFunfact_container .section_header p {
    max-width: 750px;
    margin: 0 auto;
}
/* funfact area  */
.aFunfact_container .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}
.aFunfact_container .item {
    position: relative;
    padding: 20px 40px;
}
.aFunfact_container .item:not(:last-child)::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    right: -1px;
    top: 0;
    background: rgba(216, 216, 216, 1);
}
.aFunfact_container .item .totalfunfact {
    margin-bottom: 8px;
}
.aFunfact_container .item p {
    font-size: 20px;
    line-height: 24px;
}
/* patterns area here  */
.aFunfact .patterns img:nth-child(1) {
    max-width: 38%;
    bottom: 0;
    left: 0;
}
.aFunfact .patterns img:nth-child(2) {
    max-width: 5%;
    left: calc(15% + 100px);
    top: 128px;
}
.aFunfact .patterns img:nth-child(3) {
    max-width: 11%;
    right: 0;
    top: 0;
}
.aFunfact .patterns img:nth-child(4) {
    max-width: 19%;
    bottom: 0;
    right: 0;
}
.aFunfact .patterns img:nth-child(5) {
    max-width: 3%;
    left: calc(57% + 50px);
    top: 120px;
}
/*---------------------------
2.2) about funfact area ends here
---------------------------*/


/*===========================
2.3) about features area here
===========================*/
.aFeatures .abf_container .abf_button .buttonH1 {
    text-transform: capitalize;
}
/*---------------------------
2.3) about features area ends here
---------------------------*/


/*===========================
2.4) about values area here
===========================*/
.aValues {
    position: relative;
    overflow: hidden;
}
.aValues_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 60px;
    align-items: center;
}
.aValues_container .aValues_left {
    position: relative;
    z-index: 0;
}
.aValues_container .aValues_left .aValues_circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    max-width: 50%;
}
.aValues_container .aValues_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 80px;
    text-align: center;
}
.aValues_container .aValues_items .aValues_item:nth-child(2) {
    margin-top: 40px;
}
.aValues_container .aValues_items .aValues_item:nth-child(3) {
    margin-top: -40px;
}
.aValues_container .aValues_item .aValues_content {
    background: var(--white);
}
.aValues_container .aValues_content .thumb {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellowH1);
    border-radius: 50%;
    margin: 0 auto;
}
.aValues_container .aValues_content .thumb img {
    max-width: 36px;
}
.aValues_container .aValues_item .aValues_content .content h4 {
    margin: 8px 0px 12px;
}
.aValues_container .aValues_item .aValues_content .content p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* about values right area  */
.aValues_right .content .section_heading {
    text-align: start;
}
.aValues_right .content .section_header {
    margin-bottom: 30px;
}
.aValues_right .content .aValues_button {
    margin-top: 40px;
}
/*---------------------------
2.4) about values area ends here
---------------------------*/


/*########################
3) pricing ---------------[########################]
########################*/

/*===========================
3.1) choose area here
===========================*/
.pChoose {
    margin-top: 104px;
    padding-top: 80px;
}
.pChoose .section_header {
    margin-bottom: 30px;
}
.pChoose .section_heading {
    max-width: 527px;
}
.pChoose .choose_plan .choose_nav {
    margin-bottom: 50px;
}
.pChoose .choose_plan .choose_nav_content li .nav-link {
    height: 50px;
}
/*---------------------------
3.1) choose area ends here
---------------------------*/


/*===========================
3.2) pricing offer area here
===========================*/
.pOffer {
    position: relative;
    /* overflow: hidden; */
}
.pOffer .pOffer_wrapper {
    background: url("../images/banner/featuresBanner.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    padding-top: 120px;
}
.pOffer_wrapper {
    position: relative;
    z-index: 0;
}
.pOffer_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
}
.pOffer_item {
    background: var(--white);
    padding: 80px 90px;
    text-align: center;
    box-shadow: 0px 60px 80px -32px rgba(0, 0, 0, 0.06);
}
.pOffer_item .content h3 {
    margin-bottom: 16px;
}
.pOffer_item .content p {
    margin-bottom: 40px;
    font-family: 'Urbanist', sans-serif;
    line-height: 32px;
}
/*---------------------------
3.2) pricing offer area ends here
---------------------------*/


/*===========================
3.3) about values area here
===========================*/
.pValues .aValues_container .aValues_items {
    grid-gap: 30px;
}
.pValues .aValues_container .aValues_item .aValues_content {
    box-shadow: 0px 60px 80px -32px rgba(0, 0, 0, 0.06);
    padding: 40px 20px;
}
.pValues .aValues_container .aValues_item .aValues_content .content h4 {
    margin: 30px 0px 16px;
}
/*---------------------------
3.3) about values area ends here
---------------------------*/


/*########################
4) integrates ---------------[########################]
########################*/

/*===========================
4.1) about values area here
===========================*/
.about_features.iFeatures {
    margin-top: 104px;
}
.iFeatures .abf_container .abf_content {
    grid-gap: 80px;
}
.iFeatures .abf_container .abf_content .section_header {
    margin-bottom: 0px !important;
}
.iFeatures .abf_container .abf_content .section_heading {
    margin-bottom: 30px;
}
.iFeatures .abf_container .abf_button .buttonH1 {
}
/*---------------------------
4.1) about values area ends here
---------------------------*/


/*===========================
4.2) integrates area here
===========================*/
.integrates_wrapper {
    background: var(--bgH1);
}
.integrates_container .integrates_items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}
.integrates_container .integrates_item {
    background: var(--white);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.integrates_container .integrates_item:hover {
    box-shadow: 0px 60px 80px -32px rgba(0, 0, 0, 0.06);
}
.integrates_container .integrates_content {
    padding: 30px 20px;
    text-align: center;
    display: block;
}
.integrates_container .integrates_content .thumb {
    margin-bottom: 14px;
}
.integrates_container .integrates_content .thumb img {
    max-width: 75px;
}
.integrates_container .integrates_content .name h4 {
    margin-bottom: 8px;
}
.integrates_container .integrates_content .name p {
    font-weight: 500;
    text-transform: capitalize;
}
.integrates_container .integrates_content .des {
    margin-top: 14px;
}
.integrates_container .integrates_content .des p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/*---------------------------
4.2) integrates area ends here
---------------------------*/


/*########################
5) integrates-details ---------------[########################]
########################*/

/*===========================
5.1) integrates details hero area here
===========================*/
.inde_hero {
    position: relative;
    overflow: hidden;
    margin-top: 104px;
    padding: 80px 0px;
}
.inde_hero_container > .thumb img {
    width: 100%;
    height: 522px;
    object-fit: cover;
}
.inde_hero_content {
    position: relative;
}
.inde_hero_container .single_content {
    max-width: 450px;
    margin: -153px auto 0;
    background: #FFFFFF;
    box-shadow: 7px 59.0047px 60px -31.4692px rgba(18, 20, 29, 0.08);
    text-align: center;
    padding: 30px;
}
.inde_hero_container .single_content .thumb {
    margin-top: -74px;
}
.inde_hero_container .single_content .thumb img {
    height: 88px;
}
.inde_hero_container .single_content .name {
    font-size: 34px;
    line-height: 44px;
    text-transform: capitalize;
    margin: 12px 0px 2px;
}
.inde_hero_container .single_content .info {
    font-size: 20px;
    line-height: 30px;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 12px;
}
.inde_hero_container .single_content .des {
    margin-bottom: 24px;
}
/*---------------------------
5.1) integrates details hero area ends here
---------------------------*/


/*===========================
5.2) integrates details about area here
===========================*/
.inde_about_container .content h2 {
    font-weight: 700;
    margin-bottom: 20px;
}
.inde_about_container .content > p {
    margin-bottom: 20px;
}
.inde_about_container .content ul {
    padding-left: 40px;
    list-style: disc;
}
.inde_about_container .content ul li:not(:last-child) {
    margin-bottom: 10px;
}
/*---------------------------
5.2) integrates details about area ends here
---------------------------*/


/*===========================
5.3) integrates area here
===========================*/
.integrates_container .button {
    text-align: center;
    margin-top: 40px;
}
/*---------------------------
5.3) integrates area ends here
---------------------------*/


/*########################
6) blog ---------------[########################]
########################*/

/*===========================
6.1) about hero area here
===========================*/
.blogHero {
    padding: 100px 0px 50px;
}
.blogHero .section_header {
    margin-bottom: 0;
}
/*---------------------------
6.1) about hero area ends here
---------------------------*/


/*===========================
6.2) blog filter area here
===========================*/
.b_filter {
    position: relative;
    overflow: hidden;
    margin-bottom: 80px;
}
.b_filter_container .b_filter_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.b_filter_container .from_content {
    position: relative;
    overflow: hidden;
}
.b_filter_container .b_filter_content .heading {
    margin-bottom: 20px;
    text-transform: capitalize;
}
.b_filter_container .from_content .from_input input {
    width: 100%;
    padding: 20px 140px 20px 20px;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    border: none;
    background: var(--white);
    border: 1px solid rgba(18, 20, 29, 0.1);
    border-radius: 4px;
}
.b_filter_container .from_button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 10px;
}
.b_filter_container .from_button button i {
    margin-right: 6px;
}
.b_filter_container .from_button button {
    padding: 0px 20px;
    height: 100%;
}
.b_filter_container .b_filter_content .category {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.b_filter_container .b_filter_content .category button {
    background: rgba(18, 20, 29, 0.05);
    border: 1px solid rgba(18, 20, 29, 0.05);
    color: var(--blackH1);
    padding: 15px 16px;
}
/*---------------------------
6.2) blog filter area ends here
---------------------------*/


/*===========================
6.3) blog area here
===========================*/
.blog {
    position: relative;
    overflow: hidden;
    padding-bottom: 100px;
}
.blog_container .blog_heading {
    margin-bottom: 40px;
    text-transform: capitalize;
}
.blog_items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}
.blog_item {
    background: var(--white);
}
.blog_content .thumb {
    margin-bottom: 30px;
}
.blog_content .thumb img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}
.blog_content .content .button .buttonH1 {
    padding: 10px  20px;
    background: #FFD878;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
}
.blog_content .content .title {
    margin-top: 8px;
}
.blog_content .content .title a {
    display: block;
    font-weight: 800;
    font-size: 20px;
    line-height: 32px;
    font-family: 'Urbanist', sans-serif;
}
.blog_content .content .title a:hover {
    color: var(--blackDesH1);
}
.blog_content .content hr {
    color: var(--blackDesH1);
}
.blog_content .content .date {
    display: flex;
    align-items: center;
    gap: 20px;
}
.blog_content .content .date li {
    position: relative;
}
.blog_content .content .date li:not(:last-child)::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--blackDesH1);
    top: 0;
    right: -11px;
}
.blog_content .content .date li span {
    font-size: 16px;
    line-height: 100%;
}
/*---------------------------
6.3) blog area ends here
---------------------------*/


/*########################
7) blog-details ---------------[########################]
########################*/

/*===========================
7.1) about hero area here
===========================*/
.blog_details_hero {
    padding: 120px 0px 0px;
}
.blog_details_hero .section_header {
    margin-bottom: 48px;
}
.blog_details_hero .section_header .section_heading {
    margin-bottom: 0 !important;
}
/*---------------------------
7.1) about hero area ends here
---------------------------*/


/*===========================
7.2) blog details area here
===========================*/
.blog_details {
    position: relative;
    overflow: hidden;
}
/* blog details post info  */
.bd_post_info {
    margin-bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
}
.bd_post_info .profile {
    display: flex;
    align-items: center;
    gap: 20px;
}
.bd_post_info .profile .thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.bd_post_info .profile .name h4 {
    font-weight: 700;
    font-size: 36px;
    line-height: 120%;
    text-transform: capitalize;
}
.bd_post_info .publish_date {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bd_post_info .publish_date .thumb {
    width: 40px;
    height: 40px;
    background: var(--yellowH1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bd_post_info .publish_date .thumb >* {
    font-size: 16px;
}
.bd_post_info .publish_date .date p {
    font-family: 'Urbanist', sans-serif;
}
/* content */
.bd_content > .thumb {
    margin-bottom: 60px;
}
.bd_content .content {
    margin-bottom: 60px;
}
.bd_content .content p {
    font-family: 'Urbanist', sans-serif;
    line-height: 32px;
    margin-bottom: 20px;
}
.bd_content .content h2.title {
    padding: 40px 0px 30px;
}
.bd_content .content ul {
    padding-left: 40px;
    list-style: disc;
}
.bd_content .content ul li p {
    margin-bottom: 0;
}
.bd_content .content ul li:not(:last-child) {
    margin-bottom: 10px;
}
/* testimonial  */
.bd_content .testimonial {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
    margin-bottom: 60px;
}
.bd_content .testimonial .single_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bd_content .testimonial .testimonial_content {
    background: var(--yellowH1);
    padding: 30px;
    position: relative;
}
.bd_content .testimonial .testimonial_content p {
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    line-height: 40px;
    color: var(--blackH1);
}
.bd_content .testimonial .testimonial_content .test_info {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.bd_content .testimonial .testimonial_content .test_info .thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.bd_content .testimonial .testimonial_content .test_info .name h6 {
    font-size: 20px;
    line-height: 100%;
}
.bd_content .testimonial .testimonial_content .quote {
    font-size: 60px;
    line-height: 100%;
    color: var(--blackDesH1);
    position: absolute;
    right: 48px;
    bottom: 36px;
}
/* info  */
.bd_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}
.bd_info p {
    text-transform: capitalize;
    font-family: 'Urbanist', sans-serif;
}
.bd_info p a.name {
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
}
.bd_info p a.name:hover {
    color: var(--yellowH1);
}
.bd_info .share {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bd_info .share ul {
    display: flex;
    align-items: center;
    gap: 16px;
}
.bd_info .share ul li a {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--blackH1);
    border-radius: 50%;
    color: var(--white);
    font-size: 16px;
    line-height: 100%;
}
.bd_info .share ul li a:hover {
    background: var(--yellowH1);
    color: var(--blackH1);
}
/*---------------------------
7.2) blog details area ends here
---------------------------*/


/*########################
8) contact ---------------[########################]
########################*/

/*===========================
8.1) contact hero area here
===========================*/
.contact_hero {
    position: relative;
    overflow: hidden;
    margin-top: 104px;
}
.ch_container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
}
.ch_content .section_header {
    margin: 0;
}
.ch_content .section_header .section_heading {
    text-align: start;
    max-width: 100%;
    margin: 0 0 16px;
}
.ch_content .section_header .desc {
    font-family: 'Urbanist', sans-serif;
    line-height: 32px;
}
.ch_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}
.ch_items .ch_item {
    padding: 40px;
    background: var(--white);
    border: 1px solid rgba(18, 20, 29, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.ch_items .ch_item .thumb {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blackH1);
    background-color: var(--yellowH1);
    border-radius: 50%;
    font-size: 20px;
    line-height: 100%;
}
.ch_items .ch_item .content h6 {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 10px;
    /* text-transform: capitalize; */
}
.ch_items .ch_item .content p {
    font-size: 16px;
    font-family: 'Urbanist', sans-serif;
}
/*---------------------------
8.1) contact hero area ends here
---------------------------*/


/*===========================
8.2) contact area here
===========================*/
.contact {
    position: relative;
    overflow: hidden;
}
.contact .contact_wrapper {
    position: relative;
    overflow: hidden;
    z-index: 0;
    background: var(--bgH1);
}
.contact_container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 40px;
}
/* contact info  */
.contact_info .section_header {
    margin-bottom: 40px;
}
.contact_info .section_header .section_heading {
    text-align: start;
    max-width: 100%;
    margin: 0 0 20px;
}
.contact_info .section_header p {
    font-family: 'Urbanist', sans-serif;
    line-height: 32px;
}
/* social  */
.contact_info .social .social_list > a {
    display: block;
}
.contact_info .social .social_list:not(:last-child) {
    margin-bottom: 40px;
}
.contact_info .social_content {
    display: flex;
    align-items: center;
    gap: 16px;
}
.contact_info .social_content .thumb {
    width: 60px;
    height: 60px;
    background: var(--yellowH1);
    color: var(--blackH1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.contact_info .social_content .content h4 {
    margin-bottom: 4px;
}
.contact_info .social_content .content h4 a {
    text-transform: capitalize;
    line-height: 100%;
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: var(--blackH1);
    font-family: 'Urbanist', sans-serif;
}
.contact_info .social_content .content p {
    font-family: 'Urbanist', sans-serif;
}
/* contact form  */
.contact_form {
    background: var(--blackH1);
    padding: 40px;
}
.contact_form .cf_content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.contact_form .cf_group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}
.contact_form .cf_field * {
    width: 100%;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid rgba(18, 20, 29, 0.1);
    border-radius: 4px;
    font-size: 16px;
    line-height: 20px;
    font-family: 'Urbanist', sans-serif;
}
.contact_form .cf_field input::placeholder,
.contact_form .cf_field textarea::placeholder {
    color: var(--blackDesH1);
}
.contact_form .cf_button button {
    width: 100%;
    font-family: 'Urbanist', sans-serif;
}
/* vector  */
.contact .contact_wrapper .vector img {
    max-width: 5%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
/* vector ends  */
/*---------------------------
8.2) contact area ends here
---------------------------*/


/*===========================
8.3) contact accordion area here
===========================*/
.c_accor_content .accordion {
    max-width: 900px;
    margin: 0 auto;
}
.accordion-item {
    color: inherit;
    background-color: var(--blackH1);
    border: none;
}
.c_accor_content .accordion-button {
    padding: 20px;
    font-size: 20px;
    line-height: 34px;
    font-weight: 600;
    color: var(--blackH1);
}
.c_accor_content .accordion-button:focus {
    outline: 0;
    box-shadow: none;
    border-color: inherit;
}
.c_accor_content .accordion-button:not(.collapsed) {
    color: var(--yellowH1);
    background-color: inherit;
    box-shadow: inherit;
}
.c_accor_content .accordion-button::after {
    content: "\2b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c_accor_content .accordion-button:not(.collapsed)::after {
    content: "\f068";
}
.c_accor_content .accordion-body {
    padding: 4px 20px 20px 20px;
}
.c_accor_content .accordion-body p {
    color: var(--whiteDes);
    line-height: 32px;
}
/*---------------------------
8.3) contact accordion area ends here
---------------------------*/


/*########################
9) sign-up ---------------[########################]
########################*/

/*===========================
9.1) sign up area here
===========================*/
.signUp {
    position: relative;
    overflow: hidden;
    margin-top: 104px;
}
.signUp .signUp_items {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    grid-gap: 40px;
    align-items: end;
}
.signUp_form_content .section_header {
    margin-bottom: 50px;
}
.signUp_form_content .section_header .section_heading {
    text-align: start;
    max-width: 100%;
    margin: 0 auto 8px;
}
.signUp_form_content .section_header p {
    line-height: 32px;
    font-family: 'Urbanist', sans-serif;
}
/* sign up form  */
.signUp_form {
    padding: 48px;
    background: var(--blackH1);
}
/* input  */
.signUp_input_group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
}
.signUp_input_group .signUp_field input {
    background: var(--white);
    border: 1px solid rgba(18, 20, 29, 0.1);
    border-radius: 4px;
    width: 100%;
    font-size: 16px;
    font-family: 'Urbanist', sans-serif;
    padding: 17px 20px;
}
.signUp_input_group .signUp_field input::placeholder {
    text-transform: capitalize;
    color: var(--blackDesH1);
}
/* submit  */
.signUp_submit_group {
    margin-top: 30px;
}
.signUp_submit_group .signUp_field button {
    width: 100%;
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
}
/* radio */
.signUp_radio_group {
    margin: 24px 0px 30px;
}
.signUp_radio_group .signUp_field {
    display: flex;
    align-items: center;
    gap: 10px;
}
.signUp_radio_group .signUp_field label {
    font-weight: 400;
    font-size: 13px;
    line-height: 120%;
    font-family: 'Urbanist', sans-serif;
    color: var(--whiteDes);
}
/* with  */
.signUp_with_group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
}
.signUp_with_group button {
    width: 100%;
    color: var(--white) !important;
    background: transparent !important;
    border: 1px solid var(--white) !important;
    font-size: 18px;
    line-height: 120%;
    font-family: 'Urbanist', sans-serif;
    text-transform: inherit;
}
.signUp_form .already {
    margin-top: 40px;
}
.signUp_form .already p {
    color: var(--white);
    font-family: 'Urbanist', sans-serif;
    text-align: center;
}
.signUp_form .already p a {
    display: inline-block;
    color: var(--white);
    font-family: 'Urbanist', sans-serif;
    color: rgba(136, 40, 255, 1);
    font-weight: 700;
}
.signUp_form .already p a:hover {
    color: rgba(136, 40, 255, .5);
}
/*---------------------------
9.1) sign up area ends here
---------------------------*/


/*########################
10) sign-in ---------------[########################]
########################*/

/*===========================
10.1) sign in area here
===========================*/
.sign_in .signUp_input_group {
    grid-template-columns: auto;
}
.sign_in .signUp_radio_group {
    margin: 30px 0px 20px;
    text-align: center;
}
.sign_in_forgot a {
    color: rgba(136, 40, 255, 1);
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    font-family: 'Urbanist', sans-serif;
}
.sign_in_forgot a:hover {
    color: rgba(136, 40, 255, .5);
}
/*---------------------------
10.1) sign in area ends here
---------------------------*/


/*########################
11) home-two ---------------[########################]
########################*/
/* common area  */
.buttonH2 {
    padding: 19px 22px;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    /* text-transform: capitalize; */
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.blackButton2.buttonH2 {
    color: var(--white);
    background: var(--blackH2);
    border: 1px solid var(--blackH2);
}
.whiteButton2.buttonH2 {
    color: var(--blackH2);
    background: var(--white);
    border: 1px solid var(--blackH2);
}
.yellowButton2.buttonH2 {
    color: var(--blackH2);
    background: var(--yellowH2);
    border: 1px solid var(--yellowH2);
}
.blackButton2.buttonH2:hover, 
.whiteButton2.buttonH2:hover, 
.yellowButton2.buttonH2:hover {
    color: var(--blackH1) !important;
    background: var(--yellowHover) !important;
    border: 1px solid var(--yellowHover) !important;
}
h1.hero_heading2, 
.section_heading2 {
    font-family: 'Clash Display';
    font-weight: 600;
    color: var(--blackH2);
}
.section_header2 .desc {
    font-size: 20px;
    line-height: 32px;
}
span.underline2 {
    text-decoration: underline;
    color: var(--yellowH1);
}
/* common area ends */

/*===========================
11.1) header area here
===========================*/
.header2 {
    background: var(--bgH2);
}
/*---------------------------
11.1) header area ends here
---------------------------*/


/*===========================
11.2) hero two area here
===========================*/
.hero2 {
    margin-top: 104px;
    padding: 120px 0px 0px;
    background: var(--bgH2);
    overflow: hidden;
}
.hero_container2 {
    text-align: center;
}
.hero_container2 .hero_heading2 {
    font-size: 88px;
    line-height: 102px;
}
.hero_container2 .hero_desc {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
    margin: 30px 0px 60px;
}
.hero_container2 .hero_button2 {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.hero_container2 .star {
    margin-bottom: 70px;
}
.hero_container2 .star_content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero_container2 .star_content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hero_container2 .star_items {
    display: flex;
    align-items: center;
    margin: 0 5px;
    gap: 6px;
}
.hero_container2 .star_content .thumb img {
    max-width: 30px;
}
.hero_container2 .star_content h4 {
    text-transform: capitalize;
    font-family: 'Inter', sans-serif;
    line-height: 100%;
}
.hero_container2 .star_items li a {
    color: #F59E0B;
}
.hero_container2 .star_content p {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
}
.hero_container2 .hero_thumb img {
    max-width: 94%;
}
/*---------------------------
11.2) hero two area ends here
---------------------------*/


/*===========================
11.3) company logo area here
===========================*/
.company_logo.home2 {
    background: var(--blackH2);
}
.company_logo.home2 .cl_wrapper {
    padding-bottom: 0;
    border-bottom: none;
}
.home2 .cl_container .cl_headline {
    color: var(--whiteDes2);
}
.home2 .cl_container .cl_headline span {
    font-weight: 700;
    text-decoration: underline;
    color: var(--yellowH2);
}
/*---------------------------
11.3) company logo area ends here
---------------------------*/


/*===========================
11.4) features two area here
===========================*/
.features2 {
    position: relative;
    overflow: hidden;
    background: var(--bgH1);
}
.features_container2 .section_header2 {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    grid-gap: 60px;
    margin-bottom: 60px;
}
.features_container2 .features_items2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}
.features_container2 .features_item2 {
    padding: 40px 30px;
    background: var(--white);
}
.features_content2 .thumb {
    margin-bottom: 14px;
}
.features_content2 .thumb img {
    max-width: 32px;
}
.features_content2 .content h4 {
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 12px;
}
.features_content2 .content p {
    font-size: 16px;
    line-height: 24px;
}
/*---------------------------
11.4) features two area ends here
---------------------------*/


/*===========================
11.5) customer area here
===========================*/
.customer {
    background: var(--bgH1);
    position: relative;
    overflow: hidden;
}
.customer_item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 200px;
}
.customer_container .customer_thumb {
    text-align: center;
}
.customer_content .section_heading2 {
    margin-bottom: 30px;
}
.customer_button {
    margin-top: 40px;
}
/*---------------------------
11.5) customer area ends here
---------------------------*/


/*===========================
11.6) testimonial2 area here
===========================*/
.testimonial2 {
    position: relative;
    overflow: hidden;
    background: var(--bgH2);
}
.testimonial2 .testimonial_wrapper2 {
    background-color: var(--greenH2);
}
.ceo_comment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 100px;
    margin-bottom: 80px;
}
.ceo_comment .section_header2 .section_heading2 {
    margin-bottom: 40px;
    color: var(--white);
}
.ceo_comment .section_header2 .section_heading2 .underline2 {
    color: var(--yellowH2);
}
.ceo_comment .section_header2 .desc {
    color: var(--whiteDes2);
    font-weight: 500;
}
.ceo_comment .content hr {
    color: var(--whiteDes2);
}
/* info  */
.ceo_comment .content .info {
    display: flex;
    align-items: center;
    grid-gap: 20px;
}
.ceo_comment .content .info .thumb {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellowH2);
}
.ceo_comment .content .info .thumb img {
    max-width: 32px;
}
.ceo_comment .content .info .content h6 {
    color: var(--white);
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 4px;
}
.ceo_comment .content .info .content p {
    color: var(--whiteDes2);
    font-size: 16px;
    line-height: 24px;
}
/* video  */
.ceo_comment .video {
    background: url("../images/single_images/video-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: relative;
    z-index: 0;
    overflow: hidden;
    border: 4px solid var(--white);
}
.ceo_comment .video::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 36.33%, #000000 100%);
    z-index: -1;
}
.ceo_comment .video .tva-video {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ceo_comment .video .tva-video a {
    color: var(--blackH1);
    width: 54px;
    height: 54px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* client comments  */
.client_comments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}
.client_comments .client_comment {
    background: var(--white);
    border: 1px solid #EBEBEB;
    padding: 32px 30px;
}
.client_comment .star {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.client_comment .star .thumb {
    width: 43px;
    height: 43px;
    background: var(--yellowH2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.client_comment .star .thumb img {
    max-width: 30px;
}
.client_comment .star ul {
    display: flex;
    align-items: center;
    gap: 6px;
}
.client_comment .star ul li a {
    color: var(--blackH2);
}
.client_comment .content p {
    font-size: 16px;
    line-height: 175%;
    font-family: 'Clash Display';
    font-weight: 500;
    color: var(--blackH2);
    margin-bottom: 28px;
}
.client_comment .content .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.client_comment .content .info img {
    max-width: 56px;
}
.client_comment .info .content .section_heading2 {
    font-size: 18px;
    line-height: 132%;
}
.client_comment .content .info .content span {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
}
/*---------------------------
11.6) testimonial2 area ends here
---------------------------*/


/*===========================
11.7) offer area here
===========================*/
.offer {
    position: relative;
    overflow: hidden;
    background: var(--bgH2);
    z-index: 0;
}
.offer_banner {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    max-width: 54%;
}
.offer_container .section_header2 {
    margin-bottom: 40px;
}
.offer_lists .offer_list:not(:last-child) {
    margin-bottom: 30px;
}
.offer_content {
    display: flex;
    gap: 16px;
}
.offer_content .thumb img {
    max-width: 32px;
}
.offer_content .content h6 {
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 6px;
}
.offer_content .content p {
    color: var(--blackDesH2);
    font-size: 16px;
    line-height: 24px;
}
.offer_container > .button {
    margin-top: 40px;
}
/*---------------------------
11.7) offer area ends here
---------------------------*/


/*===========================
11.8) funfact area here
===========================*/
.funfact {
    position: relative;
    overflow: hidden;
    background: var(--blackH2);
    padding: 100px 0px;
}
.funfact_container .items {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 60px;
    flex-wrap: wrap;
}
.funfact_container .item h2 {
    color: var(--white);
    font-family: 'Clash Display';
    margin-bottom: 12px;
}
.funfact_container .item p {
    color: var(--white);
    font-size: 16px;
    line-height: 24px;
}
/*---------------------------
11.8) funfact area ends here
---------------------------*/


/*===========================
11.9) choose area here
===========================*/
.choose2 {
    background: var(--bgH2);
}
.choose2 .section_header2 {
    text-align: center;
    margin-bottom: 60px;
}
.choose2 .section_heading2 {
    max-width: 590px;
    margin: 0 auto;
}
.choose2 .choose_nav .choose_nav_content {
    border-radius: 15px;
}
.choose2 .choose_nav_content li .nav-link {
    border-radius: 15px;
    color: var(--blackH2);
}
.choose2 .choose_nav_content li .nav-link.active {
    background: var(--yellowH2);
    color: var(--blackH2);
}
.choose2 .choose_list_content .choose_content:hover {
    background: var(--greenH2);
}
.choose2 .choose_list_content .choose_content .package_condition .thumb svg circle {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.choose2 .choose_list_content .choose_content:hover .package_condition .thumb svg circle {
    fill: var(--blackH2);
}
.choose2 .choose_content .package_price h2 {
    font-size: 42px;
    line-height: 100%;
    font-family: 'Clash Display';
}
.choose2 .blackButton2.buttonH2 {
    color: var(--blackH2);
    background: var(--white);
    border: 1px solid var(--blackH2);
}
.choose2 .choose_list_content .choose_content:hover .package_submit .blackButton2.buttonH2 {
    background: var(--yellowH2);
    color: var(--blackH2);
    border: 1px solid var(--yellowH2);
}
/*---------------------------
11.9) choose area ends here
---------------------------*/


/*===========================
11.10) latest blog area here
===========================*/
.latest_blog2 {
    background: var(--bgH2);
    padding: 0px 0px 120px;
}
.latest_blog2 .blog_container {
    display: grid;
    grid-template-columns: .6fr 1.4fr;
    grid-gap: 40px;
    align-items: center;
    padding-top: 120px;
    border-top: 1px solid var(--blackDesH2);
}
.latest_blog2 .blog_items {
    grid-template-columns: repeat(2, 1fr);
}
.latest_blog2 .blog_item {
    background: var(--bgH2);
}
.latest_blog2 .blog_content .content .title a {
    color: var(--blackH2);
    font-family: 'Clash Display';
    font-weight: 600;
}
.latest_blog2 .blog_content .content .date li span {
    color: var(--blackDesH2);
}
/*---------------------------
11.10) latest blog area ends here
---------------------------*/


/*===========================
11.11) cta2 area here
===========================*/
.cta2 {
    background: var(--greenH2);
    z-index: 0;
}
.cta2 .cta_wrapper {
    background: none;
}
.cta2 .cta_wrapper::after {
    display: none;
}
.cta2 .cta_container {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.cta2 .section_heading2 {
    color: var(--white);
    margin-bottom: 16px;
}
.cta2 .section_heading2 span.underline2 {
    color: var(--white);
}
.cta2 .cta_container p {
    font-size: 16px;
    line-height: 24px;
    color: var(--whiteDes);
}
/* patterns area  */
.cta2 .patterns img:nth-child(1) {
    max-width: 7%;
    bottom: 0;
    left: 0;
}
.cta2 .patterns img:nth-child(2) {
    max-width: 6%;
    top: 0;
    right: 0;
}
/*---------------------------
11.11) cta2 area ends here
---------------------------*/


/*===========================
11.12) footer area here
===========================*/
.footerH2 {
    background: var(--blackH2);
}
.footerH2 .footer_widget .fw_title {
    color: var(--white);
}
.footerH2 .footer_widget .fw_list a {
    color: var(--whiteDes);
}
.footerH2 .footer_widget .fw_list a:hover {
    color: var(--whiteDes2);
}
.footerH2 .copyright_link .social li a {
    color: var(--white);
}
.footerH2 .copyright_link .social li a:hover {
    color: var(--whiteDes2);
}
.footerH2 .copyright_container .copyright_menu li a {
    color: var(--white);
}
.footerH2 .copyright_container .copyright_menu li a:hover {
    color: var(--whiteDes2);
}
.footerH2 .copyright_container .copyright_text p {
    color: var(--white);
}
/*---------------------------
11.1) footer area ends here
---------------------------*/
/*########################
#theEndCSS########################
########################*/

.bsb {
	-moz-box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.6);
	-webkit-box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.6);
	box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.6);
	margin-top: 150px;
}

		#kalkulacja {
	margin-top:100px;}
	#kalkulacja td.r {
		text-align:right;width:50%;
		}
		#kalkulacja td.l {
		text-align:left;width:50%;padding-left:10px;font-weight:bold}
		#oplataserwisowa {
	margin-top:20px;font-size:0.7em
}

#kalkulacja td.l span {
    background: #7ad254;
    padding: 6px;
    border-radius: 5px;
}


ul.navigation li a.active {border-bottom: 2px solid #7ad254;padding-bottom:3px}

div#zalozenia {
    color: #adadad;
    text-align: center;
    font-size: 0.7em;
    margin-top: 40px;
}

p.bignumbers {
    font-size: 1.6em;
}

img.iso {
    max-width: 100px;
}




vip {
    position: absolute;
    z-index: 10;
    background: #000;
    color: #fff;
    font-weight: 400;
    padding: 5px 10px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    opacity: 0.7;
    margin-top: 0px;
    margin-left: 11px;
    font-family: 'Sofia Sans Condensed', sans-serif;
    font-size: 1.4em;
}

.thumbnail-img:hover {
    outline: 0!important;
    color: #000;
    transition: .3s;
    text-decoration: none
}

a.event-title {
    /* padding: 15px; */
    /* margin-bottom: 10px !important; */
    background: #efefef;
    min-height: 95px;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    padding: 10px 10px;
}

a.duration-price {
    background: #6ac045;
    display: inline-block;
    padding: 4px 13px;
    border-radius: 7px;
    color: #fff;
    font-size: 1.4em;
}

a.duration-price {
    margin: auto;
    margin-top: 27px;
    margin-bottom: 27px;
}

a.duration-price:hover {
    color: #fff !important;
    background: #559b37;
}

.duration-price i.fa-ticket {
    /* font-size: 16px; */
    margin-right: 2px;
    /* transform: rotate(300deg); */
}

.duration-price-remaining {
    display: flex;
    width: 100%;
    align-items: center
}

div.tixet {
    border-bottom: 5px solid #efefef;
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.6);
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.6);
    border: 0px;
}

.main-card {
    position: relative;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    width: 100%;
    border-radius: 5px
}

.event-thumbnail {
    width: 100%;
    position: relative;
    padding: 0
}

.thumbnail-img {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.event-thumbnail>.thumbnail-img::after {
    content: "";
    background: linear-gradient(to bottom,rgba(0,0,0,.3),transparent);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.thumbnail-img:hover {
    outline: 0!important;
    color: #000;
    transition: .3s;
    text-decoration: none
}

.event-thumbnail a img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: transform .5s ease
}

.event-thumbnail a:hover img {
    transform: scale(1.05)
}

.event-content>.event-title {
    font-size: 1.3em;
    text-align: center;
    font-weight: 600;
    color: #000;
    line-height: 21px;
    transition: all ease-in-out .2s;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    justify-content: center;
    align-items: center;
    font-family: sofia sans condensed,sans-serif;
    flex-direction: column;
}

div.event-content a loc {
    display: block;
    font-weight: 300;
    font-size: .8em;
    margin-top: 8px;
}

.event-content>.event-title:hover {
    color: #000!important
}

.event-footer {
    padding: 10px 20px;
    border-top: 1px dotted #ccc
}

.event-timing {
    display: flex;
    align-items: center;
    color: #717171;
    font-size: 13px
}

.publish-time {
    margin-left: auto
}

.publish-date {
    display: flex;
    align-items: center
}
i.cennikcheck {
    color: #7ad254;
}

i.fa-solid.fa-circle-xmark.xmarkred {
    color: #f15656;
}

img.iso {
    max-width: 100px;
}

img.isocert {
	-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.5);
box-shadow: 0 0 7px 0 rgba(0,0,0,0.5);}

.header_nav ul.navigation li {
    text-align: center;
}

ul.navigation {
    margin-right: 40px;
}