body{
  margin:0;
  padding: 0;
 
   
}

:root{
  --primary-font:'Figtree', sans-serif;
  --paragraph-font:'Jost', sans-serif;
  --secondary-font: 'Roboto', sans-serif;
  --primary-color:#371617;
  --paragraph-color:#b9242e;

}

.request-btn {
  position: relative;
  overflow: hidden;
  padding: 12px 18px;
  text-decoration: none;
  color: #fff;
  font-family: var(--primary-font);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  background-color: #c00a09;
  display: inline-block;
  z-index: 1;
}

/* submenu position */
.dropdown-submenu {
position: relative;
}

.dropdown-submenu .submenu {
position: absolute;
top: 0;
left: 100%;
display: none;
min-width: 180px;
}

/* hover e show */
.dropdown-submenu:hover .submenu {
display: block;
}
.request-btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  background: #0a1f44; 
  transition: 0.4s ease;
  z-index: -1;
}


.request-btn:hover::before {
  width: 100%;
  right: auto;
  left: 0;
}


.request-btn:hover {
  color: #fff;
}
/*pre-hesder style */
.pre-header {
  background:white;
  color: #371617;
  padding: 3px 0;
  font-size: 14px;
  line-height: 30px;
  font-family: var(--primary-font);
}
.pre-item-left a{
  font-size: 16px;
  text-decoration: none;
  color: #371617;
  font-weight: 500;
 
  font-family:var(--secondary-font);
  white-space: nowrap;

}
.pre-item-right a{
  color:white;
  text-decoration: none;
  font-family: var(--secondary-font);
}

.pre-item-left i {
  color: #371617;
  font-size: 13px;
  margin-top: 2px;
}
.pre-item-left{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;      
  white-space: nowrap;    
}
.pre-item-left p {
  margin: 0;
  font-size: 14px;
}
.dropdown-menu.show{
background-color: var(--primary-colors);
}
.dropdown-item{
  font-family:var(--primary-font);
  font-weight: 600;
  font-size: 16px;
  color:var(--primary-color);
  background-color: white;
}
.social-icon a {
  color: #371617;
  font-size: 16px;
  transition: 0.3s;
  padding-right: 10px;
}

/* .social-icon a:hover {
  color: #f8c200;
} */
.social-icon{
  display: flex;
  justify-content: flex-end;
}


/*navbar style */

.navbar{
  background-color: #371617;
  padding: 0;
 
}


.navbar-toggler:focus{
  outline: none;
  box-shadow: none;
}
.btn-close:focus{
  outline: none;
  box-shadow: none;
}
.offcanvas-body{
background-color: var(--primary-color);
}
.offcanvas-header{
background-color: var(--primary-color);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.offcanvas-header .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
.navbar-nav .nav-link.active {
  color:white;
}


element.style {
}
.social-icon i{
font-size: 18px;
}
.navbar-toggler{
  border: none;
  font-size: 16px;
}
/* Navbar links */
.navbar .nav-link {
  font-weight: 500;
  padding: 10px 15px;
  transition: color 0.3s ease;
  font-family:var(--primary-font);
  font-size: 16px;
  margin-right: 27px;
  color: white;
}

.navbar .nav-link:hover {
  color: white;
}
/* Dropdown arrow icon animation */
.navbar .dropdown-toggle::after {
margin-left: 8px;
transition: all 0.3s ease;
}
/* submenu arrow animation */
.dropdown-submenu > .dropdown-toggle::after {

transition: all 0.3s ease;
}
/* arrow add */
.dropdown-menu .dropdown-item {
position: relative;
padding-left: 20px;

transition: all 0.3s ease;

}

/* arrow icon */
.dropdown-menu .dropdown-item::before {
content: "\f105"; /* Font Awesome arrow */
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 5px;
opacity: 0;
transition: all 0.3s ease;
}

/* hover effect */
.dropdown-menu .dropdown-item:hover {
padding-left: 28px;  
background-color: #f8f9fa;

}

/* arrow show on hover */
.dropdown-menu .dropdown-item:hover::before {
opacity: 1;
left: 10px;
}
/* hover e rotate + move */
.dropdown-submenu:hover > .dropdown-toggle::after {
transform: rotate(-90deg) translateX(3px);
}
/* hover e rotate + move */
.navbar .dropdown:hover > .dropdown-toggle::after {
transform: rotate(180deg) translateX(3px);
}

/* Hover dropdown */
.dropdown:hover .dropdown-menu {
 
  margin-top: 0;
  animation: fadeDown 0.3s ease;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
/* Dropdown animation */
@keyframes fadeDown {
  from {
      opacity: 0;
      transform: translateY(10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Dropdown menu style */
.dropdown-menu {
  border-radius: 8px;
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}


/* .icon-btn {
  margin-left: 12px;
  position: relative;
}

.icon-btn img {
  width: 22px;
} */

/* .cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #e63946;
  color: #fff;
  font-size: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  font-weight: 600;
}

.user-dropdown {
  position: relative;
} */

/* Dropdown menu */
.user-menu {
  position: absolute;
  top: 140%;
  right: 0;
  width: 180px;
  background: #fff;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 999;
}

/* Show on hover */
.user-dropdown:hover .user-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menu links */
.user-menu li a {
  display: block;
  padding: 8px 15px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}

.user-menu li a:hover {
  background: #f5f5f5;
}

/* Divider */
.user-menu .divider {
  height: 1px;
  background: #eee;
  margin: 6px 0;
}

/* Logout color */
.user-menu .logout {
  color: #e63946;
}

/* Icons */
.icon-btn {
  margin-left: 12px;
  position: relative;
}

.icon-btn img {
  width: 22px;
}


.navbar-brand img{

  height:65px;
}

.offcanvas-header img{

  height: 80px;
}


/* IMAGE */
.bg-image {
position: absolute;
width: 100%;
height: 100%;
background: url("https://images.pexels.com/photos/256381/pexels-photo-256381.jpeg") center/cover no-repeat;
z-index: -2;
}
.explore{
  background-color: var(--paragraph-color);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--primary-font);
  color: #fff;
  padding: 13px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.4s ease;
}

/* Sliding Background */
.explore::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #d41521;
  transition: all 0.5s ease;
  z-index: -1;
}

/* Hover Effect */
.explore:hover::before{
  left: 0;
}

.explore:hover{
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Icon Move */
.explore i{
  transition: transform 0.4s ease;
}

.explore:hover i{
  transform: translateX(5px);
}
.hero-video-section h1{
color: white;
font-size: 55px;
font-weight: 700;
font-family: var(--primary-font);
}
.hero-video-section p{
font-family: var(--primary-font);
    color: white;
    font-weight: 500;
    background:#e60023;
    width: 87%;
    padding: 8px;
    border-radius: 3px;
}


.hero-video-section {
position: relative;
height: 500px; 
overflow: hidden;
}

.bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px; 
object-fit: cover;
z-index: -2;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px; 
background: rgba(0, 0, 0, 0.6);
z-index: -1;
}


/*about st */
.about-info p{
  font-family:var(--primary-font);
  font-size: 15px;
  color: #555;
  line-height: 24px;
}
.about-info h4{
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight:600;
  background-color: #ffe3e5;
  padding: 14px 24px;
  color: var(--paragraph-color);
  border-radius: 100px;
  display: inline-block;
}
.about-info h2{
  font-family: var(--primary-font);
  font-size: 35px;
  font-weight: 700;
}

.service-area{
background-color: #f0f3fb;
}

.section-tittle h4{
font-size: 16px;
font-family:var(--secondary-font);
color: var(--paragraph-color);
font-weight: 600;
    background-color: #ffe3e5;
  padding: 14px 24px;
  display: inline-block;
  border-radius: 100px;
} 
.section-tittle h2{
font-family: var(--secondary-font);
font-size: 36px;
font-weight: 600;
}


.product-card{
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: 0.3s;
    text-align: center;
    padding:20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.product-card img,
.product-card h4{
    position: relative;
    z-index: 2;
}

.product-card::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: #e60023;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 1;
}

.product-card:hover::before{
    opacity: 1;
}

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







/*.product-card{
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
transition: 0.3s;
text-align: center;
padding:20px
}*/
.product-card h4 a{
  text-decoration: none;
  color: white;

}
.product-card h4{
font-family: var(--primary-font);
font-size: 16px;
font-weight: 700;
margin-top: 10px;
color:white;
  background: black;
  padding: 10px;

  border-radius: 8px;

}
/*.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}*/
.product-card img{
height: auto;
width: 330px;
}



.logo-slider img {
width: 100%;
max-height: 110px;
object-fit: contain;

transition: 0.3s;
}

.logo-slider img:hover {
opacity: 1;
transform: scale(1.1);
}




.service-box {
transition: 0.3s;
cursor: pointer;
border-radius: 10px;
background: #fff;
}

.service-box p {
font-family: var(--secondary-font);
font-size: 16px;
transition: 0.3s;
}

.service-box i {
font-size: 40px;
color: #e60023;
transition: 0.3s;
}

.service-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
background: #e60023;
}


.service-box:hover i {
color: #fff; /* icon white */
}

.service-box:hover p {
color: #fff; /* text white */
}
.sections-title {

font-family: var(--primary-font);
font-size: 24px;
}
.highlight-text {
color:var(--paragraph-color);

font-family: var(--primary-font);
font-size: 28px;
}
.big-text{

font-weight: 800;

}

.counter-section {
background: #f0f3fb;
}

.counter-box {
padding: 20px;
transition: 0.3s;
}
.counter-info{
margin-top: 6px;
}

.counter-box i {
font-size: 50px;
color: #e60023;
margin-bottom: 10px;
}

.counter-box h2 {
font-size: 32px;
font-weight: 600;
color: #000;

}

.counter-box p {
margin: 0;
font-size: 18px;
font-family: var(--primary-font);
font-weight: 600;
}
.project-slider {
position: relative;
overflow: hidden;
padding: 30px 40px; /* arrow space */
}

/* ===== Each Slide ===== */
.project-icon {
text-align: center;
padding: 20px;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}

.project-icon i {
font-size: 50px;
color: #333;
transition: 0.3s;
}

.project-icon p {
margin-top: 10px;
font-size: 14px;
transition: 0.3s;
}

/* Hover effect */
.project-icon:hover i {
color: #e60023;

}
/* wrapper */
.slider-wrapper {
position: relative;
}

/* slider spacing */
.project-slider-1,
.project-slider-2 {
padding: 30px 30px;
}

/* icon */
.project-icon {
text-align: center;
padding: 20px;
height: auto;
}



.project-icon p {
margin-top: 10px;
font-family: var(--secondary-font);
font-size: 16px;
font-weight: 400;
color: black;
}




.global-info p{
font-family: var(--primary-font);
font-weight: 500;
font-size: 15px;
text-align: start;


}







/* slider parent */
.project-slider {
position: relative;
}

/* arrow base */
.custom-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
width: 45px;
height: 45px;
border: none;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
cursor: pointer;
}

/* left */
.slick-prev {
left: 10px;
}

/* right */
.slick-next {
right: 10px;
}

/* icon */
.custom-arrow i {
font-size: 18px;
color: #000;
}

/* hover effect */
.custom-arrow:hover {
background: #e60023;
}

.custom-arrow:hover i {
color: #fff;
}


.slick-prev:before, .slick-next:before{
  color: black;
  font-size: 25px;
}



/* wrapper */
.social-wrapper {
flex-wrap: wrap;
}

/* box */
.social-box {
width: 60px;
height: 60px;
background: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #333;
text-decoration: none;
transition: 0.3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* hover colors */
.social-box.facebook:hover {
background: #1877f2;
color: #fff;
}

.social-box.instagram:hover {
background: #e1306c;
color: #fff;
}

.social-box.linkedin:hover {
background: #0077b5;
color: #fff;
}

.social-box.youtube:hover {
background: #ff0000;
color: #fff;
}

/* hover animation */
.social-box:hover {
transform: translateY(-5px);
}






/* Footer */
.footer-section {
font-family:var(--primary-font);
color: #fff;
padding: 60px 0;
position: relative;
background: url("../img/footerbg.jpg") no-repeat center/cover;
}

/* overlay */


.footer-section .container {
position: relative;
z-index: 2;
}

/* headings */
.footer-section h5 {
font-weight: 600;
margin-bottom: 20px;
}

/* text */
.footer-section p {
font-size: 14px;
line-height: 1.7;
color: #ddd;
}

/* links */
.footer-links {
list-style: none;
padding: 0;
}

.footer-links li {
margin-bottom: 8px;
}

.footer-links a {
color: #ddd;
text-decoration: none;
transition: 0.3s;
}

.footer-links a:hover {
color: #fff;
padding-left: 5px;
}

/* contact */
.footer-contact {
list-style: none;
padding: 0;
}

.footer-contact li {
margin-bottom: 10px;
font-size: 14px;
color: #ddd;
}

.footer-contact i {
margin-right: 10px;
color: #ff3b3b;
}

/* social */
.footer-social a {
display: inline-flex;
width: 40px;
height: 40px;
background: #ff3b3b;
color: #fff;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-left: 8px;
transition: 0.3s;
text-decoration: none;
}

.footer-social a:hover {
background: #fff;
color: #ff3b3b;
}


/*about page */

.about-banner {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}

/* image full cover */
.about-banner img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* overlay dark */
.about-banner::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

}

/* 🔥 main text positioning */
.banner-content {
position: absolute;
top: 50%;
left: 80px;  
transform: translateY(-50%);
color: #fff;
z-index: 2;
text-align: left;
}

/* heading */
.banner-content h1 {
font-size: 55px;
font-weight: 700;
font-family: var(--primary-font);
}

/* breadcrumb box */
.breadcrumb-box {
background: #fff;
color: #000;
display: inline-block;
padding: 6px 12px;
margin-top: 10px;
border-radius: 5px;
}

.breadcrumb-box a {
text-decoration: none;
color: #000;
font-family: var(--primary-font);
font-size: 18px;
}
.dropdown-item:hover{
background-color: none

}



/*contact form */

.contact-banner {
position: relative;
height: 400px;
overflow: hidden;
}

.contact-banner img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* overlay */
.contact-banner::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
}

/* text position (left side) */
.contact-banner .banner-content {
position: absolute;
top: 50%;
left: 80px;
transform: translateY(-50%);
color: #fff;
z-index: 2;
}

.contact-banner h1 {
font-size: 44px;
font-weight: 700;
font-family: var(--primary-font);
}

.breadcrumb-box a {
color: black;
text-decoration: none;
}

.breadcrumb-box span {
color: black;
margin: 0 5px;
}
/* form */
.contact-form {
width: 100%;
border-top: 3px solid #c5222e;
box-shadow: 0 0 10px 0 #d1d1d1;
padding: 25px 10px;
}
.contact-form input{
background: #f2f2f2 none repeat scroll 0 0;
border: 1px solid #f9f9f9;
margin-bottom: 24px;
padding: 16px 16px;
width: 100%;
font-family: var(--primary-font);
border-radius: 4px;
font-weight: 500;
font-size: 14px;
}
.submit-btn{
background: #c5222e none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-weight: 600;
  padding: 10px 0;
  text-transform: capitalize;
  
  margin-top: 0px;
  font-size: 16px;
  font-family:var(--primary-font);
  
}
.submit-btn:hover{
background-color:#c5222e;
color: white;
}
.contact-form h4{

font-family: var(--primary-font);
color: #071c34;
text-transform: capitalize;
font-size: 30px;
  font-weight: 600;
  text-align: center;
}
/* icons section */
.contact-info-section {

padding: 40px 0;

}

.info-item {
display: flex;

justify-content: center;
gap: 12px;
color: #fff;
}

/* icon circle */
.info-item .icon {
min-width: 60px; 
height: 60px;
background:#c5222e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

/* icon style */
.info-item i {
color:white;
font-size: 20px;
}

/* text */
.info-item p {
margin: 0;
font-size: 15px;
font-weight: 600;
font-family: var(--primary-font);
color: #717171;
}
.icon-info{
text-align: start;
margin-left: 8px;
}
.icon-info h4{
font-family: var(--primary-font);
font-size: 18px;
font-weight: 700;
color: #071c34;
}
.product-details img{
margin: auto;
display: block;
}

.product-details h2 {
font-family:var(--primary-font);
font-size: 42px;
color: #000000;
font-weight: 800;
}

.product-details h5 {

font-family:var(--primary-font);
font-size: 24px;
color: #b70000;
font-weight: 800;
}

.product-details p,
.product-details li {

font-size: 15px;
  line-height: normal;
  line-height: 1.6;
  color: #000000;
  font-weight: 500;
  text-align: justify;
font-family:var(--primary-font);
}

.table th{
background: #003c8f;
color: #fff;
}

.table th, .table td {
padding: 10px;
border: 1px solid black;
font-weight: 600;
}

.badge {
font-family: var(--primary-font);
font-size: 20px;
font-weight: 500;
background-color: #ffe3e5;
padding: 14px 24px;
color: var(--paragraph-color);
border-radius: 100px;
display: inline-block;
}
.social-tabs {
  background: #f5f5f5;
  padding: 25px 0;
}

.tabs {
  display: flex;
  justify-content:space-around;
  align-items: center;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  padding-bottom: 10px;
  transition: 0.3s;
}

.tab span {
  font-size: 16px;
}

.tab:hover span {
  color: red;
}

.tab-line {
  width: 100%;
  height: 3px;
  background: #ccc;
  position: relative;
  margin-top: 10px;
  overflow: hidden;
}

.active-line {
  position: absolute;
  height: 3px;
  width: 25%;
  background: red;
  left: 0;
  top: 0;
  transition: 0.3s;
}
.video-box{
    width: 100%;
    height: 500px; /* lombay besi */
    border-radius: 25px;
    overflow: hidden;
     position: relative;
   
}
.experience-card{
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fff;
    padding: 8px 9px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    text-align: center;
    z-index: 5;
    min-width: 0px;
}

.experience-card h2{
    font-size: 42px;
    font-weight: 700;
    color: red;
    margin-bottom: 8px;
    line-height: 1;
}

.experience-card p{
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    line-height: 1.5;
}
.tab.active span {
  color: red;
}

.global-info h4{
    font-family: var(--primary-font);
    font-size:28px;
    font-weight:700;
    margin-bottom:12px;
   text-transform: uppercase;
   color:#b9242e;
}

.item-hover {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: 350px;
}

.item-hover img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  transition: 0.4s;
}

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

/* 🔥 Small centered overlay */
.hover-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;  
  height: 60%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 15px;
  text-align: center;

  opacity: 0;
  transition: 0.4s;
  border-radius: 10px;
}

/* Show on hover */
.item-hover:hover .hover-overlay {
  opacity: 1;
}

.circle-btn {
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 50%; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  margin-top: 12px;
  transition: all 0.3s ease;
}

.circle-btn:hover {
  background: #fff;
  color: #000;
  transform: scale(1.15);
}


.typing-title{
  overflow: hidden;
  white-space: nowrap;

  width: 0;
}

.typing-title.active{
  animation: typing 3.5s steps(28,end) forwards;
}

/* Typing */
@keyframes typing{
  from{
      width: 0;
  }
  to{
      width: 28ch;
  }
}


.animate__delay-6s{
  animation-delay: 6s;
}

.animate__delay-7s{
  animation-delay: 7s;
}

.animate__delay-8s{
  animation-delay: 8s;
}

.tabs .tab{
    text-decoration: none;
}