/*
Theme Name: Emerald Bay
Theme URI: https://www.emeraldbayroofing.com/themes/emeraldbay
Author: the focus media qatar team
Author URI: https://www.focusmediaqatar.com/
Description: At Emarald Bay Roofing, we are passionate about safeguarding homes and businesses across the Tampa Bay and Seattle area with exceptional roofing solutions. With years of industry experience, we take pride in delivering high-quality workmanship and unparalleled customer service. 
Tested up to: 6.3
Requires PHP: 5.6
Version: 1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: emeraldbay
Tags:
*/
.header{
	background-color: #ffffff;
}
.navbar_menu a {
	font-size: 1rem;
	color: #006b84
}
.hero .hero-text{
	background-color: #00000085;
	padding: 20px;
	border: 1px solid #00423a;
	border-radius: 20px;
	width: 900px;
}
.hero-video img {
	width: -webkit-fill-available;
}
.commitment {
	background-color: #a0a0a0;
}
.footer {
	padding-top: 4rem;
/* 	background-color: black; */
	padding-bottom: 4rem;
	background-image: url('/wp-content/uploads/2025/11/Black-Shingles-scaled.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.footer .footer-license{
	text-align: center;
    font-size: 14px;
    color: #ffffff;
}
.inner_pg .hero_title{
	font-size: 5rem;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
/*     transform: translate(-170%, 20%); */
	transform: translate(-50%, -50%);
    z-index: 1;
/*     background-color: #00000085;
    padding: 20px;
    border: 1px solid #00423a;
    border-radius: 20px; */
/*     width: 400px; */
	width: 100%;
    color: #b1d136;
	text-align: left;
}
.inner_pg .banner-img {
	height:auto;
}
.inner_page_content .wp-block-column {
	align-content: center;
}
.inner_page_content .wp-block-image img {
	width: 518px;
    height: 500px;
    object-fit: cover;
    object-position: center center;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.wp-block-heading.vision-title{
	margin-bottom:20px;
}
.inner_page_content .wp-block-column p {
	line-height: 30px;
}
.inner_page_content .wpcf7 .form-control{
	color: #666;
    padding: .75em;
    height: auto;
    border-width: 1px;
    border-style: solid;
}
.inner_page_content .wpcf7 .btn-submit{
	border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 0;
    color: #ffffff;
    border-color: #b1d136;
    background-color: #b1d136;
    padding-top: 16px;
    padding-right: 32px;
    padding-bottom: 16px;
    padding-left: 32px;
}
.cta-phone{
	font-size: 35px;
    font-weight: 600;
}

/*slider*/
/* Slider container fix */
.main-slider {
  position: relative;
  overflow: hidden;
}
.main-slider .slider-content {
    padding: 1rem 1rem;
}/* Image styles */
.main-slider .slider-swiper .slides img {
  width: 100%;               /* ← Responsive width (no scroll overflow) */
  height: 632px;
  object-fit: cover;          /* Keeps aspect ratio */
  border-radius: 50px;
}

/* Center dots below slider */
.swiper-pagination {
  bottom: 20px !important;
}

/* Optional: change dot color */
.swiper-pagination-bullet {
	background: #fff;
	opacity: 0.6;
	width: 1em;
	height: 1em;
}
.swiper-pagination-bullet-active {
	background: #b1d135; /* your brand color */
	opacity: 1;
	width: 1em;
	height: 1em;
}
.main-slider .slides {
  position: relative;
}

.main-slider .swiper-title {
	position: absolute;
	top: 40%; /* slightly higher */
	left: 40%;
	transform: translate(-50%, -50%);
	z-index: 10;
	font-size: 3.5rem;
	font-weight: 500;
	width: 60%;
	color: #b1d135;
	text-align: left;
}
.main-slider p {
	position: absolute;
	top: 60%;
	left: 40%;
	transform: translate(-50%, -50%);
	z-index: 10;
	font-size: 1.1rem;
	font-weight: 400;
	width: 60%;
	color: #fff;
	text-align: left;
	line-height: 1.6;
}
.main-slider .slides .button.white {
	background-color: #006B76;
	color: #ffffff;
	border-radius: 50px;
	padding: 12px 30px;
	font-size: 16px;
	font-weight: 500;
	position: absolute;
	top: 72%;
	left: 17%;
	transform: translate(-50%, -50%);
	z-index: 10;
	text-align: left;
	text-decoration: none;
	transition: all 0.3s ease;
}

.main-slider .slides .button.white:hover {
	background-image: linear-gradient(280deg, #0496f4, #025a92);
}
.section.sponsor.no-paddings {
    background-color: var(--white);
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
    border: 1px solid transparent;
    border-radius: 0 0 50px 50px;
    height: auto;
    padding-top: 0;
}
.container.logos {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    background-color: var(--white);
    color: var(--white);
    border-radius: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
}
.client-flex {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
  flex-wrap: wrap;
  gap: 15px;
  height: auto;
}
.sponsor .image-17 {
    background-position: 0 0;
    background-size: 94px;
    margin-left: 20px;
    margin-right: 20px;
	object-fit: contain;
  aspect-ratio: 16 / 9;
  width: 150px;
  height: auto;
}
.commitment{
	background-image: url('/wp-content/uploads/2025/11/Black-Shingles-scaled.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	background-color:none;
}
@media (min-width: 1400px) {
  .main-slider .container {
    max-width: 1430px !important;
  }
}

@media (max-width: 992px) {
	.main-slider .swiper-title {
		top: 30% !important;
		font-size: 2.0rem;
	}
	.main-slider p {
		top: 60%;
		font-size: 1.1rem;
	}
	.main-slider .slides .button.white {
		top: 80% !important;
		left:30%;
	}
	.slider-swiper .swiper-button-next, .slider-swiper .swiper-button-prev {
		width: 35px;
		height: 35px;
	}
	.client-flex {
		justify-content: center;
	}

}