/*============================================

    Template: Moto - App Landing Page
	Css Name: Main Style
	Version: 1.1
	Design and Developed by: Hastech

==============================================
    
    CSS INDEX
    ===================
	
    1. IMPORT GOOGLE FONT
	2. HEADER AREA
	3. SLIDER AREA
	4. SERVICE AREA
	5. ABOUT AREA
	6. SECTION HEADDING STYLE
	7. AWESOME FEATURES AREA
	8. HOW WORK AREA
	9. FUN FACT AREA
	10. DOWNLOAD BUTTON AREA
	11. PRICING AREA
	12. TESTIMONIAL AREA
	13. TEAM AREA
	14. SUBCRIBE FORM AREA
	15. CONTACT FORM AREA
	16. CONTACT INFORMATION AREA
	17. CONTACT SOCIAL AREA
	18. HOMEPAGE TWO
	19. VIDEO BACKGROUND AREA
	20. ScreenShot Area
	21. ScrollUp
	
===========================================================*/

/* ============= 1. IMPORT GOOGLE FONT ============= */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

/* ============= 2. HEADER AREA ============= */
header {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
}

.navbar .container {
    flex-wrap: nowrap;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.navbar-fixed-bottom, .navbar-fixed-top {
    position: fixed;
    top: 0;
    border-width: 0 0 1px;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar {
    border-radius: 0;
    margin: 0;
    padding: 10px;
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.5s ease 0s;
    background: #fff;
}

.navbar.navbar-fixed-top {
    background: #fff;
    box-shadow: 0 0 20px -10px #000;
    padding: 5px;
}

.navbar-brand {
    padding: 19px 0;
    display: flex;
    align-items: center;
}

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: 0;
}

.navbar-brand > img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    max-width: fit-content;
}

.navbar-fixed-top .navbar-brand > img {
    width: 85%;
}

.navbar-expand-md .navbar-collapse {
    flex-grow: unset;
}

.navbar-nav li a {
    color: #3e3e3e;
    font-size: 15px;
    font-weight: 600;
    padding: 20px;
    transition: all 0.3s ease 0s;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding: 20px;
}

.navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    opacity: 0.6;
    color: #fff;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    opacity: 1;
    color: #3e3e3e;
}

.nav-pills .nav-link.active:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    opacity: 1;
    color: #4666FF;
}

.navbar-expand-md .navbar-nav li a.download-btn {
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 8px 30px;
    transition: .3s;
}

.navbar-nav li a.download-btn:hover {
    background: #5C78FF none repeat scroll 0 0;
    border-color: #5C78FF;
    opacity: 1;
}

/* ============= 3. SLIDER AREA ============= */
.hero-area {
    background: linear-gradient(#4666ff, #9198e5);
    background-size: cover;
    background-position: center center;
    height: 70vh;
    z-index: 1;
    position: relative;
    color: #23f;
}
@media (max-width: 767px) {
  .hero-area {
    min-height: 100vh;
  }
  .hero-area img{
    max-width: 320px
  }
}
.parallax {
    background-attachment: fixed;
}

.slider {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit- flex;
    display: -moz- flex;
    display: -ms- flex;
    display: -o- flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

.slider h1 {
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px #001159;
}

.slider p {
    color: #fff;
    font-size: 18px;
    margin: 0 0 35px;
    padding-right: 28%;
}

.slider-thumb {
    position: absolute;
    bottom: 0;
    right: 0%;
    z-index: 3;
}

.hero-btn {
    background: #4666FF none repeat scroll 0 0;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 50px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
}

.hero-btn:hover, .about-content > .hero-btn:hover {
    background-color: #5C78FF;
    color: #fff;
    text-decoration: none;
}

.hero-text p.he-p {
    padding: 0 22%;
    line-height: 30px;
}

/* Slider Nav */
.background-area .owl-nav div {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-size: 38px;
    height: 50px;
    left: -56px;
    line-height: 45px;
    margin-top: -25px;
    position: absolute;
    text-align: center;
    top: 50%;
    transition: all 0.4s ease 0s;
    width: 50px;
    z-index: 999;
}

.background-area .owl-nav .owl-next {
    left: auto;
    right: -56px;
}

.background-area:hover .owl-nav div {
    left: 10px;
}

.background-area:hover .owl-nav .owl-next {
    left: auto;
    right: 10px;
}

.background-area .owl-nav div:hover {
    background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
}

.image-1 {
    background-image: url("img/slider/4.png");
}

.slide-animation {
    left: -15px;
    position: absolute;
    z-index: -9;
}

/* ============= 4. SERVICE AREA ============= */
/* Domyślne style dla większej szerokości ekranu */
.service-area {
}

.single-service {
    padding: 60px 24px 60px;
    -webkit-transition: .3s;
    transition: .3s;
}

.single-service h2 {
    font-size: 24px;
    padding-top: 15px;
}

.single-service:hover {
    transform: translateY(-5px);
    -webkit-transition: .3s;
    transition: .3s;
}

.service-icon {
    float: left;
    margin-right: 20px;
    margin-top: 40px;
    font-size: 4em;
}

.service-content {
    display: block;
    overflow: hidden;
}

/* Domyślne style dla większej szerokości ekranu */
@media (max-width: 900px) {
    .service-area {
    }

    .single-service {
        padding: 20px 12px 20px;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .single-service h2 {
        font-size: 16px;
        padding-top: 15px;
    }

    .single-service:hover {
        transform: translateY(-5px);
        -webkit-transition: .3s;
        transition: .3s;
    }

    .service-icon {
        float: left;
        margin-right: 20px;
        margin-top: 40px;
    }

    .service-content {
        display: block;
        overflow: hidden;
    }
}


/* ============= 5. ABOUT AREA ============= */
.about-content > h2 {
    margin-bottom: 15px;
}

.about-content > p {
    margin: 0 0 20px;
}

.about-content > .hero-btn {
    background: #4666FF none repeat scroll 0 0;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 40px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    margin-top: 20px;
    margin-bottom: 40px;
}

.about-content > .hero-btn i {
    margin-right: 5px;
}

/* ============= 6. SECTION HEADDING STYLE ============= */
.section-heading {
    margin: 0 auto;
    width: 48%;
}

.section-heading h2 {
    margin-bottom: 24px;
    position: relative;
    line-height: 30px;
}

.section-heading p {
    margin-bottom: 10px;
}

/* ============= 7. AWESOME FEATURES AREA ============= */
.awesome-feature {
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 40px 0 35px;
    transition: all 0.3s ease 0s;
    background: #DEE1FF;
    min-height: 350px;
}

.awesome-feature:hover {
    background: #4666FF none repeat scroll 0 0;
}

.awesome-feature-icon span {
    display: block;
    height: 80px;
    margin-left: 10px;
    position: relative;
    width: 80px;
    margin: 0 auto;
}

.awesome-feature-icon span:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, #4666FF 0%, #7087FF 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to top, #4666FF 0%, #7087FF 100%) repeat scroll 0 0;
    border-radius: 60px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.awesome-feature-icon i {
    background-color: #f5f7fa;
    border-radius: 60px;
    color: #4c5462;
    display: inline-block;
    font-size: 40px;
    height: calc(100% - 2px);
    left: 0px;
    line-height: 80px;
    position: relative;
    text-align: center;
    top: 1px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: calc(100% - 2px);
    z-index: 1;
}

.awesome-feature:hover .awesome-feature-icon i {
    background-color: #4666FF;
    color: #fff;
}

.awesome-feature:hover .awesome-feature-icon span::after {
    background: #4666FF none repeat scroll 0 0;
}

.awesome-feature-details {
    margin-top: 20px;
}

.awesome-feature-details h5 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 15px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.awesome-feature-details p {
    margin: 0;
    padding: 0 50px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.awesome-feature:hover .awesome-feature-details h5, .awesome-feature:hover .awesome-feature-details p {
    color: #fff;
}


/* ============= 8. HOW WORK AREA ============= */
.how-work-tab ul {
    background: #fff none repeat scroll 0 0;
    display: flex;
}

.how-work-tab ul li {
    height: 50px;
    line-height: 50px;
    width: 33.33%;
}

.how-work-tab ul li a {
    color: #3e3e3e;
    display: block;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.how-work-tab ul li.active a {
    background: #4666FF;
    color: #fff;
}

.how-work-tab .tab-content p {
    margin-bottom: 25px;
}

/* ============= 9. FUN FACT AREA ============= */
.single-fact h5 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0px;
    font-size: 20px;
}

.single-fact h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 15px;
    line-height: 35px;
}

/* ============= 10. DOWNLOAD BUTTON AREA ============= */
.download-option-btn ul li a {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px;
    color: #3e3e3e;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    margin: 0 14px;
    padding: 18px 40px;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

.download-option-btn ul li a i {
    color: #4666FF;
    margin-right: 5px;
    transition: .3s;
}

.download-option-btn ul li a:hover i, .download-option-btn ul li a.active:hover i {
    color: #fff;
}

.download-option-btn ul li a:hover, .download-option-btn ul li a.active:hover {
    background: #4666FF;
    color: #fff;
}

.download-option-btn ul li a.active {
    background: #4666FF;
    color: #fff;
}

.download-option-btn ul li a.active i {
    color: #fff;
}

/* ============= 11. PRICING AREA ============= */
#pricing {
    background-color: #f2f4ff;
}

.pricing-patient {
    position: relative; /* Dodano position: relative */
    border-radius: 10px;
    padding-top: 40px;
    transition: all 0.4s ease 0s;
    background: #fff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.pricing-patient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Przesunięcie linii do środka */
    width: 30%;
    height: 4px;
    background-color: #4666FF; /* Kolor linii */
}

.pricing-rehab {
    position: relative; /* Dodano position: relative */
    border-radius: 10px;
    padding-top: 40px;
    transition: all 0.4s ease 0s;
    background: #fff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.pricing-rehab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Przesunięcie linii do środka */
    width: 30%;
    height: 4px;
    background-color: #4666FF; /* Kolor linii */
}

.price-titel h4 {
    letter-spacing: 2px;
    color: #001159;
    font-size: 28px;
}

.pricing-price .price-main {
    font-size: 38px;
    font-weight: 500;
    color: #001159;
    display: block;
    padding: 20px 0 10px;
}

.pricing-price .price-addon {
    font-size: 14px;
    color: #999999;
}

.price-decs ul {
    padding-top: 20px;
    text-align: left;
    margin-left: 50px;
    margin-right: 50px;
}


.price-decs ul li {
    color: #001159;
    display: block;
    font-size: 16px;
    line-height: 38px;
}

.promoinfo {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.ordr-btn > a {
    background: #fff none repeat scroll 0 0;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    padding: 24px 45px;
    transition: all 0.4s ease 0s;
}

.ordr-btn.uppercase > a:hover {
    opacity: 0.5;
}

.price-decs {
    padding-bottom: 40px;
}

/* ============= 12. TESTIMONIAL AREA ============= */
.testimonial-desc p {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    line-height: 35px;
    margin: 0 0 30px;
    padding: 0 124px;
}

.testimonial-desc h4 {
    color: #fff;
    font-size: 24px;
    margin: 0;
}

.testimonial-active.owl-theme .owl-controls {
    display: none !important;
}

/* ============= 13. TEAM AREA ============= */
.team-single {
    display: block;
    position: relative;
    transition: .3s;
    overflow: hidden;
    padding-right: 1px;
}

.team-single img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out 0s;
}

.team-single:hover img {
    transform: scale(1.2);
}

.team-single:hover {
    border-radius: 10px;
}

.team-overlay {
    background: #4666FF none repeat scroll 0 0;
    padding: 22px 0 12px;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.team-single:hover .team-overlay {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

.team-overlay > h5 {
    color: #fff;
    font-weight: 600;
}

.team-overlay h6 {
    color: #fff;
}

/* ============= 14. SUBCRIBE FORM AREA ============= */
.subcribe-form input {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #4666FF;
    border-radius: 5px;
    box-shadow: none;
    color: #444444;
    font-size: 12px;
    font-weight: normal;
    height: 45px;
    margin-right: 15px;
    padding-left: 20px;
    width: 30%;
}

.subcribe-form button {
    background: #4666FF none repeat scroll 0 0;
    border: medium none;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    height: 45px;
    text-transform: uppercase;
    top: 0;
    width: 155px;
    transition: .3s;
}

.subcribe-form button:hover {
    background: #F55160;
}

/* Mail Chimp */
.mailchimp-alerts {
    margin-top: 15px;
}

.mailchimp-submitting {
    color: #31708f
}

.mailchimp-success {
    color: #3c763d;
}

.mailchimp-error {
    color: #a94442;
}

/* ============= 15. Contact Form Area ============= */
.contact-form {
    background: #fff none repeat scroll 0 0;
    padding: 125px 70px;
    width: 60%;
    float: left;
}

.form-control {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: none;
    color: #333;
    height: 45px;
    padding: 10px 18px;
    transition: all 0.3s ease 0s;
}

.form-control:focus {
    outline: 0 none;
    border: none;
}

.description textarea {
    height: 100px
}

.form-group button {
    border: none
}

.btn-contact-bg {
    background: #4666FF none repeat scroll 0 0;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    width: 150px;
}

.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #f55160;
    color: #fff;
}

.form-messege {
    margin-top: 15px;
    padding-bottom: 0;
}

.contact-wrap {
    display: flex;
    justify-content: space-between;
}

.contact-map-size {
    height: 530px;
    width: 455px;
}

/* ============= 16. CONTACT INFORMATION AREA ============= */
.single-address {
    display: block;
    position: relative;
    margin-bottom: 65px;
}

.single-address i {
    color: #fff;
    display: block;
    font-size: 36px;
    line-height: 50px;
}

.single-address .media-left {
    left: 65px;
    padding: 0;
    position: absolute;
}

.link-text a {
    color: #95A6FF; /* Kolor tekstu linku (biały) */
}

.single-address p {
    color: #fff;
    margin: 0;
}

.conct-border.two {
    border-bottom: 1px solid rgba(250, 87, 101, 0.2);
}

/* ============= 17. Contact Social Area ============= */
.contact-social ul li a {
    background: #fff none repeat scroll 0 0;
    border-radius: 100%;
    color: #000000;
    display: block;
    font-size: 15pt;
    height: 45px;
    line-height: 45px;
    margin-right: 15px;
    text-align: center;
    transition: all 0.4s ease 0s;
    width: 45px;
    margin: 0 12px;
}

.contact-social ul li a:hover {
    color: #fff;
    background: #4666FF;
}

.copyright-text p {
    color: #fff;
    font-size: 13px;
    margin-bottom: 0;
    padding: 0;
}

.copyright-text p a {
    color: #fff;
    font-weight: 700;
}

/* ============= 18. HOMEPAGE TWO ============= */
.banner-video-btn {
    bottom: 45px;
    display: block;
    left: 7%;
    position: absolute;
    width: auto;
}

.banner-video-btn .video-popup {
    color: #fff;
    transition: .4s;
}

.banner-video-btn .video-popup:hover {
    color: #3e3e3e;
}

.banner-video-btn .video-popup i {
    float: left;
    font-size: 24px;
    line-height: 35px;
}

.banner-video-btn .video-popup > span {
    float: left;
    font-size: 18px;
    font-weight: 600;
    line-height: 34px;
    margin-left: 10px;
}

.background-content, .slider-carousel, .slider-full-carousel {
    z-index: 3;
}

.background-area {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.image-1, .image-2, .image-3 {
    background-attachment: scroll;
    background-clip: initial;
    background-color: rgba(0, 0, 0, 0);
    background-origin: initial;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.single-carousel {
    background-size: cover;
}

.background-content {
    position: relative;
}

.banner-image {
    bottom: 70px;
    padding-left: 30px;
    position: absolute;
    right: 0;
    width: 50%;
}

.banner-image.two {
    bottom: 70px;
    padding-left: 10px;
    position: absolute;
    right: 0;
    width: 22%;
}

.background-content {
    position: relative;
}

/* ============= 19. VIDEO BACKGROUND AREA ============= */
.player.mb_YTPlayer {
    height: 100vh;
    width: 100%;
}

.buttonBar {
    display: none;
}

/* ============= 20. ScreenShot Area ============= */
.screenshot-slider {
    margin-left: -20px;
    margin-right: -20px;
}

.screenshot-slider .slick-list {
    padding-left: 236px !important;
    padding-right: 236px !important;
}

.single-screenshot {
    transition: .4s;
}

.single-screenshot.slick-active {
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
    z-index: 9;
}

.single-screenshot.slick-center {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    z-index: 99 !important;
}

.single-screenshot .image {
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.1);
    display: block;
}

.single-screenshot .image img {
}

.ss2-prev {
    left: -80px;
}

.ss2-next {
    right: -80px;
}

.screenshot-slider .slick-list {
    padding-top: 128px !important;
}

/* ============= 21. ScrollUp ============= */
#scrollUp {
    background: #4666FF none repeat scroll 0 0;
    border-radius: 0px;
    bottom: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    color: #fff;
    font-size: 28px;
    height: 40px;
    line-height: 35px;
    position: fixed;
    right: 15px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 40px;
    z-index: 200;
}

#scrollUp:hover {
    background: #3e3e3e;
}

/* ============= 22. FAQ Area [CUSTOM] ============= */
/* Styl dla sekcji FAQ */
#faq {
    padding-top: 20px;
    padding-bottom: 0px;
    background-color: #f2f4ff;
}

/* Styl dla nagłówka sekcji FAQ */
#faq .section-heading {
    margin-bottom: 20px;
    text-align: center;
}

/* Styl dla akordeonu */
#faq .accordion-item {
    margin-bottom: 0px;
}

/* Styl dla nagłówka akordeonu */
#faq .accordion-header {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
}

/* Styl dla przycisku akordeonu */
#faq .accordion-button {
    background-color: transparent;
    border: none;
    outline: none;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* Styl dla aktywnego przycisku akordeonu */
#faq .accordion-button[aria-expanded="true"] {
    color: #ffffff;
    background-color: #007bff;
}

/* Styl dla treści akordeonu */
#faq .accordion-body {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

/* ============= SLIDER AREA EDU ============= */
.hero-areaEDU {
    background: linear-gradient(#4666ff, #9198e5);
    background-size: cover;
    background-position: center center;
    height: 40vh;
    z-index: 1;
    position: relative;
    color: #23f;
}

.sliderEDU {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit- flex;
    display: -moz- flex;
    display: -ms- flex;
    display: -o- flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

.sliderEDU h1 {
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px #001159;
}

.sliderEDU p {
    color: #fff;
    font-size: 18px;
    margin: 20px 0 35px; /* Dodaj margin-top */
    padding-right: 28%;
}

.sliderEDU .hero-text {
    margin-top: 120px;
}

@media (max-width: 767px) {
    .sliderEDU h1 {
        font-size: 50px; /* Dostosuj rozmiar czcionki dla mniejszych ekranów */
    }
}

/* ============= ARTICLES AREA EDU ============= */
#articles h2 {
    margin-bottom: 20px;
    margin-top: 40px;
}

/* Stylowanie dla artykułu */
.article-area h3 {
    font-weight: bold;
    font-size: 24px;
}

.article-area h4 {
    font-size: 22px;
}

.article-area p {
    font-size: 16px;
}

.article-img {
    border-radius: 10px;
}

/* Styl dla drugiego logo w top navbar */
.navbar-brand.ms-auto img {
    max-width: 50px; /* Możesz dostosować maksymalną szerokość według własnych preferencji */
    height: auto; /* Utrzymuje proporcje obrazu */
}

/* Kolejność wyświetlania logotypów na ekranach o szerokości mniejszej niż 768px (dla trybu mobilnego) */
@media (max-width: 768px) {
    .navbar-brand:not(.ms-auto) {
        order: 2; /* Ustaw drugie logo jako drugi element w kolejności */
    }

    .navbar-brand.ms-auto {
        order: 1; /* Ustaw pierwsze logo jako pierwszy element w kolejności */
    }
}

.footer-logos-sec {
    background-color: #fff;
}

.footer-logos {
    padding-top: 20px;
    background-color: #fff;
    max-width: 100%;
}

/* Styl dla logotypów w stopce na ekranach desktopowych */
.footer-logo-1 {
    min-height: 100px;
    min-width: 300px;
    max-width: 150px; /* Maksymalna szerokość logotypów na desktopie */
    margin: 0 10px; /* Dodatkowy odstęp między logotypami (opcjonalny) */
}

.footer-logo-2 {
    max-height: 120px;
    max-width: 130px; /* Maksymalna szerokość logotypów na desktopie */
    margin: 0 10px; /* Dodatkowy odstęp między logotypami (opcjonalny) */
}


/* Styl dla logotypów w stopce na ekranach mobilnych (użyj większego rozmiaru) */
@media (max-width: 767px) {
    .footer-logo-1 {
        min-height: 100px;
        min-width: 200px;
        max-width: 150px; /* Dostosuj maksymalną szerokość logotypów na mobilnych według własnych preferencji */
    }
}

@media (max-width: 767px) {
    .footer-logo-2 {
        max-height: 100px;
        max-width: 100px; /* Dostosuj maksymalną szerokość logotypów na mobilnych według własnych preferencji */
    }
}

.hero-areaINVITE {
    background: linear-gradient(#4666ff, #9198e5);
    background-size: cover;
    background-position: center center;
    height: 40vh;
    z-index: 1;
    position: relative;
    color: #23f;
}

.hero-areaINVITE .container {
    text-align: center; /* Center text within the container */
    display: flex; /* Enable flexbox layout */
    justify-content: center; /* Center flex items horizontally */
    align-items: center; /* Align items vertically (optional) */
}

.hero-areaINVITE .hero-text {
    display: flex; /* Enable flexbox layout */
    justify-content: center; /* Center flex items horizontally */
    align-items: center; /* Align items vertically (optional) */
}

.hero-areaINVITE .hero-text img {
    flex: 0 0 160px; /* Set fixed width for the image */
    margin-right: 40px; /* Add margin to the right of the image */
}

@media (max-width: 767px) {
    .hero-areaINVITE h2 {
        font-size: 2em;
    }

    .hero-areaINVITE .hero-text img {
        flex: 0 0 40px; /* Set fixed width for the image */
        margin-right: 20px; /* Add margin to the right of the image */
    }
}

.hero-areaINVITE .hero-text h2 {
    flex: 1; /* Allow the heading to expand */
    text-align: left; /* Align text to the left */
    color: #fff;
    text-shadow: 2px 2px 4px #001159;
}

.code {
    padding: 12px;
    display: flex;
    align-items: center;
    word-wrap: break-word;
    width: auto;
}

.code h3 {
    color: #4666FF;
    margin-right: 16px; /* Dodaj margines dolny */
    margin-bottom: 0;
}

.codecontainer {
    border: 2px dashed #4666FF; /* Blue color */
    width: max-content; /* Użyj maksymalnej szerokości zawartości */
    display: inline-block; /* Ustaw jako element inline-block */
}

.minitext p {
    font-size: 12px;
}

.form-check-label a {
    color: #4666FF;
}

.marginhero {
    margin-top: 160px;
}
@media (max-width: 767px) {
  .marginhero {
    margin-top: 40px;
  }
}