@charset "UTF-8";

/*-----------------------------------------------------------------------------------

    Template Name: Conebrick – A Masterly HTML Template for Construction
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01. Theme default CSS
    02. Header CSS
    03. Hero CSS
    04. Work CSS
    05. Parallax CSS
    06. About CSS
    07. Feature CSS
    08. Project CSS
    09. Funfact CSS
    10. Service CSS
    11. Team CSS
    12. CTA CSS
    13. Testimonial CSS
    14. Get In Touch CSS
    15. Mission CSS
    16. FAQ CSS
    17. Visit CSS
    18. Cost Calculator CSS
    19. Maintenance CSS
    20. Coming Soon CSS
    21. 404 CSS
    22. History CSS
    23. Achievements CSS
    24. Pricing CSS
    25. Product CSS
    26. Cart CSS
    27. Checkout CSS
    28. My Account CSS
    29. Portfolio Details CSS
    30. Typography CSS
    31. List CSS
    32. Chart CSS
    33. Blog CSS
    34. Comment CSS
    35. Sidebar CSS
    36. Brand CSS
    37. Contact CSS
    38. Footer CSS

-----------------------------------------------------------------------------------*/


/*----------------------------------------*/


/*  01. Theme default CSS
/*----------------------------------------*/


/*-- Google Font --*/

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:400,500,700");

/*-- Common Style --*/

*,
*::after,
*::before {
    box-sizing: border-box;
}

html,
body,
.site-wrapper {
    height: 100%;
}

body {
    background-color: #ffffff;
    font-size: 16px;
    line-height: 28px;
    font-style: normal;
    font-weight: normal;
    visibility: visible;
    font-family: "Roboto", sans-serif;
    color: #878c9b;
    position: relative;
}

body[data-rtl=rtl] {
    direction: rtl;
    text-align: right;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto Condensed", sans-serif;
    color: #063544;
    font-weight: 700;
    margin-top: 0;
    line-height: 1.5;
}

h1 {
    font-size: 36px;
}

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 32px;
    }
}

@media only screen and (max-width: 575px) {
    h1 {
        font-size: 30px;
    }
}

h2 {
    font-size: 32px;
}

@media only screen and (max-width: 767px) {
    h2 {
        font-size: 26px;
    }
}

@media only screen and (max-width: 575px) {
    h2 {
        font-size: 24px;
    }
}

h3 {
    font-size: 24px;
}

@media only screen and (max-width: 767px) {
    h3 {
        font-size: 22px;
    }
}

@media only screen and (max-width: 575px) {
    h3 {
        font-size: 20px;
    }
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p:last-child {
    margin-bottom: 0;
}

a,
button {
    color: inherit;
    display: inline-block;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

a,
button,
img,
input,
span {
    transition: all 0.3s ease 0s;
}

*:focus {
    outline: none !important;
}

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

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

button,
input[type=submit] {
    cursor: pointer;
}

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

img {
    max-width: 100%;
}


/*-- 
    - Common Classes
-----------------------------------------*/

.mh-0 {
    min-height: 0px;
}

@media only screen and (max-width: 767px) {
    .margin-m-5 {
        margin-bottom: -5px;
    }
}

.fix {
    overflow: hidden;
}

.hidden {
    display: none;
}

.clear {
    clear: both;
}

.section,
.main-wrapper {
    float: left;
    width: 100%;
}

.tooltip-inner {
    font-size: 16px;
    background-color: #000;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
    .row-five-column>[class*=col-xl-] {
        max-width: 20%;
        flex: 0 0 20%;
    }
}

@media only screen and (max-width: 575px) {
    .container {
        max-width: 530px;
    }
}

@media only screen and (max-width: 479px) {
    .container {
        max-width: 430px;
    }
}

.no-gutters {
    margin-left: 0;
    margin-right: 0;
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
    margin: 0 !important;
}

#scrollUp {
    background: #222;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 100%;
    bottom: 25px;
    right: 25px;
    color: #fff;
    text-align: center;
    font-size: 25px;
    transition: all 0.3s ease-in-out;
}

#scrollUp:hover {
    background: #EB8021;
}


/*-- 
    - Input Placeholder
-----------------------------------------*/

input:-moz-placeholder,
textarea:-moz-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


/*--
    - Background Color
------------------------------------------*/

.bg-white {
    background-color: #ffffff !important;
}

.bg-gray {
    background-color: #F8F9FC !important;
}

.bg-gray-gredient {
    background: linear-gradient(top, #F3F5FA 0, #FFF 37%);
}

.bg-gray-two {
    background-color: #f3f4fa !important;
}

.bg-gray-three {
    background-color: #eee !important;
}

.bg-dark {
    background-color: #063544 !important;
}

.bg-black {
    background-color: #031d26 !important;
}

.bg-orange {
    background-color: #f29600 !important;
}

.bg-theme {
    background-color: #EB8021 !important;
}


/*-- 
    - Tab Content & Pane Fix
------------------------------------------*/

.tab-content {
    width: 100%;
}

.tab-content .tab-pane {
    display: block;
    height: 0;
    max-width: 100%;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
}

.tab-content .tab-pane.active {
    height: auto;
    visibility: visible;
    opacity: 1;
    overflow: visible;
}


/*-- 
    - Main Wrapper
------------------------------------------*/


/*-- 
    - Section Title
------------------------------------------*/

.section-title.color-white h1 {
    color: #ffffff;
    max-width: 287px;
}

.section-title.blue-color span {
    color: #EB8021;
}

.section-title.red-color span {
    color: #D52600;
}

.section-title.orange-color span {
    color: #FF7D00;
}

.section-title.orange-color h1 {
    max-width: 100% !important;
}

.section-title.orange-color p {
    max-width: 570px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    margin: auto;
}

.section-title.max-width h1 {
    max-width: 370px;
}

.section-title.max-width-2 h1 {
    max-width: 287px;
}

.section-title.f-32 h1 {
    font-size: 32px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-title.f-32 h1 {
        font-size: 28px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title.f-32 h1 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .section-title.f-32 h1 {
        font-size: 24px;
    }
}

.section-title span {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
    color: #EB8021;
    font-family: "Roboto Condensed", sans-serif;
}

.section-title h1 {
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    padding-top: 15px;
    padding-bottom: 20px;
    margin: 0;
}

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

.section-title p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 670px;
    margin: auto;
}

.section-title.text-center {
    text-align: center;
    background-position: top center;
}

.section-title.text-center p {
    margin-left: auto;
    margin-right: auto;
}

.section-title.text-start {
    text-align: left;
    background-position: top left;
}

.section-title.text-start p {
    margin-left: 0;
    margin-right: auto;
}

.section-title.text-end {
    text-align: right;
    background-position: top right;
}

.section-title.text-end p {
    margin-left: auto;
    margin-right: 0;
}


/*-- 
    - Button
------------------------------------------*/

.button-group h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
}

.button-group .spacing {
    height: 30px;
}

.button-size {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 767px) {
    .button-size {
        flex-wrap: wrap;
    }
    .button-size .btn {
        margin-bottom: 15px;
    }
}

.btn {
    background-color: #EB8021;
    color: #ffffff;
    font-size: 14px;
    line-height: 55px;
    height: 56px;
    font-weight: 700;
    padding: 0 40px;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease 0s;
}

.btn.white-btn {
    background-color: #ffffff;
    color: #063544;
}

.btn:focus {
    box-shadow: none;
    outline: none;
}

.btn.blue-color {
    background-color: #EB8021;
}

.btn.red-color {
    background-color: #D52600;
}

.btn.orange-color {
    background-color: #FF7D00;
}

.btn.hove-orange-color:hover {
    background-color: #FF7D00;
}

.btn.color-black {
    background-color: #063544;
}

.btn.color-black:hover {
    background-color: #EB8021;
}

.btn.color-green {
    background-color: #7ed221;
}

.btn.color-green:hover {
    background-color: #417505;
}

.btn.btn-lg-size {
    padding: 0 47px;
    height: 66px;
    line-height: 66px;
}

.btn.btn-sd-size {
    padding: 0 40px;
    height: 56px;
    line-height: 58px;
}

.btn.btn-sm-size {
    padding: 0 30px;
    height: 46px;
    font-size: 14px;
    line-height: 46px;
}

.btn.btn-xs-size {
    padding: 0 20px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
}

.btn.color-gradient {
    background: linear-gradient(left, #FFCA29 0, #C78C5F 100%);
    color: #fff;
    border: 0 none;
}

.btn.border {
    background-color: transparent;
    border: 2px solid #dddddd !important;
    color: #063544;
}

.btn.border:hover {
    background-color: #EB8021;
    border-color: #EB8021 !important;
}

.btn.border-yellow {
    background-color: transparent;
    border: 2px solid #EB8021 !important;
    color: #063544;
}

.btn.border-yellow:hover {
    background-color: #EB8021;
    border-color: #EB8021 !important;
}

.btn.border-white {
    background-color: transparent;
    border: 2px solid #ffffff !important;
    color: #063544;
}

.btn.border-white:hover {
    background-color: #EB8021;
    border-color: #EB8021 !important;
}

.btn:hover {
    background-color: #063544;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .btn {
        font-size: 14px;
        line-height: 23px;
        height: 45px;
        padding: 10px 25px;
    }
    .btn:hover::before {
        left: 6px;
        top: 6px;
    }
    .btn:hover::after {
        left: -6px;
        top: -6px;
    }
}


/*-------------------------------
    Video Button 
--------------------------------*/

.video-popup {
    margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
    .video-popup {
        margin-bottom: 20px;
    }
}

.video-popup a {
    width: 94px;
    height: 94px;
    line-height: 94px;
    text-align: center;
    display: block;
    font-size: 25px;
    border-radius: 100%;
    background-color: #EB8021;
    color: #ffffff;
}

.video-popup a i {
    margin-left: 4px;
}


/*-------------------------------
    Filter Button 
--------------------------------*/

.filter-menu {
    text-align: center;
}

.filter-menu.text-start ul li button:first-child {
    padding-left: 0;
}

.filter-menu.red-color ul li button span.filter-text::after {
    background-color: #D52600;
}

.filter-menu ul li {
    display: inline-block;
}

.filter-menu ul li button {
    position: relative;
    display: block;
    padding: 10px 15px 0;
    font-size: 15px;
    line-height: 1;
    color: #ffffff;
    border: 0 none;
    background-color: transparent;
}

.filter-menu ul li button span.filter-text {
    padding: 10px 0 3px;
    position: relative;
    text-transform: capitalize;
}

.filter-menu ul li button span.filter-text::after {
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -10px;
    left: 0;
    content: "";
    display: block;
    background-color: #EB8021;
    opacity: 0;
    visibility: visible;
    transition: all 0.3s ease-in-out;
}

.filter-menu ul li button span.filter-counter {
    position: absolute;
    bottom: 0px;
    left: 50%;
    visibility: hidden;
    margin: 0 auto;
    min-width: 34px;
    height: 24px;
    line-height: 27px;
    border-radius: 3px;
    font-size: 12px;
    background-color: #063544;
    color: #ffffff;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 0);
}

.filter-menu ul li button span.filter-counter::before {
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid #063544;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
}

.filter-menu ul li button:hover span.filter-counter {
    bottom: 23px;
    opacity: 1;
    visibility: visible;
}

.filter-menu ul li button.is-checked {
    color: #063544;
}

.filter-menu ul li button.is-checked span.filter-text::after {
    bottom: 0;
    opacity: 1;
    visibility: visible;
}

.filter-menu ul li:hover>button {
    color: #063544;
}

.filter-menu ul li:hover>button span.filter-text::after {
    bottom: 0;
    opacity: 1;
    visibility: visible;
}


/*-- 
    - breadcrumb Section
------------------------------------------*/

.breadcrumb-section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

.breadcrumb-section::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #031d26;
    opacity: 0.75;
    z-index: -1;
}


/*-- Breadcrumb Title --*/

.breadcrumb-title h2 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: none;
    color: #EB8021;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .breadcrumb-title h2 {
        text-align: center;
        margin-bottom: 15px;
    }
}


/*-- Page Breadcrumb --*/

.page-breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
    .page-breadcrumb {
        justify-content: center;
    }
}

.page-breadcrumb li {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    line-height: 18px;
}

@media only screen and (max-width: 575px) {
    .page-breadcrumb li {
        font-size: 16px;
    }
}

.page-breadcrumb li::after {
    font-family: FontAwesome;
    content: "";
    padding: 0 15px;
}

.page-breadcrumb li:last-child::after {
    display: none;
}

.page-breadcrumb li a:hover {
    color: #EB8021;
}


/*-- 
    - Page Pagination
------------------------------------------*/


/*-- Page Banner --*/

.page-banner-section {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 267px;
    padding-bottom: 187px;
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .page-banner-section {
        padding-top: 247px;
        padding-bottom: 167px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .page-banner-section {
        padding-top: 237px;
        padding-bottom: 157px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .page-banner-section {
        padding-top: 227px;
        padding-bottom: 147px;
    }
}

@media only screen and (max-width: 767px) {
    .page-banner-section {
        padding-top: 217px;
        padding-bottom: 137px;
    }
}

.page-banner-section::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #031d26;
    opacity: 0.75;
    z-index: -1;
}


/*page pagination*/

.page-pagination>ul {
    text-align: center;
    padding-top: 20px;
    margin-bottom: 40px;
}

.page-pagination>ul>li {
    display: inline-block;
    list-style: none;
    margin-right: 5px;
}

.page-pagination>ul>li:last-child {
    margin-right: 0px;
}

.page-pagination>ul>li>a {
    background: #fff;
    border: 1px solid #eeeeee;
    color: #878c9b;
    font-size: 16px;
    display: block;
    font-weight: normal;
    height: 41px;
    line-height: 41px;
    min-width: 41;
    text-align: center;
    width: 41px;
    border-radius: 5px;
}

.page-pagination>ul>li>a>i {
    font-size: 14px;
    line-height: 43px;
}

.page-pagination>ul>li.active>a,
.page-pagination>ul>li>a:hover {
    background: #EB8021;
    border-color: #EB8021;
    color: #ffffff;
}

.grid-filter {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.grid-filter button {
    background-color: transparent;
    color: #063544;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    margin: 0 10px 10px;
    text-transform: capitalize;
    line-height: 1;
    padding-bottom: 5px;
    position: relative;
}

.grid-filter button::before {
    content: "";
    height: 6px;
    width: 0;
    position: absolute;
    left: 0;
    bottom: 4px;
    background-color: #EB8021;
    z-index: -1;
    transition: all 0.3s ease 0s;
}

.grid-filter button:hover::before,
.grid-filter button.active::before {
    width: 100%;
}

.grid-filter.center {
    justify-content: center;
}

.grid-filter.center button {
    margin: 0 10px 10px;
}

.grid-filter.left {
    justify-content: flex-start;
}

.grid-filter.left button {
    margin-left: 0;
    margin-right: 20px;
    margin-bottom: 10px;
}

.grid-filter.left button:last-child {
    margin-right: 0;
}

.grid-filter.right {
    justify-content: flex-end;
}

.grid-filter.right button {
    margin-left: 20px;
    margin-right: 0;
    margin-bottom: 10px;
}

.grid-filter.right button:last-child {
    margin-left: 0;
}

.slick-slider.red-color .slick-arrow:hover {
    background-color: #D52600;
}

.slick-slider.red-color .slick-dots li.slick-active button {
    background-color: #D52600;
    border-color: #D52600;
}

.slick-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    border: none;
    color: white;
    padding: 10px;
    width: 60px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.slick-slider .slick-arrow i {
    font-size: 16px;
    line-height: 20px;
    display: block;
}

.slick-slider .slick-arrow.slick-prev {
    left: -15px;
    border-radius: 0 5px 5px 0;
}

.slick-slider .slick-arrow.slick-next {
    right: -15px;
    border-radius: 5px 0 0 5px;
}

.slick-slider .slick-arrow:hover {
    background-color: #EB8021;
}

.slick-slider .slick-dots {
    width: 100%;
    padding: 0;
    margin: 55px 0 0;
    display: flex;
    justify-content: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slick-slider .slick-dots {
        margin: 30px 0 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slick-slider .slick-dots {
        margin: 25px 0 0;
    }
}

@media only screen and (max-width: 767px) {
    .slick-slider .slick-dots {
        margin: 25px 0 0;
    }
}

.slick-slider .slick-dots li {
    margin: 0 5px;
}

.slick-slider .slick-dots li button {
    display: block;
    padding: 0;
    width: 13px;
    height: 13px;
    border: 3px solid rgba(130, 135, 150, 0.2);
    background-color: transparent;
    text-indent: -9999px;
    border-radius: 100%;
}

.slick-slider .slick-dots li.slick-active button {
    background-color: #EB8021;
    border-color: #EB8021;
}

.gallery-item {
    position: relative;
}

.gallery-item::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #063544;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

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

.gallery-item .plus {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3;
    opacity: 0;
}

.gallery-item .plus::before,
.gallery-item .plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #ffffff;
    transition: all 0.3s ease 0s;
}

.gallery-item .plus::before {
    width: 150px;
    height: 1px;
}

.gallery-item .plus::after {
    width: 1px;
    height: 150px;
}

.gallery-item:hover::before {
    opacity: 0.75;
}

.gallery-item:hover .plus {
    opacity: 1;
}

.gallery-item:hover .plus::before {
    width: 40px;
}

.gallery-item:hover .plus::after {
    height: 40px;
}

blockquote.blockquote {
    background-color: #f1f2f3;
    padding: 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

blockquote.blockquote::before {
    position: absolute;
    content: url(../images/icons/quote-left.html);
    left: -5px;
    top: -10px;
    z-index: -1;
    opacity: 0.07;
}

blockquote.blockquote p {
    font-size: 18px;
    font-style: italic;
}

blockquote.blockquote .author {
    font-size: 14px;
    display: block;
    line-height: 18px;
}


/*=========================================
    Google Map Area css
=========================================*/

#htmap {
    width: 100%;
    height: 400px;
}

.gmap-marker-wrap {
    padding: 20px;
}

.gmap-marker-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 14px;
}

.gmap-marker-content {
    font-size: 14px;
}

.gmap-marker-content i {
    font-size: 15px;
    margin-right: 5px;
    color: #EB8021;
}

.animated-dot {
    width: 100%;
    height: 100%;
    left: -9px;
    top: -5px;
    position: relative;
    background-color: #EB8021;
}

.animated-dot.blue-color {
    background-color: #EB8021;
}

.animated-dot.blue-color .middle-dot {
    background-color: #EB8021;
}

.animated-dot.blue-color .middle-dot::after {
    background-color: #ffffff;
}

.animated-dot.blue-color .signal {
    background-color: #EB8021;
}

.animated-dot.blue-color .signal2 {
    background-color: #EB8021;
}

.animated-dot .middle-dot {
    width: 12px;
    height: 12px;
    border-radius: 30px;
    position: absolute;
    left: 2px;
    top: 2px;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    background-color: #EB8021;
}

.animated-dot .middle-dot:after {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    content: " ";
    background-color: #ffffff;
    border-radius: 30px;
    z-index: 100;
    opacity: 0;
    animation: animationSignal2 cubic-bezier(0, 0.55, 0.55, 1) 2s;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 0.78s;
    animation-iteration-count: infinite;
}

.animated-dot .signal {
    width: 180px;
    pointer-events: none;
    height: 180px;
    border-radius: 200px;
    position: absolute;
    left: -80px;
    top: -80px;
    opacity: 0;
    animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2s;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 0.78s;
    animation-iteration-count: infinite;
    background-color: #EB8021;
}

.animated-dot .signal2 {
    width: 180px;
    height: 180px;
    pointer-events: none;
    border-radius: 200px;
    position: absolute;
    left: -80px;
    top: -80px;
    opacity: 0;
    animation: animationSignal cubic-bezier(0, 0.55, 0.55, 1) 2s;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    background-color: #EB8021;
}

@keyframes animationSignal {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    1% {
        opacity: 0.25;
    }
    20% {
        opacity: 0.25;
    }
    60% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes animationSignal2 {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 0.2;
    }
    20% {
        opacity: 0.17;
    }
    60% {
        opacity: 0;
    }
}


/*----------------------------------------*/


/*  02. Header CSS
/*----------------------------------------*/

header.header {
    background-color: #ffffff;
    position: relative;
}

header.is-sticky {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 5px 10px rgba(16, 19, 30, 0.1);
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: slideInDown;
    animation-duration: 0.5s;
}

header.is-sticky .header-top {
    display: none;
}

header.is-sticky .header-middle {
    display: none;
}

header.is-sticky .header-transparent-inner {
    background-color: #ffffff;
    box-shadow: 0 5px 10px rgba(16, 19, 30, 0.1);
}

header.is-sticky .header-transparent-inner .header-bm-color {
    background-color: #ffffff;
}

header.is-sticky .header-transparent-inner .header-bm-color .logo-none {
    display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    header.is-sticky .header-transparent-inner .header-bm-color .logo-none {
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    header.is-sticky .header-transparent-inner .header-bm-color .logo-none {
        text-align: center;
    }
}

header.is-sticky .header-transparent-inner .header-bm-color .main-menu.color-white>ul>li>a {
    color: #063544;
    padding: 27px 15px;
}

header.is-sticky .header-transparent-inner .header-bm-color .main-menu.color-white>ul>li>a>span::after {
    top: 30%;
}

header.is-sticky .header-transparent-inner .header-bm-color .header-top-social.color-white a {
    color: #063544;
}

header.is-sticky .header-transparent-inner .header-bm-color-dark {
    background-color: #ffffff;
}

header.is-sticky .header-transparent-inner .header-bm-color-dark .logo-none {
    display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    header.is-sticky .header-transparent-inner .header-bm-color-dark .logo-none {
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    header.is-sticky .header-transparent-inner .header-bm-color-dark .logo-none {
        text-align: center;
    }
}

header.is-sticky .header-transparent-inner .header-bm-color-dark .main-menu.color-white>ul>li>a {
    color: #063544;
    padding: 27px 15px;
}

header.is-sticky .header-transparent-inner .header-bm-color-dark .main-menu.color-white>ul>li>a>span::after {
    top: 30%;
}

header.is-sticky .header-transparent-inner .header-bm-color-dark .header-top-social.color-white a {
    color: #063544;
}

header.is-sticky.header-style-five {
    background-color: #ffffff;
}

header.is-sticky.header-style-five .header-bottom .logo .non-sticky {
    display: none;
}

header.is-sticky.header-style-five .header-bottom .logo .sticky {
    display: block;
}

header.is-sticky.header-style-five .header-bottom .main-menu>ul>li>a {
    color: #063544;
}

header.is-sticky.header-style-five .header-bottom .header-cart>a {
    color: #063544;
}

header.is-sticky.header-style-five .header-bottom .header-search button {
    color: #063544;
}

header.is-sticky.header-logo-change {
    background-color: #ffffff;
}

header.is-sticky.header-logo-change .header-bottom .logo .non-sticky {
    display: none;
}

header.is-sticky.header-logo-change .header-bottom .logo .sticky {
    display: block;
}

header.is-sticky.header-logo-change .header-bottom .main-menu>ul>li>a {
    color: #063544;
}

header.is-sticky.header-logo-change .header-bottom .header-cart>a {
    color: #063544;
}

header.is-sticky.header-logo-change .header-bottom .header-search button {
    color: #063544;
}

header.is-sticky .main-menu.color-white>ul>li a>span::before {
    background-color: #EB8021;
}

header.is-sticky .main-menu.color-white>ul>li.active>a,
header.is-sticky .main-menu.color-white>ul>li:hover>a {
    color: #EB8021 !important;
}

header.is-sticky .main-menu.color-white-2>ul>li a {
    color: #063544;
}

header.is-sticky .main-menu.color-white-2>ul>li a>span::before {
    background-color: #FF7D00;
}

header.is-sticky .main-menu.color-white-2>ul>li.active>a,
header.is-sticky .main-menu.color-white-2>ul>li:hover>a {
    color: #FF7D00 !important;
}

.header-transparent {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
}

.header-transparent-inner {
    background-color: transparent;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 9;
}

.header-transparent-inner .header-bm-color {
    background: #EB8021;
    border-radius: 0 0 5px 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-transparent-inner .header-bm-color {
        padding: 20px 0;
    }
}

@media only screen and (max-width: 767px) {
    .header-transparent-inner .header-bm-color {
        padding: 20px 0;
    }
}

.header-transparent-inner .header-bm-color-dark {
    background: #063544;
    border-radius: 0 0 5px 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-transparent-inner .header-bm-color-dark {
        padding: 20px 0;
    }
}

@media only screen and (max-width: 767px) {
    .header-transparent-inner .header-bm-color-dark {
        padding: 20px 0;
    }
}

.header-style-five .header-bottom .logo .non-sticky {
    display: block;
}

.header-style-five .header-bottom .logo .sticky {
    display: none;
}

.header-logo-change .header-bottom .logo .non-sticky {
    display: block;
}

.header-logo-change .header-bottom .logo .sticky {
    display: none;
}


/*-- Header Top --*/

.header-top {
    height: 46px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .header-top {
        height: auto;
    }
}

.header-top>.container>.row>.col {
    flex-grow: 0;
    display: flex;
}

.header-top>.container>.row>.col:first-child {
    flex-grow: 1;
    flex-wrap: wrap;
}

@media only screen and (max-width: 767px) {
    .header-top>.container>.row>.col {
        flex: 1 0 100%;
        justify-content: center;
        margin: 0;
    }
    .header-top>.container>.row>.col:first-child {
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .header-top>.container>.row>.col:last-child {
        margin-bottom: 10px;
    }
}


/*-- Header Top Links --*/

.header-top-links.blue-color ul li {
    border-color: rgba(238, 238, 238, 0.2);
}

.header-top-links.blue-color ul li:last-child {
    border-color: rgba(238, 238, 238, 0.2);
}

.header-top-links.blue-color ul li i {
    color: #EB8021;
}

.header-top-links.red-color ul li {
    color: #ffffff;
}

.header-top-links.red-color ul li i {
    color: #D52600;
}

.header-top-links.white-color ul li {
    color: #ffffff;
}

.header-top-links.white-color ul li i {
    color: #EB8021;
}

.header-top-links ul {
    display: flex;
}

@media only screen and (max-width: 767px) {
    .header-top-links ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.header-top-links ul li {
    font-size: 13px;
    line-height: 46px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    color: #ffffff;
    border-left: 1px solid #eeeeee;
}

.header-top-links ul li:last-child {
    border-right: 1px solid #eeeeee;
}

@media only screen and (max-width: 767px) {
    .header-top-links ul li {
        flex-wrap: wrap;
        border-left: 0;
        line-height: 26px;
    }
    .header-top-links ul li:last-child {
        border-right: 0;
    }
}

.header-top-links ul li i {
    margin-right: 6px;
    font-size: 16px;
    line-height: 46px;
    float: left;
    padding-top: 0px;
    color: #EB8021;
    vertical-align: middle;
}

@media only screen and (max-width: 767px) {
    .header-top-links ul li i {
        line-height: 26px;
    }
}

.header-top-links ul li a {
    display: block;
}

@media only screen and (max-width: 479px) {
    .header-top-links ul li {
        font-size: 12px;
        margin-right: 10px;
        text-align: center;
    }
    .header-top-links ul li:last-child {
        margin-right: 0;
    }
}


/*-- Header Top Social --*/

.header-top-social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 16px;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
}

@media only screen and (max-width: 767px) {
    .header-top-social {
        border-left: 0;
        border-right: 0;
    }
}

.header-top-social a {
    color: #063544;
    margin-left: 15px;
    font-size: 16px;
    display: block;
    line-height: 1;
}

.header-top-social a:first-child {
    margin-left: 0;
}

.header-top-social a:hover {
    color: #EB8021;
}

.header-top-social.color-white {
    padding-right: 0;
    border: 0;
}

.header-top-social.color-white a {
    color: #ffffff;
    margin: 0 10px;
}

.header-top-social.blue-color {
    border-color: rgba(238, 238, 238, 0.2);
}

.header-top-social.blue-color a {
    color: #ffffff;
}

.header-top-social.blue-color a:hover {
    color: #EB8021;
}

.header-top-social.red-color a {
    color: #ffffff;
}

.header-top-social.red-color a:hover {
    color: #D52600;
}

.header-top-social.white-color a {
    color: #ffffff;
}

.header-top-social.white-color a:hover {
    color: #EB8021;
}


/*-- Header Middle --*/

@media only screen and (max-width: 767px) {
    .header-middle .logo {
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .header-mid-right {
        flex-wrap: wrap;
        justify-content: center !important;
        padding-bottom: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-mid-right .header-search {
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .header-mid-right .header-search {
        margin-right: 0;
    }
}

.header-mid-right .header-cart {
    margin-left: 0px;
}

@media only screen and (max-width: 767px) {
    .header-mid-right .header-cart .shopping-cart {
        z-index: 9999;
        right: -165px;
    }
}

ul.header-info {
    margin-right: 110px;
}

ul.header-info.color-orange li .inner .icon i {
    color: #FF7D00;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    ul.header-info {
        margin-right: 10px;
    }
}

@media only screen and (max-width: 767px) {
    ul.header-info {
        margin-right: 0px;
        width: 100%;
    }
}

ul.header-info li {
    display: inline-block;
}

@media only screen and (max-width: 767px) {
    ul.header-info li {
        display: block;
    }
}

ul.header-info li+li {
    padding-left: 25px;
    margin-left: 25px;
    border-left: 1px solid rgba(238, 238, 238, 0.2);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    ul.header-info li+li {
        margin-left: 10px;
        padding-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    ul.header-info li+li {
        margin-left: 0px;
        padding-left: 0px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

ul.header-info li .inner {
    display: flex;
}

@media only screen and (max-width: 767px) {
    ul.header-info li .inner {
        flex-direction: column;
        text-align: center;
    }
}

ul.header-info li .inner .icon {
    line-height: 1;
}

ul.header-info li .inner .icon i {
    font-size: 16px;
    margin-right: 10px;
    color: #EB8021;
}

@media only screen and (max-width: 767px) {
    ul.header-info li .inner .icon i {
        font-size: 20px;
        margin-right: 0px;
        margin-bottom: 10px;
    }
}

ul.header-info li .inner .content>.text-lev1 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1;
    display: block;
    color: #063544;
}

@media only screen and (max-width: 767px) {
    ul.header-info li .inner .content>.text-lev1 {
        font-size: 14px;
    }
}

ul.header-info li .inner .content>.text-lev2 {
    font-size: 14px;
    line-height: 1;
}

@media only screen and (max-width: 767px) {
    ul.header-info li .inner .content>.text-lev2 {
        font-size: 12px;
    }
}


/*-- Header Bottom --*/

.header-bottom.menu-right>.container>.row {
    align-items: center;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-bottom.menu-right>.container>.row {
        align-items: inherit;
    }
}

@media only screen and (max-width: 767px) {
    .header-bottom.menu-right>.container>.row {
        align-items: inherit;
    }
}

.header-bottom.menu-right>.container>.row>.col {
    flex-grow: 0;
    position: static;
}

.header-bottom.menu-right>.container>.row>.col:first-child {
    flex-grow: 1;
}


/*-- Header Logo --*/

.logo a {
    display: inline-block;
}

.logo a img {
    max-width: 75%;
}

.logo-none {
    display: none;
}


/*-- Header Search --*/

.header-search {
    margin-left: 15px;
    display: flex;
    align-items: center;
    position: relative;
}

.header-search.red-color button {
    color: #ffffff;
}

.header-search.white-color button {
    color: #ffffff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-search {
        margin-left: 0;
        margin-right: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .header-search {
        margin-left: 0;
        margin-right: 30px;
    }
}

@media only screen and (max-width: 479px) {
    .header-search {
        margin-left: 0;
        margin-right: 30px;
    }
}

.header-search-toggle {
    background-color: transparent;
    border: none;
    color: #063544;
    padding: 0;
    line-height: 30px;
    width: 40px;
    height: 30px;
}

.header-search-toggle i {
    font-size: 15px;
}

.header-search-toggle.open i {
    font-size: 30px;
}


/*Main Search CSS*/

.main-search-active {
    background: rgba(0, 0, 0, 0.92) none repeat scroll 0 0;
    width: 100%;
    min-height: 100vh;
    padding: 32px 46px 39px;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    z-index: 9999;
    transition: all 0.5s ease-in-out;
}

@media only screen and (max-width: 767px) {
    .main-search-active {
        padding: 32px 20px 39px;
    }
}

.sidebar-search-icon {
    position: absolute;
    top: 50px;
    right: 70px;
    color: #ffffff;
    font-size: 60px;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    .sidebar-search-icon {
        right: 0;
    }
}

.sidebar-search-icon button {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    cursor: pointer;
    font-size: 50px;
    line-height: 1;
    padding: 0;
    transition: all 0.3s ease 0s;
}

.sidebar-search-input {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    display: inline-block;
    padding: 0 50px;
    width: 75%;
    text-align: center;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out 0.3s;
}

.sidebar-search-input.blue-color form .form-search input {
    color: #EB8021;
}

.sidebar-search-input.blue-color p {
    color: #EB8021;
}

.sidebar-search-input.red-color form .form-search input {
    color: #D52600;
}

.sidebar-search-input.red-color p {
    color: #D52600;
}

.sidebar-search-input.orange-color form .form-search input {
    color: #FF7D00;
}

.sidebar-search-input.orange-color p {
    color: #FF7D00;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .sidebar-search-input {
        padding: 0 10px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sidebar-search-input {
        padding: 0 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sidebar-search-input {
        padding: 0 10px;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar-search-input {
        padding: 0 10px;
        width: 100%;
    }
}

.sidebar-search-input form .form-search {
    position: relative;
}

.sidebar-search-input form .form-search input {
    padding: 10px 0;
    border: 0;
    border-bottom: 5px solid transparent;
    background-color: transparent;
    font-size: 200px;
    width: 100%;
    height: auto;
    color: #EB8021;
    transform: scale3d(0, 1, 1);
    transform-origin: 0 50%;
    transition: transform 0.3s;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .sidebar-search-input form .form-search input {
        font-size: 150px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sidebar-search-input form .form-search input {
        font-size: 120px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sidebar-search-input form .form-search input {
        font-size: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar-search-input form .form-search input {
        font-size: 50px;
    }
}

.sidebar-search-input form .form-search input::placeholder,
.sidebar-search-input form .form-search input::-webkit-input-placeholder,
.sidebar-search-input form .form-search input::-moz-placeholder,
.sidebar-search-input form .form-search input:-ms-input-placeholder,
.sidebar-search-input form .form-search input::placeholder {
    color: #EB8021;
}

.sidebar-search-input form .form-search button {
    background-color: transparent;
    border: medium none;
    color: #fff;
    font-size: 30px;
    padding: 0;
    position: absolute;
    right: 0;
    bottom: 10px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
}

.sidebar-search-input p {
    font-size: 90%;
    font-weight: bold;
    display: block;
    padding: 11px 0;
    text-align: right;
    opacity: 0;
    line-height: 1.6;
    color: #EB8021;
    transform: translate3d(0, 50px, 0);
    transition: opacity 0.4s, transform 0.4s;
}

@media only screen and (max-width: 767px) {
    .sidebar-search-input p {
        font-size: 14px;
    }
}

.main-search-active.inside {
    opacity: 1;
    visibility: visible;
    z-index: 9999999;
}

.main-search-active.inside .sidebar-search-input {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.main-search-active.inside .sidebar-search-input.blue-color input {
    border-bottom-color: #EB8021;
}

.main-search-active.inside .sidebar-search-input.red-color input {
    border-bottom-color: #D52600;
}

.main-search-active.inside .sidebar-search-input.orange-color input {
    border-bottom-color: #FF7D00;
}

.main-search-active.inside .sidebar-search-input input {
    transform: scale3d(1, 1, 1);
    transition: 0.5s ease-out 0.3s;
    border-bottom-color: #EB8021;
}

.main-search-active.inside .sidebar-search-input p {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/*Main Search CSS*/


/*-- Header Cart --*/

.header-cart {
    margin-left: 50px;
    display: flex;
    align-items: center;
    position: relative;
}

.header-cart.red-color>a {
    color: #ffffff;
}

.header-cart.white-color>a {
    color: #ffffff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-cart {
        margin-right: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .header-cart {
        margin-right: 20px;
    }
}

@media only screen and (max-width: 479px) {
    .header-cart {
        margin-right: 20px;
    }
}

.header-cart a {
    background-color: transparent;
    border: none;
    color: #063544;
    padding: 0;
    line-height: 1;
    position: relative;
}

.header-cart a i {
    font-size: 15px;
    margin-top: 2px;
}

.header-cart a span {
    position: absolute;
    right: -13px;
    top: -5px;
    text-align: center;
    font-size: 13px;
    line-height: 15px;
    font-weight: 700;
}

.header-cart .shopping-cart {
    position: absolute;
    top: 100%;
    z-index: 99;
    right: 0;
    display: none;
    overflow: auto;
    padding: 30px 20px 27px;
    max-height: 700px;
    width: 360px;
    border-bottom: 2px solid #EB8021;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

@media only screen and (max-width: 575px) {
    .header-cart .shopping-cart {
        width: 207px;
        padding: 30px 17px 27px;
    }
}

@media only screen and (max-width: 767px) {
    .header-cart .shopping-cart {
        width: 290px;
        right: -100px;
    }
}

.header-cart .shopping-cart .shop-inner ul.product-list {
    list-style: none outside;
    padding: 0;
    margin: 0;
    max-height: 340px;
    overflow-y: auto;
}

.header-cart .shopping-cart .shop-inner ul.product-list li {
    display: flex;
}

.header-cart .shopping-cart .shop-inner ul.product-list li .thumb {
    margin-right: 15px;
    flex-grow: 0;
}

@media only screen and (max-width: 767px) {
    .header-cart .shopping-cart .shop-inner ul.product-list li .thumb {
        margin-right: 8px;
    }
}

.header-cart .shopping-cart .shop-inner ul.product-list li .thumb a img {
    width: 80px;
}

.header-cart .shopping-cart .shop-inner ul.product-list li .content {
    position: relative;
    flex-grow: 1;
    padding-right: 20px;
}

.header-cart .shopping-cart .shop-inner ul.product-list li .content .inner h4 {
    margin-bottom: 0px;
    line-height: 20px;
}

.header-cart .shopping-cart .shop-inner ul.product-list li .content .inner h4 a {
    font-size: 14px;
    font-weight: 400;
    color: #878c9b;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.header-cart .shopping-cart .shop-inner ul.product-list li .content .inner h4 a:hover {
    color: #EB8021;
}

@media only screen and (max-width: 767px) {
    .header-cart .shopping-cart .shop-inner ul.product-list li .content .inner h4 a {
        font-size: 14px;
    }
}

.header-cart .shopping-cart .shop-inner ul.product-list li .content .inner .quatity span {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #878c9b;
}

.header-cart .shopping-cart .shop-inner ul.product-list li .content .delete-btn {
    position: absolute;
    right: 0;
    top: 4px;
    font-size: 18px;
    border: 0 none;
    background-color: transparent;
    color: #063544;
}

.header-cart .shopping-cart .shop-inner ul.product-list li .content .delete-btn:hover {
    color: #EB8021;
}

.header-cart .shopping-cart .shop-inner ul.product-list li+li {
    margin-top: 20px;
}

.header-cart .shopping-cart .footer {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #eee;
}

.header-cart .shopping-cart .footer .total {
    width: 100%;
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 700;
    color: #878c9b;
}

.header-cart .shopping-cart .footer .total span {
    font-weight: 600;
    color: #878c9b;
    padding-left: 3px;
}

.header-cart .shopping-cart .footer a.cart-btn {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    border-color: #EB8021;
    background-color: #EB8021;
    font-family: "Roboto", sans-serif;
    height: 55px;
    line-height: 53px;
    outline: none;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
    min-width: 176px;
    text-align: center;
    display: inline-block;
}

.header-cart .shopping-cart .footer a.cart-btn:hover {
    transform: translateY(-3px);
}

.header-cart .shopping-cart.blue-color {
    border-bottom: 2px solid #EB8021;
}

.header-cart .shopping-cart.blue-color .shop-inner ul li .content .inner h4 a:hover {
    color: #EB8021;
}

.header-cart .shopping-cart.blue-color .shop-inner ul li .content .delete-btn:hover {
    color: #EB8021;
}

.header-cart .shopping-cart.blue-color .footer a {
    background-color: #EB8021;
    border-color: #EB8021;
}

.header-cart .shopping-cart.red-color {
    border-bottom: 2px solid #D52600;
}

.header-cart .shopping-cart.red-color .shop-inner ul li .content .inner h4 a:hover {
    color: #D52600;
}

.header-cart .shopping-cart.red-color .shop-inner ul li .content .delete-btn:hover {
    color: #D52600;
}

.header-cart .shopping-cart.red-color .footer a {
    background-color: #D52600;
    border-color: #D52600;
}

.header-cart .shopping-cart.orange-color {
    border-bottom: 2px solid #FF7D00;
}

.header-cart .shopping-cart.orange-color .shop-inner ul li .content .inner h4 a:hover {
    color: #FF7D00;
}

.header-cart .shopping-cart.orange-color .shop-inner ul li .content .delete-btn:hover {
    color: #FF7D00;
}

.header-cart .shopping-cart.orange-color .footer a {
    background-color: #FF7D00;
    border-color: #FF7D00;
}


/*-- Main Menu --*/

.main-menu>ul {
    display: flex;
}

.main-menu>ul>li {
    position: relative;
}

.main-menu>ul>li>a {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 1.62px;
    font-family: "Roboto", sans-serif;
    color: #063544;
    display: block;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 18px;
    padding-right: 18px;
    position: relative;
    text-transform: capitalize;
}

.main-menu>ul>li>a>span {
    position: relative;
    padding-bottom: 10px;
}

.main-menu>ul>li>a>span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    height: 2px;
    width: 100%;
    background-color: #EB8021;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
}

.main-menu>ul>li>a>span::after {
    position: absolute;
    top: 35%;
    right: -15px;
    content: "";
    font-size: 13px;
    font-family: FontAwesome;
    transform: translate(0, -35%);
}

.main-menu>ul>li>a>i {
    margin-right: 3px;
    vertical-align: middle;
}

.main-menu>ul>li.has-dropdown>a::after {
    content: "";
    font-family: Fontawesome;
    line-height: 30px;
    margin-left: 3px;
}

.main-menu>ul>li.active>a,
.main-menu>ul>li:hover>a {
    color: #EB8021;
}

.main-menu>ul>li.active>a>span::before,
.main-menu>ul>li:hover>a>span::before {
    bottom: 0px;
    opacity: 1;
    visibility: visible;
}

.main-menu>ul>li:hover>.sub-menu {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    z-index: 99;
}

.main-menu>ul>li:hover>.mega-menu {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    z-index: 99;
}

.main-menu>ul>li:last-child .sub-menu {
    left: auto;
    right: 0;
}

.main-menu>ul>li:last-child .sub-menu .sub-menu .sub-menu {
    left: 100%;
    right: auto;
}

.main-menu>ul>li:last-child .sub-menu .sub-menu .sub-menu .sub-menu {
    left: auto;
    right: 100%;
}

.main-menu>ul>li:nth-last-child(-n+3) .sub-menu .sub-menu {
    left: auto;
    right: 100%;
}

.main-menu>ul>li:nth-last-child(-n+3) .sub-menu .sub-menu .sub-menu {
    left: 100%;
    right: auto;
}

.main-menu.color-white>ul>li>a {
    color: #ffffff;
    padding: 17px;
    font-size: 15px;
}

.main-menu.color-white>ul>li>a>span::after {
    top: 30%;
}

.main-menu.color-white>ul>li>a>span::before {
    background-color: #ffffff;
}

.main-menu.color-white-2>ul>li>a {
    color: #ffffff;
    padding: 17px;
    font-size: 15px;
}

.main-menu.color-white-2>ul>li>a>span::after {
    top: 30%;
}

.main-menu.color-white-2>ul>li>a>span::before {
    background-color: #FF7D00;
}

.main-menu.blue-color>ul>li a>span::before {
    background-color: #EB8021;
}

.main-menu.blue-color>ul>li.active>a,
.main-menu.blue-color>ul>li:hover>a {
    color: #EB8021;
}

.main-menu.red-color>ul>li>a {
    color: #ffffff;
}

.main-menu.red-color>ul>li>a>span::before {
    background-color: #D52600;
}

.main-menu.red-color>ul>li.active>a,
.main-menu.red-color>ul>li:hover>a {
    color: #D52600;
}


/*-- Sub Menu --*/

.sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 30px;
    padding: 20px 0;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-bottom: 2px solid #EB8021;
    transition: all 0.3s ease 0s;
    width: 270px;
    z-index: -99;
    opacity: 0;
    visibility: hidden;
}

.sub-menu li {
    margin-bottom: 5px;
    position: relative;
}

.sub-menu li:last-child {
    margin-bottom: 0;
}

.sub-menu li a {
    padding: 11px 30px;
    display: block;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 400;
    color: #878c9b;
}

.sub-menu li.has-dropdown>a::after {
    content: "";
    font-family: Fontawesome;
    line-height: 30px;
    float: right;
}

.sub-menu li.active>a {
    color: #EB8021;
}

.sub-menu li .sub-menu {
    left: 100%;
    top: 0;
    margin-left: 0;
}

.sub-menu li:hover>a {
    color: #EB8021;
}

.sub-menu li:hover>.sub-menu {
    margin-top: -10px;
    opacity: 1;
    visibility: visible;
    z-index: 99;
}

.sub-menu li .sub-menu {
    left: 100%;
    margin-left: 0;
    top: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .sub-menu li .sub-menu {
        left: auto;
        right: 100%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sub-menu li .sub-menu {
        left: auto;
        right: 100%;
    }
}

.sub-menu li .sub-menu .sub-menu {
    left: auto;
    right: 100%;
}

.sub-menu li .sub-menu .sub-menu .sub-menu {
    left: 100%;
    right: auto;
}

.sub-menu.blue-color {
    border-bottom: 2px solid #EB8021;
}

.sub-menu.blue-color a:hover {
    color: #EB8021;
}

.sub-menu.red-color {
    border-bottom: 2px solid #D52600;
}

.sub-menu.red-color a:hover {
    color: #D52600;
}

.sub-menu.orange-color {
    border-bottom: 2px solid #FF7D00;
}

.sub-menu.orange-color a:hover {
    color: #FF7D00 !important;
}


/*-- Mega Menu --*/

.mega-menu.four-column {
    width: 100%;
}

.mega-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 30px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-bottom: 2px solid #EB8021;
    text-align: left;
    z-index: -999;
    width: 100%;
    transition: all 0.5s ease 0s;
    opacity: 0;
    visibility: hidden;
}

.mega-menu>li {
    width: 25%;
    padding: 0px 15px;
    margin: 34px 0;
    float: left;
    border-left: 1px solid #eeeeee;
}

.mega-menu>li:first-child {
    border-left: 0;
}

.mega-menu>li>a {
    margin: 0 0 12px 30px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.62px;
    color: #063544;
}

.mega-menu>li>ul>li {
    display: block;
}

.mega-menu>li>ul>li>a {
    padding: 11px 30px;
    display: block;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 400;
    color: #878c9b;
}

.mega-menu>li>ul>li>a:hover {
    color: #EB8021;
}

.mega-menu.blue-color {
    border-bottom: 2px solid #EB8021;
}

.mega-menu.blue-color a:hover {
    color: #EB8021;
}

.mega-menu.red-color {
    border-bottom: 2px solid #D52600;
}

.mega-menu.red-color a:hover {
    color: #D52600;
}

.mega-menu.orange-color {
    border-bottom: 2px solid #FF7D00;
}

.mega-menu.orange-color a:hover {
    color: #FF7D00 !important;
}


/*-- Mobile Menu --*/

.mobile-menu {
    flex: 1 0 100% !important;
}

.mobile-menu.white-color .mean-bar .meanmenu-reveal span.menu-bar {
    background-color: #ffffff;
}

.mobile-menu.white-color .mean-bar .meanmenu-reveal span.menu-bar::before,
.mobile-menu.white-color .mean-bar .meanmenu-reveal span.menu-bar::after {
    background-color: #ffffff;
}

.mobile-menu.white-color .mean-bar .meanmenu-reveal span.menu-close {
    background-color: transparent;
}

.mobile-menu.white-color .mean-bar .meanmenu-reveal span.menu-close::before,
.mobile-menu.white-color .mean-bar .meanmenu-reveal span.menu-close::after {
    background-color: #ffffff;
}

.mobile-menu .mean-bar {
    position: relative;
    /*---- Mean Nav ----*/
}

.mobile-menu .mean-bar .meanmenu-reveal {
    position: absolute;
    top: -57px;
}

@media only screen and (max-width: 479px) {
    .mobile-menu .mean-bar .meanmenu-reveal {
        top: -50px;
    }
}

.mobile-menu .mean-bar .meanmenu-reveal span {
    position: relative;
    /*---- Menu Open ----*/
    /*---- Menu Close ----*/
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar {
    height: 2px;
    width: 26px;
    background-color: #ffffff;
    display: block;
    margin: 8px 0;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before,
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before {
    top: -8px;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after {
    bottom: -8px;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-close {
    height: 2px;
    width: 26px;
    background-color: transparent;
    display: block;
    margin: 8px 0;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before,
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after {
    bottom: 0;
    transform: rotate(-45deg);
}

.mobile-menu .mean-bar .mean-nav {
    background-color: #ffffff;
}

.mobile-menu .mean-bar .mean-nav>ul {
    margin-bottom: 30px;
    border: 1px solid rgba(16, 19, 30, 0.05);
    overflow-x: hidden;
    max-height: 250px;
}

@media only screen and (max-width: 767px) {
    .mobile-menu .mean-bar .mean-nav>ul {
        max-height: 180px;
        overflow-y: auto;
    }
}

@media only screen and (max-width: 575px) {
    .mobile-menu .mean-bar .mean-nav>ul {
        max-height: 220px;
        overflow-y: auto;
    }
}

.mobile-menu .mean-bar .mean-nav>ul>li:first-child>a {
    border-top: none;
}

.mobile-menu .mean-bar .mean-nav>ul li {
    position: relative !important;
    display: block;
    float: left;
    width: 100%;
    /*---- Sub Menu & Mega Menu ----*/
}

.mobile-menu .mean-bar .mean-nav>ul li a {
    font-size: 13px;
    display: block;
    font-family: "Roboto Condensed", sans-serif;
    color: #878c9b;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 44px;
    position: relative;
    border-top: 1px solid rgba(16, 19, 30, 0.05);
    padding: 0 40px 0 20px;
    /*---- Menu Expand For Sub Menu ----*/
}

.mobile-menu .mean-bar .mean-nav>ul li a::after {
    display: none;
}

.mobile-menu .mean-bar .mean-nav>ul li a:hover {
    color: #EB8021;
    padding-left: 25px;
}

.mobile-menu .mean-bar .mean-nav>ul li a.active {
    color: #EB8021;
}

.mobile-menu .mean-bar .mean-nav>ul li a.mean-expand {
    border-width: 0 1px;
    border-style: solid;
    border-color: rgba(16, 19, 30, 0.05);
    position: absolute;
    right: -1px;
    top: 0;
    font-size: 20px !important;
    color: #063544;
    line-height: 44px;
    height: 46px;
    width: 40px;
    text-align: center;
    padding: 0;
}

.mobile-menu .mean-bar .mean-nav>ul li a.mean-expand.mean-clicked {
    line-height: 40px;
}

.mobile-menu .mean-bar .mean-nav>ul li span {
    font-size: 13px;
    display: block;
    color: #063544;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 44px;
    position: relative;
    border-top: 1px solid rgba(16, 19, 30, 0.05);
    border-bottom: none;
    margin: 0;
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu,
.mobile-menu .mean-bar .mean-nav>ul li ul {
    position: static;
    background-color: rgba(0, 0, 0, 0.03);
    margin: 0;
    padding: 0 !important;
    width: 100%;
    box-shadow: none;
    margin: 0;
    display: none;
    float: left;
    width: 100%;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: none;
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li,
.mobile-menu .mean-bar .mean-nav>ul li ul li {
    padding: 0;
    margin: 0;
    flex: 0 0 100%;
    border-right: 0px solid transparent;
    width: 100%;
    display: block !important;
    float: left;
    width: 100%;
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li ul li a {
    font-size: 11px;
    display: block !important;
    margin: 0;
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li a::before,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li a::before,
.mobile-menu .mean-bar .mean-nav>ul li ul li a::before {
    display: none;
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li span,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li span,
.mobile-menu .mean-bar .mean-nav>ul li ul li span {
    font-size: 11px;
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul {
    background-color: rgba(0, 0, 0, 0.04);
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul li a,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul li a,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul li a {
    border-top: 1px solid rgba(16, 19, 30, 0.05);
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul li a.mean-expand {
    border-width: 0 1px;
    border-style: solid;
    border-color: rgba(16, 19, 30, 0.05);
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu ul,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul ul,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu ul,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul ul,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu ul,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul .sub-menu,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul ul {
    background-color: rgba(0, 0, 0, 0.05);
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu ul li a,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul ul li a,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu ul li a,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul ul li a,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu ul li a,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul .sub-menu li a,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul ul li a {
    border-top: 1px solid rgba(16, 19, 30, 0.05);
}

.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li .sub-menu ul li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .sub-menu li ul ul li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li .sub-menu ul li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li .mega-menu li ul ul li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li ul li .sub-menu ul li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul .sub-menu li a.mean-expand,
.mobile-menu .mean-bar .mean-nav>ul li ul li ul ul li a.mean-expand {
    border-width: 0 1px;
    border-style: solid;
    border-color: rgba(16, 19, 30, 0.05);
}

.header-bottom.hb-3 .mobile-menu .mean-bar .meanmenu-reveal {
    right: auto !important;
    left: 0 !important;
    top: -37px;
}


/*----------------------------------------*/


/*  03. Hero CSS
/*----------------------------------------*/

.hero-section .inline-YTPlayer {
    width: 100% !important;
}


/*-- Hero Slider --*/

.hero-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    border: none;
    background-color: transparent;
    color: #EB8021;
    padding: 10px;
    width: 54px;
    height: 54px;
    border-radius: 0;
    text-align: center;
    box-shadow: 0 5px 10px rgba(16, 19, 30, 0.15);
    opacity: 0;
}

.hero-slider .slick-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #EB8021;
    background-color: transparent;
    transition: all 0.3s ease 0s;
}

.hero-slider .slick-arrow i {
    font-size: 24px;
    line-height: 30px;
    display: block;
}

.hero-slider .slick-arrow.slick-prev {
    left: 40px;
    margin-left: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .hero-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

.hero-slider .slick-arrow.slick-next {
    right: 40px;
    margin-right: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .hero-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

.hero-slider .slick-arrow:hover {
    background-color: #EB8021;
    color: #ffffff;
}

.hero-slider .slick-arrow:hover::before {
    margin-left: 6px;
    margin-top: 6px;
}

.hero-slider:hover .slick-arrow {
    opacity: 1;
}

.hero-slider:hover .slick-arrow.slick-prev {
    margin-left: 0;
}

.hero-slider:hover .slick-arrow.slick-next {
    margin-right: 0;
}

.hero-slider .slick-dots {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-slider .slick-dots {
        bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-slider .slick-dots {
        bottom: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .hero-slider .slick-dots {
        bottom: 15px;
    }
}

.hero-slider .slick-dots li {
    margin: 0 5px;
}

.hero-slider .slick-dots li button {
    display: block;
    padding: 0;
    width: 15px;
    height: 15px;
    border: 3px solid #EB8021;
    background-color: #063544;
    text-indent: -9999px;
    border-radius: 50px;
}

@media only screen and (max-width: 767px) {
    .hero-slider .slick-dots li button {
        border-width: 2px;
        width: 10px;
        height: 10px;
    }
}

.hero-slider .slick-dots li.slick-active button {
    width: 30px;
    background-color: #EB8021;
}

@media only screen and (max-width: 767px) {
    .hero-slider .slick-dots li.slick-active button {
        width: 20px;
    }
}


/*-- Hero Item --*/

.hero-item {
    width: 100%;
    height: 600px;
    align-items: center;
    display: flex !important;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
}

.hero-item::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #031d26;
    opacity: 0.65;
    z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-item {
        height: auto;
        padding: 80px 0;
    }
}

@media only screen and (max-width: 767px) {
    .hero-item {
        height: auto;
        padding: 50px 0;
    }
}

.hero-item.player {
    height: calc(100vh - 131px) !important;
    padding: 0 !important;
}

@media only screen and (max-width: 767px) {
    .hero-item.player {
        height: auto !important;
        padding: 50px 0 !important;
    }
}

.hero-item-4 {
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    height: 740px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero-item-4 {
        height: 600px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-item-4 {
        height: 700px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-item-4 {
        height: auto;
    }
}


/*-- Hero Content For Background Video --*/

.hero-content {
    text-align: center;
}

.hero-content h2 {
    font-size: 32px;
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .hero-content h2 {
        font-size: 24px;
    }
}

@media only screen and (max-width: 575px) {
    .hero-content h2 {
        font-size: 22px;
    }
}

@media only screen and (max-width: 479px) {
    .hero-content h2 {
        font-size: 18px;
    }
}

.hero-content h1 {
    font-size: 90px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .hero-content h1 {
        font-size: 60px;
    }
}

@media only screen and (max-width: 575px) {
    .hero-content h1 {
        font-size: 50px;
    }
}

@media only screen and (max-width: 479px) {
    .hero-content h1 {
        font-size: 44px;
    }
}

.hero-content h3 {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
    .hero-content h3 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 575px) {
    .hero-content h3 {
        font-size: 16px;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 479px) {
    .hero-content h3 {
        font-size: 14px;
    }
}


/*-- Hero Content Two For Hero Slider --*/

.hero-content-2 {
    padding-right: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-content-2 {
        padding-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .hero-content-2 {
        padding-right: 0;
        margin-bottom: 30px;
    }
}

.hero-content-2.left {
    text-align: left;
}

.hero-content-2.center {
    text-align: center;
}

.hero-content-2.right {
    text-align: right;
}

.hero-content-2 .video-popup {
    margin-bottom: 15px;
}

.hero-content-2 h2 {
    font-size: 45px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero-content-2 h2 {
        font-size: 36px;
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-content-2 h2 {
        font-size: 30px;
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-content-2 h2 {
        font-size: 28px;
    }
}

.hero-content-2 p {
    font-size: 16px;
    color: #ffffff;
    max-width: 650px;
    margin-bottom: 40px;
}

.hero-content-2 a.read-more-btn {
    color: #ffffff;
}

.quick-contact-wrap {
    padding: 90px 50px;
    background-color: rgba(28, 32, 45, 0.88);
    border-radius: 6px 6px 0 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .quick-contact-wrap {
        padding: 60px 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .quick-contact-wrap {
        padding: 60px 30px;
    }
}

@media only screen and (max-width: 767px) {
    .quick-contact-wrap {
        padding: 30px 15px;
    }
}

.quick-contact-wrap h3 {
    font-size: 36px;
    color: #ffffff;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 20px;
}

.quick-contact-wrap p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: "Roboto", sans-serif;
    margin-bottom: 20px;
}

.quick-contact-wrap form input {
    width: 100%;
    background: #ffffff;
    padding: 5px 10px;
    font-size: 15px;
    color: #878c9b;
    height: 45px;
    border: 0;
    border-radius: 5px;
}


/*-- Slide Content In Animation --*/

.slick-active {
    /*-- Hero Content Two For Hero Slider --*/
}

.slick-active .hero-content-2>* {
    animation-name: fadeInUp;
}

.slick-active .hero-content-2>*:nth-child(1) {
    animation-delay: 0.5s;
}

.slick-active .hero-content-2>*:nth-child(2) {
    animation-delay: 1s;
}

.slick-active .hero-content-2>*:nth-child(3) {
    animation-delay: 1.5s;
}

.slick-active .hero-content-2>*:nth-child(4) {
    animation-delay: 2s;
}

.slick-active .hero-content-2>*:nth-child(5) {
    animation-delay: 2.5s;
}

.slick-active .hero-content-2>*:nth-child(6) {
    animation-delay: 3s;
}


/*----------------------------------------*/


/*  04. Work CSS
/*----------------------------------------*/


/*-- Work Feature css --*/

.single-work-feature {
    background-image: url(../images/work/work-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -110px;
    margin-right: 0;
    margin-bottom: 60px;
    margin-left: 0;
    padding-top: 65px;
    padding-right: 30px;
    padding-bottom: 65px;
    padding-left: 30px;
    border-radius: 5px;
}

.single-work-feature.orange-color {
    padding: 65px 55px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-work-feature.orange-color {
        margin-top: 0;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .single-work-feature.orange-color {
        margin-top: 0;
        margin-bottom: 20px;
        padding: 30px 20px;
    }
}

.single-work-feature.orange-color .work-feature-content h3 {
    color: #ffffff;
}

.single-work-feature.orange-color .work-feature-content ul li i {
    color: #FF7D00;
}

@media only screen and (max-width: 767px) {
    .single-work-feature {
        margin-bottom: 50px;
    }
}

.single-work-feature .work-feature-icon {
    text-align: left;
}

.single-work-feature .work-feature-icon i {
    font-size: 50px;
    color: #ffffff;
}

.single-work-feature .work-feature-content h3 {
    font-size: 28px;
    line-height: 1.3;
    color: #EB8021;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 23px;
    margin-bottom: 0;
}

.single-work-feature .work-feature-content ul {
    margin-bottom: 30px;
}

.single-work-feature .work-feature-content ul li {
    display: block;
    margin-top: 15px;
}

.single-work-feature .work-feature-content ul li:first-child {
    margin-top: 0;
}

.single-work-feature .work-feature-content ul li i {
    font-size: 15px;
    color: #EB8021;
    margin-right: 5px;
}

.single-work-feature .work-feature-content ul li span {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}


/*-- Single Work Area CSS --*/

.single-work .work-img {
    overflow: hidden;
}

.single-work .work-img img {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
}

.single-work .work-description.title-black h3 {
    background-color: #063544;
    color: #ffffff;
}

.single-work .work-description.title-transparent h3 {
    background-color: transparent;
    color: #063544;
}

.single-work .work-description h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    padding: 9px 15px;
    border-radius: 0 0 5px 5px;
    background-color: #EB8021;
    line-height: 1.6;
    margin-bottom: 0;
}

.single-work .work-description p {
    margin: 18px 0 14px;
    font-size: 16px;
    line-height: 1.6;
}

.single-work .work-description a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #063544;
}

.single-work .work-description a i {
    font-size: 10px;
    margin-left: 2px;
    color: #EB8021;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.single-work .work-description a:hover i {
    margin-left: 8px;
}

.single-work:hover .work-img img {
    transform: scale(1.1);
}


/*----------------------------------------*/


/*  05. Parallax CSS
/*----------------------------------------*/

.conebrick-parallax-section {
    padding-top: 100px;
    padding-bottom: 160px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

.conebrick-parallax-section.section-space {
    padding-top: 115px;
    padding-bottom: 180px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .conebrick-parallax-section.section-space {
        padding-top: 95px;
        padding-bottom: 160px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .conebrick-parallax-section.section-space {
        padding-top: 85px;
        padding-bottom: 150px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .conebrick-parallax-section.section-space {
        padding-top: 75px;
        padding-bottom: 140px;
    }
}

@media only screen and (max-width: 767px) {
    .conebrick-parallax-section.section-space {
        padding-top: 65px;
        padding-bottom: 180px;
    }
}

.conebrick-parallax-section.conebrick-parallax-section-4 {
    padding-top: 155px;
    padding-bottom: 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .conebrick-parallax-section.conebrick-parallax-section-4 {
        padding-top: 135px;
        padding-bottom: 80px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .conebrick-parallax-section.conebrick-parallax-section-4 {
        padding-top: 125px;
        padding-bottom: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .conebrick-parallax-section.conebrick-parallax-section-4 {
        padding-top: 115px;
        padding-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .conebrick-parallax-section.conebrick-parallax-section-4 {
        padding-top: 105px;
        padding-bottom: 30px;
    }
}

.conebrick-parallax-section.conebrick-parallax-section-4::before {
    opacity: 0.9;
}

.conebrick-parallax-section.conebrick-parallax-section-4 .video-popup {
    margin-bottom: 0;
    margin-top: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .conebrick-parallax-section.conebrick-parallax-section-4 .video-popup {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .conebrick-parallax-section.conebrick-parallax-section-4 .video-popup {
        margin-bottom: 20px;
    }
}

.conebrick-parallax-section.conebrick-parallax-section-4 .video-popup a {
    background-color: #EB8021;
}

.conebrick-parallax-section.conebrick-parallax-section-5 .video-popup a {
    background-color: #D52600;
}

.conebrick-parallax-section.conebrick-parallax-section-5 .parallax-title h3 span {
    color: #D52600;
}

.conebrick-parallax-section.inner-page-parallax-section {
    padding: 125px 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .conebrick-parallax-section.inner-page-parallax-section {
        padding: 105px 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .conebrick-parallax-section.inner-page-parallax-section {
        padding: 85px 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .conebrick-parallax-section.inner-page-parallax-section {
        padding: 75px 0;
    }
}

@media only screen and (max-width: 767px) {
    .conebrick-parallax-section.inner-page-parallax-section {
        padding: 65px 0;
    }
}

.conebrick-parallax-section.inner-page-parallax-section .parallax-title h3 {
    max-width: 522px;
}

.conebrick-parallax-section.extra-space {
    padding-bottom: 215px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .conebrick-parallax-section.extra-space {
        padding-bottom: 195px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .conebrick-parallax-section.extra-space {
        padding-bottom: 175px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .conebrick-parallax-section.extra-space {
        padding-bottom: 165px;
    }
}

@media only screen and (max-width: 767px) {
    .conebrick-parallax-section.extra-space {
        padding-bottom: 155px;
    }
}

.conebrick-parallax-section.same-space {
    padding-top: 95px;
    padding-bottom: 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .conebrick-parallax-section.same-space {
        padding-top: 75px;
        padding-bottom: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .conebrick-parallax-section.same-space {
        padding-top: 65px;
        padding-bottom: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .conebrick-parallax-section.same-space {
        padding-top: 55px;
        padding-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .conebrick-parallax-section.same-space {
        padding-top: 45px;
        padding-bottom: 30px;
    }
}

.conebrick-parallax-section.same-space::before {
    opacity: 0;
}

.conebrick-parallax-section.same-space .parallax-title h3 {
    max-width: 600px;
    color: #063544;
    margin-top: 10px;
}

.conebrick-parallax-section::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #063544;
    opacity: 0.7;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .conebrick-parallax-section {
        padding-top: 80px;
        padding-bottom: 140px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .conebrick-parallax-section {
        padding-top: 70px;
        padding-bottom: 130px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .conebrick-parallax-section {
        padding-top: 60px;
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .conebrick-parallax-section {
        padding-top: 50px;
        padding-bottom: 110px;
    }
}

.parallax-content {
    text-align: center;
}

.parallax-content .video-popup {
    margin-bottom: 50px;
}

.parallax-content .video-popup a {
    margin: 0 auto;
}

.parallax-content .video-popup a>i {
    margin-left: 4px;
}

.parallax-content .parallax-title h3 {
    font-size: 36px;
    max-width: 610px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    .parallax-content .parallax-title h3 {
        font-size: 28px;
    }
}

.parallax-content .parallax-title h3 span {
    color: #EB8021;
}


/*----------------------------------------*/


/*  06. About CSS
/*----------------------------------------*/

.about-thumb img {
    width: 100%;
}


/*----------------------------------------*/


/*  07. Feature CSS
/*----------------------------------------*/

.feature-section-six {
    margin-top: -50px;
}

@media only screen and (max-width: 767px) {
    .feature-section-six {
        margin-top: 0;
    }
}


/*-- feature --*/

.feature .feature-inner {
    text-align: center;
    padding: 0 30px;
}

.feature .feature-inner.blue-color {
    text-align: left;
    padding: 0;
    margin-bottom: 60px;
    max-width: 247px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .feature .feature-inner.blue-color {
        margin-bottom: 45px;
    }
}

@media only screen and (max-width: 767px) {
    .feature .feature-inner.blue-color {
        margin-bottom: 35px;
    }
}

.feature .feature-inner.blue-color .icon {
    color: #EB8021;
}

.feature .feature-inner.feature-style-6.yellow-color .icon {
    background-color: #EB8021;
}

.feature .feature-inner.feature-style-6 .icon {
    display: inline-block;
    width: 100px;
    height: 100px;
    text-align: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: #FF7D00;
}

.feature .feature-inner.feature-style-6 .icon i {
    line-height: 100px;
}

.feature .feature-inner.yellow-color {
    text-align: left;
}

.feature .feature-inner.yellow-color .icon {
    background-color: #EB8021;
}

.feature .feature-inner.yellow-color .icon i {
    line-height: 100px;
}

.feature .feature-inner .icon {
    font-size: 50px;
    line-height: 1;
    color: #EB8021;
    margin-bottom: 23px;
}

.feature .feature-inner .content h3 {
    line-height: 1.2;
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 700;
}

.feature .feature-inner .content p {
    font-size: 16px;
    line-height: 1.6;
}


/*feature Two CSS*/

.feature-two-content.orange-color p {
    max-width: 100%;
}

.feature-two-content.orange-color a {
    color: #063544;
    margin-top: 25px;
}

.feature-two-content.orange-color a i {
    color: #FF7D00;
}

.feature-two-content p {
    max-width: 320px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .feature-two-content p {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .feature-two-content p {
        max-width: 100%;
    }
}

.feature-two-content a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #063544;
    margin-top: 40px;
}

@media only screen and (max-width: 767px) {
    .feature-two-content a {
        margin-top: 20px;
    }
}

.feature-two-content a i {
    font-size: 10px;
    margin-left: 2px;
    color: #EB8021;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.feature-two-content a:hover i {
    margin-left: 8px;
}

.single-feature-item {
    margin-top: -60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-feature-item {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .single-feature-item {
        margin-top: 50px;
    }
}

.single-feature-list {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 40px 30px;
    background-color: #EB8021;
}

.single-feature-list .feature-icon i {
    height: 40px;
    width: 40px;
    font-size: 50px;
    text-align: center;
    line-height: 36px;
    color: #ffffff;
}

.single-feature-list .feature-content {
    padding-left: 35px;
}

.single-feature-list .feature-content h3 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px;
    font-weight: 700;
    color: #ffffff;
}

.single-feature-list .feature-content p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0;
}

.feature-video-popup {
    position: relative;
}

.feature-video-popup>a {
    display: block;
}

.feature-video-popup .video-popup {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    text-align: center;
}

.feature-video-popup .video-popup>a {
    width: 94px;
    height: 94px;
    line-height: 94px;
    text-align: center;
    display: block;
    font-size: 25px;
    border-radius: 100%;
    background-color: #EB8021;
    color: #ffffff;
    margin: 0 auto;
}

.feature-video-popup .video-popup>a>i {
    margin-left: 4px;
}

@media only screen and (max-width: 767px) {
    .feature-video-popup .video-popup>a {
        width: 70px;
        height: 70px;
        line-height: 70px;
    }
}

.feature-video-popup .video-popup>a:hover {
    height: 100px;
    width: 100px;
    line-height: 100px;
    font-size: 28px;
}

@media only screen and (max-width: 767px) {
    .feature-video-popup .video-popup>a:hover {
        width: 80px;
        height: 80px;
        line-height: 80px;
    }
}


/*----------------------------------------*/


/*  08. Project CSS
/*----------------------------------------*/


/*-- Project --*/

.project {
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.project.red-color .content .category>a {
    color: #D52600;
}

.project.red-color .content .category>a:hover {
    color: #D52600;
}

.project .image {
    display: block;
    position: relative;
}

.project .image::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #031d26;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.project .image img {
    width: 100%;
}

.project .img {
    display: block;
}

.project .img img {
    width: 100%;
}

.project .daHoverElem {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #031d26;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.project .content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px 50px 50px;
}

.project .content.content-center {
    top: 50%;
    bottom: auto;
    text-align: center;
    transform: translateY(-50%);
    padding: 0;
}

.project .content .title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 2px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease 0s;
}

.project .content .title>a {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.project .content .category {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.3s ease-out 0s;
}

.project .content .category>a {
    color: #EB8021;
    margin-right: 5px;
    font-size: 15px;
    font-weight: 700;
}

.project .content .category>a::after {
    content: ",";
}

.project .content .category>a:last-child {
    margin-right: 0;
}

.project .content .category>a:last-child::after {
    display: none;
}

.project .content .category>a:hover {
    color: #EB8021;
}

.project:hover .image::before {
    opacity: 0.7;
}

.project:hover .daHoverElem {
    opacity: 0.7;
}

.project:hover .content {
    opacity: 1;
}

.project:hover .content .title {
    opacity: 1;
    transition: 0.5s ease-out 0.3s;
    transform: translateY(0);
}

.project:hover .content .category {
    opacity: 1;
    transform: translateY(0);
    transition: 0.5s ease-out 0.3s;
}

.project:hover .content .category a:hover {
    color: #EB8021;
}


/*-- Project Information --*/

.project-information {
    background-color: #063544;
    padding: 30px 35px;
}

.project-information h3 {
    color: #ffffff;
    margin-bottom: 20px;
}

.project-information ul li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
}

.project-information ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
}

.project-information ul li strong {
    width: 80px;
    display: inline-flex;
}


/* Metro Grid Style 3 */

.masonry__wrap .gallery__item {
    width: 25%;
    padding: 0 15px;
}

.masonry__wrap .gallery__item_3 {
    width: 33%;
}

.masonry__wrap .porfolio-width-50 {
    width: 50%;
}


/*----------------------------------------*/


/*  09. Funfact CSS
/*----------------------------------------*/


/*-- Funfact --*/

.funfact-wrap {
    background-color: #EB8021;
    padding-top: 45px;
    padding-bottom: 5px;
    border-radius: 5px;
    margin-top: -60px;
}

.funfact-wrap.funfact-wrap-4 {
    margin-top: 0px;
    margin-bottom: -60px;
    background-color: #EB8021;
    position: relative;
    z-index: 99;
}

.single-fact {
    text-align: center;
}

.single-fact i {
    margin-bottom: 10px;
    color: #EB8021;
    font-size: 50px;
    line-height: 1;
}

.single-fact h1 {
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.single-fact h4 {
    font-size: 16px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    line-height: 1.6;
    margin: 0;
    color: #ffffff;
}

.single-fact.fact-style-2 h1 {
    color: #063544;
}

.single-fact.fact-style-2 h4 {
    color: #878c9b;
}


/*----------------------------------------*/


/*  10. Service CSS
/*----------------------------------------*/


/*-- Service CSS --*/

.service-style-two {
    margin-top: -90px;
}


/*-- Single Service CSS --*/

.single-service-item.orange-color .service-content a {
    color: #063544;
}

.single-service-item.orange-color .service-content a i {
    color: #FF7D00;
}

.single-service-item .service-image img {
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.single-service-item .service-content {
    background: linear-gradient(#F3F5FA, #fff);
    margin: -20px 20px 0;
    border-radius: 5px 5px 0 0;
    padding: 20px;
    position: relative;
    z-index: 2;
    text-align: center;
}

.single-service-item .service-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #063544;
    line-height: 1.6;
}

.single-service-item .service-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 400;
}

.single-service-item .service-content a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #063544;
    margin-top: 15px;
}

.single-service-item .service-content a i {
    font-size: 10px;
    margin-left: 2px;
    color: #EB8021;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.single-service-item .service-content a:hover i {
    margin-left: 8px;
}


/*-- Service Two CSS --*/

.single-service-item-two {
    position: relative;
    overflow: hidden;
}

.single-service-item-two::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #063544;
    opacity: 0.8;
}

.single-service-item-two .service-image img {
    width: 100%;
}

.single-service-item-two .service-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    width: 100%;
}

.single-service-item-two .service-content .info {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translate(0, -50%);
    padding: 20px;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-service-item-two .service-content .info {
        padding: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .single-service-item-two .service-content .info {
        padding: 10px;
        padding-top: 0;
    }
}

.single-service-item-two .service-content .info.info-center {
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 330px;
}

.single-service-item-two .service-content .info .icon {
    font-size: 50px;
    line-height: 1;
    margin-bottom: 10px;
    color: #EB8021;
}

@media only screen and (max-width: 767px) {
    .single-service-item-two .service-content .info .icon {
        margin-bottom: 0;
    }
}

.single-service-item-two .service-content .info h3 {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
}

.single-service-item-two .service-content .info p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 0;
    color: #878c9b;
}

.single-service-item-two .service-content .link-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    transform: translate(0, 100%);
    background-color: #EB8021;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-service-item-two .service-content .link-wrap {
        padding: 10px 0;
    }
}

@media only screen and (max-width: 767px) {
    .single-service-item-two .service-content .link-wrap {
        padding: 5px 0;
    }
}

.single-service-item-two:hover .info {
    transform: translate(0, -70%);
}

.single-service-item-two:hover .info.info-center {
    transform: translate(-50%, -70%);
}

@media only screen and (max-width: 767px) {
    .single-service-item-two:hover .info {
        transform: translate(0, -60%);
    }
}

.single-service-item-two:hover .link-wrap {
    transform: translate(0, 0);
}


/*-- Service Gallery CSS --*/

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

.service-gallery .slick-arrow {
    width: 50px;
}

.service-gallery .slick-arrow.slick-prev {
    left: 0px;
}

.service-gallery .slick-arrow.slick-next {
    right: 0px;
}

.service-gallery .slick-dots {
    margin: 0;
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
}


/*-- Service Details Content CSS --*/

.short-describe {
    margin-bottom: 50px;
}

.short-describe h2 {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .short-describe h2 {
        font-size: 28px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .short-describe h2 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .short-describe h2 {
        font-size: 24px;
    }
}

.short-describe p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #878c9b;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .contracting-services-content {
        margin-top: 30px;
    }
}

.contracting-services-content h3 {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 20px;
}

.contracting-services-content p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #878c9b;
    margin-bottom: 0;
}

.contracting-services-content .contracting-services-list {
    margin-top: 20px;
}

.contracting-services-content .contracting-services-list li {
    display: block;
    margin-top: 15px;
}

.contracting-services-content .contracting-services-list li:first-child {
    margin-top: 0;
}

.contracting-services-content .contracting-services-list li i {
    min-width: calc(1em + 8px);
    font-size: 15px;
    margin-right: 5px;
    color: #EB8021;
}

.contracting-services-content .contracting-services-list li span {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #878c9b;
}

.what-is-included {
    margin-top: 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .what-is-included {
        margin-top: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .what-is-included {
        margin-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .what-is-included {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .what-is-included {
        margin-top: 30px;
    }
}

.what-is-included .inline-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .what-is-included .inline-text {
        flex-wrap: wrap;
    }
}

.what-is-included .inline-text h2 {
    margin-bottom: 0;
    line-height: 1.6;
}

.what-is-included .inline-text a {
    margin-top: 0;
}

.what-is-included h2 {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 35px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .what-is-included h2 {
        font-size: 28px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .what-is-included h2 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .what-is-included h2 {
        font-size: 24px;
    }
}

.sample-project {
    margin-top: 60px;
    margin-bottom: 60px;
    overflow: hidden;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .sample-project {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sample-project {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sample-project {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .sample-project {
        margin-top: 10px;
        margin-bottom: 30px;
    }
}

.sample-project h2 {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 35px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sample-project h2 {
        font-size: 28px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sample-project h2 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .sample-project h2 {
        font-size: 24px;
    }
}


/*----------------------------------------*/


/*  11. Team CSS
/*----------------------------------------*/


/*-- Team --*/

.single-team .team-img {
    margin-bottom: 20px;
}

.single-team .team-img img {
    width: 100%;
}

.single-team .team-content h3 {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 0;
}

.single-team .team-content span.position {
    font-size: 14px;
    color: rgba(135, 140, 155, 0.5);
}

.single-team .team-content .line {
    border-top: 1px solid #eeeeee;
    margin: 10px 0 12px;
}

.single-team .team-content p {
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 14px;
}

.social-networks {
    display: flex;
}

.social-networks a {
    display: block;
    font-size: 16px;
    color: #cccccc;
    margin-right: 15px;
}

.social-networks a:hover {
    color: #EB8021;
}


/*----------------------------------------*/


/*  12. CTA CSS
/*----------------------------------------*/

.call-to-action-content {
    background-color: #EB8021;
    margin-right: 0;
    margin-bottom: -60px;
    margin-top: -60px;
    margin-left: 0;
    padding: 32px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    position: relative;
    z-index: 99;
}

@media only screen and (max-width: 767px) {
    .call-to-action-content.cta-3-content {
        flex-wrap: wrap;
        margin-bottom: 0px;
        margin-top: 50px;
    }
}

.call-to-action-content.cta-6-content {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #063544;
    border-radius: 5px 0 0 5px;
}

.call-to-action-content.red-color {
    background-color: #D52600;
}

@media only screen and (max-width: 767px) {
    .call-to-action-content.red-color {
        flex-wrap: wrap;
        margin-bottom: -109px;
        margin-top: -60px;
    }
}

.call-to-action-content.bg-white h3 {
    color: #063544;
}

@media only screen and (max-width: 767px) {
    .call-to-action-content {
        flex-wrap: wrap;
        margin-bottom: -109px;
        margin-top: -109px;
    }
}

.call-to-action-content h3 {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 0;
    color: #ffffff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .call-to-action-content h3 {
        font-size: 22px;
    }
}

@media only screen and (max-width: 767px) {
    .call-to-action-content h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }
}


/*-- CTA Two CSS --*/

@media only screen and (max-width: 767px) {
    .cta-two-section {
        margin-bottom: -10px;
    }
}

.cta-two {
    background-image: url(../images/cta/Home2-CTA-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 70px;
    padding-right: 40px;
    padding-bottom: 50px;
    padding-left: 40px;
    border-radius: 5px;
}

.cta-two>h3 {
    max-width: 247px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 30px;
}

.cta-two ul {
    margin-bottom: 30px;
}

.cta-two ul li {
    display: block;
    margin-top: 15px;
}

.cta-two ul li:first-child {
    margin-top: 0;
}

.cta-two ul li i {
    font-size: 15px;
    color: #EB8021;
    margin-right: 5px;
}

.cta-two ul li span {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #ffffff;
}

.cta-two .call-now {
    margin-right: -50px;
    margin-left: -50px;
    padding-top: 25px;
    padding-bottom: 25px;
    border-radius: 5px;
    background-color: #EB8021;
}

.cta-two .call-now h3 {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 0;
    color: #ffffff;
    text-align: center;
}


/*-- CTA Three CSS --*/

.cta-area {
    text-align: center;
}

.cta-area .cta-img {
    margin-bottom: 35px;
}

.cta-area .cta-content h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    color: #063544;
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cta-area .cta-content h2 {
        font-size: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta-area .cta-content h2 {
        font-size: 34px;
    }
}

@media only screen and (max-width: 767px) {
    .cta-area .cta-content h2 {
        font-size: 26px;
        line-height: 1.2;
    }
}

.cta-area .cta-content p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 0;
    padding-top: 30px;
    padding-bottom: 34px;
}


/*-- CALL US CSS --*/

.call-us {
    background-color: #FF7D00;
    text-align: center;
    padding: 45px 0;
    border-radius: 0px 5px 5px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-us h3 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 0;
    color: #ffffff;
}


/*----------------------------------------*/


/*  13. Testimonial CSS
/*----------------------------------------*/

.testimonial-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

.testimonial-bg::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #063544;
    opacity: 0.3;
}

.testimonial-slider-content.red-color .slick-arrow,
.testimonial-slider-content-3.red-color .slick-arrow,
.testimonial-slider-element-3.red-color .slick-arrow,
.image-slider-3.red-color .slick-arrow {
    color: #ffffff;
}

.testimonial-slider-content.red-color .slick-arrow:hover,
.testimonial-slider-content-3.red-color .slick-arrow:hover,
.testimonial-slider-element-3.red-color .slick-arrow:hover,
.image-slider-3.red-color .slick-arrow:hover {
    background-color: transparent;
    color: #D52600;
}

.testimonial-slider-content.nav-color .slick-arrow,
.testimonial-slider-content-3.nav-color .slick-arrow,
.testimonial-slider-element-3.nav-color .slick-arrow,
.image-slider-3.nav-color .slick-arrow {
    color: #ffffff;
}

.testimonial-slider-content.nav-color .slick-arrow:hover,
.testimonial-slider-content-3.nav-color .slick-arrow:hover,
.testimonial-slider-element-3.nav-color .slick-arrow:hover,
.image-slider-3.nav-color .slick-arrow:hover {
    background-color: transparent;
    color: #EB8021;
}

.testimonial-slider-content.nav-color .slick-arrow.slick-prev,
.testimonial-slider-content-3.nav-color .slick-arrow.slick-prev,
.testimonial-slider-element-3.nav-color .slick-arrow.slick-prev,
.image-slider-3.nav-color .slick-arrow.slick-prev {
    left: -15px;
}

.testimonial-slider-content.nav-color .slick-arrow.slick-next,
.testimonial-slider-content-3.nav-color .slick-arrow.slick-next,
.testimonial-slider-element-3.nav-color .slick-arrow.slick-next,
.image-slider-3.nav-color .slick-arrow.slick-next {
    right: -15px;
}

.testimonial-slider-content.max-width-2 .slick-arrow,
.testimonial-slider-content-3.max-width-2 .slick-arrow,
.testimonial-slider-element-3.max-width-2 .slick-arrow,
.image-slider-3.max-width-2 .slick-arrow {
    color: #ffffff;
}

.testimonial-slider-content.max-width-2 .slick-arrow:hover,
.testimonial-slider-content-3.max-width-2 .slick-arrow:hover,
.testimonial-slider-element-3.max-width-2 .slick-arrow:hover,
.image-slider-3.max-width-2 .slick-arrow:hover {
    background-color: transparent;
    color: #EB8021;
}

.testimonial-slider-content .slick-arrow,
.testimonial-slider-content-3 .slick-arrow,
.testimonial-slider-element-3 .slick-arrow,
.image-slider-3 .slick-arrow {
    width: auto;
    height: auto;
    line-height: 0;
    padding: 0;
    background-color: transparent;
}

.testimonial-slider-content .slick-arrow.slick-prev,
.testimonial-slider-content-3 .slick-arrow.slick-prev,
.testimonial-slider-element-3 .slick-arrow.slick-prev,
.image-slider-3 .slick-arrow.slick-prev {
    left: -40px;
    border-radius: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .testimonial-slider-content .slick-arrow.slick-prev,
    .testimonial-slider-content-3 .slick-arrow.slick-prev,
    .testimonial-slider-element-3 .slick-arrow.slick-prev,
    .image-slider-3 .slick-arrow.slick-prev {
        left: -15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial-slider-content .slick-arrow.slick-prev,
    .testimonial-slider-content-3 .slick-arrow.slick-prev,
    .testimonial-slider-element-3 .slick-arrow.slick-prev,
    .image-slider-3 .slick-arrow.slick-prev {
        left: -20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-slider-content .slick-arrow.slick-prev,
    .testimonial-slider-content-3 .slick-arrow.slick-prev,
    .testimonial-slider-element-3 .slick-arrow.slick-prev,
    .image-slider-3 .slick-arrow.slick-prev {
        left: -20px;
    }
}

@media only screen and (max-width: 767px) {
    .testimonial-slider-content .slick-arrow.slick-prev,
    .testimonial-slider-content-3 .slick-arrow.slick-prev,
    .testimonial-slider-element-3 .slick-arrow.slick-prev,
    .image-slider-3 .slick-arrow.slick-prev {
        left: -20px;
    }
}

.testimonial-slider-content .slick-arrow.slick-next,
.testimonial-slider-content-3 .slick-arrow.slick-next,
.testimonial-slider-element-3 .slick-arrow.slick-next,
.image-slider-3 .slick-arrow.slick-next {
    right: -40px;
    border-radius: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .testimonial-slider-content .slick-arrow.slick-next,
    .testimonial-slider-content-3 .slick-arrow.slick-next,
    .testimonial-slider-element-3 .slick-arrow.slick-next,
    .image-slider-3 .slick-arrow.slick-next {
        right: -15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial-slider-content .slick-arrow.slick-next,
    .testimonial-slider-content-3 .slick-arrow.slick-next,
    .testimonial-slider-element-3 .slick-arrow.slick-next,
    .image-slider-3 .slick-arrow.slick-next {
        right: -20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-slider-content .slick-arrow.slick-next,
    .testimonial-slider-content-3 .slick-arrow.slick-next,
    .testimonial-slider-element-3 .slick-arrow.slick-next,
    .image-slider-3 .slick-arrow.slick-next {
        right: -20px;
    }
}

@media only screen and (max-width: 767px) {
    .testimonial-slider-content .slick-arrow.slick-next,
    .testimonial-slider-content-3 .slick-arrow.slick-next,
    .testimonial-slider-element-3 .slick-arrow.slick-next,
    .image-slider-3 .slick-arrow.slick-next {
        right: -20px;
    }
}

.testimonial-slider-content .slick-arrow:hover,
.testimonial-slider-content-3 .slick-arrow:hover,
.testimonial-slider-element-3 .slick-arrow:hover,
.image-slider-3 .slick-arrow:hover {
    background-color: transparent;
    color: #EB8021;
}

.testimonial-slider-content .slick-list,
.testimonial-slider-content-3 .slick-list,
.testimonial-slider-element-3 .slick-list,
.image-slider-3 .slick-list {
    margin: 0 -15px;
}

.testimonial-slider-content-3 .slick-arrow {
    color: #ffffff;
}

.testimonial-slider-content-3 .slick-arrow:hover {
    background-color: transparent;
    color: #EB8021;
}

.testimonial-slider-element-3 .slick-arrow {
    color: #ffffff;
}

.testimonial-slider-element-3 .slick-arrow:hover {
    background-color: transparent;
    color: #EB8021;
}

.image-slider-3 .slick-arrow {
    color: #ffffff;
}

.image-slider-3 .slick-arrow.slick-prev {
    left: -40px;
    border-radius: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .image-slider-3 .slick-arrow.slick-prev {
        left: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .image-slider-3 .slick-arrow.slick-prev {
        left: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .image-slider-3 .slick-arrow.slick-prev {
        left: -5px;
    }
}

@media only screen and (max-width: 767px) {
    .image-slider-3 .slick-arrow.slick-prev {
        left: -5px;
    }
}

.image-slider-3 .slick-arrow.slick-next {
    right: -40px;
    border-radius: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .image-slider-3 .slick-arrow.slick-next {
        right: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .image-slider-3 .slick-arrow.slick-next {
        right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .image-slider-3 .slick-arrow.slick-next {
        right: -5px;
    }
}

@media only screen and (max-width: 767px) {
    .image-slider-3 .slick-arrow.slick-next {
        right: -5px;
    }
}

.image-slider-3 .slick-arrow:hover {
    background-color: transparent;
    color: #EB8021;
}


/*-- Testimonial --*/

.testimonial {
    padding: 0 15px;
}

.testimonial .testimonial-inner {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 50px 30px;
    margin-bottom: 35px;
}

.testimonial .testimonial-inner.blue-color::before {
    background-color: #EB8021;
}

.testimonial .testimonial-inner.red-color::before {
    background-color: #D52600;
}

@media only screen and (max-width: 767px) {
    .testimonial .testimonial-inner {
        margin-bottom: 15px;
    }
}

.testimonial .testimonial-inner::before {
    font-family: FontAwesome;
    font-size: 20px;
    content: "";
    position: absolute;
    bottom: -15px;
    right: 30px;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: #EB8021;
}

.testimonial .testimonial-inner .testimonial-description p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 22px;
}

.testimonial .testimonial-inner .testimonial-author {
    display: flex;
    align-items: center;
}

.testimonial .testimonial-inner .testimonial-author .author-thumb {
    margin-right: 15px;
}

.testimonial .testimonial-inner .testimonial-author .author-thumb img {
    border-radius: 100%;
    margin: 0 auto;
}

.testimonial .testimonial-inner .testimonial-author .author-info h4 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 0;
}

.testimonial .testimonial-inner .testimonial-author .author-info span {
    font-size: 14px;
    line-height: 1;
    color: rgba(135, 140, 155, 0.5);
}


/*----------------------------------------*/


/*  14. Get In Touch CSS
/*----------------------------------------*/

.single-address h3 {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;
}

.single-address ul {
    padding-top: 35px;
    border-top: 1px solid #eee;
    margin-bottom: 30px;
}

.single-address ul li {
    display: block;
    margin-top: 15px;
}

.single-address ul li:first-child {
    margin-top: 0;
}

.single-address ul li i {
    min-width: calc(1em + 8px);
    font-size: 15px;
    margin-right: 5px;
    color: #EB8021;
}

.single-address ul li span {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.single-address a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #063544;
}

.single-address a i {
    font-size: 10px;
    margin-left: 2px;
    color: #EB8021;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.single-address a:hover i {
    margin-left: 8px;
}


/*----------------------------------------*/


/*  15. Mission CSS
/*----------------------------------------*/

ul.all-mission-list {
    margin-bottom: 20px;
}

ul.all-mission-list.red-color li i {
    color: #D52600;
}

ul.all-mission-list li {
    display: block;
    margin-top: 15px;
}

ul.all-mission-list li:first-child {
    margin-top: 0;
}

ul.all-mission-list li i {
    min-width: calc(1em + 8px);
    font-size: 15px;
    margin-right: 5px;
    color: #EB8021;
}

ul.all-mission-list li span {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #878c9b;
}

.conebrick-mission-icon {
    padding-top: 20px;
    padding-bottom: 30px;
}

.conebrick-mission-icon i {
    font-size: 50px;
    line-height: 1;
    color: #D52600;
}


/*----------------------------------------*/


/*  16. FAQ CSS
/*----------------------------------------*/

.faq-accordion.orange-color .card.actives .card-header {
    background-color: #FF7D00;
    border-color: #FF7D00;
}

.faq-accordion.orange-color .card.actives .card-header a {
    color: #ffffff;
}

.faq-accordion.orange-color .card-header:hover {
    background-color: #FF7D00;
    border-color: #FF7D00;
}

.faq-accordion.yellow-color .card {
    margin-bottom: 20px;
}

.faq-accordion.yellow-color .card.actives .card-header {
    background-color: #EB8021;
    border-color: #EB8021;
}

.faq-accordion.yellow-color .card.actives .card-header a {
    color: #ffffff;
}

.faq-accordion.yellow-color .card-header a {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    display: block;
}

.faq-accordion.yellow-color .card-header:hover {
    background-color: #EB8021;
    border-color: #EB8021;
}

.faq-accordion .card {
    border-radius: 0;
    margin-bottom: 10px;
    background-color: transparent;
    border: 0;
}

.faq-accordion .card.actives .card-header {
    background-color: #EB8021;
    border-color: #EB8021;
}

.faq-accordion .card.actives .card-header a {
    color: #ffffff;
}

.faq-accordion .card-header {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    display: block;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    position: relative;
    cursor: pointer;
}

.faq-accordion .card-header:hover {
    background-color: #EB8021;
    border-color: #EB8021;
}

.faq-accordion .card-header a {
    display: block;
    padding: 15px 20px;
    cursor: pointer;
    color: #063544;
}

@media only screen and (max-width: 767px) {
    .faq-accordion .card-header a {
        font-size: 13px;
    }
}

.faq-accordion .card-header a.collapsed::before {
    font-size: 18px;
    content: "";
    font-family: fontawesome;
    position: absolute;
    right: 15px;
    top: 15px;
}

.faq-accordion .card-header a.collapsed::after {
    display: none;
}

.faq-accordion .card-header a:after {
    font-size: 18px;
    font-family: fontawesome;
    position: absolute;
    right: 15px;
    top: 12px;
    content: "";
}

.faq-accordion .card-header a:hover {
    color: #ffffff;
}

.card-body {
    padding: 24px 0 10px 22px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}


/*----------------------------------------*/


/*  17. Visit CSS
/*----------------------------------------*/

.visit-area {
    padding-left: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .visit-area {
        padding-left: 0;
        margin-top: 35px;
    }
}

@media only screen and (max-width: 767px) {
    .visit-area {
        padding-left: 0;
        margin-top: 25px;
    }
}

.visit-area h3 {
    font-size: 36px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 12px;
}

.visit-area p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #878c9b;
    margin-bottom: 35px;
}

@media only screen and (max-width: 767px) {
    .visit-area p {
        margin-bottom: 20px;
    }
}

.visit-area ul {
    padding-top: 35px;
    border-top: 1px solid #eee;
    margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
    .visit-area ul {
        margin-bottom: 20px;
        padding-top: 20px;
    }
}

.visit-area ul li {
    display: block;
    margin-top: 15px;
}

.visit-area ul li:first-child {
    margin-top: 0;
}

.visit-area ul li i {
    min-width: calc(1em + 8px);
    font-size: 15px;
    margin-right: 5px;
    color: #EB8021;
}

.visit-area ul li span {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}


/*----------------------------------------*/


/*  18. Cost Calculator CSS
/*----------------------------------------*/

.cost-calculator-inner {
    padding-top: 70px;
    padding-right: 50px;
    padding-left: 50px;
    background-color: #f3f4fa;
    border-radius: 5px 5px 0 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .cost-calculator-inner {
        padding-top: 60px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cost-calculator-inner {
        padding-top: 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cost-calculator-inner {
        padding-top: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .cost-calculator-inner {
        padding-top: 45px;
        padding-right: 20px;
        padding-left: 20px;
    }
}

.cost-cal-menu ul {
    text-align: center;
}

.cost-cal-menu ul li {
    display: inline-block;
    margin-left: 30px;
}

@media only screen and (max-width: 767px) {
    .cost-cal-menu ul li {
        margin-left: 10px;
    }
}

.cost-cal-menu ul li:first-child {
    margin-left: 0;
}

.cost-cal-menu ul li a {
    display: block;
    position: relative;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
}

.cost-cal-menu ul li a:hover {
    color: #063544;
}

@media only screen and (max-width: 767px) {
    .cost-cal-menu ul li a {
        font-size: 16px;
    }
}

.cost-cal-menu ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    height: 2px;
    width: 100%;
    background-color: #FF7D00;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
}

@media only screen and (max-width: 767px) {
    .cost-cal-menu ul li a::before {
        bottom: -5px;
    }
}

.cost-cal-menu ul li a.active::before {
    opacity: 1;
    visibility: visible;
}

.cost-calculator-area {
    padding: 45px 0;
    padding-bottom: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .cost-calculator-area {
        padding-bottom: 70px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cost-calculator-area {
        padding-bottom: 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cost-calculator-area {
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .cost-calculator-area {
        padding-bottom: 50px;
    }
}

.ext-options {
    display: none;
}

.single-cost-cal {
    display: flex;
    margin-bottom: 30px;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .single-cost-cal {
        flex-wrap: wrap;
    }
}

.single-cost-cal label {
    flex-basis: 220px;
    width: 220px;
    padding-right: 20px;
}

@media only screen and (max-width: 767px) {
    .single-cost-cal label {
        flex-basis: 100%;
        width: 100%;
        padding-right: 0;
    }
}

.single-cost-cal input {
    width: calc(100% - 220px);
    flex-basis: calc(100% - 220px);
    display: block;
    line-height: 2;
    min-height: 38px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    transition: all 380ms ease;
    color: #878c9b;
    border-radius: 2px;
    outline: none;
}

.single-cost-cal input:focus {
    border-color: #999;
    box-shadow: 5px 0 0 #52b7bd inset, 0 2px 10px rgba(0, 0, 0, 0.2);
    outline: none;
}

@media only screen and (max-width: 767px) {
    .single-cost-cal input {
        flex-basis: 100%;
        width: 100%;
    }
}

.single-cost-cal .switch {
    /* Round Style CSS Toggle Switch */
}

.single-cost-cal .switch .cmn-toggle {
    position: absolute;
    visibility: hidden;
}

.single-cost-cal .switch .cmn-toggle+label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}

.single-cost-cal .switch>input.cmn-toggle-round-flat+label {
    padding: 2px;
    width: 76px;
    height: 38px;
    background-color: #dddddd;
    border-radius: 60px;
    transition: all 0.4s ease-in-out;
}

.single-cost-cal .switch>input.cmn-toggle-round-flat+label:before,
.single-cost-cal .switch>input.cmn-toggle-round-flat+label:after {
    display: block;
    position: absolute;
    content: "";
}

.single-cost-cal .switch>input.cmn-toggle-round-flat+label:before {
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    background-color: #f3f4fa;
    border-radius: 60px;
    transition: 0.4s;
}

.single-cost-cal .switch>input.cmn-toggle-round-flat+label:after {
    top: 6px;
    left: 6px;
    bottom: 6px;
    width: 26px;
    height: 26px;
    background-color: #dddddd;
    border-radius: 50%;
    transition: margin 0.4s, background 0.4s;
}

.single-cost-cal .switch>input.cmn-toggle-round-flat:checked+label {
    background-color: #dddddd;
}

.single-cost-cal .switch>input.cmn-toggle-round-flat:checked+label:after {
    margin-left: 38px;
    background-color: #52b7bd;
}

.single-cost-cal .ui-widget {
    width: calc(100% - 220px);
    flex-basis: calc(100% - 220px);
    height: 6px;
    background-color: #d8d8d8;
    border: none;
    border-radius: 3px;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .single-cost-cal .ui-widget {
        flex-basis: 100%;
        width: 100%;
    }
}

.single-cost-cal .ui-widget .ui-slider-range {
    background-color: #FF7D00;
    border-radius: 50px;
}

.single-cost-cal .ui-widget .ui-slider-handle {
    background-color: #fff;
    min-width: 24px;
    height: 24px;
    box-shadow: none !important;
    border: 1px solid #ddd;
    outline: none;
    top: -10px;
    margin-left: -18px;
    border-radius: 50%;
    cursor: grab;
    transition: none;
}

.single-cost-cal .ui-widget .ui-slider-handle::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 12px;
    width: 12px;
    background: #FF7D00;
    border-radius: 100%;
    opacity: 1;
    transform: translate(-50%, -50%);
}

.single-cost-cal .ui-widget .ui-slider-handle span {
    position: absolute;
    top: -32px;
    left: 50%;
    min-width: 27px;
    height: 25px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 25px;
    padding: 0 5px;
    transform: translateX(-50%);
    background: #063544;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    display: block;
}

.single-cost-cal .ui-widget .ui-slider-handle span::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: transparent transparent transparent transparent;
    border-top-color: #063544;
    transform: translateX(-50%);
}

.single-cost-cal .nice-select {
    width: calc(100% - 220px);
    flex-basis: calc(100% - 220px);
}

@media only screen and (max-width: 767px) {
    .single-cost-cal .nice-select {
        flex-basis: 100%;
        width: 100%;
    }
}

.total-cost-cal {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 15px 0;
}

@media only screen and (max-width: 767px) {
    .total-cost-cal {
        flex-wrap: wrap;
    }
}

.total-cost-cal .total-text i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    font-size: 32px;
    color: #FF7D00;
}

.total-cost-cal .total-text span {
    font-size: 20px;
    line-height: 1.8;
    font-weight: 700;
    color: #063544;
}

.total-cost-cal .point-submit {
    display: flex;
    align-items: center;
}

.total-cost-cal .point-submit .total-point {
    padding-right: 40px;
}

@media only screen and (max-width: 767px) {
    .total-cost-cal .point-submit .total-point {
        padding-right: 75px;
    }
}

.total-cost-cal .point-submit .total-point span {
    font-size: 24px;
    line-height: 1.8;
    font-weight: 700;
    color: #063544;
    margin-top: 8px;
}

.total-cost-cal .next-btn {
    transition: margin 0.3s, visibility 0.2s;
}

.total-cost-cal .next-btn.ext-option-hidden {
    margin-right: -100px;
    visibility: hidden;
}

.single-cost-cal-input {
    margin-bottom: 30px;
}

.single-cost-cal-input input {
    border: 1px solid #ddd;
    height: 45px;
    border-radius: 5px;
    box-shadow: none;
    width: 100%;
    padding: 0 12px;
    color: #878c9b;
}

.single-cost-cal-input textarea {
    border: 1px solid #ddd;
    min-height: 160px;
    border-radius: 5px;
    box-shadow: none;
    width: 100%;
    padding: 0 12px;
    color: #878c9b;
}

@media only screen and (max-width: 767px) {
    .single-cost-cal-input textarea {
        margin-top: 30px;
    }
}

.single-cost-cal-input .checkbox {
    width: auto;
    height: auto;
}

.single-cost-cal-input label {
    padding-left: 5px;
    cursor: pointer;
}


/*----------------------------------------*/


/*  19. Maintenance CSS
/*----------------------------------------*/

.maintenance-content-area {
    text-align: center;
}

.maintenance-content-area h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 15px;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .maintenance-content-area h2 {
        font-size: 24px;
    }
}

.maintenance-content-area .mailchimp-form-title {
    text-align: left;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .maintenance-content-area .mailchimp-form-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
}


/*----------------------------------------*/


/*  20. Coming Soon CSS
/*----------------------------------------*/

.coming-soon-section {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.coming-soon-content-area {
    text-align: center;
}

.coming-soon-content-area h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 15px;
    font-weight: 700;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .coming-soon-content-area h2 {
        font-size: 24px;
    }
}

.cs-countdown {
    margin-bottom: 40px;
    text-align: center;
}

.cs-countdown.black-color .countdown-wrap>div+div::before {
    color: #063544;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .cs-countdown.black-color .countdown-wrap>div+div::before {
        left: -20px;
    }
}

.cs-countdown.black-color .number {
    font-size: 36px;
    color: #063544;
    line-height: 1.2;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .cs-countdown.black-color .number {
        font-size: 24px;
        line-height: 1;
    }
}

.cs-countdown.black-color .text {
    display: block;
    font-size: 16px;
    line-height: 30px;
    text-transform: capitalize;
    font-weight: 700;
}

.cs-countdown.white-color .countdown-wrap>div+div::before {
    color: #ffffff;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .cs-countdown.white-color .countdown-wrap>div+div::before {
        left: -20px;
    }
}

.cs-countdown.white-color .number {
    font-size: 36px;
    color: #ffffff;
    line-height: 1.2;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .cs-countdown.white-color .number {
        font-size: 24px;
        line-height: 1;
    }
}

.cs-countdown.white-color .text {
    display: block;
    font-size: 16px;
    line-height: 30px;
    text-transform: capitalize;
    font-weight: 700;
    color: #ffffff;
}

.cs-countdown .countdown-wrap>div {
    display: inline-block;
    text-align: center;
}

.cs-countdown .countdown-wrap>div+div {
    margin-left: 108px;
    position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cs-countdown .countdown-wrap>div+div {
        margin-left: 90px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cs-countdown .countdown-wrap>div+div {
        margin-left: 70px;
    }
}

@media only screen and (max-width: 767px) {
    .cs-countdown .countdown-wrap>div+div {
        margin-left: 30px;
    }
}

.cs-countdown .countdown-wrap>div+div::before {
    content: ":";
    font-size: 30px;
    position: absolute;
    left: -54px;
    top: 50%;
    margin-top: -20px;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .cs-countdown .countdown-wrap>div+div::before {
        left: -20px;
    }
}

.cs-countdown .number {
    font-size: 56px;
    line-height: 65px;
    color: #EB8021;
    display: block;
}

@media only screen and (max-width: 767px) {
    .cs-countdown .number {
        font-size: 24px;
        line-height: 1;
    }
}

.cs-countdown .text {
    display: block;
    font-size: 16px;
    line-height: 30px;
    text-transform: capitalize;
}

.cs-form {
    max-width: 520px;
    margin: auto;
    margin-top: 90px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .cs-form {
        margin-top: 70px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cs-form {
        margin-top: 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cs-form {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .cs-form {
        margin-top: 40px;
    }
}


/*----------------------------------------*/


/*  21. 404 CSS
/*----------------------------------------*/

.error-404-content-area {
    max-width: 410px;
    padding: 50px 0;
    margin: 0 auto;
    text-align: center;
}

.error-404-content-area h2 {
    color: #ffffff;
    font-size: 36px;
    padding: 17px 0 14px;
    border-top: 1px solid #ffffff;
    margin-top: 30px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.5;
}

.error-404-content-area p {
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.6;
}

.error-404-content-area .error-404-form {
    position: relative;
    max-width: 370px;
    margin: 30px auto 0;
}

.error-404-content-area .error-404-form input {
    width: 100%;
    outline: none;
    border: 1px solid #dddddd;
    border-radius: 5px;
    color: #878c9b;
    background-color: #ffffff;
    height: 56px;
    padding: 0 15px;
}

.error-404-content-area .error-404-form button {
    position: absolute;
    top: 0;
    right: 0;
    color: #063544;
    background: transparent;
    border: transparent;
    padding: 0 20px;
    height: 56px;
    line-height: 59px;
    font-size: 15px;
}

.error-404-content-area .error-buttons {
    margin-top: 35px;
}

.error-404-content-area .error-buttons a {
    margin: 0 3px;
}

.error-404-content-area .error-buttons a.white {
    background-color: #ffffff;
    color: #063544;
}

.error-404-content-area .error-buttons a.white:hover {
    background-color: #EB8021;
    color: #ffffff;
}

.error-404-content-area .error-buttons a.yellow:hover {
    background-color: #ffffff;
    color: #063544;
}


/*----------------------------------------*/


/*  22. History CSS
/*----------------------------------------*/

.single-history {
    display: flex;
    align-items: center;
    padding-bottom: 30px;
    padding-left: 35px;
    margin: 0 -15px;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .single-history {
        flex-wrap: wrap;
    }
}

.single-history:last-child::before {
    display: none;
}

.single-history::before {
    position: absolute;
    top: 0;
    left: 8px;
    width: 4px;
    height: 100%;
    content: "";
    background-color: #eeeeee;
}

.single-history::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    content: "";
    background-color: #EB8021;
}

.single-history .history-img {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 15px;
}

@media only screen and (max-width: 767px) {
    .single-history .history-img {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
    .single-history .history-img img {
        width: 100%;
    }
}

.single-history .history-content {
    flex: 0 0 75%;
    max-width: 75%;
    padding: 0 15px;
}

@media only screen and (max-width: 767px) {
    .single-history .history-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.single-history .history-content h4 {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.single-history .history-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
}


/*-- Philosophy CSS --*/

@media only screen and (max-width: 767px) {
    .philosophy-author {
        margin-bottom: 30px;
    }
    .philosophy-author img {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .philosophy-content {
        margin-bottom: 0px;
    }
}

.philosophy-content h4 {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 0;
}

.philosophy-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 15px;
}

.philosophy-content h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.philosophy-content span {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}


/*----------------------------------------*/


/*  23. Achievements CSS
/*----------------------------------------*/


/*-- Award CSS --*/

.single-award {
    display: flex;
    align-items: center;
    padding-bottom: 50px;
    margin: 0 -15px;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .single-award {
        flex-wrap: wrap;
        padding-bottom: 40px;
    }
}

.single-award .award-icon {
    flex: 0 0 16.66%;
    max-width: 16.66%;
    padding: 0 15px;
}

@media only screen and (max-width: 767px) {
    .single-award .award-icon {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
    .single-award .award-icon img {
        width: 100%;
    }
}

.single-award .award-content {
    flex: 0 0 83.34%;
    max-width: 83.34%;
    padding: 0 15px;
}

@media only screen and (max-width: 767px) {
    .single-award .award-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.single-award .award-content h4 {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.single-award .award-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
}


/*----------------------------------------*/


/*  24. Pricing CSS
/*----------------------------------------*/

.single-pricing {
    margin-bottom: 30px;
    padding: 55px 0 0;
}

.single-pricing.active .pricing-inner {
    border-color: #EB8021;
}

.single-pricing .pricing-inner {
    position: relative;
    margin: 0 auto;
    padding: 75px 30px 37px;
    max-width: 370px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    background-color: #ffffff;
}

.single-pricing .pricing-inner .pricing-recommended {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    text-transform: uppercase;
}

.single-pricing .pricing-inner .pricing-header {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dddddd;
}

.single-pricing .pricing-inner .pricing-header .price-wrap {
    display: table;
    position: absolute;
    top: -55px;
    left: 30px;
    width: 110px;
    height: 110px;
    text-align: center;
    border-radius: 50%;
    background-color: #EB8021;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-pricing .pricing-inner .pricing-header .price-wrap {
        left: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-pricing .pricing-inner .pricing-header .price-wrap {
        left: 10px;
    }
}

.single-pricing .pricing-inner .pricing-header .price-wrap .price-inner {
    display: table-cell;
    vertical-align: middle;
}

.single-pricing .pricing-inner .pricing-header .price-wrap .price-inner .price {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
}

.single-pricing .pricing-inner .pricing-header .price-wrap .price-inner .price span {
    display: inline-block;
    font-size: 18px;
    vertical-align: top;
    margin-top: 5px;
    letter-spacing: -6px;
}

.single-pricing .pricing-inner .pricing-header .price-wrap .price-inner .period {
    font-size: 14px;
    color: #ffffff;
    line-height: 1.14;
}

.single-pricing .pricing-inner .pricing-header h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 38px;
    margin-bottom: 0;
}

.single-pricing .pricing-inner .pricing-content .price-list li {
    position: relative;
    display: block;
    padding: 6px 0;
    font-size: 14px;
}

.single-pricing .pricing-inner .pricing-content .price-list li i {
    font-size: 15px;
    margin-right: 5px;
    color: #EB8021;
}

.single-pricing .pricing-inner .pricing-footer {
    padding-top: 20px;
}


/*----------------------------------------*/


/*  25. Product CSS
/*----------------------------------------*/


/*-- Product Count --*/

@media only screen and (max-width: 767px) {
    .result-count {
        text-align: center;
    }
}

.shop-filter-right {
    display: flex;
    justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
    .shop-filter-right {
        justify-content: center;
        margin-top: 20px;
    }
}

.shop-filter-right .nice-select {
    width: 215px;
}


/*-- Product --*/

.product .product-inner .media {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
}

.product .product-inner .media .image {
    width: 100%;
    position: relative;
    z-index: 1;
}

.product .product-inner .media .image::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #063544;
    z-index: 2;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.product .product-inner .media .image img {
    width: 100%;
}

.product .product-inner .media .search {
    z-index: 9;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin-top: 20px;
    background-color: transparent;
    color: #ffffff;
    opacity: 0;
}

.product .product-inner .media .search i {
    font-size: 20px;
    margin-right: 10px;
}

.product .product-inner .media .search:hover {
    color: #EB8021;
}

.product .product-inner .media .onsale {
    position: absolute;
    top: 20px;
    right: 0;
    z-index: 1;
    display: block;
    width: 50px;
    height: 24px;
    min-width: 50px;
    min-height: 24px;
    line-height: 24px;
    border-radius: 0;
    border: none;
    color: #ffffff;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    background-color: #D0011B;
}

.product .product-inner .content {
    border: 1px solid #eeeeee;
    border-top: 0;
    padding: 20px;
}

.product .product-inner .content .title a {
    font-size: 16px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.product .product-inner .content .price-rate {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product .product-inner .content .price-rate .price {
    line-height: 1;
    margin: 0;
    font-size: 20px;
}

.product .product-inner .content .price-rate .price span.new {
    color: #EB8021;
}

.product .product-inner .content .price-rate .price span.old {
    margin-right: 5px;
    color: #878c9b;
    text-decoration: line-through;
}

.product .product-inner .content .price-rate .ratting {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 5px;
}

.product .product-inner .content .price-rate .ratting i {
    font-size: 16px;
    line-height: 18px;
    margin-right: 5px;
    color: #EB8021;
    letter-spacing: -4px;
}

.product .product-inner .content .price-rate .ratting i:last-child {
    margin-right: 0;
}

.product .product-inner:hover .media .image::before {
    opacity: 0.55;
}

.product .product-inner:hover .media .search {
    opacity: 1;
    margin-top: 0;
}


/*-- Product Details --*/

.product-details .product-inner .product-gallery {
    margin-bottom: 10px;
    padding-right: 1px;
}

.product-details .product-inner .product-gallery .slick-arrow {
    width: 50px;
}

.product-details .product-inner .product-gallery .slick-arrow.slick-prev {
    left: 0px;
}

.product-details .product-inner .product-gallery .slick-arrow.slick-next {
    right: 0px;
}

.product-details .product-inner .product-gallery .slick-dots {
    margin-top: 40px;
    width: 100%;
}

.product-details .product-inner .product-gallery a {
    display: block;
}

.product-details .product-inner .product-gallery a img {
    width: 100%;
}

.product-details .product-inner .product-gallery a.gallery-popup {
    position: relative;
}

.product-details .product-inner .product-thumb-slider {
    margin: -5px;
}

.product-details .product-inner .product-thumb-slider .item {
    padding: 5px;
}

.product-details .product-inner .product-thumb-slider .item img {
    width: 100%;
    border: 1px solid #f1f2f3;
}

.product-details .product-inner .content .title {
    margin-bottom: 10px;
    font-size: 32px;
    line-height: 1.1;
}

@media only screen and (max-width: 767px) {
    .product-details .product-inner .content .title {
        font-size: 22px;
    }
}

.product-details .product-inner .content .price {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 700;
}

.product-details .product-inner .content .price span.new {
    color: #EB8021;
}

.product-details .product-inner .content .price span.old {
    color: #878c9b;
    text-decoration: line-through;
    margin-left: 5px;
}

.product-details .product-inner .content .ratting-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 25px;
}

.product-details .product-inner .content .ratting-wrap .ratting i {
    color: #EB8021;
    letter-spacing: -4px;
}

.product-details .product-inner .content .ratting-wrap a {
    margin-left: 10px;
    font-size: 14px;
    color: #063544;
}

.product-details .product-inner .content .ratting-wrap a:hover {
    color: #EB8021;
}

.product-details .product-inner .content .desc {
    margin-bottom: 25px;
}

.product-details .product-inner .content .social-wrap {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 50px;
    margin-bottom: 35px;
    border-bottom: 1px solid #d8d8d8;
    align-items: center;
}

.product-details .product-inner .content .social-wrap h4 {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 0;
}

.product-details .product-inner .content .social-wrap ul li {
    display: inline-block;
}

.product-details .product-inner .content .social-wrap ul li a {
    padding: 3px 7px;
    display: block;
    font-size: 16px;
    color: #063544;
}

.product-details .product-inner .content .social-wrap ul li a:hover {
    color: #EB8021;
}

.product-details .product-inner .content .product-meta .meta-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.product-details .product-inner .content .product-meta .meta-item h4 {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 0;
}

.product-details .product-inner .content .product-meta .meta-item ul li {
    display: inline-block;
}

.product-details .product-inner .content .product-meta .meta-item ul li a {
    display: block;
    font-size: 16px;
    margin: 0 2px;
}

.product-details .product-inner .content .stock {
    margin-bottom: 20px;
    margin-right: 20px;
    padding: 5px 10px 4px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.3px;
    font-weight: 700;
    display: inline-block;
}

.product-details .product-inner .content .stock.in-stock {
    border: 2px solid #5cb85c;
    color: #5cb85c;
}

.product-details .product-inner .content .stock.out-stock {
    border: 2px solid #f00;
    color: #f00;
}

.product-details .product-inner .content .actions {
    padding-bottom: 50px;
    margin-bottom: 35px;
    border-bottom: 1px solid #d8d8d8;
}

.product-details .product-inner .content .actions .qty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
}

.product-details .product-inner .content .actions .qty h4 {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 0;
}

.product-details .product-inner .content .actions .qty input {
    height: 42px;
    width: 70px;
    text-align: center;
    padding: 3px 10px 3px 10px;
    border-width: 0 1px;
    border-style: solid;
    border-color: #eeeeee;
    color: #878c9b;
    border-radius: 5px;
}

.product-details .product-inner .content .actions .add-to-cart {
    z-index: 9;
    margin-left: 20px;
    background-color: #EB8021;
    color: #ffffff;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    line-height: 24px;
    padding: 10px 20px;
    white-space: nowrap;
    font-family: "Roboto Condensed", sans-serif;
}

.product-details .product-inner .content .actions .add-to-cart i {
    font-size: 20px;
    margin-right: 10px;
}

.product-details .product-inner .content .actions .add-to-cart:hover {
    background-color: #063544;
    color: #EB8021;
}


/*-- Product Details Tab List --*/

.product-details-tab-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0px 30px;
    border-bottom: 1px solid #eeeeee;
}

.product-details-tab-list li {
    padding: 0 15px;
}

.product-details-tab-list li:first-child {
    padding-left: 0;
}

.product-details-tab-list li a {
    line-height: 1;
    display: block;
    font-size: 16px;
    color: #063544;
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

.product-details-tab-list li a.active {
    border-color: #EB8021;
    color: #063544;
}


/*-- Product Details Tab Content --*/

.product-specification {
    padding-top: 5px;
}

.comment-list ol {
    list-style: none;
    margin: 0 0 60px;
    padding-left: 0;
}

@media only screen and (max-width: 767px) {
    .comment-list ol {
        margin: 0 0 30px;
    }
}

.comment-list ol li .comment-2 {
    display: flex;
}

@media only screen and (max-width: 767px) {
    .comment-list ol li .comment-2 {
        flex-wrap: wrap;
    }
}

.comment-list ol li .comment-2 .comment-author {
    margin-right: 30px;
    max-width: 115px;
    flex: 0 0 115px;
}

@media only screen and (max-width: 767px) {
    .comment-list ol li .comment-2 .comment-author {
        margin-right: 0;
        max-width: 100%;
        flex: 100%;
        margin-bottom: 20px;
    }
}

.comment-list ol li .comment-2 .comment-author img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}

.comment-list ol li .comment-2 .comment-content {
    max-width: calc(100% - 150px);
    flex: 1 0 calc(100% - 150px);
}

@media only screen and (max-width: 767px) {
    .comment-list ol li .comment-2 .comment-content {
        max-width: 100%;
        flex: 100%;
    }
}

.comment-list ol li .comment-2 .comment-content .athor-and-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-list ol li .comment-2 .comment-content .athor-and-rating h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0px;
    font-family: "Roboto", sans-serif;
}

.comment-list ol li .comment-2 .comment-content .athor-and-rating .rating i {
    color: #EB8021;
    letter-spacing: -4px;
}

.comment-list ol li .comment-2 .comment-content .comment-text {
    margin-bottom: 13px;
}

.comment-list ol li .comment-2 .comment-content .comment-text p {
    margin-bottom: 0;
}

.comment-list ol li .comment-2 .comment-content .comment-meta {
    color: #a9adb9;
    font-size: 16px;
    margin-bottom: 10px;
}

.comment-list ol li .children {
    margin-top: 40px;
    border-top: 1px solid #eeeeee;
    padding-top: 40px;
    padding-left: 60px;
}

@media only screen and (max-width: 767px) {
    .comment-list ol li .children {
        padding-left: 20px;
    }
}

.review-form h2 {
    text-align: center;
    font-size: 36px;
    text-align: center;
    margin-bottom: 50px;
    padding-top: 70px;
    border-top: 1px solid #eeeeee;
    display: block;
    padding-bottom: 17px;
    border-bottom: 1px solid #eeeeee;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    color: #878c9b;
}

@media only screen and (max-width: 767px) {
    .review-form h2 {
        padding-top: 30px;
        font-size: 22px;
        margin-bottom: 30px;
    }
}

.review-form input {
    width: 100%;
    height: 50px;
    border: 1px solid #eeeeee;
    padding: 5px 20px;
    color: #878c9b;
}

.review-form textarea {
    width: 100%;
    height: 120px;
    border: 1px solid #eeeeee;
    padding: 10px 20px;
    color: #878c9b;
    resize: none;
}

.related-product {
    padding-top: 95px;
    border-top: 1px solid #eeeeee;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .related-product {
        padding-top: 75px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .related-product {
        padding-top: 65px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .related-product {
        padding-top: 55px;
    }
}

@media only screen and (max-width: 767px) {
    .related-product {
        padding-top: 45px;
    }
}

.related-product-active {
    margin-left: -15px;
    margin-right: -15px;
}

.related-product-active .product {
    padding-left: 15px;
    padding-right: 15px;
}

.related-product-active .slick-arrow {
    width: auto;
    height: auto;
    line-height: 0;
    padding: 0;
    background-color: transparent;
    color: #878c9b;
}

.related-product-active .slick-arrow.slick-prev {
    left: -20px;
    border-radius: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .related-product-active .slick-arrow.slick-prev {
        left: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .related-product-active .slick-arrow.slick-prev {
        left: -10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .related-product-active .slick-arrow.slick-prev {
        left: -20px;
    }
}

@media only screen and (max-width: 767px) {
    .related-product-active .slick-arrow.slick-prev {
        left: -8px;
    }
}

.related-product-active .slick-arrow.slick-next {
    right: -20px;
    border-radius: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .related-product-active .slick-arrow.slick-next {
        right: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .related-product-active .slick-arrow.slick-next {
        right: -10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .related-product-active .slick-arrow.slick-next {
        right: -20px;
    }
}

@media only screen and (max-width: 767px) {
    .related-product-active .slick-arrow.slick-next {
        right: -8px;
    }
}

.related-product-active .slick-arrow:hover {
    background-color: transparent;
    color: #EB8021;
}


/*---------------------------------------
    26. Cart CSS
-----------------------------------------*/


/*-- Cart Table --*/

.cart-table .table {
    border-bottom: 2px solid #063544;
    margin: 0;
}

@media only screen and (max-width: 767px) {
    .cart-table .table {
        border-top: 2px solid #063544;
    }
}

.cart-table .table thead {
    background-color: #063544;
}

@media only screen and (max-width: 767px) {
    .cart-table .table thead {
        display: none;
    }
}

.cart-table .table thead tr th {
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    padding: 12px 20px;
}

.cart-table .table tbody tr td {
    text-align: center;
    border: none;
    padding: 25px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #dddddd;
}

@media only screen and (max-width: 767px) {
    .cart-table .table tbody tr td {
        display: block;
        width: 100%;
        max-width: none;
        padding: 15px;
        text-align: left;
    }
}

.cart-table th.pro-thumbnail,
.cart-table td.pro-thumbnail {
    max-width: 120px;
    min-width: 100px;
    width: 120px;
}

@media only screen and (max-width: 767px) {
    .cart-table th.pro-thumbnail a,
    .cart-table td.pro-thumbnail a {
        width: 120px;
    }
}

.cart-table th.pro-title,
.cart-table td.pro-title {
    min-width: 200px;
}

.cart-table td.pro-thumbnail a {
    display: block;
    border: 1px solid #eeeeee;
}

.cart-table td.pro-thumbnail a img {
    width: 100%;
    background-color: #f6f7f8;
}

.cart-table td.pro-title a {
    font-size: 16px;
    font-weight: 600;
    color: #878c9b;
}

.cart-table td.pro-title a:hover {
    color: #EB8021;
}

.cart-table td.pro-price span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #878c9b;
}

.cart-table td.pro-quantity .pro-qty {
    display: inline-flex;
    text-align: center;
    border: 1px solid #eeeeee;
}

.cart-table td.pro-quantity .pro-qty .qtybtn {
    height: 42px;
    padding: 0 10px;
    border: none;
    background-color: transparent;
}

.cart-table td.pro-quantity .pro-qty input {
    height: 42px;
    width: 50px;
    text-align: center;
    border-width: 0 1px;
    border-style: solid;
    border-color: #eeeeee;
    color: #878c9b;
}

.cart-table td.pro-subtotal span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #878c9b;
}

.cart-table td.pro-addtocart button {
    width: 140px;
    border-radius: 50px;
    height: 36px;
    border: 1px solid #EB8021;
    line-height: 24px;
    padding: 5px 20px;
    font-weight: 700;
    text-transform: capitalize;
    color: #063544;
    background-color: #EB8021;
}

.cart-table td.pro-addtocart button:hover {
    background-color: #063544;
    border-color: #063544;
    color: #EB8021;
}

.cart-table td.pro-remove a {
    display: block;
    font-weight: 600;
    color: #878c9b;
}

.cart-table td.pro-remove a i {
    font-size: 15px;
}

.cart-table td.pro-remove a:hover {
    color: #ff0000;
}

@media only screen and (max-width: 767px) {
    .cart-table td.pro-remove a {
        width: 60px;
        text-align: center;
    }
}


/*-- Calculate Shipping --*/

.calculate-shipping {
    margin-bottom: 23px;
}

.calculate-shipping h4 {
    font-size: 20px;
    line-height: 23px;
    text-decoration: underline;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 30px;
}

.calculate-shipping form .nice-select {
    width: 100%;
    border-radius: 0;
    height: 55px;
    border: 1px solid #999999;
    padding: 9px 20px;
    color: #878c9b;
    background-color: transparent;
}

@media only screen and (max-width: 767px) {
    .calculate-shipping form .nice-select {
        height: 45px;
        line-height: inherit;
    }
}

.calculate-shipping form input {
    width: 100%;
    height: 55px;
    border: 1px solid #999999;
    line-height: 24px;
    padding: 9px 20px;
    color: #878c9b;
    color: #878c9b;
    background-color: transparent;
}

@media only screen and (max-width: 767px) {
    .calculate-shipping form input {
        height: 45px;
    }
}


/*-- Discount Coupon --*/

.discount-coupon h4 {
    font-size: 20px;
    line-height: 23px;
    text-decoration: underline;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 30px;
}

.discount-coupon form input {
    width: 100%;
    height: 55px;
    border: 1px solid #999999;
    line-height: 24px;
    padding: 9px 20px;
    color: #878c9b;
    background-color: transparent;
}

@media only screen and (max-width: 767px) {
    .discount-coupon form input {
        height: 45px;
    }
}


/*-- Cart Summary --*/

.cart-summary {
    float: right;
    max-width: 410px;
    width: 100%;
    margin-left: auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cart-summary {
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .cart-summary {
        margin-left: 0;
        max-width: 100%;
    }
}

.cart-summary .cart-summary-wrap {
    background-color: #063544;
    padding: 45px 50px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 575px) {
    .cart-summary .cart-summary-wrap {
        padding: 25px 30px;
    }
}

.cart-summary .cart-summary-wrap h4 {
    font-size: 20px;
    line-height: 23px;
    text-decoration: underline;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 30px;
    color: #EB8021;
}

.cart-summary .cart-summary-wrap p {
    font-size: 14px;
    font-weight: 600;
    line-height: 23px;
    color: #ffffff;
}

.cart-summary .cart-summary-wrap p span {
    float: right;
}

.cart-summary .cart-summary-wrap h2 {
    border-top: 1px solid #ffffff;
    padding-top: 9px;
    font-size: 18px;
    line-height: 23px;
    font-weight: 700;
    color: #EB8021;
    margin: 0;
}

.cart-summary .cart-summary-wrap h2 span {
    float: right;
}

.cart-summary .cart-summary-button {
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cart-summary .cart-summary-button {
        display: flex;
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 767px) {
    .cart-summary .cart-summary-button {
        display: flex;
        justify-content: flex-start;
    }
}

.cart-summary .cart-summary-button button {
    margin: 0 5px;
}

.cart-summary .cart-summary-button button:last-child {
    margin-right: 0;
}


/*---------------------------------------
    27. Checkout CSS
-----------------------------------------*/


/*-- Checkout Title --*/

.checkout-title {
    font-size: 20px;
    line-height: 23px;
    text-decoration: underline;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 30px;
}


/*-- Checkout Form --*/

.checkout-form label {
    display: block;
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.checkout-form .nice-select {
    width: 100%;
    background-color: transparent;
    border: 1px solid #999999;
    border-radius: 0;
    line-height: 23px;
    padding: 10px 20px;
    font-size: 14px;
    height: 45px;
    color: #878c9b;
    margin-bottom: 15px;
}

.checkout-form input {
    width: 100%;
    background-color: transparent;
    border: 1px solid #999999;
    border-radius: 0;
    line-height: 23px;
    padding: 10px 20px;
    font-size: 14px;
    color: #878c9b;
    margin-bottom: 15px;
}

.checkout-form input[type=checkbox] {
    width: auto;
}

.checkout-form .check-box {
    float: left;
    margin-right: 70px;
}

@media only screen and (max-width: 767px) {
    .checkout-form .check-box {
        margin-bottom: 10px;
    }
}

.checkout-form .check-box:last-child {
    margin-right: 0;
}

.checkout-form .check-box input[type=checkbox] {
    display: none;
}

.checkout-form .check-box input[type=checkbox]+label {
    position: relative;
    padding-left: 30px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #063544;
    margin: 0;
}

.checkout-form .check-box input[type=checkbox]+label::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid #999999;
    content: "";
    transition: all 0.3s ease 0s;
}

.checkout-form .check-box input[type=checkbox]+label::after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "";
    font-family: Fontawesome;
    font-size: 12px;
    line-height: 20px;
    opacity: 0;
    color: #063544;
    width: 20px;
    text-align: center;
    transition: all 0.3s ease 0s;
}

.checkout-form .check-box input[type=checkbox]:checked+label::before {
    border: 2px solid #063544;
}

.checkout-form .check-box input[type=checkbox]:checked+label::after {
    opacity: 1;
}


/*-- Shipping Form --*/

#shipping-form {
    display: none;
}


/*-- Checkout Cart Total --*/

.checkout-cart-total {
    background-color: #063544;
    padding: 45px;
}

@media only screen and (max-width: 575px) {
    .checkout-cart-total {
        padding: 30px;
    }
}

.checkout-cart-total h4 {
    flex-basis: 18px;
    line-height: 23px;
    font-weight: 700;
    color: #EB8021;
}

.checkout-cart-total h4:first-child {
    margin-top: 0;
    margin-bottom: 25px;
}

.checkout-cart-total h4:last-child {
    margin-top: 15px;
    margin-bottom: 0;
}

.checkout-cart-total h4 span {
    float: right;
    display: block;
}

.checkout-cart-total ul {
    border-bottom: 1px solid #ffffff;
}

.checkout-cart-total ul li {
    color: #ffffff;
    font-size: 14px;
    line-height: 23px;
    font-weight: 600;
    display: block;
    margin-bottom: 16px;
}

.checkout-cart-total ul li span {
    color: #ffffff;
    float: right;
}

.checkout-cart-total p {
    font-size: 14px;
    line-height: 30px;
    font-weight: 600;
    color: #ffffff;
    padding: 10px 0;
    border-bottom: 1px solid #ffffff;
    margin: 0;
}

.checkout-cart-total p span {
    float: right;
}


/*-- Checkout Payment Method --*/

.checkout-payment-method {
    background-color: #063544;
    padding: 45px;
}

@media only screen and (max-width: 575px) {
    .checkout-payment-method {
        padding: 30px;
    }
}


/*-- Single Payment Method --*/

.single-method {
    margin-bottom: 20px;
}

.single-method:last-child {
    margin-bottom: 0;
}

.single-method input[type=radio] {
    display: none;
}

.single-method input[type=radio]+label {
    position: relative;
    padding-left: 30px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.single-method input[type=radio]+label::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid #ffffff;
    content: "";
    transition: all 0.3s ease 0s;
}

.single-method input[type=radio]+label::after {
    position: absolute;
    left: 5px;
    top: 5px;
    display: block;
    content: "";
    opacity: 0;
    background-color: #EB8021;
    width: 10px;
    text-align: center;
    height: 10px;
    transition: all 0.3s ease 0s;
}

.single-method input[type=radio]:checked+label::before {
    border: 2px solid #EB8021;
}

.single-method input[type=radio]:checked+label::after {
    opacity: 1;
}

.single-method input[type=checkbox] {
    display: none;
}

.single-method input[type=checkbox]+label {
    position: relative;
    padding-left: 30px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.single-method input[type=checkbox]+label::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    display: block;
    border: 2px solid #ffffff;
    content: "";
    transition: all 0.3s ease 0s;
}

.single-method input[type=checkbox]+label::after {
    position: absolute;
    left: 4px;
    top: 4px;
    display: block;
    content: "";
    opacity: 0;
    background-color: #EB8021;
    width: 8px;
    text-align: center;
    height: 8px;
    transition: all 0.3s ease 0s;
}

.single-method input[type=checkbox]:checked+label::before {
    border: 2px solid #EB8021;
}

.single-method input[type=checkbox]:checked+label::after {
    opacity: 1;
}

.single-method p {
    display: none;
    margin-top: 8px;
    font-size: 14px;
    color: #ffffff;
    line-height: 23px;
}


/*-- Place Order --*/

.place-order {
    margin-top: 40px;
    float: left;
}


/*----------------------------------------*/


/*  28. My Account CSS
/*----------------------------------------*/

.form-login-title>h2,
.form-register-title>h2 {
    font-size: 30px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 26px;
    color: #444;
}

.login-form,
.register-form {
    padding: 20px;
    border: 1px solid #d3ced2;
    margin: 30px 0;
    text-align: left;
    border-radius: 5px;
}

.form-fild,
.login-submit,
.lost-password,
.register-submit {
    margin-bottom: 10px;
}

.form-fild p {
    margin: 0;
}

.form-fild p span.required {
    color: #f23838;
}

.form-fild input {
    width: 100%;
    padding: 0 15px;
    height: 45px;
    border: 1px solid #dddddd;
    color: #878c9b;
    border-radius: 5px;
}

.lost-password>a {
    color: #a43d21;
}

.lost-password>a:hover {
    color: #EB8021;
}


/*----------------------------------------*/


/*  29. Portfolio Details CSS
/*----------------------------------------*/

.image-slider-3 {
    margin-left: -15px;
    margin-right: -15px;
}

.image-slider-3 .col-md-4 {
    padding-left: 15px;
    padding-right: 15px;
}

.portfolio-details-content {
    padding-bottom: 50px;
}

.portfolio-details-content h3 {
    margin-bottom: 20px;
    font-size: 36px;
    line-height: 1.5;
    font-weight: 700;
    color: #063544;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio-details-content h3 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-details-content h3 {
        font-size: 28px;
    }
}

.portfolio-details-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #878c9b;
    margin-bottom: 25px;
}

.portfolio-details-content a {
    font-size: 18px;
    line-height: 1.2;
    color: #063544;
    display: block;
}

.portfolio-details-list {
    margin: 0;
    padding: 50px 0 20px;
    border-top: 1px solid #dddddd;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .portfolio-details-list {
        padding: 30px 0 0;
    }
}

.portfolio-details-list li {
    float: left;
    margin-bottom: 30px;
    width: 50%;
}

@media only screen and (max-width: 767px) {
    .portfolio-details-list li {
        margin-bottom: 15px;
    }
}

.portfolio-details-list li label {
    margin-bottom: 11px;
    font-size: 16px;
    font-weight: 700;
    color: #063544;
}

.portfolio-details-list li span {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #878c9b;
}

.portfolio-details-social {
    padding: 25px 0 50px;
    border-top: 1px solid #dddddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio-details-social {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-details-social {
        flex-wrap: wrap;
        padding-bottom: 20px;
    }
}

.portfolio-details-social .post-share {
    display: flex;
    justify-content: flex-start;
}

@media only screen and (max-width: 767px) {
    .portfolio-details-social .post-share {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.portfolio-details-social .post-share a {
    font-size: 16px;
    line-height: 1.6;
    padding: 8px 10px;
    color: #063544;
}

.portfolio-details-social .post-share a:first-child {
    padding-left: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio-details-social .post-share a {
        padding: 8px 8px;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-details-social .post-share a {
        padding: 8px 8px;
    }
}

.portfolio-details-social .post-share a:hover {
    color: #EB8021;
}

.portfolio-details-social .post-view i {
    font-size: 15px;
    color: #063544;
    margin-right: 5px;
}

.portfolio-details-social .post-likes a {
    color: #878c9b;
}

.portfolio-details-social .post-likes i {
    font-size: 16px;
    color: #e35667;
    margin-right: 5px;
}

.portfolio-details-gallery {
    padding-left: 30px;
}

.portfolio-details-gallery.pr-lg-30 {
    padding-right: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio-details-gallery.pr-lg-30 {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio-details-gallery.pr-lg-30 {
        padding-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-details-gallery.pr-lg-30 {
        padding-right: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio-details-gallery {
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio-details-gallery {
        padding-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-details-gallery {
        padding-left: 0;
    }
}

.portfolio-details-gallery img {
    margin-bottom: 30px;
    width: 100%;
}

.portfolio-pagination a {
    font-size: 20px;
    font-weight: 700;
    color: #063544;
}

@media only screen and (max-width: 767px) {
    .portfolio-pagination a {
        font-size: 13px;
        font-weight: 500;
    }
}

.portfolio-pagination a i {
    font-size: 18px;
    color: #878c9b;
}

@media only screen and (max-width: 767px) {
    .portfolio-pagination a i {
        font-size: 12px;
    }
}

.portfolio-pagination a.prev i {
    margin-right: 15px;
}

@media only screen and (max-width: 767px) {
    .portfolio-pagination a.prev i {
        margin-right: 8px;
    }
}

.portfolio-pagination a.next i {
    margin-left: 15px;
}

@media only screen and (max-width: 767px) {
    .portfolio-pagination a.next i {
        margin-left: 8px;
    }
}

.portfolio-pagination a.middle-icon i {
    font-size: 16px;
    transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 767px) {
    .portfolio-pagination a.middle-icon i {
        font-size: 12px;
    }
}

.portfolio-pagination a.middle-icon:hover i {
    color: #EB8021;
}

.portfolio-pagination a:hover {
    color: #EB8021;
}

.single-protfolio {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.single-protfolio a {
    display: block;
}

.single-protfolio a img {
    width: 100%;
}

.single-protfolio a .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #063544;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.single-protfolio a .overlay>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: #ffffff;
}

.single-protfolio:hover .overlay {
    visibility: visible;
    opacity: 0.9;
}


/*-- Portfolio Slider CSS --*/

.portfolio-slider .item img {
    width: 100%;
}

.portfolio-slider .slick-arrow.slick-prev {
    left: 0px;
}

.portfolio-slider .slick-arrow.slick-next {
    right: 0px;
}

.portfolio-video {
    margin-bottom: 30px;
}

.portfolio-video iframe {
    width: 100%;
    height: 660px;
    border: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .portfolio-video iframe {
        height: 510px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio-video iframe {
        height: 390px;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio-video iframe {
        height: 300px;
    }
}


/*----------------------------------------*/


/*  30. Typography CSS
/*----------------------------------------*/

.conebrick-heading h1 {
    margin-bottom: 22px;
}

.conebrick-heading h2 {
    margin-bottom: 30px;
}

.conebrick-heading h3 {
    margin-bottom: 24px;
}

.conebrick-heading h4 {
    margin-bottom: 30px;
}

.conebrick-heading h5 {
    margin-bottom: 33px;
}

.conebrick-heading h6 {
    margin-bottom: 82px;
}

.dropcap-title h5 {
    margin-bottom: 20px;
}

.dropcaps.style-1 {
    margin-bottom: 70px;
}

.dropcaps.style-1 p {
    font-size: 16px;
    line-height: 1.6;
}

.dropcaps.style-1 .drop-cap {
    float: left;
    font-size: 56px;
    line-height: 50px;
    padding-top: 4px;
    padding-right: 12px;
    padding-left: 3px;
    color: #063544;
}

.dropcaps.style-2 {
    margin-bottom: 70px;
}

.dropcaps.style-2 p {
    font-size: 16px;
    line-height: 1.6;
}

.dropcaps.style-2 .drop-cap {
    float: left;
    font-size: 56px;
    line-height: 50px;
    padding: 7px 13px 7px 9px;
    color: #ffffff;
    margin-right: 10px;
    background-color: #063544;
}

.ck-text-box h5 {
    margin-bottom: 25px;
}

.ck-text-box h3 {
    margin-bottom: 25px;
}

.ck-text-box p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.ck-text-box-wrap {
    border: 1px solid #eeeeee;
    padding: 45px 40px 45px;
    border-radius: 5px;
    color: inherit;
    font-size: inherit;
}

.ck-text-box-wrap.style-2 {
    margin: 0;
    padding: 45px 40px 45px;
    position: relative;
    font-size: 16px;
    border: 1px solid #EB8021;
    border-radius: 5px;
    background: url(../images/icons/qute.svg);
    background-repeat: no-repeat;
    background-position: 90% 10%;
    background-size: 25px;
}

.ck-text-box-wrap h5 {
    font-size: 20px;
    margin-bottom: 8px;
}

blockquote {
    margin: 0;
    padding: 45px 40px 45px;
    padding-left: 75px;
    position: relative;
    font-size: 16px;
    border: 1px solid #EB8021;
    border-radius: 5px;
    background: url(../images/icons/qute.svg) no-repeat 22px center;
}


/*----------------------------------------*/


/*  31. List CSS
/*----------------------------------------*/


/*-- Number list CSS --*/

.single-number-list {
    display: flex;
}

.single-number-list .list-marker {
    font-size: 30px;
    margin-right: 10px;
    line-height: 1;
    min-width: 36px;
    color: #EB8021;
}

.single-number-list .list-body h3 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 1.5;
    font-family: "Roboto", sans-serif;
}

.single-number-list .list-body p {
    font-size: 16px;
    line-height: 1.625;
}


/*-- Different List CSS --*/

.different-single-list h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
}

ul.check-list {
    margin-bottom: 30px;
}

ul.check-list.red-color li i {
    color: #D52600;
}

ul.check-list li {
    display: block;
    margin-top: 15px;
}

ul.check-list li:first-child {
    margin-top: 0;
}

ul.check-list li i {
    min-width: calc(1em + 8px);
    font-size: 15px;
    margin-right: 5px;
    color: #EB8021;
}

ul.check-list li .marker {
    min-width: calc(1em + 8px);
    font-size: 16px;
    margin-right: 5px;
    color: #EB8021;
}

ul.check-list li .marker-sls {
    min-width: calc(1em + 8px);
    font-size: 16px;
    margin-right: 5px;
    color: #878c9b;
}

ul.check-list li span {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #878c9b;
}


/*-------------------------------
    32. Chart CSS
---------------------------------*/

.progress-wrapper h3.heading {
    font-size: 28px;
    margin-bottom: 50px;
    font-weight: 700;
    line-height: 1.5;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .progress-wrapper h3.heading {
        margin-bottom: 40px;
        font-size: 24px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .progress-wrapper h3.heading {
        margin-bottom: 30px;
        font-size: 22px;
    }
}

@media only screen and (max-width: 767px) {
    .progress-wrapper h3.heading {
        margin-bottom: 20px;
        font-size: 20px;
    }
}

.progress-charts h6.heading {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
}

.progress-charts .progress {
    height: 4px;
    overflow: visible;
    font-size: 14px;
    background-color: #f5f5f5;
    border-radius: 0;
}

.progress-charts .progress .progress-bar {
    overflow: visible;
    position: relative;
    background: #EB8021;
}

.progress-charts .progress .progress-bar::before {
    position: absolute;
    top: -4px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.progress-charts .progress .progress-bar.custom-color--2 {
    background-color: #ffffff;
}

.progress-charts .progress .progress-bar.custom-color--3 {
    background-color: #063544;
}

.progress-charts .progress .progress-bar span.percent-label {
    position: absolute;
    color: #222;
    right: -7px;
    top: -35px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #878c9b;
    font-family: "Roboto", sans-serif;
}

.radial-progress {
    position: relative;
}

@media only screen and (max-width: 767px) {
    .radial-progress {
        display: inline-block;
    }
}

.radial-progress .circle-text {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

.radial-progress .circle-text span.count {
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    color: #878c9b;
    position: relative;
}

.radial-progress .circle-text span.count::after {
    position: absolute;
    content: "%";
    right: -12px;
    color: #878c9b;
    font-size: 0.8em;
    top: 4px;
}

.radial-progress-single.progress-flex {
    text-align: center;
}

.radial-progress-single .contant {
    margin-top: 25px;
}

.radial-progress-single .contant h3 {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 12px;
}

.radial-progress-single .contant p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}


/*---------------------------------------
    33. Blog CSS
-----------------------------------------*/


/*-- Blog Slider --*/

.blog-carousel-active {
    margin-left: -15px;
    margin-right: -15px;
}

.blog-carousel-active .col-lg-4 {
    padding-left: 15px;
    padding-right: 15px;
}

.blog-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    border: none;
    background-color: transparent;
    color: #EB8021;
    padding: 10px;
    width: 44px;
    height: 44px;
    border-radius: 0;
    text-align: center;
    box-shadow: 0 5px 10px rgba(16, 19, 30, 0.15);
    opacity: 0;
}

.blog-slider .slick-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #EB8021;
    background-color: transparent;
    transition: all 0.3s ease 0s;
}

.blog-slider .slick-arrow i {
    font-size: 24px;
    line-height: 20px;
    display: block;
}

.blog-slider .slick-arrow.slick-prev {
    left: -40px;
    margin-left: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .blog-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .blog-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

.blog-slider .slick-arrow.slick-next {
    right: -40px;
    margin-right: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .blog-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .blog-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .blog-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

.blog-slider .slick-arrow:hover {
    background-color: #EB8021;
    color: #ffffff;
}

.blog-slider .slick-arrow:hover::before {
    margin-left: 6px;
    margin-top: 6px;
}

.blog-slider:hover .slick-arrow {
    opacity: 1;
}

.blog-slider:hover .slick-arrow.slick-prev {
    margin-left: 0;
}

.blog-slider:hover .slick-arrow.slick-next {
    margin-right: 0;
}

.blog-slider .slick-dots {
    width: 100%;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    justify-content: center;
}

.blog-slider .slick-dots li {
    margin: 0 5px;
}

.blog-slider .slick-dots li button {
    display: block;
    padding: 0;
    width: 12px;
    height: 12px;
    border: none;
    background-color: #ffffff;
    text-indent: -9999px;
    border-radius: 50px;
}

.blog-slider .slick-dots li.slick-active button {
    background-color: #EB8021;
}


/*-- Home Blog --*/

.home-blog-wrap {
    padding: 30px 100px;
}

.home-blog-wrap.blog-style-4 {
    padding: 0;
}

.home-blog-wrap.blog-style-4 .read-more-btn {
    color: #ffffff;
}

.home-blog-wrap.blog-style-4 .read-more-btn i {
    color: #EB8021;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .home-blog-wrap {
        padding: 55px 40px;
        padding-bottom: 80px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .home-blog-wrap {
        padding: 45px 40px;
        padding-bottom: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .home-blog-wrap {
        padding: 40px 40px;
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .home-blog-wrap {
        padding: 30px 15px;
        padding-bottom: 50px;
    }
}

a.read-more-btn {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #063544;
    margin-top: 20px;
}

a.read-more-btn i {
    font-size: 10px;
    margin-left: 2px;
    color: #EB8021;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

a.read-more-btn:hover i {
    margin-left: 8px;
}

.single-home-blog {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.single-home-blog.home-blog-4 {
    border-color: rgba(255, 255, 255, 0.1);
}

.single-home-blog.home-blog-4:first-child {
    border-color: rgba(255, 255, 255, 0.1);
}

.single-home-blog.home-blog-4 .blog-content h2 {
    color: #ffffff;
}

.single-home-blog.home-blog-4 .blog-content h2 a:hover {
    color: #EB8021;
}

.single-home-blog:first-child {
    border-top: 1px solid #eee;
}

.single-home-blog .blog-img {
    max-width: 100px;
    flex: 1 0 100px;
}

.single-home-blog .blog-content {
    flex: 1 0 calc(100% - 100px);
    padding-left: 20px;
}

.single-home-blog .blog-content h2 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.5;
}

@media only screen and (max-width: 767px) {
    .single-home-blog .blog-content h2 {
        font-size: 14px;
        margin-bottom: 4px;
    }
}

.single-home-blog .blog-content .meta {
    display: flex;
    flex-wrap: wrap;
}

.single-home-blog .blog-content .meta li {
    font-size: 14px;
    color: #c0c3c9;
    margin-right: 10px;
}

@media only screen and (max-width: 767px) {
    .single-home-blog .blog-content .meta li {
        font-size: 12px;
    }
}

.single-home-blog .blog-content .meta li i {
    font-size: 10px;
    margin-right: 4px;
}

.single-home-blog-six {
    position: relative;
    overflow: hidden;
}

.single-home-blog-six::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #063544;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.single-home-blog-six:hover .blog-content .content-top {
    transform: translate(0, 0);
    opacity: 1;
}

.single-home-blog-six:hover .blog-content .content-bottom {
    transform: translate(0, 0);
    opacity: 1;
}

.single-home-blog-six:hover::before {
    opacity: 0.95;
}

.single-home-blog-six .blog-img a {
    display: block;
}

.single-home-blog-six .blog-img a img {
    width: 100%;
}

.single-home-blog-six .blog-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
}

.single-home-blog-six .blog-content .content-top {
    transform: translate(0, -50%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.single-home-blog-six .blog-content .content-top .meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.single-home-blog-six .blog-content .content-top .meta li {
    font-size: 14px;
    color: #c0c3c9;
    margin-right: 10px;
}

@media only screen and (max-width: 767px) {
    .single-home-blog-six .blog-content .content-top .meta li {
        font-size: 12px;
    }
}

.single-home-blog-six .blog-content .content-top .meta li i {
    font-size: 10px;
    margin-right: 4px;
}

.single-home-blog-six .blog-content .content-top .meta li a:hover {
    color: #D52600;
}

.single-home-blog-six .blog-content .content-top h2 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.5;
    color: #D52600;
}

@media only screen and (max-width: 767px) {
    .single-home-blog-six .blog-content .content-top h2 {
        font-size: 14px;
        margin-bottom: 4px;
    }
}

.single-home-blog-six .blog-content .content-top h2 a:hover {
    color: #D52600;
}

.single-home-blog-six .blog-content .content-bottom {
    transform: translate(0, 50%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.single-home-blog-six .blog-content .content-bottom a {
    color: #ffffff;
}

.single-home-blog-six .blog-content .content-bottom a i {
    color: #D52600;
}


/*-- Single Blog CSS --*/

.single-blog {
    margin-bottom: 30px;
    border: 1px solid #eee;
    background-color: #fff;
}

.single-blog.blog-clasic {
    padding: 30px;
}

@media only screen and (max-width: 767px) {
    .single-blog.blog-clasic {
        padding: 15px;
    }
}

.single-blog.blog-clasic .blog-image {
    margin-bottom: 20px;
}

.single-blog.blog-clasic .blog-content {
    padding: 0;
}

.single-blog.blog-clasic .blog-content h2 {
    font-size: 24px;
}

@media only screen and (max-width: 767px) {
    .single-blog.blog-clasic .blog-content h2 {
        font-size: 18px;
    }
}

.single-blog .blog-image a {
    display: block;
}

.single-blog .blog-image a img {
    width: 100%;
}

.single-blog .blog-content {
    padding: 20px;
}

.single-blog .blog-content h2 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 0;
}

.single-blog .blog-content .meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.single-blog .blog-content .meta li {
    font-size: 14px;
    color: #c0c3c9;
    margin-right: 10px;
}

@media only screen and (max-width: 767px) {
    .single-blog .blog-content .meta li {
        font-size: 12px;
    }
}

.single-blog .blog-content .meta li i {
    font-size: 10px;
    margin-right: 4px;
}


/*-- Blog List CSS --*/

.blog-list {
    margin-bottom: 30px;
    border: 1px solid #eee;
    background-color: #fff;
}

.blog-list .blog-image a {
    display: block;
}

.blog-list .blog-image a img {
    width: 100%;
}

.blog-list .blog-content {
    padding: 20px 30px 20px 0;
}

@media only screen and (max-width: 767px) {
    .blog-list .blog-content {
        padding: 15px;
    }
}

.blog-list .blog-content h2 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 0;
}

.blog-list .blog-content .meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.blog-list .blog-content .meta li {
    font-size: 14px;
    color: #c0c3c9;
    margin-right: 10px;
}

@media only screen and (max-width: 767px) {
    .blog-list .blog-content .meta li {
        font-size: 12px;
    }
}

.blog-list .blog-content .meta li i {
    font-size: 10px;
    margin-right: 4px;
}


/*-- Blog Details CSS --*/

.blog-details .blog-quote {
    padding: 35px 30px 60px;
    background-position: bottom 40px right 40px;
    position: relative;
    background-color: #063544;
    margin-top: -30px;
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .blog-details .blog-quote {
        margin-top: -15px;
        margin-left: -15px;
        margin-right: -15px;
    }
}

.blog-details .blog-quote::before {
    content: "";
    font-family: FontAwesome;
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-size: 30px;
    color: #EB8021;
}

.blog-details .blog-quote h3 {
    margin-bottom: 11px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.55;
}

@media only screen and (max-width: 767px) {
    .blog-details .blog-quote h3 {
        font-size: 18px;
    }
}

.blog-details .blog-quote h6 {
    letter-spacing: 1.75px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0;
    color: #EB8021;
}

@media only screen and (max-width: 767px) {
    .blog-details .blog-quote h6 {
        font-size: 14px;
    }
}

.blog-details .blog-link {
    padding: 40px 35px;
    background-color: #EB8021;
    margin-bottom: 20px;
    margin-top: -30px;
    margin-left: -30px;
    margin-right: -30px;
}

@media only screen and (max-width: 767px) {
    .blog-details .blog-link {
        padding: 20px 15px;
        margin-top: -15px;
        margin-left: -15px;
        margin-right: -15px;
    }
}

.blog-details .blog-link a {
    color: #ffffff;
    letter-spacing: 0.2px;
    font-size: 24px;
    line-height: 1.55;
    word-wrap: break-word;
}

@media only screen and (max-width: 767px) {
    .blog-details .blog-link a {
        font-size: 18px;
    }
}

.blog-details .blog-video iframe {
    width: 100%;
    height: 340px;
    border: 0;
}

.blog-details .blog-audio {
    margin-bottom: 20px;
}

.blog-details .blog-audio iframe {
    width: 100%;
    height: auto;
    border: 0;
}

.blog-details .blog-content .entry-content {
    margin: 30px 0 35px;
}

.blog-details .blog-content .entry-content blockquote {
    margin: 0;
    padding: 30px 30px 30px 70px;
    position: relative;
    font-size: 16px;
    border: 1px solid #EB8021;
    border-radius: 5px;
    background: url(../images/icons/qute.svg) no-repeat 22px center;
    margin-bottom: 1.5em;
}

.blog-details .blog-footer {
    border-top: 1px solid #eeeeee;
    padding-top: 25px;
}

.blog-details .blog-footer .post-tags {
    display: flex;
}

.blog-details .blog-footer .post-tags span {
    text-transform: capitalize;
    font-weight: 700;
    font-size: 16px;
    color: #063544;
}

.blog-details .blog-footer .post-tags a {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    padding: 3px 8px;
    color: #063544;
}

.blog-details .blog-footer .post-tags a:hover {
    color: #EB8021;
}

.blog-details .blog-footer .post-share {
    display: flex;
    justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
    .blog-details .blog-footer .post-share {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.blog-details .blog-footer .post-share span {
    text-transform: capitalize;
    font-weight: 700;
    font-size: 16px;
    color: #063544;
    padding: 8px 0;
}

.blog-details .blog-footer .post-share a {
    font-size: 16px;
    line-height: 1.6;
    padding: 8px 10px;
    color: #063544;
}

@media only screen and (max-width: 767px) {
    .blog-details .blog-footer .post-share a {
        padding: 8px 8px;
    }
}

.blog-details .blog-footer .post-share a:hover {
    color: #EB8021;
}


/*-- Blog Pagination CSS --*/

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

@media only screen and (max-width: 575px) {
    .post-navigation {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.post-navigation .nav-previous a {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    color: #063544;
}

@media only screen and (max-width: 767px) {
    .post-navigation .nav-previous a {
        font-size: 14px;
    }
}

.post-navigation .nav-previous a i {
    padding-right: 25px;
}

@media only screen and (max-width: 767px) {
    .post-navigation .nav-previous a i {
        padding-right: 8px;
    }
}

.post-navigation .nav-previous a:hover {
    color: #EB8021;
}

.post-navigation .nav-next a {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    color: #063544;
}

@media only screen and (max-width: 767px) {
    .post-navigation .nav-next a {
        font-size: 14px;
        margin-left: 10px;
    }
}

.post-navigation .nav-next a i {
    padding-left: 25px;
}

@media only screen and (max-width: 767px) {
    .post-navigation .nav-next a i {
        padding-left: 8px;
    }
}

.post-navigation .nav-next a:hover {
    color: #EB8021;
}


/*-- Comment List Wrap CSS --*/

.comment-list-wrap {
    margin: 0 0 30px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    padding: 25px 30px 30px;
    border-top: 5px solid #EB8021;
}

.comment-list-wrap h2.title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 20px;
    padding-bottom: 17px;
}

.comment-list-wrap ol {
    list-style: none;
    margin: 0 0 30px;
    padding-left: 0;
}

.comment-list-wrap ol li .comment-2 {
    display: flex;
}

@media only screen and (max-width: 767px) {
    .comment-list-wrap ol li .comment-2 {
        flex-wrap: wrap;
    }
}

.comment-list-wrap ol li .comment-2 .comment-author {
    margin-right: 30px;
    max-width: 115px;
    flex: 0 0 115px;
}

@media only screen and (max-width: 767px) {
    .comment-list-wrap ol li .comment-2 .comment-author {
        margin-right: 0;
        max-width: 100%;
        flex: 100%;
        margin-bottom: 20px;
    }
}

.comment-list-wrap ol li .comment-2 .comment-author img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}

.comment-list-wrap ol li .comment-2 .comment-content {
    max-width: calc(100% - 115px);
    flex: 1 0 calc(100% - 115px);
}

@media only screen and (max-width: 767px) {
    .comment-list-wrap ol li .comment-2 .comment-content {
        max-width: 100%;
        flex: 100%;
    }
}

.comment-list-wrap ol li .comment-2 .comment-content h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 10px;
}

.comment-list-wrap ol li .comment-2 .comment-content .comment-text {
    margin-bottom: 13px;
}

.comment-list-wrap ol li .comment-2 .comment-content .comment-text p {
    margin-bottom: 0;
}

.comment-list-wrap ol li .comment-2 .comment-content .comment-meta {
    color: #C0C3C9;
    font-size: 14px;
}

.comment-list-wrap ol li .children {
    margin-top: 40px;
    border-top: 1px solid #eeeeee;
    padding-top: 40px;
    padding-left: 60px;
}

@media only screen and (max-width: 767px) {
    .comment-list-wrap ol li .children {
        padding-left: 20px;
    }
}


/*-- Comment Form CSS --*/

.comment-form-wrap {
    margin: 0 0 30px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    padding: 25px 30px 30px;
    border-top: 5px solid #EB8021;
}

.comment-form-wrap h2.title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 20px;
    padding-bottom: 17px;
}

.comment-form-wrap .single-comment-box {
    margin-bottom: 20px;
}

.comment-form-wrap .single-comment-box input {
    width: 100%;
    border: 1px solid #dddddd;
    padding: 5px 20px;
    color: #878c9b;
    border-radius: 5px;
    height: 45px;
}

.comment-form-wrap .single-comment-box textarea {
    width: 100%;
    height: 200px;
    border: 1px solid #eeeeee;
    padding: 10px 20px;
    color: #878c9b;
    resize: none;
    border-radius: 5px;
}


/*-- Blog Carousel CSS --*/

.blog-carousel-active .slick-arrow {
    width: 50px;
}

.blog-carousel-active .slick-arrow.slick-prev {
    left: 15px;
}

.blog-carousel-active .slick-arrow.slick-next {
    right: 15px;
}

.blog-carousel-active .slick-dots {
    margin: 30px 0 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-carousel-active .slick-dots {
        margin: 0;
    }
}

@media only screen and (max-width: 767px) {
    .blog-carousel-active .slick-dots {
        margin: 0;
    }
}


/*-- Blog --*/

.blog .blog-inner .media {
    margin-bottom: 20px;
}

.blog .blog-inner .media .image {
    display: block;
}

.blog .blog-inner .media .image img {
    width: 100%;
}

.blog .blog-inner .content .meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.blog .blog-inner .content .meta li {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.blog .blog-inner .content .meta li::after {
    content: "-";
    margin: 0 10px;
}

.blog .blog-inner .content .meta li:last-child::after {
    display: none;
}

.blog .blog-inner .content .title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
}

@media only screen and (max-width: 479px) {
    .blog .blog-inner .content .title {
        font-size: 20px;
    }
}

.blog .blog-inner .content .desc {
    margin-top: 20px;
}

.blog .blog-inner .content .read-more {
    margin-top: 15px;
    font-family: "Roboto Condensed", sans-serif;
    color: #063544;
    display: inline-flex;
    align-items: center;
}

.blog .blog-inner .content .read-more i {
    margin-left: 6px;
    transition: all 0.3s ease 0s;
}

.blog .blog-inner .content .read-more:hover {
    color: #EB8021;
}

.blog .blog-inner .content .read-more:hover i {
    margin-left: 10px;
}


/*-- Blog Details --*/

.blog-details .blog-inner .media {
    margin-bottom: 30px;
}

.blog-details .blog-inner .media .image {
    display: block;
}

.blog-details .blog-inner .media .image img {
    width: 100%;
}

.blog-details .blog-inner .content .meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.blog-details .blog-inner .content .meta li {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.blog-details .blog-inner .content .meta li::after {
    content: "-";
    margin: 0 10px;
}

.blog-details .blog-inner .content .meta li:last-child::after {
    display: none;
}

.blog-details .blog-inner .content .title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .blog-details .blog-inner .content .title {
        font-size: 24px;
    }
}

@media only screen and (max-width: 479px) {
    .blog-details .blog-inner .content .title {
        font-size: 20px;
    }
}

.blog-details .blog-inner .content .desc {
    margin-top: 20px;
}

.blog-details .blog-inner .content .tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.blog-details .blog-inner .content .tags li {
    display: flex;
    flex-wrap: wrap;
    line-height: 24px;
    margin-right: 15px;
}

.blog-details .blog-inner .content .tags li::after {
    content: ",";
    margin-left: 3px;
}

.blog-details .blog-inner .content .tags li:first-child::after,
.blog-details .blog-inner .content .tags li:last-child::after {
    display: none;
}

.blog-details .blog-inner .content .tags li i {
    font-size: 18px;
    line-height: 24px;
}

.blog-details .blog-inner .content .tags li a {
    display: block;
}


/*---------------------------------------
    34. Comment CSS
-----------------------------------------*/


/*-- Comment Wrap --*/

.comment-wrapper h3 {
    margin-bottom: 30px;
}


/*-- Comment Form --*/

.comment-form input {
    width: 100%;
    height: 50px;
    border: 1px solid #eeeeee;
    padding: 5px 20px;
    color: #878c9b;
}

.comment-form textarea {
    width: 100%;
    height: 120px;
    border: 1px solid #eeeeee;
    padding: 10px 20px;
    color: #878c9b;
    resize: none;
}

.comment-form input[type=submit],
.comment-form button,
.comment-form .submit {
    width: auto;
    height: 50px;
    border: none;
    padding: 5px 30px;
    background-color: #EB8021;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
}

.comment-form input[type=submit]:hover,
.comment-form button:hover,
.comment-form .submit:hover {
    background-color: #063544;
}


/*---------------------------------------
    35. Sidebar CSS
-----------------------------------------*/


/*-- Sidebar --*/

.common-sidebar-widget {
    margin: 0 0 45px;
    background-color: transparent;
    border: none;
}

.common-sidebar-widget.sidebar-widget-two {
    margin: 0 0 30px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    padding: 25px 30px 30px;
    border-top: 5px solid #EB8021;
}

.common-sidebar-widget:last-child {
    margin-bottom: 0;
}


/*-- Sidebar Title --*/

.sidebar-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    border-bottom: 1px solid #EB8021;
    margin-bottom: 25px;
    padding-bottom: 5px;
}


/*-- Sidebar Search --*/

.sidebar-search-form {
    position: relative;
}

.sidebar-search-form input {
    width: 100%;
    outline: none;
    border: 1px solid #dddddd;
    border-radius: 5px;
    color: #878c9b;
    background-color: #ffffff;
    height: 45px;
    padding: 0 15px;
    padding-right: 50px;
}

.sidebar-search-form button {
    position: absolute;
    top: 0;
    right: 0;
    color: #063544;
    background: transparent;
    border: transparent;
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
    font-size: 15px;
}


/*-- Sidebar List --*/

.sidebar-list {
    border: 1px solid #eeeeee;
    border-bottom: 0;
}

.sidebar-list.sidebar-list-two {
    border: 0;
}

.sidebar-list.sidebar-list-two li {
    display: block;
    margin-bottom: 13px;
}

.sidebar-list.sidebar-list-two li a {
    padding: 0;
    border-bottom: 0;
    font-size: 16px;
    font-weight: 400;
}

.sidebar-list.sidebar-list-two li a:hover {
    background-color: transparent;
    color: #EB8021;
}

.sidebar-list.sidebar-list-two li.active a {
    background-color: transparent;
    color: #EB8021;
}

.sidebar-list li a {
    display: block;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 15px;
    border-bottom: 1px solid #eeeeee;
    color: #063544;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.sidebar-list li a:hover {
    background: #EB8021;
    color: #ffffff;
}

.sidebar-list li.active a {
    background: #EB8021;
    color: #ffffff;
}


/*-- Sidebar Brochures List --*/

.sidebar-brochures-list li a {
    display: block;
    background-color: #eeeeee;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #063544;
}

.sidebar-brochures-list li a i {
    margin-right: 5px;
    font-size: 15px;
    font-weight: normal;
}

.sidebar-brochures-list li a:hover {
    color: #EB8021;
}


/*-- Sidebar Address --*/

.sidebar-address h3 {
    margin-bottom: 0;
    line-height: 1.5;
}

.sidebar-address ul {
    padding-top: 0;
    border-top: 0;
}

.single-input {
    display: block;
    margin-bottom: 20px;
    float: left;
    width: 100%;
}

.single-input input {
    padding: 0 15px;
    height: 45px;
    border: 1px solid #dddddd;
    width: 100%;
    color: #878c9b;
    border-radius: 5px;
    font-size: 15px;
}

.full-btn {
    margin-top: 20px;
}

.full-btn .btn {
    width: 100%;
}


/*-- Sidebar Blog --*/

.sidebar-blog {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e6e7;
}

.sidebar-blog:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.sidebar-blog .image {
    max-width: 80px;
    flex: 1 0 80px;
}

.sidebar-blog .image img {
    width: 100%;
}

.sidebar-blog .content {
    flex: 1 0 calc(100% - 80px);
    padding-left: 15px;
}

.sidebar-blog .content h5 {
    font-size: 16px;
    line-height: 1.5;
}

.sidebar-blog .content span {
    font-size: 13px;
    display: block;
    line-height: 18px;
}


/*-- Sidebar Tags --*/

.sidebar-tag {
    display: flex;
    flex-wrap: wrap;
}

.sidebar-tag li {
    margin: 0 2px;
}

.sidebar-tag li a {
    display: block;
    font-size: 16px;
    line-height: 1.5;
}

.sidebar-tag li a:hover {
    color: #EB8021;
}


/*-- Sidebar Product --*/

.sidebar-product {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e6e7;
}

.sidebar-product:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.sidebar-product .image {
    max-width: 80px;
    flex: 1 0 80px;
}

.sidebar-product .image img {
    width: 100%;
    border: 1px solid #f1f2f3;
}

.sidebar-product .content {
    flex: 1 0 calc(100% - 80px);
    padding-left: 15px;
}

.sidebar-product .content .title {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 5px;
    font-weight: 700;
}

.sidebar-product .content .price span {
    font-size: 16px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
}

.sidebar-product .content .price span.new {
    color: #EB8021;
}

.sidebar-product .content .price span.old {
    margin-right: 5px;
    color: #878c9b;
    text-decoration: line-through;
}

.sidebar-product .content .ratting {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.sidebar-product .content .ratting i {
    font-size: 12px;
    line-height: 18px;
    margin-right: 5px;
    color: #EB8021;
    letter-spacing: -4px;
}

.sidebar-product .content .ratting i:last-child {
    margin-right: 0;
}


/*-- Sidebar Banner Image CSS --*/

.banner-image {
    position: relative;
    overflow: hidden;
}

.banner-image::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    content: "";
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
    opacity: 0;
}

.banner-image:hover::before {
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
    opacity: 1;
}

.banner-image a {
    display: block;
}

.banner-image a img {
    width: 100%;
}


/*----------------------------------------*/


/*  36. Brand CSS
/*----------------------------------------*/

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

.border-bottom {
    border-bottom: 1px solid #eee;
}


/*-- Brand Slider --*/

.brand-slider .slick-list .slick-track {
    display: flex;
    align-items: center;
}

.brand-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -15px;
    z-index: 9;
    border: none;
    background-color: #ffffff;
    color: #EB8021;
    padding: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 5px 10px rgba(16, 19, 30, 0.15);
    opacity: 0;
}

.brand-slider .slick-arrow i {
    font-size: 24px;
    line-height: 24px;
    display: block;
}

.brand-slider .slick-arrow.slick-prev {
    left: -7px;
    margin-left: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .brand-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .brand-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .brand-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .brand-slider .slick-arrow.slick-prev {
        left: 8px;
    }
}

.brand-slider .slick-arrow.slick-next {
    right: -7px;
    margin-right: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .brand-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .brand-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .brand-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .brand-slider .slick-arrow.slick-next {
        right: 8px;
    }
}

.brand-slider .slick-arrow:hover {
    background-color: #EB8021;
    color: #ffffff;
}

.brand-slider:hover .slick-arrow {
    opacity: 1;
}

.brand-slider:hover .slick-arrow.slick-prev {
    margin-left: 0;
}

.brand-slider:hover .slick-arrow.slick-next {
    margin-right: 0;
}

.brand-slider .slick-dots {
    width: 100%;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    justify-content: center;
}

.brand-slider .slick-dots li {
    margin: 0 5px;
}

.brand-slider .slick-dots li button {
    display: block;
    padding: 0;
    width: 12px;
    height: 12px;
    border: none;
    background-color: #ffffff;
    text-indent: -9999px;
    border-radius: 50px;
}

.brand-slider .slick-dots li.slick-active button {
    background-color: #EB8021;
}


/*-- Brand --*/

.brand {
    text-align: center;
}

.brand img {
    max-width: 100%;
    margin: auto;
}


/*---------------------------------------
    37. Contact CSS
-----------------------------------------*/


/*-- Contact Form --*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-form-wrap.margin-0 {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 767px) {
    .contact-form-wrap.margin-0 {
        margin-top: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-form-wrap {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .contact-form-wrap {
        margin-top: 40px;
    }
}

.contact-form-wrap h2 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 35px;
}

@media only screen and (max-width: 479px) {
    .contact-form-wrap h2 {
        font-size: 24px;
    }
}

.contact-form-wrap input {
    width: 100%;
    height: 50px;
    border: 1px solid #dddddd;
    padding: 5px 20px;
    color: #878c9b;
    border-radius: 5px;
    height: 45px;
}

.contact-form-wrap input:focus {
    border-color: #777777;
    color: #111111;
}

.contact-form-wrap textarea {
    width: 100%;
    height: 200px;
    border: 1px solid #eeeeee;
    padding: 10px 20px;
    color: #878c9b;
    resize: none;
    border-radius: 5px;
}

.contact-form-wrap textarea:focus {
    border-color: #777777;
    color: #111111;
}

.contact-form-wrap button {
    margin-top: 20px;
}

.form-messege.success {
    color: #1dbc51;
    font-weight: 700;
}

.form-messege.error {
    color: #ff1313;
}


/*-- Flow Us CSS --*/

.flowus-area h2 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 25px;
}

@media only screen and (max-width: 479px) {
    .flowus-area h2 {
        font-size: 24px;
    }
}

.flowus-area ul li {
    padding: 5px 10px;
}

.flowus-area ul li a {
    display: block;
    color: #878c9b;
    text-transform: capitalize;
    font-size: 16px;
    line-height: 1.6;
}

.flowus-area ul li a i {
    color: #063544;
    margin-right: 15px;
}

.flowus-area ul li a:hover {
    color: #878c9b;
}

.flowus-area ul li a:hover i {
    color: #EB8021;
}


/*----------------------------------------*/


/*  38. Footer CSS
/*----------------------------------------*/


/*-- Footer Widget --*/

@media only screen and (max-width: 767px) {
    .footer-widget:not(:last-child) {
        margin-bottom: 20px !important;
    }
}

.footer-widget.blue-color>a>i {
    color: #EB8021;
}

.footer-widget.blue-color ul.f-menu-link li>a:hover {
    color: #EB8021;
}

.footer-widget.blue-color ul.address li>a:hover {
    color: #EB8021;
}

.footer-widget.red-color>a>i {
    color: #D52600;
}

.footer-widget.red-color ul.f-menu-link li>a:hover {
    color: #D52600;
}

.footer-widget.red-color ul.address li>a:hover {
    color: #D52600;
}

.footer-widget.orange-color>a>i {
    color: #FF7D00;
}

.footer-widget.orange-color ul.f-menu-link li>a:hover {
    color: #FF7D00;
}

.footer-widget.orange-color ul.address li>a:hover {
    color: #FF7D00;
}

.footer-widget .footer-logo a {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.footer-widget .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
    white-space: nowrap;
    text-transform: capitalize;
    margin-bottom: 23px;
}

.footer-widget .title .text {
    margin-right: 10px;
}

.footer-widget .title .shape {
    height: 5px;
    display: block;
    background-color: rgba(255, 255, 255, 0.3);
    flex: 1 0 auto;
}

.footer-widget p {
    font-size: 16px;
    line-height: 1.85;
    font-weight: 400;
    margin-bottom: 0;
    color: #878c9b;
}

.footer-widget>a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    margin-top: 15px;
}

@media only screen and (max-width: 767px) {
    .footer-widget>a.more-btn {
        margin-bottom: 10px;
    }
}

.footer-widget>a i {
    font-size: 10px;
    margin-left: 2px;
    color: #EB8021;
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.footer-widget>a:hover i {
    margin-left: 8px;
}

.footer-widget p.news-alert {
    margin-top: 7px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.footer-widget ul.f-menu-link li {
    color: #878c9b;
    display: flex;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 7px;
}

.footer-widget ul.f-menu-link li a {
    display: block;
}

.footer-widget ul.f-menu-link li a:hover {
    color: #EB8021;
}

.footer-widget ul.address {
    margin-bottom: 50px;
}

@media only screen and (max-width: 767px) {
    .footer-widget ul.address {
        margin-bottom: 30px;
    }
}

.footer-widget ul.address li {
    color: #878c9b;
    display: flex;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 7px;
}

.footer-widget ul.address li a {
    display: block;
}

.footer-widget ul.address li a:hover {
    color: #EB8021;
}


/*-- Footer Social --*/

.footer-social {
    display: flex;
}

.footer-social.blue-color a:hover {
    color: #EB8021;
}

.footer-social.red-color a:hover {
    color: #D52600;
}

.footer-social.orange-color a:hover {
    color: #FF7D00;
}

.footer-social.contact-social a {
    color: #063544;
    padding: 0 10px;
    font-size: 16px;
    margin-right: 0;
}

.footer-social.contact-social a:hover {
    color: #EB8021;
}

.footer-social.maintenance-social a {
    margin-left: 24px;
    margin-right: 0;
    padding: 0;
}

.footer-social a {
    font-size: 20px;
    margin-right: 22px;
    color: #878c9b;
    display: block;
    line-height: 1.5;
}

.footer-social a:last-child {
    margin-right: 0;
}

.footer-social a:hover {
    color: #EB8021;
}


/*-- Footer News Letter --*/

.footer-newsletter {
    position: relative;
}

.footer-newsletter.red-color::before {
    color: #D52600;
}

.footer-newsletter.red-color input {
    background-color: transparent;
    border: 1px solid #dddddd;
}

.footer-newsletter.yellow-color::before {
    color: #EB8021;
}

.footer-newsletter.yellow-color input {
    background-color: transparent;
    border: 1px solid #777777;
}

.footer-newsletter.position-center::before {
    top: 20%;
    transform: translate(0, -50%);
}

.footer-newsletter.position-center input {
    margin-bottom: 30px;
}

.footer-newsletter.position-center>button {
    position: static;
    margin: auto;
}

.footer-newsletter::before {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translate(0, -50%);
    content: "";
    color: #EB8021;
    font-family: FontAwesome;
}

@media only screen and (max-width: 767px) {
    .footer-newsletter::before {
        top: 23%;
    }
}

.footer-newsletter input {
    width: 100%;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    color: #878c9b;
    line-height: 24px;
    padding: 0px 160px;
    padding-left: 45px;
    font-size: 16px;
    height: 56px;
    border-radius: 5px;
}

@media only screen and (max-width: 767px) {
    .footer-newsletter input {
        padding: 0 15px;
        padding-left: 45px;
    }
}

.footer-newsletter>button {
    border: none;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

@media only screen and (max-width: 767px) {
    .footer-newsletter>button {
        position: static;
        margin-top: 20px;
    }
}


/*-- Footer Bottom --*/

.footer-bottom {
    padding: 35px 0;
}


/*-- Copyright --*/

.copyright p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0;
    color: #878c9b;
}

@media only screen and (max-width: 767px) {
    .copyright p {
        font-size: 13px;
        text-align: center;
    }
}

.copyright p a:hover {
    color: #878c9b;
}


/*-- Footer Nav --*/

.footer-nav.blue-color ul li a:hover {
    color: #EB8021;
}

.footer-nav.red-color ul li a:hover {
    color: #D52600;
}

.footer-nav.orange-color ul li a:hover {
    color: #FF7D00;
}

.footer-nav ul {
    display: flex;
    justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
    .footer-nav ul {
        justify-content: center;
    }
}

.footer-nav ul li {
    padding: 5px 10px;
}

@media only screen and (max-width: 767px) {
    .footer-nav ul li {
        padding: 5px 5px;
    }
}

.footer-nav ul li a {
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    color: #878c9b;
}

.footer-nav ul li a:hover {
    color: #EB8021;
}