/* Name: Webyestate real estate theme Written by: Webyestate Theme Version: 1.1.0 */
/* This file contains the styling for the actual template, this is the file you need to edit to change the look of the template. This files table contents are outlined below>>>>> */
/*------------------------------------------------------------------
[Table of contents]
    *. Preloader / .preloader
    *. Main Header / .header
    *. Navigation bar / .navbar
    *. Hero Section / .hero
    *- Scroll down button / .scroll-button
    *. About us /  .about
    *. popup video in about us secion / .popup-video-area
    *. Video parralex / .parallax-section
    *. Featured Properties / .listing
    *. Amenities / .amenities
    *. Gallery / .gallery
    *. hover effect of gallery / .hovereffect
    *. Floorplan / .floorplan
    *. Payment detail / .payment
    *. Mortgage calculator / .calculator
    *. Location / .location
    *. Nearby Location / .nearby
    *. Request CTA / .cta
    *. CTA parralex / .cta-parralex
    *. FAQ /.faq
    *. Other Project / .project
    *. Footer / footer
    *. Scroll Button / #scrollToTopBtn

    ------------------------------*/

/** GLOBAL CLASSES **/
 @font-face{
     font-family:"Helvetica";
}
/** WEBSITE COLOR **/
 :root {
    /*for theme1 colors these variables are used*/
     --color-default: #0D1820;
     --color-primary: #E0AD3A;
     --color-secondary: #F4F4F4;
    /*for theme2 colors these variables are used*/
     --color-primary2: #00072D;
     --color-secondary2: #E0AD3A;
     --color-bg2: #F5F5F5;
     --color-white: #fff;
}
/* Smooth scroll behavior */
 :root {
     scroll-behavior: smooth;
}
/*-------------------------------------------------------------- # General --------------------------------------------------------------*/
 body {
     font-family:"Helvetica";
     color: var(--color-default);
     overflow-x: hidden;
}
 a {
     color: var(--color-primary);
     text-decoration: none;
}
 a:hover {
     color: #ffc732;
     text-decoration: none;
}
 input:focus{
    box-shadow:none !important;
    border:1px solid var(--color-primary) !important;
}
 h1, h2, h3, h4, h5, h6 {
     font-family:"Helvetica";
}
 p{
    font-size: 18px
}
 .text-primary{
    color: var(--color-primary) !important;
}
 .btn-primary{
    color:var(--color-primary2);
    background:var(--color-primary) !important;
    font-size: 18px;
    padding: 12px;
    border-radius: 4px;
    border: none;
}
 .btn-primary:hover{
    color:#fff;
}
 section{
     padding: 50px 0px ;
     overflow: hidden;
}
 .text-justify{
    text-align: justify
}
 .bg-secondary{
    background:var(--color-secondary) !important;
}
 .bg-secondary2{
    background:var(--color-bg2) !important;
}

 .tab-container{
    overflow-x: auto;
}
 .btn-primary2{
    color: var(--color-secondary2)!important;
    padding: 12px !important;
    border-radius:100px !important;
    border: 1px solid var(--color-secondary2)!important;
}
 .btn-primary2:hover{
    color:white !important;
     background: var(--color-secondary2)!important;
}
 
 .swiper-pagination-bullet .swiper-pagination-bullet-active{
    background:var(--color-primary) !important;
}
 .swiper-pagination-bullet-active{
    background:var(--color-primary) !important;
}
/*-------------------------------------------------------------- # Preloader --------------------------------------------------------------*/
 .preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
}
 .loader-container {
     position: relative;
}
 .home-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 9999;
}
 .loader {
     width: 80px;
     height: 80px;
     border: 6px solid #fff;
     border-color: var(--color-primary) transparent var(--color-primary) transparent;
     border-radius: 50%;
     animation: spin 1s linear infinite;
}
 @keyframes spin {
     to {
         transform: rotate(360deg);
    }
}
/*-------------------------------------------------------------- # Disable aos animation delay on mobile devices --------------------------------------------------------------*/
 @media screen and (max-width: 768px) {
     [data-aos-delay] {
         transition-delay: 0 !important;
    }
     .preloader{
        display: none
    }
     .d-sm-none{
        display: none
    }
}
/*-------------------------------------------------------------- # Header --------------------------------------------------------------*/
 .header {
     z-index: 997;
     position: absolute;
     background: white;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     padding: 20px 0;
     top: 0;
     left: 0;
     right: 0;
}
 .header .logo img {
     max-height: 60px;
     margin-right: 6px;
}
 .header .logo h1 {
     font-size: 24px;
     font-weight: 700;
     color: var(--color-primary) !important;
     margin-bottom: 0;
}
/*-=--------------------------------------------------------------------2nd Theme header----------------------------------*/
 .header2 .navbar .active{
    color: var(--color-secondary2) !important
}
 .header2 .navbar ul li a{
    color: var(--color-white) !important
}
 .header2{
    z-index: 997;
     position: absolute;
     background: transparent;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     padding: 20px 0;
     top: 0;
     left: 0;
     right: 0;
}
 .header2 .navbar>ul>li>a:before {
     content: "";
     position: absolute;
     width: 100%;
     height: 2px;
     bottom: -6px;
     left: 0;
     background-color: var(--color-secondary2);
     transition: all 0.3s ease-in-out 0s;
}
 .header2 .logo h3{
    color: var(--color-white) !important 
}
 .header2 .mobile-nav-show{
    color:var(--color-white)
}
 .header2 .navbar>ul>li>.btn:before {
    background: none !important;
}
/*-------------------------------------------------------------- # Desktop Navigation --------------------------------------------------------------*/
 @media (min-width: 1280px) {
     .navbar {
         padding: 0;
    }
     .navbar ul {
         margin: 0;
         padding: 0;
         display: flex;
         list-style: none;
         align-items: center;
    }
     .navbar li {
         position: relative;
    }
     .navbar>ul>li {
         white-space: nowrap;
         padding: 10px 0 10px 28px;
    }
     .navbar a, .navbar a:focus {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 3px;
         font-size: 14px;
         font-weight: normal;
         color: var(--color-default) !important;
         text-transform: uppercase;
         white-space: nowrap;
         transition: 0.3s;
         position: relative;
    }
     .navbar a i, .navbar a:focus i {
         font-size: 12px;
         line-height: 0;
         margin-left: 5px;
    }
     .navbar>ul>li>a:before {
         content: "";
         position: absolute;
         width: 100%;
         height: 2px;
         bottom: -6px;
         left: 0;
         background-color: var(--color-primary);
         visibility: hidden;
         width: 0px;
         transition: all 0.3s ease-in-out 0s;
    }
     .navbar a:hover:before, .navbar li:hover>a:before, .navbar .active:before {
         visibility: visible;
         width: 100%;
    }
     .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a {
         color: var(--color-primary) !important;
    }
     .navbar .dropdown ul {
         display: block;
         position: absolute;
         left: 28px;
         top: calc(100% + 30px);
         margin: 0;
         padding: 10px 0;
         z-index: 99;
         opacity: 0;
         visibility: hidden;
         background: #fff;
         box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
         transition: 0.3s;
    }
     .navbar .dropdown ul li {
         min-width: 200px;
    }
     .navbar .dropdown ul a {
         padding: 10px 20px;
         font-size: 14px;
         text-transform: none;
         color: var(--color-default);
         font-weight: 400;
    }
     .navbar .dropdown ul a i {
         font-size: 12px;
    }
     .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover>a {
         color: var(--color-primary);
    }
     .navbar .dropdown:hover>ul {
         opacity: 1;
         top: 100%;
         visibility: visible;
    }
     .navbar .dropdown .dropdown ul {
         top: 0;
         left: calc(100% - 30px);
         visibility: hidden;
    }
     .navbar .dropdown .dropdown:hover>ul {
         opacity: 1;
         top: 0;
         left: 100%;
         visibility: visible;
    }
}
 @media (min-width: 1280px) and (max-width: 1366px) {
     .navbar .dropdown .dropdown ul {
         left: -90%;
    }
     .navbar .dropdown .dropdown:hover>ul {
         left: -100%;
    }
}
 @media (min-width: 1280px) {
     .mobile-nav-show, .mobile-nav-hide {
         display: none;
    }
}
 .navbar ul .btn-primary2{
    color:white !important;
}
/*-------------------------------------------------------------- # Mobile Navigation --------------------------------------------------------------*/
 @media (max-width: 1279px) {
     .navbar {
         position: fixed;
         top: 0;
         right: -100%;
         width: 100%;
         max-width: 400px;
         bottom: 0;
         transition: 0.3s;
         z-index: 9997;
    }
     .navbar ul {
         position: absolute;
         inset: 0;
         padding: 50px 0 10px 0;
         margin: 0;
         background: rgba(0, 0, 0, 0.8);
         overflow-y: auto;
         transition: 0.3s;
         z-index: 9998;
    }
     .navbar a, .navbar a:focus {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 10px 20px;
         font-size: 14px;
         font-weight: normal;
         color: rgba(255, 255, 255, 0.7);
         white-space: nowrap;
         text-transform: uppercase;
         transition: 0.3s;
    }
     .navbar a i, .navbar a:focus i {
         font-size: 12px;
         line-height: 0;
         margin-left: 5px;
    }
     .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a {
         color: #fff;
    }
     .navbar .dropdown ul, .navbar .dropdown .dropdown ul {
         position: static;
         display: none;
         padding: 10px 0;
         margin: 10px 20px;
         transition: all 0.5s ease-in-out;
         border: 1px solid #222428;
    }
     .navbar .dropdown>.dropdown-active, .navbar .dropdown .dropdown>.dropdown-active {
         display: block;
    }
     .mobile-nav-show {
         position: relative;
         color: #000;
         font-size: 28px;
         cursor: pointer;
         line-height: 0;
         transition: 0.5s;
         z-index: 9999;
         padding-right: 10px;
    }
     .mobile-nav-hide {
         color: #fff;
         font-size: 32px;
         cursor: pointer;
         line-height: 0;
         transition: 0.5s;
         position: fixed;
         right: 20px;
         top: 20px;
         z-index: 9999;
    }
     .mobile-nav-active {
         overflow: hidden;
    }
     .mobile-nav-active .btn-primary2{
        width:50% !important;
    }
     .mobile-nav-active .navbar {
         right: 0;
    }
     .mobile-nav-active .navbar:before {
         content: "";
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, 0.6);
         z-index: 9996;
    }
}
/*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/
 .hero {
     overflow-x: hidden;
     padding: 0;
     height: 100vh;
     height: 100dvh; 
     min-height: -webkit-fill-available;
}
 .hero .carousel {
     width: 100%;
     min-height: 100vh;
     padding: 80px 0;
     margin: 0;
     position: relative;
}
 .hero .carousel-item {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     overflow: hidden;
     z-index: 1;
     transition-duration: 0.4s;
}
 .overlay{
     position: absolute;
    /* Sit on top of the page content */
     width: 100%;
    /* Full width (cover the whole page) */
    /* height: 100%;
     Full height (cover the whole page) */
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0,0,0,0.5);
    /* Black background with opacity */
     z-index: 2;
    /* Specify a stack order in case you're using a different order for other elements */
     cursor: pointer;
}
 .hero .carousel-item::before {
     content: "";
     background-color: rgba(0, 0, 0, 0.4);
     position: absolute;
     inset: 0;
}
 .hero .banner {
     position: absolute;
     inset: 0;
     z-index: 2;
}
@media (max-width: 480px) and (max-height: 700px) {
    .hero {
        height: 100svh;
    }
}
/*================================hero of theme 2=============*/
 .banner2 .swiper img{
     border-radius: 10px;
     max-width: 100%;
     object-fit: cover;
     height: 550px 
}
 .swiper-mobile{
    width:600px;
    height:380px;
}
 .swiper-mobile .swiper-slide{
    display:flex;
    justify-content:center;
    border-radius:18px;
}
 .swiper-mobile .swiper-slide img{
    object-fit:cover
}
 @media (max-width: 430px) { .swiper-mobile{
    width:230px;
    height:380px;
}}
 @media (max-width: 1430px) {
     swiper-container {
         width: 430px !important;
         height: 430px !important;
    }
     swiper-slide img{
        max-width: 430px !important;
         height: 430px !important;
         object-fit: cover;
    }
}
 swiper-container {
     width: 600px;
     height: 600px;
}
 swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 18px;
     font-size: 22px;
     font-weight: bold;
     color: #fff;
}
 swiper-slide img{
    max-width: 100% !important;
     height: 600px !important;
     object-fit: cover;
}
 @media (max-width: 768px) {
     .hero .banner {
         padding: 0 0px;
         margin-top:0px !important;
    }
     .banner2 .banner{
         padding: 0 0px;
         margin-top:0px !important;
    }
}
 @media (max-width: 1024px) {
     .banner2 .banner{
         padding: 0 0px;
         margin-top:0px !important;
    }
}
 .hero .banner h2{
    font-size:50px;
    font-weight: 600
}
 #hero-carousel .carousel-item img{
     position: relative;
     width: 100%;
     height:100vh !important;
     object-fit: cover;
     overflow: hidden;
}
 #hero-carousel .carousel-item >img{
     -webkit-animation:thing 20s;
     -o-animation:thing 20s;
     animation:thing 20s;
}
/* zoom in header animation*/
 @keyframes thing{
     from{
         transform:scale(1,1);
    }
     to{
        transform:scale(2.0,2.0);
    }
}

/*==========================================scroll down button ===============*/
 .banner .scroll-button {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: block;
     width: 40px;
     height: 80px;
     border:1px solid var(--color-primary);
     border-radius: 20px;
     text-align: center;
    z-index:999;
     cursor: pointer;
}
 .banner .fa-arrow-down {
     display: inline-block;
     font-size:20px;
     animation: arrowAnimation 1.5s infinite;
}
 @keyframes arrowAnimation {
     0% {
         transform: rotate(360deg) translateX(0%);
    }
     50% {
         transform: rotate(360deg) translateX(0%) translateY(20px);
    }
     80% {
         transform: rotate(360deg) translateX(0%) translateY(40px);
    }
     100% {
         transform: rotate(360deg) translateX(0%);
    }
}
 @media (max-width: 768px) {
     .hero .banner h2 {
         font-size: 30px;
    }
}
 .hero .banner p {
     color: rgba(255, 255, 255, 0.8);
     font-size: 18px;
}
 .hero .banner2 p {
     color: rgba(255, 255, 255, 0);
     font-size: 18px;
}
 .hero .carousel-control-prev {
     justify-content: start;
}
 @media (min-width: 640px) {
     .hero .carousel-control-prev {
         padding-left: 15px;
    }
}
 .hero .carousel-control-next {
     justify-content: end;
}
 @media (min-width: 640px) {
     .hero .carousel-control-next {
         padding-right: 15px;
    }
}
 .hero .carousel-control-next-icon, .hero .carousel-control-prev-icon {
     background: none;
     font-size: 26px;
     line-height: 0;
     background: rgba(255, 255, 255, 0.2);
     color: rgba(255, 255, 255, 0.6);
     border-radius: 50px;
     width: 54px;
     height: 54px;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .hero .carousel-control-prev, .hero .carousel-control-next {
     z-index: 3;
     transition: 0.3s;
}
 .hero .carousel-control-prev:focus, .hero .carousel-control-next:focus {
     opacity: 0.5;
}
 .hero .carousel-control-prev:hover, .hero .carousel-control-next:hover {
     opacity: 0.9;
}
 .request-form h3{
    font-weight: 600;
    font-size: 35px
}
 .request-form {
    width: 65%;
    float: right;
    border-radius: 4px;
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
 .request .circle {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: var(--color-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
}
 .circle .call-icon {
     color: white;
     font-size: 35px;
     margin-bottom: 3px;
     transform: rotate(10.97deg);
}
 .request-form .form-control{
    background: #E9ECEF;
    padding:12px;
    border:none;
    border-radius: 4px !important
}
 @media (max-width: 1024px) {
    .request-form{
        width: 100% !important
    }
}
 @media only screen and (max-width: 768px){
     .request .circle{
        margin-top:20px;
    }
}
 @media only screen and (min-width: 768px) {
     .request .circle {
         width: 80px;
         height: 80px;
         font-size: 36px;
    }
}
 @media only screen and (min-width: 992px) {
     .request .circle {
         width: 80px;
         height: 80px;
         font-size: 48px;
    }
}
 @media only screen and (min-width: 1020px) {
     .request .circle {
         width: 70px;
         height: 70px;
         font-size: 25px;
         left: 65%;
    }
}
 @media only screen and (min-width: 1200px) {
     .request .circle {
         width: 80px;
         height: 80px;
         font-size: 60px;
         left: 66%;
    }
}
 @media only screen and (min-width: 1440px) {
     .request .circle {
         transform: translate(-50%, -50%);
         width: 80px;
         height: 80px;
      
    }
}
 @media (max-width: 1000px) {
     .display-sm-none{
        display: none
    }
}
/*=============---------------------------------------------------2nd theme  -------------------------------------=====---*/

 .banner2 .overlay{
     position: absolute;
     width: 100%;  height: 100vh;

     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color:#00072db5 !important;
     z-index: 2;
  
}
 .banner2 .top-box {
     position: relative;
}
 .mobile-swiper img{
    border-radius: 10px;;
}
 .banner2 .banner i{
    padding: 15px;
    border:1px solid var(--color-primary);
     border-radius: 100%;
    color: var(--color-primary);
    font-size: 15px
}
 .banner2 .scroll-button {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: block;
     width: 40px;
     height: 80px;
     border:none;
     border-radius: 20px;
     text-align: center;
     cursor: pointer;
}
 .banner2 .fa-arrow-down {
     display: inline-block;
     font-size:20px;
     animation: arrowAnimation 1.5s infinite;
}
 @keyframes arrowAnimation {
     0% {
         transform: rotate(360deg) translateX(0%);
    }
     50% {
         transform: rotate(360deg) translateX(0%) translateY(20px);
    }
     80% {
         transform: rotate(360deg) translateX(0%) translateY(40px);
    }
     100% {
         transform: rotate(360deg) translateX(0%);
    }
}
/* --------------------================================================-- about us---------==================================================--*/
 .about .has-bg {
    border-radius: 4px;
    height:500px;
     position: relative;
     background-image: url('assets/img/video-thumbnail/thumbnail.jpg');  background-repeat: no-repeat;

  background-size: cover; background-position: center ;
}
 .about .about-bg{
    width: 500px;
     position: absolute;
     height: 560px;
     background:var(--color-primary);
     float: right;
     justify-content: end;
     right: 0px;
     border-radius: 4px;
     margin-top: -30px;
}
 @media (max-width: 1024px) { .about .about-bg{display:none;}}
 .about p{
    font-size: 15px;
    margin-bottom: 0rem
}
 .about .feature-box {
     padding: 25px 25px 20px 22px;
     position: relative;
     text-align: center;
     background: #FFFFFF;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
}
 .about .feature-box i {
     position: absolute;
     top: -25px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 20px;
     background: var(--color-primary);
     color: #fff;
     border-radius: 50px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
}
 .about .feature-box span{
     font-size: 16px !important;
     font-weight: 600;
}
/*--------------------------------------------- Popup Video in about us================================================================ */
 .popup-video-area {
     background-size: cover;
     background-position: center center;
     height: 460px;
     position: relative;
}

 .video-btn {
     position: relative;
     text-align: center;
}
 .video-btn a {
     background-color: var(--color-primary);
     color: #ffffff;
     height: 100px;
     width: 100px;
     position: absolute;
     text-align: center;
     transform: translate(-50%, -50%);
     border-radius: 100px;
     z-index: 1;
     font-size: 40px;
     line-height: 100px;
}
 .popup-video {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .video-btn a .ripple {
     background-color: rgba(86, 125, 244, 0.3);
     position: absolute;
     width: 100px;
     height: 100px;
     z-index: -1;
     left: 50%;
     top: 50%;
     opacity: 0;
     margin: -50px 0 0 -50px;
     border-radius: 100%;
     -webkit-animation: ripple 1.8s infinite;
     animation: ripple 1.8s infinite;
}
 .video-btn a .ripple:nth-child(2) {
     animation-delay: .4s;
     -webkit-animation-delay: .4s;
}
 .video-btn a .ripple:nth-child(3) {
     animation-delay: .8s;
     -webkit-animation-delay: .8s;
}
 @-webkit-keyframes ripple {
     0% {
         opacity: 1;
         -webkit-transform: scale(0);
         transform: scale(0);
    }
     100% {
         opacity: 0;
         -webkit-transform: scale(1);
         transform: scale(1);
    }
}
 @keyframes ripple {
     0% {
         opacity: 1;
         -webkit-transform: scale(0);
         transform: scale(0);
    }
     100% {
         opacity: 0;
         -webkit-transform: scale(1);
         transform: scale(1);
    }
}
 
 @media screen and (max-width: 1030px){
}
 .about .request-form h3{
    font-weight: 600;
    font-size: 35px
}
 .about .request-form {
    width: 65%;
    float: right;
    border-radius: 4px;
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
 .about .request-form .form-control{
    background: #fff;
    padding:12px;
    border:1px solid var(--color-secondary2);
    border-radius: 100px !important
}
 @media (max-width: 1024px) {
    .about .request-form{
        width: 100% !important
    }
}
 .about .request-form a{
    background: var(--color-secondary2);
    color:white !important;
}
/***=====================================================video parrallex====================================*/
 .parallax-section {
     height: 500px;
     position: relative;
     overflow: hidden;background-image: url('assets/img/video-thumbnail/thumbnail.jpg'); 
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
}
@media (max-width: 425px) { .parallax-section {background-attachment: scroll !important;}}
 .parallax-section .play-button-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
 .parallax-section .play-button {
     display: block;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: transparent;
     border: 3px solid #fff;
     position: relative;
     z-index: 1;
     transition: all 0.3s ease-in-out;
}
 .parallax-section .play-button:before {
     content: "";
     display: block;
     width: 0;
     height: 0;
     border-top: 20px solid transparent;
     border-bottom: 20px solid transparent;
     border-left: 30px solid #fff;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(0deg);
     transition: all 0.3s ease-in-out;
}
 .parallax-section:hover .play-button {
     width: 100px;
     height: 100px;
}
 .parallax-section:hover .play-button:before {
     width: 30px;
}
 .parallax-section .video-link {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     z-index: 0;
}
 .parallax-section .video-link video {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1;
}
/* ---------------------==============================Listings==================================================================------------*/
 .listing ul{
    border-radius: 4px;
    border-bottom:none !important;
}
 .listing .nav-tabs .nav-link.active{
    background-color: var(--color-primary);
    color:white;
    border-radius: 4px !important
}
 .listing .nav-item{
    padding: 0px !important;
     margin-top: 0px !important;
    cursor: pointer
}
 .listing ul li a p{
    margin-bottom: 0rem !important
}
 .listing ul li a{
    color: var(--color-default)
}
 .listing ul li a:hover{
    color: var(--color-default)
}
 .listing .item-height{
    height:550px;
}
 .listing .card{
    border:none;
    border-radius: 4px ;
    box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.15);
}
 .listing .owl-carousel .owl-item img {
     display: block;
     width: 100%;
     height: 300px;
     object-fit: cover;
}
 .listing .image-container {
     position: relative;
     overflow: hidden;
}
 .listing .image-container img {
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
 .listing .image-container:hover img {
     -webkit-transform: scale(1);
     transform: scale(1);
}
 .listing .card .circle {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: var(--color-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: 0;
     left: 50%;
     z-index:999;
     transform: translate(-50%, -50%);
}
 .listing .item .card-body .d-flex p{
    font-size: 16px
}
 .listing .card .circle .home-icon {
     color: white;
     font-size: 24px;
     margin-bottom: 3px;
}

@media only screen and (max-width: 520px){
    .listing .item-height{
        height:480px;
    }
}

@media only screen and (max-width: 1024px) {
     .listing .item .card-body .d-flex p{
        font-size: 13px
    }
}
 @media only screen and (min-width: 768px) {
     .listing .card .circle {
         width: 60px;
         height: 60px;
         font-size: 36px;
    }
}
 @media only screen and (min-width: 992px) {
     .listing .card .circle {
         width: 80px;
         height: 80px;
         font-size: 48px;
    }
}
 @media only screen and (min-width: 1200px) {
     .listing .card .circle {
         width: 70px;
         height: 70px;
         font-size: 60px;
    }
}
 @media only screen and (min-width: 1440px) {
     .listing .circle {
         transform: translate(-50%, -50%);
         width: 70px;
         height: 70px;
        /* margin-left: 115px;
         half of circle width */
    }
}
 .owl-carousel .owl-stage{
    margin-top: 20px
}
/*-===----------------------------------=====2nd theme listing---============================-----------======*/
 .listing .featured .nav-tabs{
    border-bottom: none !important;
}
 .listing .featured .nav-link{
    color:black;
    background:#F5F5F5;
    border-radius: 100px
}
 .listing .featured .nav-tabs .nav-link.active {
     background-color: var(--color-primary);
     color: white;
     border-radius: 100px !important;
}
 .listing .featured ul{
    background: none !important;
    border:none !important;
}
 .listing .featured .item .listing2 .text span {
     position: absolute;
     top: 20px;
     right: 20px;
     font-size: 20px;
     display: inline-block;
     background: var(--color-primary);
     padding: 4px 20px 4px 20px;
     border-radius: 4px;
     color: white;
     text-align: center;
     font-weight: bold;
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     -webkit-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
 .listing2 img{
    border-top-right-radius: 10px;
    border-top-left-radius: 10px
}
 .listing .feature .card{
    border:none !important;
}
 .listing .feature .listing2{
    border:none !important;
}
 .listing2 .card-body{
    padding: 20px;
    background: var(--color-bg2);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px
}
 .listing2 .card-body h2 a{
    color: black
}
 .listing2 p span{
    font-size: 18px
}
 .listing2 .image-container {
     position: relative;
     overflow: hidden;
}
 .listing2 .image-container img {
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
 .listing2 .image-container:hover img {
     -webkit-transform: scale(1);
     transform: scale(1);
}
/* --------------============================================ amenities =========================================---------*/
 .amenities .icon {
     padding: 25px;
     transform: translateX(-15%);
     font-size: 20px;
     background: var(--color-primary);
     color: #fff;
     border-radius: 50px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
}
 .amenities .card{
    border-left: 3px solid var(--color-primary);
    background: none !important;
    border-radius: 4px;
    border-top:none !important ;
    border-bottom:none !important;
     border-right:none !important 
}
 .amenities .card:hover{
    background-color: white !important;
    border-right:none !important ;
    border-left: 3px solid var(--color-primary);
     cursor: pointer;
    border-top:none !important ;
    border-bottom:none !important ;
}
 .amenities p{
    font-size: 14px;
    margin-bottom: 0rem !important
}
 .amenities p span{
    font-size: 18px;
    margin-bottom: 0rem !important
}
 .amenities .amenity-icon {
     padding: 28px;
     font-size: 30px;
     background: white;
     color: var(--color-secondary2);
     border-radius: 10px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
}
 .amenities .amenity-bg{
    background: var(--color-bg2);
    border-radius: 20px;
    padding: 30px;
    cursor: pointer
}
 .amenities .amenity-bg p span{
    font-size: 20px
}
 .amenities .amenity-bg:hover .amenity-icon{
    background: var(--color-secondary2);
    color: white
}
/*--------------------===========================gallery ============================================ -------------------*/
 .gallery ul{
    border-bottom:none !important ;
    border-radius: 4px
}
 .gallery .nav-tabs .nav-link.active{
    background-color: var(--color-primary);
    color:white;
    border-radius: 4px !important
}
 .gallery .nav-item{
    padding: 0px !important;
     margin-top: 0px !important;
    cursor: pointer
}
 .gallery ul li a p{
    margin-bottom: 0rem !important
}
 .gallery ul li a{
    color: var(--color-default)
}
 .gallery ul li a:hover{
    color: var(--color-default)
}
 .gallery .gall-tab img{
    border-radius: 4px;
     height: 350px;
     width: 100% ;
     object-fit: cover;
}
/*===========================================ZoomIn Hover-Mask Effect===============================*/
 .hovereffect {
     width: 100%;
     height: 100%;
     float: left;
     overflow: hidden;
     position: relative;
     text-align: center;
     cursor: default;
}
 .hovereffect .overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     overflow: hidden;
     top: 0;
     left: 0;
     background-color: rgba(0,0,0,0.3);
     opacity: 0;
     filter: alpha(opacity=0);
     -webkit-transform: translate(460px, -100px) rotate(180deg);
     -ms-transform: translate(460px, -100px) rotate(180deg);
     transform: translate(460px, -100px) rotate(180deg);
     -webkit-transition: all 0.2s 0.4s ease-in-out;
     transition: all 0.2s 0.4s ease-in-out;
}
 .hovereffect img {
     display: block;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
     position: relative;
}
 .hovereffect:hover img{
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
     -o-transform: scale(1.2);
     -ms-transform: scale(1.2);
     transform: scale(1.2);
}
 .hovereffect i.info {
     display: inline-block;
     text-decoration: none;
     padding: 7px 14px;
     text-transform: uppercase;
     color: #fff;
     border: 1px solid var(--color-primary);
     margin: 120px 0 0 0;
     border-radius:4px;
     background-color: transparent;
     -webkit-transform: translateY(-200px);
     -ms-transform: translateY(-200px);
     transform: translateY(-200px);
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}
 .hovereffect i.info:hover {
     box-shadow: 0 0 5px #fff;
}
 .hovereffect:hover .overlay {
     opacity: 1;
     filter: alpha(opacity=100);
     -webkit-transition-delay: 0s;
     transition-delay: 0s;
     -webkit-transform: translate(0px, 0px);
     -ms-transform: translate(0px, 0px);
     transform: translate(0px, 0px);
}
 .hovereffect:hover i.info {
     -webkit-transform: translateY(0px);
     -ms-transform: translateY(0px);
     transform: translateY(0px);
     -webkit-transition-delay: 0.3s;
     transition-delay: 0.3s;
}
/*--===========================================================================gallery2===================----*/
 .gallery .gallery-swipe .nav-tabs{
    border-bottom: none !important;
}
 .gallery .gallery-swipe .nav-link{
    color:black;
    background:#F5F5F5;
    border-radius: 100px
}
 .gallery .gallery-swipe .nav-tabs .nav-link.active {
     background-color: var(--color-primary);
     color: white;
     border-radius: 100px !important;
}
 .gallery .gallery-swipe img{
     border-radius: 20px;
     height: 350px;
     width: 100% ;
     object-fit: cover;
}
 .gallery .gallery-swipe ul{
    background: none !important;
    border:none !important;
}
/*===================================hover effect of gallery 2===========================================*/
 .gallery .gallery-swipe .hovereffect {
     width: 100%;
     height: 100%;
     float: left;
     overflow: hidden;
     position: relative; border-radius: 20px;
     text-align: center;
     cursor: default;
}
 .gallery .gallery-swipe .hovereffect .overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     overflow: hidden;
     top: 0;
     left: 0;
    border-radius:20px;
     background-color: rgba(0,0,0,0.3);
     opacity: 0;
     filter: alpha(opacity=0);
     -webkit-transform: translate(460px, -100px) rotate(180deg);
     -ms-transform: translate(460px, -100px) rotate(180deg);
     transform: translate(460px, -100px) rotate(180deg);
     -webkit-transition: all 0.2s 0.4s ease-in-out;
     transition: all 0.2s 0.4s ease-in-out;
}
 .gallery .gallery-swipe .hovereffect img {
     display: block;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
     position: relative; border-radius: 20px;
}
 .gallery .gallery-swipe .hovereffect:hover img{
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2); 
     -o-transform: scale(1.2);
     -ms-transform: scale(1.2); border-radius: 20px;
     transform: scale(1.2);
}
 .hovereffect i.info {
     display: inline-block;
     text-decoration: none;
     padding: 7px 14px;
     text-transform: uppercase;
     color: #fff;
     border: 1px solid var(--color-primary);
     margin: 120px 0 0 0;
     border-radius:4px;
     background-color: transparent;
     -webkit-transform: translateY(-200px);
     -ms-transform: translateY(-200px);
     transform: translateY(-200px);
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}
 .gallery .gallery-swipe .hovereffect i.info:hover {
     box-shadow: 0 0 5px #fff;
}
 .gallery .gallery-swipe .hovereffect:hover .overlay {
     opacity: 1;
     filter: alpha(opacity=100);
     -webkit-transition-delay: 0s;
     transition-delay: 0s;
     -webkit-transform: translate(0px, 0px);
     -ms-transform: translate(0px, 0px);
     transform: translate(0px, 0px); border-radius: 20px;
}
 .gallery .gallery-swipe .hovereffect:hover i.info {
     -webkit-transform: translateY(0px);
     -ms-transform: translateY(0px);
     transform: translateY(0px);
     -webkit-transition-delay: 0.3s;
     transition-delay: 0.3s; 
}
/*--------------------===================================floorplan ========================-------------------*/
 .floorplan ul{
    border-bottom:none !important ;
    border-radius: 4px
}
 .floorplan .nav-tabs .nav-link.active{
    background-color: var(--color-primary);
    color:white;
    border-radius: 4px !important
}
 .floorplan .nav-item{
    padding: 0px !important;
     margin-top: 0px !important;
    cursor: pointer
}
 .floorplan ul li a p{
    margin-bottom: 0rem !important
}
 .floorplan ul li a{
    color: var(--color-default)
}
 .floorplan ul li a:hover{
    color: var(--color-default)
}
 .floorplan img{
    height: 100%;
    object-fit: cover;
}
/*==================floorplan of theme2 ===============================================*/
 .floorplan .floor-detail{
    box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.15);
}
 .floorplan .floor-detail h3{
    font-weight: 700
}
 .floorplan .floor-detail p{
    font-size: 14px
}
 .floorplan .floor-tab .nav-tabs{
    border-bottom: none !important;
}
 .floorplan .floor-tab .nav-link{
    color:black;
    background:#F5F5F5;
    border-radius: 100px;
    border:1px solid var(--color-secondary2);
}
 .floorplan .floor-tab .nav-tabs .nav-link.active {
     background-color: var(--color-primary);
     color: white;
     border-radius: 100px !important;
}
 
/*-------------------=============================================-payment ===============================-------------------*/
 .payment ul{
    border-bottom:none !important ;
    border-radius: 4px
}
 .payment .nav-tabs .nav-link.active{
    background-color: var(--color-primary);
    color:white !important;
    border-radius: 4px !important
}
 .payment .nav-item{
    padding: 0px !important;
     margin-top: 0px !important;
    cursor: pointer
}
 .payment ul li a p{
    margin-bottom: 0rem !important
}
 .payment ul li a{
    color: var(--color-default)
}
 .payment ul li a:hover{
    color: var(--color-default)
}
 #listgrid .nav{
    border-bottom: none !important
}
 #listgrid .nav button{
    border-radius: 4px !important
}
 .payment .grid .tab-pane .box h2{
    font-weight: 700;
    font-size: 30px
}
 .table-responsive .border{
    border:1px solid var(--color-primary) !important;
}
 .table-responsive thead tr th{
    font-size:18px;
    font-weight: 600
}
/*===================================================payment2============================================*/
 .payment .payment-tab .nav-tabs{
    border-bottom: none !important;
}
 .payment .payment-tab .nav-link{
    color:black;
    background:#F5F5F5;
    border-radius: 100px;
    border:1px solid var(--color-secondary2);
}
 .payment .payment-tab .nav-tabs .nav-link.active {
     background-color: var(--color-primary);
     color: white;
     border-radius: 100px !important;
}
 .payment .payment-tab ul{
    background: none !important;
    border:none !important;
}
 .payment .payment-tab .grid .box{
    width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: white;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .payment .payment-tab .grid .box h2{
    font-size: 35px
}
/*--------------===============================================-calculator-=======================------------*/
 .calculator .terms{
    border-radius: 4px
}
 .calculator form .form-control{
    height: 40px;
    border-radius: 4px
}
 .calculator .terms .calculator-form input{
    border:1px solid var(--color-secondary2);
    border-radius: 100px
}
 .calculator .terms .calculator-form a{
    background: var(--color-secondary2);
    color:white !important;
}
/*-----------------------===============================-location==========================------------------*/
 .location img{
    height: 100%;
     object-fit: cover;
    border-radius: 4px
}
 .location .accordion-button:not(.collapsed)::after{
    display: none
}
 .location .accordion-button::after{
    display: none
}
 .location .accordion-button:focus{
    border:1px solid var(--color-primary) !important;
    box-shadow: none;
}
 .location .accordion-button:not(.collapsed){
    color:white !important;
     background-color: var(--color-primary) !important;
}
 .location .accordion-item{
    border:1px solid var(--color-primary);
}
 .location .accordion-button{
    padding:20px !important;
}
/*============================location of theme 2 =============================*/
 .location .location-style-accordion .accordion-button:not(.collapsed){
    color:black !important;
     background: none !important;
}
 .location .location-style-accordion .accordion-button:focus{
    border:none !important;
    box-shadow: none;
}
 .location-style-accordion .accordion-item {
     border: none;
     -webkit-transition: 0.5s all ease;
     transition: 0.5s all ease;
     border-radius: 0;
     position: relative;
     z-index: 1;
     background-color: transparent;
}
 .location-style-accordion .accordion-item::before {
     position: absolute;
     content: '';
     width: 1.5px;
     height: 100%;
     z-index: -1;
     left: 45px;
     top: 30px;
     background-color: var(--color-primary) !important;
}
 .location-style-accordion .accordion-item .accordion-button {
     color: #0d1820;
     -webkit-box-shadow: unset;
     box-shadow: unset;
     margin-bottom: 0;
     display: block;
     border: none;
     width: 100%;
     font-size: 18.8px;
     font-weight: 500;
     background-color: transparent;
     padding: 0 0 15px 0;
}
 .location-style-accordion .accordion-item .accordion-button span i {
     padding: 20px;
     font-size: 25px;
     background: var(--color-secondary2);
     color: white;
     border-radius: 100px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
}
 .location-style-accordion .accordion-item .accordion-body {
     padding: 0px 0 10px 80px;
}
 .location-style-accordion .accordion-item .accordion-body .bold {
     font-weight: 500;
     font-size: 15px;
     margin-bottom: 10px;
}
 .location-style-accordion .accordion-item:last-child .accordion-button {
     padding-bottom: 0;
}
 .location-style-accordion .accordion-item:last-child::before{
    display: none
}
/*---------------------=============================nearby=============================-------------*/
 .nearby .has-bg::before{
     top: -30px;
     bottom: 0px;
     content: "";
     background-color: var(--color-secondary);
     width: 120%;
     height: 500px;
     position: absolute;
     left: -70%;
     z-index: -1;
     border-radius: 4px;
}
 @media screen and (max-width: 768px){
     .nearby .has-bg::before{
        display: none !important
    }
}
 .nearby .nearby-destination .img {
     display: block;
     width: 100%;
     height: 400px;
     background-size: cover;
     border-radius: 4px;
}
 .nearby .nearby-destination .img:hover .text{
    display:block;
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     -webkit-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
 .nearby .nearby-destination .text {
     padding: 20px;
     position: relative;
     height: 400px;
     background: #00000057;
     border-radius: 4px;
     display:none;
}
 .nearby .nearby-destination .text span {
     position: absolute;
     top: 20px;
     right: 8px;
     font-size: 12px;
     display: inline-block;
     background: var(--color-primary);
     padding: 4px 15px 4px 15px;
     border-radius:4px;
     color: white;
     text-align: center;
     font-weight: bold;
}
 .nearby .nearby-destination .text h5 {
     color: white;
     margin-bottom: 20px;
     position: absolute;
     text-align: center;
     bottom: 0px;
}
/*====================nearby of theme 2=============*/
 .nearby .card{
    border:none;
}
 .nearby .card img{
    height: 300px;
    border-top-left-radius: 20px;
    cursor: pointer;
    object-fit: cover;
    border-top-right-radius:20px;
     cursor:pointer;
}
 .nearby .card-body{
    background:var(--color-secondary);
    padding:10px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}
 .nearby .card-body p{
    margin-bottom:0px;
     color:var(--color-primary);
    border-radius:10px;
}
 .nearby .circle {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     border:1px solid var(--color-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor:pointer;
}
 .nearby .circle:hover{
    background: var(--color-primary);
}
 .nearby .circle:hover .left-icon {
     color: white;
}
 .nearby .circle .left-icon {
     color: var(--color-primary);
     font-size: 20px;
}
/*-------------------------======================================cta=================---------------*/
 .cta img{
    height: 300px;
     object-fit: cover;
     clip-path: polygon(0 0, 88% 0, 65% 100%, 0% 100%);
}
 @media (max-width: 768px) {
     .cta img{
        height: 300px;
         object-fit: cover;
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}
/*========================  cta of theme2 ===================================*/
 .cta-parralex {
     height: 400px;
     position: relative;
     overflow: hidden;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     justify-content: center;
    align-items: center;
}
 .cta-parralex .overlay{
    position: absolute;
     width: auto;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color:#00072db5;
     z-index: 2;
     cursor: pointer;
}
/*---------============================================================faq==============----------*/
 .faq img{
    border-radius: 4px;
    height: 100%;
    object-fit: cover
}
 .faq p{
    font-size:14px;
}
 .faq .accordion-item{
    margin-bottom: 20px;
    border-radius: 4px !important;
    box-shadow: 0px 2px 15px rgba(44, 73, 100, 0.08);
    border:none !important;
}
 .faq .accordion-button:not(.collapsed){
    background: none !important;
    color:var(--color-primary);
    box-shadow: none !important;
}
 .faq .accordion-button:focus{
    box-shadow:none !important
}
 .faq .accordion-button::after{
    width:1.05rem !important;
}
 .faq .accordion-button{
    border-radius: 4px
}
/*=================================== faq of theme 2==============================*/
 .faq-accor .accordion-item{
    margin-bottom: 20px;
    border-radius: 4px !important;
    box-shadow: none !important;
    border:none !important;
    background: none !important
}
 .faq-accor img{
    border-radius: 0px;
    height: 100%;
    object-fit: cover
}
 .faq-accor .accordion-button:not(.collapsed){
    background: white !important;
    color:black;
    box-shadow: none !important;
}
 .faq-accor .accordion-button:focus{
    box-shadow: none !important
}
 .faq-accor .accordion-button::after{
    width:1.05rem !important;
}
 .faq-accor .accordion-button{
    border-radius: 10px;
    padding: 25px
}
 .faq-accor .accordion-button:not(.collapsed)::after {
     background-image: var(--bs-accordion-btn-active-icon);
     transform: var(--bs-accordion-btn-icon-transform);
     display: none;
}
 .faq-accor.accordion-button::after{
    display: none
}
 .faq-accor .accordion-item .accordion-button::before {
     position: absolute;
     right: 10px;
     top: 45%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     content: '-';
     color: 0.5s all ease;
     color: #fff;
     background-color: var(--color-secondary2);
     background: var(--color-secondary2);
     color: white;
     border-radius: 100px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 30px;
}
 .faq-accor .accordion-item .accordion-button.collapsed::before {
     content: '+';
     color: #fff;
     background-color: var(--color-secondary2);
}
/*---------===========================================--project===========================-------------*/
 .project .swiper-slide{
    border-radius: 4px !important;
    
}
 .project .bg-primary{background:var(--color-primary) !important;}

 .project .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
    bottom: 0px !important
}

/*=================================================== project of theme 2=============================*/
 .projects {
     height: 600px;
     position: relative;
     overflow: hidden;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     justify-content: center;
    align-items: center;
}
 .projects .overlay{
    position: absolute;
     width: auto;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #00072d75;
     z-index: 2;
     cursor: pointer;
}
 .projects .round{
    border-radius: 10px !important
}
/*-----======================================================footer===================== ---*/
 footer .icon {
     padding: 15px;
     transform: translateX(-15%);
     font-size: 15px;
     /*border:1px solid var(--color-primary);*/
     color: #fff;
     border-radius: 50px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 35px;
     height: 35px;
}
 .social-links a:hover .icon{
    background:var(--color-primary)!important;
    color:white !important;
}
 .custom-border {
     display: inline-block;
     position: relative;
}
 .custom-border::after {
     content: "";
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 50%;
     height: 2px;
     background-color: var(--color-primary);
}
 footer .fa-circle:before{
    font-size: 8px !important;
    color: var(--color-primary)
}
/*=============================== footer of theme 2================*/
 footer ul{
    list-style: none;
}
 footer ul li a{
    color: white
}
 footer .border-icon {
     font-size: 40px;
     border:1px solid var(--color-primary);
     color: #fff;
     display: inline-flex;
     padding: 30px;
     align-items: center;
     justify-content: center;
}
 @media screen and (max-width: 580px) {
     footer .border-icon {
         font-size: 20px;
         border:none;
         color: #fff;
         display: inline-flex;
         padding: 10px;
         align-items: center;
         justify-content: center;
    }
}
/*===============scroll button==========*/
 #scrollToTopBtn {
     display: none;
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 99;
     font-size: 16px;
     border: none;
     outline: none;
     background-color: var(--color-primary);
     color: white;
     cursor: pointer;
     padding: 15px;
    width:50px;
     border-radius: 4px;
     opacity: 1;
     transition: opacity 0.3s;
}
 #scrollToTopBtn:hover {
     opacity: 1;
}