/*
Theme Name: Dan's Theme
Author: Dan
Description: Basic Theme
Version: 1.0
*/


html, body {
	padding: 0px;
	margin: 0px;
	font-family: Roboto, sans-serif;
	font-size: 1em;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto; /* This keeps the image's aspect ratio */
	display: block; /* Helps remove extra space below the image */
  }

h1 {
	font-size: 1.4em;
}

#main-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	float: left;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.7);
}

#main-logo {
	background-image: url("https://flroofs.com/wp-content/uploads/2026/02/florida-roofs-logo-1.png");
	background-size: 112px 50px; 
	width: 112px;
	height: 50px;
	float: left
}

ul.main-navigation {
	list-style-type: none;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex-direction: row;
}

ul.main-navigation li {
	border-radius: 8px;
	padding: 0.6em;
	background: #5b7984;
	margin: 0em 0.4em;
}

ul.main-navigation li:hover {
	background: #0d2b36;
}

ul.main-navigation li a {
	color: white;
	text-decoration: none;
}


a.main-button {
	background-color: rgba(0,0,0,1);
	padding: 0.5em; 
	color: white;
}

.main-home-section {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	overflow: hidden;
}

.main-home-section-content.first {
	padding-top: 82px;
}

.main-home-section-content {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

.main-home-section-left-content {
}

.main-home-section-inner-content {
	min-width: 100vw;
	max-width: 100vw;

}

.main-home-section-right-content {

}

.main-home-section-inner-content article{
	padding: 1.5em;
}

.main-home-background, .main-feature {
	min-width: 100vw;
	height: 100vh;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;

}


.main-home-section {
	/* float: left;
	min-width: 100vw;
	min-height: 100vh;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover; */

}

.dark-text {
	color: rgb(39, 36, 36);

}

.white-text {
	color: white;

}

.inset-shadow {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset;
}

.shadow {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.main-home-section h2 {
	font-size: 4vh;
	font-weight: 750;
	text-transform: capitalize;
	line-height: 1em;
	overflow-wrap: break-word;
	white-space: normal;
}

.main-home-section p {
}

.main-home-section.dont-let-a-leaky-roof-rain-on-your-day {
	background-image: url('http://flroofs.com/wp-content/uploads/2026/02/stormy-weather-on-a-roof-in-florida-dark-clouds-ra.jpeg');
}

.main-home-section.service-you-can-count-on {
	background-image: url('http://flroofs.com/wp-content/uploads/2026/02/9e1889ba34d9be33ad4b29b7ac2370c4-cc_ft_768.webp');
}

.main-home-section.reliable-roof-replacement {
	background-image: url('http://flroofs.com/wp-content/uploads/2026/02/88b48b3f25263205c868c8ff584882ab-uncropped_scaled_within_1536_1152.webp');
}

.main-home-section.proud-to-serve-you {
	background-image: url('http://flroofs.com/wp-content/uploads/2026/02/74c2011c27bc59c33edc92fed4e7ac9d-uncropped_scaled_within_1536_1152.webp');
}

.main-home-section.lets-get-you-dry-today {
	background-image: url('http://flroofs.com/wp-content/uploads/2026/02/0538ade5a9926c33aef164fbd58bda43-cc_ft_768.webp');
}


.main-form, .main-feature {
	padding: 1.5rem;
	background-color: rgba(255, 255, 255, 0.7);
   	border-radius: 0em;
}

.main-feature {
	min-width: 100vw;
	height: 30vh;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	aspect-ratio:4/5;
}

.main-feature-content {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 0.5em;
	border-radius: 0.5em;
}

.main-feature-services {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
	padding: 1.5em;
	background: #dae5e9;
}


a.main-feature-service, a.main-feature-service:hover, a.main-feature-service:visited {
	text-decoration: none;
	color: #5b7984;
} 

.main-feature-service {
 	flex: 1 1 calc(33.33% - 10px);
  	max-width: calc(50% - 5px); 
	text-align: center;
	padding-bottom: 10px;
}

.main-feature-service-image {
	display: inline;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	max-width: 75%;
}

.main-feature-content a, .main-feature-content a:visited, .main-feature-content a:hover {
	color: black;
}

.main-form h3, .main-form h4 {
	text-align: center;
	font-size: 4vh;
	font-weight: bold;
	padding: 0em;
	margin: 0em;
}

.main-form h4 {
	font-size: 3vh;
}

.main-form label {
	min-width: 1%;
	max-width: 100%;
	font-weight: bold;
}

.main-form .form-group{
	display: block;	
	padding: 0.5rem 0rem;
}

.main-form input {
	min-width: 20%;
	max-width: 100%;
}

.visitor-address input {
	min-width: 75%;
	max-width: 100%;
}
.visitor-csz input {
	min-width: 20%;
	max-width: 100%;
}

.visitor-phone-email input {
	min-width: 20%;
	max-width: 100%;
}

.main-form input {
	padding: 0.5em;
	border-radius: 5px;
}

#main-navigation {
	width: auto;
	float: right;
}

#main-navigation ul {
	list-style-type: none;
}


#main-content, .main-content {

}

.main-content-posts-wrapper {
    padding: 1em;
    display: block;
    margin-top: 84px;
    min-height: 75vh;
}

.main-content-post {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 1em;
	border-bottom: 1px solid #d3d3d3;
}


#main-section {

	border: 1px solid;
	padding: 2em;

}

.main-form input.main-button {
	
}


#main-subsection {

}


.borel-regular {
	font-family: "Borel", cursive;
	font-weight: 700;
	font-style: normal;
}


.main-footer {
	/* float: left;
	padding: 2em;
	background-color: #0d2b36;
	color: white;
	width: 100vw;
	height: 100vh; */
}

footer {
	background-color: #5b7984;
	color: white;
	width: 100vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 1.5em;
	min-height: 25vh;
}

.footer-section {
    flex: 1 1 calc(33.33% - 10px);
    max-width: calc(50% - 5px);
}

.footer-section h3 {
	color: #0d2b36;
}

.footer-section a:link, .footer-section a:hover, .footer-section a:visited {
	color: white;
	text-decoration: none;
	line-height: 1.5em;
}

.form-group.hidden {
	display: none;
}

#main-error {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #f44336;
	color: white;
	display: none;
}

#main-error.show {
	display: block;
	z-index: 100000;
}

.verify-question {
	display: flex;
	align-items: center;
	padding-bottom: 1em;
  }

  img.verify-question-image {
	padding-right: 0.5em;
	max-width: 25%;
  }

  input.verify-question-answer {
	max-width: 35%;

  }


.call-button {
    display: inline-block; /* Allows setting width, padding, and margin */
    background-color: #28a745; /* Green background color */
    color: white; /* White text color */
    padding: 15px 30px; /* Spacing inside the button */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove default underline from links */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Change cursor to a hand icon on hover */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.call-button:hover {
    background-color: #218838; /* Slightly darker green on hover */
}

  /* =========================
     Desktop Styles
  ========================= */
  
  @media (min-width: 768px) {

	.main-home-section-inner-content {
		max-width: 90vw;
		min-width: 50vw;
	}

	.main-feature h2 {
		text-align: center;
	}

  }



.active-military-veteran-or-first-responder-get-500-discount-on-your-new-roof {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
}



.maintenance-plans {
  padding: 80px 20px;
  background: #f7f9fc;
}

.plans-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.plan-card {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.plan-card h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.plan-sub {
  font-size: 15px;
  color: #666;
  margin-bottom: 25px;
}

.plan-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.plan-card ul li {
  margin-bottom: 12px;
  font-size: 15px;
}

.plan-btn {
  display: inline-block;
  padding: 12px 25px;
  background: #1e73be;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.plan-btn:hover {
  background: #155a94;
}

/* Featured Plan */
.featured {
  border: 2px solid #1e73be;
  transform: scale(1.05);
}

.featured .plan-btn {
  background: #ff6a00;
}

.featured .plan-btn:hover {
  background: #e65c00;
}

.badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff6a00;
  color: #fff;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50px;
}

/* Responsive */
@media (max-width: 900px) {
  .plans-container {
    grid-template-columns: 1fr;
  }

  .featured {
    transform: scale(1);
  }
}