/* Base style for anchor tag */
a.custom-link {
  color: #ffffff; /* Blue color */
  text-decoration: none; /* Remove underline */
}

/* Hover state */
a.custom-link:hover {
  color: #b0d0f4; /* Darker blue on hover */
  text-decoration: none; /* Ensure no underline on hover */
}

/* Visited state */
a.custom-link:visited {
  color: #d8dee5; /* Purple color for visited links */
  text-decoration: none; /* Ensure no underline on visited links */
}

/* Active state */
a.custom-link:active {
  color: #d8dee5; /* Red color when clicked */
  text-decoration: none; /* Ensure no underline on active links */
}

.bg-primary{
  background-color:   #333334 !important;
}
.bg-primary2{
  background-color: #3d3935!important;
}
.bg-dark {
  background-color: #333334 !important;
}
.bk-dark{
  background-image:url(img/texture_bg.jpg);
   
  background-size: cover; /* Makes the background image cover the entire element */
  background-repeat: no-repeat; /* Prevents the background image from repeating */
  background-position: center; /* Centers the background image */
 
}
.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard syntax */
}

.flexcenter { 
  display: flex!important; 
  justify-content: center; 
  /* Horizontal centering */ 
  align-items: center; 
  /* Vertical centering */ 
  height: 100%; 
  /* Ensure div takes the full height of the grid area */ 
}
/* CSS */
.clickable-div {
  cursor: pointer!important; /* Change cursor to pointer */
  background-color: #4CAF50; /* Background color */
  color: white; /* Text color */
  padding: 10px 20px; /* Padding for better appearance */
  text-align: center; /* Center the text inside the div */
  text-decoration: none; /* Remove underline from text */
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect */
.clickable-div:hover {
  background-color: #45a049; /* Darker shade on hover */
}
.clickable-div:active { 
  position:relative;
  top: 1px; 
  /* Move down 1 pixel */ 
  left: 1px; 
  /* Move left 1 pixel */ 
}
.button-like {
  display: inline-block; /* Make the div inline-block to behave like a button */
  padding: 10px 20px; /* Add padding for better appearance */
  background-color: #4CAF50; /* Background color */
  color: white; /* Text color */
  text-align: center; /* Center the text inside the div */
  text-decoration: none; /* Remove underline from text */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer!important; /* Change cursor to pointer */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect */
.button-like:hover {
  background-color: #45a049; /* Darker shade on hover */
}

/* Active effect */
.button-like:active {
  background-color: #3e8e41; /* Even darker shade when active */
}

.propdetails{
   
  padding-top:20px;
}
.propdetails1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
  align-content: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
  align-items: start;
}
.col2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  /*
  align-content: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
  align-items: start;
  */
}
.col2-140{
  grid-template-columns: minmax(0, 140px) 1fr;
}
.col2-160{
  grid-template-columns: minmax(0, 160px) 1fr;
}
.col2-180{
  grid-template-columns: minmax(0, 180px) 1fr;
}
.align-left{
  text-align:left;
}
.align-right{
  text-align:right;
}

.bold {
  font-weight:bold;
  
}
.modal-body { max-height: 75vh; 
    /* Set max height as 75% of the viewport height */ 
    overflow-y: auto; /* Enable vertical scrolling */ 
}

/* custom modal */

.dmodal-overlay {
  display: none; /* Hidden by default */
  position: fixed; 
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 1000; /* Ensure it's on top */
}
.dmodal-content {
  position: fixed;
  background-color: white;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  display: flex;
  flex-direction: column; /* Flex column layout */
}
.dmodal-header {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dmodal-body {
  flex: 1;
  overflow-y: auto; /* Make the content scrollable */
  padding: 10px;
}
.dmodal-footer {
  border-top: 1px solid #ddd;
  padding: 10px;
  text-align: right;
}
.dmodal-footer > button {
  margin-left: 20px;
}
.dclose-button {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 32px;
}


/* end custom modal */

.flexCenter{
  
    
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
 
}

.shadow{
  box-shadow: 0px 0px 1px 1px #0000008d;
}
.navbar-nav li{
  
  border:thin solid rgba(255, 255, 255, 0);
  
}
.navbar-dark .navbar-nav .navitem:hover {
  background: #cea301;/* #E51B5F; */
  color: #565656 !important;
  border:thin solid black;
 
}

.navitem{
  color:white!important;
  text-decoration: none;
 
}
.navitem:hover{
  color: #565656 !important;
  text-decoration: none;
}

.navlink{
  color:white!important;
  text-decoration: none;
  display:block;
}
.navlink:hover{
  color: #565656 !important;
  text-decoration: none;
}

    .form-check-label2 {
        font-size: 14px;
        position: relative;
        top: -2px;
        line-height: 14px;
    }
    
    .form-check-input {
        position: relative;
        display: block;
        padding-left: 1.25rem;
        border: thin solid silver;
        padding: 4px;
        width: 20px; /* Width of the checkbox */ 
        height: 20px; /* Height of the checkbox */   
    }

    .grid-check-input{
        display: inline-grid!important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    }
 
    .grid-check-input .form-check-label{
        font-size: 20px;
    width: 100%;
    position: relative;
 
    }
    .grid-check-input .form-check-label:hover{
        background:rgb(234, 233, 233);
    }
/* Media query for devices with a width less than 760 pixels */
 

/* -------- */
#ws-walkscore-tile {
  position: relative;
  text-align: left
}

#ws-walkscore-tile * {
  float: none;
}
.listingremarks{
  font-size: 1.2em;
  border: thin solid silver;
  padding: 40px;
}

.displaylistings{
    margin-left:60px;
    margin-right:60px;
}
/* sldsldks;dks;ksdksdk */
.search-container{
    padding:1px;
}
.map-container { 
  grid-column: 2 / span 1; 
  /* Place the map in the second column */ 
  position: relative; height: 50vh; 
  /* Set an initial height as needed */ 
} 
#map { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.social-share-buttons {
  display: flex;
 /* flex-direction: column;*/
  gap: 10px;
}

.social-share-buttons a {
  display: flex;
  align-items: center;
  padding: 10px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  
}

.social-share-buttons a i {
   
}

.facebook-btn {
  background-color: #3b5998;
}

.facebook-btn:hover {
  background-color: #2d4373;
}

.twitter-btn {
  background-color: #1da1f2;
}

.twitter-btn:hover {
  background-color: #0d95e8;
}

.linkedin-btn {
  background-color: #0077b5;
}

.linkedin-btn:hover {
  background-color: #005983;
}

.instagram-btn {
  background-color: #e1306c;
}

.instagram-btn:hover {
  background-color: #c82d64;
}
.email-btn { background-color: #c71610; } 
.email-btn:hover { background-color: #a1110d; }


.newlistingborder{
  border: 4px solid #006400;
}

@media (max-width: 760px) {
    
    /* Add more responsive styles as needed */
    .grid-check-input{
        display: inline-grid!important;
    grid-template-columns: 1fr ;
    }
    .displaylistings{
        margin-left:2px;
        margin-right:2px;
    }
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-right: auto;  
          margin-left: auto;  
    }
}

.search_pagination{
    padding:20px;
}
.pagination {
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
    font-size: 1.5em;
    display: flex;
    position: relative;
    user-select: none;
  }
  .pagination {
    display: -ms-flexbox;
    display: flex
;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
    align-content: center;
    justify-content: space-around;
}
  .pagination .nav-btn {
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    background: linear-gradient(45deg, #00aaed, #3ac8ff);
    display: inline-block;
    padding: 18px 24px;
    color: #fff;
    z-index: 2;
    cursor: pointer;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    transition: all 300ms ease;
  }
  .pagination .nav-btn:hover {
    background: linear-gradient(45deg, #07baff, #3ac8ff);
    text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  }
  .pagination .nav-btn.next {
    position: absolute;
    right: 0;
  }
  .pagination .nav-btn.prev::before {
    content: "";
  }
  .pagination .nav-btn.next::before {
    content: "";
  }
  .pagination .nav-pages {
    margin: 0;
    padding: 0;
    left: 0;
    transition: left 300ms ease;
    position: absolute;
    width: max-content;
  }
  .pagination .nav-pages li {
    list-style: none;
    display: inline-block;
    padding: 18px 10px;
    border-right: 1px solid #eee;
    color: rgba(0, 0, 0, 0.25);
    text-align: center;
    cursor: pointer;
  }
  .pagination .nav-pages li.active, .pagination .nav-pages li:hover {
    color: rgba(0, 0, 0, 0.9);
  }
   
  .fullscreen-div { 
    width: 100vw!important; 
    height: 100vh!important; 
    background-color: #f0f0f0; 
    position: fixed!important; 
    top: 0; left: 0; 
    z-index: 999999; 
    /* Initially hidden */ 
}
.toggle-button {
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 0;
  /* left: 50%; */
  right: 20px;
  font-size: 2em;
  opacity: 0.35;
}

 
.header-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr ;
}

.boxsimple{
  border: thin solid silver;
  padding: 20px;
  margin-bottom:10px;
}
.boxsimple >div{
  margin:10px;
}
.box1{
 
  font-size: 1.5em;
}
.flex-container { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  /* Distributes space evenly between items */ 
  gap: 10px; /* Adds space between flex items */ 



} 
.flex-container-centered { 
  display: flex; 
  justify-content: center; 
  /* Center horizontally */ 
  align-items: center; 
  /* Center vertically */ 
  gap: 10px; 
} 

.flex-item-10 { 
  flex: 1 1 auto; 
  /* Allows flex items to grow and shrink */ 
  padding: 10px; 
   
   
  box-sizing: border-box;  
} 

.flex-item-max-64 { 
  flex: 0 0 64px; 
  /* Fixed width of 64 pixels */ 
  max-width: 64px; 
  /* Ensure max width does not exceed 64 pixels */ 
}

.flex-item-max-128 { 
  flex: 0 0 128px; 
  /* Fixed width of 64 pixels */ 
  max-width: 128px; 
  /* Ensure max width does not exceed 64 pixels */ 
}
  /* Flex item styles with different max-widths */ 
  .flex-item { 
    flex: 1 1 auto; 
    /* Allows flex items to grow and shrink */ 
    padding: 20px; 
     
   /* border: 1px solid rgba(204, 204, 204, 0.158); */
    box-sizing: border-box; 
  }


 /* Fancy Quote Paragraph */
.fancyQuote {
  position: relative;
  font-style: italic;
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 1em 1em;
  font-size: 2em;
  line-height: 1.6;
  color: #555;
 /* quotes: "“" "”" "‘" "’";*/
}

.fancyQuote::before {
 /* content: open-quote;*/
  font-size: 3em;
  color: #ccc;
  position: absolute;
  left: 10px;
  top: -10px;
}

.fancyQuote::after {
/*  content: close-quote;*/
  font-size: 3em;
  color: #ccc;
  position: absolute;
  right: 10px;
  bottom: -10px;
}

/* Optional: Additional styling for more visual appeal */
.fancyQuote strong {
  font-weight: bold;
  color: #333;
}

.fancyQuote em {
  font-style: italic;
  color: #666;
}

@media (max-width: 600px) {
  .fancyQuote {
    font-size: 1em;
    padding: 0.4em 8px;
  }
}


  .main-content{
    overflow: hidden;
  }

  .main-content-grid{
    display:grid;
    grid-template-columns: 1fr minmax(260px, clamp(0px, 33%, 400px));
    height: 100vh; /* Optional: For full height */ gap: 10px; /* Optional: Gap between columns */
  }

 
   
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* Aspect ratio 16:9 */
            height: 0;
            overflow: hidden;
        }

        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
  
/*
    <div class="video-container">
        <video controls>
            <source src="path/to/your/video.mp4" type="video/mp4">
            <source src="path/to/your/video.mov" type="video/quicktime">
            Your browser does not support the video tag.
        </video>
 */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  min-height:400px;
}
.form-check {
  /* position: relative; */
  /* display: block; */
  /* padding-left: 1.25rem; */
  display: flex
;
  gap: 10px;
  /* padding: 10px; */
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: stretch;
  justify-content: center;
  align-items: baseline;
  margin-bottom:10px;
}

/* Text with solid fill and outline */
.outlined-text {
  color: white;
  font-family: Arial, sans-serif;
  -webkit-text-stroke: 1px #0000006e;
  /* text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black; */
}


@media (min-width: 576px) {
  .modal-dialog {
      max-width: 660px;
      margin: 1.75rem auto;
  }
}
 /* cool stuff */


 .button2:active,.button2:active:after,.button2:active:before {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.button2 {
	display: inline-block;
	position: relative;
	color: #888;
	text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
	text-decoration: none;
	text-align: center;
	padding: 8px 12px;
	 
	font-weight: 700;
	font-family: helvetica, arial, sans-serif;
	border-radius: 4px;
	border: 1px solid #bcbcbc;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);

	background-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
	background-image: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
	background-image: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
	background-image: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
	background-image: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
}

.button2:hover {
	 
}

.button2:active,.button:active:after,.button:active:before {
	 
}

.propbox2price{
  
    /* display: inline-block; */
    padding: 4px;
    background: #5883ff;
    color: white;
    position: relative;
    left: -10px;
    padding-right:10px;
}

/* collapse start */
 
 
        .collapsetitle {
            cursor: pointer;
            background-color: #f1f1f1;
            padding: 10px;
            display: flex;
            align-items: center;
        }
        .collapsetitle i {
            margin-left: auto;
        }
        .collapsible-content {
            display: none;
            padding: 10px;
            border-top: 1px solid #ccc;
        }
        .collapsible-content.open { display: block; }
        .collapsible-content.closed { display: none; }
/* end collapse */

.balloon {
  position: absolute;/*fixed;*/
  background-color: #ffcccb;
  color: #333;
  padding: 10px;
  border: 1px solid #33333361;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  white-space: nowrap;
}
.balloon::after {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-top-color: #ffcccb;
  border-bottom-color:#cb3434;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
}
.balloon.above::after {
  border-top-color: #333;
  border-bottom-color: #ffcccb;
  top: auto;
  bottom: 100%;
}

.scrollToTop {
  bottom: 60px;
  color: #0842a0;
  /* display: none; */
  font-size: 23px;
  height: 50px;
  line-height: 45px;
  position: fixed;
  right: 20px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 50px;
  z-index: 999;
  border: thin solid #0f47a3;
  background: #e1e1e3;
}
.floatLeft{ float:left;display:inline-block}
.floatRight{ float:right;display:inline-block}
.hand{
  cursor: pointer!important;
}
.bordersilver {     border: thin solid silver;}
.noborderleft {     border-left: 0 solid silver;}
.nobordertop {     border-top: 0 solid silver;}
.noborderright {     border-right: 0 solid silver;}
.noborderbottom {     border-bottom: 0 solid silver;}
 
.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.alignCenter{text-align:center;}
.alignRight{text-align:right;}
.alignLeft{text-align:left;}

.nopaddingtop{ padding-top:0px!important;}
.nopaddingbottom{ padding-bottom:0px!important;}
.nopaddingleft{ padding-left:0px!important;}
.nopaddingright{ padding-right:0px!important;}

.nomargintop{ margin-top:0px!important;}
.nomarginbottom{ margin-bottom:0px!important;}
.nomarginleft{ margin-left:0px!important;}
.nomarginright{ margin-right:0px!important;}
 
/* flex */
 
.grid{
  display: grid;
   
}
.grid-container{
  display: grid;
}
.gcontainer2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gcontainer3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gcontainer4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  
}
.gcontainer2-1x33percent{
  display: grid;
  grid-template-columns: 1fr 33%;
  gap: 20px;
} 
.gridPage{
  display: grid;
  grid-template-columns: 20% 1fr 20%;
  gap: 20px;
} 

.gridPage > div{
  padding:20px;
}
 .error{
  background:rgb(239, 232, 232);
 }

.gridItem {
  background-color: #ffffff;
  
  
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  align-content: stretch;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
}

/* Ensure all grid items have the same height */
.gridContainer {
  display: grid;
  align-items: stretch; /* Make sure all grid items are stretched to the same height */
  align-content: stretch;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
}

.gitem {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.formFlexContainer {
  display: flex;
  flex-direction: column; /* Stack the form fields vertically */
  gap: 20px; /* Add space between the form groups */
  flex-wrap: wrap;
    gap: 10px;
}
.formGroup {
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  display: flex;
  gap: 20px;
}

.formLabel {
  margin-bottom: 5px; /* Space between label and input */
  font-weight: bold; /* Optional: make label text bold */
  min-width:160px;
  text-align:right;

}

input,
textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1em;
}
 


.gap10{ gap:10px;}
.gap20{ gap:20px;}
.gap30{ gap:30px;}
.gap40{ gap:40px;}
.gap50{ gap:50px;}
.gap100{ gap:100px;}
.gap150{ gap:150px;}

.fcontainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

 

.fitem {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.flexItem {
  
   
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
 
.fitem2{
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  flex: 1 1 calc(50% - 10px); /* 2 columns for small screens */
}

.flexContainerRow {
  display: flex;
  flex-direction: column; /* Arrange items in rows */
  flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
  gap: 10px; /* Gap between items */
 
  padding: 10px; /* Optional: padding inside the container */
}

.flexItemRow {
  
  
  padding: 20px;
  
  
  flex: 1 1 calc(25% - 20px); /* Adjust the width of flex items, considering the gap */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.width100{ width:100%;}
.height100{height:100%;}

.fname{
    
  font-size: 2.6em;
 
 font-weight: bold;
 text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
 text-shadow: rgba(0, 0, 0, 0.85) 0px 0px 2px, rgba(0, 0, 0, 0.56) 1px 1px 2px;
 color: rgb(222, 222, 222);
 color: #e0e0e0;
  text-align:center;
 padding:10px
}

.fphone{
  font-size: 1.6em;
 
 text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
 text-shadow: rgba(0, 0, 0, 0.85) 0px 0px 2px, rgba(0, 0, 0, 0.56) 1px 1px 2px;
 color: rgb(222, 222, 222);
 color: #e0e0e0;
 display:inline-block 
}
.ffax{
   font-size: 1.6em;
 
 text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
 text-shadow: rgba(0, 0, 0, 0.85) 0px 0px 2px, rgba(0, 0, 0, 0.56) 1px 1px 2px;
 color: rgb(222, 222, 222);
 color: #e0e0e0;
 display:inline-block 
}

.inlineBlock{display:inline-block}
.borderTop{ border-top:thin solid black;}
.noborder{ border:thin solid rgba(255, 255, 255, 0)!important;}
.no-wrap { white-space: nowrap; }
 /* Padding */
 .padding4 { padding: 4px; }
 .padding8 { padding: 8px; }
.padding10 { padding: 10px; }
.padding20 { padding: 20px; }
.padding24 { padding: 24px; }
.padding30 { padding: 30px; }
.padding40 { padding: 40px; }
.padding50 { padding: 50px; }
.padding100 { padding: 100px; }
.paddingHorizontal10 { padding-left: 10px; padding-right: 10px; }
.paddingVertical10 { padding-top: 10px; padding-bottom: 10px; }

.paddingLeft10{ padding-left:10px}
.paddingLeft20{ padding-left:20px}
.paddingLeft30{ padding-left:30px}
.paddingLeft40{ padding-left:40px}
.paddingLeft60{ padding-left:60px}
.paddingLeft100{ padding-left:100px}

.paddingRight10{ padding-right:10px}
.paddingRight20{ padding-right:20px}
.paddingRight30{ padding-right:30px}
.paddingRight40{ padding-right:40px}
.paddingRight60{ padding-right:60px}
.paddingRight100{ padding-right:100px}

.paddingTop10{ padding-top:10px}
.paddingTop20{ padding-top:20px}
.paddingTop30{ padding-top:30px}
.paddingTop40{ padding-top:40px}
.paddingTop60{ padding-top:60px}

.marginTop1{ margin-top:1px }
/* Margin */
.margin6 { margin: 6px; }
.margin8 { margin: 8px; }
.margin10 { margin: 10px; }
.margin20 { margin: 20px; }
.margin30 { margin: 30px; }
.marginHorizontal10 { margin-left: 10px; margin-right: 10px; }
.marginVertical10 { margin-top: 10px; margin-bottom: 10px; }
.marginTop10{ margin-top:10px;}
.marginTop20{ margin-top:20px;}
/* Font Size */
.fontSize08{ font-size:0.8em; }
.fontSize1 { font-size: 1em; }
.fontSize1-2 { font-size: 1.2em; }
.fontSize1-3 { font-size: 1.3em; }
.fontSize1-4 { font-size: 1.4em; }
.fontSize1-5 { font-size: 1.5em; }
.fontSize1-6 { font-size: 1.6em; }
.fontSize1-8 { font-size: 1.8em; }
.fontSize2 { font-size: 2em; }
.fontSize3 { font-size: 3em; }
.fontSize4 { font-size: 4em; }
.fontSize5 { font-size: 5em; }
.fontSize10 { font-size: 10em; }
.fontSize15 { font-size: 15em; }
.fontSize20 { font-size: 20em; }

.colorWhiteSmoke{ color: whitesmoke!important; }

.lineHeight0-8{ line-height: 0.8em; }
.lineHeight1{ line-height: 1em; }
.lineHeight1-1{ line-height: 1.1em; }
.lineHeight1-2{ line-height: 1.2em; }
.lineHeight1-3{ line-height: 1.3em; }
.lineHeight1-4{ line-height: 1.4em; }
.lineHeight1-5{ line-height: 1.5em; }
.lineHeight2{ line-height: 2em; }
.lineHeight2-5{ line-height: 2.5em; }

.viewport-100 { max-height: 100vh;}
.viewport-90 { max-height: 90vh;}
.viewport-80 { max-height: 80vh;}
.viewport-70 { max-height: 70vh;}
.viewport-60 { max-height: 60vh;}
.viewport-50 { max-height: 50vh;}

/* Flexbox */
.flexContainer { display: flex; }
.flexRow { flex-direction: row; }
.flexColumn { flex-direction: column; }
.justifyCenter { justify-content: center; }
.alignCenter { align-items: center; }
.flexWrap { flex-wrap: wrap; }
.flexNoWrap { flex-wrap: nowrap; }

/* Grid */
.gridContainer { display: grid; }
.gridTwoCols { display: grid;grid-template-columns: 1fr 1fr; }
.gridThreeCols { display: grid;grid-template-columns: 1fr 1fr 1fr; }
.gridTwoColsB { display: grid;grid-template-columns: 1fr  minmax(0, 33%); }
.gridCenter{
  align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: stretch;
}
.gridGap10 { gap: 10px; }
.gridGap20 { gap: 20px; }
.gridAlignCenter { align-items: center; }
.gridJustifyCenter { justify-items: center; }


.minHeight100{min-height:100px;}
.minHeight200{min-height:200px;}
.minHeight300{min-height:300px;}
.minHeight400{min-height:400px;}

/* responsive slider stuff */


/* responsive media queries */
 
/* Responsive Media Queries */
@media (max-width: 1200px) {
  .fitem2 { flex: 1 1 calc(50% - 10px); }
   
}

@media (max-width: 1024px) {
  .gcontainer2{ grid-template-columns: repeat(1, 1fr);}
  .gcontainer3{ grid-template-columns: repeat(1, 1fr);}
  .gcontainer4{ grid-template-columns: repeat(2, 1fr);}
  .fitem2 { flex: 1 1 calc(50% - 10px); }

  
.gap10{ gap:5px;}
.gap20{ gap:10px;}
.gap30{ gap:15px;}
.gap40{ gap:20px;}
.gap50{ gap:25px;}
.gap100{ gap:50px;}
.gap150{ gap:60px;}

}

@media (max-width: 768px) {
 .gridPage{
  grid-template-columns: 1fr;
 }
  .flex-item {
    flex: 1 1 auto;
    padding: 5px;
    border: 1px solid rgba(204, 204, 204, 0.158);
    box-sizing: border-box;
}
  .displaylistings {
     margin-left: 0px;  
     margin-right: 0px;  
}

  .gcontainer2{ grid-template-columns: repeat(1, 1fr);}
  .gcontainer3{ grid-template-columns: repeat(1, 1fr);}
  .fitem2 { flex: 1 1 calc(100% - 10px); }
  .padding4 { padding: 2px; }
  .padding8 { padding: 2px; }
 .padding10 { padding: 5px; }
 .padding20 { padding: 10px; }
 .padding24 { padding: 12px; }
 .padding30 { padding: 15px; }
 .padding40 { padding: 20px; }
 .padding50 { padding: 25px; }
 .padding100 { padding: 50px; }
 .paddingHorizontal10 { padding-left: 5px; padding-right: 5px; }
 .paddingVertical10 { padding-top: 5px; padding-bottom: 5px; }
 
 .paddingLeft10{ padding-left:5px}
 .paddingLeft20{ padding-left:10px}
 .paddingLeft30{ padding-left:15px}
 .paddingLeft40{ padding-left:20px}
 .paddingLeft60{ padding-left:30px}
 .paddingLeft100{ padding-left:50px}
 
 .paddingRight10{ padding-right:5px}
 .paddingRight20{ padding-right:10px}
 .paddingRight30{ padding-right:15px}
 .paddingRight40{ padding-right:20px}
 .paddingRight60{ padding-right:30px}
 .paddingRight100{ padding-right:50px}
 
 .paddingTop10{ padding-top:5px}
 .paddingTop20{ padding-top:10px}
 .paddingTop30{ padding-top:15px}
 .paddingTop40{ padding-top:20px}
 .paddingTop60{ padding-top:30px}
 

 .margin6 { margin: 3px; }
.margin8 { margin: 4px; }
.margin10 { margin: 5px; }
.margin20 { margin: 10px; }
.margin30 { margin: 15px; }
.marginHorizontal10 { margin-left: 5px; margin-right: 5px; }
.marginVertical10 { margin-top: 5px; margin-bottom: 5px; }

/* Font Size */
.fontSize08{ font-size:0.6em; }
.fontSize1 { font-size: 8em; }
.fontSize1-2 { font-size: 1em; }
.fontSize1-4 { font-size: 1.2em; }
.fontSize1-5 { font-size: 1.2em; }
.fontSize2 { font-size: 1.4em; }
.fontSize3 { font-size: 2em; }
.fontSize4 { font-size: 3em; }
.fontSize5 { font-size: 4em; }
.fontSize10 { font-size: 8em; }
.fontSize15 { font-size: 12em; }
.fontSize20 { font-size: 12em; }
 

}

@media (max-width: 576px) {
  .fitem2 { flex: 1 1 calc(100% - 10px); }
  .padding4 { padding: 1px; }
 .padding8 { padding: 2px; }
.padding10 { padding: 3px; }
.padding20 { padding: 5px; }
.padding24 { padding: 6px; }
.padding30 { padding: 8px; }
.padding40 { padding: 10px; }
.padding50 { padding: 12px; }
.padding100 { padding: 25px; }
.paddingHorizontal10 { padding-left: 2px; padding-right: 2px; }
.paddingVertical10 { padding-top: 2px; padding-bottom: 2px; }

.paddingLeft10{ padding-left:2px}
.paddingLeft20{ padding-left:5px}
.paddingLeft30{ padding-left:8px}
.paddingLeft40{ padding-left:10px}
.paddingLeft60{ padding-left:15px}
.paddingLeft100{ padding-left:25px}

.paddingRight10{ padding-right:2px}
.paddingRight20{ padding-right:5px}
.paddingRight30{ padding-right:8px}
.paddingRight40{ padding-right:10px}
.paddingRight60{ padding-right:15px}
.paddingRight100{ padding-right:25px}

.paddingTop10{ padding-top:2px}
.paddingTop20{ padding-top:5px}
.paddingTop30{ padding-top:8px}
.paddingTop40{ padding-top:10px}
.paddingTop60{ padding-top:15px}

.gap10{ gap:2px;}
.gap20{ gap:5px;}
.gap30{ gap:8px;}
.gap40{ gap:10px;}
.gap50{ gap:12px;}
.gap100{ gap:25px;}
.gap150{ gap:30px;}
}

@media (max-width: 400px) {
  .paddingHorizontal10 { padding-left: 5px; padding-right: 5px; }
  .paddingVertical10 { padding-top: 5px; padding-bottom: 5px; }
  .paddingLeft10 { padding-left: 5px; }
  .paddingLeft20 { padding-left: 10px; }
  .paddingRight10 { padding-right: 5px; }
  .paddingRight20 { padding-right: 10px; }
}


/* end responsive media queries */
  
.sp-buttons {
  position: relative;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  background: whitesmoke!important;

}

.bk-c21-image1{
  background-image: url('img/c21/Seal-Wall-Signage-1024x731.jpg');
  background-position: center;
  background-size: cover;
}

.bk-c21-image2{
  background-image: url('img/c21/Home_2-1024x405.jpg');
  background-position: center;
  background-size: cover;
}

.bk-c21-image3{
  background-image: url('img/c21/Home_3-1024x405.jpg');
  background-position: center;
  background-size: cover;
}
  
.bk-c21-image4{
  background-image: url('img/c21/Home_4-1024x405.jpg');
  background-position: center;
  background-size: cover;
}

.bk-c21-image5{
  background-image: url('img/c21/Group-109.png');
  background-position: center;
  background-size: cover;
}
 

.myicon {
  position: absolute;
  display: inline-block;
  padding: 5px;
  background-color: #333;
  color: #fff;
  border-radius: 50%; /* Optional: make it circular */
  text-align: center;
}
.positionRelative{
  position:relative;
}
/* Positioning classes */
.topLeft {
  top: 10px;
  left: 10px;
  position:absolute;
}

.topMiddle {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  position:absolute;
}

.topRight {
  top: 10px;
  right: 10px;
  position:absolute;
}

.middleLeft {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  position:absolute;
}

.middleCenter {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position:absolute;
}

.middleRight {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  position:absolute;
}

.bottomLeft {
  bottom: 10px;
  left: 10px;
  position:absolute;
}

.bottomMiddle {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  position:absolute;
}

.bottomRight {
  bottom: 10px;
  right: 10px;
  position:absolute;
}

.topLeftRed{
  top: -4px;
  left: -4px;
  position:absolute;
  background:#b30707;;
  color:white;
  padding-left:4px;
  padding-right:4px;
  text-transform: uppercase;
}
.topRightGreen{
  top: -4px;
  right: -4px;
  position:absolute;
  background:darkgreen;
  color:white;
  padding-left:4px;
  padding-right:4px;
  text-transform: uppercase;
}
 .backgroundWhite{ background:white;}
 .backgroundWhiteSmoke{ background:whitesmoke;}
/* Fancy Highlight with Indentation */
.fancyHighlight {
  display: inline-block;
  position: relative;
  font-size: 1.5em; /* Increase text size */
  font-weight: bold; /* Make text bold */
  color: #000; /* Text color */
  background-color: #f9f9f9; /* Background color to match the paragraph */
  padding: 0.5em 1em; /* Add padding for indenting */
  margin: 1em 0; /* Add margin to ensure spacing between lines */
  text-indent: 20px; /* Indentation */
}

.fancyHighlight::before,
.fancyHighlight::after {
  content: "";
  display: block;
  height: 4px; /* Height of the bar */
  background-color: #333; /* Color of the bar */
  width: 100%;
  position: absolute;
  left: 0;
}

.fancyHighlight::before {
  top: 0; /* Position above the text */
}

.fancyHighlight::after {
  bottom: 0; /* Position below the text */
}

/* Optional: Additional styling for more visual appeal */
.fancyHighlight strong {
  font-weight: bold;
  color: #333;
}

.fancyHighlight em {
  font-style: italic;
  color: #666;
}

@media (max-width: 600px) {
  .fancyHighlight {
    font-size: 1.2em;
    padding: 0.5em 0.8em;
    text-indent: 10px; /* Adjust indentation for smaller screens */
  }

  .fancyHighlight::before,
  .fancyHighlight::after {
    font-size: 2.5em;
    top: -0.3em;
    bottom: -0.3em;
  }
}


/* Responsive Layout */
@media (max-width: 1200px) {
  .gcontainer {
      grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
  }
}

@media (max-width: 768px) {
  .gcontainer {
      grid-template-columns: repeat(1, 1fr); /* 2 columns for small screens */
  }
  .paddingLeft60 { padding-left: 0px;}
  .paddingLeft100 { padding-left: 4px;}
  .paddingRight100 { padding-right: 4px;}

  .sp-buttons{ 
    display: none;
  }
  
}

@media (max-width: 480px) {
  .gcontainer {
      grid-template-columns: 1fr; /* 1 column for extra small screens */
  }
} 

/* Responsive Layout */
@media (max-width: 1200px) {
  .fitem {
    flex: 1 1 calc(50% - 10px); /* 2 columns for small screens */
  }
}

@media (max-width: 960px) {
  .fitem {
    flex: 1 1 100%; /* 1 column for extra small screens */
  }
  .boxsimple {
    border: thin solid silver;
    padding: 10px;
    margin: 10px;
}
}
/*
@media (max-width: 480px) {
  .fitem {
      flex: 1 1 100%;  
  }
}
*/