@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&display=swap');
*{ margin: 0; padding: 0; box-sizing: border-box;}
a, a:hover { text-decoration: none; }
a{ color: var(--red-color);}
a:hover{color: var(--blue-color);}
ul, ol { margin: 0;  padding: 0; }
ul { list-style: none; }
html { scroll-behavior: smooth; } 
:root{
    --blue-color: #273877;
    --red-color: #e31f26;
    --light-color: #f2f2f2;
    --white-color: #fff;
    --dark-color: #333;
    --primary-font: 'Barlow', sans-serif;
    --regular-font: 400;
    --medium-font: 500;
    --bold-font: 700;
}
html,body{
    font: var(--regular-font) 16px/1.5 var(--primary-font); 
    background-color: var(--white-color);
    color: #333;
}
h1,h2,h3,h4,h5,h6{ 
    font-weight: var(--bold-font);
}
h1{ font-size: 2rem; color: var(--red-color); }
h2{ font-size: 1.75rem; color: var(--blue-color);}
h3{ font-size: 1.5rem; color: var(--dark-color); }
h4{font-size: 1.25rem;}
h1 + p{ margin-bottom: 0;}
p{ margin-bottom: 16px;}
@media(min-width:768px){
    html,body{
        font: var(--regular-font) 20px/1.5 var(--primary-font); 
    }
    h1{font-size: 1.8rem;}
    h2{ font-size: 1.6rem;}
    h3{font-size: 1.4rem; }
    h4{font-size: 1.2rem;}
}
/* BUTTON CSS START  */
.btn{
    display: inline-block;
    padding: 0.6rem 1.6rem;
    border-radius: 0px 10px 0px 0px;
    font-weight: var(--bold-font);
    border: none;
}
.btn-primary {
    --bs-btn-color: var(--white-color);
    --bs-btn-bg: var(--red-color);
    --bs-btn-border-color: var(--red-color);
    --bs-btn-hover-color: var(--white-color);
    --bs-btn-hover-bg: #b1070d;
    --bs-btn-hover-border-color: #b1070d;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: var(--white-color);
    --bs-btn-active-bg: var(--red-color);
    --bs-btn-active-border-color: var(--red-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--white-color);
    --bs-btn-disabled-bg: var(--red-color);
    --bs-btn-disabled-border-color: var(--red-color);
}
.bg-red .btn-primary{
    background-color: var(--blue-color);
}
.bg-red .btn-primary:hover{
    background-color: #15214f;
}
/* BUTTON CSS END  */

/* FADE UP ANIMATION CSS START   */
.fade-up {
    animation-duration: 1s;
    animation-duration: 1s;
    animation-name: fadeInUp;
  }
  @keyframes fadeInUp {
    0% { opacity: 0; transform: translate3d(0, 150px, 0); }
    to { opacity: 1; transform: translateZ(0);   }
  }

  .slideIn {
    animation-name: slideIn;
    animation-duration: 500ms;
  }
  @keyframes slideIn {
    0% { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 0 0); }
    0% { clip-path: inset(0 0 100% 0); }
  }
/* FADE UP ANIMATION CSS END   */

/* CUSTOM CLASS SECTION START   */
    .bg-light{background-color: var(--light-color);}
    .bg-dark{background-color: #191919;}
    .bg-blue{background-color: var(--blue-color);}
    .text-red{color: var(--red-color);}
    .text-blue{color: var(--blue-color);}
    .text-dark{ color: var(--dark-color);}
    .bg-red{background-color: var(--red-color);}
    .section-padding{ padding: 50px 0;}
    .image-scale{ overflow: hidden; position: relative;}
    .image-scale img{ width: 100%; height: auto; position: relative; transform: scale(1.2) translateX(-20px);  transition: all .4s ease-in-out;}
    .image-scale:hover img{ transform: scale(1.2) translateX(0); }
    @media(min-width:768px){
        .section-padding{ padding: 100px 0;}
    }
/* CUSTOM CLASS SECTION END   */

/* SWIPER CUSTOM CLASS START */
.swiper-pagination-bullet{
    width: 25px; height: 10px; 
    border-top-right-radius: 10px;
    border-radius: unset;
    background-color: var(--red-color);
}
.swiper-pagination-bullet-active{background-color: var(--red-color); border-top-right-radius: 10px;}
@media(min-width:992px){
    .swiper-pagination-bullet{
        width: auto; height: 40px;
        border-radius: unset;
        border-bottom: 2px solid #cccccc;
        border-left: 2px solid #cccccc;
        background-color: transparent;
        font: var(--bold-font) 18px var(--primary-font);
        color: var(--white-color);
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 0px) !important;
        padding: 11px 50px 30px 10px;
        opacity: 1;
    }
    .swiper-pagination-bullet-active{
        border-bottom: 5px solid var(--red-color) !important;
        opacity: 1;
    }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 50px !important;
    }
    .swiper-pagination-bullet:first-child{
        border-left: none !important;
    }
    .pagination-text{
        border-bottom: 1px solid #cccccc;
    }
}
@media(min-width:1200px){
    .swiper-pagination-bullet{
        padding: 11px 125px 30px 10px;
    }

}
/* SWIPER CUSTOM CLASS END */

/* HEADER SECTION START  */
header{ width: 100%; background-color: var(--white-color); position: sticky; top: 0; z-index: 999; box-shadow: 0 0.375rem 0.9375rem 0 rgb(26 22 40 / 10%);}
.navbar-brand{ max-width:250px;}
.header-top-link{ display: flex; align-items: center; }
.header-top-link p{font: var(--bold-font) 18px var(--primary-font); color: var(--blue-color);}
.header-top-link a:hover{ color: var(--red-color);}
.divider{width: 1px; height: 38px; background-color: #cccccc; margin: 0 10px;}
.header-top{ border-bottom: 1px solid #cccccc; padding: 0 20px; }
.header-padding{ padding: 20px 0px; }
.dropdown-menu { top: 100% !important; border-radius: 0px; border: unset !important; margin: unset !important; padding: 0 !important;}
.dropdown .mega-menu { width: 600px; max-width: 800px;  background-color: var(--blue-color);}
.dropdown .mega-menu .container{ max-width: 100%;}
.header-dropdown-link  a{display: block; padding: 20px 15px; color: var(--white-color);  font: var(--bold-font) 18px var(--primary-font); }
.header-dropdown-link li{  border-bottom: 1px solid #cccccc;  cursor: pointer; }
.header-dropdown-link li:hover{ background-color: var(--red-color);}
.header-dropdown-link li:last-child{border: none;}
.offcanvas.offcanvas-end{ width: 100%; max-width: 300px; background-color: var(--blue-color); color: var(--white-color);  }
.offcanvas-body{ padding: 0;}
.offcanvas-header{ padding: 25px 15px; border-bottom: 1px solid var(--white-color);}
.nav-link{ font: var(--bold-font) 18px var(--primary-font);  color: var(--white-color); padding: 16px 15px; }
.nav-link:focus, .nav-link:hover{color: var(--white-color);}
.navbar-nav .nav-link.show{ color: var(--white-color);}
.nav-item{border-bottom: 1px solid var(--white-color); padding: 0px 0px; }
.nav-item:hover, .navbar-nav .lang li:hover{background-color: var(--red-color);}
.nav-item:nth-child(2)
.nav-item:hover .nav-link{ color: var(--white-color);}
.navbar-nav .lang li:hover .nav-link{ color: var(--white-color);}
.navbar-nav .lang{ border-bottom: 1px solid var(--white-color);}
.navbar-nav .lang li{ display: inline-block;}
.img-hover-change{ display: none;}
.img-hover-change.active{ display: block;}
@media(max-width:300px){.navbar-brand{ max-width: 200px;}}
@media(min-width:400px){
    .header-padding{ padding: 20px 0px; }
    .navbar-brand{ max-width: 100%;}
}
@media(min-width:768px){.offcanvas-header{padding: 23px 15px;} }
@media(min-width:1200px){
    .offcanvas.offcanvas-end{ max-width: 100%; }
    .header-top{ padding: 0 20px; }
    .header-padding{ padding: 23px 20px; }
    .offcanvas-body{ position: relative; }
    .navbar-nav{ 
        width: auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    .nav-item{ padding: 34px 10px; }
    .nav-item:hover{ background-color: var(--white-color);}
    .nav-item:hover .nav-link{color: var(--red-color);}
    .nav-link:focus{color: var(--blue-color);}
    .nav-link{ color: var(--blue-color); padding: 8px 0; }
    .navbar-nav .nav-link.show{ color: var(--red-color);}
    header.scroll{ animation: fadeInDown 450ms ease-in-out; }
    @keyframes fadeInDown {
        0% {
          opacity: 0;
          -webkit-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
          transform: translateY(-100%);
        }
      
        100% {
          opacity: 1;
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0);
        }
      }
}
@media(min-width:1400px){
    .header-top{ padding: 0 90px; }
    .header-padding{ padding: 23px 90px; }
    .nav-item{ padding: 34px 10px; }
}
/* HEADER SECTION END  */

/* BANNER SECTION START  */
.banner{ width: 100%; height: calc(650px - 86.8px); }
.swiper { width: 100%; height: 100%; }
.swiper-slide { position: relative; }
.banner .banner-inner{ position: relative; width: 100%; height: 100%; overflow: hidden;}
.banner-inner img{ position: absolute; object-fit: cover; }
.banner .slider-content{ color: var(--white-color); position: relative; z-index: 10;}
.banner-title{font-size: 30px; color: var(--white-color);}
@media(min-width:400px){
    .banner-title{font-size: 35px;}
}
@media(min-width:768px){
    .banner{height: calc(100vh - 149px);}
}
@media(min-width:576px){
    .banner-title{font-size: 50px;}
}
@media(min-width:992px){
    .banner-title{font-size: 3.5;}
}
/* BANNER SECTION END  */ 

/* ABOUT SECTION START   */
.about{
    width: 100%; position: relative;
}
.about-bg{
    width: 100%; min-height: 500px;
    background: url(../images/about-bg.jpg) center no-repeat;
    background-size: cover;
}
.about.section-padding{ padding-top: 50px;}
.about-content h2{ margin-bottom: 15px;}
@media(min-width:992px){
    .about-bg{min-height: 700px;}
    .about-content h2{ margin-bottom: 20px;}
    .about.section-padding{ padding-top: 0px; }
    .about-content{ padding: 0 25px;}
    .about-btn{margin-bottom: -32px; margin-top: -30px;}
}
@media(min-width:1200px){
    .about-content{ padding: 0 70px;}
    .about .btn-primary{padding: 20px 170px; }
}
@media(min-width:1400px){
    .about-content{ padding: 0 100px;}
    .about .btn-primary{padding: 20px 200px; }
}
@media(min-width:1920px){
    .about-content{ padding: 0 150px;}
}

/* ABOUT SECTION END   */

/* PRODUCT SECTION START  */
.product, .product a, .product h3{ color: var(--white-color);}
.product-item{ position: relative; width: 100%; height: 100%; transition: all .4s ease; }
.product-content{ position: absolute; z-index: 10; top: 0; left: 0; overflow: hidden; }
.product-text, .product-btn{position: relative; z-index: 10;}
.product-image{ width: 100%; height: 100%; position: relative; overflow: hidden; }
/* .product-image img{ object-fit: cover; position: relative; transform: scale(1.2); left: -35px; transition: all .4s ease-in-out;} */
.product-image img{ object-fit: cover;  transform: scale(1.3) translateX(-35px);  transition: all .4s ease-in-out;}
.product-content{ width: 100%; height: 100%; padding: 15px;  display: flex; flex-direction: column; justify-content: space-between;}
.product-content p{ position: relative; left: calc(-100% - 15px); opacity: 0; transition: all .4s ease-in-out; z-index: 2;}
.product-item:hover .product-content p{ left: 0; opacity: 1;}
.product-content::after{
    position: absolute;
    content: '';
    left: 0; bottom: 0;
    width: 100%; height: 100%;
    background-color: rgba(39, 56, 119, 0.8);
    opacity: 0;
    transform: translateX(-100% - 15px);
    z-index: 1;
    transition: all .4s ease-in-out;
}
.product-item:hover .product-content::after{ transform: translateX(0); opacity: 1;}
.product-item:hover{cursor: pointer;}
/* .product-item:hover .product-image img{ transform: scale(1.2); left: 0;} */
.product-item:hover .product-image img{ transform: scale(1.3) translateX(0); }
@media(min-width:576px){
    .product-content{ padding: 30px;}
}
@media(min-width:768px){
    .product-content .product-btn{ visibility: hidden; opacity: 0; transition: all .4s ease; }
    .product-item:hover .product-btn{ visibility: visible; opacity: 1; cursor: pointer; }
}
/* PRODUCT SECTION END  */

/* PRODUCT GALLERY SECTION START  */
.project-heading span{ font-size: 50px; font-weight: var(--bold-font); line-height: 1.1;}
.project-heading b{ font-size: 24px; line-height: 0.5; margin-top: -10px;}
@media(min-width:768px){ .project-heading span{ font-size: 60px;} }
/* PRODUCT GALLERY SECTION END  */

/* CONTACT SECTION START  */
.contact p{display: flex; flex-direction: column; font-weight: var(--bold-font);}
.contact{ color: var(--white-color);}
.red-box, .blue-box{ padding: 50px 0; }
.contact .btn-primary{ padding: 20px 35px;}
@media(min-width:992px){
    .contact{ width: 100%; display: inline-flex; flex-direction: row; color: var(--white-color);  }
    .red-box, .blue-box{ width: 50% !important; }    
}       
/* CONTACT SECTION END  */

/* FOOTER SECTION START  */
footer{ color: var(--white-color); }
.margin-bottom{ margin-bottom: 50px;}
.footer-col-margin{ margin-bottom: 25px;}
address{line-height: 1.8; color: var(--white-color); opacity: 0.6;}
footer p{ margin-bottom: 0;}
footer a{ color: var(--white-color); opacity: 0.6;}
footer a:hover{color: var(--white-color); opacity: 1;}
.footer-end p{ color: var(--white-color); opacity: 0.6;}
footer h4{ margin-bottom: 5px;}
.footer-link li{ padding: 5px 0;}
.social-link li{ display: inline-block; padding-right: 15px; }
.social-link i{ font-size: 25px;}
@media(min-width:992px){
    .footer-col-margin{ margin-bottom: 0;}
    footer h4{ margin-bottom: 25px;}
    .f-padding-bottom{ padding-bottom: 70px;}
}
@media(min-width:1200px){
    .social-link i{ font-size: 30px;}
}
/* FOOTER SECTION START  */

/*============================== ABOUT PAGE START =====================================  */

.inner-banner{ width: 100%; height: 500px; position: relative; z-index: 1;  }
.inner-banner img{ position: absolute; object-fit: cover;}
.inner-banner::before{ position: absolute; content: ''; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; }
.inner-banner-content .breadcrumb .breadcrumb-item,
.inner-banner-content .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '\f105'; font-family: "FontAwesome"; color: #ffffff; }
.inner-padding{ padding-left: 30px;}
@media(min-width:576px){
    .inner-padding{ padding-left: 50px;}
}
@media(min-width:768px){
    .inner-padding{ padding-left: 100px;}
}

/*============================== ABOUT PAGE END =====================================  */

/* =============================== TEXTILE PRODUCT PAGE START ========================================= */
.table.table-striped :is(th,td){
    padding: 5px 10px;
    font-size: 16px;
    font-weight: var(--medium-font);
    text-align: center ;
    border: 1px solid #cccccc ;
}
@media(min-width:992px){
    .table.table-striped :is(th,td){ font-size: 18px;}
}

/* =============================== TEXTILE PRODUCT PAGE END ========================================= */

/*============================== CONTACT PAGE START =====================================  */

.contact-details{
    width: 100%;
    min-height: 230px;
    background-color: var(--white-color);
    padding: 20px 15px;
}
.contact-details a{ color: var(--blue-color); font-size: 16px}
.contact-details a:hover{ color: var(--red-color);}
.contact-details address{ color: var(--blue-color); opacity: 1; }
.contact-form .form-group input[type='text'],
.contact-form .form-group input[type='number'],
.contact-form .form-group input[type='email'],
.contact-form .form-group textarea{
    position: relative;
    width: 100%; padding: 10px 10px;
    border: 1px solid var(--dark-color); color: var(--dark-color);
    font-size: 16px; transition: all .4s ease;
}
.contact-form .form-group{ position: relative;  margin-bottom: 30px;}
.contact-form .form-group:last-child{margin-bottom: 0;}
.contact-form .form-group label{margin-bottom: 5px; color: var(--blue-color); font-weight: var(--medium-font);}
@media(min-width:576px){
    .contact-details{ padding: 30px;}
    .contact-details a, .contact-details p{ font-size: 20px;}
}
/*============================== CONTACT PAGE END =====================================  */