:root body {
    margin-left: 50px !important;
    width: calc(100% - 50px) !important;
    font-family: 'Heebo', sans-serif !important;

}
.page-id-22 .custom-footer{
	display: none !important;
}

.project-grid .container{
	padding: 0px !important;
	max-width: unset !important;
	width: 100% !important;
}
.hero{
position:relative;
overflow:hidden;
}

.hero__video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

.hero-link-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5;
}

.hero__container{
position:relative;
z-index:10;
}

.hero__content{
position:relative;
z-index:10;
}

.parent{
	gap: 30px !important;
}

.parent>div .gallery-overlay p{
	font-family: 'Heebo', sans-serif !important;
}

.hero__content{
    display: none;
}





/* ── SIDEBAR ── */
#dsr-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 50px;
    height: 100vh;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    font-family: 'Heebo', sans-serif;
	background: #fff;
}
#dsr-clip {
    flex: 1;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

#dsr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dsr-wrap svg {
    width: 250px;
    height: 250px;
    transform: rotate(270deg) translateX(0px);
    position: relative;
    overflow: visible;
    will-change: transform;
}

/* #dsr-wrap img {
	width: 100% !important;
    display: block;
    margin-bottom: 8px;
    transition: opacity 0.2s ease;
} */
/* #dsr-clip .first_img{
    transform: rotate(180deg);
} */
#dsr-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dsr-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsr-btn:hover {
    background-color: unset;
	color: #000;
}

#dsr-ibtn {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 22px;
	text-transform: uppercase;
	font-weight:600;
}

#dsr-sbtn svg {
    width: 25px;
    height: 25px;
    stroke: #000;
    stroke-width: 1.8;
    fill: none;
}

.dsr-term {
    color: #E87722;
    font-weight: 700;
    text-transform: uppercase;
    font-size: inherit;
    letter-spacing: 0.05em;
    display: block;
    text-align: center;
    transform: rotate(-180deg);
    writing-mode: vertical-rl;
}

.dsr-slash {
    width: 65%;
    background: #E87722;
    opacity: 0.5;
    height: 2px;
    margin: 0px auto 5px auto ;
}



/* ── INDEX PANEL ── */
#dsr-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* height: calc(100vh - 20px); */
    background: #fff;
    z-index: 99999;
    transform-origin: left bottom;
    transform: rotateZ(90deg);
    transition: transform .6s cubic-bezier(.77, 0, .175, 1);
    pointer-events: none;
    overflow: hidden;
}

#dsr-panel.open {
    transform: rotateZ(0deg);
    pointer-events: all;
}

.dsr-inner {
    padding: 20px 20px 50px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Heebo', sans-serif;
}

.dsr-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dsr-logo img{
	width: 50%;
}

.dsr-cw {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dsr-close {
    writing-mode: vertical-rl;
    transform: rotate(-90deg);
    font-size: 22px;
    cursor: pointer;
    background: none;
    border: none;
    color: #000;
	text-transform: uppercase;
	font-weight:600;
	font-family: 'Heebo', sans-serif;
}

.dsr-close:hover,
.dsr-cx:hover {
    background-color: unset;
	color: #000;
}

.hero__title{
	font-size: 34px !important;
	font-weight: 600 !important; 
	margin-top: -30px !important;
	font-family: 'Heebo', sans-serif;
}

.dsr-cx {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #000;
    padding: 0;
    line-height: 1;
}

/* ── SEARCH ── */
.dsr-sr {
    display: flex;
    align-items: center;
    border: 1px solid #000;
    margin-bottom: 20px;
    padding: 7px 10px;
	border-radius: 4px;
    gap: 0px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.dsr-sr svg {
    width: 14px;
    height: 14px;
    stroke: #999;
    stroke-width: 1.8;
    fill: none;
    flex-shrink: 0;
}

#dsr-search {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    letter-spacing: .06em;
    color: #000;
    background: transparent;
}

/* ── CATEGORIES ── */
.dsr-cats {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
	width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.dsr-cc {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dsr-cc a {
    font-size: 20px;
    letter-spacing: .08em;
    text-decoration: none;
    color: #000;
    cursor: pointer;
	font-weight: 500;
	font-family: 'Heebo', sans-serif;
}

.dsr-cc a:hover {
    opacity: .4;
}

.dsr-cc a.active {
    font-weight: 700;
    opacity: .4;
}

.dsr-cr {
    text-align: left;
}

.dsr-cr a {
    display: inline-block;
    /* transform: scaleX(-1); */
}


@media (max-width: 767px){
    :root body {
        margin-left: 40px !important;
        width: calc(100% - 40px) !important;

    }
    .dsr-logo img{
        width: 70%;
    }
    #dsr-sidebar{
        width: 40px;
    }
    #dsr-ibtn{
        font-size: 18px;
    }
    .dsr-close{
        font-size: 18px;
        margin: 0px;
        padding: 0px 10px;
    }
    .dsr-cx{
        font-size: 16px;
    }
    .dsr-cw{
        gap: 10px;
    }
    /* .hero__content{
        padding: 0px 30px 0px 20px;
        margin: auto 10% auto 0px;
    } */
    .hero__title{
        font-size: 20px !important;
    }
    .hero__logo{
        margin-bottom: 20px;
    }
    /* Grid chota - dusri image jaisa */
    .parent__desk {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-rows: 120px !important;
        gap: 10px !important;
    }
    
    /* Span sizes bhi chote */
    .parent > .rise-item:nth-child(10n+1) { grid-column: span 2 !important; grid-row: span 2 !important; }
    .parent > .rise-item:nth-child(10n+2) { grid-column: span 1 !important; grid-row: span 1 !important; }
    .parent > .rise-item:nth-child(10n+3) { grid-column: span 1 !important; grid-row: span 2 !important; }
    .parent > .rise-item:nth-child(10n+4) { grid-column: span 1 !important; grid-row: span 1 !important; }
    .parent > .rise-item:nth-child(10n+5) { grid-column: span 1 !important; grid-row: span 1 !important; }
    .parent > .rise-item:nth-child(10n+6) { grid-column: span 2 !important; grid-row: span 1 !important; }
    .parent > .rise-item:nth-child(10n+7) { grid-column: span 1 !important; grid-row: span 1 !important; }
    .parent > .rise-item:nth-child(10n+8) { grid-column: span 2 !important; grid-row: span 1 !important; }
    .parent > .rise-item:nth-child(10n+9) { grid-column: span 1 !important; grid-row: span 2 !important; }
    .parent > .rise-item:nth-child(10n+10){ grid-column: span 1 !important; grid-row: span 1 !important; }

    /* Container full width */
    .masonry .container {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .dsr-cats{
        flex-direction: column;
        row-gap: 20px;
    }
    .dsr-cc a{
        font-size: 16px;;
    }


}


/*Mobile Responsivness*/
@media screen and (max-width:480px){

.hero{
	min-height: 27vh !important;
	height: 22vh !important;
	}
#dsr-sidebar{
  width: 40px !important;
    height: 100vh;
}
:root body {
     margin-left: 40px !important;
     width: calc(100% - 40px) !important;
    }
	#dsr-wrap img{
		margin-bottom: -5px !important;
	}
	.gallery-overlay p{
		font-size: 12px !important;
	}
}