/* Reset some default styles */
body, h3, p {
    margin: 0;
    padding: 0;
	line-height: 1.8;
}

p
{
	line-height: 1.3;
}

.quote
{
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	font-weight: 100;
    padding: 0;
	line-height: 1.2;
	width: inherit;
}

h2
{
	font-weight: 100;
	line-height: 1.6;
}

h1
{  
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	width: 50vw; 
    padding: 0;
	line-height: 1.2;
	margin: 2px, 2px;
	font-weight: bold;
}

/* Basic styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.8;
    background-color: #f4f4f4; 
	margin: 0; 
}

body.no-scroll {
    overflow-y: hidden;
}

.headertext {
    background-color: #333; /* Dark background for header */
    color: white; /* White text color */
    padding: 20px; /* Padding for header */
    text-align: center; /* Center text */
}
 

main {
	padding: 0px;
  	max-width: 60%;
  	min-height: 1000px;
  	margin-right: 20%;
  	margin-left: 20%;
}
 
 
header {
   	background-color: #F4F4F4;
    text-align: left;
	z-index: 1000;
	position: relative;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #2d2e2d;
    text-decoration: none;
} 
 
footer {
    text-align: left;
    padding: 0px; 
	padding-bottom: 20px;
    background: #35424a;
    color: black;
}

footer .social-follow
{
	position: relative;
	right:0;
}

.title {
    font-size: inherit; /* Adjust the font size */
    color: inherit; /* Text color */
    display: flex; /* Use flexbox for alignment */
	line-height: 1.2;
}

.yellow-square {
    width: 16px; /* Width of the square */
    height: 16px; /* Height of the square */
    background-color: rgb(255, 212, 0); /* Color of the square */
    margin-right: 10px; /* Space between the icon and the title */ 
}

.red-square {
    width: 16px; /* Width of the square */
    height: 16px; /* Height of the square */
    background-color: red; /* Color of the square */
    margin-right: 10px; /* Space between the icon and the title */ 
}

.red-square-mobile {
	display: none;
    width: 16px; /* Width of the square */
    height: 16px; /* Height of the square */
    background-color: red; /* Color of the square */
    margin-right: 10px; /* Space between the icon and the title */ 
}

.grey-square {
    width: 16px; /* Width of the square */
    height: 16px; /* Height of the square */
    background-color: #35424a; /* Color of the square */
    margin-right: 10px; /* Space between the icon and the title */ 
}

/*.artwork1-bg { 
	left: -10;
	position: absolute;  
	width: 99vw;
    height: 900px; /* Full height of the viewport */ 
	/*background-image: url('../wp-afa-theme/images/BG-Static.png'); /* Replace with your image URL */ 
    /*background-size: 80%; /* Cover the entire viewport */
    /*background-position: top right; /* Set the position (e.g., top left, center, etc.) */
    /*background-repeat: no-repeat; /* Prevent the image from repeating */
   /* background-attachment: local; /* Make the background fixed */
	/*z-index: -1;
}*/

.artwork1-bg { 
		left: 0;
		  top: 0;
		  position: relative;
		  width: 100%;
		  height: 200px;
		  display: block;
		  background-image: url('../wp-afa-theme/images/afa-cover-plain.png');
		  background-position: 400px;
		  background-repeat: no-repeat;
		  background-attachment: local;
		  z-index: -1;
		  margin-bottom: 21px;
		  max-width: 100%;
		  max-height: 100%;
		  background-size: contain;
		  background-color: white;
	}
 
.sg-photo1
{
	background-image: url('../wp-afa-theme/images/photos/pexels-alaric-sim-380461-1029188.jpg');
	background-size: cover;
  	height: 500px;
  	background-position: 0 -290px;
} 
.photo-hotel1
{
	background-image: url('../wp-afa-theme/images/photos/pexels-azri-suratmin-33181-122244.jpg');
	background-size: cover;
  	height: 500px;
  	background-position: 0 -440px;
}
.photo-tax-deadline
{
	background-image: url('../wp-afa-theme/images/photos/pexels-leeloothefirst-8962476.jpg');
	background-size: cover;
  	height: 500px;
  	background-position: 0 -440px;
}
.photo-storage-mnc
{
	background-image: url('../wp-afa-theme/images/photos/pexels-tiger-lily-4483610.jpg');
	background-size: cover;
  	height: 500px;
  	background-position: 0 -440px;
}

.header-container { 
    padding: 20px 20px 0px 4%;
	z-index: 1000;
	position: relative;
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space between logo and menu */
	background-color: #F4F4F4;
}

.header-container.black { 
	background-color: rgba(51, 51, 51, 1);
}

.logo
{
	margin-left: 8vw;
}

.logo img {
    height: 30px; /* Set logo height */
	margin-left: 8px; 
}

.logo img.white{
     filter: brightness(0) invert(1);
}

.header-container a
{
	text-decoration: none;
}

nav {
	z-index: 3;
    margin-right: auto; /* Push the nav to the right */
	padding: 0 0 0 200px;
}

.menu { 
	z-index: 3;
    display: flex; /* Use flexbox for the menu */
}

.menu li {
    margin-left: 20px; /* Space between menu items */
}

.menu a {
    color: #2d2e2d; /* Black text color for links */
    text-decoration: none; /* Remove underline from links */ 
}

.menu a:hover {
    text-decoration: none; /* Underline on hover */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.logo img {
    max-height: 50px; /* Adjust as needed */
}

.hamburger-container {
  	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 8px 8px;
	  position: absolute;
	  top: 0;
	  right: 0;
	  z-index: 99999;
	  background-color: #ffd400;
	 transition: padding 0.3s ease, transform 0.3s ease; /* Animation for the underline */ 
}

.hamburger {
    display: none; /* Hidden by default */ 
    cursor: pointer;
}


.hamburger .line {
		height: 4px;
		width: 32px;
		background-color: #333;
		margin: 6px 0; 
}
 
.mobile-nav {
    display: none; /* Hidden by default */  
	width: -moz-available;  
	overflow: hidden;
}

.mobile-nav.show {
   padding: 0;
}
 
.mobile-nav ul {
    list-style-type: none; /* Remove default bullet points */
    padding: 0px; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Align items vertically */
}

.mobile-nav li {
	text-align: left; 
	display: inline-grid;
	width: inherit;
  	padding: 10px 30px; 
}

.mobile-nav li a {
    text-decoration: none;
    color: white; /* Change color as needed */
	padding: 0;
}

.header-line {
    content: '';
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px; /* Height of the underline */
    background-color: #e4e4e4;; /* Color of the underline */ 
    transition: transform 0.3s ease; /* Animation for the underline */ 
}

.hover-div {
    display: none;
    position: absolute;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1;
    width: 150px; /* Adjust width as needed */
}

.menu-item
{ 
	cursor: pointer;
	user-select: none; /* Standard syntax */
}

.menu-item:hover + .hover-div {
    display: block;
}

.menu-item::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px; /* Height of the underline */
    background-color: #ffd400 ; /* Color of the underline */
	transform-origin: left;
    transform: scaleX(0); /* Initially hidden */
    transition: transform 0.3s ease; /* Animation for the underline */
	bottom: -8px;
}

.menu-item:hover::after,
.menu-item.active::after { /* Add active class styles */
    transform: scaleX(1); /* Show the underline on hover or when active */
} 

.menu-item.active::after { /* Add active class styles */
    background: #ffd400;
}

.menu-item:hover {
    position: relative; /* Ensure the hover box is positioned relative to the menu item */
} 

.menu-item.active { 
	color: black;
    position: relative; /* Ensure the active state is also positioned relative */
}

.menu-item.white {
	color: white;
    position: relative; /* Ensure the active state is also positioned relative */
	
}
 

.breadcrumb-arrow {
	color: #B0B0B0;
}

.breadcrumb {
	font-size: 10pt;
	padding: 5px 15px 5px 85px; 
	border-radius: 5px;
	display: inline-block;
	color:#4b4b4b;
	font-weight: bold;
	position: relative;
  	z-index: 100;
}
.breadcrumb a {
	text-decoration: none;
	 color: #9D9D9D;
    font-weight: bold;
}
.breadcrumb a:hover {
	text-decoration: underline;
	color:#4b4b4b;
	font-weight: bold;
}
.breadcrumb span {
	margin: 0px;
}

.container {
	width: 220px;
	height: 150px;
	max-width: inherit; /* Max width for main content */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
    gap: 20px; /* Space between the columns */
    padding: 0px; /* Padding around the container */
	
}

.infoBoxBG
{
	background-color: #ececec;
}

.squareContainer {
	width: 175px;
  height: fit-content;
  max-width: inherit;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0px;
	
}

.section {
	cursor: pointer;
	width: inherit; 
    text-align: left;
	height: 90px;
}

.section .square { 	  
	padding: 5px;
	top: 1px;
	left: 20px;
    width: 0px;
    height: 0px;
    background-color: #d5d5d5;
    transform-origin: top left; /* Set the transform origin to the top left corner */
   	transition: width 0.3s ease, height 0.3s ease, colour 0.3s ease;
	z-index: -1;  
	user-select: none;
}

.section .text {
    width: 180px;
	padding: 5px;
	cursor: pointer;
} 

.section .square:hover {
    width: 150px; /* New width on hover */
    height: 80px; /* New height on hover */
	background-color: #ececec;
}

.section .square.expanded {
    width: 175px; /* New width when expanded */
    height: 80px; /* New height when expanded */
    background-color: #ffd400; /* New background color when expanded */
	pointer-events: none; /* Prevents clicking */
	
}

.section h5 {
    line-height: 1.2;
	margin: 0; 
}

.infoBox 
{
	position: relative;
  	width: 70%;
  	line-height: 1.4;
  	margin-bottom: 72px;
  	height: 100px;
	padding: 0px 30px; 
}

.infoTitle
{
	background: #f2f2f2;
  	padding: 13px;
  	border-bottom: #fff solid 1px;
}
 

.infoBoxMobile
{
	display: none;
	width: 100vw;
}

.sourceSubtitle
{
	line-height: 1.2;
	font-size: 14px;
}


.divider {
	top: 10vh;
    position: relative; /* Position relative for any absolute children */
    padding: 5px 5px 5px 0;
	width: 80vw;
    background-image: url("../wp-afa-theme/images/border.png"); /* Background image */
    background-size: auto; /* Cover the entire area */
    background-repeat: repeat; /* Prevent repeating the image */
    background-position: center; /* Center the background image */
    margin: 0; /* Center the divider */
}
 
.footerPageNav 
{ 
    display: flex;
    align-items: top; /* Center items vertically */
    justify-content: space-between; /* Space items evenly */
    padding: 20px 10vw; /* Adjust padding as needed */
    margin-top: 2vh;
    margin-bottom: 10vh;
}

.footerPageNav > div {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.footerPageNav .arrowDir {
	position: relative;
	background-image: url("../wp-afa-theme/images/Button-Dir.png");
	backface-visibility: visible;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 80%;
  	width: 30px;
	cursor: pointer;
	pointer-events: all;
}


.footerPageNav .footerDivider
{
	width: 72%;
}

.footerPageNav h3 { 
	position: relative; 
	font-weight: 100;
	font-size: 15px;
}
.footerPageNav h2 { 
	position: relative; 
	font-weight: 400; 
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	margin: 0; 
  	margin-top: 8px; 
}

.footerPageNav a { 
	text-decoration: none;
	color: black; 
}

.footerPageNav .leftButton 
{ 
	position: relative;
	line-height: 1.2px;
	text-align: left;
	cursor: pointer; /* Change the cursor to default */
}

.footerPageNav .rightButton
{  
	line-height: 1.0px;
	text-align: right;
	cursor: pointer; /* Change the cursor to default */
}

.footerPageNav .left-arrow { 
	background-position: left top;
	cursor: inherit; /* Change the cursor to default */
}

.footerPageNav .right-arrow {  
    background-image: url("../wp-afa-theme/images/Button-Dir2.png");
	background-position: right top;
	cursor: inherit; /* Change the cursor to default */
	transform: scaleX(1);
}

.fixedFooter
{ 
	background-color: #ffd400;
	padding: 0; /* Padding around the banner */  
    overflow: hidden; /* Prevent content overflow */
    transition: height 0.5s ease; /* Smooth transition for height */
    height: 0; /* Initial height */
	position: fixed;
    bottom: 0; /* Align it to the bottom of the parent */
    left: 0; /* Align it to the left */
    right: 0; /* Align it to the right */
	z-index: 1000;
}

.fixedFooter.expanded
{
	padding: 10px 50px 10px 170px; /* Padding around the banner */  
	height: 100%; /* Height when expanded */
	overflow-y: hidden;
}


.fixedFooter h2
{ 
	margin-top: 90px;
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 10px;
}

.bottom
{ 
	background-color: #35424A;
	padding: 0; /* Padding around the banner */  
    overflow: hidden; /* Prevent content overflow */
    transition: width 0.5s ease; /* Smooth transition for height */
    height: 10px; /* Initial height */
	width: 0px;
	position: fixed;
    bottom: 0; /* Align it to the bottom of the parent */
    left: 0; /* Align it to the left */
    right: 0; /* Align it to the right */
	z-index: -4;
}

.bottom.expanded
{  
	padding: 5px;
    width: 100vw; /* Initial height */ 
	z-index: 2;
}
 
.footerContactUs {
	padding: 10px 140px 10px 120px; /* Padding around the banner */ 
	background-color: #ffd400; /* Background color for the banner */

    overflow: hidden; /* Prevent content overflow */
    transition: height 0.5s ease; /* Smooth transition for height */
    height: 115px; /* Initial height */
	font-size: 10pt;
	
	position: relative;
  	z-index: 9;
	 
}

.footerAFACompliance
{
	position: absolute;
  	right: 30px;
	color: #5e562e;
}
  
.footerContactUs h1 {
	margin-left: 21vw;
}

.footerContactUs p
{
	margin-left: 20px;
}

.social-icons {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between logo and icons */
    align-items: center; /* Center items vertically */
    padding: 12px; /* Optional: Add some padding */
}

.social-icons a {
    color: #000; /* Icon color */
    font-size: 24px; /* Icon size */
    text-decoration: none; /* Remove underline */
	z-index: 2px;
}

.social-icons a:hover {
    color: #007bff; /* Change color on hover */
}

.social-icons .icons { 
    display: flex; /* Use flexbox for the icons */
    gap: 10px; /* Space between icons */
}

.social-icons .icons a {
    color: #000; /* Icon color */
    font-size: 24px; /* Icon size */
    text-decoration: none; /* Remove underline */
	margin: 0 0 0 5px;
}

.social-icons .icons a:hover {
    color: #007bff; /* Change color on hover */
}

.social-icons .logo{
	filter: brightness(0); /* Makes the image white */
	display: flex; /* Use flexbox for alignment */
	top: 0px;
	position: relative;
	justify-content: flex-start; /* Align icons to the right */
	margin-left: 0;
}

.social-icons .logo img{
	 max-height: 50px; /* Set a max height for the logo */
} 
 
.contactUsArrow {  
	background-image: url("../wp-afa-theme/images/arrow.png"); 
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-attachment: local; /* Make the background fixed */
    background-size: contain; /* Scale the image to fit within the div */
    width: 20px; /* Set a width for the div */
    height: 20px; /* Set a height for the div */
    position: relative; 
	top: 8px;
    margin: 0 auto; /* Center the div itself if needed */
	cursor: pointer;
}

 
.newsBanner {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: left; /* Center items horizontally */
    padding: 20px 10vw 100px 10vw; /* Padding around the banner */
    margin-top: 2vh;
    margin-bottom: 2vh;
    background-color: #f7f8f7; /* Background color for the banner */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.newsBanner .banner-title {
	font-weight: 300;
	color: #918f8f;
    font-size: 16px; /* Main title font size */
    margin-bottom: 20px; /* Space below the title */
    text-align: left; /* Center the title */
}

.news-link
{
	width: 100%;
  	height: 385px;
	text-decoration: none;
	color: inherit;
}

.news-link a
{
	color:inherit;
	text-decoration: none;
}

.news-link a h2 
{
	color:inherit;
	text-decoration: none;
}

.news-item {
    flex: 1; /* Each item takes equal space */
	padding:  10px 0 20px 0;
    margin: 0 5px ; /* Margin between items */
    background-color: white; /* Background color for each news item */
    border-radius: 5px; /* Rounded corners */ 
    overflow: hidden; /* Prevent overflow */
	transition: background-color 0.3s; /* Smooth transition for hover effect */
	height: fit-content;
  	width: inherit;
}

.news-item:hover {
    background-color: #ffd400; /* Background color for each news item */
	color: black;
}

.news-item a{
   	text-decoration: none;
	color: black;
}
 
.news-items-container {
    display: flex; /* Use flexbox for the news items */
    justify-content: space-between; /* Space out the columns */
    width: 100%; /* Full width */
	cursor: pointer;
	gap: 10px;
}
 
.news-image {
    	width: inherit;
	  height: 205px;
	  cursor: pointer;
	  object-fit: cover;
}

.newsContent {
   
}

.news-title {
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
    font-size: 18px; /* Title font size */
    margin: 10px; /* Margin around title */
	line-height: 20px;
	color: inherit;	
	cursor: pointer;
}

.news-body {
	padding: 1px 0 0 0;
    font-size: 14px; /* Body text font size */
    margin: 10px; /* Margin around body text */
    color: #666; /* Body text color */
	cursor: pointer;
}

.news-body:hover { 
	color: black;
}

.news-body a{
	color: inherit;
	text-decoration: none;
}

.news-title a{
	
	text-decoration: underline;
	color: inherit;
}



.button
{
	
}

.whatsapp-button {
    position: fixed; /* Fix the button to the viewport */
    bottom: 75px; /* Distance from the bottom */
    right: 50px; /* Distance from the right */
 	background-color: #ffd400; 
    color: #2d2e2d; /* Icon color */
    border-radius: 0 0 0 15px; /* Rounded corners */
    width: 80px; /* Width of the button */
    height: 80px; /* Height of the button */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Optional: Add shadow */
    text-decoration: none; /* Remove underline */
    font-size: 40px; /* Icon size */
    transition: background-color 0.3s; /* Smooth transition for hover effect */ 
	z-index: 9;
}

.whatsapp-button:hover {
	 background-color: #2d2e2d; 
	 color: white;
}

.whatsapp-button a {
    color: #2d2e2d; /* Icon color */
}

.whatsapp-button:hover a {
    color: #ffd400;
}


.close-icon {
    font-size: 40px; /* Adjust size as needed */
    cursor: pointer; /* Change cursor to pointer */
    color: #333; /* Change color as needed */
    position: absolute; /* Position it as needed */
	top: 7vh;
  	right: 6vw;
	z-index: 99999;
}


.contact-info {
    display: none; /* Initially hidden */
	font-weight: 5vw; 
	  top: 6vh;
	  position: absolute;
	  left: 12vw;
	
}


.contact-info .businessLocation h2
{
	font-size: 20px;
	margin-bottom: 10px;
	text-align: left; /* Align main title to the left */
	margin-top: 35px;
}

.contact-info .container {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	justify-content: space-between; /* Space between columns */
	flex-wrap: wrap; /* Allow wrapping for smaller screens */
	width: 70vw;
  	min-width: 800px;
}
.contact-info .column {
	flex: 1; /* Each column takes equal space */  
	border-right:  1px solid #35424A; 
	margin-right: 25px;
 	max-width: 78%;
	padding-right: 40px;
	margin-top: 25px;
}

.contact-info .location {
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	font-size: 20px;
	margin: 0 0 10px 0; /* Margin for h2 */
	font-weight: bold;
}

.contact-info .name {
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	font-size: 18px; 
	font-weight: bold;
	margin-bottom: 10px;
}

.contact-info a
{
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	font-size: 14px;
	font-weight: 500;
	color: #35424A;
}


.contact-info p{
	font-size: 14px;
}

.contact-info .noLink
{
	margin-top: 5px;
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	font-size: 14px; 
	font-weight: 500;
	color: #35424A;
}

.dropMenu 
{ 
	top: 20;
	position: absolute;
	left: 0;
	width: 95%; /* Full width */
	height: 0; /* 70% height */
	background-color: rgba(41, 41, 41, 1); /* Dark background with transparency */
	color: white;
	padding: 0px; /* Padding for content */
	transition: height 0.3s ease; /* Transition effect */
	z-index: 1; /* Ensure it is above other content */
	overflow-y: auto; /* Allow scrolling if content overflows */ 
	overflow-x: hidden;
}
.menuContent
{    
	width: 100vw;
	transition: height 0.3s ease; /* Transition effect */ 
	overflow-y: auto; /* Allow scrolling if content overflows */
	display: flex;
	align-items: flex-start; /* Align items to the top */
	overflow-x: hidden;
	padding-left: 30px;
}

.menuContentBack
{
	display: none;
}

.dropMenuDivider
{
	background-color: #5e5b5c; 
	height: 200px; 
	width: 1px; 
	margin-top: 20px; 
	margin-left:20px;
}

.menuContent.active
{    
	display: flex;
}

.menuContent.hide
{    
	display: none;
}
 
.dropMenu h2 {
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	width: 50vw;
	margin: 20px 0 5px 0;
    padding: 0;
	line-height: 1.2; 
	font-weight: 200;
	overflow: hidden;
}
.dropMenu.show {   
	height: 300px;
	padding-left: 5vw;
}
.dropMenu.reveal {   
	display: none;
}
.dropMenu .column {
	width: 22vw; 
	margin-left: 50px;
}

.sideBar {
	padding: 10px;
	border-right-width: thin;
	border-right-color: aliceblue;
}
 
.dropMenu .column a{
	width: 25vw; 
	padding: 10px;
	background-color: rgba(51, 51, 51, 1); 
	color: white;
	text-decoration: none;
}
.dropMenu .column a:hover{
	width: 25vw; 
	padding: 10px; 
	background-color: #ffcc00;
	color: black;
	cursor: pointer;
}

.dropMenu .column h2 {
	margin: 20px 0 20px; /* Margin for headings */
}
.dropMenu .column div {
	margin-bottom: 15px; /* Margin between items */
	cursor: pointer; /* Pointer cursor on hover */
	font-size: 18px; /* Font size for items */
}
.dropMenu .column div:hover {
	color: #ffcc00; /* Change color on hover */
} 

.extraSpace
{
	
}

.dashed-divider {
    border: none; /* Remove default border */
    border-top: 1px dashed #ccc; /* Set dashed border */
    height: 1px; /* Set height of the divider */
    margin: 20px 0; /* Add vertical spacing */
    width: 100%; /* Make it full width of the parent */
}

.clear-divider {
    border: none; /* Remove default border */ 
    height: 1px; /* Set height of the divider */
    margin: 20px 0; /* Add vertical spacing */
    width: 100%; /* Make it full width of the parent */
}
 
.yellowBox
{
	background: #ffd503;
  padding: 20px 45px 45px 45px;
  border-left: 16px solid #58595b;
  border-radius: 0 0 50px 0px;
}
 

.yellowBox h2
{
	color:#372d06; 
	font-family: 'Roboto Slab', serif;
	  width: fit-content;
	  text-align: left;
	  margin-top: 5px;
	  margin-bottom: 10px;
	  font-weight: 100;
	  font-size: 26px;
}

.yellowBox h3
{
	font-weight: 100;
}

.yellowBoxNarrow
{
	background: #ffd503;
  	border-left: 300px solid #f57f20;
  	border-radius: 0 0 50px 0px;
  	padding: 60px;
	
}

.yellowBoxNarrow h2
{
	font-weight: 600;
	
}

	.yellowBoxNarrow .two-column-equal {   
			width: 635px;
  			margin: 0;
	}	
	
	.yellowBoxNarrow .two-column-equal .column{   
		width: inherit;
  		max-width: inherit;
	}
		.yellowBoxNarrow .quote {   
	  width: 75%;
	}

.two-column-flex
{
	display: flex; 
	padding: 10px;
}


.two-column-flex img
{ 
	max-width: 100px;
  	max-height: 100px;
  	padding: 30% 0;
    padding-right: 30px;
  	margin: auto; 
}


.two-column
{
	display: grid;
	grid-template-columns: 1fr 1fr; /* Creates 4 equal columns */
	padding: 10px;
}

.two-column p
{
	padding-right: 70px;
}


.three-column
{
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Creates 4 equal columns */
	padding: 10px;
}

.three-column p
{  
	margin-top: 10px;
	padding-right: 30px;
}

.three-column img
{
	padding: 10px;
	border-radius: 50%;    /* Make it round */
}

.four-column
{
	display: grid;
	grid-template-columns: 1fr 2fr;   /* Define columns with a 1:2 ratio */
	margin-bottom: 100px;
}


.four-column p
{
	color: #333;
}

.four-column p, 
.four-column h1,
.four-column h2,
.four-column h3,
.four-column h4 {
    text-align: left;
    margin-top: 10px;
    padding-right: 30px;
    padding-left: 30px;
}
.four-column h1, h2, h3, h4
{  
	line-height: 1.2;
}

.four-column h3
{
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	margin-bottom: 10px;
	font-weight: bold;
}

.four-column h4
{
	margin: 0;
	font-weight: 100;
	line-height: 1.5;
}


.four-column .text
{  
	margin-top:20px;
}

.four-column .img
{  
	display: flex;
	justify-content: center;      /* Center horizontally */
    align-items: center;          /* Center vertically */
	border-radius: 50%;    /* Make it round */
	padding-bottom: 20px;
}

.four-column .img img
{  
	width: 13vw;
	border-radius: 50%;    /* Make it round */ 
}

.four-column .profile
{
	font-size: 12px;
	display: grid;
	padding: 20px; 
	margin: 10px;
    justify-content: center;      /* Center horizontally */
    align-items: center;  
}

.four-column .profile p
{
	margin: 0;
  	padding: 10px 0;
}

.four-column .profile .dashed-divider
{
	margin: 10px 0;
}

.four-column-equal
{ 
	display: grid;
	grid-template-columns: repeat(4, 1fr);  
	margin-bottom: 100px;
}

.four-column-equal img
{  
	border-radius: 100%;
  	height: 200px;
}

.four-column-equal .categoryBox
{  
	font-size: 14px;
}

.four-column-equal-title
{
	font-size: 15px;
  	font-family: 'Roboto Slab', serif;
  	padding-bottom: 10px;
}

.modToThree
{  
	grid-template-columns: repeat(3, 1fr);   
}

.four-column-equal .locationText
{
	display: grid;
	text-align: left; 
	padding-right: 40px;
	padding-top: 65px;
}

.four-column-equal .locationText a
{
	color: rgb(53, 66, 74);
}

.four-column-equal .locationText .noLink
{
	color: rgb(53, 66, 74);
}


.four-column-equal .locationText p
{
	line-height: 1.5;
	margin: 0;
	margin:10px 0;
	width: 80%;
}

.four-column-equal .locationText h3
{
	text-align: left; 
	margin-top: 0px;
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
	font-size:15px;
}

.four-column-equal .locationHeader
{
	text-align: left;
  	line-height: 1.3;  
	display: grid;
	grid-template-columns: 1fr 11fr;
	align-content: center;
	justify-content: center;
}

.four-column-equal .locationHeader a
{
	color: inherit;
}

.four-column-equal .locationHeader .fas
{
	color: red;
	line-height: 1.2;
}
 
.four-column-equal .services
{
	padding: 30px;
}

.categoryBoxContainer
{
	display: inline-block;
	flex-direction: column; 
 	 margin: 0px;
}

.categoryBox
{
	padding: 7px 7px;
	  border: 1px solid #d0d0d0;
	 margin-bottom: 5px;
	  text-align: center;
	  align-content: center;
	line-height: 1.2;
	font-size: 10px;
	display: inline-block;
}

.about-main
{
	padding: 0px;
  	max-width: 100%;
  	min-height: 1000px;
  	margin-right: 10vw;
  	margin-left: 10vw;
}

.location-main
{
	position: relative;
  	padding: 0px;
    padding-top: 0px;
  	padding-top: 350px;
  	max-width: 80%;
  	min-height: 45vh;
  	margin-right: 20vw;
  	margin-left: 20vw;
  	margin-bottom: 5vw;
}

.location-main .title
{
	margin-bottom: -40px;
}

.services-main
{
	padding-top: 350px;
}

.main-wrapper
{ 
	max-width: 60%; 
	margin-right: 20vw;
	margin-left: 20vw; 
	margin-top: 0;
}

.main-wrapper h4
{
	margin: 0;
	margin-bottom: 20px;
}

.blockSection
{
	background: #F0F0F0;
	padding: 50px 50px 70px 50px;
  	 /*color: white;*/
}

.blockSection p
{
	 /*color:#ABABAB;*/
}

.yellowBanner
{
	position: absolute;
	width: 100%;
	height: 276px;
	background: #ffd400;
	top: 150px; 
}

.whiteBanner
{
	position: relative;
	width: 100%;
	height: 300px;
	background: white; 
	padding: 3vh 0;
}
 
.ourTeamArtBanner
{
	position: relative;
  width: 100%;
  height: 156px;
  background-image: url("images/about-us-graphic-2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
	margin-top: 30px;
}

.aboutUsArtBanner
{
	position: absolute;
	width: 100%;
	height: 350px;
	background-image: url("images/about-us-graphic.png");
	background-repeat: no-repeat;
	top: 100px;
	background-size: contain;
	background-position: center;
}

.hiringArtBanner
{
	position: relative;
  width: 100%;
  height: 250px;
  background-image: url("images/hiring-banner.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
	margin-top: 30px;
}

.texture-banner
{
	position: relative;
  	width: 100%;
  	height: 100px;
  	background-image: url("images/afa-texture-banner.png");
  	background-repeat: repeat-x;
  	background-position: center;
  	margin-top: 30px;
  	background-size: 50%;
}

.texture-banner.expanded
{
	height: 110px;
  	background-size: 25%;
}

.banner-header
{  
	background-size: contain;
	background-position: center;
	text-align: center;
 	margin: 108px 0 0 200px;
	display: flex;
  	justify-content: center;
}

.banner-header h2
{
	  font-family: 'Roboto Slab', serif;
	  width: 400px;
	  text-align: left;
	  margin-top: 5px;
	  margin-bottom: 10px;
	  font-weight: bold;
	  font-size: 26px;
}

.banner-header h4
{
	font-family: 'Roboto Slab', serif;
	width: 300px;
	text-align: left; 
	margin: 0;
}

.banner-header p
{
	  width: 300px;
	  text-align: left; 
}

.servicesArtBanner-1
{
	position: absolute;
	width: 100%;
	height: 350px;
	background-image: url("images/services-graphic-1.png");
	background-repeat: no-repeat;
	top: 120px;
	background-size: contain;
	background-position: center;
}

.servicesArtBanner-1 .banner-headerMod
{ 
	text-align: left;
  margin: 50px 0 0 365px;
  display: flex;
  justify-content: left;
  background-color: #fff;
  width: 300px;
  padding: 19px 30px 20px 30px;
  border: 3px solid #363332;
  border-radius: 40px 0 40px 40px;
}

.servicesArtBanner-1 h4
{ 
	margin-bottom: 10px;
}
.servicesArtBanner-1 p
{ 
	line-height: 1.3;
	border-bottom:2px solid black;
  padding-bottom: 27px;
}

.two-column-services-2fr1fr
{
	grid-template-columns: 2fr 1fr;  
}

.two-column-1fr2fr
{
	grid-template-columns: 1fr 2fr;  
}


.two-column-services
{
	
}


.two-column-services img
{
	width: 100%;
	
}
 
.two-column-services .textBox
{
	background: #ffd40000;
  padding: 30px;
  margin-left: 10px;
  border-radius: 30px 0 30px 30px;
  border: 1px solid #cecece;
}

.three-column-equal
{ 
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
}

.grid-equal 
{ 
	  display: grid;
	  grid-template-columns: 1fr !important;
}

.three-column-equal .services
{
		text-align: center;
	  display: grid;
	  justify-content: center;
	  align-items: center;
	  width: 90%;
	  padding:	19px 17px;
}

.three-column-equal .services img
{ 
	  max-width: 45%;
	  height: auto;
	  display: block;
	  margin: auto;
}

.three-column-equal .servicesPartner img
{ 
	  max-width: 60%; 
}

.two-column-equal
{
		display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  margin: auto;
	  width: 75%;
}

.two-column-equal .services
{
		text-align: center;
	  display: grid;
	  justify-content: center;
	  align-items: center;
	  width: 60%;
	  padding:	19px 17px;
	margin: auto;
}

.two-column-equal .services img
{ 
	  max-width: 55%;
	  height: auto;
	  display: block;
	  margin: auto;
}

.services a
{
	color: inherit;
}

.two-column-equal .column
{
	max-width: 25vw;
	position: relative;
  	z-index: 1;
}

.three-column-equal
{
		display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  margin: auto;
	  width: 100%; 
	 grid-gap: 40px;
	margin-top: 25px;
}

.contact-us-btn
{
	padding: 10px;
	  border: 3px solid #0000;
	  background-color: white;
	  width: fit-content;
	  text-align: center;
	  margin: 0;
	cursor: pointer;
	user-select: none;
	 color: inherit;
	margin-top: 20px;
}

.contact-us-btn h2
{
	line-height: 0;
} 


.contact-us-btn:hover
{   
	border: 3px solid black;
}


.quoteWidth
{
	width: 35vw;
}

.quoteCenter
{
	text-align: center;
  display: block;
  margin: auto;
  width: 65%;
  padding: 48px;
  background: white;
}

.serviceBottomGraphic
{
	width: 500px;
  	height: auto;
  	object-fit: cover;
	position: relative;
  	z-index: 0;
	
}

.profile-social-icons
{
	font-size: 20px;  
	padding: 3px; 
	white-space: nowrap; 
	margin-top: 8px;
}

.name-icons a
{ 
	color: #b3b3b3;
}
.name-icons a:hover
{ 
	color: dodgerblue;
}

.name-icons h3
{
	margin: 0; 
	padding: 10px 10px 10px 30px;
	white-space: nowrap;
}

.name-icons
{
	grid-template-columns: 1fr 7fr;
	padding: 0;
}

.about-social-icons
{
	
}

.latest-openings
{
	padding: 0px;
  max-width: 70%; 
  margin-right: 20%;
  margin-left: 20%;
}

.latest-openings-main
{
	display: flex;
	flex-wrap: wrap; /* Allow items to wrap to the next row */
}
	 
.latest-openings-main h2
{
	font-weight: 600;
}

.extra-margin-bottom
{
	margin-bottom: 15px;
}
 
iframe 
{
	width: 100%;
	height: 500px; /* Adjust height as needed */
	border: none; /* Remove border */
}

.dropMenu .service-length
{
	width: 100%;
}

.clearColor
{
	background-color: #f4f4f400;
}

.padding15
{
	padding: 15px 0;
}

.margin0
{
	margin: 0;
}

.bold
{
	font-weight: bold;
}

.height-auto
{
	height: auto;
	min-height: auto;
}

.flexBox
{
	display: flex;
}

.gridBox
{
	margin: 10px 0;
	display: grid;
	grid-template-columns: 1fr 2fr 2fr;
	background-color: #ececec;
}

.gridBox-equal
{ 
	grid-template-columns: 1fr 1fr 1fr; 
}

.gridBox-double-equal
{ 
	grid-template-columns: 1fr 1fr; 
}

.gridBox-single
{ 
	grid-template-columns: 1fr; 
}

.gridBox div
{ 
  	padding: 20px;
}

.gridBox-special
{
	background-color: #e4e4e4;
  	border-right: 4px solid #ffd400;
}

.gridBox-special-empty
{
	background-color: #e4e4e4;
  	border-right: 4px solid #ffd400;
}

.gridBox-mobile-only
{
	display: none;
}


.gridBox-normal
{
	border-right: 1px solid aliceblue;
	border-top: 1px solid aliceblue;
  	padding-right: 10px;
	display: flex;
}

.gridBox-1-4
{
	grid-template-columns: 1fr 4fr;
}

.gridBox-1-25
{
	grid-template-columns: 1fr 25fr;
}


.gridBox-2-1
{
	grid-template-columns: 2fr 1fr;
}

.gridBox-1-2
{
	grid-template-columns: 1fr 2fr;
}

.gridBox-1-2-5
{
	grid-template-columns: 1.75fr 2fr 5fr;
}

.asterisk
{
	padding: 10px;
	font-weight: bold;
	font-size: 18px;
	line-height: 0;
}

.centered
{
	text-align: center;
	display: block;
	align-content: center;
}

.specialSquare
{
		width: 4px;
	  height: 24px;
	  background-color: red;
	  margin-right: 10px;
	  margin-top: 8px;
}

.magrinBottom5
{
	margin-bottom: 8px;
}

.marginTop5
{
	margin-top: 8px;
}

.margin0
{
	margin: 0px !important;
}
.marginLeft20
{
	margin-left: 20%;
}
.padding0
{
	padding: 0px !important;
}
.padding10
{
	padding: 10px 0 !important;
}
.padding20
{
	padding: 20px!important;
}
.paddingLeft0
{
	padding-left: 0px!important;
}
.paddingSide15
{
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding: 0 inherit;
}
.paddingTop10
{
	padding-top: 10px !important;
}
.justifyContent
{
	display: flex;
  	justify-content: center;
  	align-items: center;
}
.yellowBG
{
	background: #ffd400;
}
.greyBG
{
	background: #f0f0f0;
}

.roboto 
{
	font-family: 'Roboto Slab', serif; /* Use Roboto Slab font */
}

.no-whitespace
{
	white-space: nowrap;
}

.font14
{
	font-size: 14px;
}

.borderleft-white
{
	border-left: white solid 1px;
}

.bordertop-white
{
	border-top: white solid 1px;
}

.display-kits {
    display: none; /* Initially hide the div */
}

.display-kits.show {
    display: flex; /* Show the div when the 'show' class is added */ 
	width: inherit;
}

.display-kits a
{ 
	max-width: 30vw;
}

.maxwidth100
{
	max-width: 100% !important;
}

.decoration-underline
{
	color: #2d2e2d;
    text-decoration: underline;
}