/* header html*/
#main-header {
width: 100%;
background-color: rgb(65, 75, 178);
display: flex;
align-items: center;
padding: 1rem 1%;
color: white;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
min-height: 90px; /* Example minimum height */
max-height: 90px; /* Example maximum height */
overflow: hidden;
}
#header-gutter-quote {
text-align: center;
font-size: 2.0rem;
flex: 2;
margin-right: 0.05rem;
}
#header-enter-zip-text {
text-align: center;
font-size: 1rem;
flex: 0.5;
margin-right: 0.05rem;
}
#header-zip-input {
width: 80%;
padding: 0.5rem;
text-align: center;
flex: 0.5;
margin-right: 0.05rem;
}
#header-button-wrap {
text-align: center;
flex: 0.5;
}
#header-button-wrap button {
background-color: rgb(250, 84, 16);
color: white;
padding: 0.75rem 1.5rem;
border: none;
cursor: pointer;
border-radius: 0.5rem;
font-size: 1.2rem;
}
#getEstimateHeader {
white-space: nowrap;
font-family : "Montserrat Custom2";
}
@media (min-width: 901px) and (max-width: 999px) {
#header-enter-zip-text {
display: none;
}
}
@media (min-width: 688px) and (max-width: 900px) {
#header-gutter-quote {
display: none;
}
#header-enter-zip-text {
display: none;
}
#main-header{
display : flex;
}
#header-zip-input{
display : flex;
}
}
@media (min-width: 1px) and (max-width: 687px) {
#header-gutter-quote {
display: none;
}
#header-enter-zip-text {
display: none;
}
#main-header{
display : flex;
}
#header-zip-input{
display : flex;
}
#header-button-wrap button {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-size: .9rem;
}
}
/* responsive space */
/* Mobile spacing */
.responsive-spacer-home {
height: 70px; /* yith 2.0 */
width: 100%; /* It takes full width, but since it's transparent, it acts as a vertical space */
clear: both; /* Clears floats if there are any */
background-color: transparent; /* Makes it invisible */
}
/* Desktop spacing */
@media (min-width: 801px) {
.responsive-spacer-home {
height: 5rem; /* Example height for desktop */
}
}
/*
.site-logo {
max-height: 70px;
display: block;
margin: 0 auto 1rem;
transition: transform 0.3s ease;
}
*/
/* menu container html */
.menu-container {
position: relative;
max-width: 80vw;
margin: 0 auto;
box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.2);
}
#NavBar {
display: flex;
align-items: center;
}
#logoContainer{
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
margin : auto;
}
#logoNavBar {
max-width: 606px; /* or whatever width you need */
max-height: 95px; /* or whatever height you need */
min-width: 242px;
min-height: 38px;
background-size: contain;
background-position: center;
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/09/logo_contractors_3_2.webp');
background-repeat : no-repeat;
}
.header-container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.link-style {
flex: 1 0 100%;
background-color: #f9f9f9;
border-bottom: 1px solid #ddd;
text-align: center;
padding: 0.5rem 0;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.7);
color: black;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
transition: background-color 0.3s, box-shadow 0.3s; /* Added */
}
.link-style h2 {
margin: 0;
font-weight: bold;
font-size: 1rem;
line-height: 1;
}
.hamburger {
display: none;
position: absolute;
top: 12px;
right: 0px;
flex-direction: column;
justify-content: space-between;
height: 24px;
width: 30px;
cursor: pointer;
z-index: 2;
margin-top: 12px;
}
.hamburger div {
height: 3px;
background-color: black;
width: 100%;
transition: all 0.3s; /* Added for smoother animation */
margin-top: 5px;
}
@media (min-width: 801px) {
.link-style {
flex: 1;
border-right: 1px solid #ddd;
border-bottom: none;
padding: 1rem 0;
}
.link-style:last-child {
border-right: none;
}
.link-style h2 {
font-size: 1.2rem;
}
#logoContainer {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
margin: 15px auto 30px auto;
transform : scale(1.85);
}
}
@media (max-width: 800px) {
.hamburger {
display: block;
margin-right: 5px;
}
#NavBar {
position: relative; /* Add this line */
}
#logoContainer {
position: absolute; /* Position it absolutely */
left: 40px; /* yith Space from the left 5px*/
flex-grow : 0;
flex-shrink: 1;
margin-top: 20px;
}
#logoNavBar {
max-width: 320px; /* or whatever width you need */
max-height: 55px; /* or whatever height you need */
min-width: 242px;
min-height: 38px;
background-size: contain;
margin-left : 25px;
transform: scale(1.1);
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/09/logo_contractors_3_2_320.webp');
}
/*
.site-logo {
position: absolute;
left: -28px;
top: 5px;
transform: scale(0.8);
margin: 0;
}*/
#local_location_text{
margin-top : 15px;
}
.header-container {
display: none;
flex-direction: column;
width: 100vw;
position: absolute;
top: 40px;
right: 0;
z-index: 1;
}
.header-container.active {
display: flex;
}
.header-container.active .link-style {
background-color: #e6e6e6;
box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Stronger shadow when menu is active */
}
/* ... Your previous styles ... */
.hamburger.open div:first-child {
transform: rotate(45deg) translateY(10px);
}
.hamburger.open div:nth-child(2) {
opacity: 0;
}
.hamburger.open div:last-child {
transform: rotate(-45deg) translateY(-10px);
}
}
@media (max-width: 687px) { /*yith 2.0 */
#image-container-1{
transform: translate(15px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
}
@media (min-width: 435px) and (max-width: 490px) { /*yith 2.0 */
#image-container-1{
transform: translate(35px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: 55px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -15px; /* Space from the left */
}
#column1 > div{
transform: translateX(35px); /* yith 2.0 */
}
}
@media (min-width: 420px) and (max-width: 435px) { /*yith 2.0 */
#image-container-1{
transform: translate(35px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: 55px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -15px; /* Space from the left */
}
#column1 > div{
transform: translateX(35px); /* yith 2.0 */
}
}
@media (min-width: 381px) and (max-width: 420px) { /*yith 2.0 */
#image-container-1{
transform: translate(28px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: 45px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -15px; /* Space from the left */
}
#column1 > div{
transform: translateX(35px); /* yith 2.0 */
}
}
@media (min-width: 361px) and (max-width: 381px) { /*yith 2.0 */
#image-container-1{
transform: translate(15px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: 30px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -15px; /* Space from the left */
}
#column1 > div{
transform: translateX(30px); /* yith 2.0 */
}
}
@media (min-width: 341px) and (max-width: 360px) { /*yith 2.0 */
#image-container-1{
transform: translate(15px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: 30px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -15px; /* Space from the left */
}
#column1 > div{
transform: translateX(35px); /* yith 2.0 */
}
}
@media (min-width: 310px) and (max-width: 341px) { /*yith 2.0 */
#image-container-1{
transform: translate(7px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: 25px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -33px; /* Space from the left */
}
#column1 > div{
transform: translateX(0px); /* yith 2.0 */
}
}
@media (min-width: 281px) and (max-width: 310px) { /* yith 2.0 */
#image-container-1{
transform: translate(15px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: -5px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -15px; /* Space from the left */
}
#column1 > div{
transform: translateX(35px); /* yith 2.0 */
}
}
@media (min-width: 261px) and (max-width: 280px) { /* yith 2.0 */
#image-container-1{
transform: translate(15px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: -5px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -75px; /* Space from the left */
}
#column1 > div{
transform: translateX(35px); /* yith 2.0 */
}
}
@media (min-wdith: 1px) and (max-width: 260px) { /* yith 2.0 */
#image-container-1{
transform: translate(15px, -275px); /* yith 2.0 10 bullet points*/
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair_285.webp');
background-size: 100%;
}
#logoContainer {
left: -5px; /* Space from the left */
}
#NavBar > div.hamburger {
right: -115px; /* Space from the left */
}
#column1 > div{
transform: translateX(35px); /* yith 2.0 */
}
}
/* column 1 */
#column1{
min-width : 260px;
max-width : 300px; /*300*/
margin-left : 100px;
margin-right: 50px;
}
@media (min-width: 1261px) and (max-width: 1500px) {
#column1{
min-width : 330px;
}
}
@media (min-width: 688px) and (max-width: 1260px) {
#column1{
margin-left: 0px;
margin-right: 0px;
min-width : 360px;
}
}
@media (min-width: 1px) and (max-width: 687px) {
#column1{
margin-left: 0px;
margin-right: 0px;
min-width : 260px;
}
}
/* location text */
#local_location_text {
text-align: center ;
min-height: 112px;
}
#local_location_text .highlighted-text {
font-style: italic ; /* italicizes the text */
text-decoration: none ; /* removes the underline */
font-size: 17px ; /* Adjust this value for "Top Quality, Affordable" */
font-family : "Montserrat Custom2";
}
#local_location_text #project_text_1 {
font-size: 26px ; /* 28 */
font-weight: normal;
font-family : "Montserrat Custom2";
font-style : normal;
}
#local_location_text #dynamicCityName {
font-size: 26px ; /* 28 */
font-weight: normal;
font-family : "Montserrat Custom2";
font-style : normal;
/* Adjust thisvalue for "Gutter installation in" */
}
#blurb-text{
font-size: 17px ; /* 28 */
font-weight: normal;
font-family : "Montserrat Custom2";
text-align: center;
font-style: normal;
margin-top: 3px;
}
#local_location_text_2 {
text-align: center ;
}
/* Desktop styles */
@media (min-width: 688px) { /* Adjust the breakpoint as needed */
#local_location_text {
text-align: center ;
overflow: hidden !important; /* Hide the overflow content */
}
#local_location_text_2{
margin-bottom : 40px;
}
#why-choose-us-list {
transform: translateY(-60px);
}
#why-choose-us-header {
transform: translateY(-60px);
}
}
@media (min-width: 1px) and (max-width: 687px) { /* Adjust the breakpoint as needed */
}
/*Bullet List */
/* Apply the Montserrat font to list markers */
::marker {
font-family: "Montserrat Custom2";
}
.list_column_1 ul {
padding-left: 0;
margin-top: -20px;
padding-left: 20px;
}
#why-choose-us-list {
padding-left: 50px;
color : black;
}
.list_column_1 i {
margin-right: 5px;
}
.list_column_1 li {
font-size: 13px;
font-family : "Montserrat Custom2";
}
#why-choose-us-header{
padding-left : 50px;
margin-bottom : 30px;
font-size: 18px;
}
#why-choose-us-header > h3{
color : black;
font-weight: 700;
}
@media (min-width: 813px) {
#why-choose-us-header{
margin-bottom : 10px;
}
}
/* Existing Media queries */
@media (min-width: 688px) and (max-width: 812px) {
#why-choose-us-list {
padding-left: 0px;
transform: translateY(-50px);
}
#why-choose-us-header {
margin-left: -50px;
transform: translateY(-50px);
}
}
@media (min-width: 1px) and (max-width: 687px) {
#why-choose-us-list {
padding-left: 0px;
transform: translateY(185px);
}
#why-choose-us-header{
margin-left: -50px;
transform: translateY(185px);
}
.list_column_1 {
margin-top: 10px;
}
}
/* column 2 */
#column2{
min-width : 260px;
max-width : 330px; /*330*/
margin-right: 50px;
}
@media (min-width: 813px) and (max-width: 1500px) {
#column2{
min-width : 360px;
margin-left: 0px;
margin-right: 0px;
}
}
@media (min-width: 687px) and (max-width: 812px) {
#column2{
display: none;
}
}
@media (min-width: 1px) and (max-width: 687px) {
#column2{
min-width : 260px;
margin-left: 0px;
margin-right: 0px;
margin-top : -20px;
}
}
/* column 2 image */
/* column 2 image */
#image-container-1 {
max-width: 285px; /* or whatever width you need */
max-height: 285px; /* or whatever height you need */
min-width: 285px;
min-height: 197px;
background-size: contain;
background-position: center;
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair.webp');
background-repeat : no-repeat;
}
@media (min-width: 688px) and (max-width: 792px) {
#image-container-1{
transform: translateY(-225px); /* 10 bullet points */
background-image: url('https://bennetandsons.com/wp-content/uploads/2023/10/furnace_repair.webp');
}
}
/* column 3 */
#column3{
text-align: center;
flex-grow: 1;
margin-left: 70px;
margin-right: 200px;
}
@media (min-width: 1261px) and (max-width: 1500px) {
#column3{
min-width: 330px;
max-width : 340px;
margin-left: 0px;
margin-right: 200px;
}
}
@media (min-width: 1101px) and (max-width: 1260px) {
#column3{
min-width: 320px;
max-width : 340px;
margin-left: 0px;
margin-right: 0px;
}
}
@media (min-width: 688px) and (max-width: 1100px) {
#column3{
min-width: 300px;
max-width : 780px;
margin-left: 0px;
margin-right: 0px;
}
}
@media (min-width: 1px) and (max-width: 687px) {
#column3{
min-width: 180px;
max-width: 480px;
margin-left: 0px;
margin-right: 0px;
}
}
/* column 3 widget */
@keyframes pulsate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.pulsate {
animation: pulsate 1s ease;
}
#WidgetContainer1 {
position: relative;
width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
margin: 0px auto;
background-color: #f9f9f9;
padding: 20px 0;
}
#WidgetContainer1 h2 {
margin: 0;
padding: 0px 1em;
font-weight: normal;
text-align: center;
font-size: 25px;
margin-top : -12px;
display: inline-block; /* Make the h2 an inline-block element */
border-bottom: 4px solid rgb(250, 84, 16);
width: 80%; /* Set the width to 80% */
padding-bottom: 10px;
}
#description{
font-size: 15px;
}
#WidgetContainer1 #zipCode {
width: calc(100% - 2em);
box-sizing: border-box;
padding: 10px;
margin: 0 1em;
margin-bottom: -10px;
display: block;
}
#WidgetContainer1 #getEstimate {
width: calc(100% - 2em);
background-color: rgb(250,84,16);
color: white;
padding: 10px 10px;
font-size: 18px;
border: none;
cursor: pointer;
margin: 0px 1em;
display: block;
}
#WidgetContainer1 .small-text {
text-align: center;
font-size: 14px;
margin: 10px 1em 0;
}
#WidgetContainer1-divider{
width: 80%;
}
#getEstimate{
font-family : "Montserrat Custom2";
}
@media (min-width: 321px) and (max-width: 731px) {
#WidgetContainer1 > h2{
font-size: 27px;
}
}
@media (min-width: 1px) and (max-width: 320px) {
#WidgetContainer1 > h2{
font-size: 18px;
}
}
/* pictures header */
#header-1 {
font-size : 35px;
font-weight : 700;
font-family : "Montserrat Custom2";
text-align : center;
letter-spacing : -1.2px;
/*display : block; */
display: none;
}
#header-2 {
font-size : 20px;
font-family : "Montserrat Custom2";
text-align : center;
letter-spacing : -1.2px;
/*display : block;*/
display: none;
margin-top : -45px;
margin-bottom : 100px;
}
#header-1 h3 {
font-size: 35px; /* Adjust this value as desired for header-1 */
font-weight: normal ;
}
#header-2 p{
font-size: 20px; /* Adjust this value as desired for header-2 */
font-style: normal; /* Ensures the text is not italicized */
}
@media (max-width: 768px) {
#header-1 {
line-height: 1.0; /* Reducing space between lines of text for mobile */
}
#header-2 {
margin-top: -20px; /* Adjusting the space between header-1 and header-2 on mobile */
}
}
@media (min-width: 1040px) {
#picture-header-elementor-container{
margin-top: -100px;
}
}
/* pictures */
/* Desktop layout (default): 3 columns and 2 rows */
.category-container-homepage {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Center items on the line */
margin-top: -85px;
}
/*
.hidden {
display: normal;
}
*/
.category-item {
display: none;
width: 30%;
text-align: center;
margin-left: 0%; /* Adjust margin values to get desired spacing */
margin-right: 0%;
}
.category-item h3 {
height: 60px; /* This height can be adjusted based on your design requirements */
display: flex;
align-items: center; /* Center the text vertically */
justify-content: center; /* Center the text horizontally */
margin: 0px; /* This removes the margin completely. Adjust accordingly if you need some space. */
overflow: hidden; /* Prevents text from overflowing */
font-weight: normal;
}
/*
#cat1-img{
max-height: 260px;
}
*/
/* Common styles for all category backgrounds */
.category-bg {
height: 0;
padding-top: 45%; /* 16:9 Aspect Ratio */
position: relative;
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
margin: auto;
}
/* Default images */
#clogs-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-clog-2.webp'); }
#leaks-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-overflow-2.webp'); }
#sagging-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-sagging-2.webp'); }
#water-damage-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-water-damage-2.webp'); }
#separated-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-separated-2.webp'); }
#mold-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-mold-2.webp'); }
/* Mobile layout: 3 rows and 2 columns */
@media (max-width: 600px) {
.category-item {
min-width: 50%;
}
#clogs-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-clog-2_200.webp'); }
#leaks-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-overflow-2_200.webp'); }
#sagging-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-sagging-2_200.webp'); }
#water-damage-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-water-damage-2_200.webp'); }
#separated-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-separated-2_200.webp'); }
#mold-bg { background-image: url('https://bennetandsons.com/wp-content/uploads/2023/08/gutter-mold-2_200.webp'); }
}
/* rating */
/* Style the main container for user testimonials */
.users-testimonials {
margin: 20px;
font-family: "Montserrat Custom2";
display: flex; /* Make this a flexbox container */
flex-wrap: wrap; /* Wrap items to the next line if they don’t fit */
justify-content: space-between; /* Distribute items evenly */
}
#testimonial-container{
display : normal;
}
#title-container{
display : normal;
margin-top: 20px;
}
/* Style the testimonial class */
.testimonial {
margin-bottom: 20px;
flex: 1; /* Flex grow */
min-width: calc(33.333% - 20px); /* Width for 3 columns, considering margins */
box-sizing: border-box;
padding: 10px; /* Add some padding */
}
#testimonial_1 {
margin-top: 20px;
position: relative;
min-width : 125px;
}
#testimonial_1::before {
content: "";
position: absolute;
top: 0px;
left: 1%; /* to start the border at 10% from the left */
width: 80%; /* make it 80% of the width of the container */
border-top: 2px solid lightgrey;
}
#testimonial_2 {
margin-top: 20px;
position: relative;
min-width : 125px;
}
#testimonial_2::before {
content: "";
position: absolute;
top: 0px;
left: 1%; /* to start the border at 10% from the left */
width: 80%; /* make it 80% of the width of the container */
border-top: 2px solid lightgrey;
}
#testimonial_3 {
margin-top: 20px;
position: relative;
min-width : 125px;
}
#testimonial_3::before {
content: "";
position: absolute;
top: 0;
left: 1%; /* to start the border at 10% from the left */
width: 80%; /* make it 80% of the width of the container */
border-top: 2px solid lightgrey;
}
/* Style the rating header */
.rating-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%; /* Take the full width to avoid squeezing into flex items */
}
#rating-head-stars{
min-width: 270px;
}
/* Increase the size of stars in rating class */
.rating img {
width: 27px;
height: 27px;
}
#rating-head-stars img {
width: 70px;
height: 70px;
}
.rating-head-text{
display : flex;
align-items: center;
padding-right : 16px;
}
.rating-head{
display : flex;
justify-content: center;
}
#overall-rating {
font-size: 40px;
font-weight : normal;
display : block;
padding-right : 20px;
}
#customer-satisfaction {
font-size: 20px;
display : block;
padding-right : 20px;
border-right: 4px solid lightgrey;
}
#rating-head-stars{
padding-left : 20px;
}
#reviews-title{
display : block;
text-align: center;
font-size : 40px;
font-weight : normal;
margin-top: 0px;
}
#service-region{
display : block;
text-align : center;
}
#service-region-header{
text-align: center;
margin-top: 0;
font-size: 40px ;
font-weight: normal;
border-top: 2px solid lightgrey;
}
#map{
height: 400px;
width: 70%;
margin: 0 auto;
margin-top : 15px;
margin-bottom: 40px;
}
/* Responsiveness for smaller screens */
@media (max-width: 768px) {
#rating-head-stars img {
width: 40px;
margin-bottom: -0px; /* Reduce space beneath the stars */
}
.rating img {
width: 15px;
margin-bottom: -22px; /* Reducing the space below each star */
}
.testimonial {
min-width: calc(50% - 20px); /* Two testimonials per row */
}
.testimonial h3 {
margin-top: 20px; /* Adjust this value as needed to reduce space */
}
.testimonial p {
margin-bottom: 0px; /* Adjust this value as needed to reduce space */
}
}
@media (max-width: 687px) {
#testimonial-container{
flex-direction : column;
}
#customer-satisfaction {
border-right: 0px solid lightgrey;
}
#rating-head-stars img {
width: 30px;
margin-bottom: -10px; /* Reduce space beneath the stars */
}
#rating-head-stars{
/*210*/
min-width: 110px;
margin-top: -0px
}
#testimonial_1{
margin-bottom: -10px;
margin-top: +10px
}
#testimonial_2{
margin-bottom: -10px;
margin-top: +0px
}
#testimonial_3{
margin-bottom: -10px;
margin-top: +0px
}
}
/*for when images are hidden*/
@media (min-width: 1040px) {
#reviews-map-container{
margin-top : -100px;
}
}
/* body widget */
/* General Styles (for larger screens by default) */
#widget-body-list {
flex: 2;
text-align: center;
font-family: "Montserrat Custom2";
}
#zip-code-body-container {
flex: 1;
text-align: center;
}
#get-estimate-body-container {
flex: 2;
text-align: left;
}
#WidgetContainer2{
height : 100%;
}
.estimate-body-container {
position: relative;
width: 75%;
height: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
margin: 20px auto;
background-color: #f9f9f9;
}
.estimate-body-container h2 {
margin: 0;
padding: 10px 1em;
font-weight: normal;
text-align: center;
font-size : 40px;
}
.content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 1em;
}
.content-wrapper ul {
font-size: 25px;
text-align: left;
display: inline-block;
padding-left: 0;
}
#zipCodeBody {
width: 80%;
box-sizing: border-box;
padding: 10px;
}
#getEstimateBody {
width: 80%;
background-color: rgb(250,84,16);
color: white;
padding: 20px 15px;
font-size: 20px;
border: none;
cursor: pointer;
border-radius: 10px;
font-family : "Montserrat Custom2";
}
/* Styles for medium screens (e.g., 12-inch displays) */
@media (max-width: 1200px) {
.estimate-body-container {
width: 70%;
}
.content-wrapper ul {
font-size: 20px;
}
#zipCodeBody, #getEstimateBody {
font-size: 18px;
}
}
/* Styles for mobile screens */
@media (max-width: 800px) {
.estimate-body-container {
width: 90%;
height: auto; /* adjust height to content */
}
.content-wrapper {
flex-direction: column; /* stack items vertically */
}
.content-wrapper div {
margin-bottom: 10px; /* space between items */
}
.content-wrapper ul {
font-size: 18px;
}
#zipCodeBody, #getEstimateBody {
width: 100%; /* full width for mobile */
font-size: 16px;
}
}
/* Styles for mobile screens */
@media (max-width: 800px) {
#WidgetContainer2 > h2{
font-size : 28px;
}
}
/* about us */
/* Mobile Styles */
.bs_content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.bs_text-content,
.bs_image-content {
width: 100%;
}
.bs_text-content h2 {
font-weight: normal;
text-align: center;
font-size : 40px;
}
.bs_image-content img {
width: 100%;
display: block;
margin: 20px 0;
}
.bs_text-content{
margin-right: 40px;
}
.bs_content-wrapper {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.bs_text-content {
width: 65%;
order: 1;
}
.bs_text-content h1, /* This will center the h1 title */
.bs_paragraph-content {
text-align: center;
max-width: 100%;
margin: 0 auto;
}
.bs_paragraph-content ol, /* Add this to align the ordered list to the left */
.bs_paragraph-content ol li {
text-align: left;
}
.bs_image-content {
width: 35%;
order: 2;
align-self: center;
}
.bs_image-content img {
max-width: 100%;
}
#about-us-list{
font-family: "Montserrat Custom2";
}
/* Desktop Styles */
@media (max-width: 687px) {
/* Mobile Styles */
.bs_content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.bs_text-content,
.bs_image-content {
width: 95%;
margin-right: 40px;
margin-left: 40px;
}
.bs_text-content h2 {
font-weight: normal;
text-align: center;
font-size : 35px;
margin-bottom: 10px;
margin-top: 10px;
}
.bs_image-content img {
width: 100%;
display: block;
margin: auto auto;
}
}