body{font-family: 'Raleway', sans-serif; color: rgb(58, 58, 58);}
.row{margin-right:0; margin-left:0;}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{padding-right:0; padding-left:0;}

/*  sizing */
.dip_size_40px{height:40px; width:40px;}
.dip_size_50px{height:50px; width:50px;}
.dip_max_w_80px{max-width:80px;}
.dip_max_w_100px{max-width:100px;}
@keyframes rotateLeftRight{
    0% {transform: rotate(0deg);}
    25% {transform: rotate(-30deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(30deg);}
    100% {transform: rotate(0deg);}
}
.dip_icon_play{background-image:url('/img/icons/play_arrow_b.svg');}
.dip_icon_pause{background-image:url('/img/icons/pause_b.svg');}
.dip_popup_menu_btn{ color: #000; background-color: transparent; border: 1px solid #000; border-radius: 3px; margin-top: 0.3125rem; margin-bottom: 0.3125rem;  padding: 0.3125rem 0.6rem; }
.dip_popup_menu_btn_active{color: #fff; background-color: #000;}
.dip_descr_t{font-size:14px;}

.di_max_w_50P{max-width:50%;}
.di_max_w_80P{max-width:80%;}
.di_max_w_100P{max-width:100%;}

.dip_max_h_60vh{max-height:60vh;}

#diCaseStudiesCarousel .carousel__slide{width: var(--carousel-slide-width, 80%);}
#diCaseStudiesCarousel a:hover{text-decoration:none;}
#diAboutChangeText .carousel__slide{width: var(--carousel-slide-width, 100%); font-size:20px;}
#diReviewCarousel .carousel__slide{width: var(--carousel-slide-width, 100%); text-align: center;}

/* ! sizing ! */


/* display none */
@media screen and (max-width: 767px) {
    .dip_hide_mobile{display:none;}
}
@media screen and (min-width: 768px) {
    .dip_hide_desktop{display:none;}
        .di_m_b_120px {
            margin-bottom: 120px !important;
        }
}

/* padding & margin */
.dip_p_0_10px{padding: 0 10px!important;}
.dip_p_0_20px{padding: 0 20px!important;}

.di_m_t_5px{margin-top: 5px!important;}
#diRealEstateCarousel .carousel__slide, #diEcommCarousel .carousel__slide{padding: 0.1rem;}

.dip_m_l_-10px{margin-left:-10px;}
/* ! padding & margin ! */

/* borders */
.dip_b_b_b_3{border-bottom: 1px solid rgba(0,0,0,0.3);}
.accordion button:focus, .accordion button:focus-within, .accordion button:focus-visible, .accordion button:active, .accordion button:hover{outline:0!important;}
/* ! borders ! */

/*  colors  */
a, a:hover{color:#000;}
.dip_bg_b_3{ background-color: rgba(0,0,0,0.03); }
/* ! colors ! */

/*   gallery   */
.fancybox__container{z-index:10050!important;}
/* ! gallery ! */

/* text */
.dipPropScrollH{padding:0 7px 10px 7px; color:#000; border-bottom:1px solid rgba(0,0,0,0.3); float:left;}
.dipPropScrollHSelected, .dipPropScrollH:hover{font-weight:600; text-decoration:none; color:var(--blue); border-bottom:3px solid var(--blue);}
.dipAnchor{height:50px; margin-top:-50px; position:relative; z-index: -1;}
.dip_c_pointer, .dip_popup_menu_btn{cursor:pointer;}
.dip_break_all{word-break: break-all;}

.searchGridInput, .searchGridInput:focus-visible, .searchGridInput:focus-within{border: 0; font-size: 18px; outline:0px;}
.searchSubmitIcon{height: 40px; width: 40px; border: 0; background-color: var(--primary);}
/* ! text ! */

/* grids */
.di_grid_3{ display:grid; grid-template-columns: [start] auto [col1] auto [col2] auto [end]; }
.di_cell_auto{ align-self: center; justify-self: center;}


.sectionTitleNumberGrid{ display:grid; grid-template-columns: [start] auto [col1] min-content [end]; }
.sectionTitleGrid, .sectionNumberGrid{align-self: baseline;  grid-row-start: 1; grid-row-end: 2;}
.sectionTitleGrid{grid-column-start: 1; grid-column-end: 2;}
.sectionNumberGrid{grid-column-start: 2; grid-column-end: 3; font-size:200px; line-height: 150px; justify-self: right;}
.sectionTextGrid{grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;}

.sectionHalfTitleNumberGrid{ display:grid; grid-template-columns: [start] auto [end]; }
.sectionHalfTitleGrid, .sectionHalfNumberGrid{grid-column-start: 1; grid-column-end: 2;}
.sectionHalfNumberGrid{grid-row-start: 1; grid-row-end: 2; font-size:120px; line-height: 100px;}
.sectionHalfTitleGrid{grid-row-start: 2; grid-row-end: 3;}
.sectionHalfTextGrid{grid-row-start: 3; grid-row-end: 4;}
.sectionHalfImgGrid{grid-row-start: 4; grid-row-end: 5;}

.searchGrid{ display:grid; grid-template-columns: [start] 10px [line1] auto [line2] 10px [end]; grid-template-rows: [row-start] auto [row-1] 50px [row-2] auto [row-end];}
.searchGridBar{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;  display:grid; grid-template-columns: [start] 20px [line1] auto [line2] 40px [line3] 5px [end];}
.searchGridInput{ grid-column-start: 2; grid-column-end: 3; }
.searchGridSubmit{ grid-column-start: 3; grid-column-end: 4; align-self: center;}
.searchGridFilters{grid-column-start: 2; grid-column-end: 3; align-self: center;}
.searchGridSearchLP{  grid-template-columns: [start] 10px [line1] auto [line2] auto [line3] 10px [end]; grid-template-rows: [row-start] auto [row-end]; }
.searchGridSearchLP .searchGridBar{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }
.searchGridSearchLP .searchGridFilters{ grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2;}

.categAttrGrid{ display:grid; grid-template-columns: [start] 60% [line1] auto [line2] auto  [line3] auto [end]; 
    grid-template-rows: [row-start] auto [row-middle] auto [row-end];}
.categAttrDescr{ grid-column-start: 1; grid-column-end: 2; align-self: center; grid-row-start: 1; grid-row-end: 3; }
.categAttrRooms, .categAttrBaths, .categAttrArea, .categTitleRooms, .categTitleBaths, .categTitleArea{ align-self: center; justify-self: center; font-size:14px;}
.categAttrRooms, .categAttrBaths, .categAttrArea{ grid-row-start: 1; grid-row-end: 2; font-weight:600; }
.categTitleRooms, .categTitleBaths, .categTitleArea{ grid-row-start: 2; grid-row-end: 3; }
.categAttrRooms, .categTitleRooms{ grid-column-start: 2; grid-column-end: 3; }
.categAttrBaths, .categTitleBaths{ grid-column-start: 3; grid-column-end: 4; }
.categAttrArea, .categTitleArea{ grid-column-start: 4; grid-column-end: 5; }

.propMainAttrGrid{ display:grid; grid-template-columns: [start] 40% [line1] auto [line2] auto  [line3] auto  [line4] auto [end];  grid-template-rows: [row-start] auto [row-1] auto [row-2] 10px [row-3] auto [row-4] auto [row-5] auto [row-6] auto [row-end]; }
.propMainPrice, .propMainTitle, .propMainLocation, .propMainCTA{ align-self: center;}
.propMainRooms, .propMainBaths, .propMainSqm, .propMainRoomsDescr, .propMainBathsDescr, .propMainSqmDescr{ align-self: center; justify-self: center;}
.propMainType, .propMainTypeDescr{ align-self: center; justify-self: right;}
.propMainRoomsDescr, .propMainBathsDescr, .propMainSqmDescr{font-size:14px;}
.propMainPrice, .propMainPriceDescr { grid-column-start: 1; grid-column-end: 2; }
.propMainRooms, .propMainRoomsDescr { grid-column-start: 2; grid-column-end: 3; }
.propMainBaths, .propMainBathsDescr { grid-column-start: 3; grid-column-end: 4; }
.propMainSqm, .propMainSqmDescr { grid-column-start: 4; grid-column-end: 5; }
.propMainType, .propMainTypeDescr{ grid-column-start: 2; grid-column-end: 5; }
.propMainPrice, .propMainRooms, .propMainBaths, .propMainSqm, .propMainType{ grid-row-start: 1; grid-row-end: 2; font-weight:500; }
.propMainPriceDescr, .propMainRoomsDescr, .propMainBathsDescr, .propMainSqmDescr, .propMainTypeDescr{ grid-row-start: 2; grid-row-end: 3; }
.propMainTitle, .propMainLocation, .propMainCTA{ grid-column-start: 1; grid-column-end: 5; }
.propMainTitle{ grid-row-start: 4; grid-row-end: 5; font-weight:500; } 
.propMainLocation{ grid-row-start: 5; grid-row-end: 6; } 
.propMainCTA{ grid-row-start: 6; grid-row-end: 7; } 

.ensamblePropGrid{ display:inline-grid; grid-auto-columns: 250px;}
.ensamblePropCard{grid-row-start: 1; grid-row-end: 2; }

.featAttrGrid{ display:grid; grid-template-columns: [start] 40% [line1] 60% [end];  grid-template-rows: auto; }
/* .featAttrFull, .featAttrDef, .featAttrVal{ align-self: center; } */
.featAttrDef, .featAttrVal{ border-bottom: 1px solid rgba(0,0,0,0.3); margin-top:10px; font-size:14px; }
.featAttrFull{ grid-column-start: 1; grid-column-end: 3; }
.featAttrDef{ grid-column-start: 1; grid-column-end: 2; }
.featAttrVal{ grid-column-start: 2; grid-column-end: 3; }

.propMedImgGrid{ margin-left:2vw; display: grid; column-gap: 1.5vw; row-gap: 1.5vw; grid-template-columns: [start] 31vw [col-1] 31vw [col-2] 31vw [end]; grid-auto-rows: 31vw;}

.qualifPopGrid{ display:grid; grid-template-columns: [start] 100% [end];  grid-template-rows: 50px [start] auto [row-1] 80px [end]; }
.qualifPopHead, .qualifPopForm, .qualifPopFoot{ align-self: center; }
.qualifPopHead{ grid-row-start: 1; grid-row-end: 2; }
.qualifPopForm{ grid-row-start: 2; grid-row-end: 3; }
.qualifPopFoot{ grid-column-start: 1; grid-column-end: 2;  grid-row-start: 3; grid-row-end: 4; justify-self: center; }

.dipHomeHeaderMenuGrid{
    display:grid;
    grid-template-columns: [start] 10px [line1] auto [line2] 30px  [line3] 10px [end];
}
.dipHomeHMLogo{ grid-column-start: 2; grid-column-end: 3; align-self: center; }
.dipHomeHMBurgerMenu{ grid-column-start: 3; grid-column-end: 4; align-self: center;}

.dipMainSpecsGrid{ display:grid; grid-template-columns: [start] 50% [line1] auto [line2] auto [end]; grid-template-rows: [row1-start] auto [line1] 10px [line2] auto [line3] auto [last-line]; }
.dipMainSpecsPrice{ grid-column-start: 1; grid-column-end: 2;}
.dipMainTitle{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: line2;
    grid-row-end: line3;
}
.dipMainLoc{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: line3;
    grid-row-end: last-line;
}

.dipHeaderMenuGrid{
    display:grid;
    grid-template-columns: [start] 30px [line1] 10px [line2] auto [line3] auto [line4] 30px [end];
    grid-template-rows: [row1-start] 50px [last-line];
}
.dipHMBackBtn{
    grid-column-start: 1;
    grid-column-end: 2;
    justify-self: center;
    align-self: center;
}
.dipHMClientLogo{
    grid-column-start: 3;
    grid-column-end: 4;
    align-self: center;
}
.dipHMLogoTop, .dipHMNavTop{
    grid-column-start: line3;
    grid-column-end: end;
    align-self: center;
}

.dipHMChangeContentInner, .dipHMNoChangeInner{
    display:grid;
    grid-template-columns: [start] auto [line1] 30px [line2] 10px [end];
}
.dipHMDiLogo{
    grid-column-start: 1;
    grid-column-end: 2;
    align-self: center;
}
.dipHMNavBurger{ grid-column-start: 2; grid-column-end: 3;  align-self: center; }



.dipFooterMenuGrid{
    display:grid;
    grid-template-columns: [start] auto [line1] 5px [line2] auto [end];
}
.dipFMMainBtn{
    grid-column-start: 1;
    grid-column-end: 2;
}
.dipFMSecBtn{
    grid-column-start: 3;
    grid-column-end: 4;
}

/* ! grids ! */

/*   animations   */
.di_click_me_after::after{
    content: "";
    width: 27px;
    height: 27px;
    background-image: url(/img/icons/touch_app_di.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: inline-block;
    top: 7px;
    left: 0;
    opacity: 0.75;
    -webkit-animation: linear infinite;
    -webkit-animation-name: leftRight;
    -webkit-animation-duration: 2s;
}

/* ! animations ! */

/*  elements  */
.di_menu_icon{background-color: #000; background-size: contain; background-repeat: no-repeat; display: inline-block;}
.dipHomeHMBurgerMenu{-webkit-mask-image:url(/img/icons/burger_menu.svg); mask-image:url(/img/icons/burger_menu.svg);}
.dipHomeHMBurgerMenu.di_menu_open{ -webkit-mask-image:url(/img/icons/di_menu_close.svg); mask-image:url(/img/icons/di_menu_close.svg);}
#dipNavMenuDD{top:60px; left:100vw;}
.propLeadForm{ padding: 10px; border-radius: 6px; }
/* ! elements ! */

/* MD */
@media (min-width: 720px){
    .di_grid_md_6{ display:grid; grid-template-columns: [start] auto [col1] auto [col2] auto [col3] auto [col4] auto [col5] auto [end]; }

    .searchGrid{ grid-template-columns: [start] auto [line1] 500px [line2] auto [end];}
    .searchGridSearchLP .searchGridBar{ grid-column-start: 1; grid-column-end: 2;}
    .searchGridSearchLP .searchGridFilters{ grid-column-start: 2; grid-column-end: 3;}

}

/* LG */
@media (min-width: 992px){
    .dip_p_lg_0_10px{padding: 0 10px;}
    .di_p_lg_0{padding:0!important;}
    .di_m_lg_t_40px{margin-top:40px!important;}

    .di_w_lg_100P{width:100%!important;}
    .di_max_w_lg_50P{max-width:50%;}


    #diRealEstateCarousel .carousel__slide, #diCaseStudiesCarousel .carousel__slide, #diEcommCarousel .carousel__slide{width: var(--carousel-slide-width, 33%);}
    #diRealEstateCarousel .carousel__slide, #diEcommCarousel .carousel__slide{text-align:center;}

    .sectionTitleNumberGrid{ grid-template-columns: [start] min-content [line1] 40px [line2] auto [end]; }
    .sectionTitleGrid, .sectionTextGrid{align-self: flex-start;  grid-row-start: 1; grid-row-end: 2;}
    .sectionNumberGrid{grid-column-start: 1; grid-column-end: 2; margin-top: -30px; grid-row-start: 1; grid-row-end: 3; justify-self: left;}
    .sectionTitleGrid, .sectionTextGrid{grid-column-start: 3; grid-column-end: 4;}
    .sectionTextGrid{grid-row-start: 2; grid-row-end: 3;}

    .sectionHalfTitleNumberGrid{ grid-template-columns: [start] auto [line1] 450px [line2] 20px [end];}
    .sectionHalfTitleNumberRightGrid{ grid-template-columns: [start] 20px  [line1]  450px  [line2] auto [end];}
    .sectionHalfTitleGrid, .sectionHalfNumberGrid, .sectionHalfTextGrid, .sectionHalfImgGrid{grid-column-start: 2; grid-column-end: 3;}

    .dipHeaderMenuGrid_lg{
        display:grid!important;
        grid-template-columns: [start] 30px [line1] 10px [line2] auto [line3] auto [line4] auto [end];
        grid-template-rows: [row1-start] 50px [last-line];
    }
    .dipHMDiLogo_lg{ grid-column-start: 4; grid-column-end: 5; align-self: center; }
    .dipHMDiLogoHome_lg{ grid-column-start: 3; grid-column-end: 5; align-self: center; }
    .dipHMLinks_lg{ grid-column-start: 5; grid-column-end: 6; align-self: center; display:grid!important; grid-template-columns: auto auto auto auto; }

    #dipNavMenuDD{width:30vw!important;}

}
/* ! LG ! */

/* XL */
@media (min-width: 1200px){

}
/* ! XL ! */

.chart-budget-div{
    width: 75%;
    margin: auto;
}

@media screen and (max-width:600px){
    .chart-budget-div {
    width: 100%;
    }
}


@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    opacity: 0;
    animation: fadeInRight 0.6s ease forwards;
}

/* Delay classes for staggered appearance */
.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

.delay-5 {
    animation-delay: 1s;
}

.delay-6 {
    animation-delay: 1.2s;
}


.case-study-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 80px;
    width: 100%;
    /* flex-wrap: wrap; */
}
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    } }
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    } }
.case-study-item.left {
    flex-direction: row;
}

.case-study-item.left img {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.case-study-item.right img {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.case-study-item.left.show-on-scroll img {
    opacity: 1;
    transform: translateX(0);
}

.case-study-item.right.show-on-scroll img {
    opacity: 1;
    transform: translateX(0);
}
.case-study-item.right {
    flex-direction: row-reverse;
    text-align: right;
}
@media screen and (max-width: 768px) {
    .case-study-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
    }
        .case-study-item .text {
        max-width: 100% !important;
        margin: 0 auto;
        }
    .case-study-item img {
        max-width: 100%;
        width: 60%;
        height: auto;
        margin: 0 auto;
        scale: 1.5;
    }
    
    .case-study-item .text {
        max-width: 100%;
        margin-top: 16px;
    }
        .case-study-item.left {
            flex-direction: row;
        }
    
        .case-study-item.right {
            flex-direction: row;
            text-align: center;  }
    
}

.case-study-item img {
    max-width: 400px;
    transition: transform 0.3s ease;
}

.case-study-item .text {
    max-width: 50%;
}

.hover-scale:hover {
    transform: scale(1.05);
}