@import "../component/home-banner.css";

@import "../component/usp.css";

@import "../component/project-list.css";

@import "../component/product-list.css";
@import "../component/product-list-content.css";



@import "../component/cta.css";
@import "../component/shop-product-slider.css";

@import "../component/faq-section.css";

@import "../component/blog-section.css";

@import "../component/testimonial.css";



@import "../component/craft-sec.css";

@import "../component/home-service.css";

@import "../component/leadership.css";

@import "../component/footer.css";





/* Home Banner CSS */
.home-banner {
    background-color: #FCF9F3;
    padding-top: 60px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}


.home-banner .container , .home-banner .row , .home-banner .row>*{
    height: 100%;
}


.banner-subtitle{margin-bottom: 20px;}
.banner-subtitle ul li a,.banner-subtitle ul li {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 1.4px;
    color: var(--accent-color, #CFA34E);
    text-transform: uppercase;
    display: inline-block;
        letter-spacing: 5px;
}

.banner-info-list ul li b{color: var(--accent-color); font-weight: 500;}


.banner-subtitle .breadcrumb-item::before{content: none;}
.banner-subtitle .breadcrumb-item{padding-left: 0; }
.banner-subtitle .breadcrumb-item.active{color: var(--accent-color);}
.banner-subtitle .breadcrumb-item a{color: #928375;}

.banner-subtitle ul li a.active{color: #928375;}
.banner-subtitle ul li{display: inline-block; padding-right: 15px; margin-right: 10px; position: relative;}
.banner-subtitle ul li:last-child{margin-right: 0px; padding-right: 0;}
.banner-subtitle ul li:last-child::after{display: none;}
.banner-subtitle ul li::after{
    content: "";
    position: absolute;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: var(--accent-color, #CFA34E);
    border-radius: 50%;
}

.banner-title {
    font-size: 68px;
    line-height: 1.0;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: #fff;
    font-weight: 700;
    max-width: 540px;
}

.banner-subtitle p{color: var(--accent-color); letter-spacing: 4px; line-height: 1.4;}
.banner-subtitle p span{color: #fff; display: block;}


.banner-title .text-accent {
    font-weight: 400;
    font-style: italic;
    color: var(--accent-color, #CFA34E);
}

.banner-divider {
    width: 70px;
    height: 4px;
    background-color: var(--accent-color, #CFA34E);
    margin-bottom: 35px;
}

.banner-desc {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #ffff;
    margin-bottom: 40px;
    max-width: 500px;
}

.banner-btn-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.banner-btn-group:last-child{margin-bottom: 0;}





.banner-info-list ul li {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 2px;
    color: #ffffff;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 44px;
    padding-right: 55px;
    position: relative;
}

.banner-info-list ul li:last-child{padding-right: 0; margin-right: 0;}
.banner-info-list ul li:last-child::before{display: none;}


.banner-info-list ul li::before {
    width: 10px;
    height: 10px;
    background-color: var(--accent-color, #CFA34E);
    border-radius: 50%;
    content: "";
    position: absolute;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
}

/* Banner Right Image */
.banner-image-wrapper {
 position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

.banner-image-box {
   
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

.banner-image-box .banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
        height: 100%;
}

.banner-img-overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.overlay-text-left,
.overlay-text-right {
    font-family: 'Epilogue', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 2px;
    color: #F5EFE6;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.banner-content-main{padding: 30px 0px 60px;}

.page-template-cms .banner-btn-group{padding-top: 70px;}
.banner-btn-group a:first-child{ background: var(--accent-color); color: var(--black-color); border-color: var(--accent-color);}
.banner-btn-group a:first-child:hover{ background: transparent; color: var( --accent-color); }

@media(max-width:1709px){
.banner-info-list ul li {margin-right: 33px; padding-right: 45px;}

.banner-title{font-size: 57px; }
.banner-subtitle { margin-bottom: 15px;}

.home-banner {
 
    min-height: calc(100vh - 96px);
}
}

@media(max-width:1339px){


    .banner-title { font-size: 46px; margin-bottom: 28px;   max-width: 370px;}
.banner-desc { font-size: 17px; margin-bottom: 22px; max-width: 375px;}
  .banner-info-list ul li { margin-right: 10px;  padding-right: 24px;}
  .banner-divider {margin-bottom: 25px;}
  .banner-divider.top {margin-bottom: 35px;}

}

@media(max-width:1199px){
.banner-content-main{padding: 30px 0px 45px;}
    .banner-subtitle { margin-bottom: 16px;}

    .banner-title { font-size: 40px; margin-bottom: 22px;    max-width: 310px;    }
    .banner-divider { margin-bottom: 20px;}
 .banner-desc { font-size: 17px; margin-bottom: 22px; max-width: 344px;}
    .banner-btn-group { margin-bottom: 25px;}
    .banner-info-list {gap: 10px;}
    .home-banner{padding-top: 35px;   min-height: 550px;}
   .banner-img-overlay{flex-wrap: wrap; gap: 10px; align-items: flex-start;}
   .page-template-cms .banner-btn-group{padding-top: 30px;}
.banner-divider.top { margin-bottom: 30px;}
.banner-subtitle p { letter-spacing: 3px;}

}

@media(max-width:991px){
    .banner-image-wrapper{position: initial;}
    .banner-title { font-size: 40px; margin-bottom: 18px; max-width: 100%; color: var(--black-color);}
    .banner-desc { font-size: 16px; margin-bottom: 20px;  color: #1f1f1f; max-width: 100%;}
    .banner-info-list ul li {color: #1f1f1f;}

    .home-banner .row{flex-direction: column-reverse;}
    .banner-subtitle { margin-bottom: 12px;}
    .banner-subtitle ul li a,.banner-subtitle ul li{font-size: 17px;}
    .banner-subtitle ul li{padding-right: 12px; margin-right: 5px;}
    .banner-divider { margin-bottom: 16px; height: 2px;}
    .banner-img-overlay{bottom: 15px; left: 15px; right: 15px;}
    .banner-content-main { padding: 30px 0px 35px;}
    .page-template-cms .banner-btn-group{padding-top: 20px;}
    .banner-divider.top {margin-bottom: 22px;}

    .banner-subtitle p span { color: var(--black-color);}

}

@media(max-width:767px){

    .home-banner { padding-top: 30px;}
    .overlay-text-left, .overlay-text-right {  font-size: 15px;}
    .banner-content-main { padding: 20px 0px 30px;}
    .banner-subtitle {  margin-bottom: 8px;}
    .banner-subtitle ul li a,.banner-subtitle ul li{font-size: 16px;}
    .banner-title { font-size: 32px; margin-bottom: 14px;}
    .banner-divider{margin-bottom: 14px;}
    .banner-info-list ul li {font-size: 15px;}
    .banner-info-list ul li::before {height: 6px;width: 6px;}
.banner-subtitle p { letter-spacing: 2px;}

}

@media(max-width:575px){

     .banner-subtitle ul li a,.banner-subtitle ul li{font-size: 15px;   letter-spacing: 3px;}
    .banner-title { font-size: 28px; margin-bottom: 12px;}
}

@media(max-width:479px){

    .overlay-text-left, .overlay-text-right { font-size: 14px;}
    .banner-title { font-size: 25px; margin-bottom: 10px;}

    .banner-btn-group { margin-bottom: 20px; gap: 10px;}
     .banner-info-list ul li {font-size: 14px; padding-right: 10px; margin-right: 2px;}

}