@font-face {
    font-family: "kohinoor-regular";
    src: url("../fonts/KohinoorDevanagari-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "kohinoor-medium";
    src: url("../fonts/KohinoorDevanagari-Medium.woff") format("woff");
    font-weight: medium;
    font-style: italic;
}
@font-face {
    font-family: "kohinoor-semibold";
    src: url("../fonts/KohinoorDevanagari-Semibold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}
:root {
    --text-color: #000000;
} 
a {
    text-decoration: none;
}
body {
    font-family: "kohinoor-regular";
    margin: 0;
}
*, ::after, ::before {
    box-sizing: border-box;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#header {
    position: relative;
    width: 100%;
    background: transparent;
    z-index: 9;
    text-align: center;
    color: #f2f2f2;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0px;
}
.LogoHeader {
    margin: 0px 50px;
}
.MenuIconHeader {
    margin: 0px 50px;
}
.hamburger-menu {
    position: relative;
    background: #fff;
    transition: all 0ms 200ms;
    display: block;
    z-index: 9999;
}
.hamburger-wrapper {
    display: block;
    padding: 12px 0;
    z-index: 1338;
}
#header .MainHeaderLogo {
    width: 270px;
    position: relative;
    z-index: 1397;
}
.otherBackground .hamburger-menu {
    background: #58595b;
}
.otherBackground .hamburger-menu:before {
    background: #58595b;
}
.otherBackground .hamburger-menu:after {
    background: #58595b;
}
.hamburger-menu, .hamburger-menu:after, .hamburger-menu:before {
    width: 24px;
    height: 4px;
    border-radius: 2px;
}
.hamburger-menu:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    background: #fff;
    transition: bottom 200ms 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu:after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    background: #fff;
    transition: top 200ms 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.mobile-menu-overlay {
    z-index: 1337;
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    background: #FCFEF9;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0;
}
.otherBackground .hamburger-menu.animate {
    background: transparent;
}
.hamburger-menu.animate {
    background: transparent;
}
.hamburger-menu.animate:before {
    bottom: 0;
    background: #58595b;
    transform: rotate(-45deg);
    transition: bottom 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:after {
    top: 0;
    background: #58595b;
    transform: rotate(45deg);
    transition: top 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.visible {
    display: block !important;
    opacity: 1;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.mobile-menu-overlay ul {
    position: relative;
    top: 46.50%;
    transform: perspective(1px) translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    line-height: 36px;
    padding-inline-start: 0px;
}
.mobile-menu-overlay ul li {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.mobile-menu-overlay ul li {
    margin-bottom: 38px;
    list-style: none;
}
.mobile-menu-overlay ul li a {
    display: block;
    color: #58595b;
    text-decoration: none;
font-family: 'kohinoor-semibold';
    font-size: 44px;
    margin: 0px 0px 51px 0px;
}
.MenuSoicalMediaIcon {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -5%);
    display: flex;
    gap: 16px;
}
.MenuSoicalMediaIcon a img {
    height: 26px;
}
.MenuPageLink .hoverColor1:hover {
    color: #034078;
}
.MenuPageLink .hoverColor2:hover {
    color: #F1A208;
}
.MenuPageLink .hoverColor3:hover {
    color: #1282A2;
}
.MenuPageLink .hoverColor4:hover {
    color: #820C59;
}
.MenuPageLink .hoverColor5:hover {
    color: #7a9b76;
}
.container {
    width: auto;
    margin: 0px auto;
    padding: 0px 12%;
}
.footer{
    position: absolute;
    left: 0;
    text-align: center;
    background-image: url('../images/footer-bottom.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    width: 100%;
}
.f-heading{
    color: var(--text-color);
    font-size: 52px;
    line-height: 60px;
    font-family: 'kohinoor-semibold';
    margin: 0;
}
.f-content{
    color: var(--text-color);
    margin: 10px 0 0 0;
    font-size: 25px;
    line-height: 35px;
}
.footerdetail{
    padding: 0 0 430px 0;
}
.footerSoicalMediaIcon{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0 0 0;
    gap: 40px;
}
.footerSoicalMediaIcon a img{
    height: 44px;
    display: block;
}
.centerlogo{
    display: block;
    text-align: center;
    margin: 80px 0 0 0;
}
.logocontent{
    margin: 35px 0 0 0;
    text-align: center;
    font-size: 25px;
    line-height: 40px;
    font-family: 'kohinoor-semibold';
    padding: 0 20%;
}
.slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 50px 0 0 0;
}
.slider::before, .slider::after{
    content:"";
    position:absolute; 
    top:0;
    bottom:0; 
    width:12rem; 
    pointer-events:none;
    z-index:2;
    /* left & right gradient masks */
    background: linear-gradient(to right, #f6f6f6 0%, rgba(246,246,246,0) 100%);
}
.slider::after{
    right:0; 
    transform: scaleX(-1);
}
.slider::before{ 
    left:0;
}
.slider__track{
    display:flex;
    gap: 10px;
    width: max-content;   
    animation: scroll 40s linear infinite;
}
.slider:hover .slider__track, .slider:focus-within .slider__track{
  animation-play-state: paused;
}
.slide{
    flex: 0 0 auto; 
    height: 100%;
    width: auto;
    overflow: hidden;
    margin: 0;
}
.slide > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
}
@keyframes scroll{
    from{ transform: translateX(0); }
    to  { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
    .slider__track{ animation: none; }
}
.middlecontent{
    padding: 90px 0 140px;
}
.headingcontent{
    margin: 0 0 30px 0;
    text-align: center;
    font-size: 52px;
    line-height: 70px;
    font-family: 'kohinoor-semibold';
}
.paracontent{
    font-size: 30px;
    line-height: 40px;
    padding: 0 19%;
    text-align: center;
    margin: 0;
}
.whatwedo{
    padding: 0 0 180px 0;
}
.tab-container {
    display: flex;
    gap: 50px;
    height: 687px;
    width: 80%;
    margin: 0 auto;
}
.tab {
    flex: 0 0 333px;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}
.tab .tablinks {
    padding: 32px 36px 12px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 30px;
    line-height: 40px;
    color: #6E6E6E;
    font-family: 'kohinoor-medium';
}
.tab .tablinks.active{
    font-family: 'kohinoor-semibold';
    color: #080808;
}
.tabcontent{
    width: -webkit-fill-available;
}
.tabcontent .inner-tab{
    border-bottom: 1px solid #707070;
    display: flex;
    gap: 80px;
}
.tabcontent .inner-tab .inner-tablinks{
    font-size: 20px;
    line-height: 30px;
    color: #080808;
    padding: 12px;
}
.tabcontent .inner-tab .inner-tablinks.active{
    border-bottom: 2px solid #080808;
}
.timeline {
    position: relative;
    margin-left: 28px;
    margin-top: 45px;
}
.timeline::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #707070;
}
.timeline .item {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 0 0 60px 40px;
}
.timeline .item::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 34px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #707070;
}
.timeline .item .thumb {
    flex: 0 0 95px;
    width: 95px;
    height: 95px;
    border-radius: 6px;
    object-fit: cover;
}
.timeline .item .content .date-timeline{
    margin: 0;
    font-size: 20px;
    line-height: 22px;
    color: #080808;
    font-family: 'kohinoor-semibold';
}
.timeline .item .content .timeline-content{
    margin: 10px 0 0 0;
    font-size: 20px;
    line-height: 26px;
    color: #080808;
}
.timeline .item .content .timeline-content .readmore{
    font-family: 'kohinoor-medium';
    color: #080808;
    text-decoration: underline;
}
.min-content{
    height: 625px;
    overflow: auto;
}
.timelinesecondtab{
    margin-left: 0;
}
.timelinesecondtab::before, .timelinesecondtab .item::before {
    display: none;
}
.timelinesecondtab .item{
    padding: 0 0 60px 0;
}
/*slider*/
.frame{
    display:grid;
    place-items:center;
}
.outer{
    width:min(96vw,960px);
    background:#ffffff;
    border-radius:9px;
    border: 1px solid #CECECE;
    padding:25px 30px;
}
.stage{
    width:min(100%,880px);
    display:grid;
    grid-template-rows: 560px auto;
    row-gap: 30px;
    margin:0 auto;
    position:relative;
}
.stage > input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.tiles{ 
    position:relative;
    height:100%; 
}
.tile{
    position:absolute;
    top:50%;
    left:50%;
    width:420px;
    aspect-ratio:9/14;
    transform:translate(-50%,-50%) scale(1);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 34px rgba(0,0,0,.14);
    background:#ddd center/cover no-repeat;
    transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s,filter .45s,z-index .45s;
}
.tile img, .tile video{
    position:absolute; 
    inset:0;
    width:100%; 
    height:100%;
    object-fit:cover;
    display:block;
}
.tile video{ 
    opacity:0; 
    pointer-events:none;
    transition:opacity .4s ease;
}
.tile::after{
    content:""; 
    position:absolute; 
    inset:0; 
    margin:auto;
    width:64px;
    height:64px; 
    background:url(../images/play.png);
    background-repeat: no-repeat;
    background-size: contain;
    transition:opacity .2s;
    opacity:0;
    pointer-events:none;
}
.tile i{
    position:absolute; 
    top:50%;
    left:50%;
    width:420px; aspect-ratio:9/14;
    transform:translate(-50%,-50%) scale(1);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 34px rgba(0,0,0,.14);
    background:rgb(20 20 20 / 27%);
    cursor:pointer;
}
.side{ 
    transform:translate(-50%,-50%) scale(.65); 
    filter:saturate(.95) brightness(.98); 
}

#a:checked ~ .tiles .t1{ z-index:3; transform:translate(-50%,-50%) scale(.8); }
#a:checked ~ .tiles .t2{ z-index:2; transform:translate(calc(-50% + 310px),-50%) scale(.45); }
#a:checked ~ .tiles .t3{ z-index:1; transform:translate(calc(-50% - 310px),-50%) scale(.45); }

#b:checked ~ .tiles .t2{ z-index:3; transform:translate(-50%,-50%) scale(.8); }
#b:checked ~ .tiles .t3{ z-index:2; transform:translate(calc(-50% + 310px),-50%) scale(.45); }
#b:checked ~ .tiles .t1{ z-index:1; transform:translate(calc(-50% - 310px),-50%) scale(.45); }

#c:checked ~ .tiles .t3{ z-index:3; transform:translate(-50%,-50%) scale(.8); }
#c:checked ~ .tiles .t1{ z-index:2; transform:translate(calc(-50% + 310px),-50%) scale(.45); }
#c:checked ~ .tiles .t2{ z-index:1; transform:translate(calc(-50% - 310px),-50%) scale(.45); }

/* show play only on centered */
#a:checked ~ .tiles .t1:not(.playing)::after, #a:checked ~ .tiles .t1:not(.playing) i,
#b:checked ~ .tiles .t2:not(.playing)::after, #b:checked ~ .tiles .t2:not(.playing) i,
#c:checked ~ .tiles .t3:not(.playing)::after, #c:checked ~ .tiles .t3:not(.playing) i { opacity:1; }
  
.tile.playing img{ 
    opacity:0; 
}

.tile.playing video{ 
    opacity:1; 
    pointer-events:auto;
}
.arrows{
    display:flex; 
    justify-content:center; 
    gap:10px; 
}
.arrows label{
    width:26px; 
    height:26px;
    display:grid; 
    place-items:center; 
    cursor:pointer;
}
.arrows label::before{
    content:""; 
    width:15px; 
    height:15px;
    border:2px solid #BEBEBE;
    border-left:0; 
    border-bottom:0; 
    transform:rotate(45deg);
}
.arrows .prev::before{ transform:rotate(225deg); }

/* show only the matching arrow pair for the active slide */
#a:checked ~ .arrows .for-a{ 
    display:grid
}
#a:checked ~ .arrows .for-b, #a:checked ~ .arrows .for-c{ 
    display:none 
}
#b:checked ~ .arrows .for-b{ 
    display:grid 
}
#b:checked ~ .arrows .for-a, #b:checked ~ .arrows .for-c{ 
    display:none 
}
#c:checked ~ .arrows .for-c{ 
    display:grid 
}
#c:checked ~ .arrows .for-a, #c:checked ~ .arrows .for-b{ 
    display:none 
}