@font-face {
    font-family: myFirstFont;
    src: url(../image/Helvetica.ttf);
  }
  @font-face {
    font-family: molla;
    src: url(../image/Molla-jEGgy.woff);
  }
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: myFirstFont, sans-serif !important;
}

:root {
    --first-color: #000000;
    --second-color: #ecdecd;
    --third-color: #1A1A1A;
    --forth-color: #000000;
    --fifth-color: #FFFFFF;
}

h1 {
    font-size: 48px;
    color: var(--third-color);
    margin-bottom: 0px;
    /* line-height: 1; */
}

h2 {
    font-size: 23px;
    color: var(--third-color);
    margin-bottom: 0px;
    /* line-height: 1; */
    text-transform: uppercase;
}

h3 {
    font-size: 16px;
    color: var(--third-color);
    margin-bottom: 0px;
    /* line-height: 1; */
}

h4 {
    font-size: 20px;
    color: var(--third-color);
    margin-bottom: 0px;
    /* line-height: 1; */
}

h5 {
    font-size: 18px;
    color: var(--third-color);
    margin-bottom: 0px;
    /* line-height: 1; */
}

p {
    font-size: 14px;
    color: var(--third-color);
    margin-bottom: 0px;
    line-height: 20px;
}

span {
    font-size: 12px;
    font-style: italic;
    margin-bottom: 0px;
    /* line-height: 1; */
}

a {
    text-decoration: none;
    color: var(--third-color);
    margin-bottom: 0px;
    /* line-height: 1; */
}

img {
    width: 100%;
}

.button {
    font-size: 14px;
    color: var(--fifth-color);
    padding: 14px 40px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background: var(--first-color);
    border: 1px solid var(--first-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    display: inline-block;
}

.button:hover {
    color: var(--first-color);
    background: transparent;
    border: 1px solid var(--first-color);
}

input,
textarea {
    outline: none;
    border: 1px solid var(--first-color);
    padding: 8px 13px;
    font-size: 13px;
    /* line-height: 1; */
    color: var(--first-color);
    margin-bottom: 20px;
    resize: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--first-color);
}

/* top header */
.top-header {
    padding: 7px 0px;
    background: var(--third-color);
}

.top-header .inner-content a {
    margin-left: 20px;
}

.top-header .inner-content a:first-child {
    margin-left: 0px;
}

/* @media (max-width: 767px) {
    .top-header .inner-content a:last-child {
        margin-left: 0px;
    }
} */

@media (max-width: 486px) {
    .top-header .inner-content a:last-child {
        margin-left: 20px;
    }
}

.top-header .inner-content p {
    color: var(--fifth-color);
}

.top-header .inner-content .icon {
    margin-right: 10px;
}

.top-header .inner-content .icon svg {
    height: 20px;
    width: 20px;
    fill: var(--fifth-color);
}

.top-header .follow-icons .icon svg {
    height: 20px;
    width: 20px;
    fill: var(--fifth-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.top-header .follow-icons .icon {
    padding: 8px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background: #FFFFFF50;
    box-shadow: 0px 2px 4px #00000025;
    margin-right: 20px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.top-header .follow-icons a:hover .icon {
    background: var(--first-color);
}

.top-header .follow-icons a:hover .icon svg {
    fill: var(--second-color);
}

.top-header .follow-icons a:last-child .icon {
    margin-right: 0px;
}

/* header */
header {
    background: var(--forth-color);
    padding: 16px 0px;
    box-shadow: 0 6px 22px #00000025;
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;
}

header .logo {
    width: 200px
}
header .menu-icon .icon{
    cursor: pointer;
}
.head-navbar .navbar {
    justify-content: end;
}

/* @media (max-width: 767px) {
    header .logo {
        width: auto;
    }
} */

header .head-navbar nav ul li {
    list-style: none;
    margin-left: 30px;
    position: relative;
    padding: 20px 0px;
}
header .head-navbar nav ul li:hover .dropdown-menu{
    display: block;
}
header .head-navbar nav ul li .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0px;
    background: #FFFFFF;
    padding: 16px 0 20px;
    display: none;
    box-shadow: 5px 10px 16px rgba(51,51,51,0.05),-5px 10px 16px rgba(51,51,51,0.05);
    min-width: 218px;
    border-radius: 0px;
}
header .head-navbar nav ul li .dropdown-menu ul{
    margin-bottom: 0px;
    padding-left: 0px;
}
header .head-navbar nav ul li .dropdown-menu li{
    margin-left: 0px;
    padding: 0px;
}
header .head-navbar nav ul li .dropdown-menu a{
    color: var(--third-color);
    padding: 5px 30px;
    position: relative;
}
header .head-navbar nav ul li .dropdown-menu a:hover{
    background: transparent;
    color: #000000;
}
header .head-navbar nav ul li .dropdown-menu a::after{
    display: none;
}
header .head-navbar nav ul .menu-item-has-children a{
    padding-right: 18px;
}
header .head-navbar nav ul .menu-item-has-children a::after{
    content: '';
    height: 15px;
    width: 15px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23ffffff%22%20class%3D%22bi%20bi-chevron-down%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%200%201%20.708%200L8%2010.293l5.646-5.647a.5.5%200%200%201%20.708.708l-6%206a.5.5%200%200%201-.708%200l-6-6a.5.5%200%200%201%200-.708%22%2F%3E%3C%2Fsvg%3E");
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -.5rem;
}

header .head-navbar nav ul li:first-child {
    margin-left: 0px;
}

header .head-navbar nav ul li a {
    color: var(--fifth-color);
    font-size: 12px;
    text-transform: uppercase;
    /* line-height: 1; */
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

header .head-navbar nav ul li a:hover {
    color: var(--second-color);
}

header .head-navbar nav ul li.active a {
    color: var(--second-color);
}

header .menu-icon svg {
    height: 26px;
    width: 26px;
    fill: var(--second-color);
}

/* section */
section {
    margin-bottom: 70px;
}

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

.section-bg {
    background: #F5F5F5;
}

/* hero slide */
.hero-slide .item-inner-slide {
    height: 585px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide .item-inner-slide.background-1 {
    background: url("../image/Jak-Black-Slate-Banner.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-slide .item-inner-slide::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(248, 217, 155, 0.8) 0%, rgba(0, 0, 0, 0) 50%, rgba(248, 217, 155, 0.8) 100%);
}

.hero-slide .item-inner-slide .inner-slide-text {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    background: #FFFFFFBF;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 48px;
}

.hero-slide .item-inner-slide .inner-slide-text h1 {
    text-shadow: 0px 4px 0px #00000040;
    color: var(--first-color);
    margin-bottom: 30px;
}
.hero-slide .item-inner-slide .inner-slide-text h3{
    margin-bottom: 20px;
}

.hero-slide .item-inner-slide .inner-slide-text h5 {
    margin-bottom: 16px;
}

.hero-slide .slide-inner {
    position: relative;
}

.hero-slide .owl-dots {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
}
.hero-slide .owl-dots:first-child{
    display: none;
}

.hero-slide .owl-dots button {
    height: 10px;
    border-radius: 20px;
    width: 10px;
    margin-right: 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    background: var(--fifth-color);
    cursor: pointer;
}

.hero-slide .owl-dots button.active {
    width: 50px;
    background: var(--first-color);
}

.hero-slide .owl-dots button:last-child {
    margin-right: 0px;
}

.hero-slide .owl-nav {
    display: none;
}

/* who we are */
.who-we-are .image {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
}

.who-we-are .who-inner-content h2 {
    margin-bottom: 16px;
    text-align: center;
}

.who-we-are .who-inner-content p {
    text-align: justify;
}

/* our service */
.our-service {
    background: url("../image/our-service-backgroud.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
}

.our-service .container-inner {
    background: #ecdecd4D;
    padding: 40px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    text-align: center;
}

.our-service .container-inner h2 {
    text-align: center;
    margin-bottom: 10px;
}
.our-service .container-inner p{
    margin-bottom: 40px;
    text-align: center;
}

.our-service .container-inner .service-box {
    background: var(--fifth-color);
    padding: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-bottom: 4px solid var(--first-color);
    border-top: 4px solid transparent;
    text-align: center;
    height: 100%;
    transition: 0.3S;
    -webkit-transition: 0.3S;
    -moz-transition: 0.3S;
    -ms-transition: 0.3S;
    -o-transition: 0.3S;
}

.our-service .container-inner .service-box.active {
    border-top: 4px solid var(--first-color);
    border-bottom: none;
}

.our-service .container-inner .service-box:hover {
    background: var(--first-color);
}

.our-service .container-inner .service-box svg {
    height: 164px;
    width: 164px;
    fill: var(--first-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.our-service .container-inner .service-box:hover svg {
    fill: var(--second-color);
}

.our-service .container-inner .service-box .icon {
    margin-bottom: 20px;
}

.our-service .container-inner .service-box h3 {
    margin-bottom: 16px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.our-service .container-inner .service-box:hover h3 {
    color: var(--fifth-color);
}

.our-service .container-inner .service-box p {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.our-service .container-inner .service-box:hover p {
    color: var(--fifth-color);
}

.our-service .container-inner a.button {
    margin-top: 18px;
}


/* client says */
.client-says .image {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 4px #00000025;
    position: relative;
}

.client-says .image::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: linear-gradient(270deg, rgba(0, 44, 106, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 44, 106, 0.2) 100%);
}

.client-says h2 {
    margin-bottom: 50px;
}

.client-says .item-inner .top-profile .profile-icon {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    width: 50px;
    background: var(--fifth-color);
    color: var(--first-color);
    margin-right: 10px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    font-size: 32px;
}

.client-says .item-inner .top-profile {
    background: var(--first-color);
    padding: 16px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.client-says .item-inner {
    margin: 0px 10px;
}

.client-says .item-inner .top-profile p,
.client-says .item-inner .top-profile span {
    color: var(--fifth-color);
}

.client-says .item-inner .top-profile p svg {
    height: 20px;
    width: 20px;
    fill: var(--fifth-color);
    margin-left: 5px;
}

.client-says .item-inner .bottom-review {
    padding: 4px;
}

.client-says .item-inner .bottom-review svg {
    height: 20px;
    width: 20px;
    fill: var(--first-color);
}

.client-says .item-inner .bottom-review .icon {
    margin-right: 5px;
}

.client-says .item-inner .bottom-review .icon:last-child {
    margin-right: 0px;
}

.client-says .item-inner .bottom-review .star {
    margin-bottom: 10px;
}

.client-says .item-inner .bottom-review p {
    /* height: 90px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4; */
    line-height: 22px;
}

.client-says .slide-inner-testmonial .owl-dots {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
}

.client-says .slide-inner-testmonial {
    padding-bottom: 32px;
}

.client-says .slide-inner-testmonial .owl-dots button {
    height: 10px;
    width: 10px;
    cursor: pointer;
    background: var(--forth-color);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    margin-right: 10px;
}

.client-says .slide-inner-testmonial .owl-dots button.active {
    background: var(--first-color);
}

.client-says .slide-inner-testmonial .owl-dots button:last-child {
    margin-right: 0px;
}

.client-says .slide-inner-testmonial .owl-nav {
    /* display: flex; */
    display: none;
    align-items: center;
    justify-content: space-between;
}

.client-says .slide-inner-testmonial .owl-nav button {
    height: 46px;
    width: 46px;
    color: var(--second-color);
    background: var(--first-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}

.client-says .slide-inner-testmonial .owl-nav button span {
    display: none;
}

.client-says .slide-inner-testmonial .owl-nav button.owl-prev::before {
    content: "<";
    font-size: 20px;
}

.client-says .slide-inner-testmonial .owl-nav button.owl-next::before {
    content: ">";
    font-size: 20px;
}

/* footer */
footer {
    background: var(--forth-color);
}

footer .container .padding-70 {
    padding: 70px 0px;
}

.footer-copy-right {
    border-top: 1px solid var(--fifth-color);
}

footer .container .padding-40 {
    padding: 12px 0px;
}

footer .content .logo {
    width: 200px;
    margin-bottom: 20px;
}

footer .content p {
    color: var(--fifth-color);
    margin-bottom: 30px;
}

footer .content .follow-icons svg {
    height: 20px;
    width: 20px;
    fill: var(--first-color);
}

footer .content .follow-icons a {
    background: var(--fifth-color);
    padding: 8px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    margin-right: 20px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

footer .content .follow-icons a:hover {
    background: var(--second-color);
}

footer .inner-content a p {
    margin-bottom: 0px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

footer .inner-content a:hover p {
    color: var(--second-color);
}

footer .inner-content a svg {
    margin-right: 10px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

footer .inner-content a:hover svg {
    fill: var(--second-color);
}

footer .inner-content ul {
    padding-left: 0px;
}

footer .inner-content ul li {
    margin-bottom: 10px;
    list-style: none;
}

footer h3 {
    color: var(--fifth-color);
    margin-bottom: 20px;
    margin-top: 40px;
}

footer .inner-content ul li a {
    color: var(--fifth-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    display: block;
    font-size: 12px;
}

footer .inner-content ul li a.active {
    color: var(--second-color);
}

footer .inner-content ul li a:hover {
    color: var(--second-color);
    padding-left: 4px;
}

footer .footer-copy-right p,
footer .footer-copy-right a,
footer .footer-copy-right i {
    color: var(--fifth-color);
    font-size: 12px;
}
footer .footer-copy-right i{
    padding: 0px 10px;
    font-weight: bold;
}

footer .footer-copy-right p a {
    color: var(--second-color);
}


/* inner page hero header */
.hero-header-inner-page{
    background: url(../image/inner-page-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 378px;
    display: flex;
    align-items: end;
}
.hero-header-inner-page::before{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background: linear-gradient(90deg, rgba(0, 44, 106, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 44, 106, 0.4) 100%);
}
.hero-header-inner-page .contant-text{
    position: relative;
    z-index: 1;
}
.hero-header-inner-page .contant-text h1{
    margin-bottom: 20px;
    color: var(--first-color);
}
.hero-header-inner-page .contant-text{
    padding-bottom: 50px;
}
.hero-header-inner-page .contant-text li{
    list-style: none;
}
.hero-header-inner-page .contant-text li h5{
    color: var(--first-color);
}

/* about us page css ---------------------------------------------------------------------
------------------------------------------------------------------------------------------ */
.about-us-top-section .boxs .box{
    padding: 20px;
    text-align: center;
    background: var(--fifth-color);
    box-shadow: 0px 0px 4px #00000025;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}.about-us-top-section .boxs .box:hover{
    background: var(--first-color);
    box-shadow: none;
}
.about-us-top-section p{
    margin-bottom: 20px;
}
.about-us-top-section .boxs p{
    margin-bottom: 0px;
    color: var(--first-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.about-us-top-section .boxs .box:hover p{
    color: var(--fifth-color);
}
.about-us-top-section .boxs .box .circle1{
    background: var(--first-color);
    padding: 5px;
    display: inline-block;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    margin-bottom: 16px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.about-us-top-section .boxs .box:hover .circle1{
    background: var(--second-color);
}
.about-us-top-section .boxs .box .circle-inner{
    padding: 10px;
    background: var(--second-color);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.about-us-top-section .boxs .box:hover .circle-inner{
    background: var(--first-color);
}
.about-us-top-section .boxs .box svg{
    height: 25px;
    width: 25px;
    fill: var(--first-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.about-us-top-section .boxs .box:hover svg{
    fill: var(--second-color);
}
.about-us-top-section .image{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
}

.about-background h4,
.about-background p{
    margin-bottom: 20px;
}
.about-background p:last-child{
    margin-bottom: 0px;
}

.our-mission h4,
.our-mission p{
    margin-bottom: 20px;
}
.our-mission p:last-child{
    margin-bottom: 0px;
}
.our-mission .image{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
}


/* services page ------------------------------------------------
----------------------------------------------------------------- */
.services-inner .image{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
}
.services-inner h4{
    margin-bottom: 20px;
}

/* our process page ------------------------------------------------
----------------------------------------------------------------- */
.our-process .image{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
}
.our-process h4{
    margin-bottom: 20px;
}
/* 
.our-process-design .row{
    padding-left: 60px;
    position: relative;
}
.our-process-design .row::before{
    content: "";
    position: absolute;
    top: -70px;
    left: 12px;
    width: 44px;
    height: 207%;
    background: var(--third-color);
}
.our-process-design .row::after{
    content: "";
    position: absolute;
    top: -70px;
    left: 32px;
    width: 1px;
    height: 207%;
    border-left: 2px dashed #FFFFFF;
} */


/* blog page ---------------------------------------------------------
--------------------------------------------------------------------- */
.blog .blog-box{
    box-shadow: 0px 0px 6px #00000025;
    margin-bottom: 30px;
    background: var(--fifth-color);
}
.blog .blog-box .image img{
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.blog .blog-box .text-contant{
    padding: 16px;
}
.blog .blog-box .text-contant h4{
    margin: 16px 0px;
}
.blog .blog-box .text-contant .date p{
    color: var(--third-color);
}
.blog .blog-box .text-contant .date p svg{
    margin-right: 10px;
}
.blog .pulgins-tab{
    margin-top: 20px;
}
.blog .pulgins-tab ul li{
    list-style: none;
    margin-right: 20px;
}
.blog .pulgins-tab ul li:last-child{
    margin-right: 0px;
}
.blog .pulgins-tab ul li.active a{
    color: var(--first-color);
}
.blog .pulgins-tab ul li a{
    color: var(--third-color);
    font-size: 16px;
    display: inline-block;
}
.blog .pulgins-tab ul li.arrow a{
    padding: 10px;
    background: var(--first-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    color: var(--fifth-color);
    box-shadow: 0px 0px 6px #00000025;
}


/* contant us ---------------------------------------------------
----------------------------------------------------------------- */
.map-section .map iframe{
    height: 100%;
    width: 100%;
}
.map-section .map{
    height: 518px;
}
.contant-info{
    background: var(--first-color);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px;
    height: 100%;
}
.contant-info h2{
    margin-bottom: 40px;
    color: var(--fifth-color);
}
.contant-info ul li{
    list-style: none;
    margin-bottom: 20px;
}
.contant-info ul li a{
    display: inline-block;
}
.contant-info ul li a p{
    color: var(--fifth-color);
    margin-left: 16px;
}
.contact-form{
    border: 1px solid var(--first-color);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    height: 100%;
    padding: 20px;
}
.contact-form h2{
    margin-bottom: 40px;
}

.stone-natural h2{
    margin-bottom: 40px;
}
.stone-natural .content{
    background: url(../image/Manufacturing-Thumbnail.jpg);
    height: 450px;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
}
.stone-natural .col-lg-3.col-md-6{
    margin-top: 20px;
}
.stone-natural .content:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.stone-natural .content:hover:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #00000050;
}
.stone-natural .content h3{
    color: var(--fifth-color);
    font-size: 24px;
    position: relative;
    z-index: 1;
}
.stone-natural .content p{
    color: var(--fifth-color);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.stone-natural .content a{
    color: var(--fifth-color);
    font-size: 13px;
    position: relative;
    z-index: 1;
}


.hero-header-inner-pages{
    background: url(../image/Products-Sandstone-Banners.jpg);
    background-size: cover !important;
    height: 312px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.items-section .content .image{
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 10px #00000025;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.items-section .content.inner_product .image{
    border-radius: 0px;
}
.items-section .content.inner_product .image img{
    height: 200px;
    object-fit: cover;
}
.items-section .content.inner_product p{
    margin-top: 10px;
    letter-spacing: 1px;
}
.items-section .content:hover .image{
    box-shadow: none;
}
.items-section .content{
    text-align: center;
    margin-bottom: 20px;
}
.items-section .content .image .show-btn{
    position: absolute;
    bottom: -100px;
    left: 0px;
    width: 100%;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.items-section .content .image .show-btn a{
    background: transparent;
    color: var(--fifth-color);
    border-color: var(--fifth-color);
    line-height: 1;
}
.items-section .content:hover .image .show-btn{
    bottom: 10px;
}
.items-section .content p{
    margin-top: 20px;
}
.quality-stone ul li{
    font-size: 14px;
}

.menu-file-open ul li{
    list-style: none;
    margin-right: 24px;
    color: var(--forth-color);
    font-size: 14px;
}
.menu-file-open ul li a{
    color: var(--forth-color);
    font-size: 14px;
    position: relative;
}

.menu-file-open ul li a::after{
    content: "";
    height: 13px;
    width: 13px;
    position: absolute;
    right: -20px;
    top: 50%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-chevron-right%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%201.646a.5.5%200%200%201%20.708%200l6%206a.5.5%200%200%201%200%20.708l-6%206a.5.5%200%200%201-.708-.708L10.293%208%204.646%202.354a.5.5%200%200%201%200-.708%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: -7px;
}
.menu-file-open ul{
    border-bottom: 1px solid #dbdbdb;
}

.item-details .tabs .tabs-stage{
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0px 0px 6px #00000040;
}
.item-details .tabs .tabs-nav li{
    margin: 0px 4px;
    list-style: none;
    overflow: hidden;
    border-radius: 5px;
}
.item-details .product-details table tr{
    border-bottom: 1px solid #dbdbdb;
    font-size: 14px;
}
.item-details .product-details table tr th{
    font-size: 13px;
}
.item-details .product-details table tr th,
.item-details .product-details table tr td{
    padding: 10px 0px;
    text-transform: uppercase;
}
.detail-in-item ul li{
    font-size: 14px;
    margin-bottom: 10px;
}
.item-details .slick-prev:before, .item-details .slick-next:before{
    font-family: none;
}
.item-details .tabs .tabs-nav button{
    background: #4A515570;
    padding: 5px 10px 8px 10px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 45%;
}
.item-details .tabs .tabs-nav button::before{
    color: var(--fifth-color);
}
.item-details .tabs .tabs-nav .slick-list{
    margin: 0px;
    padding: 0px !important;
}
.item-details .tabs .tabs-nav .slick-prev{
    left: 0px;
}
.item-details .tabs .tabs-nav .slick-next{
    right: 0px;
}



/* mobile menu */
.mobile-responsive-menu{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    z-index: 999999;
    background: var(--fifth-color);
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}
.mobile-responsive-menu.show{
    visibility: visible;
    opacity: 1;
}
.mobile-responsive-menu .inner{
    background: var(--forth-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0px 0px 6px #00000040;
    padding: 20px;
}
.mobile-responsive-menu .inner ul{
    padding-left: 0px !important;
    margin-bottom: 0px !important;
    display: block !important;
    min-width: auto;
    width: 100%;
    position: static;
}
.mobile-responsive-menu .inner ul li{
    list-style: none;
    margin-bottom: 16px;
}
.mobile-responsive-menu .inner ul li:last-child{
    margin-bottom: 0px;
}
.mobile-responsive-menu .inner ul li a{
    color: var(--fifth-color);
    display: flex;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    justify-content: space-between;
    font-size: 14px;
}
.mobile-responsive-menu .inner ul li a:hover{
    color: var(--second-color);
}
.mobile-responsive-menu .inner ul li .dropdown-menu li{
    margin-bottom: 0px !important;
}
.mobile-responsive-menu .inner ul li .dropdown-menu a{
    color: var(--forth-color) !important;
}
.mobile-responsive-menu .inner ul li .dropdown-menu{
    display: none !important;
    background: var(--fifth-color);
    padding: 10px;
    margin-top: 20px;
}
.mobile-responsive-menu .inner ul li:hover .dropdown-menu{
    display: block !important;
    margin-top: 10px;
}
body.fixed{
    position: fixed;
    width: 100%;
}
.mobile-responsive-menu .close-btn .icon{
    cursor: pointer;
}


.contact-form input,
.contact-form textarea{
    margin-bottom: 0px;
}
.contact-form p {
    margin-bottom: 20px;
}



@media (max-width: 1199px) {
    .stone-natural .content{
        height: 350px;
    }
    .stone-natural .content h3 {
        font-size: 18px;
    }
    .stone-natural .content p {
        margin-bottom: 10px;
    }
}
@media (max-width: 991px) {
    .our-service .container-inner .service-box.active {
        border-bottom: 4px solid var(--first-color);
        border-top: none;
    }
    .hero-header-inner-pages {
        padding: 34px 0px !important;
    }
}


@media (max-width: 767px) {
    .hero-slide .item-inner-slide .inner-slide-text h1 {
        text-shadow: 0px 2px 0px #00000040;
        margin-bottom: 20px;
    }
    .hero-slide .item-inner-slide .inner-slide-text h3 {
        margin-bottom: 10px;
    }
    .hero-slide .item-inner-slide .inner-slide-text {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        padding: 18px;
}
h1 {
    font-size: 34px;
}
.hero-slide .item-inner-slide{
    height: 375px;
}
section {
    margin-bottom: 40px;
}
section.padding-70 {
    padding: 40px 0px;
}
.hero-header-inner-pages {
    padding: 34px 0px !important;
    height: auto !important;
}
.our-service .container-inner .col-md-4{
    margin-top: 16px;
}
.our-service .container-inner .col-md-4:first-child{
    margin-top: 0px;
}
.client-says .image{
    margin-bottom: 20px;
}
}
@media (max-width: 425px) {
    .hero-slide .item-inner-slide .inner-slide-text {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        margin: 0px 12px;
}
.menu-file-open ul li{
    font-size: 12px;
}
.menu-file-open ul li a{
    font-size: 11px;
}
    .our-service .container-inner {
        padding: 12px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
}   
.our-service {
    padding: 20px 0px;
}
.item-details .product-details table tr th, .item-details .product-details table tr td{
    text-transform: capitalize;
}
}



@media (min-width: 1200px) {
  .navbar {
    padding: 0;
  }

  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navbar li {
    position: relative;
  }

  .navbar>ul>li {
    white-space: nowrap;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 33px 3px; */
    /* color: var(--color-default); */
    /* font-size: 16px; */
    /* font-weight: 600; */
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    margin-left: 5px;
  }

  .navbar>ul>li>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--color-secondary);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navbar a:hover:before,
  .navbar li:hover>a:before,
  .navbar .active:before {
    visibility: visible;
    width: 100%;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: var(--second-color);
  }

  .navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 0px;
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    transition: 0.3s;
    transform: scale(1, 0);
    transform-origin: 0 0;
    border-top: 1px solid var(--border-color);
  }

  .navbar .dropdown ul li {
    min-width: 200px;
  }

  .navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 600;
    transition: 0.2s;
  }

  .navbar .dropdown ul a:hover {
    margin-left: 5px;
  }

  .navbar .dropdown ul a i {
    font-size: 12px;
  }

  .navbar .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
    transform: scale(1);
  }

  .navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
  }

  .navbar .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
  }
}

@media (min-width: 1200px) and (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

@media (min-width: 1200px) {

  .mobile-nav-show,
  .mobile-nav-hide {
    display: none;
  }
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/

@media (max-width: 1199px) {
  .navbar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    bottom: 0;
    transition: 0.3s;
    z-index: 9997;
  }

  .navbar ul {
    position: absolute;
    inset: 0;
    padding: 50px 20px 10px 20px;
    margin: 0;
    background: var(--first-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    /* font-size: 15px; */
    /* font-weight: 600; */
    color: var(--color-default);
    white-space: nowrap;
    transition: 0.3s;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: #fff;
  }

  .navbar .getstarted,
  .navbar .getstarted:focus {
    background: var(--color-primary);
    padding: 8px 20px;
    border-radius: 4px;
    margin: 15px;
    color: #fff;
  }

  .navbar .getstarted:hover,
  .navbar .getstarted:focus:hover {
    color: #fff;
    background: rgba(0, 131, 116, 0.8);
  }

  .navbar .dropdown ul,
  .navbar .dropdown .dropdown ul {
    position: static;
    display: none;
    padding: 10px 0;
    margin: 10px 20px;
    transition: all 0.5s ease-in-out;
    background-color: var(--color-primary);
    border: 1px solid var(--color-default);
  }

  .navbar .dropdown>.dropdown-active,
  .navbar .dropdown .dropdown>.dropdown-active {
    display: block;
  }

  .mobile-nav-show {
    color: var(--color-default);
    font-size: 28px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    z-index: 9999;
  }

  .mobile-nav-hide {
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 9999;
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .navbar {
    right: 0;
  }

  .mobile-nav-active .navbar:before {
    content: "";
    position: fixed;
    inset: 0;
    background: #ca6a3a70;
    z-index: 9996;
  }
  header .head-navbar nav ul li {
    margin-left: 0px;
    padding: 0px;
}
header .head-navbar nav ul li .dropdown-menu{
    position: static;
    margin-left: 20px;
}
}

/* dev css */
.contact-form input,
.contact-form textarea{
    margin-bottom: 0px;
}
.contact-form p {
    margin-bottom: 20px;
}
.p-top-20{
    padding-top: 20px;
}

.tab-inner-image{
    position: relative;
}
.tab-inner-image .bottom-box{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    display: block !important;
}
.tab-inner-image .bottom-box p{
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    color: var(--fifth-color);
}