@charset "UTF-8";
/* CSS Document */

/* Import Futura from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Futura&display=swap');

/* Apply Futura font to headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Futura', sans-serif;
}


.bg-light
{
	 position: sticky;
	 position: -webkit-sticky;
    top: 0px;
	border-bottom:1px solid gray;
	z-index:3000;
}


/* Custom CSS for navbar */
.navbar-toggler {
    font-size: 1.5rem; /* Increase font size for toggle button */
    color: white !important; /* Set color of toggle button text to white */
    border-color: white !important; /* Set border color of toggle button to white */
}

.navbar-toggler:before {
    content: "Menu"; /* Add "Menu" beside the toggle button */
    color: white !important; /* Set color of "Menu" text to white */
    font-size: 1rem; /* Adjust font size of "Menu" text */
    margin-right: 10px; /* Add margin to the right of "Menu" text */
}

.navbar-nav .nav-item .nav-link,
.dropdown-menu .dropdown-item {
    color: black !important; /* Set color of navbar links to black */
    font-size: 1rem; /* Increase font size of navbar links */
}

.navbar-nav .nav-item.active .nav-link {
    font-weight: bold; /* Set font weight to bold for active page */
}

.dropdown-menu .dropdown-item {
    border-bottom: 1px solid black; /* Add line underneath dropdown items */
}

/* Special styling for "Repair Services" dropdown */
.dropdown-menu .dropdown-item.repair-services {
    color: blue !important; /* Set color of "Repair Services" dropdown item */
    font-weight: bold; /* Set font weight to bold for "Repair Services" dropdown item */
}

/* Increase font size for navbar links for mobile devices */
@media (max-width: 767px) {
    .navbar-toggler {
        font-size: 1.2rem; /* Decrease font size for toggle button on mobile */
    }
    
    .navbar-toggler:before {
        font-size: 1rem; /* Decrease font size of "Menu" text for mobile */
        margin-right: 5px; /* Add margin to the right of "Menu" text for mobile */
    }
    
    .navbar-nav .nav-item .nav-link,
    .dropdown-menu .dropdown-item {
        font-size: 1rem; /* Adjust font size for navbar links on mobile */
    }
    
    /* Additional styling for "Repair Services" dropdown item on mobile */
    .dropdown-menu .dropdown-item.repair-services {
        font-size: 1rem; /* Adjust font size for "Repair Services" dropdown item on mobile */
    }
}
.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    }
	.navbar-nav, .bg-light{
	background-color: white !important;
		padding-top:0px;
		padding-bottom:5px;
	}
		  a.nav-item,  li.nav-item a{
			  color:black !important;
			 
		  }

		 .nav-item.active{
			  color: #3d58a6 !important;
		  }
		  .page-header{
			  text-align: center;
			  margin-top:0px;
			  margin-bottom:20px;
			  padding-bottom:20px;
			  border-bottom: solid 3px #3d58a6;
			  padding-top:30px;
			  background:url('Images/SRJ Windows Cwmbran Newport Cardiff.jpg') no-repeat;
		  }
		  .contact-header{
			  position: absolute; right:30px; top:112px;
			  font-size:22px;
			  padding bottom: 10px;
		  }
		  .contact-header p{
			  min-width:200px;
			  text-align: left;
			  margin-bottom:0px;
		  }
		  .carousel
		  {
			  margin-bottom:10px;
		  }


/* Default height */
.carousel-item {
    height: 700px; /* Change this value as needed */
}

/* Media query for smaller devices */
@media screen and (max-width: 768px) {
    .carousel-item {
        height: 250px; /* Adjust the height for smaller devices */
    }
}


.carousel-item2 {
    height: 550px; /* Change this value as needed */
}

/* Media query for smaller devices */
@media screen and (max-width: 768px) {
    .carousel-item2 {
        height: 100px; /* Adjust the height for smaller devices */
    }
}

		  .container h1, .container p{
			  text-align: center;
		  }
		  h1{
			  color:#3d58a6;
			  font-size: 40px;
			  margin-bottom:15px;
		  }
		  
		  h2{
			  color:#3d58a6;
			  font-size: 22px;
			  margin-bottom:15px;
		  }
		  
		 h3{
			  color:#3d58a6;
			  font-size: 10px;
			  margin-bottom:15px;
		  }

		  h4{
			color:#ffffff;
			font-size: 28px;
			margin-bottom:15px;
		}
		  
		  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}
		  
.footer {
	background-color: #3d58a6;
	padding-top: 70px;
  }
  
  /* Media query for smaller devices */
  @media screen and (max-width: 768px) {
	.footer {
	  height: auto; /* Let the height adjust dynamically */
	}
  }
  
		  .footer h2
		  {
			  color:white;
			  font-size:18px;
			  margin-bottom: 20px;
		  }
		  .footer p
		  {
			  color:white;
			  text-align: left;
			  font-size: 14px;
		  }
		  .footer a{
		  color:#bbbbbb;
		  }
		  .copyright
		  {
			  background-color:#3d58a6;
		  }
		  .copyright p
		  {
			  text-align:center;
			  padding:30px;
			  margin:0px;
			  font-size: 12px;
			  color: #fff;
			
		  }
		 
		  .img-col
		  {
			  width:100%;
			  margin-top:10px;
			  margin-bottom:10px;
		  }
		  
		  @media (max-width: 768px) { 
		  .navbar-light{
			 background-color: #3d58a6 !important;
			 padding:10px;
			 
		  }
			   .page-header
			  {
				  margin-bottom: 0px;
				  text-align: left;
				  padding-left:30px;
			  }
			 .navbar-nav, .bg-light {
			background-color: #3d58a6 !important;
			width: 100%;
			text-align: center;
			   }
			  .nav-item, .nav-item.active
			  {
				  color:white!important;
			  }
			  			 iframe.googlemap{
				 max-height:200px;
			 }
			 
			 .img-text{
		  
		  min-height:250px;
		  }
			  
		  }
		   @media (max-width: 480px) { 
			    .contact-header{
					position:relative;
					top:10px;
					left:0px;
					font-size:18px;
		
		  }
		  .contact-header p{
			 
			  text-align: center;
			  margin-bottom:0px;
		  }
			    .page-header
			  {
				  margin-bottom: 0px;
				  text-align: center;
				  padding-left:0px;
			  }
			 
		  }
		  
		   .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
  .column {
  flex: 50%;
  max-width: 50%;

}

  .column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 96%;
  margin:2%;
}

.logo-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Center align the logos */
	align-items: center;
	background-color: #ffffff; /* White background color */
	padding: 10px 0; /* Adjust padding for reduced height */
  }
  
  .logo-strip img {
	max-width: 250px;
	height: auto;
	margin: 10px 20px; /* Adjust margin as needed for more space */
  }
  
  @media (max-width: 600px) {
	.logo-strip {
	  justify-content: center; /* Center align the logos */
	}
  
	.logo-strip img {
	  width: 100%;
	  max-width: 250px;
	  margin: 10px 5px; /* Adjust margin as needed */
	}
  }
  

/* Style the form and contact info */
.container2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .contact-section,
  .contact-info {
    padding: 20px;
  }
  
  /* Style the form */
  .contact-form form {
    display: grid;
    gap: 10px;
  }
  
  .contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .contact-form .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .contact-form input[type=text],
  .contact-form input[type=email] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  /* Style the submit button */
  .contact-form input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .contact-form input[type=submit]:hover {
    background-color: #45a049;
  }
  
  /* Media query for smaller devices */
  @media screen and (max-width: 768px) {
    .container {
      grid-template-columns: 1fr;
    }
  }
  
  /* Style the titles */
  h2, h4 {
    color: white;
  }

  /* Style labels */
label {
    color: white;
  }
  
  /* Remove borders from rows */
  .row {
    border: none;
  }
  
  .full-width-container {
	width: 100%;
	padding: 20px; /* If needed */
  }
  
  .container3 {
	width: 100%;
	max-width: 1200px; /* Adjust max-width as needed */
	margin: 0 auto; /* Center the container */
  }
  
  .container3 h4,
  .container3 iframe,
  .container3 p {
	width: 100%;
  }
  
  .container2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Center the columns */
  }
  
  .container2 .contact-section,
  .container2 .contact-info {
	flex: 0 0 calc(50% - 30px); /* Adjust the width and padding */
	max-width: calc(50% - 30px); /* Adjust the width and padding */
	padding: 0 15px; /* Adjust the padding */
	box-sizing: border-box; /* Include padding in the width calculation */
  }
  
  .container2 .contact-section {
	margin-bottom: 20px; /* Add margin if necessary */
  }
  
  .container2 .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px; /* Adjust if necessary */
  }
  
  .container2 .col {
	flex: 0 0 50%;
	max-width: 50%;
	padding: 0 10px; /* Adjust if necessary */
  }
  
  .container2 h4 {
	margin-top: 0; /* Remove default margin if necessary */
  }
  
  /* Media query for smaller devices */
  @media screen and (max-width: 768px) {
	.container2 .contact-section,
	.container2 .contact-info {
	  flex: 0 0 100%; /* Adjust the width */
	  max-width: 100%; /* Adjust the width */
	}
  
	.container2 .row {
	  margin: 0; /* Reset margin */
	}
  
	.container2 .col {
	  flex: 0 0 100%;
	  max-width: 100%;
	  padding: 0 10px; /* Adjust if necessary */
	}
  
	.container2 textarea,
	.container2 input[type="email"],
	.container2 input[type="text"] {
	  width: calc(100% - 30px); /* Set width to 100% */
	  padding: 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	}
	
	.container2 textarea,
	.container2 input[type="email"],
	.container2 input[type="text"],
	.container2 input[type="submit"] {
	  width: calc(100% - 30px); /* Set width to 100% */
	}
  }
  

  .image-container {
    position: relative;
  }


.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(61, 88, 166, 0.7); /* Transparent blue overlay */
    color: white;
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
}


.img-col {
    width: 100%;
    height: auto;
    display: block;
  }

  @media (max-width: 767px) {
	.transparent-box {
	  position: relative;
	}
	.description {
	  padding: 0;
	}
  }
  .transparent-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(61, 88, 166, 0.7);
    color: white;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
	display: inline;
	/* Add any other necessary styles */
  }
  
  .transparent-box a {
	color: inherit;
  }
  
  .transparent-box a:hover {
	text-decoration: underline;
	text-decoration-color: white; /* Set the color of the underline */
	/* Add hover styles if needed */
  }
  


  a {
	color: #3d58a6;
  }

/* Review container */
.reviews-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Review box */
.review {
    width: calc(33.33% - 20px);
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

/* Speech mark */
.speech-mark {
    font-family: Helvetica;
    font-size: 140px;
    color: #3d58a6;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Add padding to create space between speech mark and review text */
.review-content {
    padding-top: 60px; /* Adjust as needed */
}

/* Stars rating */
.stars {
    color: gold;
    margin-top: 10px;
}

.stars .star {
    font-size: 20px;
}

/* Review text */
.review-text {
    font-size: 16px;
    margin-bottom: 10px;
}

/* Reviewer name */
.reviewer {
    font-style: italic;
    font-size: 14px;
    margin-top: auto;
}

/* Clear floats after every third column */
@media screen and (min-width: 768px) {
    .review:nth-child(3n+1) {
        clear: left; /* Clear after every third review */
    }
}

/* CSS for mobile screens */
@media screen and (max-width: 767px) {
    .review {
        width: calc(100% - 20px); /* Display 1 column per row and include padding */
        margin: 10px 0; /* Adjust margin for mobile */
    }
}


/* Base styles for image boxes */
.image-section {
	display: flex;
	flex-wrap: wrap;
  }
  
  .image-box {
	position: relative;
	margin-bottom: 20px;
	width: calc(50% - 20px); /* Two images per row on desktop */
	display: flex; /* Ensure center alignment */
	justify-content: center; /* Center the image */
	align-items: center; /* Center the image */
  }
  
  .image-box img {
	width: 100%;
	height: auto;
  }
  
  .image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.7); /* Dark background color */
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 15%; /* Adjust height of overlay */
  }
  
  .image-overlay h2 {
	color: white;
	font-size: 24px; /* Increase font size for heading */
	margin: 0;
  }
  
  .image-overlay p {
	color: white;
	font-size: 14px; /* Adjust font size for subtitle */
	margin-top: 5px; /* Add some margin space */
  }
  
  .image-section .image-box:not(:nth-child(2n)) {
	margin-right: 20px; /* Add spacing between images */
  }
  


/* Mobile version */
@media (max-width: 768px) {
	.image-box {
	width: 100%; /* Full width for mobile */
	  position: relative; /* Set position to relative */
	  padding-top: 5%; /* Adjust the top padding to 20% */
	  box-sizing: border-box; /* Include padding in the height calculation */
	}
	
	.image-overlay {
		height: 20%; /* Adjust the height of the overlay - this controls its height */
	  position: absolute; /* Set position to absolute */
	  bottom: 0; /* Align to the bottom */
	  left: 0; /* Align to the left */
	  width: 100%; /* Take full width */
	  padding: 5px; /* Adjust padding as needed */
	  box-sizing: border-box; /* Include padding in the width calculation */
	  background-color: rgba(0, 0, 0, 0.7); /* Dark background color */
	}
	
	.image-overlay h2 {
	  color: white;
	  font-size: 24px; /* Increase font size */
	  margin: 0;
	}
	
	.image-overlay p {
	  font-size: 16px; /* Font size for subtitle */
	  margin: 5px 0; /* Adjust margin for subtitle */
	}

    .image-section {
		flex-direction: column; /* Stack images vertically */
	  }

  }