#frmhomesearch > div.input-group.input-group-lg > div.input-group-append.search-button-wrapper > button{
background-color: #CB252C;
font-weight: bold;
}

body > div.action_footer > a{
display: none;}

#navbarSupportedContent > div.main-menu-content > div.main-menu-nav.d-lg-flex > ul{
margin-top: 0.5rem; 
}

#navbarSupportedContent > div.main-menu-content > div.main-menu-nav.d-lg-flex > a{
background-color: #CB252C;
}

#hometypesearch > a.active{
    background: #CB252C !important;
    color: #fff;
  	font-weight: bold;
}
#Hero{
background-image: url("https://afflatusrealty.com/storage/banner/services-img/artboard-3.png");    background-size: cover;    background-repeat: no-repeat;}

/*======================================
//--//-->  FADE IN TRANSITION
======================================*/
.fadeIn {
	animation: fadeIn 5s;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*======================================
//--//-->  FADE IN TRANSITION END
======================================*/

.card-box-a,
.card-box-b,
.card-box-d {
  position: relative;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-box-a .img-a,
.card-box-a .img-b,
.card-box-b .img-a,
.card-box-b .img-b {
  transition: .8s all ease-in-out;
}

.card-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.card-shadow {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-shadow:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 27%, rgba(0, 0, 0, 0.65) 90%);
}

/*======================================
//--//-->   PROPERTY - CARD-A
======================================*/

.card-overlay-a-content {
  transition: all .5s ease-in;
  position: absolute;
  width: 100%;
  bottom: 0px;
  z-index: 2;
}

.card-header-a {
  padding: 0 1rem;
}

.card-header-a .card-title-a {
  color: #ffffff;
  margin-bottom: 0;
  padding-bottom: .7rem;
}

.card-header-a .card-title-a a {
  color: #ffffff;
  text-decoration: none;
}

.card-body-a {
  z-index: 2;
  transition: all .5s ease-in;
  padding: 0rem 1rem 2rem 1rem;
}

.card-body-a .price-box {
  padding-bottom: .5rem;
}

.price-a {
  color: #ffffff;
  padding: .6rem .8rem;
  border: 2px solid #2eca6a;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.030em;
}

.card-footer-a {
  width: 100%;
  position: absolute;
  z-index: 2;
  background-color: #2eca6a;
}

.card-info {
  list-style: none;
  margin-bottom: 0;
  padding: .5rem 0;
}

.card-info .card-info-title {
  font-size: 1rem;
  color: #313131;
}

.card-info li span {
  color: #ffffff;
  font-size: .9rem;
}

/*------/ Property Grid /-----*/

.property-grid .grid-option {
  text-align: right;
  margin-bottom: 2rem;
}

.property-grid .grid-option .custom-select {
  border-radius: 0;
  width: 200px;
  border-color: #313131;
}

.property-grid .grid-option .custom-select:hover,
.property-grid .grid-option .custom-select:active,
.property-grid .grid-option .custom-select:focus {
  border-color: #313131;
}

.property-grid .grid-option .custom-select option {
  border-color: #313131;
}

/*------/ Property Single /-----*/

.gallery-property {
  margin-bottom: 3rem;
}

.property-price {
  margin: 0 auto;
}

.property-price .card-header-c {
  padding: 0;
}

.summary-list {
  padding-right: 1rem;
  color: #000000;
}

.summary-list .list {
  padding: 0;
  line-height: 2;
}

.summary-list .list span {
  color: #555555;
}

.property-agent .title-agent {
  font-weight: 600;
}

.property-agent ul {
  line-height: 2;
  color: #000000;
}

.property-agent .socials-a {
  text-align: center;
}

/*======================================
//--//-->   NEWS - CARD-B
======================================*/

.card-header-b {
  padding: 1rem;
  color: #ffffff;
  position: absolute;
  bottom: 20px;
  z-index: 2;
}

.card-header-b .category-b {
  font-size: .9rem;
  background-color: #2eca6a;
  padding: .3rem .7rem;
  color: #313131;
  letter-spacing: 0.030em;
  border-radius: 50px;
  text-decoration: none;
}

.card-header-b .title-2 {
  margin-bottom: 0;
  padding: .6rem 0;
  font-size: 1.5rem;
}

.card-header-b .title-2 a {
  color: #ffffff;
  text-decoration: none;
}

.card-header-b .date-b {
  color: #d8d8d8;
  font-size: 1rem;
}

/*------/ News Single /------*/

.post-information {
  padding: 3rem 0;
}

.post-content {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.6;
}

.post-content .post-intro {
  font-size: 1.7rem;
  font-weight: 300;
  margin-bottom: 4rem;
  line-height: 1.6;
  color: #000000;
  font-weight: 400;
}

.post-content p {
  margin-bottom: 1.7rem;
}

.post-content .blockquote {
  padding: 1rem 3rem 1.7rem 3rem;
  border-left: 3px solid #2eca6a;
  color: #000000;
}

.post-content .blockquote footer {
  text-align: left;
  padding: 0;
}

.post-footer {
  padding: 3rem 0 4rem;
}

.post-share .socials {
  display: inline-block;
}

.post-share .socials li {
  margin-left: .6rem;
}

/*------/ Comments /------*/

.box-comments .list-comments li {
  padding-bottom: 3.5rem;
}

.box-comments .list-comments .comment-avatar {
  display: table-cell;
  vertical-align: top;
}

.box-comments .list-comments .comment-avatar img {
  width: 80px;
  height: 80px;
}

.box-comments .list-comments .comment-author {
  font-size: 1.3rem;
}

.box-comments .list-comments .comment-details {
  display: table-cell;
  vertical-align: top;
  padding-left: 25px;
}

.box-comments .list-comments .comment-description {
  padding: .8rem 0 .5rem 0;
}

.box-comments .list-comments a {
  color: #000000;
}

.box-comments .list-comments span {
  display: block;
  color: #2B2A2A;
  font-style: italic;
}

.box-comments .comment-children {
  margin-left: 40px;
}



#navbarSupportedContent > div.main-menu-content > div.main-menu-nav.d-lg-flex > ul > li > a {
color: white;
}

#ismain-homes > div > div.About {
padding: 90px ;
}


#ismain-homes > div > div.About > div {
display: flex;}

#ismain-homes > div > div.About > div > div.second
{
padding: 5rem;
}

#ismain-homes > div > div.About > div > div.first
{
padding: 5rem;
}

#ismain-homes > div > div.home_banner
{
height: 70vh;
background-color: rgba(0,0,0,1);
}

#contact > div > div:nth-child(2) > form > div > div.form-actions > button{
background-color:#CB252C;
}


#contact > div > div:nth-child(2) > form {
background-color: #273038;
}

#ajax-filters-form > div.search-box > div.search-box-content > div.search-box-items > div > div.col-lg-2.col-xl-1.col-md-2.px-1.button-search-wrapper > div

{
background-color:#CB252C;
}

#frmhomesearch
{
transition: 1s ease-in;
}

#ismain-homes > div > div.home_banner

{
background-image: none !important;
background-color: #f4f5f9;  
}

#properties-map
{
display: none;
}

body > footer > div > div:nth-child(1) > div.col-sm-9.padtop10 > div > div:nth-child(3) > div > ul > li:nth-child(1) > a > span {
display: none;
}

#viewport > div {
top: -50px;
}

/*Home*/
#hero{
height: 50vh;
  background: #000000;
}

.text-center{
color: #FFFFFF;
}

/*CODES MADE IN VS CODE*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	scroll-behavior: smooth;
}

html {
	font-size: 62.5%;
	height: 100%;
}

body {
	color: #2b2b2b;
	font-family: "Poppins", sans-serif;
	font-size: 1.6rem;
	overflow-x: hidden;
	line-height: 1.4;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

article,
aside,
footer,
header,
nav,
section,
time {
	display: block;
}

a {
	text-decoration: none;
}

a:hover {
	color: inherit;
}
img {
	max-width: 100%;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}

body {
	color: #2b2b2b;
	font-family: "Poppins", sans-serif;
	font-size: 1.6rem;
	line-height: 1.4;
}

/* container */
.container {
	max-width: 114rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 768px) {
	.container {
		width: 100%;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}

#hero {
	height: 90vh;
	background-image: url(https://images.unsplash.com/photo-1593696140826-c58b021acf8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	@media only screen and (max-width: 480px) {
		height: auto;
		margin: 2rem 0;
	}
}

#hero .container {
	width: 100%;
	display: flex;
	padding-top: 10rem;
  
  @media only screen and (max-width: 480px) {
		height: auto;
			padding: 10rem 0;
	}
}

#hero .wrapper {
	margin: 0 auto;
	display: flex;
	gap: 30px;
	align-items: center;
  	
	justify-content: space-between center;

	@media only screen and (max-width: 480px) {
		display: block;
		padding: 0 2rem;
	}
}

#hero .wrapper h1 {
	font-size: 50px;
	font-weight: 700;
	text-shadow: 2px 2px rgba(212, 212, 212, 0.544);
	margin-bottom: 30px;
	color: rgba(255, 255, 255);
}

#hero .first-half {
  margin-left: 3rem;
	padding: 2rem;
	width: 45%;
  display: flex;
  align-items: center;
  height:60vh;
	position: relative;
	background-repeat: repeat;
	border: 1px solid hsla(0, 0%, 59%, 0.16);
	border-radius: 6px;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
  
  @media only screen and (max-width: 480px) {
		height:auto;
    width: 100%;
    margin-left: 0;
	}
}
#hero .first-half ul li {
	list-style-type: none;
	
}

#hero .first-half ul {
	display: flex;
  align-items: center;
  margin-bottom: 2rem;
  padding: 2rem 4rem;
  width: 60%;
	background: #cb252c;
	border-radius: 5px;
  justify-content: space-between;
	&:hover {
		background: #2b2b2b;
       width: 65%;
	}
}
#hero .first-half ul li a {
	color: #ffffff;
}

#hero > div > div > div.first-half > div > ul > i{
	color: #ffffff;
  font-size: 15px;
}


#About {
	margin-top: 10rem;
  
  
  @media only screen and (max-width: 480px) {
		margin-bottom: 31rem;
	}
}
}

#About .about-wrapper {
	margin: 0 auto;
	align-items: center;
	text-align: center;
  	display: block;
}

#About h1 {
	font-size: 35px;
	font-weight: 700;
}

#About h3 {
	font-size: 25px;
	margin-bottom: 2rem;
	font-weight: 700;
}

#About .About-Us {
	margin: 0 auto;
	width: 50%;
  text-align: center;
}

#About .sub-title {
	margin-top: 2rem;
	font-size: 20px;
	width: 100%;
}

#About p {
	font-size: 15px;
	margin-bottom: 2rem;
}

#About .content-grid {
	display: flex;
	margin-top: 4rem;
	padding: 4rem 10rem;
	align-items: center;
	justify-content: space-between;

	@media only screen and (max-width: 480px) {
		display: block;
		gap: 20px;
		padding: 4rem 3rem;
	}
}

#About .content {
	width: 40%;
  text-align: center;

	@media only screen and (max-width: 480px) {
		align-items: center;
		align-self: start;
		width: 100%;
		margin-bottom: 10rem;
	}
}
#About .content p {
	@media only screen and (max-width: 480px) {
		font-size: 20px;
	}
}
#About .content {
	width: 40%;

	@media only screen and (max-width: 480px) {
		align-items: center;
		align-self: start;
		width: 100%;
		margin-bottom: 10rem;
	}
}

#About .Mission-Vission {
	padding: 6rem 2rem;
   @media only screen and (max-width: 480px) {
		padding: 0 2rem;
	}
}

#Services {
	padding: 4rem 2rem 4rem 2rem;
  height: 180vh;
  
  @media only screen and (max-width: 480px) {
		height: auto;
    padding: 2rem 2rem 4rem 2rem;
    
	}
}

#Services .wrapper {
	align-self: center;
	width: 100%;
	align-items: center;
	text-align: center;
  display: block;
}

#Services .wrapper .content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 50px;
	grid-row-gap: 50px;
	margin-top: 4rem;
	padding: 0 4rem 0 4rem;

	@media only screen and (max-width: 480px) {
		font-size: 20px;
		grid-template-columns: 1fr;
		padding: 0 1.5rem 0 1.5rem;
	}
}
#Services .wrapper h1 {
	font-size: 35px;
	font-weight: 700;

	@media only screen and (max-width: 480px) {
		font-size: 30px;
	}
}

#Services > div > div > h2{
  font-weight: 300;}

#Services .wrapper .content .card {
	background: rgb(39, 48, 56);
	color: #ffff;
	border-radius: 28px;
	padding: 2.5rem 2rem;
	text-align: left;

	@media only screen and (max-width: 480px) {
		text-align: center;
	}
}

#Services .img-wrapper {
	width: 100%;
	margin-bottom: 4rem;
}

#Services img {
	width: 100%;
	height: 20rem;
	border-radius: 10px;
	object-fit: cover;
}

#Services .wrapper .content .card h3 {
	font-size: 25px;
	margin-bottom: 2rem;
  color: #FFFFFF;
}

#Services .wrapper .content .card p {
	font-size: 15px;
	margin-bottom: 2rem;

	@media only screen and (max-width: 480px) {
		font-size: 20px;
		margin-bottom: 4rem;
	}
}

#Services .wrapper .content .card a {
	background: rgb(39, 48, 56);
	color: #ffff;
	width: 100%;
	font-size: 10px;
	border: 1px solid gray;
	padding: 0.7rem 2rem 0.7rem 2rem;
	border-radius: 20px;
	&:hover {
		border: 1px solid #ffff;
	}

	@media only screen and (max-width: 480px) {
		font-size: 15px;
		padding: 0.7rem 4rem 0.7rem 4rem;
	}
}


#ismain-homes > div > section:nth-child(5){
  @media only screen and (max-width: 480px) {
		padding-top: 6rem;
	}
}
}

#CTA {
	height: 80vh;
  @media only screen and (max-width: 480px) {
		height: auto;
	}
}

#CTA .CTA-wrapper {
	margin: 0 auto;
	text-align: center;
  width: 45%;
  
  @media only screen and (max-width: 480px) {
		width: 80%;
	}
}

#CTA .container{
  padding-top: 6rem;
display: flex;
  align-items: top;
  justify-content: space-between;
  
  @media only screen and (max-width: 480px) {
		display: block;
    align-items: center;
	}
}

#CTA .first_half{
width: 40%;
  @media only screen and (max-width: 480px) {
		width: 80%;
    margin: 0 auto;
	}
}

#CTA h1 {
	font-size: 40px;
   @media only screen and (max-width: 480px) {
		font-size: 20px;
	}
}

#CTA ul li a {
	font-size: 40px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	background: #cb252c;
	padding: 10px 20px 10px 20px;
	border: 1px solid #2b2b2b;
	border-radius: 10px;
	&:hover {
		background-color: #2b2b2b;
	}
  
   @media only screen and (max-width: 480px) {
		font-size: 20px;
	}
}

#CTA ul li {
	list-style-type: none;
}
#CTA ul {
	margin-top: 40px;
}

#CTA p {
  text-align:justify;
	margin-bottom: 20px;
}

#services {
	height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
}

#services .video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#services video {
	width: 100%;
	object-fit: cover;
      height: 100vh;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.6);
}

#services .container {
	z-index: 1;
}
#services .wrapper {
	text-align: center;
	font-family: inherit;
}

#services .wrapper .afflatus_logo {
	width: 100px;
	display: flex;
	align-items: center;
	margin: 0 auto;
	margin-bottom: 2rem;
}

#services .wrapper .afflatus_logo img {
	width: 100%;
  object-fit: cover;
}

#services .wrapper .services-title {
	font-size: 40px;
	color: white;
}

#services .wrapper .services-paragraph {
	font-size: 15px;
	margin: 0 auto;
	text-align: center justify;
	width: 50%;
	color: white;
  
   @media only screen and (max-width: 480px) {
		width: 80%;
     text-align: justify;
	}
}

#services .wrapper a {
	color: white;
	text-decoration: none;
	border: 1px solid white;
	padding: 1rem 2rem;
	font-size: 21px;
}

#services .wrapper .btn {
	margin-top: 4rem;
}

#services .bank-logo {
  margin-top: 6rem;
	display: flex;
  align-items: center;
}

#services .bank-logo .img-container {
	width: 20%;
  height: 100px;
  margin: 1rem;
}
#services .bank-logo .img-container img{
	width: 100%;
}


#services2 .wrapper {
	display: flex;
	align-items: center;
	gap: 10%;
	padding: 3rem 0;
  
  @media only screen and (max-width: 480px) {
		display: block;
	}
  
  
}

#services2 .wrapper .first-half {
	width: 45%;
  @media only screen and (max-width: 480px) {
		width: 100%;
	}
}

#services2 .wrapper .first-half .subheading {
	font-size: 20px;
  margin-bottom: 2rem;
  
  @media only screen and (max-width: 480px) {
		width: 100%;
    text-align: justify;
	}
}

#services2 .wrapper .second-half {
	width: 45%;
  text-align: left;
  
  @media only screen and (max-width: 480px) {
		width: 100%;
    margin-top: 2rem;
	}
}

#services2 .wrapper .second-half img {
	width: 100%;
}



#services2 .wrapper .btn {
	margin-top: 2rem;
    @media only screen and (max-width: 480px) {
		display: block;
	}
}

#services2 .wrapper a {
	text-decoration: none;
	color: white;
	background-color: #cb252c;
	border: 1px solid black;
	padding: 1rem 2rem;
	font-size: 16px;
}

/* Style the tab */
.tab {
	overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
}

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

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

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 12px;

	border-top: none;
}


#Exclusive{
	padding-top: 10rem;
  @media only screen and (max-width: 480px) {
		display: none;
	}
  
}
#Exclusive .content-wrapper {
	height: 70vh;
	display: flex;
	align-items: center;
	padding: 0 2rem;
}

#Exclusive h1{
	font-size: 35px;
}

#Exclusive .items {
	width: 100%;
	box-shadow: 0px 5px 10px #888888;
	border-radius: 15px;
	padding: 2rem;
}

#Exclusive .image-container {
	width: 100%;
}

#Exclusive .image-container img {
	width: 100%;
	height: 40vh;
	object-fit: fill;
  margin-bottom: 2rem;
}

#Exclusive h3 {
	font-weight: 700;
  font-size: 20px;
  margin-bottom: 2rem;
}

#Exclusive p{
	font-size: 13px;
}

.content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	gap: 50px;
}

.Click {
	text-decoration: none;
	color: #000000;
}

/* 1) Make the menu items vertically centered */
#navbarSupportedContent > div.main-menu-content > div.main-menu-nav.d-lg-flex > ul{
  display: flex;
  align-items: center;
}

/* 2) Ensure the 6th item (Login) is also centered */
#navbarSupportedContent > div.main-menu-content > div.main-menu-nav.d-lg-flex > ul > li:nth-of-type(6){
  display: flex;
  align-items: center;
}

/* 3) Style the Login "button" */
#navbarSupportedContent > div.main-menu-content > div.main-menu-nav.d-lg-flex > ul > li:nth-of-type(6) > a{
  background-color: #ca2128;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;   /* inside spacing */
  margin: 0 8px;        /* ONLY left/right spacing (keeps vertical centering) */

  border-radius: 10px;  /* rounded corners */
  font-weight: 700;     /* bold */
  line-height: 1;       /* prevents baseline/line-height pushing it down */
  text-decoration: none;
}

@media (max-width: 991.98px){

  /* make the Login item take full width in the mobile menu */
  #navbarSupportedContent > div.main-menu-content > div.main-menu-nav.d-lg-flex > ul > li:nth-of-type(6){
    width: 100%;
  }

  /* center the text inside the Login button */
  #navbarSupportedContent > div.main-menu-content > div.main-menu-nav.d-lg-flex > ul > li:nth-of-type(6) > a{
    width: 100%;
    justify-content: center;  /* for inline-flex */
    text-align: center;       /* for safety if display changes */
    margin: 8px 0;            /* vertical spacing on mobile */
  }
}