html,body{
	overflow-x: hidden;
	color: black;
	font-family: sans-serif;
}
.navbar{
	background-color: white;
	z-index: 16;
}
.navbar-toggler{
	color: transparent;
	border: none;
}
#collapsibleNavbar{
	text-align: center;
}
#collapsibleNavbar h6{
	font-weight: bold;
	padding: 0 6px;
}
ul li a h6:hover{
	color: lightblue;
}
#scrollTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #00AEEF; /* Blue background */
  color: white;
  cursor: pointer;
  padding: 9px 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
}

#scrollTopBtn:hover {
  background-color: #007bb5; /* Darker blue on hover */
}

.page-home a[href="index.html"],
.page-our-design-packs a[href="our_design_packs.html"],
.page-contact a[href="contact.html"],
.page-services a[href="services.html"],
.page-second-services a[href="second_services.html"]{
  color: lightblue!important;
}
.page-printing-department a[href="printing_department.html"]{
	color: lightblue;	
}
.page-printing-department .printing a[href= "printing_department.html"]{
	color: white!important;
}
.page-printing-department .nav-box[href= "printing_department.html"]{
	border-left: 4px solid lightblue;
}
.page-embroidery-department a[href="embroidery_department.html"],
.page-lace-department a[href="lace_department.html"],
.page-sewing-department a[href="sewing_department.html"],
.page-quality-and-inspection a[href="quality_and_inspection.html"]{
	color: lightblue;	
}
.page-embroidery-department .nav-box[href= "embroidery_department.html"],
.page-lace-department .nav-box[href= "lace_department.html"],
.page-sewing-department .nav-box[href= "sewing_department.html"],
.page-quality-and-inspection .nav-box[href= "quality_and_inspection.html"],
.page-our-design-packs .nav-box[href= "our_design_packs.html"]{
	border-left: 4px solid lightblue;
}
.page-embroidery-department .embroidery a[href= "embroidery_department.html"],
.page-lace-department .lace a[href= "lace_department.html"],
.page-sewing-department .sewing a[href= "sewing_department.html"],
.page-quality-and-inspection .quality-and-inspection a[href= "quality_and_inspection.html"],
.page-our-design-packs .our-design-packs a[href= "our_design_packs.html"],
.page-services .services a[href= "services.html"],
.page-second-services .second-services a[href= "second_services.html"]{
	color: white!important;
}
.page-services .span-1,
.page-second-services .span-2{
	background: lightblue!important;
	color: white;
}
/* Show dropdown on hover */
    .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
    }

    /* Transparent toggle button */
    .dropdown-toggle {
      background-color: transparent !important;
      border: none !important;
      color: rgba(0, 0, 0, 0.675)!important; /* Default text color */
      font-weight: 500;
      box-shadow: none !important;
      transition: color 0.2s ease;
    }

    /* Text color turns light blue on hover */
    .dropdown:hover .dropdown-toggle {
      color: lightblue!important; /* Bootstrap's primary blue, or use #00aaff for lighter blue */
    }

    /* Remove down arrow */
    .dropdown-toggle::after {
      display: none !important;
    }

    /* Dropdown menu */
    .dropdown-menu {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      min-width: 200px;
    }

    /* Dropdown items */
    .dropdown-item {
      padding: 12px 16px;
      background-color: #fff;
      color: rgba(0, 0, 0, 0.675);
      font-weight: 400;
      transition: color 0.2s ease;
    }

    .dropdown-item:hover {
      color: lightblue; /* Light blue text on hover */
    }

    /* Divider between items */
    .dropdown-item + .dropdown-item {
      border-top: 1px solid #e0e0e0;
    }			
#second{
	padding: 0;
	position: relative;
	margin-bottom: 150px;
}
#second img{
	width: 100%;
	height: auto;
}
#second-1{
	display: flex;
	justify-content: space-between;
	position: absolute;
	bottom: -100px;
	left: 50%;
	transform: translate(-50%);
}
#second-1 img{
	width: 20%;
	height: auto;
}
#fabric{
	text-align: center;
	background: #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border-bottom: 3px solid transparent;
}
#fabric img{
	transition: transform 0.8s ease-in-out;	
}
#fabric:hover img{
	transform: rotatey(360deg);
}
#fabric:hover{
	border-bottom: 3px solid lightblue;
}
#manufacture{
	text-align: center;
	background: #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border-bottom: 3px solid transparent;
}
#manufacture img{
	transition: transform 0.8s ease-in-out;	
}
#manufacture:hover img{
	transform: rotatey(360deg);
}
#manufacture:hover{
	border-bottom: 3px solid lightblue;
}
#export{
	text-align: center;
	background: #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border-bottom: 3px solid transparent;
}
#export img{
	transition: transform 0.8s ease-in-out;	
}
#export:hover img{
	transform: rotatey(360deg);
}
#export:hover{
	border-bottom: 3px solid lightblue;
}
#third{
	margin: 0 auto;
}
#third h6{
	font-weight: bold;
}
#fourth{
	background-color: rgb(115, 185, 206);
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0;
	margin: 0;
}
#fourth-1{
	display: flex;
	justify-content: center;
}
#fourth-1a {
	color: white;
}
#fourth-1a h2, p{
	font-weight: bold;
}
#fourth-2{
	padding: 0;
}
#fourth-2 img{
	width: 100%;
	height: auto;
	margin: 0;
}
.card-wrapper {
      position: relative;
    }

    .info-box {
      background-color: white;
      border: 6px solid white;
      padding: 30px 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: box-shadow 0.3s ease;
    }

    .circle-number {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #f2f2f2;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 16px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      transition: background-color 0.3s ease, color 0.3s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      z-index: 10;
    }

    .top-number {
      top: -45px;
    }

    .bottom-number {
      bottom: -45px;
    }

    /* ✅ This ensures hovering on the whole wrapper changes the number */
    .card-wrapper:hover .circle-number {
      background-color: #00aeef;
      color: white;
    }
#fifth{
	background-color: rgb(34, 45, 53);
	color: white;
	display: flex;
	justify-content: space-between;
	padding-right: 0;
	width: 90%;
	padding-left: 0;
}
#first-fifth{
	padding-left: 0;
}
#fifth-1{
	display: flex;
	justify-content: space-between;
}
#award{
	display: flex;
	align-items: center;
}
#award img{
	width: 30%;	
}
#award strong{
	font-size: 25px;
}
#equipment{
	display: flex;
	align-items: center;
}
#equipment img{
	width: 30%;
}
#equipment strong{
	font-size: 25px;
}
#total-years{
	display: flex;
	align-items: center;
}
#total-years img{
	width: 30%;
}
#total-years strong{
	font-size: 25px;
}
#fifth-2{
	background-color: #ffffff;
	padding: 30px 0 30px 30px;
	margin: 0;
}
#fifth-2 img{
	width: 100%;
	height: auto;
}
.step-container {
      position: relative;
      margin-bottom: 30px;
    }

.step-number {
position: absolute;
left: 0;
top: 10px;
background-color: #f5f5f5;
color: #333;
border-radius: 50%;
width: 50px;
height: 50px;
font-weight: bold;
text-align: center;
line-height: 50px;
z-index: 2;
transition: all 0.3s;
border: 2px solid #eee;
}

.step-connector {
position: absolute;
left: 24px;
top: 60px;
height: 100%;
width: 2px;
background: #eee;
z-index: 1;
}

.step-box {
background-color: #f8f9fa;
padding: 20px;
border-left: 5px solid transparent;
border-radius: 6px;
margin-left: 80px;
position: relative;
transition: all 0.3s ease;
}



/* Hover effect */
.step-container:hover .step-number {
background-color: #0d6efd;
color: #fff;
border-color: #0d6efd;
}

.step-container:hover .step-box {
background-color: #e9f1ff;
}


.step-container:hover .step-connector {
background-color: #0d6efd;
}
#sixth{
	margin: 0 auto;
}
#sixth-1 h4{
	text-align: right;
}
#sixth-2{
	display: flex;
	justify-content: flex-end;
}
#sixth-2a{
	background-color: #f8f9fa;
}
#sixth-2a img{
	width: 220%;
	position: relative;
	right: 120%;
}
.footer-1{
	width: 100%;
	height: auto;
	padding: 43px 0;
	background-color: #555c63;
} 
.footer-2{
	background-color: #222d35;
	color: white;
	padding: 10px 0;
	text-align: center;
}
.footer-2 a{
	text-decoration: none;
}









#services-1{
	position: relative;
	padding: 0;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* dark overlay */
z-index: 1;
}  
#services-1a{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
#services-1a ul li {
	list-style-type: none;
}
#services-1a h1{
	color: white;
}
#services-1 h1{
	text-align: center;	
}
#services-1a ul li a{
	text-decoration: none;
	list-style-type: none;
	color: darkgrey;
}
#services-1a ul li a:hover{
	color: white;
}
.circle{
	width: 8px;
	height: 8px;
	background-color: lightblue;
	border-radius: 50%;
}
#services-1 img{
	width: 100%;
	height: 250px;
	filter: brightness(70%);
}
.nav-box {
  display: block;
  border-left: 4px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.nav-box:hover {
  background-color: #f5faff;
  border-left: 4px solid lightblue;
  color: lightblue;
}
#services-2 a{
	text-decoration: none;
}
#services-2{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

#services-2a{
	display: flex;
	justify-content: space-between;
	background-color: #f8f9fa;
	padding: 0;
}
#services-2a:hover{
	color: li;
}
#services-2b{
	display: flex;
	justify-content: space-between;
	background-color: #f8f9fa;
}
#services-2c{
	display: flex;
	justify-content: space-between;
	background-color: #f8f9fa;
}
#services-2d{
	display: flex;
	justify-content: space-between;
	background-color: #f8f9fa;
}
#services-2e{
	display: flex;
	justify-content: space-between;
	background-color: #f8f9fa;
}
#services-2f{
	display: flex;
	justify-content: space-between;
	background-color: #f8f9fa;
}
#services-2i img{
	width: 100%;
	height: auto;
}
.services-page-1 a{
		text-decoration: none;
}
.services-page-a{
	overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.services-page-a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.services-page-a .img-fluid {
  transition: transform 0.3s ease;
}
.services-page-a:hover .img-fluid {
  transform: scale(1.01);
}
.services-page-a h3 {
  transition: transform 0.3s ease;
}
.services-page-a:hover h3 {
  transform: translateY(-3px);
}
.services-page-2 span{
	background: #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.services-page-2 span:hover{
	background: lightblue;
	color: white;
}
.services-page-2 a{
	text-decoration: none;
	color: black;
}
.services-page-2b{
	margin-top: 100px;
}



#contact-1{
	position: relative;
	margin-bottom: 800px;
}
#contact-1 img{
	width: 100%;
	height: 250px;
}  
#contact-1a{
	background: #ffffff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	padding-right: 50px;
	padding-left: 50px;
}
#contact-1a a{
	text-decoration: none;
	color: lightblue;
}
#contact-1a label, input{
	display: block;
	margin: 10px 0;
}
#contact-1a input{
	width: 100%;
	height: 50px;
}
#contact-1a textarea{
	width: 100%;
	height: 200px;
}
.contact-image{
	margin: 10px 0;
}
.contact-button{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 130px;
	height: 45px;
	background: black;
	color: white;
	border: none;
}
.contact-button:hover{
	background: lightblue;
}
.fa-check{
	margin-bottom: 35px;
	margin-right: 5px;
	color: lightblue;
}





@media(max-width: 1200px){
	#award img{
	width: 35px;	
	height: auto;
}
#equipment {
	margin: 25px 0;
}
#equipment img{
	width: 35px;
	height: auto;
}
#total-years img{
	width: 35px;
	height: auto;
}
#sixth-2a img{
	width: 100%;
	right: auto;
} 
}






@media(max-width: 992px){
#questions{
	display: none;
}
#second-1{
	display: inline-block;
	position: relative;
	bottom: auto;
	left: 50%;
	margin: 0 auto;

}
#fabric img{
	width: 10%;
}
#manufacture img{
	width: 10%;
}
#export img{
	width: 10%;
}
#fourth{
	padding: 50px 0;
}
#fourth-2 img{
	display: none;
}
.first-card{
	margin-bottom: 50px;
	height: 50vh;
}
.second-card{
	margin-bottom: 130px;
	height: 50vh;
}
.third-card{
	margin-bottom: 50px;
	height: 50vh;
}
.fourth-card{
	height: 50vh;
}
#fifth{
	margin: 0;
	padding: 0;
}
#fifth-2{
	margin: 50px 0;
}
#award img{
	width: 5%;	
}
#equipment {
	margin: 25px 0;
}
#equipment img{
	width: 5%;
}
#total-years img{
	width: 5%;
}
#sixth-2a img{
	width: 100%;
	right: auto;
} 
.quality{
	margin-top: 30px;
}
}

@media(max-width: 768px){
.container{
	max-width: 100%!important;
}
#questions{
	display: none;
}
#second-1{
	display: inline-block;
	position: relative;
	bottom: auto;
	left: 50%;
	margin: 0 auto;

}
#fabric img{
	width: 10%;
}
#manufacture img{
	width: 10%;
}
#export img{
	width: 10%;
}
#fourth{
	padding: 50px 0;
}
#fourth-2 img{
	display: none;
}
.first-card{
	margin-bottom: 30px;
	height: 50vh;
}
.second-card{
	margin-bottom: 130px;
	height: 50vh;
}
.third-card{
	
	height: 50vh;
}
#fifth{
	margin: 0;
	padding: 0;
}
#fifth-2{
	margin: 50px 0;
}
#award img{
	width: 7%;	
}
#equipment {
	margin: 25px 0;
}
#equipment img{
	width: 7%;
}
#total-years img{
	width: 7%;
}
#sixth-2a img{
	width: 100%;
	right: auto;
}
.order-2{
	margin-top: 30px;
} 
.quality{
	margin-top: 30px;
}
#services-1 h1{
	text-align: center;	
}
#services-2{
	margin: 0;
}
.departments{
	margin-top: 100px;
}  
}



@media(max-width: 576px){
#questions{
	display: none;
}
#second{
	margin-bottom: 100px;
}
#second-1{
	display: inline-block;
	position: relative;
	bottom: auto;
	left: 50%;
	margin: 0 auto;

}
#fourth{
	padding: 50px 0;
}
#fourth-2 img{
	display: none;
}
.first-card{
	margin-bottom: 30px;
	height: 75vh;
}
.second-card{
	margin-bottom: 130px;
	height: 75vh;
}
.third-card{
	
	height: 75vh;
}
.fourth-card{
	margin-bottom: 50px;
	height: 75vh;
}
#fourth-1a{
	text-align: center;
}
#fifth{
	margin: 0;
	padding: 0;
}
#fifth-2{
	margin: 50px 0;
}
#award img{
	width: 9%;	
}
#equipment {
	margin: 25px 0;
}
#equipment img{
	width: 9%;
}
#total-years img{
	width: 9%;
}
#sixth-2a img{
	width: 100%;
	right: auto;
}
#services-1 li{
	font-size: 13px;	
}  
#services-1 h1{
	text-align: center;	
}  
.fa-check{
	margin-bottom: 45px;
	margin-right: 5px;
	color: lightblue;
}
.quality{
	margin-top: 50px;
}
}