/*
*
* ------------------------------------------------------------------
*
*
*
* -------------------------------------------------------------------
*
============================================
*   [Table of contents]
* ==========================================

    ** Theme Reset Css
    ** Preloader
    01. Homepage
        01. Header Top
        02. Custom Navigation
        03. Slider
        04. Features List
        05. Call Out
        06. Portfolio
        07. Features
        08. Services
        09. fun-fact
        10. Our Team
        11.Testimonial
        12.Subscribe
        13. Pricing
        14. Recent Blog
        15. Contact Form
        16. footer-copyright

    02. About us page
        01. BreadCrumb Area
        02. About us info
        03. Our Skill
        04. Our Client

    03. Service Page
    04. Portfolio Pages
        01. Portfolio styles
        02. Excluesive

    05. Gallery Page
    06. Blog Pages
    07. Single Blog Page
    08. Contact Us Page
    09. 404 page

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




/*
==========================================
    Fonts + Include CSS
============================================
*/

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900|Roboto:300,400,500,700,900');
@import url('bootstrap.min.css');
@import url('font-awesome.min.css');
@import url('icofont.css');
@import url('meanmenu.min.css');
@import url('owl.carousel.min.css');
@import url('owl.theme.default.min.css');
@import url('animate.css');
@import url('magnific-popup.css');


@import url('colors/default.css');
@import url('widget.css');


/* webGB added */

.padding-top-20 {

  padding-top: 20px;

}


 .bluelink {
   color:#3996D3;
 }

 .gbicon {
   margin: 0 10px 0 10px;
 }


 /* OFFER */
 .offer {
   position: relative;
   padding: 100px 0 0 0;
 }
 .offer .preamble {
   margin-bottom: 55px;
 }
 .offer .single-offer {
   margin-bottom: 100px;
   display: inline-block;
   width: 100%;
 }
 @media (max-width: 992px) {
   .offer .single-offer {
     text-align: center;
   }
 }
 .offer .single-offer img {
   margin: 0 auto;
 }
 .offer .single-offer .description .title {
   margin: 15px 0 30px 0;
 }
 .offer .single-offer .description .title:after {
   position: relative;
   margin-top: 30px;
   display: block;
   width: 140px;
   height: 13px;
   content: "";
   background: url(../img/preamble-after.png) no-repeat right;
 }
 @media (max-width: 992px) {
   .offer .single-offer .description p {
     margin-bottom: 30px;
   }
 }
 .offer .single-offer .offer-features {
   position: relative;
 }
 .offer .single-offer .offer-features .row {
   position: absolute;
   bottom: 15px;
   left: 15px;
   right: 15px;
 }
 @media (max-width: 992px) {
   .offer .single-offer .offer-features .row {
     position: relative;
     bottom: auto;
     left: auto;
     right: auto;
   }
 }


/*
==========================================
    Theme Reset Css
==========================================
*/

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background: #fff;
}

body.gray-bg {
    background: #f9f9f9;
}

* {
    outline: none !important;
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    line-height: 46px;
    font-weight: 500;
}

h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

h3 {
    font-size: 24px;
    line-height: 34px;
}

h4 {
    font-size: 18px;
    line-height: 28px;
}

h5 {
    font-size: 16px;
    line-height: 26px;
}

p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}

p.small,
a {
    color: #383838;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

img {
    max-width: 100%;
}



/* Helper class*/

.section-padding {
    padding: 70px 0px 5px 0px;
}

.section-padding-top {
    padding: 110px 0 0;
}

.section-padding-bottom {
    padding-bottom: 80px;
}

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

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

.section-header h2 {
    margin-bottom: 20px;
    line-height: .8;
    display: inline-block;
}

/**.section-header h2:after {
    content: '';
    position: absolute;
    top: 7%;
    right: 90px;
    width: 80px;
    height: 2px;
}
**/

.boxed-btn {
    color: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: inline-block;
    padding: 15px 40px;
    -webkit-transition: .3s;
    transition: .3s;
}

.boxed-btn i {
    margin-left: 10px;
}

.boxed-btn:hover {
    background: #fff;
}

.owl-item {
    float: left;
}

.owl-stage-outer {
    overflow: hidden;
}


.header-slider .owl-nav {
    display: none !important;
}


.owl-nav {
    display: none !important;
}


/*
==========================================
    Preloader
==========================================
*/

.preloader {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loader {
    height: 40px;
    width: 40px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
}

.loader:before,
.loader:after {
    content: "";
    height: 40px;
    width: 40px;
    border: 8px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    position: absolute;
    top: 0;
}

.loader:before {
    -webkit-animation: animate 2s infinite linear;
    animation: animate 2s infinite linear;
}

.loader:after {
    -webkit-animation: animate2 2s infinite linear;
    animation: animate2 2s infinite linear;
}

@-webkit-keyframes animate {
    100% {
        -webkit-transform: rotate(180deg) skew(360deg);
        transform: rotate(180deg) skew(360deg);
    }
}

@keyframes animate {
    100% {
        -webkit-transform: rotate(180deg) skew(360deg);
        transform: rotate(180deg) skew(360deg);
    }
}

@-webkit-keyframes animate2 {
    100% {
        -webkit-transform: rotate(-180deg) skew(-360deg);
        transform: rotate(-180deg) skew(-360deg);
    }
}

@keyframes animate2 {
    100% {
        -webkit-transform: rotate(-180deg) skew(-360deg);
        transform: rotate(-180deg) skew(-360deg);
    }
}


/*
===================================================================================
    01. Homepage
===================================================================================
*/


/*
==========================================
    01. Header Top
==========================================
*/

#header-top {
    color: #fff;
    padding: 6px 0;
    font-size: 13px;
}

.header-social li {
    display: inline-block;
}

.header-social li a {
    display: block;
    padding: 0px 5px;
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
    font-size: 13px;
}

.header-social li a:hover {
    color: #eee;
}

#header-top a {
    font-size: 13px;
    color: #fff;
}

.email,
.header-social {
    position: relative;
    padding-right: 25px;
}

.address,
.phone {
    padding-left: 25px;
}

.email:after,
.header-social:after {
    position: absolute;
    content: '';
    top: 0;
    right: -5px;
    height: 24px;
    width: 0px;
    border: .5px dashed #fff;
}

/* Add this to your style.css file */
.header-slider .header-single-slider figure img {
    width: 100%;
    height: 730px;
    object-fit: cover; /* This ensures the image covers the area without distortion */
    object-position: center; /* Center the image */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .header-slider .header-single-slider figure img {
        height: 450px; /* Adjust height for mobile */
    }
}


/*
==========================================
    02. Custom Navigation
==========================================
*/

header {
    position: relative;
    overflow: hidden;
}

.navbar-area {
    background: url(../img/navbarbg.png) no-repeat;
    background-position: top left;
    background-size: 100%;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 555;
    min-height: 128px;
}

/* logo */

.logo a {
    display: inline-block
}

header .logo {
    padding: 22px 0;
}

nav {
    margin: 22px -60px 22px 0;
    position: relative;
}

.main-menu ul li {
    display: inline-block;
    position: relative;
    z-index: 2;
}

.main-menu ul li a {
    padding: 10px 10px;
    color: #6a7d92;
    -webkit-transition: .3s;
    transition: .3s;
    display: block;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}


/* Submenu*/

.main-menu ul li.active ul li a {
    color: #6a7d92 !important;
}

.main-menu ul li.active ul li a {
    color: #6a7d92 !important;
}

.main-menu ul li ul {
    position: absolute;
    width: 200px;
    background: #fff;
    margin: 0;
    padding: 0;
    text-align: left;
    border: 1px solid #ddd;
    top: 100%;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    left: 0;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden;
}

.main-menu ul li:hover ul {
    top: 100%;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.main-menu ul li ul li {
    display: block;
    position: relative;
    border-bottom: 1px solid #eee;
}

.main-menu ul li ul li a {
    padding: 8px 15px 8px 25px;
    text-transform: capitalize;
}

.main-menu ul li ul li:before {
    position: absolute;
    content: '\f105';
    font-family: 'fontAwesome';
    left: 14px;
    top: 7px;
    font-weight: 500;
    color: #6a7d92;
}


/* Before after */

.main-menu ul li a:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: transparent;
    top: 16px;
    left: 12px;
    border-top: 2px solid;
    border-left: 2px solid;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .2s;
    transition: .2s;
}

.main-menu ul li a:hover:after {
    top: 8px;
    left: 0px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.main-menu ul li a:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: transparent;
    bottom: 16px;
    right: 12px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    -webkit-transition: .2s;
    transition: .2s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.main-menu ul li a:hover:before {
    bottom: 8px;
    right: 0px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.main-menu ul li.active a:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    top: 8px;
    left: 0px;
}

.main-menu ul li.active a:before {
    bottom: 8px;
    right: 0px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.main-menu ul li ul li a:after,
.main-menu ul li ul li a:before {
    display: none;
}


/* Sticky */

div#sticky-wrapper {
    height: 0 !important;
}

div#sticky-wrapper.is-sticky .sticky-nav {
    background: #fff !important;
    background-image: none;
    min-height: 80px;
    box-shadow: 0px 0 1px rgba(0, 0, 0, .2);
}

.is-sticky .sticky-nav {
    -webkit-animation: fadeInDown 1s both;
    animation: fadeInDown 1s both;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    cursor: pointer;
}

.collapse.show {
    padding: 15px;
}


/* Mean menu */

.mean-container .mean-bar {
    background: transparent none repeat scroll 0 0;
    min-height: 50px;
    padding: 0;
    margin: 15px 15px !important;
    position: absolute;
    left: 0;
    width: 90%;
}

.mean-container a.meanmenu-reveal {
    border: 1px solid;
    margin-top: 15px;
    margin-right: 10px;
    padding: 4px 5px;
    position: absolute;
    top: -90px;
    right: -10px !important;
}

.mean-container .mean-nav {
    margin-top: -14px;
}

.mean-container .mean-nav ul li a.mean-expand {
    height: 28px;
}


/* Right Nav */

.header-right-bar {
    text-align: right;
}

.header-right-bar ul li {
    display: inline-block !important;
    margin: 28px 0;
}

.header-right-bar ul li a {
    padding: 0 10px 0;
}

a.book-now {
    border: 1px solid;
    border-radius: 4px;
    padding: 4px 10px 4px !important;
    margin-left: 30px;
    -webkit-transition: .3s;
    transition: .3s;
    display: block;
}

a.book-now:hover {
    color: #fff;
}

a.book-now i {
    padding-right: 8px;
}



/* Full screen search */

#search {
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all .5s;
    transition: all .5s;
    will-change: transform, opacity;
    z-index: -1;
    overflow: hidden;
}

#search div {
    position: relative;
}

#searchbox {
    width: 100%;
    height: 32px;
    height: 32px;
    height: 32px;
    height: 2rem;
    display: inline-block;
    background: transparent;
    border-width: 0 0 1px 0;
    border-style: 0 solid #fff;
    color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    font-size: 32px;
    font-size: 32px;
    font-size: 32px;
    font-size: 2rem;
    outline: 0;
    padding: 32px 16px;
    padding: 32px 16px;
    padding: 32px 16px;
    padding: 2rem 1rem;
}

#close-btn {
    position: absolute;
    right: 5%;
    top: 5%;
}

#search:target {
    height: 100vh !important;
    width: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    z-index: 9999;
}

input[type="search"]::-webkit-input-placeholder {
    color: #fff;
}

#search i.fa-times {
    color: #fff;
}

.search-submit {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 12px;
}



/* Cart */

.cart-icon {
    position: relative;
}

.cart-icon .dropdown-toggle:after {
    display: none;
}

.badge {
    position: absolute;
    top: -2px;
    right: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 12px;
}

.cart-icon i {
    font-size: 20px;
}

.cart-list {
    padding: 15px;
    width: 250px;
    left: -50px !important;
    top: 28px !important;
}

ul.cart-list > li {
    position: relative;
    border-bottom: solid 1px #eee;
    padding: 10px 0;
    margin: 0;
}

ul.cart-list > li > a.photo {
    padding: 0 !important;
    margin-right: 15px;
    margin-top: 6px;
    margin-bottom: 10px;
    float: left;
    display: block;
    width: 50px;
    height: 50px;
}

ul.cart-list > li > h6 > a.photo {
    padding: 0 !important;
    display: block;
}

ul.cart-list > li img {
    width: 50px;
    height: 50px;
    border: solid 1px #efefef;
}

ul.cart-list > li > p > a {
    padding: 0;
}

ul.cart-list > li .price {
    font-weight: bold;
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    font-size: 14px;
}

ul.cart-list > li > p {
    margin-bottom: 0;
}

ul.cart-list > li.total {
    padding: 10px;
    color: #fff;
    width: 100%;
}

ul.cart-list > li.total > .btn-cart {
    border: 1px solid;
    padding: 5px 15px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
}

ul.cart-list > li.total > .btn-cart:hover {
    background: #fff;
    border-color: #fff;
}



/*
==========================================
    03. Slider
==========================================
*/

.header-slider {
    color: #fff;
    cursor: crosshair;
}

.header-single-slider figure {
    position: relative;
    display: inline-block;
}

.header-single-slider figure img {
    display: block;
    margin: 0;
}

.header-single-slider .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    padding: 0 15px;
    z-index: 1;
}

.header-single-slider .content:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png) repeat;
    z-index: -1;
}

.header-single-slider .container.inner-content {
    width: 50%;
    margin-left: 100px;
}

.header-single-slider .container.inner-content.text-center {
    margin: 0 auto;
}

.header-single-slider .container.inner-content.text-right {
    margin-right: -200px;
}

.header-slider h1,
.header-slider p {
    margin-bottom: 30px;
}

.header-slider p {
    color: #fff;
}

.header-slider .owl-nav {
    display: block;
}

.header-slider .owl-next,
.header-slider .owl-prev {
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: url(../img/owlbtn.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    top: 50%;
    -webkit-transition: .7s;
    transition: .7s;
}

.header-slider .owl-next:hover,
.header-slider .owl-prev:hover {
    background: url(../img/owlbtn-hover.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #fff;
}

.header-slider .owl-prev {
    left: -200px;
    visibility: hidden;
}

.header-slider:hover .owl-prev {
    left: 50px;
    visibility: visible;
}

.header-slider .owl-next {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    right: -200px;
    visibility: hidden;
}

.header-slider:hover .owl-next {
    right: 50px;
    visibility: visible;
}



/*
==========================================
    04. Features List
==========================================
*/

#features.section-padding-top {
    padding: 95px 0 0;
}

#features-list {
    margin-top: -80px;
    margin-top: -80px;
    margin-top: -80px;
    margin-top: -5rem;
    margin-bottom: 50px;
}

.features-list-item {
    padding: 36px 30px;
    box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    background: #fff;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.features-list-item:hover {
    margin-top: -15px;
    box-shadow: 0px 15px 16px 0px rgba(0, 0, 0, 0.08);
}

.features-list-item .icon i {
    font-size: 32px;
}

.features-list-item .icon {
    display: inline-block;
    margin-right: 20px;
    padding-bottom: 10px;
}

.features-list-item h4 {
    display: inline-block;
}

.features-list-item p {
    font-weight: 500;
    margin-bottom: 5px;
}

.view-more {
    position: relative;
}

.view-more:after {
    position: absolute;
    content: '\eb55';
    font-family: 'icoFont';
    top: 0px;
    margin-left: 5px;
}




/*
==========================================
    05. Call Out
==========================================
*/

.call-out {
    border-radius: 6px;
    background: url(../img/join_team_bg.jpg) no-repeat center / 100% 100%;
    color: #fff;
    padding: 50px 80px;
    position: relative;
    z-index: 1;
}

.call-out:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    opacity: 0.949;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
    z-index: -1;
}

.call-out p {
    color: #fff;
}


/*
==========================================
    06. Portfolio
==========================================
*/

.sorting-btn {
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    padding: 12px 68px;
    border-bottom: 2px solid;
    margin: 0 auto;
    margin-bottom: 30px;
    width: 50%;
}

.sorting-btn li {
    cursor: pointer;
    padding: 0px 12px;
    padding: 0px 12px;
    padding: 0px 12px;
    padding: 0rem .75rem;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 0;
    padding-right: 5px;
    display: inline-block;
}

.portfolio figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 15px !important;
}

.portfolio figure img {
    display: block;
    margin: 0;
}

.portfolio figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    padding: 0 15px;
}

.portfolio figcaption h4,
.portfolio figcaption p {
    margin-bottom: -20px;
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
}

.portfolio figcaption p {
    font-size: 12px;
}

.portfolio figcaption .view-more {
    color: #fff
}

.portfolio figcaption img {
    margin: 10px auto 0;
}

.portfolio-masonary figure:hover figcaption {
    opacity: 0.905;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.portfolio figure:hover figcaption h4,
.portfolio figure:hover figcaption p {
    margin-bottom: 5px;
}



/*
==========================================
    07. Features
==========================================
*/

.features-item {
    border-radius: 6px;
    color: #fff;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.features-item:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: rgb(35, 48, 73);
    opacity: 0.902;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    z-index: -1;
}

.item-1 {
    background: url(../img/homepage/features/features01.jpg) no-repeat center / cover;
}


.item-2 {
    background: url(../img/homepage/features/features02.jpg) no-repeat center / cover;
}


.item-3 {
    background: url(../img/homepage/features/features03.jpg) no-repeat center / cover;
}


.item-4 {
    background: url(../img/homepage/features/features04.jpg) no-repeat center / cover;
}

.features-item i {
    font-size: 30px;
    margin-bottom: 20px;
    display: block;
    -webkit-transition: .3s;
    transition: .3s;
}

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

.features-item p {
    color: #fff;
}

.features-item:before {
    content: '';
    position: absolute;
    bottom: -0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0px;
    height: 4px;
    -webkit-transition: .3s;
    transition: .3s;
}

.features-item:hover.features-item:before {
    width: 130px;
}


/*
==========================================
    08. Services
==========================================
*/

.services-item {
    padding: 50px 15px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    -webkit-transition: .3s all;
    transition: .3s all;
}

.services-item:hover {
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
}

.services-item .service-icon {
    margin-bottom: 20px;
    position: relative;
}

.service-icon i {}

.services-item .service-icon img,
.services-item .service-icon i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 50px;
}




.services-item h4 {
    margin-bottom: 5px;
    -webkit-transition: .3s;
    transition: .3s;
}


/*
==========================================
    09. fun-fact
==========================================
*/

#fun-fact {
    background: url(../img/homepage/background/factbg.jpg) no-repeat center / cover;
    padding: 40px 0;
    color: #fff;
    position: relative;
    z-index: 1;
}

#fun-fact:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    opacity: 0.949;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
    z-index: -1;
}

#fun-fact i {
    font-size: 40px;
    padding-bottom: 10px;
    display: block;
}

#fun-fact strong {
    font-size: 30px;
}

#fun-fact p {
    color: #fff;
}


/*
==========================================
    10. Our Team
==========================================
*/

.team-member {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.member-social {
    width: 100%;
    background: #fff;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    top: -50%;
    left: 0;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 1;
}

.member-social li {
    display: inline-block;
}

.member-social li a {
    display: block;
    padding: 0 5px;
}

.member-title {
    padding: 22px 20px;
}

.member-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 1;
}

.member-title h4 {
    -webkit-transition: .3s;
    transition: .3s;
}

.member-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 2px;
    -webkit-transition: .3s;
    transition: .3s;
}

.member-title:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 31px solid;
    border-right: 31px solid transparent;
    -webkit-transition: .3s;
    transition: .3s;
}

.team-member:hover .member-social {
    top: 0;
}

.inner-bio {
    padding: 0 15px;
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .3s;
    transition: .3s;
    visibility: hidden;
}

.team-member:hover .inner-bio {
    top: -8%;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
}



/*
==========================================
    11.Testimonial
==========================================
*/

#testimonial .owl-nav {
    display: none;
}

#testimonial .owl-stage-outer {
    overflow-x: visible;
    overflow-y: visible;
}

#testimonial .container {
    overflow: hidden;
}

#testimonial .owl-dots {
    width: 125px;
    margin: 0 auto;
    margin-top: 60px;
    display: inline-block;
    text-align: center;
}

#testimonial .owl-dot {
    width: 20px;
    height: 6px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
}

.single-testimonial {
    border-radius: 6px;
    padding: 0 30px 30px;
}

.single-testimonial h4 {
    position: relative;
}

.single-testimonial p {
    color: #fff;
}

.single-testimonial img {
    margin-top: -15px;
    border: 5px solid #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-bottom: 14px;
    box-shadow: 0px 0px 2px 0px rgba(7, 7, 6, 0.2);
}

p.title {
    margin-bottom: 12px;
}

.single-testimonial h4:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 20px;
    margin-left: -30px;
}


/*
==========================================
    12.Subscribe
==========================================
*/

#subscribe {
    background: url(../img/homepage/background/subscribebg.jpg) no-repeat center / cover;
    padding: 50px 0;
    color: #fff;
    position: relative;
    z-index: 1;
}


#subscribe:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    opacity: 0.949;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
    z-index: -1;
}

#subscribe i {
    font-size: 54px;
    margin-right: 30px;
    margin-top: 5px;
}

#subscribe p {
    color: #fff;
}

input#subscribe-mail {
    border-radius: 4px;
    height: 54px;
    box-shadow: inset 0px 0px 15px 0px rgba(53, 54, 60, 0.2);
    padding: 20px;
    border: none;
    width: 70%;
    margin-right: 30px;
    margin-top: 10px;
}

.subscribe-btn {
    border: none;
    cursor: pointer;
}




/*
==========================================
    13. Pricing
==========================================
*/

#pricing {
    background: #f9f9f9;
}

.pricing-table {
    overflow: hidden;
}

#pricing .prcing-head {
    text-align: center;
    padding: 30px 0 50px;
    color: #fff;
    border-radius: 10px;
}

#pricing .price {
    font-size: 46px;
    font-weight: 500;
    text-align: center;
    padding: 30px 0 20px;
    background: #fff;
    border-radius: 10px 10px 0 0;
    margin-top: -20px;
    position: relative;
}

#pricing .price:after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 56px;
    border-radius: 0 0 10px 10px;
    background: #fff;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    z-index: 2;
    overflow: hidden;
}

#pricing .price span {
    font-size: 14px;
}

#pricing .features {
    border-radius: 10px;
    position: relative;
    padding: 60px 40px 30px;
    z-index: 1;
    background: url(../img/homepage/pricing/pricingbg.png) no-repeat center / cover;
}

#pricing .features:after {
    border-radius: 10px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    z-index: -1;
}

#pricing .features li {
    color: #fff;
    margin-bottom: 15px;
}

#pricing .features li:last-child {
    margin-bottom: 30px;
}

#pricing .features li i {
    margin-right: 30px;
    font-size: 18px;
}

#pricing .boxed-btn {
    font-size: 16px;
}

#pricing .features .boxed-btn i {
    padding-right: 10px;
    margin-left: 0;
}




/*
==========================================
    14. Recent Blog
==========================================
*/

#recent-blog {
    background: #f9f9f9;
    padding-bottom: 60px;
}

#recent-blog .blog-post {
    box-shadow: 0px 0px 6px 0px rgba(59, 62, 72, 0.2);
    background: #fff;
    overflow: hidden;
    -webkit-transition: .3s;
    transition: .3s;
}

#recent-blog .blog-post:hover {
    box-shadow: 0px 20px 20px 0px rgba(59, 62, 72, 0.1);
}

#recent-blog .post-thumbnail {
    position: relative;
    z-index: 1;
}

#recent-blog .post-thumbnail:after {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .3s;
    transition: .3s;
}

#recent-blog .blog-post:hover .post-thumbnail:after {
    top: 0;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

#recent-blog .meta-info.list-inline {
    position: absolute;
    bottom: -20px;
    left: 0;
    padding-left: 20px;
    padding-bottom: 20px;
    z-index: 22;
    color: #f9f9f9;
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#recent-blog .blog-post:hover .meta-info.list-inline {
    bottom: 0;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#recent-blog .meta-info.list-inline:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 5px;
    height: 100px;
    background: #fff;
}

#recent-blog .meta-info.list-inline li a {
    color: #f9f9f9;
}

#recent-blog .post-content {
    padding: 30px 30px;
}

#recent-blog .post-content-inner {
    padding-bottom: 20px;
}

#recent-blog .post-content .post-title a {
    font-size: 18px;
    font-weight: 400;
    color: #385573;
    margin-bottom: 20px;
    display: block;
    -webkit-transition: .3s;
    transition: .3s;
}

#recent-blog .read-more-link {
    position: relative;
    font-size: 14px;
    -webkit-transition: .3s;
    transition: .3s;
}

#recent-blog .read-more-link i {
    margin-left: 5px;
}

#recent-blog .read-more-link:after {
    position: absolute;
    content: '\f064';
    font-family: 'fontAwesome';
    top: 0px;
    margin-left: 5px;
}



/*
==========================================
    15. Contact Form
==========================================
*/

#contact-area {
    background: #f9f9f9;
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.contact-box {
    width: 60%;
    margin: 0 auto;
    padding: 40px 0;
    background: #fff;
    box-shadow: 0px 2px 20px 0px rgba(59, 62, 72, 0.12);
    margin-top: -180px;
}

.contact-us-info {
    color: #fff;
    padding: 50px 40px;
}

.contact-us-info h3 {
    font-family: 'Poppins';
    margin-bottom: 30px;
    position: relative;
}

.contact-us-info h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 4px;
    margin-right: -40px;
    margin-bottom: -20px;
}

.contact-info li p {
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px;
}

.contact-info li i {
    font-size: 24px;
    color: #fff;
    float: left;
    margin: 5px 20px 10px 0;
}

.live-chat {
    border: 1px solid #fff;
    background: transparent;
    margin-top: 10px;
}

.live-chat.boxed-btn:hover {
    color: #fff;
}

.get-in-touch {
    padding: 40px;
    padding-right: 70px;
}

.get-in-touch h3 {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
}

.get-in-touch p {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 30px;
}

.get-in-touch input,
.get-in-touch textarea {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid;
    margin-bottom: 24px;
}

.form-control:focus {
    border: 0;
    border-bottom: 1px solid;
    box-shadow: none;
}

.get-in-touch input::-webkit-input-placeholder,
.get-in-touch textarea::-webkit-input-placeholder {
    font-size: 14px;
    font-weight: 300;
}

button.boxed-btn {
    border: 0;
    cursor: pointer;
}

.get-in-touch .boxed-btn {
    margin-top: 20px;
}

#map {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}



/*
==========================================
    16. footer-copyright
==========================================
*/

#footer-copyright {
    padding: 13px 0;
}

#footer-copyright p {
    color: #fff;
}


/* Scroll Up */

.scrollup {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    text-align: center;
    line-height: 48px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    color: #fff;
    z-index: 888;
    -webkit-transition: .3s;
    transition: .3s;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .5)
}

.scrollup:hover {
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5)
}

/*
===================================================================================
    02. About us page
===================================================================================
*/

/*-----------------------------------
    01. BreadCrumb Area CAREERS
------------------------------------*/

#breadcrumb-area {
    background: url(../img/banner_1.jpg) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav li {
    display: inline-block;
}

.breadcrumb-nav li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}


/*-----------------------------------
    02. BreadCrumb Area CONTACT
------------------------------------*/

#breadcrumb-area2 {
    background: url(../img/banner_2.jpg) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area2:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area2 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav2 li {
    display: inline-block;
}

.breadcrumb-nav2 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav2 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav2 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}


/*-----------------------------------
    03. BreadCrumb Area SERVICES
------------------------------------*/

#breadcrumb-area3 {
    background: url(../img/banner_3.jpg) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area3:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area3 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav3 li {
    display: inline-block;
}

.breadcrumb-nav3 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav3 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav3 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}


/*-----------------------------------
    04. BreadCrumb Area ABOUT
------------------------------------*/

#breadcrumb-area4 {
    background: url(../img/banner_4.jpg) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area4:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area4 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav4 li {
    display: inline-block;
}

.breadcrumb-nav4 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav4 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav4 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}


/*-----------------------------------
    05. BreadCrumb Area CASE STUDIES
------------------------------------*/

#breadcrumb-area5 {
    background: url(../img/adminbackground.png) no-repeat center / cover;
    position: relative;
    padding: 30px 0 70px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area5:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0%;
    height: 0%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area5 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav5 li {
    display: inline-block;
}

.breadcrumb-nav5 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav5 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav5 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}


/*-----------------------------------
    06. BreadCrumb Area NEWS
------------------------------------*/

#breadcrumb-area6 {
    background: url(../img/adminbackground.png) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area6:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area6 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav6 li {
    display: inline-block;
}

.breadcrumb-nav6 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav6 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav6 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}

/*-----------------------------------
    07. BreadCrumb Area STREETWORKS
------------------------------------*/

#breadcrumb-area7 {
    background: url(../img/bloghead.jpg) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area7:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area7 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav7 li {
    display: inline-block;
}

.breadcrumb-nav7 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav7 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav7 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}


/*-----------------------------------
    08. BreadCrumb Area HIGH SPEED
------------------------------------*/

#breadcrumb-area8 {
    background: url(../img/header_bg.jpg.jpg) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area8:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area8 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav8 li {
    display: inline-block;
}

.breadcrumb-nav8 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav8 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav8 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}


/*-----------------------------------
    12. BreadCrumb Area Testimonials
------------------------------------*/

#breadcrumb-area12 {
    background: url(../img/testimonials.jpg) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area12:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area12 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav12 li {
    display: inline-block;
}

.breadcrumb-nav12 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav12 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav12 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}



/*-----------------------------------
    09. BreadCrumb Area EVENTS
------------------------------------*/

#breadcrumb-area9 {
    background: url(../img/header_bg.jpg.jpg) no-repeat center / cover;
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
}

#breadcrumb-area9:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    z-index: -1;
}

#breadcrumb-area9 h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.breadcrumb-nav9 li {
    display: inline-block;
}

.breadcrumb-nav9 li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
}

.breadcrumb-nav9 li.active {
    font-size: 16px;
    color: #fff;
}

.breadcrumb-nav9 li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}


/*-----------------------------------
    02. About us info
------------------------------------*/

#about-us .section-header {
    position: relative;
    margin-left: 30px;
}

#about-us .section-header {
      margin-bottom: 20px;
}

#about-us .section-header h2:after {
    top: 14%;
    right: 160px;
}

#about-us .section-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: -30px;
    width: 10px;
    height: 60px;
    display: inline-block;
}

#about-us .section-info {
    margin-bottom: 40px;
}

.video-section {
    background: url(../img/aboutus/video-bg.jpg) no-repeat center / cover;
    position: relative;
    z-index: 1;
    height: 500px;
    width: 100%;
}

.video-section:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    z-index: -1;
}

.video-section .play-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: .5s;
    transition: .5s;
}

.video-section .play-icon:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.watch-more {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.watch-more a {
    color: #fff;
}


/*-----------------------------------
    03. Our Skill
------------------------------------*/

.skill-item {
    background: url(../img/aboutus/skillbg01.jpg) no-repeat center / cover;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    padding: 50px;
}

.skill-item:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    z-index: -1;
}

.skill-item h3 {
    color: #fff;
    margin-bottom: 5px;
}

.skill-item p.title {
    margin-bottom: 20px;
}

.skill-item p {
    color: #fff
}

.skill-progess {
    display: block;
}

.skill-progess .label {
    display: inline-block;
    color: #fff;
    float: left;
    margin-right: 30px;
}

.progress {
    width: 70%;
    height: 6px;
    background: #fff;
    margin-top: 10px;
    margin-bottom: 20px;
    float: left;
}

a.view-details {
    color: #fff;
}



/*-----------------------------------
    04. Our Client
------------------------------------*/

#our-client .container {
    overflow: hidden;
}

#our-client.section-padding {
    padding: 110px 0 90px;
}

.client-carousel .owl-nav {
    display: none;
}

.client-carousel .owl-stage-outer {
    overflow: visible;
}

.single-client {
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    height: 120px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    cursor: crosshair;
}

.inner-client {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.inner-client:after {
    content: '';
    position: absolute;
    bottom: -0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    -webkit-transition: .3s;
    transition: .3s;
}

.single-client:hover .inner-client:after {
    width: 150px;
}

.inner-client:after {
    background: #888;
}



/*
===================================================================================
    03. Service Page
===================================================================================
*/

#service-page .service-icon {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 10px;
    background: #f3f3f3;
    margin: 0 auto 20px;
}

.servicepage-item .service-icon i {
    font-size: 50px;
    line-height: 100px;
}

.servicepage-item h4 {
    font-weight: 500;
    margin-bottom: 5px;
}

.servicepage-item p {
    margin-bottom: 10px;
}

.servicepage-item a {
    font-weight: 500;
}



/*
===================================================================================
    04. Portfolio Pages
===================================================================================
*/

/*-----------------------------------
    01. Portfolio styles
------------------------------------*/

.portfolio-page {
    padding: 80px 0 0;
}

.portfolio-page.masonary {
    padding-bottom: 80px;
}

.portfolio-page .sorting-btn {
    margin-bottom: 80px;
}

.portfolio-item {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
}

.portfolio-page figure {
    margin-bottom: 0 !important;
}

.portfolio-page.masonary figure {
    margin-bottom: 15px !important;
}

.portfolio-page .content {
    background: #fff;
    padding: 15px 15px;
    margin-top: -6px;
}

.portfolio-page .content h4 {
    margin-top: 0;
    display: inline-block;
    margin-bottom: 10px;
    -webkit-transition: .3s;
    transition: .3s;
}

.portfolio-page .content p {
    margin-bottom: 10px;
    font-size: 14px;
}

.portfolio-page .content a {
    font-size: 14px;
}

.portfolio-item:hover figcaption {
    opacity: .95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


/* Pagination*/

.pagination {
    margin: 30px auto 0;
}

.pagination a.page-link {
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
}

.pagination li.page-item.more-page a.page-link,
.pagination li.page-item.active a.page-link,
.pagination a.page-link:hover {
    color: #fff;
    border-color: #fff;
}

#blog-content .pagination {
    margin: 0 auto 0;
}

nav.portfolio-pagination {
    margin: 0;
}



/*-----------------------------------
    02. Excluesive
------------------------------------*/

.single-exclusive {
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
    margin: 4px 0;
}

.exclusive-content {
    padding: 30px 20px;
}

.exclusive-content h5 {
    display: inline-block;
}

.exclusive-content i {
    float: right;
    margin-top: 5px;
}

#exclusive .owl-dots {
    width: 120px;
    height: 100%;
    margin: 60px auto 0;
    text-align: center;
}

#exclusive .owl-dot {
    width: 20px;
    height: 6px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}




/*
===================================================================================
    05. Gallery Page
===================================================================================
*/

.gallery-load {
    display: none;
}

.gallery-item {
    position: relative;
}

.gallery-item figure img {
    display: block;
    margin: 0;
}

.gallery-item figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    padding: 0 15px;
}

.gallery-item figcaption h4,
.portfolio figcaption p {
    margin-bottom: -20px;
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
}

.gallery-item figcaption p {
    font-size: 12px;
    color: #f9f9f9;
}

.gallery-item figcaption img {
    margin: 0 auto 20px;
}

.gallery-item figure:hover figcaption {
    opacity: .90;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.gallery-item figure:hover figcaption h4,
.gallery-item figure:hover figcaption p {
    margin-bottom: 10px;
}

.gallery-popup {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 20px;
    color: #fff;
}

.load-btn {
    padding: 15px 35px;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    margin: 60px auto 0;
    -webkit-transition: .3s;
    transition: .3s;
}

.load-btn:hover {
    background: #444;
    color: #fff;
}

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

.load-btn i {
    margin-right: 8px;
}

.gallery-item img {
    width: 100%;
}

.gallery-item figcaption img {
    max-width: 15%;
}




/*
===================================================================================
    06. Blog Pages
===================================================================================
*/

#blog-content {
    padding: 80px 0;
}

#blog-content article.blog-post {
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    background: #fff;
    margin-bottom: 80px;
}

#blog-content article.blog-post:last-child {
    margin-bottom: 0;
}

#blog-content .post-content {
    padding: 30px 60px;
}

#blog-content .post-title a {
    font-size: 18px;
    display: block;
    font-weight: 500;
    margin-bottom: 16px;
    -webkit-transition: .3s;
    transition: .3s;
}

#blog-content .post-content {
    border-bottom: 1px solid #d3d6db;
}

.post-content .content {
    font-size: 14px;
    margin-bottom: 16px;
}

#blog-content .post-content .continue-reading {
    font-size: 14px;
}

#blog-content ul.meta-info {
    padding: 15px 60px;
}

#blog-content ul.meta-info li {
    display: inline-block;
    margin-right: 30px;
    font-size: 14px;
}

#blog-content ul.meta-info li i {
    margin-right: 10px;
}



/* Post Thumbnail Effects */

.blog-post .post-thumb {
    position: relative;
    float: left;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
    margin-bottom: 36px;
}

.blog-post .post-thumb img {
    max-width: 100%;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

.blog-post .post-thumb .post-overlay {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    position: absolute;
}

.blog-post .post-thumb .post-overlay a {
    color: #fff;
}

.blog-post .post-thumb .post-overlay a i {
    font-size: 50px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    top: 50%;
    position: relative;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    display: inline-block;
}

.blog-post .post-thumb .post-overlay a i {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

.blog-post .post-thumb .post-overlay:before {
    position: absolute;
    top: 30px;
    right: 50%;
    bottom: 30px;
    left: 50%;
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    content: '';
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    background-color: #ffffff;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.single-blog-area .blog-post:hover .post-thumb img {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.blog-post:hover .post-thumb img {
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}

.blog-post:hover .post-thumb .post-overlay i {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.blog-post:hover .post-thumb .post-overlay i {
    -webkit-transform: translate3d(-25%, -50%, 0);
    transform: translate3d(-25%, -50%, 0);
}

.blog-post:hover .post-thumb .post-overlay:before {
    background: rgba(255, 255, 255, 0);
    left: 30px;
    right: 30px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}


/*
===================================================================================
    07. Single Blog Page
===================================================================================
*/

.single-blog-area ul.meta-info {
    border-bottom: 1px solid #d3d6db;
}

.single-blog-area .post-title {
    font-size: 18px;
    display: block;
    font-weight: 500;
    margin-bottom: 16px;
}

.single-blog-area .tag-share {
    padding: 10px 60px;
    border-bottom: 1px solid #d3d6db;
}

.tag-share ul.tags li a {
    margin-bottom: 0;
}

.single-blog-area ul.share-icon li {
    display: inline-block;
}

.single-blog-area ul.share-icon li a {
    display: block;
    padding: 5px 10px;
    font-size: 14px;
}

.single-blog-area ul.share-icon {
    text-align: right;
}

.post-comment-area .comment-author a {
    font-size: 16px;
    font-weight: 500;
}

.post-comment-area .comment {
    font-size: 14px;
}

.post-comment-area .media {
    border-bottom: 1px solid #d3d6db;
    padding: 30px 60px;
}

.post-comment-area .media-left {
    padding-right: 30px;
}

.post-new-comment {
    padding: 80px 60px;
}

.post-new-comment input,
.post-new-comment textarea {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid;
}

.post-new-comment .boxed-btn {
    margin-top: 30px;
}

.boxed-btn:hover {
    color: #fff;
    background: #444;
}



/*
===================================================================================
    08. Contact Us Page
===================================================================================
*/

#contact-us-page {
    padding: 80px 0 180px;
}

.office {
    border-radius: 6px;
    box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 30px;
    -webkit-transition: .3s;
    transition: .3s;
}

.office:hover {
    box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.08);
}

.office .icon {
    font-size: 32px;
    display: inline-block;
    float: left;
    margin-right: 20px;
}

.office h4 {
    margin-bottom: 20px;
}

.office ul li {
    font-size: 14px;
    font-weight: 500;
}

.office ul {
    margin-bottom: 20px;
}

ul.contact-social {
    margin-bottom: 0;
}

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

ul.contact-social li a {
    display: block;
    padding-right: 15px;
}



/*
===================================================================================
    09. 404 page
===================================================================================
*/

#wrapper-404 {
    position: relative;
    height: 500px;
}

#wrapper-404 .inner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 1;
}

#wrapper-404 .inner-content img {
    width: 200px;
}

#wrapper-404 .inner-content h1 {
    font-size: 70px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 5px;
}

#wrapper-404 .inner-content p {
    font-size: 18px;
    margin-bottom: 26px;
}





/* Rich Text Content Styles - Add this to your css/style.css */

/* Content wrapper for rich text areas */
.rich-content {
    line-height: 1.6;
    color: #333;
    font-size: 16px;
}

/* Headings */
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}

.rich-content h1 { font-size: 2.5em; color: #2c3e50; }
.rich-content h2 { font-size: 2em; color: #2c3e50; }
.rich-content h3 { font-size: 1.75em; color: #34495e; }
.rich-content h4 { font-size: 1.5em; color: #34495e; }
.rich-content h5 { font-size: 1.25em; color: #34495e; }
.rich-content h6 { font-size: 1.1em; color: #34495e; }

/* Paragraphs */
.rich-content p {
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Lists */
.rich-content ul,
.rich-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.rich-content ul {
    list-style-type: disc;
}

.rich-content ol {
    list-style-type: decimal;
}

.rich-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.rich-content ul ul,
.rich-content ol ol,
.rich-content ul ol,
.rich-content ol ul {
    margin: 0.5em 0;
}

/* Links */
.rich-content a {
    color: #3071a9;
    text-decoration: none;
}

.rich-content a:hover {
    color: #245682;
    text-decoration: underline;
}

/* Text formatting */
.rich-content strong,
.rich-content b {
    font-weight: 600;
}

.rich-content em,
.rich-content i {
    font-style: italic;
}

.rich-content u {
    text-decoration: underline;
}

.rich-content strike,
.rich-content s {
    text-decoration: line-through;
}

/* Block quotes */
.rich-content blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid #3071a9;
    background-color: #f8f9fa;
    font-style: italic;
}

.rich-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Code */
.rich-content code {
    background-color: #f8f9fa;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.rich-content pre {
    background-color: #f8f9fa;
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1em 0;
}

.rich-content pre code {
    background: none;
    padding: 0;
}

/* Tables */
.rich-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
    border: 1px solid #ddd;
}

.rich-content th,
.rich-content td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}

.rich-content th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.rich-content tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Images */
.rich-content img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    border-radius: 4px;
}

/* Horizontal rules */
.rich-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2em 0;
}

/* Text alignment classes */
.rich-content .text-left { text-align: left; }
.rich-content .text-center { text-align: center; }
.rich-content .text-right { text-align: right; }
.rich-content .text-justify { text-align: justify; }

/* Color classes that TinyMCE might use */
.rich-content .text-red { color: #dc3545; }
.rich-content .text-green { color: #28a745; }
.rich-content .text-blue { color: #007bff; }
.rich-content .text-yellow { color: #ffc107; }
.rich-content .text-orange { color: #fd7e14; }
.rich-content .text-purple { color: #6f42c1; }

/* Background colors */
.rich-content .bg-yellow { background-color: #fff3cd; padding: 0.2em 0.4em; }
.rich-content .bg-green { background-color: #d4edda; padding: 0.2em 0.4em; }
.rich-content .bg-blue { background-color: #cce5ff; padding: 0.2em 0.4em; }
.rich-content .bg-red { background-color: #f8d7da; padding: 0.2em 0.4em; }



/* ========================================
   Dynamic Background Image System
   Add this to the end of your css/style.css file
======================================== */

/* Enhanced dynamic breadcrumb styling */
.dynamic-breadcrumb {
    background-attachment: scroll; /* Default - can be overridden by inline styles */
    position: relative;
    padding: 250px 0 150px;
    color: #f9f9f9;
    z-index: 1;
    min-height: 400px;
}

/* Dark overlay for better text readability */
.dynamic-breadcrumb:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Adjust opacity as needed */
    z-index: 1;
}

/* Ensure text stays above overlay */
.dynamic-breadcrumb .container {
    position: relative;
    z-index: 2;
}

/* Pattern overlay (existing) */
.dynamic-breadcrumb:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/img/pattern.png);
    z-index: 1;
    opacity: 0.3; /* Make pattern more subtle */
}

/* Text shadow for better readability */
.dynamic-breadcrumb h1,
.dynamic-breadcrumb .breadcrumb-nav {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.dynamic-breadcrumb h1 {
    color: #f9f9f9;
    margin-bottom: 20px;
}

.dynamic-breadcrumb .breadcrumb-nav li {
    display: inline-block;
}

.dynamic-breadcrumb .breadcrumb-nav li a {
    display: block;
    padding-right: 8px;
    font-size: 16px;
    position: relative;
    color: #f9f9f9;
}

.dynamic-breadcrumb .breadcrumb-nav li.active {
    font-size: 16px;
    color: #fff;
}

.dynamic-breadcrumb .breadcrumb-nav li a:after {
    content: "\f101";
    font-family: "Fontawesome";
    font-size: 12px;
    margin-left: 10px;
}

/* Animation effects */
.dynamic-breadcrumb h1 {
    animation: fadeInUp 1s ease-out;
}

.dynamic-breadcrumb .breadcrumb-nav {
    animation: fadeInUp 1s ease-out 0.3s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typing animation for page headers */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* Apply animation to the page heading */
.dynamic-breadcrumb h1 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 3.5s steps(30, end);
    max-width: 100%; /* Ensure it doesn't overflow its container */
    text-align: center;
}

/* Center the heading text */
.dynamic-breadcrumb .text-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dynamic-breadcrumb {
        padding: 150px 0 100px;
        min-height: 300px;
    }
    
    /* Disable parallax on mobile for performance */
    .dynamic-breadcrumb[style*="background-attachment: fixed"] {
        background-attachment: scroll !important;
    }
    
    .dynamic-breadcrumb h1 {
        font-size: 22px; /* Smaller font size on mobile */
        width: auto; /* Let width adjust based on content */
        animation: typing 3s steps(25, end); /* Slightly faster animation on mobile */
    }
}

@media (max-width: 576px) {
    .dynamic-breadcrumb {
        padding: 120px 0 80px;
        min-height: 250px;
    }
    
    .dynamic-breadcrumb h1 {
        font-size: 20px;
        width: 100%; /* Full width of parent container */
        padding: 0 10px; /* Add some padding */
    }
    
    .dynamic-breadcrumb .text-center {
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (max-width: 400px) {
    .dynamic-breadcrumb h1 {
        font-size: 18px; /* Even smaller font on very small screens */
    }
}

/* Content section styling */
.page-content-section {
    padding: 50px 0;
}

.page-content-section .content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
    .dynamic-breadcrumb:before {
        background: rgba(0, 0, 0, 0.6);
    }
    
    .dynamic-breadcrumb h1,
    .dynamic-breadcrumb .breadcrumb-nav {
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    }
}

/* Special effects for different background types */
.dynamic-breadcrumb.blur-effect {
    background-attachment: fixed;
}

.dynamic-breadcrumb.blur-effect:before {
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.2);
}


/* ========================================
   ENHANCED PAGE BUILDER & IMAGE STYLES
   Add this to the end of your css/style.css file
======================================== */

/* Rich Text Content Styles - Enhanced */
.rich-content {
    line-height: 1.6;
    color: #333;
    font-size: 16px;
}

/* Enhanced Image Classes */
.rich-content .img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.rich-content .float-left {
    float: left;
    margin: 0 20px 20px 0;
    max-width: 50%;
}

.rich-content .float-right {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 50%;
}

.rich-content .center-image {
    display: block;
    margin: 20px auto;
    text-align: center;
}

.rich-content .full-width-image {
    width: 100%;
    height: auto;
    margin: 20px 0;
}

.rich-content .rounded-image {
    border-radius: 8px;
    overflow: hidden;
}

.rich-content .circle-image {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

.rich-content .shadow-image {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.rich-content .shadow-image:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Layout Classes for Page Builder */
.rich-content .two-columns,
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

.rich-content .three-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
}

.rich-content .image-text-block {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.rich-content .image-text-block img {
    flex-shrink: 0;
    max-width: 200px;
    border-radius: 6px;
}

.rich-content .callout-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #007bff;
    padding: 25px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rich-content .callout-box h3 {
    margin-top: 0;
    color: #007bff;
}

/* Button Elements */
.button-element {
    display: inline-block;
    padding: 12px 24px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 10px 0;
}

.button-element:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    color: white;
    text-decoration: none;
}

.button-element:active {
    transform: translateY(0);
}

/* Image gallery grid */
.rich-content .image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.rich-content .image-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.rich-content .image-gallery img:hover {
    transform: scale(1.05);
}

/* Hero section with background image */
.rich-content .hero-section {
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    margin: 30px 0;
    border-radius: 12px;
    overflow: hidden;
}

.rich-content .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.rich-content .hero-section .hero-content {
    position: relative;
    z-index: 2;
    padding: 40px;
}

.rich-content .hero-section h2 {
    color: white;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.rich-content .hero-section p {
    color: white;
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Card layouts */
.rich-content .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.rich-content .card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rich-content .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.rich-content .card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.rich-content .card-content {
    padding: 20px;
}

.rich-content .card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #2c3e50;
}

/* Before/After image comparison */
.rich-content .before-after {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.rich-content .before-after .divider {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    text-align: center;
}

.rich-content .before-after img {
    width: 100%;
    border-radius: 6px;
}

/* Enhanced Text Styles */
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}

.rich-content h1 { font-size: 2.5em; color: #2c3e50; }
.rich-content h2 { font-size: 2em; color: #2c3e50; }
.rich-content h3 { font-size: 1.75em; color: #34495e; }
.rich-content h4 { font-size: 1.5em; color: #34495e; }
.rich-content h5 { font-size: 1.25em; color: #34495e; }
.rich-content h6 { font-size: 1.1em; color: #34495e; }

.rich-content p {
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Enhanced Lists */
.rich-content ul,
.rich-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.rich-content ul {
    list-style-type: disc;
}

.rich-content ol {
    list-style-type: decimal;
}

.rich-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

/* Enhanced Links */
.rich-content a {
    color: #3071a9;
    text-decoration: none;
    transition: color 0.3s ease;
}

.rich-content a:hover {
    color: #245682;
    text-decoration: underline;
}

/* Enhanced Tables */
.rich-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.rich-content th,
.rich-content td {
    border: 1px solid #ddd;
    padding: 12px 16px;
    text-align: left;
}

.rich-content th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
}

.rich-content tr:nth-child(even) {
    background-color: #f9f9f9;
}

.rich-content tr:hover {
    background-color: #f0f7ff;
}

/* Enhanced Block Quotes */
.rich-content blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid #3071a9;
    background-color: #f8f9fa;
    font-style: italic;
    position: relative;
}

.rich-content blockquote::before {
    content: '"';
    font-size: 4em;
    color: #3071a9;
    position: absolute;
    top: -10px;
    left: 10px;
    opacity: 0.3;
}

.rich-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Enhanced Code Blocks */
.rich-content code {
    background-color: #f8f9fa;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #e83e8c;
}

.rich-content pre {
    background-color: #f8f9fa;
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1em 0;
    border: 1px solid #e1e4e8;
}

.rich-content pre code {
    background: none;
    padding: 0;
    color: #333;
}

/* Utility Classes */
.rich-content .text-center { text-align: center; }
.rich-content .text-left { text-align: left; }
.rich-content .text-right { text-align: right; }
.rich-content .text-justify { text-align: justify; }

/* Color Classes */
.rich-content .text-primary { color: #007bff; }
.rich-content .text-secondary { color: #6c757d; }
.rich-content .text-success { color: #28a745; }
.rich-content .text-danger { color: #dc3545; }
.rich-content .text-warning { color: #ffc107; }
.rich-content .text-info { color: #17a2b8; }

/* Background Highlight Classes */
.rich-content .bg-highlight-yellow { 
    background-color: #fff3cd; 
    padding: 0.2em 0.4em; 
    border-radius: 3px;
}

.rich-content .bg-highlight-green { 
    background-color: #d4edda; 
    padding: 0.2em 0.4em; 
    border-radius: 3px;
}

.rich-content .bg-highlight-blue { 
    background-color: #cce5ff; 
    padding: 0.2em 0.4em; 
    border-radius: 3px;
}

.rich-content .bg-highlight-red { 
    background-color: #f8d7da; 
    padding: 0.2em 0.4em; 
    border-radius: 3px;
}

/* Spacing Utilities */
.rich-content .mb-small { margin-bottom: 10px; }
.rich-content .mb-medium { margin-bottom: 20px; }
.rich-content .mb-large { margin-bottom: 40px; }

.rich-content .mt-small { margin-top: 10px; }
.rich-content .mt-medium { margin-top: 20px; }
.rich-content .mt-large { margin-top: 40px; }

/* Responsive Image Adjustments */
@media (max-width: 768px) {
    .rich-content .two-columns,
    .rich-content .three-columns,
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .rich-content .image-text-block {
        flex-direction: column;
        text-align: center;
    }
    
    .rich-content .image-text-block img {
        max-width: 100%;
    }
    
    .rich-content .float-left,
    .rich-content .float-right {
        float: none;
        margin: 20px auto;
        display: block;
        max-width: 100%;
    }
    
    .rich-content .before-after {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .rich-content .before-after .divider {
        order: 1;
        margin: 10px 0;
    }
    
    .rich-content h1 { font-size: 2em; }
    .rich-content h2 { font-size: 1.75em; }
    .rich-content h3 { font-size: 1.5em; }
    
    .rich-content .hero-section {
        min-height: 200px;
    }
    
    .rich-content .hero-section .hero-content {
        padding: 20px;
    }
    
    .rich-content .card-grid {
        grid-template-columns: 1fr;
    }
}

/* Print Styles */
@media print {
    .rich-content .shadow-image,
    .rich-content .card {
        box-shadow: none !important;
    }
    
    .rich-content .hero-section::before {
        background: rgba(0, 0, 0, 0.2);
    }
    
    .rich-content .button-element {
        border: 1px solid #333;
        background: transparent !important;
        color: #333 !important;
    }
}

/* Animation Classes */
.rich-content .fade-in {
    animation: fadeIn 1s ease-in;
}

.rich-content .slide-up {
    animation: slideUp 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Enhanced Focus States for Accessibility */
.rich-content a:focus,
.rich-content .button-element:focus {
    outline: 2px solid #80bdff;
    outline-offset: 2px;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .rich-content .callout-box {
        border-left-width: 6px;
    }
    
    .rich-content .shadow-image {
        border: 2px solid #333;
    }
    
    .rich-content .card {
        border: 1px solid #333;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .rich-content .shadow-image,
    .rich-content .card,
    .rich-content .button-element {
        transition: none;
    }
    
    .rich-content .fade-in,
    .rich-content .slide-up {
        animation: none;
    }
}