/* SCC RENOVATIONS - INDUSTRIAL MODERN DESIGN */

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #7195a2;
    --primaryLight: #7195a2;
    --secondary: #7195a2;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
	--font-heading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
    


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
	text-decoration: none;
    color: #7195a2;
    
    letter-spacing: 1px;
    transition: color 0.3s;
}
body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-grey);
    background: var(--color-light);
}

/* Typography */
h1, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7195a2;
    margin-bottom: 1rem;
}

h2 {
	
	font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7195a2;
    margin-bottom: 1rem;
}
h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }

/* Header & Navigation */
.top-bar {
    background: var(--color-dark);
    color: var(--color-light);
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.top-bar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
}

.top-bar a {
    color: var(--color-light);
    text-decoration: none;
    margin-left: 20px;
}

.main-nav {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
}

.logo {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: #2c6840;
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #7195a2;
}

/*dropdown*/
.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {
 
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown content */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #D2A47B;
}

/*Hamburger pop up for mobile styling*/
.hamburger {
  display: none;
  font-size: 3rem;
  cursor: pointer;
}


/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-secondary) 100%);
    color: white;
    padding: 120px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="rgba(255,255,255,0.03)" width="2" height="100"/><rect fill="rgba(255,255,255,0.03)" width="100" height="2"/></svg>');
    background-size: 50px 50px;
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    color: white;
    font-size: 4rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.btn {
    display: inline-block;
    padding: 15px 40px;
    background: #7195a2;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-heading);
}

.btn h2 {
	
	color:#fff;
}

.btn h2:hover{
	
	color:#000;
}

.text-content {
	padding:20px;
	font-size:1.4rem;
}
.btn:hover {
    background: #F2f2f2;
    transform: translateY(-2px);
	color:#000;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.btn-secondary {
    background: #white;
    border: 2px solid white;
    margin-left: 1rem;
}

.btn-secondary:hover {
    background: white;
    color: #000;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section-dark {
    background: var(--color-dark);
    color: white;
}

.section-dark h2,
.section-dark h3 {
    color: white;
}

/* Grid Layouts */
.grid {
    display: grid;
    gap: 30px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Service Cards */
.service-card {
    background: white;
    padding: 40px;
    border-left: 5px solid var(--color-primary);
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-left-width: 10px;
}

.service-card h3 {
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--color-grey);
    margin-bottom: 1.5rem;
}

.service-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

/* About Section */
.about-stats {
    display: flex;
    justify-content: space-around;
    margin: 40px 0;
    text-align: center;
}

.stat-item {
    padding: 20px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.stat-label {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--color-grey);
}

/* Footer */
.footer {
    background: var(--color-dark);
    color: var(--color-light);
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer h4 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.footer a {
    color: var(--color-light);
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer a:hover {
    opacity: 1;
    color: var(--color-primary);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align: center;
    opacity: 0.7;
}

/* Contact Form */
.contact-form {
    background: white;
    padding: 40px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--color-border);
    font-family: var(--font-body);
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

/* Responsive */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 1rem;
    }
	
	/*nav link styling*/
	.nav-menu{
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #A6B3BC;
    position: absolute;
    top: 70px;
    left: 0;
    padding: 20px 0;
    text-align: center;
  }

	/*mobile styling*/
  .nav-menu.show {
    display: flex;
  }

	/*hamburger styling*/
  .hamburger {
    display: flex;
    align-content: flex-end;
    padding-left: 70%;
  }
    
    .about-stats {
        flex-direction: column;
    }
}

/* Page Header */
.page-header {
    background: var(--color-secondary);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.page-header h1 {
    color: white;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--color-accent);
    text-decoration: none;
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-rounded {
    border-radius: 8px;
}

/* Accent Border */
.accent-border-left {
    border-left: 5px solid var(--color-primary);
    padding-left: 20px;
}

.accent-border-top {
    border-top: 5px solid var(--color-primary);
    padding-top: 20px;
}