@import url(./variable.css);



.sticky-navbar {

  padding: 0px 0;

  position: fixed;

  top: 0;

  width: 100%;

  background-color: var(--dark);

  z-index: 99;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 

}



/* Button styling */

.navbar .btn-navbar {

  padding: 5px 30px;

  background: var(--primary);

  color: var(--dark);

  border-radius: 2px;

  transition: background-color 0.3s ease;

  text-decoration: none;

  -webkit-transition: background-color 0.3s ease;

  -moz-transition: background-color 0.3s ease;

  -ms-transition: background-color 0.3s ease;

  -o-transition: background-color 0.3s ease;

}





.hero-section {

  background: url("../img/Hero.jpg")

    center/cover no-repeat;

  color: var(--light);

  position: relative;

 padding: 60px 0;

}

.hero-section h1 {

  font-size: 2.5rem;

  font-family: var(--sans-serif);

}

.hero-section P {

  font-family: var(--sans-serif);

  font-size: 18px;

}

.hero-section h1 span {

  color: var(--primary);

}



.hero-overlay {

  background-color: rgba(0, 0, 0, 0.6);

  padding: 80px 0;

  padding-top: 120px;

  height: 100%; 

 

}



.form-container {

  width: 100%;

  max-width: 450px;

  background: rgba(255, 255, 255, 0.15);

  padding: 30px;

  border-radius: 16px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.2);

}



h4.text-center {

  color: var(--light);

  font-weight: 800;

  font-family: var(--sans-serif);

  font-size: 22px;

}



.input-group-text {

  background: transparent;

  border: none;

  font-size: 15px;

  font-family: var(--sans-serif);

}

.form-control{

  height: 50px;

}

.form-control:focus {

  box-shadow: none;

  outline: none;

  border-color: var(--primary);

}

.customHeight {

  height: 80px;

}



.btn-clr {

  background-color: var(--primary);

  color: var(--dark);

  font-weight: bold;

  border: none;

  padding: 12px 10px;

  border-radius: 5px;

  transition: background 0.3s ease;

  font-size: 16px;

  font-family: var(--sans-serif);

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  -ms-border-radius: 5px;

  -o-border-radius: 5px;

}



.btn-clr:hover {

  background-color: var(--primary);

}



.section-padding {

  padding: 80px 0;

}

/* trusted section */

.trusted-section {

  background-color: var(--light-alt);

  padding: 50px 0;

  text-align: center;

}

.trusted-section h2 {

  color: var(--primary);

  margin-bottom: 40px;

  font-family: var(--sans-serif);

  font-weight: bold;

  font-size: 2.5rem;

}

.association-logo {

  max-width: 150px;

  height: auto;

  margin: 0 20px;

}





/* rental section */

.rental-section {

  background-color: var(--light);

  padding: 60px 0px;

}

.rental-section h2 {

  color: var(--dark);

  font-size: 2.5rem;

 

}

.rental-section p {

  color: var(--light);

}



.form-wrapper {

  display: flex;

  margin-top: 20px;

  max-width: 100%;

}



.rental-input {

  flex: 1;

  padding: 12px 16px;

  border: 1px solid var(--primary);

  border-right: none;

  border-radius: 4px 0 0 4px;

  min-width: 0;

}



.submit-btn {

  background: var(--primary);

  color: var(--light);

  border: none;

  padding: 12px 24px;

  border-radius: 0 4px 4px 0;

}



.rental-img {

  width: 100%;

  height: auto;

  border-radius: 10px;

}



/* custom section */

.custom-section {

  padding: 60px 0;

}

.custom-section .cust-p{

  font-family: var(--sans-serif);

  color: var(--dark-alt);

  text-transform: capitalize;

  font-size: 15px;

}

.custom-section .cuto-p{

  font-family: var(--sans-serif);

  color: var(--primary);

  

  font-size: 18px;



}



.custom-section h2 {

  font-family: var(--sans-serif);

  color: var(--dark);

  font-size: 2.5rem;

}

.custom-section p {

  font-family: var(--sans-serif);

  font-size: 17px;

  color: var(--dark-alt);

}

.image-box {

  position: relative;

  width: 100%;

  max-width: 500px;

}

.image-box img {

  width: 100%;

  border-radius: 8px;

}

.bg-shape {

  position: absolute;

  top: -30px;

  left: -30px;

  background: var(--primary);

  width: 100%;

  height: 100%;

  border-radius: 8px;

  z-index: -1;

}





/* .line-decoration {

    position: absolute;

    top: 0;

    right: 0;

    width: 80px;

    height: 80px;

    background-image: repeating-linear-gradient(135deg, #1e90ff, #1e90ff 2px, transparent 2px, transparent 6px);

    opacity: 0.5;

  } */

.services-section {

  padding: 60px 20px;

  background-color: var(--light);

  font-family: var(--sans-serif);

  background: var(--light-alt);

}

.services-section h2 {

  font-family: var(--sans-serif);

  font-size: 2.2rem;

  color: var(--primary);

  font-weight: bold;

  margin-bottom: 50px;

}



.section-title {

  text-align: center;

  margin-bottom: 40px;

}



.service-card {

  background: white;

  padding: 30px 25px;

  border-radius: 8px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  max-width: 320px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 100%;

  transition: box-shadow 0.3s ease;

}



.service-card:hover {

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}



.service-card h3 {

  color: var(--primary);

  margin-bottom: 10px;

  font-size: 18px;

}



.service-card p {

  color: var(--dark);

  font-size: 15px;

  margin-bottom: auto;

  font-family: var(--sans-serif);

}



.service-card a {

  margin-top: 15px;

  color: var(--tertiary);

  font-weight: 500;

  text-decoration: none;

  font-family: var(--sans-serif);

}



.service-card a:hover {

  text-decoration: underline;

}



/* Swiper-specific */

.swiper {

  padding-bottom: 40px;

}

.swiper-slide {

  display: flex;

  justify-content: center;

}

/* about us */

.about-section {

  padding: 80px 0;

  position: relative;

  background: var(--light-alt);

}





.sec-title {

  margin-bottom: 20px;

  position: relative;

}



.sec-title h2 {

  font-size: 2.5rem;

  color: var(--dark);

  font-weight: 600;

  font-family: var(--sans-serif);



  position: relative;

  margin-bottom: 15px;





}

.sec-title h2 span {

  color: var(--primary);

}



.about-section .text {

  font-size: 17px;

 

  color: var(--dark-alt);

  margin-bottom: 30px;

  font-family: var(--sans-serif);

}



.list-style-one {

  margin-bottom: 30px;

  list-style: none;

  padding: 0;

  

}



.list-style-one li {

  font-size: 15px;

 

  color: var(--dark);

  font-weight: 900;

  padding-left: 35px;

  margin-bottom: 12px;

  position: relative;

  font-family: var(--sans-serif);

  font-size: 16px;

}



.list-style-one li::before {

  content: "\f058";

  font-family: var(--fa-style-family, "Font Awesome 6 Free");

  font-weight: var(--fa-style, 900);

  font-size: 18px;

  color: var(--primary);

  position: absolute;

  left: 0;

  top: 0;

}



.image-column .inner-column {

  position: relative;

  padding-left: 80px;

  padding-bottom: 80px;

}



.image-column .inner-column::before {

  content: "";

  position: absolute;

  left: -75px;

  top: 65px;

  height: 520px;

  width: 520px;

  background-image: url(https://i.ibb.co/fxJ1jtC/about-circle-1.png);

}



.image-column .image-1,

.image-column .image-2 {

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 5px 10px var(--da);

}



.image-column .image-1 img,

.image-column .image-2 img {

  border-radius: 20px;

  width: 100%;

  height: auto;

  display: block;

}



.image-column .image-2 {

  position: absolute;

  left: 0;

  bottom: 0;

}

/* property section */



.property-section {

  background-color: var(--dark);

}



.custom-property-row {

  min-height: 80vh;

  display: flex;

  flex-wrap: wrap;

}



.image-side {

  padding: 0;

  overflow: hidden;

}



.image-side img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.content-side {

  background-color: var(--dark);

  display: flex;

  align-items: center;

  padding: 0;

}



.content-wrapper {

  color: var(--light);

  padding: 40px;

  width: 45vw;

  box-sizing: border-box;

  font-family: var(--sans-serif);

}



.content-wrapper h2 {

  color: var(--primary);

  font-size: 2.5rem;

  font-weight: bold;

  margin-bottom: 25px;

}



.content-wrapper h2 span {

  color: var(--primary);

}



.content-wrapper p {

  font-size: 18px;

  color: var(--light);

}



/* cta section */

.cta-section {

  padding: 60px 0;

  background: var(--light-alt);

}



.cta-box {

  background-color: var(--dark); 

  color: var(--light);

  padding: 50px;

  border-radius: 12px;

}



.cta-box h3 {

  margin-bottom: 10px;

  font-size: 2.5rem;

  font-weight: bold;

  font-family: var(--sans-serif);

  color: var(--primary);

}

.cta-box p{

  color: var(--light-alt);

  font-family: var(--sans-serif);

  font-size: 20px;

}





/* Feature Section */



.features-section {

  padding: 60px 0px;

  background:var(--light-alt);

 

}



.section-title {

  font-size: 2.5rem;

  font-weight: bold;

  margin-bottom: 40px;

  color: var(--primary);

  font-family: var(--sans-serif);

}



.feature-card {

 margin-top: 20px;

  padding: 25px;

  border-radius: 12px;

  text-align: center;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

  height: 100%;

  transition: transform 0.3s;

}



.feature-card:hover {

  transform: translateY(-5px);

}



.feature-card img {

  width: 80px;

  height: 80px;

  margin-bottom: 20px;

}



.feature-card h4 {

  font-size: 20px;

  margin-bottom: 10px;

  font-family: var(--sans-serif);

  color: var(--dark);

  font-weight: bold;



}



.feature-card p {

  font-size: 18px;

  color:var(--dark-alt );

  font-family: var(--sans-serif);

}



/* testimonial section */



.testimonial-section {

  padding: 60px 0;

  background-color: var(--dark);

  background-image: url('../img/testbg.png');

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

  background-attachment: fixed;

}



.testimonial-section h2 {

  color: #fff;

  font-family: var(--sans-serif);

  font-size: 2rem;

  font-weight: bold;

 

}

.testimonial-section h2 span{

  color: var(--primary);

}

.swiper {

  max-width: 800px;

  margin: auto;

}



.swiper-slide {

  padding: 10px;

  border-radius: 10px;

}



.swiper-slide img {

  width: 60px;

  height: 60px;

}



.swiper-slide h6 {

  color: var(--primary);

  font-family: var(--sans-serif);

  font-size: 20px;

}



.swiper-button-prev,

.swiper-button-next {

  color: var(--primary) !important;

  font-size: 10px;

}



.swiper-button-prev::after,

.swiper-button-next::after {

  font-size: 10px;

}



.swiper-pagination-bullet {

  background-color: var(--light) !important;

}





.quote-box {

  position: relative;

  padding: 30px 40px;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  margin-bottom: 15px;

}



.quote-box p {

  color: var(--light);

  font-family: var(--sans-serif);

  font-size: 20px;

  margin: 0;

  position: relative;

  z-index: 1;

}



.quote-icon {

  color: var(--primary);

  font-size: 24px;

  position: absolute;

  z-index: 0;

  opacity: 0.8;

}



.quote-box .fa-quote-left {

  top: 10px;

  left: 15px;

}



.quote-box .fa-quote-right {

  bottom: 10px;

  right: 15px;

}

/* Area we Serve */







.area-left {

  background-image: url('../img/about2.png');

  background-size: cover;

  background-position: center;

  position: relative;

  min-height: 600px;

}



.area-left .overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7);

  z-index: 1;

}



.area-left .content {

  z-index: 2;

  position: relative;

  text-align: center;

}



.area-left h2 {

  font-size: 2rem;

  font-weight: bold;

  line-height: 1.4;

  font-family: var(--primary);

}



.area-left .highlight {

  color: var(--primary);

  font-family: var(--sans-serif);

  font-size: 2rem;

}



.area-right {

  padding: 2rem;

  background-color: #f8f9fa;

}



.area-right h4 {

  font-size: 2rem;

  font-weight: bold;

  margin-bottom: 2rem;

  color: var(--dark);

  font-family: var(--sans-serif);

}



.area-right ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.area-right ul li {

  margin-bottom: 0.8rem;

  font-size: 1.2rem;

  font-family: var(--sans-serif);

  color: var(--dark-alt);

}



.container2 {

  width: 100%;

 

  margin: 0 auto;

}



/* question -section */

.question-section {

  background: url('../img/Hero.png') center center/cover no-repeat;

  position: relative;

  color: var(--light);

  padding: 60px 0;

}



.overlay {

  background-color: rgba(0, 0, 0, 0.6);

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}



.content {

  position: relative;

  z-index: 2;

}

.content h2{

  color: var(--light);

  font-family: var(--sans-serif);

  font-size: 3rem;

  font-weight: bold;

}

.content p{

  font-family: var(--sans-serif);

  color: var(--light);

  font-size: 20px;

}



.icon-box {

  background:var(--light);

  color: var(--primary);

  border-radius: 5px;

  padding: 40px 20px;

  text-align: center;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 250px; 

}



.icon-box:hover {

  transform: translateY(-10px);

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);

}



.icon-box i {

  font-size: 40px;

  margin-bottom: 15px;

}



.icon-box p {

  color: var(--dark);

  font-family: var(--sans-serif);

  font-size: 20px; 

  margin-bottom: 0;

  flex-grow: 1; 

}





/* footer  */



.Footer-section{

  padding: 60px 0px;

  background: black;

 border-top:3px solid var(--primary);



}

.Footer-section i{

  color: var(--light);

  font-size: 20px;

  margin-top: 8px;

}

.Footer-section h6{

  color: var(--primary);

  font-family: var(--sans-serif);

  font-size: 20px;

}

.Footer-section p{

  color: var(--light);

  font-family: var(--sans-serif);

  font-size: 15px;

}

.Footer-section .cust-clr{

  color: var(--light-alt);

  margin-top: 30px;

}



.Footer-section h5{

  color: var(--dark);

  font-family: sans-serif;

  font-size: 20px;

  font-weight: bold;

}

.Footer-section .btn-clr{

  background: var(--primary);

  color: var(--light);



}

.Footer-section .btn-clr:hover{

  background: var(--primary);

  color: var(--light);

}



/* feature2 section */



.feature-section2 {

  background-image: 

    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 

    url('../img/about2.png'); 

  background-size: cover;

  background-position: center;

  padding: 60px 0;

  color: var(--light);

  

}



.feature-section2 h2 {

  font-family: var(--sans-serif);

  color: var(--light);

  font-size: 2.5rem;

  font-weight: bold;

  text-align: center; 

}



.feature-section2 h2 span {

  color: var(--primary);

  



}



.feature-card2 {

  background-color: transparent;

  color: var(--light);

  transition: all 0.3s ease;

  height: 100%;

  padding: 30px;

  border-radius: 10px;

  margin-top: 20px;

}



.feature-title2 {

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 15px;

  color: var(--primary);

  font-family: var(--sans-serif);

}



.feature-card2 p {

  font-family: var(--sans-serif);

  font-size: 18px;

  color: var(--light);

  transition: color 0.3s ease;

}



.feature-card2:hover {

  background-color: white;

  color: var(--dark);

  transform: scale(1.03);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

}



.feature-card2:hover p {

  color: var(--dark);

}



.feature-card2 .link-style {

  color: var(--primary);

  font-size: 15px;

  text-decoration: none;

}



.feature-section2 .link-style::after {

  content: '→'; 

  font-size: 25px; 

  margin-left: 8px; 

  color: var(--primary);

  font-weight: bold; 

}

.text_primary{

    color:var(--primary);

}

.rightWhy ul{

    list-style-type:none;

    padding-left:0;

}

.rightWhy ul li{

    font-weight:600;

    font-size:20px;

    position:relative;

    padding-left:30px;

    padding-right:15px;

}

.rightWhy ul li p{

    margin-top:10px;

    font-size:16px;

    color:#333;
    font-weight: 500;

}

.rightWhy ul li:before{

  content: "\f058";

  font-family: var(--fa-style-family, "Font Awesome 6 Free");

  font-weight: var(--fa-style, 900);

  font-size: 18px;

  color: var(--primary);

  position: absolute;

  left: 0;

  top: 3px;

}

.heading{

    font-size: 2.5rem;

    font-weight: bold;

    font-family: var(--sans-serif);

}

.small_heading{

    font-size:1.3rem;

}

.sub_heading{

    font-size:1.8rem;

}

.bgGrey{

    background:#e9e9e9;

}

.spaceSection{

    padding:60px 0;

}

.userIcon{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

}

.userIcon i{

    font-size:30px;

}

.title{

    font-size:18px;

}

.fontWeight600{

    font-weight:600;

}

.innerItem{

    background:#fff;

    padding:40px;

    border-radius:10px;

}

.innerItem span{

    display:inline-block;

    background:var(--primary);

    padding:8px 10px;

    border-radius:20px;

}

.innerItem span i{

    padding:0 3px;

    font-size:15px;

}

.mySwiper{

    padding-left:30px;

}

.swiper-button-next, .swiper-button-prev{

    width:40px !important;

    height:40px !important;

    border-radius:50%;

    background:#ccc;

    

}

.swiper-button-next:after, .swiper-button-prev:after{

    font-size:20px !important;

    color:#000 !important;

}

.swiper-button-prev{

    left:var(--swiper-navigation-sides-offset,5px) !important;

}

.swiper-button-next{

    right:var(--swiper-navigation-sides-offset,5px) !important;

}

.hero-section a strong, .btnTheme strong{

    font-size:14px;

    display:block;

    color:#ccc;

}

.hero-section .button span, .btnTheme span{

    font-size:20px;

    text-align:center;

}

.bg_primary{

    background:var(--primary);

}

p.text_black{

    color:#000;

}

.leftBg{

    position:relative;

    z-index:1;

    padding:60px 0;

}

.leftBg:before{

    content:'';

    width:43vw;

    height:100%;

    position:absolute;

    top:0;

    left:0;

    z-index:-1;

    background:var(--primary);

}

.leftBg h3{

    line-height:60px;

}

.leftManagement ul{

    counter-reset: my-sec-counter;

    list-style-type:none;

    padding-left:0;

    margin-top:15px;

}

.leftManagement ul li{

    font-weight:600;

    font-size:18px;

    position:relative;

    padding-left:60px;

}

.leftManagement ul li p{

    font-weight:400;

    font-size:15px;

    margin-top:5px;

}

.leftManagement ul li:before{

    counter-increment: my-sec-counter;

    content: "" counter(my-sec-counter) " ";

    position:absolute;

    top:0;

    left:0;

    width:40px;

    height:40px;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

}

.itemServices{

    padding:30px;

    border-radius:10px;

    background:#f1f1f1;

    text-align:center;

    margin:10px 0;

}

.fontWeight800{

    font-weight:800;

}

.bg1{

    background:var(--primary);

}

.bgDark{

    background:var(--dark);

}

.accordion-button{

    font-size:1.2rem;

    font-weight:600;

}

.accordion-button:focus{

    outline:none;

    box-shadow:none;

}

.accordion-button:not(.collapsed){

    color:var(--primary);

    background:#fbe9d3;

    box-shadow:none;

}

.stickyItem{

    position: sticky;

    position: -webkit-sticky;

    top: 100px;

    z-index: 9;

}

.bgCallAction{

    background:url('../img/Hero.png') center center/cover no-repeat;

    position:relative;

    z-index:1;

}

.bgCallAction:after{

    content:'';

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.8);

    z-index:-1;

}

.headerTable{

    padding:10px;

}

.bgItem1{

    background:#f5be7d;

}

.bgItem2{

    background:var(--primary);

}

.rowItem p{

    padding:10px 0;

}

.rowItem{

    padding:0px 15px;

    border:1px solid #e0e0e0;

    border-bottom:none;

}

.rowItem:last-child{

    border-bottom:1px solid #e0e0e0;;

}

.rowItem:nth-child(2n+1){

    background:#f5f5f5;

}

.rowItem p{

    margin-bottom:0;

}

.scrollRight{

    height:700px;

    overflow-y:auto;

}

.footerList ul li{

    font-size:14px;

    color:#fff;

    padding:3px 0;

}

hr{

    border-color:#999;

}

#accordionLeft .accordion-item, #accordionRight .accordion-item{

    margin-bottom:10px;

}

.itemChoice{

    margin-bottom:5px;

    padding:15px 0;

    border-top:1px solid #e0e0e0;

}

.itemChoice{

    position:relative;

}

/*.itemChoice:before{*/

/*    content: "\f058";*/

/*    font-family: var(--fa-style-family, "Font Awesome 6 Free");*/

/*    font-weight: var(--fa-style, 900);*/

/*    font-size: 20px;*/

/*    color: var(--primary);*/

/*    position: absolute;*/

/*    left: 0;*/

/*    top: 6px;*/

/*}*/

.leaderShip img{

  width:  100%;

  object-fit:cover

}

.leaderShip {

    position: relative;

    margin-bottom: 30px;

    cursor: pointer;

}

.leaderDesc{

  position: absolute;

  bottom: 0px;

  left: 0px;

  width: 100%;

  opacity: 1;

  transition: all 0.3s ease-in-out;

  padding:0px 20px;

  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);

}

.leaderDesc p{

  transition: all 0.3s ease-in-out;

}

.itemCols{

    display:flex;

    align-items:center;

    gap:15px;

}

.iconCols{

    width:50px;

}

.iconCols img{

    max-width:100%;

}

.btnToggleOption{

    position: absolute;

    top: -85px;

    left: 50%;

    transform: translateX(-50%);

    background: #000;

    padding:5px 15px;

    border-radius: 10px;

    border: none;

    color: #fff;

    font-size: 14px;

    font-weight:600;

    cursor:pointer;

}

.tableBg th:nth-child(2){

    background:var(--primary);

}

.tableBg th:nth-child(3){

    background:#f5be7d;

}

.tableBg thead th {

  position: sticky;

  top: 0;

  background-color: #fff;

  z-index: 2;

}

.noRe{

    display:none;

}
.logosReview{
  display: flex;
  gap: 15px;
}
.logosReview img{
  width: 120px;
}
.logosReview div{
  background:#fff;
  padding:5px;
  border-radius: 5px;
}
.accordion-item:not(:first-of-type){
  border-top:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}