/* ----------------------------------------------------
Theme Name:Mothers Milk vCard Right - HTML Template
Version:1.4
Author:Kiswa Solutions
------------------------------------------------------- */

/* ======================================================
 TABLE OF CONTENTS
====================================================== */

/* 

1.0: Settings 
1.1: Slider
1.2: sidebar-right
1.3: About
1.4: donor
1.5: Skills
1.6: Services
1.7: Portfolio
1.8: Banner
1.9: Blogs
1.10: Testimonials
1.11: Contact
1.12: Footer
1.13: Blog-Posts
1.14: Blog-Details
1.15: Comment Form
1.16: Voluenteer
1.17: Color Picker

*/

/* ====================================================
 1.0: Settings 
====================================================== */

/* Heading Style */

@media(max-width:992px) {
    .heading-border {
        padding-bottom: 5px;
    }
    .heading-absolute {
        top: -30px;
        font-size: 60px;
    }
    h1.what, .heading h1 {
        font-size: 32px;
    }
}

@media(max-width:576px) {
    .heading-absolute {
        top: -20px;
        font-size: 50px;
    }
    h1.what, .heading h1 {
        font-size: 30px;
    }
}

/* Common Margins */

@media(max-width:1200px) {}

@media(max-width:992px) {
    .about-margin {
        margin-bottom: 20px;
    }
    .heading-margin {
        margin-bottom: 25px;
    }
    .para-margin {
        margin-bottom: 40px;
    }
}

@media(max-width:768px) {
    .about-margin {
        margin-bottom: 15px;
    }
    .heading-margin {
        margin-bottom: 20px;
    }
    .para-margin {
        margin-bottom: 30px;
    }
}

@media(max-width:576px) {
    /* .about-margin { margin-bottom: 30px; } */
    /* .para-margin { margin-bottom: 60px; } */
}

/* Helper Classes */

/* Sections Padding */

@media(max-width:992px) {
    .section-padding {
        padding-top: 90px;
        padding-bottom: 90px;
    }
}

@media(max-width:576px) {
    .section-padding {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media(max-width:1200px) {
    .Voluenteer .Voluenteer-box .Voluenteer-text .Voluenteer-social li a i, p, a, a.btn, .form-control, .services .box p, .services .box-bg p, .btn {
        font-size: 16px;
    }
}

@media(max-width:992px) {
    .Voluenteer .Voluenteer-box .Voluenteer-text .Voluenteer-social li a i, p, a, a.btn, .form-control, .services .box p, .services .box-bg p, .btn {
        font-size: 15px;
    }
}

@media(max-width:768px) {
    .Voluenteer .Voluenteer-box .Voluenteer-text .Voluenteer-social li a i, p, a, a.btn, .form-control, .services .box p, .services .box-bg p, .btn {
        font-size: 14px;
    }
}

@media(max-width:576px) {
    p, a, a.btn, .form-control, .services .box p, .services .box-bg p, .btn {
        font-size: 13px;
    }
}

@media(max-width:992px) {
    .Voluenteer .Voluenteer-box .Voluenteer-text h4, .services .box-bg h4, .donor .donor-details .donor-box h4 {
        font-size: 22px;
    }
}

@media(max-width:768px) {
    .Voluenteer .Voluenteer-box .Voluenteer-text h4, .services .box-bg h4, .donor .donor-details .donor-box h4 {
        font-size: 20px;
    }
}

@media(max-width:576px) {
    .Voluenteer .Voluenteer-box .Voluenteer-text h4, .services .box-bg h4, .donor .donor-details .donor-box h4 {
        font-size: 18px;
    }
}

/* Font Sizes For Nabar*/

@media(max-width:1200px) {
    .fs-navbar-brand {
        font-size: 32px;
    }
    .fs-nav-link a.nav-link {
        font-size: 18px;
    }
}

@media(max-width:992px) {
    .fs-navbar-brand {
        font-size: 30px;
    }
    .fs-nav-link a.nav-link {
        font-size: 16px;
    }
}

@media(max-width:768px) {
    .fs-navbar-brand {
        font-size: 25px;
    }
}

/* ====================================================
1.1: Slider
====================================================== */

@media(max-width:1200px) {
    .meta .first-page-text-headings h1:nth-child(1) {
        font-size: 30px;
    }
    .meta .first-page-text-headings h1:nth-child(2) {
        font-size: 40px;
    }
    .meta .first-page-text-headings .dash {
        font-size: 19px;
    }
    ul.social {
        margin-top: 0px;
    }
    ul.social li {
        margin: 20px 15px;
    }
    ul.social li a {
        font-size: 25px;
    }
}

@media(max-width:768px) {
    .slider1.swiper-container {
        width: 100vw !important;
    }
    .meta .first-page-text-headings h1:nth-child(1) {
        font-size: 28px;
    }
    .meta .first-page-text-headings h1:nth-child(2) {
        font-size: 36px;
    }
    .meta .first-page-text-headings .dash {
        font-size: 17px;
        margin: 15px 0;
    }
    ul.social {
        margin-top: 0px;
    }
    ul.social li a {
        font-size: 22px;
    }
}

@media(max-width:576px) {
    .meta .first-page-text-headings h1:nth-child(1) {
        letter-spacing: 10px;
        font-size: 24px;
    }
    .meta .first-page-text-headings h1:nth-child(2) {
        font-size: 32px;
    }
    .meta .first-page-text-headings .dash {
        line-height: 1.2;
        letter-spacing: 1px;
        font-size: 15px;
        margin: 15px 0;
    }
    ul.social li {
        margin: 15px 15px;
    }
    ul.social li a {
        font-size: 20px;
    }
}

@media(max-height:400px) {
    .slider1.swiper-container {
        width: 100%;
        height: unset;
    }
    .meta {
        margin: 100px 0;
    }
    .colorRang {
        top: 90px;
    }
}

/* ====================================================
 1.2: sidebar-right
====================================================== */

@media(max-width:768px) {
    .bg-overlay-page {
        content: "";
        position: fixed;
        top: 0;
        right: -100%;
        height: 100%;
        width: 100%;
        z-index: 10;
        transition: .3s
    }
    .bg-overlay-page.slide {
        right: 0;
    }
    .sidebar-right {
        right: -100%;
    }
    .sidebar-right-btn {
        position: fixed;
        right: 22px;
        top: 28px;
        z-index: 20;
        transition: .3s
    }
    .tab-content.wrapper {
        margin-right: 0px;
    }
    .sidebar-close-btn {
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 45px;
        transition: .3s;
        cursor: pointer;
    }
    .logo {
        width: 280px;
        right: 20px;
        transition: .3s
    }
    .sidebar-right-btn.slide-btn {
        right: -100%;
    }
    .sidebar-right.slide-right {
        right: 0;
        z-index: 20;
    }
    .sidebar-close-btn.move {
        top: 30px;
        right: 30px;
    }
    .logo.logo-right {
        width: 220px;
        right: 80px;
    }
}

/* ====================================================
1.3: About
====================================================== */

@media(max-width:1200px) {
    .img-styled img {
        max-height: 350px;
    }
    .about .about-text p {
        line-height: 1.7;
    }
    h4.freelance, .about .about-text h4 {
        font-size: 20px;
    }
}

@media(max-width:768px) {
    .about .about-text p {
        line-height: 1.5;
    }
}

@media(max-width:576px) {
    .about .about-text p {
        line-height: 1.4;
    }
    h4.freelance, .about .about-text h4 {
        font-size: 18px;
    }
}

/* ====================================================
1.4: donor
====================================================== */

@media(max-width:992px) {
    .donor .nav-tabs .nav-link {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .donor .donor-details .donor-box {
        padding: 20px;
    }
    .donor .donor-details .donor-box h6 {
        font-size: 16px;
    }
    .donor .donor-details .donor-box:before {
        width: 20px;
        height: 20px;
    }
    .donor .donor-details .circle:before {
        right: 31px;
        width: 20px;
        height: 20px;
    }
    .donor .donor-details .circle:after {
        right: 40px;
    }
}

@media(max-width:768px) {
    .donor .nav-tabs .nav-link {
        padding-top: 6px;
        padding-bottom: 6px;
        height: 50px;
    }
    .donor .donor-details .donor-box h6 {
        font-size: 15px;
    }
    .donor .donor-details .circle:before {
        display: none;
    }
    .donor .donor-details .circle:after {
        display: none;
    }
    .donor .donor-details .circle .duration p {
        padding: 20px 0 20px 0;
    }
    .donor .donor-details .donor-box {
        margin: 0 0 25px 0;
    }
}

@media(max-width:576px) {
    .donor .donor-details .donor-box h6 {
        font-size: 14px;
    }
    .donor .donor-details .circle:before {
        display: none;
    }
    .donor .donor-details .circle:after {
        display: none;
    }
    .donor .donor-details .circle .duration p {
        padding: 0px 0 20px 0;
    }
    .donor .donor-details .donor-box {
        margin: 0 0 20px 0;
    }
}

/* ====================================================
1.5: Skills
====================================================== */

@media(max-width:1200px) {
    .line-skills-border {
        display: none;
    }
    .skills .progress {
        height: 30px;
    }
    .skills .progress .progress-bar {
        font-size: 15px;
    }
}

@media(max-width:992px) {
    .skills .progress {
        height: 25px;
    }
    .skills .progress .progress-bar {
        font-size: 13px;
    }
}

@media(max-width:768px) {
    .skills .pbar-wrapper span {
        margin-top: -24px;
        font-size: 14px
    }
}

@media(max-width:576px) {
    .skills .pbar-wrapper span {
        margin-top: -20px;
        font-size: 13px
    }
    .skills .progress {
        height: 22px;
    }
}

/* ====================================================
1.6: Services
====================================================== */

@media(max-width:1200px) {
    .services .box-bg {
        min-height: 200px;
    }
    .services .inner-box {
        min-height: 200px;
    }
    h1.what {
        text-align: center;
    }
}

@media(max-width:576px) {
    .services .box-bg {
        min-height: 200px;
    }
    .services .inner-box {
        min-height: 200px;
    }
    h1.what {
        text-align: center;
    }
}

/* ====================================================
1.7: Portfolio
====================================================== */

@media(max-width:1200px) {
    /* .photo-gallery #filter-buttons { margin: 40px 0 30px 0; } */
    .filter-button {
        width: 80px;
    }
    .portfolio .card-columns .card .card-meta .meta-texts i {
        font-size: 25px;
        -webkit-transition: .3s;
        transition: .3s;
    }
}

@media(max-width:992px) {
    .right-border:after {
        height: 20px;
    }
    /* .photo-gallery #filter-buttons { margin: 35px 0 35px 0; } */
}

@media(max-width:576px) {
    .right-border:after {
        height: 16px;
    }
    .filter-button {
        width: 65px;
        margin: 5px 0;
    }
    .portfolio .card-columns .card .card-meta .meta-texts h3 {
        font-size: 20px;
    }
    .portfolio .card-columns .card .card-meta .meta-texts h6 {
        font-size: 16px;
    }
    .portfolio .card-columns .card .card-meta .meta-texts i {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    .card-columns {
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .card-columns {
        -webkit-column-count: 1;
        column-count: 1;
    }
}

/* ====================================================
1.8: Banner
====================================================== */

@media(max-width:1200px) and (min-width:576px) {
    .banner .icon i {
        font-size: 40px;
    }
    .banner .icon h1 {
        font-size: 32px;
    }
    .banner .icon h4 {
        font-size: 20px;
    }
}

@media(max-width:576px) {
    .banner .icon i {
        font-size: 36px;
    }
    .banner .icon h1 {
        font-size: 30px;
    }
    .banner .icon h4 {
        font-size: 18px;
    }
}

/* ====================================================
1.9: Blogs
====================================================== */

@media(max-width:400px) {
    .blogs .blog-block .blog-text {
        padding: 20px 15px;
    }
    .blogs .blog-block .blog-text p {
        font-size: 13px;
    }
    .blogs .blog-block .blog-text ul.date li {
        padding: 0 5px;
    }
}

/* ====================================================
1.10: Testimonials
====================================================== */

@media(max-width:992px) {
    .testimonials .tst-content i {
        font-size: 50px
    }
    .testimonials .tst-content h2 {
        font-size: 26px
    }
    .owl-theme .owl-controls .owl-page span {
        width: 15px;
        height: 15px;
    }
}

@media(min-height:700px) {
    .testimonials {
        height: 100vh;
    }
}

@media(max-height:550px) {
    .testimonials {
        height: unset;
    }
}

/* ====================================================
1.11: Contact
====================================================== */

@media(max-width:1200px) {
    .contact .icon {
        height: 70px;
        width: 70px;
    }
    .contact .icon i {
        font-size: 35px
    }
    .contact-info h5 {
        font-size: 18px;
    }
}

@media(max-width:992px) {
    /* .contact-info h3 { font-size: 26px; } */
}

@media(max-width:576px) {
    .center-responsive {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0;
        text-align: center;
    }
    .contact .icon {
        height: 60px;
        width: 60px;
    }
    .contact .icon i {
        font-size: 30px
    }
    .contact-info h5 {
        font-size: 16px;
    }
    h3.freelance, .contact-info h3 {
        font-size: 24px;
    }
    .contact .form-control {
        text-align: center;
    }
    .form-control {
        padding-top: 10px;
        padding-bottom: 10px;
        height: 35px;
    }
}

/* ====================================================
1.12: Footer
====================================================== */

@media(max-width:576px) {
    footer p {
        font-size: 12px;
    }
}

/* ====================================================
1.13: Blog-Posts
====================================================== */

@media(max-width:1200px) {
    .blog-details .blog-content h3 {
        font-size: 25px;
    }
}

@media(max-width:992px) {
    .blog-details .blog-content h3 {
        font-size: 20px;
    }
}

@media(max-width:576px) {
    .blog-content {
        padding: 30px 0;
    }
    .blog-details .blog-content h3 {
        font-size: 16px;
    }
    .blog-details .blog-content .date ul li p i {
        font-size: 14px;
    }
}

/* ====================================================
1.14: Blog-Details
====================================================== */

@media(max-width:992px) {
    .blogger-text h5 {
        font-size: 18px
    }
    .blogger-icons li a i {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
    .comments h1 {
        font-size: 35px
    }
    .comment-text h2 {
        font-size: 30px
    }
    .comment-text h6 {
        font-size: 15px
    }
}

@media(max-width:768px) {
    .comments h1 {
        font-size: 30px
    }
    .comment-text h2 {
        font-size: 28px
    }
}

@media(max-width:576px) {
    .blogger-text h1 {
        font-size: 25px
    }
    .blogger-text h5 {
        font-size: 16px
    }
    .comment-text h2 {
        font-size: 25px
    }
    .comment-text h6 {
        font-size: 15px
    }
    .blogger-icons li a i {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

/* ====================================================
1.15: Comment Form
====================================================== */

@media(max-width:992px) {
    .comment-form h1 {
        font-size: 30px
    }
}

@media(max-width:576px) {
    .comments img {
        margin: unset;
    }
    .comment-form h1 {
        font-size: 25px
    }
}

/* ====================================================
1.16: Voluenteer
====================================================== */

@media(max-width:992px) {
    .Voluenteer .Voluenteer-box .Voluenteer-text .Voluenteer-social li a i {
        width: 12px;
    }
}

@media(max-width:400px) {
    .Voluenteer .Voluenteer-box {
        padding: 15px;
    }
    .Voluenteer .Voluenteer-box .Voluenteer-text .Voluenteer-social {
        float: unset;
        margin-top: 15px;
        text-align: right;
    }
}

/* ====================================================
 1.17: Pricing
====================================================== */

@media(max-width:1200px) {
    .pricing .pricing-box .price {
        padding: 50px 0;
        position: relative;
    }
    .pricing .pricing-box .price .best-value h6 {
        padding: 8px 30px;
    }
    .pricing .pricing-box h3 {
        font-size: 24px
    }
    .pricing .pricing-box h1 {
        font-size: 60px;
    }
    .pricing .pricing-box .pricing-list {
        margin-bottom: 0;
        margin: 0 0 2px 0;
    }
    .pricing .pricing-box .pricing-list li p {
        line-height: 1;
        padding: 10px 0;
    }
}

@media(max-width:992px) {
    .pricing .pricing-box .price .best-value h6 {
        padding: 6px 25px;
    }
    .pricing .pricing-box h3 {
        font-size: 22px
    }
    .pricing .pricing-box h1 {
        font-size: 50px;
    }
    .pricing .pricing-box .pricing-list {
        margin-bottom: 0;
        margin: 0 0 2px 0;
    }
    .pricing .pricing-box .pricing-list li p {
        line-height: 1;
        padding: 12px 0;
    }
}

@media(max-width:768px) {
    .pricing .pricing-box:hover {
        transform: unset;
    }
    .pricing .pricing-box .price {
        padding: 40px 0;
    }
    .pricing .pricing-box h3 {
        font-size: 22px
    }
}

/* ====================================================
 1.17: Color Picker
====================================================== */

@media(max-width:992px) {
    .colorPicker {
        width: 40px;
        height: 40px;
    }
    .colorPicker i {
        font-size: 25px;
    }
}