/* UKAW Styles */

/* START Desktop or Mobile */
.desktop {display: block;}
.mobile {display: none;}
@media only screen and (max-width: 768px) {
  .desktop {display: none;}
  .mobile {display: block;}
}
/* END Desktop or Mobile */

/* Smooth scroll for back to top button */
html {
  scroll-behavior: smooth;
}

/* Sarnia Green */
.sPink {
	background-color: #f383df!important;
}
.sGreen {
    background-color: greenyellow;!important;
}
/* Sarnia Blue */
.sBlue {
	background-color: #13a4d2;
}

h1 {
	font-size: 2.8em;
	color: #13a4d2!important;
	margin: .75em 0;
	/* filter: drop-shadow(20px 20px 10px grey) !important; */
}
h2 {
	font-size: 1.6em;
	color: #13a4d2!important;
	margin: .75em 0;
}
h2::after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 3px;
  border-bottom: 5px solid #13a4d2;
}
h3 {
	font-size: 1.3em;
	color: #13a4d2!important;
	line-height: 1.5;

/*
    text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: #ff00cc;
  */
}
/*h3::after {
  content: "";
  display: block;
  width: 32px;
  height: 10px; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 5 Q25 0 50 5 T100 5' fill='none' stroke='%23f383df' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 3px; 
}*/
.contactButton {
	background-color: #8ec845!important;
}

.accessible-button {
  display: inline-block; /* Ensures it behaves like a button */
  padding: 10px 20px; /* Adjust padding for size */
  font-size: 16px; /* Adjust font size */
  text-align: center;
  color: #ffffff; /* Text color */
  background-color: #13a4d2; /* Button background */
  border: none; /* Remove default link borders */
  border-radius: 4px; /* Rounded corners for button-like appearance */
  text-decoration: none; /* Remove underline */
  cursor: pointer; /* Pointer cursor for button behavior */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.accessible-button:hover,
.accessible-button:focus {
  background-color: #f383df; /* Darker background on hover/focus */
  outline: none; /* Remove default focus outline */
  box-shadow: 0 0 4px 2px rgba(0, 123, 255, 0.5); /* Custom focus style */
}

.accessible-button:active {
  background-color: #004085; /* Even darker for active state */
  transform: scale(0.98); /* Slightly shrink for pressed effect */
}

img {
	/* border-radius:10%; */
	border-radius:0px 141px 0px 0px;
	  filter: drop-shadow(20px 20px 10px grey) !important;
	padding-right:20px;
	padding-bottom:20px;
}
.img-responsive {
    border-radius: 25px;
    filter: drop-shadow(20px 20px 10px grey)!important;
}


/* START Sections */
section:not(#rhsParagraph):not(#exclude2):nth-of-type(odd) {
  background: #e9eaee;
  border-radius: 200px 0px 0px 200px; 
  border-right: 10px solid #f383df; /* Adjust the width and color as needed */
  border-left: 10px solid #f383df;
  border-top: 10px solid #13a4d2;
  border-bottom: 10px solid #13a4d2;
  padding: 20px; /* Optional: Adds some space inside the div for better appearance */
  margin-bottom:150px!important;
    background-color: rgba(255,255,255,0.8);
  /* background: #e9f2f5; */

}
section:not(#rhsParagraph):nth-of-type(even) {

  /*background: #f7f9f4;*/
  background-color: rgba(255,255,255,0.8);
  /* background: #e9f2f5; */
  border-radius: 0px 200px 200px 0px; 
  border-left: 10px solid #13a4d2;
  border-right: 10px solid #13a4d2;

  margin-bottom:150px!important;
}
@media only screen and (max-width: 960px) {
  section:not(#rhsParagraph):not(#exclude2):nth-of-type(odd) {
    background: #e9eaee;
    border-radius: 10px; 
    border-right: 10px solid #8ec845; /* Adjust the width and color as needed */
    border-left: 10px solid #8ec845;
    padding: 20px; /* Optional: Adds some space inside the div for better appearance */
    margin-bottom:25px!important;
    background-color: rgba(255,255,255,0.8);
    /* background: #e9f2f5; */
  }
  section:not(#rhsParagraph):nth-of-type(even) {
    /*background: #f7f9f4;*/
    background-color: rgba(255,255,255,0.8);
    /* background: #e9f2f5; */
    border-radius: 10px; 
    border-left: 10px solid #13a4d2;
    border-right: 10px solid #13a4d2;
    margin-bottom:25px!important;
  }
}

.singleSection {
		margin:10px;
  background: #e9eaee;
  border-radius: 20px 20px 20px 20px!important; 
  border-right: 10px solid #13a4d2!important; /* Adjust the width and color as needed */
  border-left: 10px solid #13a4d2!important;
  padding: 20px; /* Optional: Adds some space inside the div for better appearance */
  margin-bottom:20px!important;
    background-color: rgba(255,255,255,0.8);
  /* background: #e9f2f5; */	
}
.two {
	
}
/* END Sections */

/* START Back to top button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #f383df;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #13a4d2;
}
/* END Back to top button */


/* Links */
.blue-link {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    color: #13a4d2;
    text-transform: capitalize;
    font-weight: 700;
    font-family: roboto, sans-serif;
}
.green-link {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    color: #f383df;
    text-transform: capitalize;
    font-weight: 700;
    font-family: roboto, sans-serif;
}

/* navBar */

.site_header {
    display: flex;
    flex-direction: column;
}

.branding-and-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    width: 50px; /* Set a larger clickable width */
    height: 50px; /* Set a larger clickable height */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Ensure proper positioning */
}

.menu-toggle .hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background: #f383df;
    position: relative;
}

.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background: #13a4d2;
    position: absolute;
}

.menu-toggle .hamburger::before {
    top: -8px;
}

.menu-toggle .hamburger::after {
    bottom: -8px;
}

/* Increase the clickable area while keeping lines centered visually */
.menu-toggle {
    touch-action: manipulation; /* Improves mobile touch responsiveness */
}

@media (max-width: 960px) {
    .menu-toggle {
        display: block;
    }

    .main-menu {
        display: none;
        flex-direction: column;
    }

    .main-menu.active {
        display: flex;
    }
}

@media (min-width: 961px) {
    .menu-toggle {
        display: none;
    }

    .main-menu {
        display: block;
        flex-direction: column;
    }

    .main-menu.active {
        display: flex;
    }
}