/*
Author       : themes_master
Template Name: Nick Berg - Personal Portfolio Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. START MENU STYLE
    03. START HOME CSS STYLE
    04. START ABOUT ME STYLE
    05. START SERVICE STYLE
    06. START SKILLS STYLE
    07. START RESUME STYLE
    08. START PORTFOLIO DESIGN
    09. START PRICING STYLE
    10. START BLOG STYLE
    11. START TESTIMONIAL DESIGN
    12. START CONTACT STYLE
    13. START FOOTER DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
    color: #fafafa;
    background: #e0b853;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    overflow-x: hidden;
}

html,
body {
    height: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0px;
    margin: 0px;
    font-family: 'Quicksand', sans-serif;
    color: #fff;
    font-weight: 400;
}

a {
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

a:hover {
    color: #fff;
    text-decoration: none;
}

a:focus {
    outline: none;
    text-decoration: none;
}

p {
    margin-bottom: 0;
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}

b,
strong {
    font-weight: 600;
}

/*START PRELOADER DESIGN*/
.preloader {
    background: #232a34;
    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-color: #fff;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

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

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

    50% {
        -webkit-transform: scale(1.0)
    }
}

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

    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.no-padding {
    padding: 0
}

/*END PRELOADER DESIGN*/
.section-padding {
    padding: 80px 0
}

/*START SECTION TITLE DESIGN*/
.section-title {
    margin-bottom: 60px;
    width: 100%;
    position: relative;
}

.section-title h1 {
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
    margin: 0;
    text-align: center;
}

/*END SECTION TITLE DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
    background: none;
    border-radius: 30px;
    bottom: 5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    height: 45px;
    line-height: 45px;
    opacity: 1;
    position: fixed;
    right: 5px;
    text-align: center;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 45px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.topcontrol:hover {
    background: #105a37;
    color: #fff;
}

/*END SCROLL TO TOP*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 02. START MENU STYLE
* ----------------------------------------------------------------------------------------
*/
.site-logo img {
    height: auto;
    width: 300px;
}

.bg-faded {
    background-color: transparent;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

@media only screen and (max-width:480px) {
    /* .bg-faded {background:#105a37;} */
}

.navbar-fixed {
    z-index: 999;
    position: fixed;
    opacity: .98;
    width: 100%;
    padding: 10px 0;
    top: 0;
    -webkit-animation: fadeInDown 800ms;
    animation: fadeInDown 800ms;
    -webkit-backface-visibility: hidden;
    border-radius: 0px;
    background: #105a37;
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.07);
}

#navigation {
    padding: 20px 0;
}

#navigation.navbar-fixed {
    padding: 15px 0;
}

.header_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

#main-menu {
    margin-top: 12px;
}

#main-menu ul {
    list-style-type: none;
}

#main-menu ul li {
    display: inline-block;
    padding: 0px 12px;
    position: relative;
}

#main-menu ul li a {
    color: #fff;
    font-size: 18px;
    text-transform: capitalize;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    font-weight: 600;
}

#navigation.navbar-fixed #main-menu ul li a {
    color: #fff;
}

#navigation.navbar-fixed #main-menu ul li a:hover,
#navigation.navbar-fixed #main-menu ul li a:focus,
#main-menu ul li a:hover,
#main-menu ul li a:focus {
    color: #fff;
}

.slicknav_nav_icon {
    color: #fff;
    font-size: 24px;
}

#mobile_menu {
    display: none;
}

@media only screen and (max-width:767px) {
    .navbar-default {
        padding: 10px !important;
    }

    .navbar-collapse {
        margin-top: 15px;
    }

    #navigation ul li a {
        position: inherit;
        color: #1d293e;
    }

    #navigation ul li ul,
    #navigation ul li ul li ul {
        opacity: 1;
        position: inherit;
        top: 0;
        -webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        z-index: 1;
        visibility: visible;
        background: #fff none repeat scroll 0 0;
        -webkit-box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.05);
        box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.05);
        padding: 15px;
        left: 0;
        background: #f5f5f5;
        list-style: none;
        width: 100%;
    }

    #navigation ul li ul.sub-menu li {
        z-index: 1;
    }

    #navigation ul li:hover ul.sub-menu {
        top: 0;
        opacity: 1;
        z-index: 999;
        visibility: visible;
    }

    #main-menu {
        display: none;
    }

    #mobile_menu {
        display: block;
        width: 100%;
    }

    .slicknav_nav ul li a {
        color: #fff !important;
    }
}

@media only screen and (max-width:767px) {
    .navbar-brand {
        padding-top: 20px;
    }
}

@media only screen and (max-width:480px) {
    .slicknav_menu {
        margin-top: -40px;
    }
}

/*
* ----------------------------------------------------------------------------------------
* 02.END  MENU STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 03. START HOME CSS STYLE
* ----------------------------------------------------------------------------------------
*/
.welcome-area {
    padding-top: 200px;
    height: 750px;
}

@media only screen and (max-width:768px) {
    .welcome-area {
        height: auto;
    }
}

.about_me img {
    margin: auto;
    border-radius: 50px;
    position: absolute;
    height: 500px;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media only screen and (max-width:480px) {
}

.about_me_title {
    margin-top: 40px;
}

.about_me_title span {
    background: #105a37;
    padding: 8px 30px;
    display: inline-block;
    margin-bottom: 15px;
    border-radius: 30px 30px 0px 30px;
    font-weight: 500;
    font-size: 14px;
}

.about_me_title h1 {
    font-weight: 700;
    font-size: 50px;
}

@media only screen and (max-width:480px) {
    .about_me_title h1 {
        font-size: 40px;
    }
}

.about_me_title h4 {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 0;
    margin-top: 14px;
    text-transform: capitalize;
}

.profile_info {
    margin-top: 22px;
}

.profile_info span {
    font-weight: 400;
    display: block;
    line-height: 30px;
}

.profile_info span i {
    font-size: 14px;
    margin-right: 10px;
}

/*START SOCIAL PROFILE CSS*/
.social_profile {
    margin-top: 20px;
}

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

.social_profile ul li {
    display: inline-block;
}

.social_profile ul li a {
    text-align: center;
    border: 0px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-right: 10px;
    font-size: 18px;
    color: #eee;
    border-radius: 30px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.f_facebook:hover {
    background: #3B5998;
    border: 1px solid #3B5998;
}

.f_twitter:hover {
    background: #1A90D9;
    border: 1px solid #1A90D9;
}

.f_instagram:hover {
    background: #FF5252;
    border: 1px solid #FF5252;
}

.f_linkedin:hover {
    background: #0077B5;
    border: 1px solid #0077B5;
}

.f_skype:hover {
    background: #01A4E0;
    border: 1px solid #01A4E0;
}

@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;
}

/*END SOCIAL PROFILE CSS*/
/*
* ----------------------------------------------------------------------------------------
* 03. END HOME CSS STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 04. START ABOUT ME STYLE
* ----------------------------------------------------------------------------------------
*/
#about {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    
}

#about .container {
    max-width: 100%;
    margin-top: 0;
    display: flex;
    flex-direction: column;

    letter-spacing: 0;
    line-height: 1.6;
    padding: 0 15px;
}



.about_content {

    font-size: 18px;
    
    text-align: left;
    
    /* padding-right: 40px; */
}

@media only screen and (max-width: 991px) {
    #about .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .about_content {
        text-align: center;
        font-size: 16px;
        padding: 0 10px;
    }
    #about .col-lg-6, #about .col-sm-6, #about .col-xs-12 {
        width: 100%;
        max-width: 680px;
    }
}

@media only screen and (max-width: 480px) {
    .about_content {
        font-size: 15px;
        padding: 0 12px;
    }
    .about_content h1 {
        font-size: 26px;
    }
    .about_content a {
        padding: 8px 20px;
        font-size: 14px;
    }
}

@media only screen and (max-width:768px) {
    .about_content {
        flex-direction: column;
        /* max-width: 600px; */
        margin-top: 0px;
        padding-right: 0px;
    }
}

.about_content h1 {
    font-weight: 600;
    margin-bottom: 20px;
}

.about_content p {
}

.about_content a {
    background: #105a37;
    color: #fff;
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 600;
    display: inline-block;
    margin-top: 35px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.about_content a i {
}

/*
* ----------------------------------------------------------------------------------------
* 04. END ABOUT ME STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 05. START SERVICE STYLE
* ----------------------------------------------------------------------------------------
*/
.service-area {
    padding-bottom: 30px;
}

.service_content {
    background: #ffffff;
    border-radius: 25px;
    padding: 60px;
    color: #000000;
    margin-bottom: 30px;
    border-radius: 25px;
    position: relative;
    z-index: 2;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin: 50px 15px;
}

@media only screen and (max-width:768px) {
    .service_content {
        padding: 30px;
    }
}

@media only screen and (max-width:480px) {
    .service_content {
        padding: 40px;
    }
}

.service_content:hover {
    -webkit-box-shadow: 0px 60px 60px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 60px 60px rgba(0, 0, 0, 0.1);
    z-index: 100;
    -webkit-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    transform: translate(0, -10px);
}

.service_content span {
    display: inline-block;
    font-size: 28px;
    margin-bottom: 25px;
    text-align: center;
    color: #000000;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: absolute;
    top: -35px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 100px;
    border: 1px solid #105a37;
    background: #105a37;
}

.service_content h4 {
    text-transform: capitalize;
    color: #000000;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 15px;
}

@media only screen and (max-width:768px) {
    .service_content h4 {
        margin-top: 20px;
    }
}

.service_content p {
}

/*START OWL BUTTON*/
.owl-theme {
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.owl-theme .owl-controls {
    width: 100%;
    height: 50px;
    display: block !important;
    opacity: 1;
    position: absolute;
    top: 38%;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.owl-theme .owl-controls .owl-buttons div {
    width: 40px;
    height: 40px;
    line-height: 30px;
    opacity: 1;
    border-radius: 30px;
    background: none;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.owl-theme .owl-controls .owl-buttons div:hover {
    background: #105a37;
    display: block;
    border: 1px solid #105a37;
}

.owl-prev {
    position: absolute;
    left: -5%;
}

.owl-next {
    position: absolute;
    right: -5%;
}

.owl-prev:after,
.owl-next:after {
    content: "\f104";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #fff;
    opacity: 1;
}

.owl-next:after {
    content: "\f105";
}

@media only screen and (max-width: 767px) {
    .owl-theme .owl-controls {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .owl-theme .owl-controls {
        display: none !important;
    }
}

/*
* ----------------------------------------------------------------------------------------
* 05. END SERVICE STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 06. START SKILLS STYLE
* ----------------------------------------------------------------------------------------
*/
.skill-item {
    margin-bottom: 60px;
}

.skill-item h4 {
    font-size: 20px;
    padding-top: 20px;
    font-weight: 600;
}

.skill-knob {
    color: #fff !important;
}

/*
* ----------------------------------------------------------------------------------------
* 06. END SKILLS STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 07. START RESUME STYLE
* ----------------------------------------------------------------------------------------
*/
.timeline-area {
    padding: 50px 0;
    /* background-color: #f4f4f4; */
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

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

.section-title h1 {
    color: #105a37;
    font-weight: 700;
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.section-title h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #e0b853;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
}

@media (max-width: 991px) {
    .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Single Timeline Block */
.timeline-container {
    position: relative;
    padding-left: 30px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    background-color: #ccc;
    height: 100%;
}

.single_timeline {
    position: relative;
    padding: 30px 20px 30px 40px;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid #105a37;
}

.single_timeline:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.single_timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    left: -10px;
    width: 18px;
    height: 18px;
    background-color: #e0b853;
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 1;
}

.single_timeline h4 {
    font-weight: 700;
    color: #105a37;
    font-size: 22px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.timeline-meta {
    margin-bottom: 15px;
}

.timeline-meta span {
    display: inline-block;
    font-size: 14px;
    margin-right: 15px;
}

.active_year {
    color: #e0b853;
    font-weight: 600;
}

.active_company {
    color: #555;
    font-weight: 500;
}

.single_timeline p {
    color: #666;
    line-height: 1.6;
}

/* Animation class for WOW.js */
.wow {
    visibility: hidden;
}
/*
* ----------------------------------------------------------------------------------------
* 07. END RESUME STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 08.START PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/
.our_portfolio {
    padding-bottom: 50px;
}

.mix {
    display: none;
}

.portfolio_filter ul {
    list-style: none;
    padding: 10px;
    border-radius: 100px;
    width: 60%;
    margin: auto;
    margin-bottom: 60px;
}

@media only screen and (max-width:768px) {
    .portfolio_filter ul {
        width: 80%;
    }
}

.portfolio_filter ul li {
    font-weight: 400;
    text-transform: capitalize;
    display: inline-block;
    cursor: pointer;
    padding: 7px 30px;
    font-size: 14px;
    color: #fff;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    margin: 0 3px 0px;
    border-radius: 30px;
    border: 2px solid #fff;
}

.portfolio_filter .active {
    color: #fff;
    background: #105a37;
    border: 2px solid #105a37;
}

.single-project {
    position: relative;
    margin-bottom: 30px;
    -webkit-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
}

.single-project .sp-img {
    position: relative;
    cursor: pointer;
}

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

.single-project .sp-hover {
    position: absolute;
    height: 0%;
    width: 0%;
    top: 50%;
    left: 50%;
    background: rgba(44, 164, 109, 0.6);
    opacity: 0;
    overflow: hidden;
    -webkit-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
}

.single-project:hover .sp-hover {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 1;
}

.single-project .sp-hover h3 {
    text-align: center;
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 24px;
}

.single-project .sp-social {
    position: relative;
    top: 28%;
}

.single-project .sp-social ul {
    position: relative;
    padding: 0px;
    list-style-type: none;
    text-align: center;
}

.single-project .sp-social ul li {
    position: relative;
    display: inline-block;
}

.single-project .sp-social ul li a {
    font-size: 14px;
    display: block;
    color: #1d293e;
    background: #fff;
    padding: 8px 26px;
    font-weight: 700;
    text-transform: capitalize;
    border-radius: 5px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.single-project .sp-social ul li a:hover {
    background: #105a37;
    color: #fff;
}

/*project modal*/
.modal-title {
    color: #1d293e;
    margin: 0;
    text-transform: uppercase;
}

.modal-content {
    padding: 10px 30px;
    border-radius: 0px;
    margin-top: 100px;
}

.modal-body {
    margin-bottom: 15px
}

.modal-body img {
    width: 100%;
}

.modal-body p {
    margin: 15px 0 0;
    text-align: left;
    color: #1d293e;
}

.project-list {
    margin-top: 30px;
    text-align: left;
}

.modal-title {
    color: #2b2b2b;
    margin: 0;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 20px;
    display: none;
}

.project-list li {
    padding: 7px 0;
    font-size: 14px;
    color: #1d293e;
}

.project-list li a {
    color: #1d293e;
    margin-bottom: 0;
    margin-right: 7px;
    width: 125px;
    font-size: 16px;
    font-weight: 600;
}

.project-list li a:hover {
    color: #105a37;
}

/*End project modal*/
/*
* ----------------------------------------------------------------------------------------
* 08.END PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 09. START PRICING STYLE
* ----------------------------------------------------------------------------------------
*/.pricing-area .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pricing-area .col-md-4 {
  display: flex;
}

.pricingTable {
  background: #2d343e;
  text-align: center;
  border-radius: 25px;
  min-height: 600px;   /* keeps minimum size */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.3s;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
}

.pricingTable .pricingTable-header {
  padding: 20px;
  margin: 0 0 10px;
  border-bottom: 1px solid #333;
}

.pricingTable .title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-transform: capitalize;
}

.pricingTable .price-label {
  color: #fff;
  background: #105a37;
  font-size: 16px;
  width: 100px;
  margin: 0 auto 15px auto;
  display: block;
  clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
}

.pricingTable .price-value {
  margin: 0 0 25px;
}

.pricingTable .amount {
  font-size: 50px;
  font-weight: 500;
  color: #fff;
  line-height: 35px;
}

.pricingTable .month {
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  display: block;
}

.pricingTable .pricing-content {
  text-align: left;
  padding: 0;
  margin: 25px;
  flex-grow: 1; /* makes the content stretch to balance height */
}

.pricingTable .pricing-content li {
  line-height: 40px;
  color: #fff;
  border-bottom: 1px solid #333;
  text-transform: capitalize;
}

.pricingTable .pricing-content li:first-child {
  border-top: 1px solid #333;
}

.pricingTable .pricing-content li:last-child {
  border-bottom: none;
}

.pricingTable .pricingTable-signup {
  color: #fff;
  background: #105a37;
  font-size: 16px;
  text-transform: capitalize;
  padding: 8px 40px;
  display: inline-block;
  border-radius: 30px;
  margin: 20px auto 30px auto;
  font-weight: 600;
  transition: all 0.3s;
}

.pricingTable .pricingTable-signup:hover {
  background: #ffffff;
  color: #232a34;
}

@media only screen and (max-width: 990px) {
    .pricingTable {
        margin: 0 0 30px;
    }
}

/*
* ----------------------------------------------------------------------------------------
* 09. END PRICING STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 10.START BLOG STYLE
* ----------------------------------------------------------------------------------------
*/
.single-blog {
    background: #2d343e;
    -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

@media only screen and (max-width:480px) {
    .single-blog {
        margin-bottom: 40px
    }
}

.single-img {
    position: relative;
    width: 100%;
}

.post-date {
    background: #105a37;
    display: inline-block;
    left: 0;
    padding: 12px 20px;
    position: absolute;
    top: 5%;
    border-radius: 0px 30px 30px 0px;
}

.post-date h4 {
    color: #fff;
    margin: 0;
    text-align: center;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 12px;
}

.single_blog_dsc {
    padding: 40px
}

.single_blog_dsc h3 a {
    color: #fff;
    display: block;
    font-size: 20px;
    margin-bottom: 10px;
    text-transform: capitalize;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    font-weight: 600;
    line-height: 30px;
}

.single_blog_dsc h3 a:hover {
    color: #105a37;
}

.single_blog_dsc p {
    color: #fff;
}

/*START SINGLE BLOG PAGE DESIGN*/
.blog_bg {
    background: #111;
}

.section-top {
    position: relative;
    padding-top: 200px;
    padding-bottom: 150px;
}

.section-top:before {
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.section-top-title h1 {
    font-weight: 600;
}

.blog_single_page {
}

.blog_single_page h1 {
    margin-bottom: 30px;
    font-weight: 700;
    line-height: 48px;
}

@media only screen and (max-width:480px) {
    .blog_single_page h1 {
        font-size: 26px;
        line-height: 40px;
    }
}

.blog_single_page img {
    margin-bottom: 20px;
}

.blog_single_page span {
    margin-bottom: 20px;
    display: inline-block;
    margin-right: 20px;
}

.blog_single_page span i {
    margin-right: 10px;
    color: #ffffff;
}

.blog_single_page p {
    margin-bottom: 20px;
}

/*END SINGLE BLOG PAGE DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 10.END BLOG STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 11.START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonial {
    text-align: center;
    background: #2d343e;
    margin: 0px 15px;
    padding: 30px;
    border-radius: 3px;
}

.testimonial .testimonial-content {
}

.testimonial .pic {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.testimonial .pic img {
    width: 100%;
    height: auto;
    border-radius: 100px;
}

.testimonial .description {
    margin-bottom: 15px;
    padding: 0 30px;
    color: #fff;
}

.testimonial .test-content {
}

.testimonial .title {
    display: inline-block;
    font-size: 20px;
    text-transform: capitalize;
    margin: 0;
    color: #fff;
    font-weight: 600;
}

.testimonial .post {
    display: inline-block;
}

.testimonial i {
    color: #f0a500;
}

/*
* ----------------------------------------------------------------------------------------
* 11.END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 12. START CONTACT STYLE
* ----------------------------------------------------------------------------------------
*/
.contact input {
    background: #ffffff;
    border: 1px solid #e8cf40;
    border-radius: 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    height: 50px;
    padding: 10px;
    width: 100%;
    font-family: 'poppins', sans-serif;
    padding-left: 30px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact textarea {
    background: #ffffff;
    border: 1px solid #2d343e;
    border-radius: 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    font-family: 'poppins', sans-serif;
    padding-left: 30px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact input:focus {
    background: #ffffff;
    border: 1px solid #2d343e;
    color: #000000;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0 none;
}

.contact textarea:focus {
    background: #ffffff;
    border: 1px solid #2d343e;
    color: #000000;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0 none;
}

.btn-contact-bg {
    border-radius: 30px;
    color: #fff;
    outline: medium none !important;
    padding: 15px 27px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #105a37;
    font-weight: 600;
    font-family: 'poppins', sans-serif;
    cursor: pointer;
}

.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #ffffff;
    color: #232a34;
}

/* Consultation box next to submit button */
.contact-action-row {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}
.consultation-tab {
    background: transparent;
    color: #2ca46d;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    border: 2px solid #2ca46d;
    border-left: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-weight: 600;
    font-family: 'poppins', sans-serif;
    cursor: default;
    box-shadow: none;
}
.consultation-tab::before {
    content: '';
    display: block;
}
.consultation-tab:hover {
    background: rgba(44,164,109,0.06);
}

@media only screen and (max-width:767px) {
    .contact-action-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .consultation-tab {
        border-left: 2px solid #2ca46d;
        border-radius: 30px;
    }
}

/*START ADDRESS*/
.address {
    text-align: center;
    padding: 85px 60px;
    background: #ffffff;
}

@media only screen and (max-width:480px) {
    .address {
        padding: 85px 30px;
    }
}

.address h2 {
    font-weight: 600;
    color: #fff;
}

@media only screen and (max-width:480px) {
    .address h2 {
        font-size: 28px;
    }
}

.address h1 {
    font-weight: 700;
    margin: 20px 0;
    color: #fff;
}

@media only screen and (max-width:480px) {
    .address h1 {
        font-size: 28px;
    }
}

.address h3 {
    font-weight: 600;
    color: #fff;
}

@media only screen and (max-width:480px) {
    .address h3 {
        font-size: 28px;
    }
}

.map {
}

.map iframe {
    height: 351px;
    border: none;
    width: 100%;
    margin-bottom: -7px;
}

*/
.contact-image {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-image img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.section-pretitle {
    display: block;
    color: #2ca46d;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-size: 13px;
}

/* Consultation hero placed above contact title */
.consultation-hero-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.consultation-hero {
    display: inline-block;
    background: #2ca46d;
    color: #fff;
    padding: 18px 32px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(44,164,109,0.15);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.consultation-hero:hover,
.consultation-hero:focus {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(44,164,109,0.18);
}

@media only screen and (max-width: 767px) {
    .consultation-hero {
        font-size: 16px;
        padding: 12px 20px;
    }
}

/*END ADDRESS*/
/*
* ----------------------------------------------------------------------------------------
* 12.END CONTACT STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 13.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer_social {
    text-align: center;
}

.footer_logo {
    margin-bottom: 20px;
}

.footer_logo a img {
    width: 350px;
}

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

.footer_social ul li {
    display: inline-block
}

.footer_social ul li a {
    display: block;
    font-size: 18px;
    border-bottom: 1px solid #eee;
    margin: 0 10px;
    text-transform: capitalize;
    text-align: center;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    color: #fff;
    font-weight: 500;
}

.footer_social ul li a:hover {
    color: #105a37;
}

/*
* ----------------------------------------------------------------------------------------
* 13.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
@media only screen and (max-width: 767px) {
    /* GENERAL */
    body {
        font-size: 16px;
        line-height: 28px;
    }

    .section-padding {
        padding: 60px 0;
    }

    .section-title h1 {
        font-size: 32px;
        margin-bottom: 30px;
    }

    /* HEADER & NAVIGATION */
    #navigation {
        padding: 10px 0;
    }

    .navbar-fixed {
        padding: 10px 0;
    }

    .site-logo img {
        width: 150px;
    }

    /* HOME SECTION */
    .welcome-area {
        padding-top: 100px;
        height: auto;
        text-align: center;
    }

    .about_me {
        order: 2;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .about_me img {
        position: static;
        transform: none;
        height: 300px;
        margin-top: 30px;
    }

    .about_me_title {
        margin-top: 30px;
        order: 1;
    }

    .about_me_title h1 {
        font-size: 36px;
        font-weight: 700;
    }

    .about_me_title h4 {
        font-size: 20px;
        text-align: center;
    }

    .profile_info {
        margin-top: 20px;
    }

    .profile_info span {
        display: block;
        text-align: center;
    }

    .social_profile {
        margin-top: 20px;
        text-align: center;
    }

    .social_profile ul {
        justify-content: center;
    }

    .social_profile ul li a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin: 5px;
    }

    /* ABOUT ME SECTION */
    .about_content {
        display: flex;
        justify-content: center;align-items: center;
        margin-top: 30px;
        padding-right: 0;
    }

    .about_content h1 {
        color: #2d343e;
        font-size: 30px;
        margin-bottom: 15px;
    }

    .about_content_img img {
        height: auto;
        width: 100%;
        margin-top: 30px;
    }

    /* SERVICES SECTION */
    .service_content {
        
       

        padding: 40px 20px;
        margin: 30px 0;
    }

    .service_content span {
        position: relative;
        top: 0;
        margin-bottom: 15px;
    }

    .service_content h4 {
        margin-top: 10px;
    }

    /* RESUME SECTION */
    .single_timeline {
        padding: 20px;
        margin-bottom: 20px;
    }

    .single_timeline h4 {
        font-size: 20px;
    }

    /* PRICING SECTION */
    .pricingTable {
        margin-bottom: 30px;
    }

    .pricingTable .title {
        font-size: 24px;
    }

    .pricingTable .amount {
        font-size: 40px;
    }

    .pricingTable .pricing-content {
        margin: 15px;
    }

    /* CONTACT SECTION */
    .contact input,
    .contact textarea {
        padding-left: 15px;
    }

    .address {
        padding: 40px 20px;
        margin-bottom: 20px;
    }

    .address h2,
    .address h1,
    .address h3 {
        font-size: 24px;
    }

    .map iframe {
        height: 250px;
    }

    /* FOOTER */
    .footer_logo img {
        width: 200px;
    }
}

@media only screen and (max-width: 480px) {
    .section-title h1 {
        font-size: 28px;
    }

    .about_me_title h1 {
        font-size: 30px;
    }

    .about_me_title h4 {
        font-size: 18px;
    }

    .social_profile ul li a {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .about_content h1 {
        font-size: 26px;
    }

    .pricingTable .title {
        font-size: 20px;
    }

    .pricingTable .amount {
        font-size: 36px;
    }
}

/* === Floating WhatsApp Button (Bottom-Left) === */
.wa-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none; 
}

/* The button */
.wa-button {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25D366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  text-decoration: none;
  pointer-events: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: wa-bounce 2s infinite;
}

.wa-button svg {
  width: 28px;
  height: 28px;
  fill: white;
}

/* Bounce animation */
@keyframes wa-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-3px); }
}

/* Tooltip/Popup bubble */
.wa-tooltip {
  pointer-events: auto;
  background: #ffffff;
  color: #111827;
  font: 500 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border: 1px solid rgba(17,24,39,0.06);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  position: relative;
  animation: wa-pop 0.6s ease 1s forwards; /* Auto pop after 1s */
}

/* Little arrow */
.wa-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-right: 1px solid rgba(17,24,39,0.06);
  border-bottom: 1px solid rgba(17,24,39,0.06);
}

/* Popup animation */
@keyframes wa-pop {
  0% { opacity: 0; transform: translateX(-12px) scale(0.9); }
  60% { opacity: 1; transform: translateX(0) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Optional: show tooltip again on hover/focus */
.wa-button:hover + .wa-tooltip,
.wa-button:focus + .wa-tooltip,
.wa-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Mobile tweaks */
@media (max-width: 420px) {
  .wa-tooltip {
    font-size: 13px;
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* ----------------------------------------------------------------------------------------
* Sticky Chat Box Styles
* ----------------------------------------------------------------------------------------
*/

#chat-wrapper {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	z-index: 1000 !important;
}

.chat-toggle-btn {
	background-color: #105a37;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 70px;
	height: 70px;
	font-size: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform 0.3s ease;
	display: none;
}

.chat-toggle-btn:hover {
	transform: scale(1.1);
}

#okok{
    color: #cba135;
}

#location{
    color: #105a37;
}

.chat-box {
	width: 350px;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	padding: 25px;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateX(10px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.chat-box.open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.chat-close-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	font-size: 22px;
	color: #888;
	cursor: pointer;
	transition: color 0.3s ease;
}

.chat-close-btn:hover {
	color: #555;
}

.chat-box h3 {
	margin-top: 0;
	margin-bottom: 25px;
	color: #333;
	font-size: 22px;
	text-align: center;
	font-weight: 700;
}

.chat-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.chat-links li {
	margin-bottom: 12px;
}

.chat-links a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background-color: #f5f5f5;
	border-radius: 12px;
	color: #105a37;
	text-decoration: none;
	font-size: 15px;
	transition: all 0.3s ease;
}

.chat-links a:hover {
	background-color: #eaeaea;
	transform: translateX(5px);
}

/* ----------------------------------------------------------------------------------------
* Video Player Styles (Modern & Responsive)
* ----------------------------------------------------------------------------------------
*/

.video-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 1100px; /* narrower than full container for aligned margins */
    margin: 0 auto;
    gap: 20px;
}

.video-grid .section-title {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

/* Force columns: 3 per row on large, 2 per row on medium, 1 per row on small */
.video-grid > .col-lg-4 {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
    box-sizing: border-box;
}

@media only screen and (max-width: 991px) {
    .video-grid > .col-md-6 {
        flex: 0 0 calc((100% - 30px) / 2);
        max-width: calc((100% - 30px) / 2);
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 767px) {
    .video-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 15px;
    gap: 20px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.video-container:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.25);
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-container::after {
    content: '\f04b';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.video-container:hover::after {
    opacity: 1;
}


/* Modal for full-size video (no changes needed here) */
.video-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
}

.video-content {
    position: relative;
    margin: 5% auto;
    width: 90%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 10px;
    overflow: hidden;
}

.video-content video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-close-btn {
    position: fixed;
    top: 30px;
    right: 30px;
    color: #fff;
    font-size: 50px;
    font-weight: 300;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2001;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.video-close-btn:hover,
.video-close-btn:focus {
    color: #e0b853;
    text-decoration: none;
    cursor: pointer;
    transform: rotate(90deg);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-content {
        width: 95%;
        margin: 10% auto;
    }

    .video-close-btn {
        font-size: 35px;
        top: 20px;
        right: 20px;
    }
}