* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(255, 255, 255);
    font-family: "open sans", sans-serif;
}

:root {
    --Xsmall: 14px;
    --normal: 16px;
    --medium: 18px;
    --large: 20px;
    --Xlarge: 24px;
    --primarytextClr: #59b5d9;
    --borderClr: #1d98a5;
    --text-white: #fff;
    --text-dark: #000;
    --text-light: #777;
    --text-grey:#6d6d6d;
    --blueBackground: #59b5d9;
    --lightgreyBackground: #ebebeb;
}

.font-size-12{font-size:12px;}
.font-size-14{font-size:14px;}

.color-white{color: var(--text-white);}
.bg-blue {background-color: var(--blueBackground);}
.bg-lightgrey {background-color: var(--lightgreyBackground);}
.clr-grey{color: var(--text-grey);}

a {color: #337ab7;}
p {
    color: var(--text-dark);
    margin-block: 8px;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 2000;
    border-bottom: 1px solid var(--blueBackground);
}

.navbar-brand {
    width: 100px;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
}

.navbar-nav li a {
    color: var(--text-light);
    font-size: var(--normal);
    font-weight: 500;
}

.navbar .navbar-nav .login-btn {
    color: var(--text-white);
    background-color: var(--blueBackground);
    padding: 10px 14px;
    border-radius: 5px;
    font-size: var(--medium);
}

.navbar .navMenuRight li a {
    color: var(--text-dark);
    font-size: var(--medium);
}

.navbar-collapse {
    flex-grow: 0;
}

.bannerSlider .carousel-indicators button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--blueBackground);
    background-color: transparent;
}

.bannerSlider .carousel-indicators button.active {
    border: none;
    margin-block: auto;
    width: 18px;
    height: 18px;
    background-color: var(--blueBackground);
}
.carousel-indicators {

    margin-bottom: 3rem;
}

.carousel-inner .carousel-item img {
    height: calc(100vh - 79.39px);
    object-fit: cover;
    object-position: top;
}

.bannerSlider .carousel-caption {
    max-width: 40rem;
    background: rgb(89 181 217 / 60%);
    padding: 10px;
    z-index: 1000;
    margin-bottom: 140px;
    margin-inline: auto;
}

.bannerSlider .carousel-caption h1 {
    color: var(--text-white);
    font-weight: 800;
}

.anchor-click {
    z-index: 1000;
}

.HeadingSecondary {
    color: var(--primarytextClr);
    font-weight: 600;
    font-size: calc(28px + 0.5vw);
}

.paraDescription {
    color: var(--text-dark);
    font-weight: 500;
    font-size: var(--normal);
}

.BansiProperties .SecHeading {
    /* max-width: 80%; */
    margin-inline: auto;
}

.BansiProperties .iconElement {
    margin-bottom: 18px;
}

.BansiProperties .propertieHeading {
    font-size: var(--medium);
    color: var(--text-dark);
    margin-bottom: 14px;
}

.porfolio-box {
    margin-bottom: 18px;
}

.porfolio-box p {
    margin-bottom: 10px;
    height: auto;
    font-size: var(--normal);
    font-weight: bold;
    color: var(--text-dark);
}

.porfolio-box a:last-of-type {
    display: inline-block;
    margin-top: auto;
    text-transform: uppercase;
    color: var(--text-dark);
    font-weight: bold;
    border: solid 2px var(--primarytextClr);
    padding: 10px;
    font-size: var(--Xsmall);
    transition: all 0.2s ease;
    text-decoration: none;
}

.porfolio-box a:first-of-type {
    border: solid 1px #d6d6d6;
    display: block;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    /* height: 217px; */
    width: 100%;
    margin-bottom: 10px;
}

.porfolio-box .p-frame .press-release-date {
    text-align: left;
    font-weight: bold;
    color: var(--text-light);
}

.p-frame {
    /* min-height: 110px; */
    margin-bottom: 15px;
}
.propertiesDetails{
    border: 1px solid var(--blueBackground);
    padding: 16px 20px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.Propertie-Section .propertyName {
    color: var(--primarytextClr);
    font-size: var(--large);
}
.Propertie-Section .lease-property-tag{
    background-color: var(--blueBackground);
}
.Propertie-Section p{
    font-size: var(--Xsmall);
}
.Propertie-Section .paraDescription{
    font-size: var(--normal);
}

.footer {
    background-color: #d4d1d1;
    border-top: 1px solid var(--blueBackground);
}

.footer .rightLogoSec a {
    font-size: var(--medium);
    color: var(--primarytextClr);
}

.footer .rightLogoSec p {
    font-size: var(--medium);
}



@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

.hover-opacity-100:hover {
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}

.website-video {
    height: calc(100vh - 79.39px);
    max-width: 100%;
    padding: 0;
}

.vedioContainer {
    height: 100%;
}

#videoBanner {
    object-fit: cover;
}

.breadcrumb-item+.breadcrumb-item::before {margin-top: 8px;}

/* Mute Button Toggle Starts */

@media (max-width: 1200px) {
    .website-video {
        height: auto;
        overflow: hidden;
    }
}
@media (max-width: 1200px) and (orientation: landscape) {
    .website-video {
        height: calc(100vh - 100px);
        width: 100%;
    }
}
.anchor-click svg path:nth-child(2) {
    fill: #59b5d9;
}
/* mute/unmute toggle */
.audio-control {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
    transition: background 300ms ease-in-out;
}
.audio-control:hover {
    background: rgba(0, 0, 0, 0.8);
}
.mute::before {
    content: '';
    width: 7px;
    height: 50px;
    background-color: #59b5d9;
    position: absolute;
    top: 12px;
    left: 8px;
    z-index: 999;
    transform: rotate(-45deg);
    transform-origin: top;
    border-radius: 6px;
    outline: 0;
    cursor: pointer;
    transition: height 300ms ease;
}
.mute.active::before {
    content: '';
    height: 0px;
}
.mute svg {
    width: 50px;
}
@media (max-width: 767px) {
    .audio-control {
        width: 3rem;
        height: 3rem;
    }

    .mute svg {
        width: 40px;
    }
    .mute::before {
        content: '';
        top: 12px;
        left: 8px;
        width: 6px;
        height: 34px;
    }
}

/* Mute Button Toggle Endss */