/* About Seciton
    ============== */

        .info-content-area .section-title h2 {
            position: relative;
            padding-left: 35px;
        }

        .info-content-area .section-title h2:before {
            position: absolute;
            content: " ";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-left: 5px solid #091a2a;
        }

        .info-content-area p.highlight {
            position: relative;
            padding-left: 35px;
            margin: 20px 0;
        }

        .info-content-area p.highlight:before {
            position: absolute;
            content: "";
            width: 15px;
            height: 15px;
            top: 5px;
            left: 0;
            background: #DDD;
        }

        .info-content-area .main-btn {
            background: transparent;
            color: #ecc566;
            border: 2px solid;
            margin: 40px 0;
        }

        .info-content-area .main-btn:hover {
            background: #ecc566;
            color: #fff;
            border-color: #ecc566;
        }

        .info-img {
            margin-right: 30px;
        }

        .founded {
            border-top: 4px solid #eee;
            border-bottom: 4px solid #eee;
            padding: 10px;
        }

        .years {
            font-family: 'Tajawal', sans-serif;
            font-size: 25px;
            font-weight: 300;
            letter-spacing: 1px;
        }

        .years span {
            font-family: 'Tajawal', sans-serif;
            font-size: 140px;
            font-weight: 600;
            line-height: 112px;
            background-color: #091a2a;
            /*	background-image: url(../img/trans-bg.png);*/
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            padding-right: 20px;
        }

        .text {
            font-size: 18px;
            line-height: 27px;
            border-left: 5px solid #eee;
            padding-left: 35px;
            margin-top: 20px;
        }


        /* Service Section
    ============== */

        .single-service-area {
            background: #fff;
            text-align: center;
            padding: 40px;
            position: relative;
            z-index: 1;
            border-bottom: 4px solid #fff;
            box-shadow: 0 3px 9px -2px #d0cece;
            margin-top: 50px;
            transition: .3s;
        }

        .service-icon i {
            background: #F3F3F3;
            width: 90px;
            height: 90px;
            border-radius: 50%;
        }

        .service-icon i:before {
            font-size: 50px;
            line-height: 35px;
            color: #FF5316;
            margin: 25px 0;
            display: inline-block;
        }

        .single-service-area h5 {
            font-size: 18px;
            margin: 20px 0;
        }

        .single-service-area a.read-more {
            text-transform: uppercase;
            font-size: 17px;
            font-weight: 500;
            margin: 20px 0 0;
            color: #122A44;
        }

        .single-service-area:hover a.read-more {
            2color: #ec66b9;
        }

        single-service-area.active {
            border-bottom: 4px solid #091a2a;
            border-radius: 5px;
        }

        .single-service-area:hover {
            border-bottom: 4px solid #091a2a;
        }

        .service-slider .owl-dots button.owl-dot span {
            width: 10px;
            height: 10px;
            background: #b1adad;
            margin-right: 10px;
            margin-top: 20px;
        }

        .service-slider .owl-dots button.owl-dot.active span {
            width: 35px;
            height: 10px;
            background: #ecc566;
        }

        .service-slider .owl-dots {
            text-align: center;
            margin-top: 50px;
        }

        /* Feature Section
    ============== */

        .single-feature-item .feature-icon {
            background: #091a2a;
            color: #fff;
            display: inline-block;
            padding: 20px 0;
            width: 80px;
            height: 80px;
            text-align: center;
            float: left;
        }

        .feature-icon i:before {
            font-size: 45px;
        }

        .feature-image {
            position: relative;
            z-index: 1;
            margin-top: 50px;
        }

        .feature-image:after {
            position: absolute;
            content: " ";
            width: 100%;
            height: 100%;
            top: -40px;
            right: -40px;
            border: 10px solid #091a2a;
            z-index: -1;
        }

        .feature-content {
            margin: 40px 0;
        }

        .feature-content h5 {
            font-size: 18px;
            padding-left: 100px;
            margin-bottom: 5px;
        }

        .feature-content p {
            padding-left: 100px;
        }

        /* Achievement Section
    ============== */

        .achievement-area {
            background-image: url(../img/intro-slide3.jpg);
            height: 300px;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .achievement-area.home2 {
            background-color: #020E28;
        }

        .fact-icon i:before {
            font-size: 50px;
            line-height: 35px;
            color: #ffffff;
            margin: 25px 0;
            display: inline-block;
        }

        .single-counter-box {
            text-align: center;
        }

        .single-counter-box .counter-number span {
            font-size: 50px;
            font-weight: 600;
            color: #fff;
            margin: 30px 0 10px;
        }

        .single-counter-box p.counter-number {
            font-size: 40px;
            color: #fff;
        }

        .single-counter-box h6 {
            color: #fff;
            font-weight: 500;
        }

        /* Project Section
    ============== */

        .project-bg {
            background-image: url(../img/project/project-1-1.jpg);
        }

        .project-bg-2 {
            background-image: url(../img/project/project-1-2.jpg);
        }

        .project-bg-3 {
            background-image: url(../img/project/project-1-3.jpg);
        }

        .project-bg-4 {
            background-image: url(../img/project/project-1-4.jpg);
        }

        .project-bg-5 {
            background-image: url(../img/project/project-1-5.jpg);
        }

        .project-bg-6 {
            background-image: url(../img/project/project-1-6.jpg);
        }

        .single-project-item.bg-cover {
            height: 450px;
        }

        .single-project-item {
            position: relative;
            z-index: 1;
            border-bottom: 4px solid #020E28;
            margin-bottom: 50px;
            overflow: hidden;
        }

        .single-project-item:hover {
            border-bottom: 4px solid #091a2a;
        }

        .project-inner .hover-info {
            position: absolute;
            left: 0;
            bottom: 0;
            opacity: 0;
            transform: translateY(50px);
            width: 100%;
            z-index: 2;
            padding: 35px 40px 35px 38px;
            max-width: 500px;
            transition: all ease 0.3s;
            transition-delay: 0.07s;
        }

        .single-project-item:hover .hover-info {
            opacity: 1;
            transform: translateY(0);
        }

        .project-inner:after {
            content: " ";
            width: 100%;
            height: 100%;
            background-color: rgba(15, 78, 150, 0.500);
            display: block;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0px;
            transition: all ease 0.3s;
        }

        .single-project-item:hover .project-inner:after {
            opacity: 1;
        }

        .hover-info h4 {
            color: #fff;
            margin-bottom: 15px;
        }

        .project-inner h6 {
            color: #ffffff;
            text-transform: uppercase;
            margin-bottom: 10px;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .hover-info p {
            color: #eee;
        }

        .hover-info a {
            color: #ecc566;
            font-size: 16px;
            text-transform: uppercase;
            font-weight: 600;
            margin: 10px 0;
        }

        .project-inner .project-icon {
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
            z-index: 2;
            transition: all ease 0.3s;
            font-size: 30px;
            cursor: pointer;
            background: #091a2a;
            color: #fff;
            padding: 15px;
            transform: translate3d(0, -100%, 0);
            transition: .3s;
        }

        .single-project-item:hover .project-icon {
            opacity: 1;
            transform: translate(0, 0);
        }

        .project-area.home3 .section-title {
            margin-bottom: 50px;
        }

        .home3 .single-project-item:hover {
            border-bottom: 4px solid #ecc566;
            overflow: hidden;
        }

        #project-page .single-project-item {
            margin-bottom: 50px;
        }

        .project-slider .owl-dots button.owl-dot span {
            width: 10px;
            height: 10px;
            background: #b1adad;
            margin-right: 10px;
            margin-top: 20px;
        }

        .project-slider .owl-dots button.owl-dot.active span {
            width: 35px;
            height: 10px;
            background: #ecc566;
        }

        .project-slider .owl-dots {
            text-align: center;
        }


        /* Testimonial Section
    ============== */

        .single-team-item img {
            max-width: 70px;
            height: auto;
            float: left;
        }

        .author-desc {
            margin-top: 30px;
        }

        .author-desc h5 {
            font-size: 18px;
            padding-left: 80px;
        }

        .author-desc span {
            font-size: 90%;
            color: #ecc566;
            padding-left: 10px;
        }

        .single-team-item {
            background: #fff;
            padding: 50px 50px 70px;
            position: relative;
            z-index: 1;
            margin-top: 50px;
            box-shadow: 0 3px 9px -2px #d0cece;
            border-bottom: 3px solid #fff;
            transition: .3s;
        }

        .single-team-item:hover {
            border-bottom: 3px solid #ecc566;
        }

        .testimonial-icon i {
            font-size: 25px;
            background: #ecc566;
            padding: 10px;
            position: absolute;
            top: -20px;
            color: #fff;
            z-index: 9;
        }

        .testimonial-area .owl-dots button.owl-dot span {
            width: 10px;
            height: 10px;
            background: #ddd;
            margin-right: 10px;
            margin-top: 20px;
        }

        .testimonial-area .owl-dots button.owl-dot.active span {
            width: 35px;
            height: 10px;
            background: #ecc566;
        }

        .testimonial-area .team-carousel .owl-dots {
            text-align: center;
            margin-top: 50px;
        }

        /* Choose Us Section
    ============== */

        .chooseus-bg {
            background-image: url(../img/choose-us-bg.jpg);
        }

        .chooseus-bg {
            width: 50%;
            height: auto;
            position: relative;
            background-size: cover;
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .chooseus-bg {
                display: none;
            }
        }

        @media (max-width: 767px) {
            .chooseus-bg {
                display: none;
            }
        }

        .chooseus-content {
            width: 50%;
            padding: 80px 100px 50px;
            padding-bottom: 60px;
            background: #091a2a;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .chooseus-content {
                padding: 26px;
            }
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .chooseus-content {
                width: 100%;
                padding: 80px;
            }
        }

        @media (max-width: 767px) {
            .chooseus-content {
                width: 100%;
                padding: 50px;
            }
        }

        .choose-area {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
        }

        .choose-area .section-title h2 {
            color: #fff;
        }

        .choose-certify {
            margin: 45px 0;
        }

        @media only screen and (min-width: 992px) and (max-width: 1200px) {
            .choose-certify {
                margin: 25px 0;
            }
        }

        .choose-certify i {
            font-size: 45px;
            color: #ffffff;
            position: absolute;
        }

        .choose-certify h5 {
            color: #fff;
            padding-left: 70px;
            margin-bottom: 15px;
        }

        .choose-certify p {
            padding-left: 70px;
        }

        @media only screen and (min-width: 992px) and (max-width: 1200px) {
            .choose-certify p {
                font-size: 14px;
            }
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .choose-certify p {
                font-size: 14px;
            }
        }

        .chooseus-content h5 {
            margin-bottom: 20px;
        }

        /* Blog Section
    ============== */

        .single-blog-item {
            background: #fff;
        }

        p.blog-meta {
            font-size: 14px;
            margin: 8px 0;
            color: #ecc566;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
        }

        p.blog-meta i:before {
            padding-right: 7px;
        }

        .blog-meta i {
            font-size: 20px;
        }

        .blog-content {
            padding: 20px;
        }

        .blog-content h5 a {
            font-size: 18px;
            line-height: 28px;
            margin-bottom: 20px;
        }

        .blog-area a.read-more {
            text-transform: uppercase;
            font-size: 16px;
            font-weight: 500;
            margin: 10px 0 0;
            color: #122A44;
        }

        .blog-area a.read-more:hover {
            color: #fffff;
        }

        .blog-bg {
            position: relative;
            z-index: 1;
            overflow: hidden;
            transition: .3s;
        }

        .blog-bg img {
            transition: transform ease 0.3s;
        }

        .blog-bg span {
            background: #091a2a;
            color: #fff;
            padding: 10px;
            display: inline-block;
            width: 60px;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
        }

        .blog-bg img:hover {
            transform: scale(1.07);
        }

        /* CTA Section
    ============== */

        .cta-area {
            background-image: url(../img/intro-slide3.jpg);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: center center;
            background-size: cover;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .cta-area h2 {
            font-size: 40px;
            line-height: 50px;
            color: #fff;
            font-weight: 600;
        }

        .cta-area h6 {
            color: #ecc566;
            text-transform: uppercase;
            font-size: 16px;
            margin-bottom: 10px;
        }

        .cta-area p {
            color: #fffff;
            margin: 12px 0;
        }

        .cta-area .contact-info {
            margin-top: 30px;
        }

        .cta-area .contact-info i {
            font-size: 50px;
            float: left;
            padding-right: 10px;
        }

        .contact-info h5 {
            font-size: 22px;
            color: #fff;
        }

        .contact-info p {
            margin: 4px 0;
        }



        /*========================HOME # 02 ===========================*/


        /* Info Section # 02
    ======================== */


        .info-bg {
            background-image: url(../img/info/info-bg.jpg);
        }

        .info-area {
            position: relative;
            margin-top: -100px;
            z-index: 9;
        }

        .info-bg.bg-cover {
            height: 282px;
            background-position: top center;
            border-radius: 5px 0 0 5px;
        }

        .info-content {
            padding: 40px;
            border-left: 10px solid #ecc566;
            height: 100%;
        }

        .info-founder i:before {
            font-size: 60px;
        }

        .info-content h5 {
            font-size: 35px;
            line-height: 45px;
        }

        .info-content a {
            font-family: 'Tajawal', sans-serif;
            font-size: 22px;
            font-weight: 300;
            letter-spacing: 3px;
            color: #ecc566;
            margin: 30px 0 0;
        }

        .info-inner {
            background: #fff;
            box-shadow: 0 1px 4px -2px #6e7b71;
            border-radius: 5px;
        }

        .info-founder {
            background: #ecc566;
            height: 100%;
            text-align: center;
            padding: 50px;
            border-radius: 5px;
        }

        .info-founder i:before {
            font-size: 50px;
        }

        .info-founder p.highlight {
            font-size: 65px;
            font-family: 'Tajawal', cursive;
            color: #fff;
            margin: 30px 0;
        }

        .info-founder p.highlight span {
            font-size: 50px;
        }

        .info-founder p {
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #333;
            line-height: 24px;
        }

        /* Service Section # 02
    ======================== */

        .service-bg {
            background-image: url(../img/service/1.jpg);
            height: 270px;
        }

        .bg-2 {
            background-image: url(../img/service/2.jpg);
        }

        .bg-3 {
            background-image: url(../img/service/3.jpg);
        }

        .bg-4 {
            background-image: url(../img/service/4.jpg);
        }

        .bg-5 {
            background-image: url(../img/service/5.jpg);
        }

        .bg-6 {
            background-image: url(../img/service/6.jpg);
        }

        .single-service {
            position: relative;
            margin: 50px 0 30px;
        }

        .single-service .service-content {
            position: absolute;
            bottom: -20px;
            left: 20px;
            right: 20px;
            background: #fff;
            padding: 20px;
            box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.10);
        }

        .service-content h3 {
            font-size: 20px;
            line-height: 22px;
            margin: 10px 0;
            transform: translateY(0);
            transition: all .3s ease-in-out;
            position: relative;
            padding-left: 15px;
        }

        .service-content h3:before {
            position: absolute;
            content: "";
            top: 50%;
            left: 0;
            width: 4px;
            height: 30px;
            background: #ecc566;
            margin-top: -15px;
        }

        .service-content a.read-more {
            position: absolute;
            bottom: 40px;
            left: 20px;
            opacity: 0;
            transform: translateY(50%);
            transition: all .3s ease-in-out;
            text-transform: uppercase;
            font-family: 'Tajawal', sans-serif;
            font-size: 18px;
            letter-spacing: 2px;
            color: #ecc566;
            padding-left: 15px;
        }

        .single-service:hover .service-content h3 {
            transform: translateY(-10px);
            -webkit-transition-delay: .2s;
            transition-delay: .2s;
        }

        .single-service:hover .service-content a.read-more {
            transform: translateY(30px);
            opacity: 1;
            -webkit-transition-delay: .3s;
            transition-delay: .3s;
        }

        /* About Section # 02
    ======================== */

        #about-2 .info-content-area p.highlight:before {
            display: none;
        }

        #about-2 .info-content-area p.highlight {
            padding-left: 0;
        }

        p.highlight i {
            font-size: 24px;
            color: #ecc566;
            padding-right: 10px;
        }

        .founded-year i {
            background: #ecc566;
            color: #fff;
            width: 200px;
            height: 155px;
            text-align: center;
            text-transform: uppercase;
            font-style: normal;
            font-weight: 500;
            padding: 20px 35px;
        }

        .founded-year i:before {
            font-size: 60px;
            line-height: 65px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 14px;
        }

        .founded-year {
            position: absolute;
            top: 0;
            left: 0;
        }

        .about-bg-2 {
            position: relative;
            z-index: 1;
        }


        /* Project Section # 02
    ============== */

        .project-grids {
            background-image: url(../img/project/featured-project-bg.jpg);
            position: relative;
            z-index: 1;
        }

        .featured-project-area .project-grids .grid {
            width: 25%;
            float: left;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -ms-transition: all 0.3s;
            transition: all 0.3s;
            overflow: hidden;
        }

        .featured-project-area .project-grids .inner {
            padding: 280px 60px 60px;
            position: relative;
            top: 60px;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;
            -ms-transition: all 0.5s;
            transition: all 0.5s;
        }

        .featured-project-area .project-grids .count {
            font-size: 40px;
            font-weight: 600;
            color: #fff;
        }

        .featured-project-area .project-grids h3 {
            font-size: 22px;
            color: #fff;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        .featured-project-area .project-grids p {
            color: #cecccc;
            margin-bottom: 0;
            padding-bottom: 2em;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -ms-transition: all 0.3s;
            transition: all 0.3s;
        }

        .featured-project-area .project-grids .inner>a {
            position: relative;
            top: 100px;
        }

        .featured-project-area .project-grids .grid:hover .inner>a {
            top: 0;
        }

        .featured-project-area .project-grids .grid:hover .inner {
            background-color: #061129d6;
            top: 0;
        }


        /* Choose Us Section # 02
    ======================
    */

        .choose-us-area {
            background-image: url(../img/choose-us-bg-2.jpg);
            background-size: cover;
            height: 500px;
            position: relative;
            z-index: 1;
        }

        .choose-us-wrapper {
            background: #fff;
            margin-top: 50px;
            position: relative;
        }

        .choose-us-inner {
            text-align: center;
            padding: 50px 30px;
            border-right: 1px solid #eee;
        }

        .choose-us-inner h5 {
            margin: 40px 0 20px;
        }

        .choose-us-inner:nth-last-child(4) {
            border-right: none;
        }

        .choose-us-icon {
            position: relative;
            z-index: 1;
        }

        .choose-us-icon:after {
            position: absolute;
            content: "";
            top: -5px;
            left: 35px;
            width: 80px;
            height: 80px;
            background: #f6f6f6;
            border-radius: 50%;
            z-index: -1;
            opacity: 0;
            transition: .3s;
        }

        .choose-us-inner:hover .choose-us-icon:after {
            width: 90px;
            height: 90px;
            opacity: 1;
            left: 70px;
            top: -10px;
        }

        /* Spacer
    ============== */

        .spacer {
            position: relative;
        }

        .spacer-bg {
            background-image: url(../img/divider.jpg);
            background-attachment: fixed;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spacer-bg .main-btn {
            z-index: 9;
            margin-top: 120px;
        }

        /* Team Section
    ============== */

        .team-area {
            border-top: 1px solid #eee;
        }

        .team-member-bg {
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 350px;
        }

        .team-member-bg {
            background-image: url(../img/team/1.jpg);
        }

        .team-bg-2 {
            background-image: url(../img/team/2.jpg);
        }

        .team-bg-3 {
            background-image: url(../img/team/3.jpg);
        }

        .team-bg-4 {
            background-image: url(../img/team/4.jpg);
        }

        .team-bg-5 {
            background-image: url(../img/team/5.jpg);
        }

        .team-bg-6 {
            background-image: url(../img/team/6.jpg);
        }

        .team-bg-7 {
            background-image: url(../img/team/7.jpg);
        }

        .team-bg-8 {
            background-image: url(../img/team/8.jpg);
        }

        .single-team-member {
            position: relative;
            margin-top: 25px;
            margin-bottom: 40px;
        }

        .single-team-member .team-content {
            position: absolute;
            bottom: -31px;
            left: 0;
            right: 0;
            background: #fff;
            text-align: center;
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
        }

        .team-content .team-title {
            font-weight: 500;
            margin-bottom: -3px;
        }

        .team-content .team-title a {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 0.3px;
            color: #191919;
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
            margin: 16px 0 5px;
        }

        .team-content .team-subtitle {
            font-size: 14px;
            color: #7c7c7c;
            margin-bottom: 5px;
        }

        ul.team-social {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul.team-social li {
            display: inline-block;
        }

        ul.team-social li a {
            font-size: 18px;
            padding: 10px;
            padding-top: 0;
            transition: all .3s ease-out;
        }

        .single-team-member:hover .team-social li a {
            color: #ecc566;
        }

        /* Contact Section
    ====================
    */

        .contact-section {
            background-image: url(../img/new_farmers_portal.jpg);
            background-attachment: fixed;
        }

        .contact-content {
            margin-top: 50px;
        }

        .contact-section h2 {
            color: #fff;
        }

        .contact-section p {
            color: #c5bfbf;
        }

        .contact-section .contact-info i {
            font-size: 30px;
            margin-left: 0;
            background: #ecc566;
            color: #fff;
            padding: 10px;
            border-radius: 0;
            float: left;
        }

        .contact-inner {
            margin-bottom: 30px;
        }

        .contact-inner h6 {
            color: #fff;
            font-size: 20px;
            font-weight: 400;
            padding-left: 100px;
        }

        .contact-inner p {
            padding-left: 100px;
        }

        .contact-section button.main-btn {
            border: none;
        }

        .contact-section button.main-btn:hover {
            background: #25283a;
            color: #fff;
        }

        .contact-form {
            margin-top: 80px;
        }


        /*========================HOME # 03 ===========================*/


        /* Feature Section # 02
    ====================
    */

        .single-feat-item {
            background-image: url(../img/feature/feat-bg-1.jpg);
        }

        .feat-2 {
            background-image: url(../img/feature/feat-bg-2.jpg);
        }

        .feat-3 {
            background-image: url(../img/feature/feat-bg-3.jpg);
        }

        .single-feat-item {
            height: 270px;
            position: relative;
            z-index: 1;
            margin-top: -50px;
            transform: translateY(0);
            transition: .5s;
        }

        .single-feat-item:hover {
            transform: translateY(-20px);
        }

        .feat-content {
            background: #fff;
            position: absolute;
            bottom: 0;
            text-align: center;
            padding: 20px;
            transform: translateY(60%);
            left: 20px;
            right: 20px;
            box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.10);
        }

        .feat-content h5 {
            border-left: 3px solid #ecc566;
        }

        .single-feat-item.no-bg-img {
            background-image: none;
        }

        .single-feat-item.no-bg-img {
            background: #ecc566;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* About Section # 03
    ============== */

        .single-bar-item h4 {
            color: #002C42;
            font-size: 15px;
            margin-bottom: 10px;
        }

        .progress-bar-area {
            margin-top: 40px;
        }

        .barfiller .fill {
            background: #ecc566 !important;
        }

        #about-3 .choose-certify {
            text-align: center;
        }

        #about-3 .choose-certify i {
            position: relative;
        }

        #about-3 .choose-certify i:after {
            position: absolute;
            content: " ";
            width: 60px;
            height: 60px;
            top: -7px;
            left: -30px;
            border-radius: 50%;
            background: #ecc566;
            z-index: 1;
            opacity: .4;
        }

        #about-3 .choose-certify h5 {
            font-size: 20px;
            margin: 20px 0;
            color: #002c42;
            padding-left: 0
        }

        #about-3 .choose-certify p {
            padding-left: 0;
        }

        /* Service Section # 03
    ==================== */

        .single-service-wrapper {
            box-shadow: 0 3px 9px -2px #d0cece;
            margin-top: 40px;
        }

        .single-service-bg {
            background-image: url(../img/service/01.jpg);
            height: 325px;
        }

        .service-bg-2 {
            background-image: url(../img/service/02.jpg);
        }

        .service-bg-3 {
            background-image: url(../img/service/03.jpg);
        }

        .service-bg-4 {
            background-image: url(../img/service/04.jpg);
        }

        #service-3 .single-service-area {
            padding: 20px;
            box-shadow: none;
            margin-top: 0;
            height: 325px;
        }

        #service-3 .service-icon i:before {
            color: #002C42;
        }

        #service-3 .single-service-area a.read-more {
            margin: 12px 0 0;
        }

        #service-3 .single-service-area:hover .service-icon i:before {
            color: #ecc566;
        }

        /*Achievement Section # 02
    ==============*/

        .skill-bg {
            background-image: url(../img/skill-bg.jpg);
        }

        .skill-bg {
            width: 50%;
            height: auto;
            position: relative;
            background-size: cover;
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .skill-bg {
                display: none;
            }
        }

        @media (max-width: 767px) {
            .skill-bg {
                display: none;
            }
        }

        .skill-content {
            width: 50%;
            padding: 80px 100px 50px;
            padding-bottom: 60px;
            background: #061129;
        }

        .skill-content p {
            font-size: 16px;
            color: #c5c2c2;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .skill-content {
                padding: 26px;
            }
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .skill-content {
                width: 100%;
                padding: 80px;
            }
        }

        @media (max-width: 767px) {
            .skill-content {
                width: 100%;
                padding: 50px;
            }
        }

        .skill-area {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
        }

        .skill-area .section-title h2 {
            color: #fff;
        }

        .skill-area .single-counter-box {
            border-bottom: 1px solid #5a5a5a;
            border-right: 1px solid #5a5a5a;
            padding-bottom: 20px;
            border-left: 1px solid #5a5a5a;
            border-top: 1px solid #5a5a5a;
            padding: 15px;
        }

        .single-counter-box.one {
            border-top: none;
            border-left: none;
        }

        .single-counter-box.two {
            border-top: none;
            border-right: none;
            border-left: none;
        }

        .single-counter-box.three {
            border-top: none;
            border-left: none;
            border-bottom: none;
        }

        .single-counter-box.four {
            border-top: none;
            border-right: none;
            border-left: none;
            border-bottom: none;
        }

        .skill-area .fact-icon i:before {
            font-size: 40px;
            line-height: 40px;
            margin: 10px 0;
        }

        .skill-area .single-counter-box .counter-number span {
            font-size: 40px;
            font-weight: 600;
            margin: 10px 0 5px;
        }

        /*Pop up Video */

        .pop-up-video a.video-play-btn {
            font-size: 20px;
            color: #fff;
            border: 2px solid #ecc566;
            border-radius: 50%;
            padding: 15px;
            width: 70px;
            height: 70px;
            line-height: 38px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -35px;
            margin-top: -35px;
            background: #ecc566;
            cursor: pointer;
            z-index: 9;
        }

        @-webkit-keyframes btnIconRipple {
            0% {
                border-width: 4px;
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            80% {
                border-width: 1px;
                -webkit-transform: scale(1.35);
                transform: scale(1.35);
            }

            100% {
                opacity: 0;
            }
        }

        .pop-up-video a::before {
            content: '';
            display: inline-block;
            position: absolute;
            top: -2px;
            left: -2px;
            bottom: -2px;
            right: -2px;
            border-radius: inherit;
            border: 1px solid #FCD1C1;
            -webkit-animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
            animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
        }


        /*Process Section # 02 */

        .process-item-wrap {
            margin-top: 50px;
        }

        .single-process-item {
            text-align: center;
        }

        .process-num {
            position: absolute;
            right: 70px;
            top: 0;
            z-index: 9;
            background: #ecc566e0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            padding: 7px;
            transition: .3s;
        }

        .process-num p {
            font-size: 18px;
            font-weight: 500;
            color: #fff;
        }

        .process-icon {
            border: 10px solid #ddd;
            border-radius: 50%;
            width: 150px;
            height: 150px;
            padding: 35px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            transition: .3s;
        }

        .single-process-item h5 {
            font-size: 20px;
            margin: 25px 25px;
            line-height: 27px;
        }

        .single-process-item:hover .process-icon {
            border-color: #fd642ceb;
            opacity: .8;
        }


        /* Price Section
    ============== */

        .single-price-item {
            background: #fff;
            text-align: center;
            padding: 30px 50px;
            margin-top: 50px;
            border: 5px solid #eee;
            transition: .3s;
        }

        .single-price-item h5 {
            font-size: 22px;
            font-weight: 600;
            position: relative;
            margin: 20px 0;
        }

        .single-price-item h6 {
            text-transform: uppercase;
            font-size: 17px;
            line-height: 22px;
            color: #777;
        }

        .single-price-item h5:before {
            position: absolute;
            content: "";
            width: 54px;
            height: 2px;
            bottom: -10px;
            left: 0;
            right: 0;
            background: #ecc566;
            margin: 0 auto;
        }

        .single-price-item p b {
            font-size: 35px;
            color: #ecc566;
            margin-right: 10px;
        }

        .single-price-item p {
            font-size: 18px;
            margin: 40px 0px;
        }

        .price-list ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .price-list ul li {
            display: block;
            margin: 30px 0;
            color: $gray;
            font-size: 15px;
            letter-spacing: 1px;
            position: relative;
            padding-left: 20px;
            transition: .3s;
        }

        .single-price-item .main-btn {
            display: inline-block;
            margin: 30px 0 0;
            padding: 15px 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .single-price-item.active {
            border: 5px solid #ecc566;
        }

        /* Client Section CSS  */

        .single-logo-wrapper {
            width: 100%;
            height: 100px;
            display: table;
            opacity: .5;
            transition: .3s;
        }

        .logo-inner-item {
            display: table-cell;
            vertical-align: middle;
        }

        .single-logo-wrapper:hover {
            opacity: 1;
        }


        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .breadcroumb-area .breadcroumb-title h1 {
                font-size: 50px;
            }
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .breadcroumb-area .breadcroumb-title h1 {
                font-size: 40px;
            }
        }

        @media (max-width: 575px) {
            .breadcroumb-area .breadcroumb-title h1 {
                font-size: 35px;
            }
        }

        /* Blog Page
    ============== */

        #blog-page .single-blog-item {
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .blog-search input {
            border: none;
            border-bottom: 1px solid #ddd;
            padding: 0;
            padding-bottom: 10px;
        }

        .blog-search button {
            background: none;
            margin: 0;
            padding: 0;
        }

        .blog-search button i {
            color: #ffffff;
            font-size: 20px;
            opacity: .5;
            position: absolute;
            top: 18px;
            right: 28px;
        }

        .blog-category h5,
        .archive h5 {
            font-size: 24px;
            font-weight: 600;
            margin: 25px 0;
        }

        .blog-category a,
        .archive a {
            display: block;
            color: #191919;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .blog-category a:hover,
        .archive a:hover {
            color: #F35E27;
        }

        .blog-category a.active,
        .archive a.active {
            color: #ecc566;
        }

        .recent-post h5 {
            margin: 30px 0;
            margin-top: 50px;
            font-weight: 600;
        }

        .recent-post img {
            float: left;
            width: 70px;
            height: 70px;
        }

        .single-recent-post h6 {
            margin: 0;
            /* padding-left: 90px; */
        }

        p.blog-date {
            /* padding-left: 90px; */
        }

        .single-recent-post {
            padding-bottom: 25px;
        }

        .single-recent-post .recent-post-content {
            display: block;
            padding-left: 110px;
        }

        .single-recent-post h6 a {
            color: #00B965;
            line-height: 1.5;
        }

        .popular-tag h5 {
            margin: 30px 0;
            margin-top: 50px;
            font-weight: 600;
        }

        .popular-tag span {
            padding: 8px 15px;
            background: #ddd;
            margin-bottom: 10px;
            margin-right: 10px;
            font-size: 15px;
        }

        .popular-tag a {
            color: #020E28;
            padding: 5px;
        }

        .popular-tag span.active {
            background: #F35E27;
        }

        .popular-tag span:hover {
            background: #F35E27;
        }

        .popular-tag span:hover a {
            color: #fff;
        }

        .author-profile img {
            width: 90px;
            height: 90px;
            float: left;
        }

        .comments-section h5 {
            font-size: 22px;
            margin: 40px 0;
        }

        .comments-section img {
            width: 90px;
            height: 90px;
            float: left;
        }

        .single-comments-section p {
            padding-left: 120px;
        }

        a.reply-btn {
            font-size: 14px;
        }

        .comments-form h3 {
            margin: 50px 0;
        }

        .author-info {
            padding-left: 120px;
        }

        .single-comments-section p span {
            padding-left: 50px;
            font-size: 15px;
        }

        .blog-search {
            border: 1px solid #ddd;
            padding: 15px;
        }

        .blog-category,
        .recent-post,
        .archive,
        .popular-tag {
            border: 1px solid #ddd;
            padding: 10px 30px 20px;
            margin: 20px 0;
        }

        .helpline-section {
            background-size: cover;
            background-position: center center;
            height: 350px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: relative;
            z-index: 1;
            margin-top: 30px;
        }

        .helpline-section {
            background-image: url(../img/helpline.html);
        }

        .helpline-content h4 {
            color: #ffff;
        }

        .helpline-content p {
            color: #fff;
            margin-top: 20px;
        }

        .helpline-content button {
            z-index: 9;
            position: relative;
        }

        /* Portfolio Section
    ============== */

        .portfolio-area.theme-2 {
            background: #f6f6f6;
        }

        ul.port-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            float: right;
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            ul.port-menu {
                float: left;
            }
        }

        @media (max-width: 575px) {
            ul.port-menu {
                float: left;
            }
        }

        ul.port-menu.recent {
            float: none;
        }

        ul.port-menu li {
            display: inline-block;
            padding: 20px;
            color: #333;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
            margin: 20px 0;
        }

        ul.port-menu li.active {
            color: #ecc566;
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            ul.port-menu li {
                padding: 10px;
            }
        }

        @media (max-width: 575px) {
            ul.port-menu li {
                padding: 10px;
            }
        }

        .single-portfolio-item {
            background-image: url(../img/portfolio/1.jpg);
        }

        .port-bg-2 {
            background-image: url(../img/portfolio/2.jpg);
        }

        .port-bg-3 {
            background-image: url(../img/portfolio/3.jpg);
        }

        .port-bg-4 {
            background-image: url(../img/portfolio/4.jpg);
        }

        .port-bg-5 {
            background-image: url(../img/portfolio/5.jpg);
        }

        .port-bg-6 {
            background-image: url(../img/portfolio/6.jpg);
        }

        .port-bg-7 {
            background-image: url(../img/portfolio/7.jpg);
        }

        .port-bg-8 {
            background-image: url(../img/portfolio/8.jpg);
        }

        .portfolio-list {
            overflow: hidden;
            margin-left: -1%;
            margin-top: 20px;
        }

        .single-portfolio-item {
            float: left;
            width: 32.33%;
            height: 350px;
            background-size: cover;
            background-position: center;
            background-color: #333;
            position: relative;
            margin-left: 1%;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .single-portfolio-item {
                width: 100%;
            }
        }

        @media (max-width: 575px) {
            .single-portfolio-item {
                width: 100%;
            }
        }

        .single-portfolio-item.large {
            height: 610px;
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .single-portfolio-item.large {
                height: 300px;
            }
        }

        @media (max-width: 575px) {
            .single-portfolio-item.large {
                height: 300px;
            }
        }

        .single-portfolio-item.wide {
            width: 65.55%;
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .single-portfolio-item.wide {
                width: 100%;
            }
        }

        @media (max-width: 575px) {
            .single-portfolio-item.wide {
                width: 100%;
            }
        }

        .single-portfolio-item .details {
            background: #ecc566de;
            width: 100%;
            height: 100%;
            padding: 50px 35px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

        .single-portfolio-item .info {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: 0;
            margin-top: -20px;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }

        .single-portfolio-item .info a:hover {
            color: #fff;
        }

        .single-portfolio-item .info a {
            font-size: 18px;
            color: #fff;
        }

        .single-portfolio-item h5 {
            margin-bottom: 10px;
        }

        .single-portfolio-item:hover .details {
            opacity: 1;
            visibility: visible;
            top: 0;
        }

        .single-portfolio-item:hover .details .info {
            opacity: 1;
            margin-top: 0;
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
        }

        .portfolio-list.recent {
            margin-top: 0;
        }

        ul.port-menu.recent {
            list-style: none;
            padding: 0;
            bottom: 0;
            text-align: center;
            position: inherit;
        }

        .load-more-btn {
            text-align: center;
        }

        .load-more-btn .main-btn {
            padding: 10px 20px;
            margin-top: 60px;
        }

        .portfolio-single-section h3 {
            margin: 30px 0;
        }

        .project-info {
            border: 1px solid #ddd;
            padding: 30px;
        }

        .project-info h5 {
            margin-bottom: 40px;
        }

        .project-info p {
            margin: 25px 0;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }

        .project-info p b {
            color: #222;
        }

        .project-info span {
            float: right;
        }

        .project-info .main-btn {
            padding: 12px 18px;
            font-size: 15px;
            margin: 20px 0;
            width: 60%;
            margin-left: 20%;
        }

        .project-overview h5 {
            margin: 30px 0;
        }

        .project-overview p:last-child {
            margin-bottom: 40px;
        }

        .port-2 .single-portfolio-item {
            width: 24.33%;
            margin-left: 0;
            margin-bottom: 0;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .port-2 .single-portfolio-item {
                width: 48.33%;
            }
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .port-2 .single-portfolio-item {
                width: 100%;
            }
        }

        @media (max-width: 575px) {
            .port-2 .single-portfolio-item {
                width: 100%;
            }
        }

        .port-2 .portfolio-list {
            margin-right: -3%;
        }

        /* Single Service
    ============== */

        .service-list {
            background: #F6F6F6;
            padding: 30px;
            margin-bottom: 30px;
        }

        .service-list h5 {
            margin: 30px 0;
        }

        .service-list a {
            display: block;
            color: #b3abab;
            padding: 10px;
            margin-bottom: 20px;
            background: #fff;
        }

        .service-list a.active {
            background: #ecc566;
            color: #fff;
        }

        .service-list a span {
            float: right;
        }

        .single-service h2 {
            margin: 30px 0;
        }

        .single-service h5 {
            margin: 20px 0;
        }

        .single-service p {
            font-size: 16px;
            line-height: 28px;
        }

        .single-service-bg img {
            width: 100%;
        }

        .helpline-section {
            background: #020E28;
            color: #fff;
            padding: 20px;
            margin-top: 35px;
            height: 272px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .helpline-section h4 {
            color: #fff;
            margin-top: 15px;
        }

        .helpline-section button {
            margin-top: 15px;
        }

        /* Single Project
    ============== */

        .portfolio-single-section h3 {
            font-size: 35px;
            margin: 30px 0;
        }

        .project-info {
            border: 1px solid #ddd;
            padding: 30px;
        }

        .project-info h5 {
            font-size: 30px;
            margin-bottom: 40px;
        }

        .project-info p {
            margin: 25px 0;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }

        .project-info p b {
            color: #222;
        }

        .project-info span {
            float: right;
        }

        .project-info .main-btn {
            padding: 12px 18px;
            font-size: 15px;
            margin: 20px 0;
            width: 60%;
            margin-left: 20%;
        }

        .project-overview h5 {
            margin: 30px 0;
        }

        .project-overview p:last-child {
            margin-bottom: 40px;
        }

        /* Single Blog
    ============== */

        .blog-meta {
            margin: 20px 0;
        }

        .blog-meta span i {
            color: #ecc566;
            font-size: 20px;
            margin-right: 10px;
        }

        .single-blog-wrap h3 {
            font-size: 28px;
            margin: 20px 0;
        }

        /* FAQ CSS
    ============== */

        .styled-faq {
            margin-top: 50px;
        }

        .styled-faq .panel-group .panel {
            border-radius: 0;
            -webkit-box-shadow: 0 0 0;
            box-shadow: 0 0 0;
            margin-bottom: 30px;
        }

        .styled-faq .panel-default>.panel-heading {
            background: none;
            padding: 0;
            border: 1px solid #ddd;
        }

        .styled-faq .panel-default>.panel-heading+.panel-collapse>.panel-body {
            border-top: none;
            padding: 10px;
        }

        .styled-faq .panel .panel-heading h6 {
            font-weight: 600;
        }

        .styled-faq .panel .panel-heading h6 a {
            display: block;
            text-decoration: none;
            padding: 12px;
            color: #ffffff;
            ;
        }

        @media (max-width: 575px) {
            .styled-faq .panel .panel-heading h6 a {
                font-size: 14px;
            }
        }

        .styled-faq .panel .panel-heading h6 a i.fa {
            float: right;
            font-size: 150%;
            line-height: 15px;
            display: none;
            color: #ddd;
        }

        .styled-faq .panel .panel-heading h6 a[aria-expanded=true] i.fa.fa-angle-up {
            display: block;
        }

        .styled-faq .panel .panel-heading h6 a[aria-expanded=false] i.fa.fa-angle-down {
            display: block;
        }

        .question-section {
            background: #F7F7F7;
            padding: 30px;
        }

        .question-section h6 {
            margin-bottom: 20px;
        }

        .question-section input,
        .question-section textarea {
            background: #fff;
            color: #191919;
            border: none;
        }

        .question-section input::placeholder,
        .question-section textarea::placeholder {
            font-size: 15px;
            color: #191919;
        }

        .question-section button {
            font-size: 14px;
            letter-spacing: 1px;
        }


        /* Contact Page
    ============== */

        .contact-us-area {
            background-image: url(../img/choose-us-bg-2.jpg);
            background-size: cover;
            height: 500px;
            position: relative;
            z-index: 1;
        }

        .contact-us-wrapper {
            background: #fff;
            margin-top: 50px;
            position: relative;
        }

        .contact-us-inner {
            text-align: center;
            padding: 40px 30px;
            border-right: 1px solid #eee;
        }

        .contact-us-inner:nth-last-child(4) {
            border-right: none;
        }

        .contact-us-inner h5 {
            margin: 40px 0 20px;
        }

        .contact-us-inner a {
            text-transform: uppercase;
            color: #ecc566;
            font-size: 17px;
            font-weight: 500;
            margin: 20px 0 10px;
        }

        #contact-us .info-i {
            position: relative;
            z-index: 1;
        }

        #contact-us .info-i i:before {
            font-size: 50px;
            color: #091a2a;
        }

        #contact-us .contact-form .main-btn {
            margin-top: 30px;
        }


        h1 {
            font-size: 50px;
            word-break: break-all;
        }





        /* Create three equal columns that floats next to each other */
        .column {
            float: right;
            width: 33.33%;
            display: none;
            /* Hide all elements by default */
        }

        /* Clear floats after rows */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* Content */
        .content {
            background-color: white;
            padding: 10px;
        }

        /* The "show" class is added to the filtered elements */
        .show {
            display: block;
        }

        /* Style the buttons */
        .btn {
    border: none !important;
    outline: none;
    padding: 12px 12px !important;
    background-color: #edebeb;
    cursor: pointer !important;
    font-size: 20px !important;
}

        .btn:hover {
            background-color: #ddd;
        }

        .btn.active {
            background-color: #666;
            color: white;
        }


        /* Apply basic styling to the overlay */
        .overlay_a {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            /* Make sure the overlay appears above other content */
            background-color: rgba(0, 0, 0, 0.8);
            /* Adjust the opacity by modifying the last value (0.8 in this case) */
            display: none;
            /* Hide the overlay by default */
        }

        /* Show the overlay when the modal is open */
        .modal.show .overlay_a {
            display: block;
        }

        /* Style the image section */
        .image-section {
            position: relative;
        }

        /* Style the image container to center the image */
        .image-container {
            max-width: 80%;
            /* Set the maximum width for the image container */
            margin: 0 auto;
            /* Center the container horizontally */
        }

        /* Style the image */
        .image-container img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        /* Additional styles for content below the overlay */
        /* Adjust these styles based on your page layout */
        .content-below-overlay {
            margin-top: 30px;
            /* Add some spacing to separate the overlay from the content below */
        }

        .modal-body {
            padding: 0;
        }

        /* Style the image in the modal */
        .modal-body img {
            display: block;
            width: 100%;
           /* height: 80vh;*/
            /* Limit the image height to 80% of the viewport height to ensure it doesn't cover the entire screen */
            object-fit: cover;
            /* Make the image cover its container while maintaining aspect ratio */
            object-position: center;
            /* Center the image within its container */
        }