/* responsive css */
@media only screen and (max-width: 1799px) {
  :root{
     --haricontainer: 1300px;
  } 
  .banner-about-main-accodian-inn .mygridcerti {
     grid-template-columns: repeat(4, 1fr);
 }
 .mygridcerti a.popupbox img {
     width: 100%;
 } 
 .banner-story-sec-main .story-sec-frist,
 .banner-story-sec-main .story-sec-second {
     width: 100%;
 }
 }
 @media only screen and (max-width: 1699px) {
     :root {
         --haricontainer: 1200px;
     }
     .banner-about-title {
         font-size: 120px;
         left: 5px;
     }
     .banner-about-smtext {
         margin-left: 70px;
     }
     .banner-story-sec-main {
         grid-template-columns: 1.2fr 1fr;
     }
     .connections-lead-grid {
         grid-gap: 40px;
     }
     .connections-lead-dsc {
         padding: 0 20px 20px 20px;
     }
 }
 @media only screen and (max-width: 1679px) {
     :root {
         --haricontainer: 1120px;
     }
     .connections-lead-img img {
         height: 470px !important;
     }
 }
 @media only screen and (max-width: 1599px) {
     :root {
     --haricontainer: 1070px;
     --font-100: 96px;
     --font-80: 78px;
     --font-60: 58px;
     --font-50: 48px;
     --font-32: 30px;
     --font-30: 28px;
     --font-28: 26px;
     --font-24: 22px;
     --font-22: 20px;
     --font-20: 20px;
     --font-18: 18px;
     --font-16: 16px;
     --font-14: 14px;
     --font-12: 12px;
     }
     .banner-smtext-text p {
         width: 35%;
     }
     .banner-about-main-accodian .accordion-button {
         padding: 39px 40px;
         font-size: 34px;
     }
     .banner-about-main-accodian .accordion-body {
         line-height: 160%;
     }
     .banner-about-smtext {
         margin-left: 40px;
     }
     .banner-about-title {
         left: -25px;
     }
     .banner-about-main-accodian .accordion-body {
         padding: 0 60px 39px 40px;
     }
     .banner-story-sec-main {
         grid-template-columns: 1fr 1fr;
         grid-gap: 50px;
     }
     .connections-sec-one-inner h1 {
         margin: 0 0 120px 0;
     }
     .connections-sec-one-inner p {
         line-height: 140%;
     }
     .teamhead-info h3 {
         margin: 0 0 15px 0;
     }
 }
 @media only screen and (max-width: 1535px) {
     .maincertitop img {
         width: 100%;
     }
 }
 @media only screen and (max-width: 1499px) {
    :root{
     --haricontainer: 1020px;
    }
    .banner-smtext-line {
     width: 185px;
 }
 .resource-sec-title h2 {
     font-size: 22px;
 }
 .connections-lead-img img {
     height: 440px !important;
 }
 .teamhead-info h3 {
     font-size: 24px;
 }
 }
 @media only screen and (max-width: 1439px) {
     :root {
         --haricontainer: 980px;
     }
 }
 @media only screen and (max-width: 1399px) {
     :root {
         --haricontainer: 90%;
         --font-100: 84px;
     --font-80: 72px;
     --font-60: 56px;
     --font-50: 44px;
     --font-32: 30px;
     --font-30: 28px;
     --font-28: 26px;
     --font-24: 22px;
     --font-22: 20px;
     --font-20: 20px;
     --font-18: 18px;
     --font-16: 16px;
     --font-14: 14px;
     --font-12: 12px;
     }
     .banner-about-smtext {
         margin-left: 55px;
     } 
     .banner-about-title {
         left: -15px;
         font-size: 100px;
     }
     .banner-smtext-line {
         width: 135px;
         margin-top: 250px;
     }
     .banner-smtext-text {
         margin-top: 250px;
     }
     .banner-smtext-text p {
         width: 40%;
     }
     .banner-about-main-accodian-inn .maincertitop {
         margin-bottom: 30px;
     }
     .banner-story-sec-main .story-sec-second {
         padding: 40px 23px;
     }
     .banner-story-sec-main .exp-inn-sec {
         grid-gap: 10px;
     }
     .banner-story-sec-main .story-txt {
         line-height: 120%;
         margin: 0 0 80px 0;
     }
     .banner-story-sec-main .story-txt::before {
         bottom: -40px;
     }
     .company-project-list-main .haripatelme .timeline {
         margin: 0px 0 50px 0;
     }
     .company-project-titel h2,
     .blog-head-main-inn h2, .resource-sec-main-inn h2,
     .connections-sec-one-inner h1{
         line-height: 120%;
     }
     .company-project-list-main .haripatelme .card {
         padding: 0 20px;
     }
     .bloglist-head-grid {
         grid-template-columns: 2fr 1fr;
         grid-gap: 30px;
     }
     .categories-listbar, .categories-listpost {
         padding: 40px 30px;
     }
     .bloglist-head-detail p {
         margin-bottom: 20px;
     }
     .connections-sec-one-inner h1 {
         margin: 0 0 100px 0;
     }
     .connections-lead-img img {
         height: 400px !important;
     }
 }
 @media only screen and (max-width: 1365px) {
     .connections-lead-dsc {
         padding: 0 10px 10px 10px;
     }
     .teamhead-info h3 {
         font-size: 22px;
     }
 }
 @media only screen and (max-width: 1299px) {
     .banner-smtext-text {
         padding-left: 30px;
     }
     .banner-smtext-line {
         width: 175px;
     }
     .bloglist-head-inner {
         padding: 30px;
     }
 }
 @media only screen and (max-width: 1279px) {
    
 }
 @media only screen and (max-width: 1199px) {
    /* toogle css */
    .sidetoggle a {
     display: block;
 }
 .sideclose-btn .closebtn {
     display: block !important;
     color: #000;
 }
 .sideclose-btn .closebtn {
     top: 0 !important;
 }
 .sideclose-btn .closebtn {
     font-size: 25px;
     font-weight: 600;
 }
 .sidebar {
     background: var(--white);
     z-index: 99;
 }
 #header{
     margin-left: 0 !important;
 }
 .sidebar {
     width: 0;
 }
 .main-aside {
     max-width: 100%;
     margin-left: auto;
 }
 .banner-smtext-line {
     width: 155px;
 }
 .banner-smtext-text {
     padding-left: 40px;
 }
 .banner-about-main-accodian .accordion-button {
     padding: 35px;
     font-size: 30px;
 }
 .banner-about-main-accodian-inn .mygridcerti,
 .banner-about-main-accodian-inn .maincertitop {
     grid-gap: 20px;
 }
 }
 @media only screen and (max-width: 1023px) {
    
 }
 @media only screen and (max-width: 991px) {
     :root{
         --font-100: 70px;
         --font-80: 66px;
         --font-60: 50px;
         --font-50: 38px;
     }
     .banner-about-title {
         left: -5px;
         font-size: 82px;
     }
     .banner-about-smtext {
         margin-left: 45px;
     }
     .banner-smtext-text {
         padding-left: 40px;
     }
     .banner-smtext-text p {
         width: 50%;
         line-height: 140%;
     }
     .banner-story-sec-main {
         grid-template-columns: 1fr;
         grid-gap: 20px;
     }
     .banner-story-sec-main .exp-inn-sec {
         grid-template-columns: 60px auto;
         margin: 0 0 20px 0;
     }
     .bloglist-head-inner,
     .categories-listbar, .categories-listpost {
         padding: 20px;
     }
     .bloglist-head-detail .subfonts {
         margin-left: 0;
     }
     .resource-sec-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .connections-sec-title h3 {
         line-height: 120%;
         margin-bottom: 10px;
     }
     .connections-sec-title h2 {
         margin-bottom: 30px;
     }
     .connections-lead-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 @media only screen and (max-width: 800px) {
     .banner-about-smtext {
         flex-direction: column;
     }
     .banner-smtext-text {
         margin-top: 50px;
         padding-left: 0;
     }
     .banner-smtext-line {
         width: 125px;
     }
 }
 @media only screen and (max-width: 767px) {
     .banner-about-main {
         padding-bottom: 60px;
     } 
     .banner-smtext-line {
         margin-top: 200px;
     }
     .banner-about-title {
         top: 100px;
     }
     .banner-about-main-second-inn p {
         line-height: 140%;
     }
     .banner-about-main-accodian .accordion-button {
         padding: 25px;
     }
     .banner-about-main-accodian .accordion-body {
         padding: 0 25px 25px 25px;
     }
     .banner-about-main-accodian-inn .mygridcerti,
     .banner-about-main-accodian-inn .maincertitop {
         grid-template-columns: repeat(2, 1fr);
     }
     .banner-about-main-second-inn {
         padding: 60px 0;
     }
     .banner-about-main-accodian {
         padding: 40px 0;
     }
     .banner-story-sec-main {
         padding: 60px 0;
     }
     .sub-txt ul {
         padding-left: 20px;
     }
     .company-project-titel h2,
     .blog-head-main-inn h2, .resource-sec-main-inn h2 {
         padding: 60px 0;
     }
     .company-project-titel h2::after,
     .blog-head-main-inn h2::after, .resource-sec-main-inn h2::after {
         bottom: 30px;
     }
     .bloglist-head-grid {
         grid-template-columns: 1fr;
         grid-gap: 20px;
     }
        .blogdetail-head-main .bloglist-head-categories {
        padding-top: 0px;
        padding-bottom: 30px;
    }
     .bloglist-head-description {
         margin-bottom: 0px;
     }
     .resource-sec-grid {
         grid-template-columns: repeat(1, 1fr);
     }
     .connections-sec-one-inner h1 {
         font-size: 60px;
     }
     .connections-sec-one,
     .connections-sec-two-inner { 
         padding: 60px 0;
     }
     .connections-sec-one-inner p {
         font-size: var(--font-24);
         line-height: 140%;
     }
     .connections-sec-title h2 {
         font-size: var(--font-60);
         line-height: 140%;
     }
     .connections-lead-img img {
         height: 100% !important;
     }
     .connections-lead-grid {
         grid-template-columns: repeat(1, 1fr);
     }
     .bloglist-head-detail ul {
    padding-left: 20px;
    margin-bottom: 20px;
}
.bloglist-head-detail {
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.bloglist-head-description {
    grid-row-gap: 30px;
}
.bloglist-head-categories {
    padding-bottom: 20px;
}
 }
 @media only screen and (max-width: 575px) {
     :root {
         --font-100: 62px;
         --font-80: 58px;
         --font-22: 18px;
         --font-20: 16px;
         --font-18: 14px;
         --font-16: 14px;
     }
     .banner-smtext-line {
         margin-top: 170px;
     }
     .banner-smtext-text {
         margin-top: 30px;
     }
     .banner-smtext-text p {
         width: 90%;
         padding-bottom: 0;
     }
     .banner-about-main {
         background: var(--black) url(../image/haripatel-banner.jpg) no-repeat right 0px bottom;
         background-size: cover;
     }
     .banner-about-title {
         font-size: 70px;
         left: -15px;
     }
     .banner-about-smtext {
         margin-left: 25px;
     }
     .banner-about-main-accodian .accordion-button {
         font-size: 24px;
     }
     .searchinput input {
         width: 200px;
     }
     .connections-sec-one-inner br {
         display: none;
     }
     .connections-sec-one-inner h1 {
         font-size: 48px;
     }
     .connections-sec-title h2 {
         font-size: var(--font-50);
     }
     .connections-lead-dsc {
         padding: 0 20px 20px 20px;
     }
 }
 @media only screen and (max-width: 480px) {
     .banner-about-main-accodian .accordion-button {
         padding: 15px;
     }
     .banner-about-main-accodian .accordion-body {
         padding: 0 15px 15px 15px;
     }
     .mainfooterinner {
         align-items: flex-start;
         flex-direction: column;
         grid-gap: 10px;
     }
     .banner-about-title {
         font-size: 60px;
     }
     .banner-story-sec-main .story-txt {
         margin: 0 0 60px 0;
     }
     .banner-story-sec-main .story-txt::before {
         bottom: -30px;
     }
     .banner-story-sec-main .exp-inn-sec {
         grid-template-columns: 50px auto;
     }
     .banner-story-sec-main .story-sec-second {
         padding: 30px 20px;
     }
     .bloglist-head-description {
         grid-row-gap: 30px;
     }
     .bloglist-head-detail .title h1 {
         font-size: var(--font-28);
     }
     .connections-lead-img img {
         height: 490px !important;
     }
     .connections-sec-one-inner h1 {
         font-size: 40px;
     }
     .connections-sec-one-inner h1 {
         margin: 0 0 80px 0;
     }
     .connections-sec-one-inner h1::after {
         bottom: -40px;
     }
     .connections-sec-one-inner p {
         font-size: var(--font-22);
     }
     .bloglist-head-detail ul.tablecontentlink {
    padding: 0 30px;
}
.bloglist-head-detail .tableofcontents h3 {
    margin-left: 10px;
}
 }
 @media only screen and (max-width: 389px) {
     :root{
         --font-100: 52px;
         --font-80: 48px;
     }
     .banner-smtext-line {
         width: 80px;
     }
     .categories-listpost {
         margin-top: 30px;
     }
     .connections-lead-img img {
         height: 470px !important;
     }
     .connections-sec-title h2 {
         font-size: 32px;
     }
     .connections-lead-dsc {
         padding: 0 15px 20px 15px;
     }
     .sidebar-headimg img {
         width: 140px;
     }
     .sidebar-inner {
         padding: 0 20px;
     }
     .sidebar-headinfo h2 {
         font-size: var(--font-50);
     }
     .sidebar-post,
     .sidebar-accodian {
         padding-bottom: 30px;
     }
 }
 @media only screen and (max-width: 374px) {
     .banner-about-main {
         background: var(--black) url(../image/haripatel-banner.jpg) no-repeat right -60px bottom;
         background-size: cover !important;
     } 
     .bloglist-head-inner h2 {
         font-size: var(--font-24);
     }
     .connections-lead-img img {
         height: 420px !important;
     }
     .pagination {
    grid-gap: 10px;
}
 }