/*
Theme Name: Coral Reef Child
description: Client Theme - Coral Reef
Template: coral-reef-parent
Version: 1.0.0
Text Domain: coral-reef-child
Author: BCW
*/

:root {
	--min: min(360px, 100%);
	--cgap: 6px;
	--smargin: 75px;
}

.primary-footer .sitemap .menu li a {color:#fff;}
.primary-footer .sitemap .menu li a:hover {color:var(--color-3);}
h2.heading {color:var(--color-5);}
.loc {margin-bottom:30px;}


.locs a {padding: 0 !important; display: flex; column-gap: 5px;}


.youtube-outter {width:100%;}
.youtube { position: relative;  max-width: none; margin: auto;  padding-top:56.3%;}
.youtube iframe, .youtube object, .youtube embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }

.content-section .background:before {content:""; background:#000; opacity: .75; position:absolute; top:0; left:0; width:100%; height: 100%; z-index: 0;}
.home #content-section.content-section .background {opacity: 1;}

.background-features .feature h2
 {
    max-width: 500px;
    color:#fff;
 }

 .overlay h2 {filter:drop-shadow(0px 0px 3px #000);}

 .form-col .inner {width:100%;}


#service-sections {margin-bottom: 30px;}
#service-sections .service-sections {
	margin: var(--smargin) 0;
}
#service-sections .toggle-nav {
	justify-content: center;
	width: fit-content;
	margin: 0 auto var(--smargin);
	column-gap: var(--cgap);
	flex-wrap: wrap;
	row-gap: var(--cgap);
}
#service-sections .toggle-nav .nav-item {
	background-color:var(--color-2);
	border-color: var(--color-2);
	color: #fff;
	padding: .5em 1.5em;
	min-width: 270px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	transition: all ease .3s;
	
}
#service-sections .toggle-nav .nav-item.active {
	border-color: var(--color-2);
}
#service-sections .toggle-section {
	display: none;
}
#service-sections .toggle-section.active {
	display: block;
}
#service-sections .toggle-section .section-heading {
	text-align: center;
	background: #fff;
	margin: 0 0 var(--cgap);
	padding: 10px 0;
	font-weight: 700;
}
#service-sections .toggle-section:nth-child(even) .section-heading {
	background-color: #c8e3dd;
}
#service-sections .service-section .service {
	background-color: #c8e3dd;
	margin: 0;
	flex-wrap: wrap;
	border-bottom: var(--cgap) solid #fff;
}
#service-sections .service-section .service:last-child {
	margin-bottom: 0;
}
#service-sections .service-section .service:nth-child(even) {
	background-color: #fff;
    color:var(--color-2);
}
#service-sections .service-section .service:nth-child(even) .image-col,
#service-sections .service-section .service:nth-child(even) .content-col {
	border: none;
}
#service-sections .service-section .service .image-col {
	flex: 1 1 50%;
	position: relative;
	border-right: calc(var(--cgap) / 2) solid #fff;
}
#service-sections .service-section .service .content-col {
	flex: 1 1 50%;
	padding: 50px;
	align-self: center;
	
}
#service-sections .service-section .service .content-col p:last-child {
	margin-bottom: 0;
}
#service-sections .service-section .service.img-cover .image-col .image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#service-sections .service-section .service.img-cover .image-col .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
#service-sections .service-section:nth-child(even) .service {
	background-color: #fff;
    color: var(--color-2);
	
}
#service-sections .service-section:nth-child(even) .service .image-col {
	border-right: none;
	border-left: calc(var(--cgap) / 2) solid #fff;
}

#service-sections .service-section:nth-child(even) .service:nth-child(even) {
	background-color: #fff;
	flex-direction: row;
}
#service-sections .service-section:nth-child(even) .service #service-section h3{
     color: var(--color-2)!important;
}

.mobile-header .mobile-c2a a:hover, .mobile-header .mobile-c2a a:focus, .nav-col a:hover, .mobile-header .mobile-c2a a, .main-nav .current_page_item a, .main-nav a:hover, .main-nav a:focus {
    color: #05ac85 !important;
}

#service-sections .service-section .service {
    background-color: #fff;
}
.service a.btn{
    background-color: var(--color-2);
    color:#fff;
    margin:10px 0px;

}
#service-sections h2, #service-sections h3 {color:var(--color-2) !important;}
#combos .image img{
    object-fit:contain!important;

}
.ip-heading {color:var(--color-5);}

.button:hover {color:#fff;}

#menu-sitemap a {color:var(--color-2);}
#menu-sitemap a:hover {color:var(--color-5);}
span.loc-name{
    display:inline-block;
    width:100%;
    margin:10px 0px;
    font-weight:700;

}
.background-features .feature:hover .background {
    opacity: .50;
}
.banner-section .carousel-inner img,
.background-features .feature .background{
    opacity: .75;


}
.mobilelocs {
  display: flex;
  justify-content: center;
  column-gap: 15px;padding-right:15px;
}

#location-section{
    padding:30px 0px;
}


#location-section h2{ text-align:center; margin-bottom:20px;}
#location-section img{ padding: 0px 20px 20px 20px; }

.primary-footer .primary-footer-inner {
    background-color: var(--color-5);

}
.primary-footer .footer-row,
.primary-footer .footer-row a {
    color: var(--color-4);
}
.primary-footer .footer-row a:hover, .primary-footer .footer-row a:focus {
    color: var(--color-1);
}
@media screen and (max-width:768px){
    .mobilelocs, .phone-link {font-size: 12px;}
    .mobilelocs .locs a {display: inline-block;}
    #location-section .flex-row{
        flex-wrap: wrap;
        column-gap: 50px;
        row-gap: 30px;
        align-items: center;
    }
    .banner-section .overlay h2 {
        font-size: 36px;
    }
    #primary-header{
        position: relative;
        top: auto;
        background: #cccccc;
    }
    #banner-section .item .overlay{
        position: relative;
        top: auto;
        transform: unset;
        left: 0;
        padding: 20px;
    }
}
@media screen and (max-width:500px){
    .mobilelocs{font-size: 12px; line-height: 12px;}
    .phone-link {font-size: 12px; width:80px;  line-height: 12px;}
}