/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    https://diviextended.com/
 Description:  A child theme of Twenty Twenty WordPress theme.
 Author:       Elicus Technologies
 Author URI:   https://elicus.com
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/
/* @import url("../twentytwenty/style.css"); */
:root {
    --basefont: 'Lexend', sans-serif;
    --fblack:#000000;
    --fwhite:#ffffff;
    --yellow:#FFCC00;
    --border:rgba(0,0,0,0.10);
    --black10:rgba(0,0,0,0.10);
    --black80:rgba(0,0,0,0.80);
    --black05:rgba(0,0,0,0.05);
    --white80:rgba(255,255,255,0.8);
    --white20:rgba(255,255,255,0.2);
    --f16:16px;
    --f50:50px;
    --f20:20px;
    --f22:22px;
    --f14:14px;
    --f12:12px;
    --f42:42px;

    --s20:20px;
    --s10:10px;
    --s12:12px;
    --s15:15px;
    --s3:3px;
    --s5:5px;
    --s8:8px;
    --s25:25px;
    --s30:30px;
    --s40:40px;
    --s70:70px;
    --s50:50px;
    --s100:100px;

    --radius4:4px;
    --radius8:8px;
    --radius20:20px;
    --radius500:500px;
    


}


body {
    font-size: var(--f16);
    font-family: var(--basefont);
    font-weight: 400;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    padding-top:200px;
    /* background-color: red; */

}
a{
    text-decoration:none;
    color:inherit;
}
.primaryBtn{
    background-color: var(--yellow);
    padding: var(--s20) var(--s40);
    display: flex;
    gap: var(--s10);
    border-radius:var(--radius8);
    font-weight: 500;
    border: 1px solid var(--yellow);
}
.primaryBtn:hover{
    background-color: var(--fwhite);
    
}
.f14 { font-size: var(--f14); }
.f16 { font-size: var(--f16); }
.f20 { font-size: var(--f20); }
.f22 { font-size: var(--f22); }
.f42 { font-size: var(--f42); }
.f50 { font-size: var(--f50); }
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding:var(--s15) 0;
    /* background-color: var(--fwhite); */
    height: 95px;
    border-bottom: 1px solid transparent;
}
header.header-scroll {
  background-color: var(--fwhite);
  z-index: 5;
  border-bottom-color: var(--border);
  /* padding-top: 5px; */
  
}
header.header-scroll.black{
    border-bottom-color: var(--black10);
}
 header.black .headerLogo .logoBlack   {
    display: none;
}
header .headerLogo .logoWhite{
    display: none;
}
 header.black.header-scroll .headerLogo .logoBlack{
    display: block;
}
header.black .headerLogo .logoWhite{
    display: block;
}
header.black.header-scroll .headerLogo .logoBlack ,  header.black .headerLogo .logoWhite{
    display: block;
}
 header.black.header-scroll .headerLogo .logoWhite{
    display: none;
}
.headerLogo{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top:-10px;
}
.langBtn{
    display: flex;
    align-items: center;
    padding: var(--s5);
    border:1px solid var(--border);
    border-radius:var(--radius500);
    width:65px;
    justify-content: space-between;
    background-color: transparent;
    z-index: 2;
    position: relative;
    
}
.black .langBtn{
    border: 1px solid rgba(255, 255, 255, 0.30);

}
.black .langBtn .caret-fix::before{
    filter:invert(1);
}
/* Make the flag look like your screenshot */
.flag{ width:25px; height:25px; border-radius:50%; object-fit:cover; }
.dropdown-toggle:after{ display:none; }

.languageDropdown .langBtn[aria-expanded="true"] .dropdown-toggle {
  transform: rotate(180deg);
}
.caret-fix::before{ 
    content:"";
    background-image: url('../images/down.svg');
    background-repeat: no-repeat;
      background-size: contain;
    position: absolute;
    right: 10px;
        top: calc(50% + 2px);
     transform: translateY(-50%);
        height: 10px;
    width: 12px;
 }
 .h25w25{
    height: 25px;
    width: 25px;
 }
.fblack80 {
    color: var(--black80);
}

.fwhite80 {
    color: var(--white80);
}
.fwhite{
    color: var(--fwhite);
}
.w75{
    width:75%;
}
.gap10{
    gap:var(--s10);
}
.gap15{
    gap:var(--s15);
}
.gap20{
    gap:var(--s20);
}
.gap30{
    gap:var(--s30);
}
.gap50{
    gap:var(--s50);
}
.gap3{
    gap:var(--s3);
}
.gap5{
    gap:var(--s5);
}


.bannerPill{
    border: 1px solid var(--border);
    padding:var(--s8) var(--s30) var(--s8) var(--s10);
    border-radius:var(--radius500);
    background-color: var(--fwhite);
}
.profile-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .profileImg {
      position: relative;
      width: 50px;
      height: 50px;
    }

    .profileImg img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid white;
    }
    .profileSlack .profileImg:not(:first-child) {
        margin-left: -10px;
    }
    .profileSlack .profileImg:nth-child(1) { z-index: 3; }
.profileSlack .profileImg:nth-child(2) { z-index: 2; }
.profileSlack .profileImg:nth-child(3) { z-index: 1; }
.seperatorH{
    height:30px;
    width:1px;
    background-color: var(--border);
}
.seperatorH.white{
    background-color: rgba(255,255,255,0.5);
    height:13px;
}
.bgPattern{
    background-image: url('../images/bg-pattern.svg');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: -1;
}
.bgPattern:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    height: calc(100% + 50px);
    width: 100%;
    background: linear-gradient(180deg, rgb(255 208 0 / 10%) 0%, rgb(255 208 0 / 3%) 100%);
    
}
 .bgPattern.yellow:before{
    background: linear-gradient(180deg, rgba(255, 208, 0, 0.35) 0%, rgba(255, 208, 0, 0.02) 100%);
        height: 100vh;
    top: 0;
}
.bgPattern.black {
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 1000px;
    height: 980px;
}
.bgPattern.black:before{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 45%, #000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%);
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 1000px;
    height: 100%;
}
.space100px{
    height: var(--s100);
}
.gap70{
    gap: var(--s70);
}
.cardBox{
    border: 1px solid var(--border);
    border-radius: var(--radius8);
    padding: var(--s30) var(--s30) var(--s25) var(--s30);
    display: flex;
    flex-direction: column;
    gap: var(--s40);
}
.bgBlack05{
    background-color:var(--black05);
}
.cardBox .iconBox{
    height: 60px;
    width: 60px;
    border-radius: var(--radius4);
    background-color: var(--black05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.threeCard{
        grid-template-columns: repeat(3, 1fr);
        display: grid;
}
.twoCards{
    grid-template-columns: repeat(2, 1fr);
        display: grid;
        
}
.customHr{
    border-top: 1px solid var(--border);
    opacity:1;
}
.py100{
    padding: var(--s100) 0;
}
.py30{
    padding: var(--s30) 0;
}
.gap100{
    gap: var(--s100);
}
.radius20{
    border-radius: var(--radius20);
}
.radius4{
    border-radius:var(--radius4);
}
.zigzagMain:nth-child(even) .leftPart{
    order: 2;
} 
.zigzagMain:nth-child(even) .rightPart{
    order: 1;
} 
footer{
    background-color: var(--fblack);
   
}
.borderTOpwhite20{
    border-top: 1px solid var(--white20);
}
.h20w20{
    height: 20px;
    width: 20px;
}
.h50w50{
    height: 50px;
    width: 50px;
}
.companyLogobox{
    border: 1px solid var(--border);
    padding:var(--s15);
    border-radius:30px;
    max-width:650px;
    max-height:250px;
    background: rgba(255, 255, 255, 0.20);

backdrop-filter: blur(25px);
}
.companyLogobox img{
    border-radius: 30px;
    height:auto;
    width:auto;
}
.propertyBox{
    border: 1px solid var(--border);
    border-radius: var(--radius8);
    background-color:var(--white);
    padding:var(--s10);
}
.f12{
    font-size:var(--f12);
}
.yellowPill{
    background-color:var(--yellow);
    padding:var(--s3) var(--s10);
    border-radius:var(--radius500);
    font-size:var(--f12);
    font-weight:500;
    width:max-content;
}
.detailPill{
    border: 1px solid var(--border);
    border-radius:var(--radius500);
    padding:var(--s5) var(--s15);
    font-size: var(--f14);
}
.space300px{
    height: 300px;;
}

/* default: 3-up */
.cardBoxMain > .cardBox {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: calc((100% - (2 * 50px)) / 3);
}

/* ===== tail-row rules (but NOT for single-card) ===== */

/* totals ≡ 1 (mod 3): last = 50%, except when only one card */
.cardBoxMain:has(> .cardBox:nth-child(3n + 1):last-child):not(:has(> .cardBox:only-child))
  > .cardBox:last-child {
  width: calc((100% - 50px) / 2);
}

/* totals ≡ 2 (mod 3): last two = 50% each */
.cardBoxMain:has(> .cardBox:nth-child(3n + 2):last-child)
  > .cardBox:nth-last-child(-n + 2) {
  width: calc((100% - 50px) / 2);
}

/* ===== exactly one card → 100% ===== */
.cardBoxMain:has(> .cardBox:only-child) > .cardBox:only-child {
  width: 100%;
}
.w0flex1{
    width: 0;
    flex-grow: 1;
}
.languageDropdown .dropdown-menu{
    padding: 0px;
    border-radius: var(--radius4);
}
.languageDropdown .dropdown-menu .dropdown-item{
    padding: var(--s10) var(--s15);
    border-bottom: 1px solid var(--border);
}
.languageDropdown .dropdown-menu .dropdown-item:hover{
    border-radius: var(--radius4);
}
.footernav a:hover{
    text-decoration: underline;
}
.smallPill{
    font-size: var(--f12);
    border-radius:var(--radius500);
    font-weight: 500;
    text-transform: uppercase;
    padding: var(--s5) var(--s12);
}
.propertyTagabs{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: flex;
    gap: 5px;
    align-items: center;
}
.smallPill.black{
    background: var(--fblack);
    color: var(--fwhite);

 border: 1px solid rgba(255, 255, 255, 0.20);
}
.smallPill.white{
    background: var(--fwhite);
    color: var(--fblack);
    border: 1px solid var(--yellow);
}