@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
html{
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}
body{
 font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;margin: 0;
}
.bg header{
    background:#f1f1f1;
}
header{position: fixed; top: 0; display: flex; align-items: center; gap: 40px; box-sizing: border-box; width: 100%; padding: 15px 10vw; justify-content: space-between; z-index: 9999;background:#fff; transition: all .3s ease-in-out;}
header .logo{display: flex; flex-direction: row; gap: 30px; }
header .logo .p-logo{width: 225px; height: auto; border-right: 1px solid #D9D9D9; padding-right: 35px;}
header .logo .d-logo{width: 62px; height: auto;}
header .nav{display: flex; gap: 30px; box-sizing: border-box; align-items: center; }
header .nav a{outline: none; text-decoration: none; font-size: 16px; line-height: 22px; font-weight: 400; color: #000;}
header .nav a.nav-btn{background: #015AFF; padding: 13px 25px; color: #fff; font-weight: 600; border-radius: 8px;}
header .mob-icon{display:none;}

.banner{display: flex; box-sizing: border-box; padding: 5% 10vw 0% 10vw; background: #1E1E1E; color: #fff; gap: 30px; min-height: 90vh; align-items: center;}
.banner .left{display: flex; flex-direction: column; gap: 25px; flex-basis: 40vw;}
.banner .left h2{font-size: 2.9vw; font-weight: 400; line-height: 1.3; margin: 0;}
.banner .left p{font-size: 16px; font-weight: 400; line-height: 1.4; margin: 0;}
.banner .left .btn{display: flex; flex-direction: row; gap: 30px; box-sizing: border-box;}
.cta-btn{background: #015AFF; padding: 15px 30px; font-size: 16px; font-weight: 400; border-radius: 8px;color: #fff;text-decoration: none;}
.cta-btn.white{background: transparent;border: 1px solid #FFFFFF;}
.banner .right{display: flex; flex-basis: 60vw;} 
.banner .right img{    width: 100%; height: auto;}

.revloution{display: flex; flex-direction: column; box-sizing: border-box; padding:0% 10vw 2% 10vw; gap: 25px;}
.revloution .head,.updates .head{display: flex; justify-content: center;}
.revloution .head h2{font-size: 40px; color: #000; line-height: 52px; font-weight: 400; margin: 0; max-width: 410px; text-align: center;}
.revloution .r-cols{display: flex; flex-direction: row; gap: 30px;}
.revloution .r-cols .r-col{display: flex; flex-direction: column; gap: 25px;flex-basis: 33.33%; box-sizing: border-box;}
.revloution .r-cols .r-col img{display: flex; flex-direction: column; gap: 25px;}
.revloution .r-cols .r-col p{font-size: 16px; line-height: 28px; font-weight: 400;text-align: justify;}
.revloution .r-cols .r-col h4{font-size: 22px; font-weight: 400; margin: 0;}

.transform{display: flex; flex-direction: column; gap: 30px; box-sizing: border-box; padding: 0% 10vw 2% 10vw;}
.transform .top{display: flex; flex-direction: row; gap: 30px; align-items: center;}
.transform .top .left{display: flex; flex-basis: 67%; flex-direction: column; gap: 0; box-sizing: border-box;}

.transform .top .left h2{font-size: 40px; color: #000; line-height: 52px; margin: 0; font-weight: 400;}
.transform .top .left p{font-size: 16px; line-height: 28px; font-weight: 400;}
.transform .top .left > *{max-width:700px;}
.transform .top .right{display: flex; flex-direction: column; flex-basis: 33%; box-sizing: border-box;}
.transform .box{display: flex; flex-direction: column; background: #F5F5F5; padding: 30px; gap: 20px;}
.transform .box div{display: flex;}
.transform .box a{text-decoration: none; font-size: 22px; line-height: 33px; color: #000; margin: 0; max-width: 360px;}
.transform .box a span{color: #015AFF;}
.transform .box div img{width: 100%; height: auto; max-width: 310px;}
.transform .bottom{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px;}

.story{display: flex; flex-direction: row; gap: 50px; box-sizing: border-box; padding: 2% 10vw 0% 10vw;}
.story .left{display: flex; flex-direction: column; flex-basis: 50%; box-sizing: border-box;}
.story .left h2{font-size: 40px; color: #000; line-height: 45px; margin: 0; font-weight: 400;} 
.story .left p{margin: 20px 0px; font-size: 16px; font-weight: 400; color: #000; line-height: 26px;}
.story .left p a{color:#000;}
.story .right{display: flex; flex-direction: column;box-shadow: 0px 86.73px 58.41px 0px #13124205,0.89px 3.54px 92.04px 0px #14142B0A,0px 47.79px 47.79px 0px #4A3AFF05; flex-basis: 50%; padding: 5%; box-sizing: border-box; border-radius: 30px;}
.story .right form{display: flex; flex-direction: column; width: 100%;    gap: 25px;}
.story .right form .single{display: flex; gap: 25px; width: 100%;}
 .story .right form .form-group{display: flex; flex-direction: column; gap: 10px;width: 100%;}
.story .right form .form-group label{color:#170F49;font-size: 14px;font-weight: 700;font-size:15px;}
.story .right form .form-group input,.story .right form .form-group textarea{    outline: none; border: 0.78px solid #EFF0F6; padding:20px;box-shadow: 0px 1.57px 4.7px 0px #13124212;font-size: 15px; font-weight: 500;position:relative; border-radius: 10px; width: 100%;color: #6F6C90;resize:none;font-family: "Inter", sans-serif;}
.story .right form .form-group input::placeholder,.story .right form .form-group textarea::placeholder{    outline: none; font-size: 15px; font-weight: 500;color: #6F6C90; }
.story .right form .btn input{background: #015AFF; padding: 13px 25px; color: #fff; font-size:16px;font-weight: 600; border-radius: 8px;outline:none;border:none;font-family: "Inter", sans-serif;cursor:pointer;}
.story .right form .form-group input.name{ background-image: url(https://www.dakshindia.org/pathways-to-digital-courts/img/user.png); background-repeat: no-repeat; background-position: 95% 50%;    background-size: 30px;}
.story .right form .form-group input.email{ background-image: url(https://www.dakshindia.org/pathways-to-digital-courts/img/e.png); background-repeat: no-repeat; background-position: 95% 50%;}
.story .right form .form-group input.company{ background-image: url(https://www.dakshindia.org/pathways-to-digital-courts/img/org.png); background-repeat: no-repeat; background-position: 97.5% 50%;}
.story .right form .instruct{display: flex; flex-direction: row; gap: 10px;}
.story .right form .instruct span{background: #2222221A; font-size: 11px; font-weight: 500; padding: 5px; border-radius: 5px;color:#222222;}
.story .right form .instruct span:nth-last-child(1){background: unset;border: 0.88px solid #2222221A}


.updates{display: flex; flex-direction: column; gap: 40px; box-sizing: border-box; padding: 5% 10vw;}
.updates .head h2{font-size: 40px; color: #000; line-height: 52px; margin: 0; font-weight: 400;}
.updates .u-grid{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px;}
.updates .u-grid .box{display: flex; flex-direction: column; gap: 15px;padding-bottom: 40px;}
.updates .u-grid .box .img{background: #D9D9D9; height: 260px;}
.updates .u-grid .box .sub{margin: 0; color: #015AFF80; font-size: 12px; text-transform: uppercase; line-height: 1.5;}
.updates .u-grid .box .title{margin: 0; font-size: 22px; font-weight: 400; line-height: 1.5;}
.updates .u-grid .box p{margin: 0; font-size: 16px; line-height: 1.7; padding-bottom: 10px;} 
.updates .u-grid .box a{    color: #015AFF;}

.contributors{display: flex; flex-direction: row; gap: 40px; box-sizing: border-box; padding: 0% 10vw 5% 10vw;}
.contributors .left{    display: flex; flex-direction: column; flex-basis: 45%; padding-right: 10%; box-sizing: border-box;}
.contributors .left h2{font-size: 40px; color: #000; line-height: 52px; margin: 0; font-weight: 400;}
.contributors .left p{   font-size: 16px; line-height: 1.7; padding-bottom: 10px;}
.contributors .right{display: flex; flex-direction: column; flex-basis: 55%; box-sizing: border-box;}
.contributors .right .list{display: flex; justify-content: space-between; border-bottom: 1px solid #C4C4C4; align-items: center; padding: 30px 0px;}
.contributors .right .list .l{display: flex; gap: 20px; align-items: center;}
 .contributors .right .list .l img{display: flex; width: 70px; height: auto;}
.contributors .right .list .l div{display: flex; flex-direction: column; gap: 0px;}
.contributors .right .list .l div h4{font-size: 24px; color: #000; line-height: 36px; margin: 0; font-weight: 400;}
.contributors .right .list .l div p{margin: 0; color: #BCBCBC; font-size: 18px; line-height: 27px;}

 .podcast .row .head {
    display: flex;
    justify-content: start;
}
.podcast .left h2{font-size: 40px; color: #000; line-height: 52px; margin: 0; font-weight: 400;margin-bottom: 1rem;}
.podcast .row {
    display: flex;
    flex-direction: row;
    gap: 40px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    max-width: 80vw;
}
.podcast .row .left {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 0 0 45%;
}
.o-btn{
    background: #fe5e01 !important;
}
.podcast {
    display: flex;
    flex-direction: row;
    gap: 50px;
    box-sizing: border-box;
    padding: 5% 10vw 5% 10vw;
}
.podcast .row .left iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}
.podcast .row .right {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 0 0 55%;
}
.podcast .right h3{font-size: 28px; color: #000; line-height: 1.2 margin: 0; font-weight: 400;}
.podcast .right p{   font-size: 16px; line-height: 1.7; padding-bottom: 10px; margin: 0;}

.partners{display: flex; flex-direction: column; gap: 40px; box-sizing: border-box; padding: 0% 10vw 5% 10vw;}
.partners h2{     font-size: 40px; color: #000; line-height: 52px; margin: 0; font-weight: 400;}
.partners .p-list{ display: flex; justify-content: center; align-items: center; gap: 5vw; min-height: 100px;}

.future{display: flex; flex-direction: column; gap: 40px; box-sizing: border-box; padding: 0% 10vw 5% 10vw; justify-content: center; align-items: center;} 
.future .max-50{display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center;}
.future .max-50 h2{text-align: center; font-size: 40px; color: #000; line-height: 1; margin: 0; font-weight: 400;}
.future .max-50 p{margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; text-align: center; max-width: 500px;}
.future .max-50 .cta{display: flex; flex-direction: row; gap: 25px;}

footer{display: flex; flex-direction: column; gap: 60px; box-sizing: border-box; padding: 5% 10vw 10px 10vw; background: #000; color: #fff;}
footer .top{display: flex; align-items: flex-start; gap: 40px; width: 100%; box-sizing: border-box;}
footer .top .left-content{display: flex; flex-basis: 65%; gap: 40px; justify-content:start;}

footer .top .left-content .logo{display: flex; flex-basis: 25%; box-sizing: border-box;}
footer .top .left-content .logo .image-block img{ width: 100%; height: auto; aspect-ratio: 146 / 143;}
footer .top .left-content .des{display: flex; flex-basis: 75%;  box-sizing: border-box;}

footer .top .left-content .des p{margin: 0; font-size: 16px; font-weight: 400; line-height: 26px;}
footer .top .links{display: flex; flex-basis: 35%; box-sizing: border-box; flex-direction: column; gap: 25px;}
footer .top .links div{    display: flex; flex-direction: column; gap: 25px; color: #fff; }
footer .top .links div a{color: #fff; text-decoration: none; font-size: 16px;}
footer .top .links .social{display: flex; flex-direction: row; gap: 20px; padding-top: 40px; align-items: center;}

footer .bottom{flex-direction: row; display: flex; align-items: center; justify-content: space-between;}
footer .bottom div{display: flex; gap: 40px;} 
footer .bottom div a{color: #fff; text-decoration: none;}

.file-info {
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
}

.progress-bar {
    width: 100%;
    height: 5px;
    background: transparent;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.progress {
    height: 100%;
    width: 0;
    background: #007bff;
    border-radius: 5px;
    transition: width 0.2s;
}

.upload-status {
    margin-top: 10px;
    font-size: 14px;
}
.story .right form .stat{display: flex; align-items: center; gap: 30px; box-sizing: border-box; padding-bottom: 15px;justify-content: space-between;}
.story .right form .stat.border{box-shadow: 0px 1.57px 4.7px 0px #13124212;
    padding: 15px;
    border-radius: 12px;margin-bottom: 10px;}

.story .right form .stat div.box{flex-basis: 45%; display: flex;flex-direction: column; gap: 0;}
.story .right form .stat #fileName{font-size: 13px; font-weight: 700;}
.story .right form .stat .status{display: flex; align-items: baseline; gap: 15px;}
.story .right form .stat .upload-status {margin-top: 5px; font-size: 12px; font-weight: 500; color: #015AFF; }
.story .right form .stat #fileSize{font-size: 12px; font-weight: 500; color: #015AFF;}
.story .right form #uploadBox{cursor: pointer; outline: none; border: 0.78px solid #EFF0F6; padding: 10px;    align-items: center; box-shadow: 0px 1.57px 4.7px 0px #13124212; font-size: 15px; font-weight: 500; position: relative; border-radius: 10px; width: 100%; color: #6F6C90; resize: none; font-family: "Inter", sans-serif; display: flex; flex-direction: row; gap: 10px; justify-content: center;}
.story .right form #uploadBox h3{color: #222222; font-size: 14px; font-weight: 500;transition:0.3s all ease-in-out;}
.story .dnone{display:none;}
.story .right form #uploadBox.dnone{display:none;}
.story .right form .prgs.dnone{display:none !important;}
.story .right form #uploadBox:hover h3{text-decoration:underline;}
span.error_txt{
    color: #F00;
    font-size: 13px;
    text-transform: capitalize;
}
.text-white a {
    color: #fff;
    text-decoration: none;
}

.mob-nav{display: flex;     transform: translateX(100vh);position: fixed;transition:0.5s all ease-in-out; top: 0; width: 100%; height: 100%; background: #fff; max-width: 350px; right: 0; flex-direction: column; gap: 30px; box-sizing: border-box; padding: 60px;}
.mob-nav .links{display: flex ; flex-direction: column; gap: 35px; padding-top: 40px; box-sizing: border-box;}
.mob-nav .close{display: flex ; align-items: flex-start; justify-content: flex-end; font-size: 25px; font-weight: 500;}

.mob-nav a{color: #000; text-decoration: none;}

@media only screen and (min-width:1366px){
    footer .top .left-content .des p{ padding-right:10%;}
}
@media only screen and (max-width: 1300px) and (min-width: 782px)  
{
    header,footer,section{padding-left:5vw !important;padding-right:5vw !important;}
    header .nav a.nav-link{display:none;}
    .revloution .r-cols {display: grid;grid-template-columns: 1fr 1fr 1fr;}
    .story .right form .single {gap: 20px; flex-direction: column; }
   .story .right form .instruct {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
	header .mob-icon{display:block}
    .mob-nav.open{transform: translateX(0vh)}
}

@media only screen and (max-width: 1100px) and (min-width: 782px)  
{
    .revloution .r-cols {display: grid;grid-template-columns: 1fr 1fr;}
    .head h2{font-size: 35px !important;line-height: 45px !important;}
    
}


@media only screen and (max-width: 781px) {

    .o-btn{
        background: transparent !important;
    }

header .nav a:not(.menu-btn){display:none;}
header .mob-icon{display:block}
.mob-nav.open{transform: translateX(0vh);width:100%;    max-width: 100%;}
header .logo .p-logo {width: 140px;    padding-right: 20px;}
header .logo .d-logo {width: 30px;}
header .logo,.banner .left .btn{gap:20px;}
.banner{min-height:unset;flex-direction: column;}
.banner{padding:100px 5vw 0% 5vw;}
.banner .left h2 {font-size: 40px;}
.revloution .head h2,.transform .top .left h2,.story .left h2,.updates .head h2,.contributors .left h2,.future .max-50 h2{font-size: 35px; line-height: 1.2;}
section{padding-left:5vw !important;padding-right:5vw !important;}
.revloution .r-cols {flex-direction: column; }
.revloution .r-cols .r-col .img{justify-content: center; display: flex;}
.transform .top{flex-direction: column; }
.transform .top .left{padding-right:0%;}
.transform .bottom {grid-template-columns: 1fr;}
.story {flex-direction: column; gap: 20px;}
.podcast .row{flex-direction: column; gap: 20px;}
.podcast .row .left,.podcast .row .right{
    flex: unset;
}
.podcast .row{max-width: 100%;}
.story .left p {margin: 10px 0px;}
.story .right form{gap:20px;}
.story .right form .single {gap: 20px; flex-direction: column;}
.story .right form .form-group input.company {background-position: 95% 50%; }
.story .right form .instruct span{text-align:center;}
.story .right form .instruct {display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr;}
.story .left h2{font-size:30px;}
.updates .u-grid {grid-template-columns: 1fr; gap: 15px; }
.updates .u-grid .box .title {font-size: 20px; line-height: 1.3; }
.updates .u-grid .box{padding-bottom:25px;}
.contributors {flex-direction: column;gap:0px}
.contributors .left {padding-right: 0%;}
.contributors .right .list .l div h4 {font-size: 20px; line-height: 25px;}
.contributors .right .list .l div p {font-size: 16px; line-height: 22px;}
.contributors .right .list{padding:25px 0px;}
.partners .p-list {/*display: grid; justify-content: unset; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;*/ }
.future{padding-top: 1%; padding-bottom: 10%;}
.future .cta-btn {background: #015AFF; padding: 15px 15px; font-size: 15px;}
footer{padding: 10% 5vw;gap:25px; padding-bottom: 5%;}
footer .top{flex-direction: column; align-items: center;}
footer .top .des {padding-right: 0%;}
footer .top{gap:20px;}
footer .top .links {width: 100%; justify-content: center; align-items: center; padding-top: 20px; }
footer .top .links div a,footer .bottom div a,footer .top .des p{text-align:center;}
footer .top .links .social{padding-top:10px;}
footer .bottom {flex-direction: column-reverse;}
footer .bottom div {gap: 20px; flex-direction: column; }
footer .bottom p{font-size: 12px; margin: 0; padding-top: 20px;}
header{padding: 15px 5vw;}
.transform .box a {font-size: 20px; line-height: 1.3;max-width: unset; }
.updates .u-grid .box .sub{color:#2b69b9;}

footer .top .left-content {
    gap: 20px;

    flex-direction: column;
    align-items: center;
}
footer .top .left-content{
        flex-direction: column;
    }
.menu-btn{
    display: block;
}
.breadcrumb_title {
    padding: 5% 5%!important;}
}
.comming-text{
    font-size: clamp(1.5rem,1.5vw,1.5vw);
    text-align: center;
    color: #3c3c3c;
    padding: 150px 0;
    background: #FAFAFA;
}
@media screen and (max-width:600px){
    footer .top .links div {
        flex-direction: row;
        gap: 25px;
        width: 100%;
        justify-content: space-around;
    }
}

@media (min-device-width:782px) and (max-width:1400px) and (orientation: portrait) { 
 .banner{min-height:unset; padding: 200px 10vw 150px 10vw; }
 .banner .cta-btn{padding:15px}
}

.breadcrumb_title{padding: 2% 10vw 2% 10vw;}