/*
Author       : theme_ocean
Template Name: Monoline - Design Agency HTML Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. START BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START ABOUT DESIGN
    05. START COUNTER DESIGN
    06. START WHY CHOOSE US DESIGN
    07. START SERVICE DESIGN
    08. START CASE STUDY DESIGN
    09. START POROFOLIO DESIGN
    10. START SKILL DESIGN
    11. START PROMOTION DESIGN
    12. START TEAM DESIGN
    13. START TESTIMONIALS DESIGN
    14. START PRICING DESIGN
    15. START BLOG DESIGN
    16. START ADDRESS DESIGN
    17. START PARTNER DESIGN
    18. START FOOTER DESIGN
    19. START SECTION TOP DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
    color: #747474;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    background: #fff;
    overflow-x: hidden;
}
html,
body {
    height: 100%;
    position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0px;
    margin-top: 0px;
    font-family: oswald, sans-serif;
    color: #1b2032;
    font-weight: 400;
}
a {
    font-family: oswald, sans-serif;
    text-decoration: none;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}
p {
    margin-bottom: 0;
}
ul,
li {
    margin: 0;
    padding: 0;
}

::-webkit-input-placeholder {
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

:-moz-placeholder {
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

::-moz-placeholder {
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

:-ms-input-placeholder {
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}
.form-control::placeholder {
    color: #232a34;
    opacity: 1;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
/*START PRELOADER DESIGN*/
.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}
.spinner {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    font-size: 10px;
    text-indent: -12345px;
    z-index: 10000;
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffaa17;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2s infinite ease-in-out;
    animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes sk-bounce {
    0%,
    100% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
.status-mes h4 {
    color: #f7f7f7;
    position: relative;
    font-size: 24px;
    margin-top: 30px;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.no-padding {
    padding: 0;
}
/*END PRELOADER DESIGN*/
.section-padding {
    padding: 80px 0;
}
/*START SECTION TITLE DESIGN*/
.section-title {
    margin-bottom: 60px;
}
.section-title h2 {
    font-size: 54px;
    font-weight: 600;
    margin-top: 0;
    position: relative;
    text-transform: capitalize;
}
h2.section-title-white {
    color: #fff;
    font-size: 54px;
    font-weight: 600;
    margin-top: 0;
    position: relative;
    text-transform: capitalize;
}
p.section-title-white {
    color: #fff;
}
.section-title span {
    background: #f5325c none repeat scroll 0 0;
    display: block;
    height: 2px;
    margin: 10px auto;
    width: 100px;
}

.section-title-white {
    color: #fff;
    position: relative;
}
.section-title p {
    padding: 0 10px;
    width: 60%;
    margin: auto;
}
/*END SECTION TITLE DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
    background: #ffaa17 none repeat scroll 0 0;
    border-radius: 30px;
    bottom: 5px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    height: 50px;
    line-height: 47px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    position: fixed;
    right: 5px;
    text-align: center;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 50px;
}
@media only screen and (max-width: 768px) {
    .topcontrol {
        display: none;
    }
}
.topcontrol:hover {
    background: #222;
    color: #fff;
}
/*END SCROLL TO TOP*/

/*START BUTTON DESING*/
.btn_one {
    background: #fff;
    border: 2px solid #1b2032;
    color: #1b2032;
    padding: 8px 30px;
    border-radius: 30px;
    transition: 0.3s;
    margin-top: 10px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.3);
    display: inline-block;
}
.btn_one:hover {
    background: #ffaa17;
    border: 2px solid #ffaa17;
    color: #fff;
}
/*END BUTTON DESING*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 02.START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
.home_bg {
    height: 700px;
    position: relative;
}
.home_bg::before {
    background: rgba(0, 0, 0, 0.2);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.hero-text {
    padding-top: 250px;
    position: relative;
}

.hero-text h2 {
    color: #fff;
    font-size: 56px;
    font-weight: 700;
    text-transform: uppercase;
}
.hero-text p {
    color: #fff;
    margin-bottom: 25px;
}
.hero-text a {
    background: #ffaa17;
    border: 2px solid #ffaa17;
    color: #fff;
    padding: 8px 30px;
    border-radius: 30px;
    transition: 0.3s;
    margin-top: 10px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.3);
    display: inline-block;
}
.hero-text a:hover {
    background: none;
    border: 2px solid #fff;
    color: #fff;
}
.home_video {
    height: 750px;
    position: relative;
}
.home_video:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    content: "";
    left: 0;
    top: 0;
}
.html-video {
    top: 0%;
    left: 0%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slider-caption {
    position: absolute;
    top: 33%;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 15;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
video {
    min-width: 100%;
    height: 100%;
}
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 04.START ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/
.feature_area {
    padding-bottom: 80px;
    position: relative;
    margin-top: -80px;
}
@media only screen and (max-width: 768px) {
    .feature_area {
        margin-top: 0px;
    }
}
.feature_bg {
    padding: 60px;
    background: #fff;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
    border-radius: 10px;
    margin-top: -100px;
}
@media only screen and (max-width: 768px) {
    .feature_bg {
        margin-top: 0px;
    }
}
.single_feature {
    background: #f9fcff;
    position: relative;
    padding: 60px;
    border: 1px solid #eee;
    border-radius: 5px;
    transition: 0.3s;
}
.single_feature:hover {
    background: #fff;
    box-shadow: 0px 60px 60px rgba(0, 0, 0, 0.1);
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);
}
.single_feature img {
    width: 60px;
    margin-bottom: 25px;
}
.single_feature h4 {
    margin-bottom: 15px;
    font-size: 20px;
}
.single_feature p {
}
.single_about_content {
    margin-top: -60px;
    background: #fff;
    padding: 60px;
    border-radius: 10px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
    position: relative;
    margin-bottom: 60px;
}
.single_about_content h2 {
    margin-bottom: 30px;
    font-size: 50px;
    font-weight: 500;
}
.single_about_content p {
}

.hire_us_area {
    background: #f9fcff;
}
.hire_img {
}
.hire_img img {
    width: 200px;
}
.hire_content {
}
.hire_content h2 {
    font-weight: 500;
    font-size: 50px;
    margin-bottom: 20px;
}
.hire_content p {
    margin-bottom: 30px;
}
.hire_content a {
}
/*
* ----------------------------------------------------------------------------------------
* 04.END ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 05.START COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.counter_feature {
    background: #8bc34a;
    position: relative;
    margin-bottom: 80px;
}
.single-project {
    border-right: 1px solid #3e3c85;
    position: relative;
}
.single-project-mrnone {
    border-right: 0px;
}
.single-project img {
    width: 60px;
    margin-bottom: 20px;
}
.single-project h2 {
    font-weight: 700;
    font-size: 50px;
    color: #fff;
}
.single-project h4 {
    margin-bottom: 0;
    font-size: 16px;
    color: #fff;
}
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    margin-top: 55px;
    max-width: 900px;
    width: 100%;
}
.video_btn {
    padding: 150px 0;
    position: relative;
    border: 15px solid #fff;
    margin-top: 100px;
    margin-bottom: -180px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
}
.video_btn h3 {
    background: #ffaa17;
    padding: 30px;
    margin: 0 40px;
    line-height: 40px;
    margin-bottom: 30px;
    text-transform: capitalize;
    font-weight: 600;
}
.video_btn a {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    border: 4px solid #fff;
    border-radius: 100px;
    color: #fff;
    display: block;
    font-size: 34px;
    height: 100px;
    line-height: 90px;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100px;
    transition: 0.3s;
}
.video_btn a:hover {
    border: 4px solid #ffaa17;
}
/*
* ----------------------------------------------------------------------------------------
* 05.END COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 06.START WHY CHOOSE US DESIGN
* ----------------------------------------------------------------------------------------
*/
.why_choose_area {
    margin-top: 180px;
}
.single_why_choose {
    margin-top: 60px;
}
.single_why_choose h2 {
    font-size: 60px;
    font-weight: 600;
    line-height: 76px;
    margin-bottom: 30px;
}
.single_why_choose p {
    margin-bottom: 30px;
}
.single_why_choose_img img {
}
.single_why_choose a {
}
.single_why_choose a:hover {
}
/*
* ----------------------------------------------------------------------------------------
* 06.END WHY CHOOSE US DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 07.START SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
.service_area {
    background: #f9fcff;
    padding-bottom: 50px;
}
.single_service {
    background: #fff;
    padding: 60px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.1);
    margin-bottom: 30px;
}
.single_service img {
    margin-bottom: 20px;
}
.single_service h4 {
    margin-bottom: 20px;
    font-size: 22px;
}
.single_service p {
    margin-bottom: 20px;
}
/*
* ----------------------------------------------------------------------------------------
* 07.END SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 08.START CASE STUDY DESIGN
* ----------------------------------------------------------------------------------------
*/
.case_content_top {
}
.case_content_top h2 {
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 46px;
    line-height: 60px;
    padding-right: 60px;
}
.case_content_top p {
    padding-right: 40px;
    margin-bottom: 20px;
}
.case_content_top_img img {
}
.case_content_area {
}
.case_content {
}
.case_content h2 {
    margin-bottom: 20px;
}
.case_content p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 30px;
    padding-right: 40px;
}
/*
* ----------------------------------------------------------------------------------------
* 08.END CASE STUDY DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 09.START POROFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/
.portfolio_area {
    overflow: hidden;
}
.mix {
    display: none;
}
.portfolio_filter ul {
    list-style: none;
    margin-bottom: 60px;
}
.portfolio_filter ul li {
    font-weight: 500;
    text-transform: capitalize;
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    font-size: 16px;
    color: #252d35;
    transition: 0.5s;
    margin: 0 3px 0px;
    border-right: 2px solid #eee;
    letter-spacing: 0px;
}
.portfolio_filter ul li:last-child {
    border-right: 0px;
}
.portfolio_filter .active {
    color: #ffaa17;
}
.portfolio-grid {
    position: relative;
}
.single-gallery {
    position: relative;
}
.single-gallery:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transition: 0.5s;
    opacity: 0;
    border-radius: 4px;
}
.single-gallery img {
    border-radius: 4px;
}
.gallery_enlarge_icon {
    opacity: 0;
}
.gallery_enlarge_icon {
    background-color: #ffaa17;
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    transition: 0.5s;
}

.gallery_enlarge_icon:hover,
.gallery_enlarge_icon:focus {
    background-color: #fff;
    color: #333;
}

.single-gallery h4 {
    position: absolute;
    left: 15px;
    bottom: 10px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    opacity: 0;
    transition: 0.5s;
}
.single-gallery h4 a {
    color: #fff;
}
.single-gallery h4 a:hover {
    color: #ffaa17;
}
.portfolio-item {
    margin-bottom: 30px;
}
.gallery-btn {
    background-color: #fc5b62;
    border: 1px solid #fc5b62;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    padding: 13px 30px;
    text-transform: capitalize;
    transition: all 0.3s ease 0s;
    font-weight: 600;
    letter-spacing: 1px;
}
.gallery-btn:hover,
.gallery-btn:focus {
    background-color: #211e3b;
    border-color: #211e3b;
    color: #fff;
}
.single-gallery:hover:before,
.single-gallery:hover .gallery_enlarge_icon,
.single-gallery:hover h4 {
    opacity: 1;
}
.portfolio_btn {
    margin-top: 30px;
}
.portfolio_btn a {
}
/*START PORTFOLIO SINGLE PAGE DESIGN*/
.portfolio_project_area {
    background: #f9fcff;
    padding-bottom: 50px;
}
.single_project {
    background: #fff;
    padding: 40px;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
}
.single_project img {
    width: 500px;
    float: left;
    margin-right: 30px;
}
.single_project h1 {
    font-size: 80px;
    margin-bottom: 10px;
    color: #ffaa17;
}
.single_project h2 {
    margin-bottom: 20px;
}
.single_project p {
    margin-bottom: 20px;
}
.single_project a {
}

.single_project_area {
    background: #f9fcff;
    padding-bottom: 50px;
}
.project_dec {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.08);
    margin-bottom: 30px;
    padding: 40px;
    border-radius: 10px;
}
.project_dec img {
    margin-right: 20px;
    width: 600px;
}
.about_project h4 {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    font-weight: 600;
}
.about_project p {
    margin-bottom: 30px;
}
.about_project_details {
    margin-bottom: 20px;
}
.about_project_details ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.about_project_details ul li {
    padding: 5px 0;
}
.about_project_details ul li i {
    color: #ffaa17;
    margin-right: 10px;
}
.about_project_details ul li a {
    color: #ffaa17;
    font-weight: 700;
}
.about_project_details ul li a:hover {
    text-decoration: underline;
}
/*END PORTFOLIO SINGLE PAGE DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 09.END POROFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 10.START SKILL DESIGN
* ----------------------------------------------------------------------------------------
*/
.skills_area {
    position: relative;
    padding-top: 80px;
    padding-bottom: 0;
    margin-bottom: 80px;
}
.skills_area:before {
    background: #8bc34a;
    opacity: 0.2;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.skill_bg {
    background: #fff;
    padding: 70px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 10px 40px -10px #8bc34a6d;
    margin-bottom: -80px;
}
.skill_content {
}
.skill_content h2 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 30px;
}
.skill_content p {
    margin-bottom: 30px;
}
.skill_bar {
    margin-right: 30px;
}
.progress-bar-text {
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: capitalize;
    font-weight: 500;
}
.progress-bar-text span {
    float: right;
}
.progress-bar {
    background: #e8e8e9 none repeat scroll 0 0;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    height: 10px;
    margin: 0 0 20px;
    border-radius: 30px;
    position: relative;
    width: 100%;
}
.progress-bar > span {
    background: #ffaa17 none repeat scroll 0 0;
    display: block;
    height: 100%;
    width: 0;
    border-radius: 30px;
}
/*
* ----------------------------------------------------------------------------------------
* 10.END SKILL DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 11.START PROMOTION DESIGN
* ----------------------------------------------------------------------------------------
*/
.promotional_area {
}
.promotional_content {
}
.promotional_content img {
}
.promotional_content p {
    width: 70%;
    margin: auto;
    margin-top: 40px;
    text-align: center;
    font-size: 20px;
    line-height: 32px;
}
/*
* ----------------------------------------------------------------------------------------
* 11.END PROMOTION DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 12.START TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/
.team_area {
}
.team_title {
    color: #fff;
    margin-bottom: 60px;
    text-align: center;
    text-transform: capitalize;
    font-weight: 600;
}
.our-team {
    margin-bottom: 30px;
}
.single-team {
    margin-bottom: 10px;
}
.single-team img {
    margin-bottom: 15px;
    border-radius: 2px;
    border: 10px solid #fff;
}
.single-team h3 {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
}
.single-team p {
    margin-bottom: 0px;
}

.our-team .social {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.our-team .social li {
    display: inline-block;
}
.our-team .social li a {
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    color: #fff;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    border-radius: 30px;
    margin: 3px;
}
.our-team:hover .social li:nth-child(1) a {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.our-team:hover .social li:nth-child(2) a {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.our-team:hover .social li:nth-child(3) a {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.our-team:hover .social li:nth-child(4) a {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.our-team .social li a:hover {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.facebook {
    background: #1c58a1;
}
.facebook:hover {
    background: #fff;
    color: #1c58a1 !important;
}
.twitter {
    background: #0cbce3;
}
.twitter:hover {
    background: #fff;
    color: #0cbce3 !important;
}
.google {
    background: #f04537;
}
.google:hover {
    background: #fff;
    color: #f04537 !important;
}
/*
* ----------------------------------------------------------------------------------------
* 12.END TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 13.START TESTIMONIALS DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonial_area {
    padding-bottom: 30px;
}
.single_testimonial {
    margin-bottom: 50px;
}
.testimonial_img {
}
.testimonial_img img {
    width: 100px;
    border-radius: 100px;
    margin-right: 20px;
    float: left;
    margin-bottom: 60px;
}
.single_testimonial p {
    margin-bottom: 20px;
    overflow: hidden;
}
.single_testimonial h4 {
    overflow: hidden;
    font-size: 20px;
}
.single_testimonial h5 {
    font-family: "Poppins", sans-serif;
    overflow: hidden;
    font-size: 16px;
}
/*
* ----------------------------------------------------------------------------------------
* 13.END TESTIMONIALS DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
 * ----------------------------------------------------------------------------------------
 * 14.START PRICING DESIGN
 * ----------------------------------------------------------------------------------------
 */
.pricing-table-area {
    position: relative;
}
.pricing_page {
    background: #f9fcff;
}
.pricing-table-area:before {
    background: #0e5ca6;
    opacity: 0.1;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.pricingTable {
    color: #fff;
    background: #0e5ca6;
    text-align: center;
    padding: 10px 10px 20px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}
.pricingTable:before,
.pricingTable:after {
    content: "";
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #692a92;
    box-shadow: 0 0 1px 8px #fff;
    position: absolute;
    top: 100px;
    right: 20px;
}
.pricingTable:after {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 1px 4px #fff;
    top: 35px;
    right: 50px;
}
.pricingTable .pricingTable-header {
    margin: 0 0 40px;
}
.pricingTable .pricingTable-header:before {
    content: "";
    background: #fff;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    left: -30px;
}
.pricingTable .price-value {
    color: #0e5ca6;
    background: #fff;
    width: 140px;
    height: 140px;
    padding: 25px 10px;
    border: 3px solid #0e5ca6;
    border-radius: 50%;
    position: relative;
}
.pricingTable .price-value:before {
    content: "";
    border: 2px solid #0e5ca6;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
}
.pricingTable .price-value .currency {
    font-size: 35px;
    line-height: 35px;
    display: inline-block;
    vertical-align: top;
    margin: 0 -3px 0 0;
}
.pricingTable .price-value .amount {
    font-size: 52px;
    line-height: 70px;
    display: inline-block;
}
.pricingTable .price-value .duration {
    font-size: 16px;
    text-transform: capitalize;
    display: block;
    margin-top: -7px;
}
.pricingTable .pricing-content {
    border: 2px solid #fff;
    padding: 23px 10px 45px;
    margin: 0 20px;
}
.pricingTable .title {
    font-size: 40px;
    font-weight: 500;
    text-transform: capitalize;
    /* letter-spacing: 1px; */
    margin: 0;
    color: #fff;
    margin-bottom: 30px;
}
.pricingTable .pricing-content ul {
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
}
.pricingTable .pricing-content ul li {
    /* font-size: 17px; */
    font-weight: 300;
    text-transform: capitalize;
    /* letter-spacing: 1px; */
    padding: 0 0 0 20px;
    margin: 0 0 10px;
    position: relative;
}
.pricingTable .pricing-content li:last-child {
    margin: 0;
}
.pricingTable .pricing-content li:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 7px;
    left: 0;
}
.pricingTable .pricingTable-signup a {
    color: #0e5ca6;
    background: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    text-transform: capitalize;
    /* letter-spacing: 1px; */
    width: 60%;
    display: block;
    margin: -22px auto 0;
    transition: all 0.3s ease 0s;
}
.pricingTable .pricingTable-signup a:hover {
    color: #ffaa17;
}
.pricingTable.blue {
    background: #0e5ca6;
}
.pricingTable.blue:before,
.pricingTable.blue:after,
.pricingTable.blue .price-value,
.pricingTable.blue .price-value:before {
    border-color: #253e81;
    color: #253e81;
}
.pricingTable.blue .pricingTable-signup a {
    color: #253e81;
}
.pricingTable.red .pricingTable-signup a {
    color: #cc1438;
}
/*
 * ----------------------------------------------------------------------------------------
 * 14.END PRICING DESIGN
 * ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 15.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.blog_area {
    background: #f9fcff;
    padding-bottom: 50px;
}
.home_single_blog {
    background: #fff;
    margin-bottom: 30px;
}
.home_blog_content {
    padding: 30px;
    border-radius: 10px;
}
.blog-img img {
    width: 1000%;
}
.home_single_blog img {
    width: 100%;
}
.blog_title_info {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.blog_title_info h2 {
}
.blog_title_info h2 a {
    color: #1b2032;
    transition: 0.3s;
    margin-bottom: 5px;
    display: inline-block;
}
.blog_title_info h2 a:hover {
    color: #ffaa17;
}
.blog_title_info span {
    font-size: 14px;
    margin: 0 5px;
}
.blog_title_info span a {
    color: #ffaa17;
    transition: 0.3s;
    letter-spacing: 1px;
}
.blog_title_info span a:hover {
    color: #1b2032;
}
.home_single_blog p {
}
.home_b_btn {
    color: #1b2032;
    font-weight: 300;
    margin-top: 10px;
    display: inline-block;
}
.home_b_btn:hover {
    color: #ffaa17;
}

/*START BLOG SIDEBAR DESIGN*/
.contact_form_blog {
    padding-top: 0px !important;
}
.blog_sidebar_title {
    border-bottom: 1px solid #eee;
    color: #1b2032;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: x;
    margin-bottom: 15px;
    margin-top: 0;
    padding-bottom: 10px;
    text-transform: capitalize;
}
.blog_search,
.latest_blog,
.advertisement_post,
.video_post,
.categories,
.tag,
.banner {
    margin-bottom: 30px;
    background: #fff;
    padding: 30px 30px;
    border-radius: 10px;
    border-top: 3px solid #ffaa17;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
}
.tag {
    overflow: hidden;
}
.blog_search {
}
.blog_search input {
    background: #f8f4ef none repeat scroll 0 0;
    border: 1px solid #eee;
    border-radius: 0;
    color: #1b2032;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    height: 50px;
}
.blog_search input:focus {
    border: 1px solid #ffaa17;
}
.single_latest_blog {
    overflow: hidden;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.single_latest_blog h4 {
    color: #666;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.single_latest_blog:hover h4 {
    color: #ffaa17;
}
.single_latest_blog span {
    color: #161616;
}
.single_upcoming_event {
    margin-bottom: 20px;
}
.single_upcoming_event h4 {
    color: #1b2032;
    font-size: 17px;
    font-weight: 600;
    line-height: 28px;
    margin: 10px 0 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.single_upcoming_event:hover h4 {
    color: #ffaa17;
}
.single_upcoming_event span i {
    margin-right: 5px;
    color: #ffaa17;
}
.single_upcoming_event span {
    color: #777;
}
.categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.categories ul li {
}
.categories ul li a {
    color: #1b2032;
    display: block;
    font-size: 14px;
    padding: 5px 0;
    font-family: poppins;
    font-weight: 400;
}
.categories ul li a:hover {
    color: #ffaa17;
}
.categories ul li a i {
    margin-right: 10px;
}
.video_post iframe {
    width: 100%;
    height: 100%;
    border: medium none;
}
.tag a {
    border: 2px solid #1b2032;
    border-radius: 30px;
    color: #1b2032;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: 400;
    margin: 6px 4px;
    padding: 3px 20px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #fff;
}
.tag a:hover {
    background: #ffaa17;
    color: #fff;
    border: 2px solid #ffaa17;
}
/*END BLOG SIDEBAR DESIGN*/
/*START BLOG SINGLE PAGE DESIGN*/
.bc_left {
    padding-left: 30px;
    font-style: italic;
    font-weight: 600;
}
.bc_bottom {
    margin-bottom: 30px;
}
.single_blog_post {
    margin-bottom: 60px;
}
.single_blog_post img {
    width: 750px;
    height: 455px;
}
.blog_post_text h4 {
    margin: 30px 0;
}
.author_part {
    margin-bottom: 30px;
    overflow: hidden;
    margin-top: 60px;
}
.single_author {
    background: #fff none repeat scroll 0 0;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.08);
    overflow: hidden;
}
.author_part img {
    border: 4px solid #ffaa17;
    border-radius: 100px;
    float: left;
    height: 120px;
    margin-right: 20px;
    width: 120px;
}
.author_part h4 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}
.author_part p {
    margin-bottom: 0;
}
.blog_head_title {
    border-bottom: 1px solid #eee;
    margin: 0 0 30px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
}
.comments_part {
    margin-bottom: 60px;
}
.single_comment {
    margin-bottom: 30px;
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.08);
    overflow: hidden;
}
.single_comment_mbnone {
    margin-bottom: 0px;
}
.single_comment img {
    border: 4px solid #ffaa17;
    border-radius: 100px;
    float: left;
    height: 120px;
    margin-right: 20px;
    width: 120px;
}
.single_comment h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.single_comment p {
    margin-bottom: 0;
}
.comment-box {
    background: #fff;
    border-radius: 10px;
}
.comment_form input,
.comment_form textarea {
    border-bottom: 1px solid #dddd !important;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}
.comment_form textarea {
}

/*END BLOG SINGLE PAGE DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 15.END BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 16.START ADDRESS DESIGN
* ----------------------------------------------------------------------------------------
*/
.contact_area {
    background: #0e5ca6;
}
.single_address {
}
.single_address h4 {
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 20px;
}
.mr_20 {
    margin-bottom: 10px;
}
.single_address p {
}
.single_address p a {
    color: #1b2032;
    transition: 0.3s;
}
.single_address p a:hover {
    color: #ffaa17;
}
.contact input {
    background: #fff;
    border-bottom: 1px solid #fff;
    border-radius: 0px;
    box-shadow: none;
    color: #1b2032;
    font-size: 18px;
    font-weight: 400;
    height: 70px;
    padding: 20px;
    width: 100%;
    margin-bottom: 15px;
    font-family: "Poppins", sans-serif;
}
.contact textarea {
    background: #fff;
    border-bottom: 1px solid #fff;
    border-radius: 0px;
    box-shadow: none;
    color: #1b2032;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 400;
    padding: 20px;
    width: 100%;
    font-family: "Poppins", sans-serif;
}
.contact input:focus {
    border: 1px solid #f6f6f6;
    box-shadow: none;
    color: #1b2032;
    background: #fff;
    outline: 0 none;
}
.contact textarea:focus {
    border: 1px solid #fff;
    box-shadow: #f6f6f6;
    outline: 0 none;
    color: #1b2032;
    background: #fff;
}
.contact button {
    font-size: 16px;
}
.contact_btn {
    background: #ffaa17;
    display: inline-block;
    color: #fff;
    border: 2px solid #ffaa17;
    padding: 12px 40px;
    0: 0.3s;
}
.contact_btn:hover {
    background: #232a34;
    border: 2px solid #232a34;
}
/*
* ----------------------------------------------------------------------------------------
* 16.END ADDRESS DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
 * ----------------------------------------------------------------------------------------
 * 17.START PARTNER DESIGN
 * ----------------------------------------------------------------------------------------
*/
.partner-logo {
    padding-bottom: 40px;
}
.single_logo {
}
.single_logo a img {
    width: 100px;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.single_logo a img:hover {
    opacity: 1;
}

/*
 * ----------------------------------------------------------------------------------------
 * 17.END PARTNER DESIGN
 * ----------------------------------------------------------------------------------------
*/

.map {
}
.map iframe {
    width: 100%;
    height: 400px;
    margin-bottom: -10px;
}

/*
* ----------------------------------------------------------------------------------------
* 18.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer {
    padding-bottom: 50px;
    padding-top: 80px;
    background-size: 100% 100%;
}
.footer_logo {
    padding-top: 160px;
}
.footer_logo img {
    width: 150px;
}
.footer_logo p {
    color: #a9b4c7;
    margin-top: 10px;
    margin-bottom: 25px;
}
.single_footer {
    padding-top: 160px;
}
.single_footer h4 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 17px;
}
.single_footer p {
    color: #fff;
}
.single_footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.single_footer ul li {
}
.single_footer ul li a {
    color: #fff;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    line-height: 36px;
    font-size: 15px;
    font-weight: 300;
    text-transform: capitalize;
}
.single_footer ul li a:before {
    content: "-";
    font-family: "LineAwesome";
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 20px;
    margin-right: 6px;
}
.single_footer ul li a:hover {
    color: #ffaa17;
}

.single_footer_address {
}
.single_footer_address ul {
}
.single_footer_address ul li {
    color: #fff;
}
.single_footer_address ul li span {
    font-weight: 400;
    color: #fff;
    line-height: 28px;
}
.contact_social ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.single_footer_address p {
    margin-bottom: 10px;
}

/*START SOCIAL PROFILE CSS*/
.newsletter-form {
    padding-top: 160px;
}
.newsletter-form h4 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 18px;
}
.newsletter-form input {
    width: 100%;
    margin-bottom: 20px;
    height: 50px;
    padding: 10px;
    color: #1d293e;
    border-radius: 2px;
    border: 0px;
}
.subscribe button {
    width: 100%;
}
.subs_btn {
    background: #ffaa17;
    border: 2px solid #ffaa17;
    color: #fff;
    padding: 12px;
    transition: 0.3s;
}
.subs_btn:hover {
    background: #fff;
    border: 2px solid #fff;
    color: #ffaa17;
}
.social_profile {
    margin-top: 10px;
}
.social_profile ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.social_profile ul li {
    float: left;
}
.social_profile ul li a {
    text-align: center;
    border: 0px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-right: 10px;
    font-size: 16px;
    color: #fff;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 30px;
}
@media only screen and (max-width: 768px) {
    .social_profile ul li a {
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 480px) {
    .social_profile ul li a {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}
.social_profile ul li a:hover {
    color: #fff;
}
.f_facebook {
    background: #3b5998;
}
.f_twitter {
    background: #1a90d9;
}
.f_instagram {
    background: #ff5252;
}
.f_linkedin {
    background: #0e76a8;
}
/*END SOCIAL PROFILE CSS*/
.footer_copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    margin-top: 60px;
}
.footer_copyright p {
    color: #fff;
    text-align: center;
    text-transform: capitalize;
}
/*
* ----------------------------------------------------------------------------------------
* 18.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 19.START SECTION TOP DESIGN
* ----------------------------------------------------------------------------------------
*/
.section-top {
    padding-bottom: 100px;
    padding-top: 160px;
    position: relative;
}
.section-top:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #8bc34a;
    opacity: 0.2;
    content: "";
    left: 0;
    top: 0;
}
.section-top-title h1 {
    color: #fff;
    font-weight: 600;
    position: relative;
}
/*
* ----------------------------------------------------------------------------------------
* 19.END SECTION TOP DESIGN
* ----------------------------------------------------------------------------------------
*/

/* ----------------------------------------------------------------------------------------
* 20.START FAQ DESIGN
* ----------------------------------------------------------------------------------------
*/
.faq1-area {
    padding: 100px 0 100px;
}

.faq-tab-menus {
    display: block;
    text-align: center;
    border: 0;
    margin: 0 0 100px;
}

.faq-tab-menus .nav-item {
    display: inline-block;
    border: 0;
    margin: 0;
}

.faq-tab-menus .nav-item .nav-link {
    display: inline-block;
    border: 0;
    margin: 0;
    color: #1d293e;
    font-size: 24px;
    line-height: 28px;
    padding: 16px 60px;
    border-radius: 3px;
}

.faq-tab-menus .nav-item .nav-link.active {
    background: #ffaa17;
    color: #ffffff;
    box-shadow: 3.709px 5.936px 51px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3.709px 5.936px 51px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3.709px 5.936px 51px 0px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 3.709px 5.936px 51px 0px rgba(0, 0, 0, 0.2);
}

.faq_tab .card {
    border: 1px solid #eee;
    background: #fff;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
    border-radius: 5px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    margin-bottom: 20px;
}

.faq_tab .card .card-header {
    border: 0;
    background: transparent;
    padding: 0;
}

.faq_tab .card .card-header .btn {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-size: 26px;
    line-height: 30px;
    color: #1d293e;
    font-weight: 500;
    padding: 24px 46px;
    position: relative;
    white-space: pre-wrap;
}

.faq_tab .card .card-header .btn::after {
    content: "\f077";
    font-family: "fontAwesome";
    font-weight: 900;
    color: #767e92;
    font-size: 14px;
    position: absolute;
    right: 46px;
    top: 30px;
}

.faq_tab .card .card-header .btn.collapsed::after {
    content: "\f078";
}

.faq_tab .card .card-body {
    padding: 6px 46px 40px;
    background: #f0fbff;
}

.faq_tab .card:hover {
    box-shadow: 5.299px 8.48px 50px 0px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 5.299px 8.48px 50px 0px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 5.299px 8.48px 50px 0px rgba(0, 0, 0, 0.08);
    -o-box-shadow: 5.299px 8.48px 50px 0px rgba(0, 0, 0, 0.08);
}

.faq_tab .card:hover .card-header .btn::after {
    color: #1386fc;
}
/* ----------------------------------------------------------------------------------------
* 20.END FAQ DESIGN
* ----------------------------------------------------------------------------------------
*/

/* ----------------------------------------------------------------------------------------
* 21.START SERVICE PAGES DESIGN
* ----------------------------------------------------------------------------------------
*/
.marketing_area {
}
.marketing_content {
}
.marketing_content h2 {
    margin-bottom: 40px;
    font-size: 40px;
    font-weight: 600;
}
.marketing_content img {
}
.marketing_text {
}
.marketing_text p {
    margin-bottom: 20px;
}
.single_marketing {
    margin-bottom: 40px;
}
.marketing_icon_img {
}
.marketing_icon_img img {
    float: left;
    margin-right: 20px;
    width: 70px;
    margin-bottom: 20px;
}
.single_marketing h3 {
}
.single_marketing p {
    overflow: hidden;
}
/* ----------------------------------------------------------------------------------------
* 21.END SERVICE PAGES DESIGN
* ----------------------------------------------------------------------------------------
*/

/* Starting me scroll karne wala logo hidden rahega */
.site-navbar .logo-sticky {
    display: none;
}

/* Starting me top wala logo dikhega */
.site-navbar .logo-top {
    display: inline-block;
}

/* Jab user scroll karega aur header par sticky class aayegi.
   Note: Agar aapki js file scroll hone par '.scrolled' ki jagah '.shrink' ya '.sticky' 
   class add kar rahi hai, toh aap '.scrolled' ko us class se replace kar dena. */
.site-navbar.scrolled .logo-top {
    display: none; /* Top logo chhup jayega */
}

.site-navbar.scrolled .logo-sticky {
    display: inline-block; /* Sticky logo dikhne lagega */
}

/* Logo ka size chhota karne aur space add karne ke liye */
.site-logo img {
    max-height: 80px; /* Logo ki height ko control karne ke liye (Aap 45px ya 50px rakh sakte hain) */
    width: auto; /* Width apne aap adjust ho jayegi bina stretch hue */
    padding-top: 10px; /* Upar space dene ke liye */
    padding-bottom: 10px; /* Niche space dene ke liye */
    transition: all 0.3s ease; /* Smooth effect ke liye jab scroll ho */
}

/* Jab user niche scroll kare (Sticky Header), tab agar aur chhota karna ho */
.site-navbar.scrolled .site-logo img {
    max-height: 70px; /* Scroll hone par logo thoda aur chhota ho jayega */
    padding-top: 5px;
    padding-bottom: 5px;
}

/* About Section Base Styling */
.about-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #ffffff;
}

/* Image Wrapper and Badge */
.about-img-wrap {
    position: relative;
    padding-right: 20px;
}

.about-img-wrap img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    right: 0;
    background: #8bc34a; /* Aapke theme ka brand color */
    color: #ffffff;
    padding: 20px 25px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.experience-badge .number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.experience-badge .text {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-top: 5px;
}

/* Text Content Box */
.about-content-box .sub-title {
    font-size: 14px;
    font-weight: 600;
    color: #8bc34a;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.about-content-box h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}

/* Features List Styling */
.about-features-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
}

.about-features-list li i {
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 20px;
    color: #8bc34a; /* Checkbox icon color */
}

.about-features-list li strong {
    color: #1a1a1a;
    display: block;
    margin-bottom: 2px;
}

/* Custom Button */
.custom-about-btn {
    background-color: #8bc34a;
    border-color: #8bc34a;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.custom-about-btn:hover {
    background-color: #8bc34a;
    border-color: #8bc34a;
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .about-content-box h2 {
        font-size: 28px;
    }
    .about-img-wrap {
        padding-right: 0;
        margin-bottom: 40px;
    }
}
/* Custom CSS for Option 1 & 2 */
/* ==========================================================================
   OPTION 1: SPLIT GRID LAYOUT STYLES
   ========================================================================== */
/* .split-slider-text-box {
    padding: 60px;
    background: #ffffff; 
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.agency-tag {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #ffaa00; 
    font-weight: 700;
    margin-bottom: 15px;
}
.agency-title {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.1;
    color: #111111;
    margin-bottom: 20px;
}
.agency-subtitle {
    font-size: 1.2rem;
    color: #666666;
    margin-bottom: 30px;
}
.split-slider-img-wrap {
    position: relative;
    overflow: hidden;
    height: 650px; 
}
.split-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
}
.carousel-item.active .split-main-img {
    transform: scale(1.08); 
}
.img-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 20%
    );
    z-index: 1;
}
.btn-creative-primary {
    background: #111;
    color: #fff;
    padding: 14px 30px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: 0.3s ease;
}
.btn-creative-primary:hover {
    background: #ffaa00;
    color: #111;
} */

/* ==========================================================================
   OPTION 2: CINEMATIC DARK MODE STYLES
   ========================================================================== */
/* .cinematic-bg-img {
    width: 100%;
    height: 700px;
    object-fit: cover;
}
.cinematic-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.1) 100%
    );
    z-index: 1;
}
.cinematic-content-holder {
    position: absolute;
    bottom: 12%;
    left: 8%;
    z-index: 2;
    display: flex;
    align-items: flex-start;
}
.creative-line-pattern {
    width: 4px;
    height: 120px;
    background: #ffcc00;
    margin-right: 25px;
}
.welcome-label {
    color: #ffcc00;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    display: block;
    margin-bottom: 10px;
}
.huge-display-text {
    font-size: 4.2rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.sub-display-text {
    color: #e0e0e0;
    font-weight: 300;
    font-size: 1.5rem;
} */

/* Main Slider Wrapper - Proper Section Spacing */
/* ==========================================================================
   MAIN SLIDER WRAPPER & DESKTOP RESET
   ========================================================================== */
/* #madhya_agency_modern_slider {
    position: relative;
    width: 100%;
    height: 650px; 
    overflow: hidden;
    background: #111111;
}


.agency-clear-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.slider-content-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 6%;
    z-index: 5;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0) 100%
    );
}


.floating-text-card {
    background: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 40px 50px;
    border-radius: 12px;
    max-width: 600px;
    border-left: 5px solid #ffcc00;
}

.agency-mini-badge {
    color: #ffcc00;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
}

.agency-main-heading {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.agency-sub-heading {
    color: #e0e0e0;
    font-size: 1.3rem;
    font-weight: 400;
    margin-top: 10px;
} */

/* ==========================================================================
   CRITICAL MOBILE RESPONSIVE FIX (For Screens under 768px)
   ========================================================================== */
/* @media (max-width: 768px) {
    
    #madhya_agency_modern_slider {
        height: 400px !important; 
    }

    
    .agency-clear-img {
        height: 100% !important;
        object-fit: cover;
    }

    
    .slider-content-overlay-container {
        padding: 80px 20px 20px 20px !important; 
        align-items: flex-end !important;
        background: rgba(
            0,
            0,
            0,
            0.5
        ); /
    .floating-text-card {
        padding: 15px 20px !important;
        max-width: 100% !important;
        background: rgba(10, 10, 10, 0.85) !important;
        border-left: 4px solid #ffcc00 !important;
        margin-bottom: 20px; 
    }

    
    .agency-mini-badge {
        font-size: 10px !important;
        letter-spacing: 1px !important;
        margin-bottom: 4px !important;
    }

    .agency-main-heading {
        font-size: 1.8rem !important; 
        line-height: 1.2 !important;
    }

    .agency-sub-heading {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin-top: 5px !important;
    }

    
    .agency-nav-btn {
        display: none !important;
    }
} */

/* ==========================================================================
   DESKTOP GLOBAL STYLES (Screen sizes above 1024px)
   ========================================================================== */
#madhya_responsive_hero_slider {
    position: relative;
    width: 100%;
    height: 650px; /* Perfect Fixed Desktop Banner Height */
    background: #111111;
    overflow: hidden;
}

.responsive-slide-item {
    width: 100%;
    height: 650px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 2.5s ease-in-out;
}

/* Super Light Side Shade for Contrast without making image dark */
.clean-glass-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0 0.1) 0%,
        rgba(0, 0, 0 0) 60%,
        rgba(0, 0, 0 0) 100%
    );
    z-index: 1;
}

.responsive-slider-content-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 8%;
    z-index: 2;
}

.responsive-text-card-block {
    max-width: 650px;
    border-left: 5px solid #ffcc00;
    padding-left: 25px;
}

.m-agency-mini-tag {
    color: #ffcc00;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.m-agency-bold-title {
    color: #ffffff;
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.m-agency-light-desc {
    color: #e5e5e5;
    font-size: 1.4rem;
    font-weight: 400;
    margin-top: 15px;
}

/* ==========================================================================
   TABLET RESPONSIVE FIX (For iPads and Tablets: 768px to 1024px)
   ========================================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    #madhya_responsive_hero_slider,
    .responsive-slide-item {
        height: 500px !important; /* Tablet optimized height */
    }
    .m-agency-bold-title {
        font-size: 2.8rem !important;
    }
    .m-agency-light-desc {
        font-size: 1.2rem !important;
    }
}

/* ==========================================================================
   CRITICAL MOBILE RESPONSIVE FIX (For Mobile Screens under 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Fixed compact block for mobile viewports */
    #madhya_responsive_hero_slider,
    .responsive-slide-item {
        height: 420px !important; /* Strictly forces height, removing trailing black spaces */
    }

    /* Centers the background asset flawlessly on small screens */
    .responsive-slide-item {
        background-position: center center !important;
    }

    /* Pushes text down safely under your dynamic logo/header links */
    .responsive-slider-content-container {
        padding: 100px 20px 20px 20px !important;
        align-items: flex-end !important; /* Sticks text block cleanly towards the bottom */
        background: rgba(0, 0, 0, 0.35); /* Soft balance shade */
    }

    .responsive-text-card-block {
        padding-left: 15px !important;
        border-left: 4px solid #ffcc00 !important;
        background: rgba(
            15,
            15,
            15,
            0.75
        ) !important; /* Glass finish to protect layout typography text */
        padding: 15px !important;
        border-radius: 8px;
        width: 100% !important;
    }

    /* Custom sizing adjustments to keep words in single lines */
    .m-agency-mini-tag {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }

    .m-agency-bold-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    .m-agency-light-desc {
        font-size: 0.95rem !important;
        margin-top: 5px !important;
        line-height: 1.3 !important;
    }

    /* Hides standard bootstrap desktop arrows on mobile viewports for clean structure */
    .resp-nav {
        display: none !important;
    }
}

/* Madhya Advertising - Custom Feature Section Styles */
.feature_area .single_feature.text-center {
    text-align: center;
}

.feature_area .feature-icon {
    color: #8bc34a; /* Madhya Advertising Green */
    display: block;
    margin: 0 auto 20px auto;
}

.feature_area .single_feature h4 {
    margin-bottom: 12px;
    font-weight: 600;
}

.feature_area .single_feature p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Madhya Advertising - Counter Boxes with Smooth Hover Effect */
.counter_feature {
    /* Section background default rahega */
}

.counter_feature .single-project {
    background: #ffffff !important;
    padding: 30px 20px;
    border-radius: 12px; /* Cards ko thoda aur modern round corner diya */
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Default halka shadow */

    /* Hover smoothly chalne ke liye transition property ka use kiya */
    transition: all 0.4s ease-in-out;
}

/* Hover Effect: Card thoda upar lift hoga aur shadow deep hoga */
.counter_feature .single-project:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.counter_feature .counter-icon {
    color: #8bc34a; /* Madhya Advertising Green */
    display: block;
    margin: 0 auto 15px auto;
    transition: transform 0.4s ease; /* Icon rotation/bounce transition */
}

/* Hover karne par icon thoda scale (bada) ho jayega */
.counter_feature .single-project:hover .counter-icon {
    transform: scale(1.1);
}

.counter_feature .single-project h2.counter-num {
    font-weight: 700;
    margin-bottom: 5px;
    display: inline-block;
    color: #222222;
}

.counter_feature .counter-symbol {
    color: #8bc34a;
    font-weight: 700;
    font-size: 24px;
}

.counter_feature .single-project h4 {
    font-size: 15px;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* ==========================================================================
   Madhya Advertising - Why Choose Us Premium Redesign & Animations
   ========================================================================== */
.why_choose_area {
    background: #fdfdfd;
    position: relative;
    overflow: hidden;
}

/* Subtle background decorative element */
.why_choose_area::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: rgba(139, 195, 74, 0.03);
    border-radius: 50%;
    z-index: 1;
}

.why_choose_area .container {
    position: relative;
    z-index: 2;
}

/* Heading Typography & Left Border Entrance */
.why_choose_area .single_why_choose h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 25px;
    color: #111111;
    border-left: 5px solid #8bc34a; /* Brand Green Accent Bar */
    padding-left: 20px;
}

.why_choose_area .single_why_choose h2 span {
    color: #8bc34a;
    position: relative;
    display: inline-block;
}

/* Text paragraph spacing */
.why_choose_area .single_why_choose p {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 35px;
    text-align: justify;
}

/* Creative Animated Button */
.why_choose_area .btn_one {
    background: #8bc34a;
    color: #ffffff !important;
    padding: 14px 35px;
    border-radius: 50px;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 2px solid #8bc34a;
    box-shadow: 0 4px 15px rgba(139, 195, 74, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why_choose_area .btn_one:hover {
    background: #222222;
    border-color: #222222;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Right Side Image Block Redesign with Floating Animation */
.why_choose_area .single_why_choose_img {
    position: relative;
    padding: 15px;
}

/* Card frame overlay around image */
.why_choose_area .single_why_choose_img::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    height: 85%;
    border: 3px solid rgba(139, 195, 74, 0.2);
    border-radius: 20px;
    z-index: 1;
    transition: all 0.5s ease;
}

.why_choose_area .single_why_choose_img img {
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Complex Interaction on Image Hover */
.why_choose_area .single_why_choose_img:hover img {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 25px 50px rgba(139, 195, 74, 0.15);
}

.why_choose_area .single_why_choose_img:hover::before {
    transform: translate(15px, -15px);
    border-color: #8bc34a;
}

/* ==========================================================================
   Madhya Advertising - Skills/Metrics Section Premium Redesign
   ========================================================================== */
.skills_area {
    position: relative;
}

/* White box container inside the background image section */
.skills_area .skill_bg {
    background: #ffffff !important;
    padding: 45px 35px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border-left: 6px solid #8bc34a; /* Side branding strip */
}

/* Typography Redesign */
.skills_area .skill_content h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    color: #222222;
    margin-bottom: 15px;
}

.skills_area .skill_content p {
    font-size: 15px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 30px;
}

/* Custom Progress Bars Redesign */
.skills_area .progress-bar-linear {
    margin-bottom: 25px;
}

.skills_area .progress-bar-text {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
}

.skills_area .progress-bar-text span {
    color: #8bc34a; /* Text percent highlighted in green */
    font-weight: 800;
}

/* Base structural progress track */
.skills_area .progress-bar {
    background: #f0f0f0 !important;
    height: 10px;
    border-radius: 10px;
    width: 100%;
    position: relative;
    overflow: visible;
}

/* Active green inner progress line with hover scale */
.skills_area .progress-bar span {
    background: #8bc34a !important; /* Brand Green */
    height: 100%;
    border-radius: 10px;
    display: block;
    width: 0; /* Dynamic handle is left to the template's active JS */
    transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Elegant pulse effect on the container box when hovered */
.skills_area .skill_bg {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.skills_area .skill_bg:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(139, 195, 74, 0.2);
}
/* ==========================================================================
   Madhya Advertising - Liquid Neumorphic Glass Overlapping Section
   ========================================================================== */
.promotional_area {
    background-color: #f5f7f4; /* Subtle light sage background backdrop */
    position: relative;
    overflow: hidden;
}

/* Outer Flex Grid for Content Alignment */
.promotional_area .promo_liquid_grid {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 580px;
    padding: 20px 0;
}

/* --- LEFT SIDE: HIGH-QUALITY VISUAL CANVAS --- */
.promotional_area .promo_canvas_frame {
    width: 60%;
    position: relative;
    z-index: 1;
}

.promotional_area .promo_canvas_inner {
    width: 100%;
    height: 480px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
}

.promotional_area .promo_canvas_inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- RIGHT SIDE: OVERLAPPING LIQUID NEUMORPHIC GLASS CARD --- */
.promotional_area .promo_glass_card {
    position: absolute;
    right: 0;
    width: 48%; /* Clean 8% overlapping layout block */
    background: rgba(255, 255, 255, 0.82); /* Semi-transparent base layer */
    backdrop-filter: blur(16px); /* Premium OS style live glass blur */
    -webkit-backdrop-filter: blur(16px);
    padding: 55px 45px;
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 3;
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}

/* Custom Minimal Brand Monogram Asset Placeholder */
.promotional_area .promo_brand_icon {
    font-size: 32px;
    color: #8bc34a; /* Madhya Advertising Green */
    margin-bottom: 25px;
    display: inline-block;
}

.promotional_area .promo_glass_card h2 {
    font-size: 36px;
    font-weight: 800;
    color: #111111;
    line-height: 1.35;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.promotional_area .promo_glass_card p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #444444;
    margin-bottom: 0;
    text-align: justify;
}

/* --- DYNAMIC INTERACTIVE ANIMATION TRIGGERS --- */

/* 1. Glass card lifts up and glows with a neon-green aura shadow */
.promotional_area .promo_liquid_grid:hover .promo_glass_card {
    transform: translateY(-8px) translateX(-5px);
    box-shadow: 0 30px 65px rgba(139, 195, 74, 0.22);
    border-color: rgba(139, 195, 74, 0.3);
}

/* 2. Photo pushes back in opposite vector inside viewport */
.promotional_area .promo_liquid_grid:hover .promo_canvas_inner img {
    transform: scale(1.04) translateX(10px);
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 991px) {
    .promotional_area .promo_liquid_grid {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
    }
    .promotional_area .promo_canvas_frame,
    .promotional_area .promo_glass_card {
        width: 100%;
        position: relative;
        left: 0;
        right: 0;
    }
    .promotional_area .promo_canvas_inner {
        height: 320px;
    }
    /* Shifts beautifully to an overlay stack system on tablets/mobiles */
    .promotional_area .promo_glass_card {
        margin-top: -80px;
        width: 92%;
        margin-left: auto;
        margin-right: auto;
        padding: 40px 25px;
        text-align: center;
        background: #ffffff; /* Fallback opaque card for mobile performance */
    }
    .promotional_area .promo_glass_card h2 {
        font-size: 28px;
    }
    .promotional_area .promo_liquid_grid:hover .promo_glass_card {
        transform: translateY(-10px);
    }
}

/* ==========================================================================
   Madhya Advertising - Pure Vanilla Glassmorphism Slider Layout
   ========================================================================== */
.testimonial_area {
    background-color: #e3ece6 !important; /* Image reference background layout tone */
    position: relative;
    overflow: hidden;
}

.testimonial_area .section-title h2 {
    font-size: 38px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

/* Outer Wrapper framework */
.madhya-pure-slider-wrapper {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}

/* Horizontal Track with native hardware accelerated scroll snap */
.madhya-pure-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hides default scrollbar in Firefox */
}

.madhya-pure-slider-track::-webkit-scrollbar {
    display: none; /* Hides default scrollbar in Chrome/Safari */
}

/* Individual Slide Component with image style blur filter */
.single_testimonial_glass_pure {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 60px 70px;
    border-radius: 28px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    text-align: center;
}

/* Neon Quote style overlay descriptor */
.single_testimonial_glass_pure::before {
    content: "“" !important;
    position: absolute;
    top: -15px;
    left: -25px;
    font-size: 150px;
    color: #bbf246 !important;
    font-family: "Helvetica Neue", Arial, sans-serif;
    line-height: 1;
    font-weight: 900;
}

.single_testimonial_glass_pure p {
    font-size: 20px !important;
    line-height: 1.65 !important;
    color: #1c2421 !important;
    font-weight: 500 !important;
    margin-bottom: 35px !important;
}

.client_meta_info_pure h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #222222 !important;
    display: inline-block;
    margin-right: 5px;
}

.client_meta_info_pure h5 {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
}

/* --- THE NAVIGATION LOAD PILLS (FROM SCREENSHOT) --- */
.madhya-pure-dots {
    text-align: center;
    margin-top: 25px;
}

.pure-dot {
    display: inline-block;
    background: rgba(139, 195, 74, 0.25);
    width: 10px;
    height: 10px;
    margin: 0 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pure-dot.active {
    background: #8bc34a !important;
    width: 45px; /* Pill stretch effect from reference image */
    border-radius: 20px;
}

@media (max-width: 767px) {
    .single_testimonial_glass_pure {
        padding: 40px 25px;
    }
    .single_testimonial_glass_pure p {
        font-size: 16px;
    }
}

/* ==========================================================================
   Madhya Advertising - Premium Modern Blog Cards Redesign
   ========================================================================== */
.blog_area {
    background-color: #ffffff;
    position: relative;
}

/* Section Headings */
.blog_area .section-title h2 {
    font-size: 38px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.blog_area .section-title p {
    font-size: 16px;
    color: #666666;
    max-width: 600px;
    margin: 0 auto 50px auto;
}

/* Main Blog Card Frame */
.blog_area .home_single_blog {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(139, 195, 74, 0.06);
    text-align: left; /* Text alignment clean left kiya */
    margin-bottom: 30px;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease;
}

/* Image Container with hidden overflow for smooth zoom */
.blog_area .home_single_blog .blog_img_wrapper {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
}

.blog_area .home_single_blog img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card Content Body Padding */
.blog_area .home_blog_content {
    padding: 30px;
}

/* Meta Tags System */
.blog_area .blog_meta_tags {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.blog_area .blog_meta_tags .meta_date {
    font-size: 13px;
    color: #777777;
    font-weight: 500;
}

.blog_area .blog_meta_tags .meta_category a {
    background: rgba(139, 195, 74, 0.08);
    color: #8bc34a; /* Brand Theme Green */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.blog_area .blog_meta_tags .meta_category a:hover {
    background: #8bc34a;
    color: #ffffff;
}

/* Heading Typography */
.blog_area .blog_title_info h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.blog_area .blog_title_info h2 a {
    color: #1a1a1a;
    transition: color 0.3s ease;
}

.blog_area .blog_title_info h2 a:hover {
    color: #8bc34a;
}

.blog_area .home_blog_content p {
    font-size: 15px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 25px;
}

/* Modern Read More Button Line Link */
.blog_area .home_b_btn {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
}

.blog_area .home_b_btn::after {
    content: "→";
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* --- OVERALL CARD HOVER TRANSITIONS --- */
.blog_area .home_single_blog:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(139, 195, 74, 0.12);
    border-color: rgba(139, 195, 74, 0.2);
}

.blog_area .home_single_blog:hover img {
    transform: scale(1.06); /* Liquid zoom */
}

.blog_area .home_single_blog:hover .home_b_btn {
    color: #8bc34a;
}

.blog_area .home_single_blog:hover .home_b_btn::after {
    transform: translateX(5px); /* Arrow shifts rightward */
}

/* ==========================================================================
   Madhya Advertising - Pure CSS Infinite Logo Marquee Styling
   ========================================================================== */
.partner-logo {
    background-color: #ffffff;
    padding: 60px 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* Container defining hidden viewport edge limits */
.madhya-marquee-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
}

/* Linear continuous sliding track core engine */
.madhya-marquee-track {
    display: flex;
    align-items: center;
    gap: 30px; /* FIX: Logos ke beech ka gap kam kar diya taaki tight symmetry rahe */
    width: max-content;

    /* Hardware accelerated infinite CSS rotation animation hook */
    animation: madhyaEndlessScroll 25s linear infinite;
}

/* Individual Brand Logos Layout Adjustment */
.single_partner_logo {
    width: 320px; /* FIX: Width ko 260px se badha kar 320px kiya taaki bade logo ko poora space mile */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Grayscale filter aur low opacity poori tarah hataya hua hai */
    filter: none;
    opacity: 1;

    /* Smooth scaling transition jab user hover karega */
    transition: transform 0.3s ease;
}

/* Direct Image Element Properties Override */
.single_partner_logo img {
    height: 110px !important; /* FIX: height strictly 110px ki hai aur !important lagaya hai taaki image ab 100% badi dikhe */
    max-height: 110px !important;
    width: auto;
    object-fit: contain;
}

/* Hover activates zoom bounce effect */
.single_partner_logo:hover {
    transform: scale(1.1); /* Halka sa elegant zoom stretch layout */
}

/* Stop scrolling animation on mouse cursor hover */
.madhya-marquee-container:hover .madhya-marquee-track {
    animation-play-state: paused;
}

/* --- INFINITE SCROLL TIME VELOCITY KEYFRAMES --- */
@keyframes madhyaEndlessScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(
            -50%
        ); /* Pulls track exactly to half-way point duplication seamlessly */
    }
}

/* ==========================================================================
   Madhya Advertising Services Section Styles
   ========================================================================== */
/* ==========================================================================
   Madhya Advertising Services - PREMIUM 2x2 IMAGE GRID
   ========================================================================== */
/* Services Section Base */
.madhya-services-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #f9f9f9;
}

.title-line {
    width: 60px;
    height: 3px;
    background-color: #28a745;
    margin: 15px auto;
}

/* Service Card Container */
.madhya-image-service-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #000;
    height: 280px; /* Full screen par height standard rakhi hai taaki content na phaile */
    width: 100%;
}

/* Thumbnail Image */
.madhya-image-service-card .card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.7; /* Text readability ke liye background image thodi dark */
    transition: transform 0.5s ease;
}

.madhya-image-service-card:hover .card-thumbnail {
    transform: scale(1.05);
}

/* Gradient Overlay & Text Alignment */
.card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Poore card par link/gradient dene ke liye */
    padding: 40px 30px; /* Text ke aaspas premium padding */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.2) 100%);
    color: #ffffff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Text hamesha neeche se aligned rahega */
}

.card-content-overlay h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff;
    text-transform: uppercase;
}

.card-content-overlay p {
    font-size: 15px;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 0;
}

/* Mobile & Small Screens Viewport */
@media (max-width: 767px) {
    .madhya-image-service-card {
        height: 250px; /* Mobile par card vertical zyada bada na lage */
    }
    .card-content-overlay {
        padding: 20px;
    }
    .card-content-overlay h3 {
        font-size: 18px;
    }
    .card-content-overlay p {
        font-size: 13px;
        line-height: 1.4;
    }
}
/* ==========================================================================
   Madhya Advertising - Why Choose Us & Vision/Mission Layouts
   ========================================================================== */
.madhya-corporate-section {
    background: #ffffff;
    padding: 80px 0;
}

.madhya-corporate-section .section-title {
    margin-bottom: 50px;
    text-align: center;
}

.madhya-corporate-section .section-title h2 {
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222222;
}

.madhya-corporate-section .title-line {
    width: 70px;
    height: 3px;
    background: #ffbc00;
    margin: 15px auto 20px;
}

/* Flex Grid Row Wrapper */
.madhya-corp-grid-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 0;
}

/* Symmetrical Row Cards for Mission & Vision (2 Columns Lock) */
.madhya-vision-card {
    background: #fdfdfd;
    padding: 45px 35px;
    border-radius: 6px;
    border: 1px solid #f1f1f1;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
    text-align: left;
}

/* Why Choose Us Cards (3 Columns Layout Block) */
.madhya-choose-card {
    background: #ffffff;
    padding: 40px 25px;
    border-radius: 6px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.03);
    border-top: 3px solid #ffbc00;
    transition: all 0.3s ease;
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    text-align: left;
}

/* Icon Wrap Styles */
.madhya-corp-icon {
    margin-bottom: 20px;
}

.madhya-corp-icon i {
    font-size: 36px;
    color: #ffbc00;
}

.madhya-corporate-section h3 {
    font-size: 20px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 15px;
}

.madhya-corporate-section p {
    color: #666666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Hover Interactions */
.madhya-vision-card:hover,
.madhya-choose-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Responsive Media Queries */
@media (max-width: 991px) {
    .madhya-vision-card,
    .madhya-choose-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Madhya Advertising - About Page Pillars (Vision, Mission, Philosophy, Values)
   ========================================================================== */
.madhya-pillars-section {
    background: #fdfdfd;
    padding: 80px 0;
}

.madhya-pillars-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 0;
}

/* Individual Image Card Structure */
.madhya-pillar-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    height: 340px; /* Fixed standard block height */
    transition: all 0.4s ease;

    /* Strictly 2 Columns Grid Logic */
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
}

/* Background Image Adjustment */
.madhya-pillar-card .pillar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Dark Overlay with Green Accent Styling */
.madhya-pillar-card .pillar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 15%,
        rgba(0, 0, 0, 0.5) 60%,
        transparent 100%
    );
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
}

/* Accent Green Badge Label */
.madhya-pillar-card .pillar-overlay .badge-label {
    font-size: 24px;
    font-weight: 700;
    color: #7cb342; /* Premium Green Accent */
    margin-bottom: 8px;
    text-transform: capitalize;
}

/* Headline Styling */
.madhya-pillar-card .pillar-overlay h3 {
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Description Text */
.madhya-pillar-card .pillar-overlay p {
    font-size: 13.5px;
    color: #cccccc;
    line-height: 1.5;
    margin: 0;
}

/* Hover Zoom Interactions */
.madhya-pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.madhya-pillar-card:hover .pillar-image {
    transform: scale(1.05);
}

/* Responsive Scaling for Tablets/Mobiles */
@media (max-width: 991px) {
    .madhya-pillar-card {
        flex: 0 0 100%;
        max-width: 100%;
        height: 300px;
    }
}

/* ==========================================================================
   Madhya Advertising - Premium Corporate Footer Styles
   ========================================================================== */
.madhya-main-footer {
    background-image:
        linear-gradient(rgba(15, 15, 15, 0.92), rgba(15, 15, 15, 0.95)),
        url(../img/bg/footer.png) !important;
    background-size: cover;
    background-position: center center;
    padding: 80px 0 30px;
    color: #cccccc;
}

.madhya-main-footer h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    position: relative;
}

.madhya-main-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 2px;
    background: #ffbc00;
}

.madhya-main-footer p {
    font-size: 14px;
    line-height: 1.7;
    color: #aaaaaa;
}

.madhya-main-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.madhya-main-footer ul li {
    margin-bottom: 12px;
}

.madhya-main-footer ul li a {
    color: #aaaaaa;
    font-size: 14px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.madhya-main-footer ul li a:hover {
    color: #ffbc00;
    padding-left: 5px;
}

/* Office Contact Details styling */
.madhya-footer-contact li {
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.6;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.madhya-footer-contact li i {
    color: #ffbc00;
    margin-right: 12px;
    font-size: 16px;
    margin-top: 3px;
}

/* Copyright Bar Separation */
.madhya-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 50px;
    padding-top: 25px;
}

.madhya-footer-bottom p {
    font-size: 13px;
    color: #777777;
    margin-bottom: 5px;
}

.madhya-footer-bottom a {
    color: #ffbc00;
    text-decoration: none;
}

/* ==========================================================================
   Madhya Advertising - Premium Symmetrical Contact Page Layout
   ========================================================================== */
.madhya-contact-banner {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65)),
        url(../img/bg/section-top.png) !important;
    background-size: cover !important;
    background-position: center center !important;
    padding: 100px 0;
}

.madhya-contact-banner h1 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Address Card Blocks Layout */
.madhya-address-card {
    background: #ffffff;
    padding: 35px 20px;
    border-radius: 6px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.03);
    border: 1px solid #f1f1f1;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

.madhya-address-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.madhya-address-card p {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 8px;
}

.madhya-address-card p a {
    color: #ffbc00;
    font-weight: 600;
    text-decoration: none;
}

.madhya-address-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Google Map Container Frame */
.madhya-map-wrapper {
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-bottom: 1px solid #f1f1f1;
}

.madhya-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Dynamic Content Section Overrides */
.madhya-contact-section {
    background: #7cb342; /* Standard client choice corporate green overlay layout */
}

.madhya-contact-section .section-title p {
    max-width: 750px;
    margin: 15px auto 0;
}

/* ==========================================================================
   Global Smooth Scroll Framework Overrides
   ========================================================================== */
html {
    scroll-behavior: initial !important; /* Disables default jerky jumping */
}

html,
body {
    height: auto;
}

/* Ensure smooth performance for mobile viewports */
.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overflow: auto;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none; /* Map sections buffer tracking prevent */
}