/* Style created by Leena Datta in October 2024 */ 

	/* Style for the body */ 
	html{
	line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%; 
	}
	body{margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text);
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	/* Style for the navbar */ 
	#navbarNav {
	  justify-content: flex-end;
	  align-items: center;
	  padding-left: 10px;
	  
	}
	.navbar{
	  padding-left:0px;
	  padding-right:0px;
	  padding-bottom: 0px;
	  font-size: 20px;
	  }

  


	/* Style for the hero image for home page*/ 
	.hero {
    /* Sizing for 100% of the browser width and height*/
    width: 100vw;
    height: 100vh;
	/* Flexbox stuff */
    display: flex;
    justify-content: center;
    align-items: center;
	background-image: url("herohome.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
	/* Text styles */
    text-align: center;
	}
	
		
	.hero h1 {
    /* Text styles */
    font-size: 3em;
	color:white;
    
    /* Margins */
    margin-top: 0;
    margin-bottom: 0.5em;
	}
	
	.hero h2 {
    /* Text styles */
    font-size: 1.7em;
	color:white;	
	}
	.hero-overlay {
  background: rgba(129, 201, 244, 0.5);  /* Blue, 50% transparent */
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
}
	/* Style for the hero image for scrap metal page*/ 
	.herometal {
    /* Sizing for 100% of the browser width and height*/
    width: 100vw;
    height: 100vh;
	/* Flexbox stuff */
    display: flex;
    justify-content: center;
    align-items: center;
	background-image: url("hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
	/* Text styles */
    text-align: center;
	}
	
	
	.heroscrapmetal h1 {
    /* Text styles */
    font-size: 2.5em;
	color:white;
    
    /* Margins */
    margin-top: 0;
    margin-bottom: 0.5em;
	}
	
	.herometal h2 {
    /* Text styles */
    font-size: 1.7em;
	color:white;	
	}
	/* The above style is deactivated and modified to the hero style below*/
	
	/* HERO */
	.heroscrapmetal {
		width: 100vw;
		height: 35vh;
	  background: linear-gradient(120deg, #1e3a8a, #0ea5e9);
	  color: #fff;	  
	  border-bottom: 4px solid #0f172a;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	}



	/* style for page title*/
	.pagetitle {
	display: inline-block;
	color: #3380DA;
	cursor: pointer;
	margin-top: 0.1em;
    margin-bottom: 0em;
	font-size:1.9em;	
	font-weight: bold;
	
	}
	
	.imagerow{ 
   justify-content: center;
	}

	
	h2style {
		font-size: 1.7em;
	   color:#29535f;
	   font-weight: bold;
	}

	h3 {
		font-size: 1.2em;
		color: #3380DA;
	}
	
	h4 {
		font-size: 1em;
	   color: #3380DA;
	}
	
	parastyle {
		font-size: 1.5em; 
		font-weight: bold;
	}
	
	figure {
	
		overflow: hidden;
	}

	figure:hover+span {
		bottom: -36px;
		opacity: 1;
	}

	.hover01 figure img {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition: 1s ease-in-out;
		transition: 1s ease-in-out;
	}
	.hover01 figure:hover img {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}
	
	/* Override .img-fluid with fixed sizes */
	.img-fluid {
	flex-direction:column;
	justify-content:center;
	  max-width:400px;
	  height:300px;
	  border: 1px solid #333;
	}
	
	
	/* Back to normal .img-fluid responsive sizes */
	@media screen and (max-width:680px) {
	  .img-fluid {
	  flex-direction:column;
		justify-content:center;
		max-width:100%; 
		
	  } 
	  .logoresponsive
		{width: 80%;
		height: auto;}
		
		}
			/* Back to normal .img-fluid responsive sizes */
	@media screen and (max-width:680px) {
	  
		.pagetitle h1 {
		font-size:0.8em;
		padding-right:0.2em;}
		
		
		.aboutus_content, .contactus_content {
		font-size:1.7em;}
		
	    } 
		
		contactus_hero {
                               
			 /* Sizing for 100% of the browser width and height*/
				position: relative;
				width: 100vw;
				height: 100vh;
				/* Flexbox stuff */
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), url("contactushero.jpg");
				background-size: cover;
				background-position: center center;
				background-repeat: no-repeat;
				background-attachment: fixed;
				/* Text styles */
				text-align: center;
             }

             .contactus_content {
                text-align: center;
                position: absolute;
                top: 65%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #F9F2E1;
                font-family: Impact, fantasy;
                letter-spacing: 3px;
             }
			 
			 .contactus_hero {
                               
			 /* Sizing for 100% of the browser width and height*/
				width: 100vw;
				height: 35vh;
				 background: linear-gradient(120deg, #1e3a8a, #0ea5e9);
				 color: #fff;	  
				 border-bottom: 4px solid #0f172a;
				 display: flex;
				 justify-content: center;
				 align-items: center;
				 text-align: center;
				position: relative;
				
             }
			 
			 .aboutus_hero {
                               
			 /* Sizing for 100% of the browser width and height*/
				width: 100vw;
				height: 35vh;
				 background: linear-gradient(120deg, #1e3a8a, #0ea5e9);
				 color: #fff;	  
				 border-bottom: 4px solid #0f172a;
				 display: flex;
				 justify-content: center;
				 align-items: center;
				 text-align: center;
				position: relative;
				
             }
		
		
             .aboutus_content {
                text-align: center;
                position: absolute;
                top: 65%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #F9F2E1;
                font-family: Impact, fantasy;
                letter-spacing: 3px;
             }
			 
		/* Roboto Font Classes from Google*/
		.roboto-thin {
	  font-family: "Roboto", serif;
	  font-weight: 100;
	  font-style: normal;
	}

	.roboto-light {
	  font-family: "Roboto", serif;
	  font-weight: 300;
	  font-style: normal;
	}

	.roboto-regular {
	  font-family: "Roboto", serif;
	  font-weight: 400;
	  font-style: normal;
	}

	.roboto-medium {
	  font-family: "Roboto", serif;
	  font-weight: 500;
	  font-style: normal;
	}

	.roboto-bold {
	  font-family: "Roboto", serif;
	  font-weight: 700;
	  font-style: normal;
	}

	.roboto-black {
	  font-family: "Roboto", serif;
	  font-weight: 900;
	  font-style: normal;
	}

	.roboto-thin-italic {
	  font-family: "Roboto", serif;
	  font-weight: 100;
	  font-style: italic;
	}

	.roboto-light-italic {
	  font-family: "Roboto", serif;
	  font-weight: 300;
	  font-style: italic;
	}

	.roboto-regular-italic {
	  font-family: "Roboto", serif;
	  font-weight: 400;
	  font-style: italic;
	  color:white;
	}

	.roboto-medium-italic {
	  font-family: "Roboto", serif;
	  font-weight: 500;
	  font-style: italic;
	}

	.roboto-bold-italic {
	  font-family: "Roboto", serif;
	  font-weight: 700;
	  font-style: italic;
	}

	.roboto-black-italic {
	  font-family: "Roboto", serif;
	  font-weight: 900;
	  font-style: italic;
	}

	.midsection{
	   padding: 10px;
	   height: auto;
	   text-align: center;
	   color: #29535f;
	   font: 1.65em Arial sans-serif;
	   line-height: 1.3em;
	   justify-content: center;
	    padding-bottom:3px;

	}
	
	/* Style for Home page headings*/
	@import url('fonts.googleapis.com');

	.bubble-font {
	  text-align: center;
	  font-family: 'Rubik Bubbles', sans-serif;
	  font-size: 1.7em;
	  color: #3380DA;
	  letter-spacing: 2.5px;
	   /* Add a stroke for more definition */
	  -webkit-text-stroke: 1px #3380DA;
	 
	}
	
	/* Style for Home page centre text*/
	.middletext {
	justify-content: justify;	
	padding: 10px;
	text-align: center;
    vertical-align: middle;
	font-size: 1.6em; 
	color:#4b5563;	
	}
	
	/* Style for Scrap Metal page centre text*/
	.metaltext {
	justify-content: justify;	
	padding: 10px;
	text-align: center;
    vertical-align: middle;
	font-size: 1.4em; 
	color:#4b5563;	
	}
	
	/* Style for Responsive Image Gallery*/
	.gallery {
	border: 1px solid #333;
	}

	.gallery:hover {
	  border: 2px solid #3380DA;
	}

	
	.responsive {
	  padding: 0 6px;
	  float: left;
	  width: 24.99999%;
	}

	@media only screen and (max-width: 700px) {
	  .responsive {
		width: 49.99999%;
		margin: 6px 0;
	  }
	  .heroscrapmetal h1 {
		/* Text styles */
		font-size: 2em;
		justify-content:center;
		}
	}

	@media only screen and (max-width: 500px) {
	  .responsive {
		width: 100%;
	  }
	}

	.clearfix:after {
	  content: "";
	  display: table;
	  clear: both;
	}

/* Style for Home page bottom portion*/

:root {
      --bg: #f1f5f9;
      --card: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --border: #e2e8f0;
      --accent: #1e293b;
    }
 .btn { display:inline-block; padding:.6rem 1.2rem; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
    .btn.outline { background:transparent; color:var(--accent); }
   
    
    .grid { display:grid; gap:1rem; }
    .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .card { background:var(--card); border:1px solid var(--border); border-radius:1.25rem; padding:1.25rem; color:#3380DA;}
    .muted { color:var(--muted); }
	
/* Style for AceWatch page*/
/* HERO */
.herowatch {
	width: 100vw;
	height: 35vh;
  background: linear-gradient(120deg, #1e3a8a, #0ea5e9);
  color: #fff;
  padding: 3.5rem 0;
  margin-bottom: 2rem;
  
  border-bottom: 4px solid #0f172a;
  display: flex;
    justify-content: center;
    align-items: center;
	
	/* Text styles */
    text-align: center;
}

.herowatch h1 { font-size: 2em; margin-bottom: .6rem; }

/*.herowatch p  { font-size: 1em; max-width: 550px; opacity: .9; }*/

/* LAYOUT */
.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;  
  gap: 2rem;
 
}

/* SIDEBAR */
.sidebar{
  background: #fff;
  border-radius: 10px;
   margin-bottom: 1.2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.04);
  height: fit-content;
  
  max-width: 100%;
  
}
/* RESPONSIVE */
/* Tablet */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);  /* stack vertically and not just 1fr */
	
	}
}

/* Mobile */
@media (max-width: 600px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);  /* stack vertically and not just 1fr */
	}
	
  .sidebar {
    width: 100%;
    justify-self: stretch;
  }
 }

/* POSTS */
.post {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.04);
    
}

.post img {
  width: 100%;
  display: block;
}

.post h3 {
  padding: 1rem 1.2rem .3rem;
}

.post p {
  padding: 0 1.2rem 0;
  color: #4b5563;
  font-size:1em;
}

/*style for Read more/less button ID*/
  
#more1 {display: none;}
#more2 {display: none;}
#more3 {display: none;}

ul.b {list-style-type: disc;}



.widget h4 { margin-bottom: .8rem; }

.market,
.trending { list-style: none; }

.market li,
.trending li { padding: .4rem 0; }

.market span { color: #374151; }
.market strong { color: #0ea5e9; }

.trending a {
  text-decoration: none;
  color: #0f172a;
}

.trending a:hover { text-decoration: underline; }