@charset"utf-8";

html{
height: 100%;
}

body{
color: #000;
width:100%;
/* background-image:url('images/texture2.png');  */
background-color: #182034;
}


*{
/*fontawesome for all elements*/
font-family:"Font Awesome\ 5 Pro" , arial , Open Sans, sans-serif; 
padding: 0;
margin: 0;
box-sizing: border-box;
}


:root {
--primary: #6a11cb;
--secondary: #2575fc;
--accent: #ff6b6b;
--light: #f8f9fa;
--dark: #212529;
--transition: all 0.3s ease;
}


@font-face{
    font-family:'leafy_font';
     src: url(fonts/Leafy-Regular.ttf);
}

.leafy_font {
 font-family: leafy_font;
 /*font-size:20px;*/
}





/* Slider Styles */
.slider {
height: 500px;
position: relative;
overflow: hidden;
margin-bottom: 60px;
}

.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
padding: 0 10%;
}

.slide.active {
opacity: 1;
}

.slide-1 {
background: url('images/banner_images/3.jpg');
background-size: cover;
background-position: center;
}

.slide-2 {
/* background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/banner_images/4.jpg'); */
background: url('images/banner_images/4.jpg');
background-size: cover;
background-position: center;
}

.slide-3 {
background:url('images/banner_images/5.jpg');
background-size: cover;
background-position: center;
}

.slide-content {
max-width: 800px;
transform: translateY(30px);
transition: transform 1s ease;
}

.slide.active .slide-content {
transform: translateY(0);
}

.slide h2 {
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.slide p {
font-size: 1.2rem;
margin-bottom: 30px;
}

.btn {
display: inline-block;
background: var(--accent);
color: white;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: none;
cursor: pointer;
}

.btn:hover {
background: #ff5252;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.slider-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
}

.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
margin: 0 8px;
cursor: pointer;
transition: var(--transition);
}

.dot.active {
background: white;
transform: scale(1.2);
}







@media (max-width: 992px) {

.slide h2 {
font-size: 2.5rem;
}

}

@media (max-width: 768px) {

.slider {
height: 400px;
}

.slide h2 {
font-size: 2rem;
}

.slide p {
font-size: 1rem;
}
}



        /* end slider */







    
    .welcome-gradient {
      font-size: 4rem;
      font-weight: bold;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
      background-size: 400% 400%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientShift 3s ease infinite;
    }

    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }



#welcome_text {
  display:flex;
  flex-direction: column;
  background-color: #323232;
  width:90%;
  margin:10px auto;
  padding: 50px 10px;
  border-radius: 10px;
}


#welcome_text h1 {
  text-align: center;
  padding: 10px 0;
  /* margin-bottom:10px; */
  color:#fefefe;
}





@media only screen and (max-width:850px){
#welcome_text {
width:98%;

}

}





.border-design{
	height:0px;
	flex: 1;
	background: green;
	border: 2px solid;
border-image: linear-gradient(to right, #fed330 0%,#fed330 20%,#e63841 20%,#e63841 20%,#e63841 40%,#5ed6fd 40%,#5ed6fd 40%,#e63841 40%,#5ed6fd 40%,#5ed6fd 40%,#5ed6fd 60%,#45c33b 60%,#45c33b 80%,#1172c0 80%,#1172c0 80%,#1172c0 100%) 1 stretch repeat; /* W3C */
}



@font-face {
  font-family: myFirstFont;
  src: url(fonts/intro/intro.otf);
}
#intro {
/* font-family: myFirstFont; */
/* text-align: justify; */
margin:10px auto;
/* width:60%;  */
padding:10px 2px;
/*border:1px solid green;*/
font-weight: ;
/* line-height: 25px; */
font-size:16px;
/* letter-spacing: 1px; */
/* color:#fff; */
/* animation: glowl 2s ease-in-out infinite alternate; */
/* background-color: rgba(70, 81, 90, 0.54);  */
border-radius:10px;
color:#fefefe;
}











@keyframes glowl {
from {
text-shadow: 0 0 20px #2d9da9;
}
to {
text-shadow: 0 0 30px #34b3c1, 0 0 10px #4dbbc7;
}
}









#offering_images {
width: 90%;
/*border:1px solid black;*/
margin:20px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin:20px auto;
padding:50px 10px;
/* background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%); */
border-radius: 10px;
}
#offering_service{
/* animation: 5s infinite glowing_border; */
/* transition: .8s; */
border-radius: 10px;
width:250px;
/* border:5px solid #fff; */
border-radius: 10px;
margin:7px;
box-shadow: 0px 0px 5px lightblue;
display: flex;
flex-direction: column;

}


#offering_images #offering_service img{
  width: 100%;

border-top-left-radius:10px ;
border-top-right-radius:10px ;

}


#offering_images #offering_service p{
  text-align: center;
  font-weight: bold;
  padding:10px 2px;
}



#offering_images #offering_service:hover{

/* border:10px solid #fff; */
box-shadow: 5px 5px 5px lightblue;



}



@media only screen and (max-width:850px){
#offering_images {
width:98%;
}


#offering_service{

width:150px;
}



#offering_service img {


    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}




 #offering_service p{
    display: none;
 }


}


.heading  
{  
background-color:darkred;  
/* margin:10px; */
width:80%;
margin:0 auto;
text-align: center;  
font-size:17px;  
color:white;  
padding:10px;  
border:2px dashed white;  
/* border-radius:20px;   */
box-shadow:0px 0px 0px 4px darkred;  
animation: glowl 2s ease-in-out infinite alternate;
} 






/* for glowing border */

@keyframes glowing_border {
0% {
border-color: #e03c45;
}
25% {
border-color: #5ed6fc;
}
75% {
border-color: #fcd330;
}
100% {
border-color: #45c341;
}
}















	#products_container {
    /*width:60%;*/
    margin:0 auto;
  display: flex;
  flex-wrap: wrap;
justify-content: center;
  /*border:1px solid blue;*/
}

#product{
  width:200px;
/*  height:300px;*/
  /*border:1px solid blue;*/
  display: flex;
  flex-direction: column;
  /*position: relative;*/
  margin:10px;
  justify-content: center;
  align-items: center;
position: relative;

  border:5px solid #fff;
box-shadow: 0px 0px 5px lightblue;	
  overflow: hidden;

}

#product #short_stock{
  position: absolute;
  top:0;
  background: red;
  color:#fff;
}



#products_container img{
  width:100%;
  height:250px;
/*  max-height:250px;*/
  object-fit: cover;
  text-align: center;
  transition: .5s;
}




#product:hover{
  /*border: 10px solid black;*/
  /*animation: shaking_animation 0.8s infinite;*/

}


#product div{
	display: flex;
}

#product p{
width:100%;
padding: 5px 0;
text-align: center;
font-weight: bold;
border:1px solid green;
margin:0 auto;
font-size: 15px

}

#product input{
	/*border:1px solid green;*/
	border:0;
	outline:1px solid green;

	width:100%;
	padding: 10px 0;
	text-align: center;
  font-weight: bold;
font-size: 15px
}










@keyframes shaking_animation {
0% { transform: rotate(0deg);  }
25% { transform: rotate(5deg); }
50% { transform: rotate(0eg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}


button {
cursor: pointer;
padding: 10px;
}



input[type="text"], 
input[type="number"], 
input[type="password"],
input[type="hidden"],
input[type="submit"],
button,
textarea,
select	
{ 
outline: 0; 
border: 1px solid black; 
border-radius: 0;
padding:10px;
margin: 0;
width:100%;

}


textarea{
  resize: vertical;
  min-height: 100px;
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

input[type="checkbox"],input[type="radio"] {
width: 20px;
height: 20px;
}

fieldset {
border: 1px solid black; 
display: flex; 
justify-content: center; 
padding:10px; 
margin-bottom: 5px;
}
legend{
margin-left:10px; 
padding:0 5px; 
color:black;
}


/* Gradient background section (using ID now) */
#about_us {
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  color: white;
  text-align: center;
  padding: 50px 20px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
  width:90%;
  margin:0 auto;
  border-radius:10px;
}

#about_us h1 {
  padding: 20px 0;
}

#about_us p{
  margin:20px 0;
  text-align: left;
}

/* When active (in view) */
#about_us.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------end----------------- */

#our_work {

  width:90%;
margin:10px auto;


  /*background-color: blue;*/


}





             .our_work {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 15px;
          padding: 20px;

  width: 90%;
    margin: 10px auto;

        }


.our_work_heading{
  font-size:22px;
  width:90%;
  margin:0 auto;

}


    
                .our_work img {
          width: 300px;
          /* fixed width */
          height: 200px;
          /* fixed height */
          object-fit: cover;
          /* keeps aspect ratio but fills box */
          border-radius: 8px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          transition: transform 0.3s ease;
        }
    
        .our_work img:hover {
          transform: scale(1.05);
        }






    /* Animated gradient box */
    .animated-box {
      position: relative;
      padding: 10px;
      border-radius: 20px;
      width:90%;
      margin:0 auto;
      color: #ffffff;
      font-size: 20px;
      /* font-weight: 600; */
      text-align: center;
      overflow: hidden;
      z-index: 0;




    }
  
    /* Animated gradient background */
    .animated-box::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background: linear-gradient(270deg,
          #ff5f6d,
          #ffc371,
          #47ff00,
          #00c6ff,
          #9c27b0,
          #ff0099,
          #ff5f6d);
      background-size: 600% 600%;
      animation: bgMove 25s ease infinite;
      z-index: -2;
    }
  
    /* Subtle dark overlay to keep text readable */
    .animated-box::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.35);
      z-index: -1;
    }
  
    /* Background animation */
    @keyframes bgMove {
      0% {
        background-position: 0% 50%;
      }
  
      50% {
        background-position: 100% 50%;
      }
  
      100% {
        background-position: 0% 50%;
      }
    }
/* end Rotation border animation */