*{
box-sizing: border-box;
margin: 0;
padding: 0;


}

@font-face {
	font-family:'Inter';
	src: url(Resources/fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
}
body{
	background-color: whitesmoke;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
	font-family: "inter";
	overflow-x: hidden;
	font-family: 'Inter'
}

nav{
	width: 100vw;
	background-color: #07174a;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
nav ul{
	width:100vw;
	list-style: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
nav li{
	height: 80px;
}
nav a{
	height: 100%; 
	padding: 0 30px;
	text-decoration: none;
	display: flex;
	align-items: center;
	color:white;
}
nav a:hover{
	background-color: #235bfd;
	transition: background-color 0.3s ease, transform 0.2s ease-in-out;




	
}
nav li:first-child{
	margin-right: auto;
	
}
.sidebar{
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 250px;
	z-index:999;
	background-color: #07174a;;
	backdrop-filter: blur(10px);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
	display: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.sidebar li{
	width: 100%;
}
.sidebar a{
	width: 100%;
}
.menu-button{
	display: none;
}
@media(max-width: 800px){
	.hideonMobile{
		display: none;
	}
	.menu-button{
		display: block;
		
	}
	@media(max-width: 400px){
		.sidebar{
			width: 100%;
		}
	}
}


    /* LANDING PAGE STARTS */

	.container-1 {
		display:flex;
		width: 100vw;
	}
	.box-1 {
	width:50%;	
	padding: 20px;
	background-color: #235bfd;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;



	}

	.box-1 h1 {
		color: #f0f0f0;
		font-weight: bolder;
		font-size: 2.8rem;
		text-align:center;
		
	}

	.get-quote{
		
			background-color: #07174a;
			color: white;
			font-size: 1.2rem;
			padding: 12px 24px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: background-color 0.3s ease, transform 0.2s ease-in-out;
		}
		.get-quote:hover {
			background-color: white; 
			color: #07174a;
			transform: scale(1.1); 
		}
		.get-quote:active {
			transform: scale(0.95);
		
		}

	
	.box-2 {
		display: flex;
		height: 400px;
		width: 50%;
		overflow: hidden;
	} 
	.box-2 img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;         /* important! removes default inline spacing */
	
	}

	@media (max-width: 768px) {
		.container-1 {
		  flex-direction: column;
		}
	  
		.box-1,
		.box-2 {
		  width: 100%;
		  height: auto; /* let height grow naturally */
		}
	  
		.box-2 {
		  height: 250px; /* or something responsive for the image box */
		}
	  }


	@keyframes slide {
		from{
			transform: translateX(0);
		}
		to{
			transform: translateX(-100%);
		}
	}
	.logos {
		overflow: hidden;
		padding: 30px 0;
		background-color: #07174a;
		white-space: nowrap;
		position: relative;
		width: 100vw;
	}
	.collabs {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
	}
	.logos:hover .logos-slide {
	animation-play-state: paused;
	}
	.logos-slide {
		display: inline-block;
		animation: 30s slide infinite linear;
	}
	.logos-slide img {
		height:45px;
		margin: 0 40px;
	}

	/* Reviews*/

/* Main review container */
.reviews-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between boxes */
    width: 100vw;
    background-color: #f4f4f4;
	padding: 20px;
}

/* Individual review box */
.review-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 400px;
    position: relative; /* Allow absolute positioning within */
}

/* Circular Profile Image Container, positioned to the top-left */
.review-box img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #007bff; /* Blue border around the image */
    padding: 5px; /* Space between border and image */
    background-color: white; /* Keeps a clean look */
    position: absolute; /* Position the image container */
    top: 10px; /* Align image to the top */
    left: 10px; /* Align image to the left */
}

/* Reviewer Name */
.review-box h3 {
    color: #333;
    margin-top: 120px; /* Push name below the image */
    margin-bottom: 5px;
}

/* Review Text */
.review-box p {
    font-size: 0.9rem;
    color: #555;
}

/* Responsive Design */
@media (max-width: 600px) {
    .reviews-container {
        flex-direction: column;
        align-items: center;
    }
}
/* Reviews end! */

    /* LANDING PAGE ENDS */



/* services Header Start */


.container-services-1 {
	display: flex;
	flex-wrap: wrap;
}



.box-services-1 {
	display: flex;
	width: 50%;
	overflow: hidden;
	flex: 1;
	
} 

.box-services-1 img {
width: 100%;
height: 100%;
object-fit: cover;

}

.box-services-2 {
	background-color: #235bfd;
	color: white;
	padding: 40px;
	flex: 1;
	display: inline-block;
	flex-direction: column;
	justify-content: center;

}
.box-services-2 h1 {
	color: #f0f0f0;
	font-size: 42pt;
	margin-bottom: 20px;
}
.box-services-2 p {
	font-size: 24pt;
	margin-bottom: 20px;
}

.quote{
	background-color: #07174a;
    color: white;
    font-size: 1.2rem;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease-in-out;
    display: inline-block;
    text-align: center;
}
.quote:hover {
	background-color: white; 
	color: #07174a;
    transform: scale(1.1); 
}
.quote:active {
	transform: scale(0.95);

}


/* services Header End */

  /* test */

  .Developments {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	padding: 40px 20px;
	background-color:#222222;
	text-align: center;
  }
  
  .developments-title {
	text-align: center;
	font-size: 2rem;
	margin-bottom: 30px;
	color: #f0f0f0; /* Change to white if your background is dark */
	width: 100%;
  }
  
  .development-flip {
	position: relative;
	width: 300px;
	height: 200px;
	overflow: hidden;
	cursor: pointer;
	border-radius: 10px;
  }
  
  /* Front side (image + text) */
  .front, .back {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.4s ease;
	border-radius: 10px;
  }
  
  /* Image styling */
  .front img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  /* Text on top of image */
  .overlay-text {
	position: absolute;
	color: white;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	z-index: 2;
	padding: 10px;
  }
  
  /* Back side (hover text) */
  .back {
	background-color: #07174a;
	color: white;
	font-size: 1.3rem;
	font-weight: bold;
	opacity: 0;
	text-align: center;
	padding: 20px;
  }
  
  /* Hover behavior */
  .development-flip:hover .front {
	opacity: 0;
  }
  
  .development-flip:hover .back {
	opacity: 1;
	z-index: 3;
  }
    /* end */

	/* Tape */

.tape-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #07174a; 
  color: white;
  padding: 40px 60px;
  gap: 40px;
  
}

.tape-text {
  flex: 1;
}

.tape-text h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.tape-text h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  font-weight: 500;
}

.tape-text p {
  font-size: 1rem;
  color: #f0f0f0;
}

	.tape-image-placeholder {
		width: 180px;
		height: 180px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	  }
	  
	  .tape-image-placeholder img {
		width: 90%;
		height: 90%;
		object-fit: cover;
	  }

	  @media (max-width: 768px) {
		.tape-section {
		  flex-direction: column;
		  text-align: center;
		}
	  
		.tape-image .tape-image-placeholder {
		  margin-top: 20px;
		}
	}
			  /* Tape ends */

			    /* Tape gallery */
	 
	  .gallery {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 30px;
		padding: 40px;
	  }
	  
	  .gallery-img {
		width: 250px;
		height: 180px;
		object-fit: cover;
		cursor: pointer;
		transition: transform 0.3s ease;
		border-radius: 6px;
	  }
	  
	  .gallery-img:hover {
		transform: scale(1.05);
	  }
	  
	  /* Lightbox styling */
	  .lightbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.85);
		display: none;
		align-items: center;
		justify-content: center;
		z-index: 999;
	  }
	  
	  .lightbox img {
		max-width: 90%;
		max-height: 90%;
		border-radius: 8px;
	  }
    /* Tape gallery ends */

    /* Framing Section Starts */

	.framing-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #235bfd; 
		color: white;
		padding: 40px 60px;
		gap: 40px;
		
	  }
	  
	  .framing-text {
		flex: 1;
	  }
	  
	  .framing-text h2 {
		font-size: 2.5rem;
		margin-bottom: 10px;
	  }
	  
	  .framing-text h3 {
		font-size: 1.5rem;
		margin-bottom: 8px;
		font-weight: 500;
	  }
	  
	  .framing-text p {
		font-size: 1rem;
		color: #f0f0f0;
	  }
	  
		  .framing-image-placeholder {
			  width: 180px;
			  height: 180px;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  overflow: hidden;
			}
			
			.framing-image-placeholder img {
			  width: 90%;
			  height: 90%;
			  object-fit: cover;
			}
	  
			@media (max-width: 768px) {
			  .framing-section {
				flex-direction: column;
				text-align: center;
			  }
			
			  .framing-image .tape-image-placeholder {
				margin-top: 20px;
			  }
			}

	    /* Framing Section ends */

			/* drywall */

.drywall-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #07174a; 
	color: white;
	padding: 40px 60px;
	gap: 40px;
	
  }
  
  .drywall-text {
	flex: 1;
  }
  
  .drywall-text h2 {
	font-size: 2.5rem;
	margin-bottom: 10px;
  }
  
  .drywall-text h3 {
	font-size: 1.5rem;
	margin-bottom: 8px;
	font-weight: 500;
  }
  
  .drywall-text p {
	font-size: 1rem;
	color: #f0f0f0;
  }
  
	  .drywall-image-placeholder {
		  width: 180px;
		  height: 180px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  overflow: hidden;
		}
		
		.drywall-image-placeholder img {
		  width: 90%;
		  height: 90%;
		  object-fit: cover;
		}
  
		@media (max-width: 768px) {
		  .drywall-section {
			flex-direction: column;
			text-align: center;
		  }
		
		  .drywall-image .tape-image-placeholder {
			margin-top: 20px;
		  }
		}
				/* drywall ends */

 /* grid celling starts */

 .grid-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #235bfd; 
	color: white;
	padding: 40px 60px;
	gap: 40px;
	
  }
  
  .grid-text {
	flex: 1;
  }
  
  .grid-text h2 {
	font-size: 2.5rem;
	margin-bottom: 10px;
  }
  
  .grid-text h3 {
	font-size: 1.5rem;
	margin-bottom: 8px;
	font-weight: 500;
  }
  
  .grid-text p {
	font-size: 1rem;
	color: #f0f0f0;
  }
  
	  .grid-image-placeholder {
		  width: 180px;
		  height: 180px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  overflow: hidden;
		}
		
		.grid-image-placeholder img {
		  width: 90%;
		  height: 90%;
		  object-fit: cover;
		}
  
		@media (max-width: 768px) {
		  .grid-section {
			flex-direction: column;
			text-align: center;
		  }
		
		  .grid-image .tape-image-placeholder {
			margin-top: 20px;
		  }
		}

  /* grid celling ends */

    /* SERVICES PAGE ENDS */

	    /* CONTACT PAGE STARTS */

.contact-header {
	display: flex;
	flex-direction: column;
	text-align: center;
	background-color: #235bfd;
	color: #f0f0f0;
	padding-top: 20px;
	padding-bottom: 10px;
	height: 110px;
	overflow: hidden;
}
		.contact-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: white;
			padding: 30px;
			gap: 30px;
		  }
		  
		  .form-map-wrapper {
			display: flex;
			width: 100%;
			max-width: 1040px;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
			flex-wrap: wrap;
		  }
		  
		  .form-section,
		  .map-section {
			width: 50%;
		  }
		  
		  /* Form styles */
		  .form-section {
			background: #07174a;
			padding: 40px;
			color: white;
			font-size: 1em;
		  }
		  
		  .form-group {
			display: flex;
			gap: 15px;
		  }
		  
		  .form-group input {
			flex: 1;
		  }
		  
		  form input,
		  form textarea {
			width: 100%;
			padding: 14px;
			margin-bottom: 20px;
			border: none;
			border-radius: 6px;
			background: #f0f0f0;
			font-size: 1.1em;
		  }
		  
		  form textarea {
			height: 140px;
			resize: vertical;
		  }
		  
		  .sendmessage {
			width: 100%;
			padding: 16px;
			background: #235bfd;
			color: white;
			border: none;
			border-radius: 6px;
			font-size: 1em;
			cursor: pointer;
			transition: background-color 0.3s ease, transform 0.2s ease-in-out;
		  }
		  

		  .sendmessage:hover {
			background-color: white; 
			color: #07174a;
			transform: scale(1.1); 
		  }
		  .sendmessage:active {
			transform: scale(0.95);
		
		  }
  
  
		  .map-section iframe {
			width: 100%;
			height: 100%;
			border: none;
			display: block;
			min-height: 100%;
		  }
		  
		 
		  .info-section {
			width: 100%;
			max-width: 1040px;
			background: #1f1f1f;
			color: white;
			padding: 30px;
			font-size: 1.15em;
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
			border-radius: 10px;
		  }
		  
		  .info-section p {
			margin: 12px 0;
		  }
		  
		  .info-section span {
			font-weight: bold;
		  }
		  
		  @media (max-width: 900px) {
			.form-map-wrapper {
			  flex-direction: column;
			}
		  
			.form-section,
			.map-section {
			  width: 100%;
			}
		  
			.form-section {
			  padding: 30px;
			}
		  
			.info-section {
			  font-size: 1em;
			  padding: 20px;
			}
		  
			button {
			  font-size: 1em;
			  padding: 14px;
			}
		  }
		  
		  @media (max-width: 500px) {
			.form-group {
			  flex-direction: column;
			  gap: 10px;
			}
		  
			.form-section {
			  padding: 20px;
			  font-size: 1em;
			}
		  
			form input,
			form textarea {
			  padding: 12px;
			  font-size: 1em;
			}
		  
			.info-section {
			  padding: 15px;
			  font-size: 0.95em;
			}
		  }
		  
		  /* CONTACT PAGE ENDS */

		  		  /* About Us PAGE STARTS */

/* WHO WE ARE Section */
.who-we-are {
	display: flex;
	justify-content: center;
	padding: 60px 20px;
  }
  
  .content-wrapper {
	position: relative;
	width: 90%;
	max-width: 1200px;
	overflow: visible;
  }
  
  .left-card {
	position: absolute;
	left: -5%;
	top: 20%;
	transform: translateY(-50%);
	background-color: #2563ff;
	color: white;
	padding: 50px 35px;
	border-radius: 60px;
	width: 300px;
	text-align: center;
	z-index: 2;
  }
  
  .left-card h1 {
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.1;
	margin-bottom: 15px;
  }
  
  .left-card p {
	font-size: 1.1rem;
	color: #f0f0f0;
  }
  
  /* Image container */
  .image-card {
	position: relative;
	height: 450px;
	background: url('Resources/Images/AdobeStock_266662088-min.jpg') no-repeat center center;
	background-size: cover;
	border-radius: 25px;
	overflow: hidden;
  }
  
  /* Quote box inside image */
  .quote-box {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #01133f;
	color: white;
	border-radius: 0 0 20px 0;
	padding: 30px;
	max-width: 450px;
	width: 100%;
	box-sizing: border-box;
  }
  
  .quote-mark {
	font-size: 2.5rem;
	margin-bottom: 10px;
	display: block;
  }
  
  .quote-box p {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 10px;
  }
  
  .author {
	text-align: right;
	font-weight: bold;
  }
  
  /* Animation Classes */
  .animate-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.8s ease-out;
  }
  
  .animate-on-scroll.visible {
	opacity: 1;
	transform: translateY(0);
  }
  
  .fade-left {
	transform: translateX(-80px);
  }
  
  .fade-left.visible {
	transform: translateX(0);
  }
  
  .fade-up {
	transform: translateY(40px);
  }
  
  .fade-up.visible {
	transform: translateY(0);
  }
  
  /* Responsive */
  @media (max-width: 855px) {
	.left-card {
	  position: static;
	  transform: none;
	  margin-bottom: 20px;
	  width: 90%;
	}
  
	.image-card {
	  height: auto;
	  min-height: 300px;
	}
  
	.quote-box {
	  position: static;
	  margin-top: 20px;
	  border-radius: 20px;
	  text-align: center;
	}
  
	.author {
	  text-align: center;
	}
  
	.content-wrapper {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
  }

/* WHO WE ARE Section ENDS */

/* STORY Section BEGINGS */

/* General Styles */
.story {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto; 
	background-color: #07174a;
	text-align: center;
	row-gap: 10px;
	padding: 20px;
	opacity: 0; /* Initially hidden for the animation */
	transform: translateY(50px); /* Start position for the slide-up effect */
	transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Animation on opacity and transform */
  }
  
  .start {
	border: 1px solid #235bfd;
	color: #f0f0f0;
	padding: 10px;
	border-radius: 30px;
	width: 80%;
	max-width: 350px;
	text-align: center;
	font-size: 16px;
	background-color: transparent;
	font-weight: lighter;
	opacity: 0; /* Initially hidden */
	transform: translateY(20px); /* Start position for slide effect */
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  }
  
  .begin {
	color: #f0f0f0;
	font-size: 48px;
	font-weight: bold;
	opacity: 0; /* Initially hidden */
	transform: translateY(20px); /* Start position for slide effect */
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  }
  
  .copy-begin {
	color: #f0f0f0;
	font-size: 24px;
	font-weight: normal;
	opacity: 0; /* Initially hidden */
	transform: translateY(20px); /* Start position for slide effect */
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  }
  
  /* Responsive Styles */
  @media screen and (max-width: 768px) {
	.begin {
	  font-size: 36px;
	}
  
	.copy-begin {
	  font-size: 20px;
	}
  
	.start {
	  font-size: 14px;
	  padding: 8px;
	  width: 90%;
	}
  }
  
  @media screen and (max-width: 480px) {
	.begin {
	  font-size: 28px;
	}
  
	.copy-begin {
	  font-size: 18px;
	}
  
	.start {
	  font-size: 12px;
	  padding: 6px;
	  width: 95%;
	}
  
	.story {
	  padding: 10px;
	}
  }
/* core start */
.core-container {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	padding: 50px 20px;
	background-color: #2962ff;
	flex-wrap: wrap;
	gap: 10px;
  }
  
  /* Main card */
  .core-maincard {
	display: flex;
	justify-content: center;   /* horizontal centering */
	align-items: center;       /* vertical centering */
	flex-direction: column;    /* optional: if you have vertical content stacking */
  
	padding: 40px 20px;
	color: white;
	text-align: center;
	max-width: 300px;
	box-sizing: border-box;
	word-wrap: break-word;
	height: 300px;             /* <-- set a height to enable vertical centering */
  }
  
  
  .core-maincard h1 {
	font-size: 2.5rem;
	font-weight: bold;
  }
  
  .core-maincard p {
	font-size: 1.2rem;
	color: #07174a;
  }
  
  /* Other cards */
  .core-card {
	background-color: #0d1b4c;
	color: white;
	padding: 30px;
	max-width: 250px;
	box-sizing: border-box;
	border-radius: 8px;
  }
  
  .core-card h3 {
	font-size: 1.5rem;
	margin: 0;
  }
  
  .core-card hr {
	margin: 10px 0;
	border: 0;
	height: 2px;
	background: #3f51b5;
  }
  
  .core-card p {
	font-size: 0.95rem;
	color: #d3dce6;
  }
  
  /* Fade-in animation */
  .fade-in {
	opacity: 0;
	animation: fadeIn 1.5s ease-in forwards;
  }
  
  @keyframes fadeIn {
	to {
	  opacity: 1;
	}
  }
/* core end */

/* footer start */

.footer {
	background-color: #1e1e1e;
	padding: 20px 40px;
	color: #fff;

  }
  
  .footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
  }
  
  .footer-left,
  .footer-right {
	flex: 1;
	display: flex;
	justify-content: center;
  }
  
  .footer-center {
	flex: 2;
	text-align: center;
  }
  
  .social-icons {
	margin-bottom: 10px;
  }
  
  .social-icons a {
	margin: 0 5px;
	display: inline-block;
  }
  
  .social-icons img {
	width: 20px;
	height: 20px;
	transition: transform 0.2s;
	
  }
  
  .social-icons img:hover {
	transform: scale(1.1);
  }
  
  .logo {
	max-height: 40px;
  }
  
  .bbb-logo {

	max-height: 40px;
	
  }

/* footer end */