﻿body {font-family: "Inter", sans-serif; background-color: #F7F7F7;}
a{text-decoration:none;}
h1, h2, h3, h4, h5, h6{ font-weight: bold;font-family: "Montserrat", sans-serif;color:#0E3A5D}
p{font-size: 14px}
.navbar {background: linear-gradient(to right, #106EBE, #0FFCBE);}
.navbar-brand, .nav-link {color: white !important;}
.hero-section {padding: 60px 20px;text-align: center;flex: 1;}

.footer {background: linear-gradient(to right, #0a4585, #020c27);padding: 10px 0;margin-top: auto;font-size:12px}
.footer li a, .footer p{font-size:13px;color:rgba(255,255,255,0.8);}
.footer div > p{padding: 0 1rem 0 0; text-align:justify}
.footer .copyright{font-size:12px;color:rgba(255,255,255,0.5); text-align:center}
.navbar-expand-lg .navbar-nav .nav-link{padding: 6px 20px;}
.owl-carousel img {width: auto!important;height: auto;border-radius: 10px;}
.non-about{padding: 60px 0; background: #e3fff7;}

.ablity{padding: 60px 0;background: #fffbfb;position:relative}
.ablity:after{content:"";position:absolute; top:0;left:0;width:100%;height:100%;background-image:url('../../assets3/images/chart-bg.jpg'); background-size:cover;background-repeat:no-repeat;z-index:0; filter:opacity(0.2) }
.ablity .bg-white{position:relative; z-index:9}



.about:after{content:"";background-image:url('../../assets3/images/login-bg-1.jpg');position:absolute; top:0;left:0; width:100%; height:100%;background-attachment:fixed;background-size:cover;z-index:-1;filter:opacity(0.3)}
.about {position:relative;padding: 60px 0;}
.about ul li{font-size: 14px;}
.section-title {color:#0E3A5D;position: relative;margin-bottom: 20px;}
.sub-title{color:#f5a201; text-transform:uppercase;font-size:14px;margin-bottom:10px;position:relative}
.sub-title:before{content:""; background-color:#f5a201;width: 54px;height: 3px;float: left;line-height: 30px;margin-top: 7px;margin-right: 10px;}

.about .content {background:#fff;padding: 24px;border-radius: 10px;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease-in-out;}
.about .content p{line-height: 30px;text-align:justify; margin:0}

.about .content a {padding: 1px;position: relative;z-index: 2;text-decoration: none;color: #2C3E50;}
.about .content a:after {content: "";height: 2px;left: 0;width: 1px;position: absolute;right: 0;margin: 0 auto;bottom:-2px;-webkit-transition: width 1s ease, background-color 1s ease;-moz-transition: width 1s ease, background-color 1s ease;-ms-transition: width 1s ease, background-color 1s ease;-o-transition: width 1s ease, background-color 1s ease;transition: width 1s ease, background-color 1s ease;}

.about .content a:hover {color: #f5a201;-webkit-transition: color 1s ease;-moz-transition: color 1s ease;-ms-transition: color 1s ease;-o-transition: color 1s ease;transition: color 1s ease;}
.about .content a:hover:after, .about .content a:focus:after{width: 100%;background-color: #f5a201;}
section.breadcrumb-area {
    background: rgba(0, 0, 0, 0.1);
    padding: 2em 0;
    background-image: url(../images/breadcrumb-bg.jpg);
    background-size: 117%;
    background-position: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), inset 0 10px 13px rgba(0, 0, 0, 0.2);
    background-repeat: no-repeat;
}
.breadcrumb{margin:0}


.about-leaders {display: flex;gap: 20px;align-items: center;}
.leader-card {display: flex;flex-direction: column;align-items: center;border-radius: 6px;box-shadow: none;margin-bottom: 30px;}
.leader-card img {width: 196px;height: 227px;object-fit: cover;border-radius: 6px 6px 0 0;border: 2px solid #fff;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);}
.leader-info {padding: 11px;text-align: center;background: #fff;border-radius: 0 0 6px 6px;}
.leader-info h4 {font-size: 15px;font-weight: 600;margin: 0;}
.leader-info p {font-size: 12px;margin: 2px 0 2px;text-transform:uppercase;letter-spacing: 0.5px; color: #666;}

.table {background: white;border-radius: 10px;overflow: hidden;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);}
th {background: #4831D4;color: white;text-align: center;}
td {text-align: center;}


.highlight {background: #CCF381;font-weight: bold;}
.chart-container {background-color: #f8f9fa;padding: 5px;box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);display: block;flex-direction: column;}
.chart-container ul{margin:0;}
.chart-container ul li {position: relative;line-height: normal;border-bottom: 1px solid #eee;transition: all linear 0.3s 0s;clear: both;padding: 10px 10px 10px 40px;}
.chart-container ul li:before {content: "";position:absolute;left:0; top:0;font-size: 15px;width: 35px;background-image: url('../images/link-icon.svg');background-color: #F5A201;color: #fff;height: 100%;line-height: 37px;background-size: 23px;text-align: center;margin-right: 6px;background-repeat: no-repeat;background-position: center;border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.chart-container ul li a {color: #000000;font-size: 14px;text-decoration: none;}
.chart-container ul li:hover a{text-decoration: none; color:#F5A201}
.helpline-area{background-color:#000; color:#fff; padding: 10px;}
.about  p{text-align:justify}

.chart-container canvas {}

.stats-area{ background:#F5A201;background:linear-gradient(150deg, rgba(245, 162, 1, 1) 0%, rgba(243, 115, 53, 1) 56%, rgba(255, 186, 66, 1) 100%);}
.stats-area .row > div{border-left: 1px solid rgba(255,255,255,0.3); color:#fff; text-align:center;padding: 2em 0;position:relative}
.stats-area .row > div:first-child{border-left:0}
.stats-area .row > div p{color:#fff;font-size:16px; font-weight: normal;min-height: 55px;}
.stats-area .row > div h2{font-weight: 600; font-size:42px;color:#fff;}
.stats-area .row > div img{width:100%; max-width: 8em;position:absolute;left:0;RIGHT:0; bottom:20px;filter:opacity(0.08) invert(1)}


.h1-logo{ font-size: 18px; margin: 0;color:#fff;}
.hari{ font-size: 18px;}
.top-bar {background: #f8f6f2;padding: 0;display: flex;align-items: center;justify-content: space-between;}
.top-bar .gov-text {font-weight: bold;font-size: 14px;}
.top-bar .language-switch {display: flex;align-items: center;gap: 0;}
.top-bar .language-switch li{margin:0;}
.top-bar .language-switch li a,.top-bar .language-switch li span{ padding: 0 20px 4px; border-bottom: 1px solid #eee;text-transform: uppercase;font-size: 12px;}
.top-bar .language-switch li span{color:#0E3A5D; border-bottom-width:2px;border-bottom-color:#0E3A5D}
.top-bar i {font-size: 20px;}
.dropdown-menu { min-width: 100px;}
nav.navbar.navbar-expand-lg { background: #002147;}
div#accessibility {float: right;width: 40%;}
#accessibility ul li a {padding: 0 10px !important;height: 37px;font-size: 13px !important;display: grid;border-left: 1px solid #a3a3a3;vertical-align: top;align-items: center;}
#accessibility ul li a:hover {background: #0000;}
.top-bar #accessibility ul li,.top-bar .govBranding ul li {float: left;list-style:none;}
.top-bar .govBranding ul li a {padding: 9px 10px;}
.top-bar #accessibility ul li a img {display: block;}
.top-bar #accessibility ul li .ico-social a {padding: 4px 9px;}
.top-bar #accessibility ul li a.change-language {font-size: 0.8em;padding: 9px 8px;font-weight: bold;text-transform: uppercase;border-right: 1px solid #d8d8d8;left: inherit;right: 0;}
.top-bar #accessibility ul li .socialIcons.select-lang {width: inherit;background: #fff;left: inherit;right: 0; }
.top-bar #accessibility ul li .socialIcons.select-lang li {float: none;display: block;text-align: center;}
.top-bar #accessibility ul li .socialIcons.select-lang a {padding: 8px 15px;font-size:0.8em;color: #000;text-transform: uppercase;font-weight: bold; margin:0}
.top-bar #accessibility ul li {display: inline-block;vertical-align: top;position: relative;}
.top-bar #accessibility ul li .goiSearch {position: absolute;width: 209px;z-index: 1;left: 0px;overflow: hidden;visibility: hidden;}
.off-css, #videos .galleryThumb span.off-css { display: none !important;}

.top-bar #accessibility ul li .goiSearch, .top-bar #accessibility ul li .goiSearch {width: 300px;left: -75px;border-radius: 50px;border: 1px solid #959595;box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.322);}

.top-bar.make-accessible-header #accessibility ul li .accessiblelinks.textSizing,.top-bar.make-accessible-header #accessibility ul li .accessiblelinks.textSizing {
display: none;position: absolute;position: absolute;width: 405px;background: #fff;left: auto;right: -80px;top: 100%;z-index: 99;padding: 10px;border: 1px solid #d8d8d8;border-radius: 7px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);text-align: left;}
.top-bar #accessibility ul li a.skip-to-content {font-size: 0.8em;padding: 9px 8px;}
.top-bar #accessibility ul li a.skip-to-content .responsive-show {font-size: 1.25em;}
.top-bar #accessibility ul li .socialIcons.select-lang a:hover {  color: #fff;}
.top-bar ul{list-style-type: none;padding-left: 0;margin-bottom: 0px;}

.top-bar #accessibility ul li .socialIcons.select-lang, .home-1 .top-bar #accessibility ul li .socialIcons.select-lang {width:inherit;background: #fff;left: inherit;right: 0;}
.top-bar.make-accessible-header #accessibility ul li .select-lang, .top-bar.make-accessible-header #accessibility ul li .select-lang {
width: max-content;border: 1px solid #eee;
}
.top-bar #accessibility ul li .socialIcons, .top-bar #accessibility ul li .socialIcons {background: #fff;}
.top-bar #accessibility ul li .socialIcons, .top-bar #accessibility ul li .socialIcons {z-index: 99;padding: 5px;border: 1px solid #d8d8d8;}
.top-bar #accessibility ul li .socialIcons {position: absolute;width: 45px;z-index: 1;left: 0px;overflow: hidden;visibility: hidden;border: 1px solid #d8d8d8 !important;border-top: 0px;border-left: 0px;}

.invalid-name{font-size:12px;}
.govt-logo-area{padding: 0;background-color:rgba(0,0,0,0.02);}

.govt-logo-area  .owl-item {border-right: 1px solid rgba(0, 0, 0, 0.1);}

#chartdiv {width: 100%;height: 60vh;}

.line {fill: none;stroke: #fff;stroke-width: 6;transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);}
.line1 {stroke-dasharray: 60 207;stroke-width: 6;}
.line2 {stroke-dasharray: 60 60;stroke-width: 6;}
.line3 {stroke-dasharray: 60 207;stroke-width: 6;}
.opened .line1 {stroke-dasharray: 90 207;stroke-dashoffset: -134;stroke-width: 6;}
.opened .line2 {stroke-dasharray: 1 60;stroke-dashoffset: -30;stroke-width: 6;}
.opened .line3 {stroke-dasharray: 90 207;stroke-dashoffset: -134;stroke-width: 6;}


 /*.success-stories-section {
    padding: 60px 0;
    background: #f9f9f7;
  }

  .stories-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #0F6E56;
    background: #E1F5EE;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .stories-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1D9E75;
  }
.stories-card {
  
     display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8e8e4;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: 2rem;
}

  .stories-left {
    padding: 2.5rem 2rem;
    border-right: 1px solid #efefeb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    height: 500px;
      justify-content: flex-start;
    gap: 1.5rem;
  }


  .stories-left-content p {
    font-size: 14px;
   
    line-height: 1.75;
    margin: 0;
  }

  .stories-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2rem;
}
.stories-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #f5a201;
    background: #f5a201;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
}
.stories-nav-btn:hover {
    background: #f5a201;
    border-color: #f5a201;
}

  .stories-nav-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}
  .stories-right {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
   height: 500px;overflow: hidden;
  }

  .stories-video-wrap {
    background: #111827;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    flex: 1; min-height: 180px;
    flex: 1.2;
  min-width: 0;
  }

  .stories-video-wrap video {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 12px;height: 100%;
  }

  .stories-author-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 1rem 1.25rem;
    background: #f6faf8;
    border-radius: 12px;
    border: 1px solid #e1f0ea;
   
  }

  .stories-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #E1F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #0F6E56;
    border: 1.5px solid #9FE1CB;
  }

  .stories-author-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a2e28;
    margin: 0 0 3px;
  }

  .stories-author-location {
    font-size: 12px;
    color: #8fa89f;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .stories-author-location svg {
    width: 12px;
    height: 12px;
    color: #1D9E75;
  }

  .stories-quote {
    font-size: 13px;
    color: #4a6560;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
  }


  .stories-slide { display: none; flex-direction: column; gap: 1.25rem;height: 100%; }
  .stories-slide.active { display: flex; }


  .stories-counter {
    font-size: 13px;
    color: #f5a201;
    font-weight: 500;
    margin-left: 4px;
  }

  @media (max-width: 768px) {
    .stories-card {
      grid-template-columns: 1fr;
    }
    .stories-left {
      border-right: none;
      border-bottom: 1px solid #efefeb;
      padding: 1.75rem 1.5rem;

    }
    .stories-right {
      padding: 1.5rem;
    }
  }*/

 /* NEW LAYOUT OVERRIDES */
/* ===== SUCCESS STORIES SECTION ===== */
.success-stories-section {
  padding: 60px 0;
  background: #f9f9f7;
}

/* Tag */
.stories-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #0F6E56;
  background: #E1F5EE;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stories-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1D9E75;
}

/* Main card */
.stories-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8e8e4;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: 2rem;
  overflow: hidden;
}

/* Heading — full width on top */
.stories-heading {
  width: 100%;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #efefeb;
}

.stories-heading h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #003366;
  margin: 0;
  line-height: 1.4;
}

/* Body — two columns */
.stories-body {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2rem;
  align-items: flex-start;
}

/* ===== LEFT COLUMN ===== */
.stories-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Slide (author info) */
.stories-slide {
  display: none;
}

.stories-slide.active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Author card */
.stories-author-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 1rem 1.25rem;
  background: #f6faf8;
  border-radius: 12px;
  border: 1px solid #e1f0ea;
}

/* Avatar circle */
.stories-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: #E1F5EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #0F6E56;
  border: 1.5px solid #9FE1CB;
}

.stories-author-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a2e28;
  margin: 0 0 3px;
}

.stories-author-location {
  font-size: 12px;
  color: #8fa89f;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stories-author-location svg {
  width: 12px;
  height: 12px;
  color: #1D9E75;
}

.stories-quote {
  font-size: 13px;
  color: #4a6560;
  line-height: 1.7;
  margin: 0;
  font-style: italic;
}

/* Nav buttons */
.stories-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.5rem;
}

.stories-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #f5a201;
  background: #f5a201;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
}

.stories-nav-btn:hover {
  background: #e0951a;
  border-color: #e0951a;
}

.stories-nav-btn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}

.stories-counter {
  font-size: 13px;
  color: #f5a201;
  font-weight: 500;
  margin-left: 4px;
}

/* ===== RIGHT COLUMN ===== */
.stories-video-column {
  min-width: 0;
}

.stories-video-slide {
  display: none;
}

.stories-video-slide.active {
  display: block;
}

.stories-video-wrap {
  background: #111827;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

.stories-video-wrap video {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* ===== MOBILE ===== */
/*@media (max-width: 768px) {
  .stories-body {
    grid-template-columns: 1fr;
  }

  .stories-card {
    padding: 1.25rem;
  }

  .stories-video-wrap video {
    height: 200px;
  }
}*/
@media (max-width: 991px) {

    .stories-body {
        gap: 25px;
        padding: 25px;
    }

    .stories-heading {
        padding: 25px 25px 0;
    }

    .stories-heading h3 {
        font-size: 28px;
    }

    .stories-quote {
        font-size: 16px;
        line-height: 1.7;
    }
}


/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 767px) {

    .success-stories-section {
        padding: 40px 0;
    }

    .stories-body {
        flex-direction: column;
        padding: 20px;
    }

    .stories-heading {
        padding: 20px 20px 0;
    }

    .stories-heading h3 {
        font-size: 22px;
        text-align: center;
    }

    .stories-left,
    .stories-video-column {
        width: 100%;
    }

    .stories-author-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .stories-avatar {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 20px;
    }

    .stories-author-name {
        font-size: 20px;
    }

    .stories-author-location {
        justify-content: center;
        font-size: 14px;
    }

    .stories-quote {
        font-size: 15px;
        line-height: 1.7;
    }

    .stories-nav {
        justify-content: center;
        margin-top: 20px;
    }

    .stories-video-wrap {
        margin-top: 10px;
        border-radius: 16px;
    }

    .stories-video-wrap video {
        border-radius: 16px;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

    .stories-heading h3 {
        font-size: 20px;
        line-height: 1.4;
    }

    .stories-quote {
        font-size: 14px;
    }

    .stories-nav-btn {
        width: 40px;
        height: 40px;
    }
}
@media (max-width: 991px) {
	.about .row { text-align: center;}
	.about .content { margin-bottom: 20px;}
}


@media screen and (max-width: 768px) {
	.h1-logo{font-size: 11px;margin: 0;	}
	.about-leaders{display:block}
	.leader-card img{box-shadow:0px 4px 10px rgba(0, 0, 0, 0.1);width: 220px;height: 220px;}
	.leader-card{box-shadow:0 0;margin-bottom: 10px;}
	.leader-info{min-width: 220px;}
	.stats-area .row > div{max-width:50%;flex: auto;}
	.stats-area .row > div:nth-child(3){border-left: 0; border-top: 1px solid rgba(255,255,255,0.3) }
	.stats-area .row > div:nth-child(4){ border-top: 1px solid rgba(255,255,255,0.3)}
	.hari{font-size: 14px;	}
	.top-bar{display:block !important; padding:12px 0}
	.top-bar .gov-text, div#accessibility, nav.navbar.navbar-expand-lg, .hrope{float: left; width: 100%;}
	.stats-area{clear:both}
	.govt-logo-area .owl-carousel .owl-item img{margin:0 auto}
	.stats-area .row > div{padding: 1em 0;}
	.stats-area .row > div p{min-height: 72px;}
	ul.navbar-nav.ms-auto {display: flex;flex-direction: row;}
}


