/* RESPONSIVE STYLES  */
/* container css and high screen resolution css  */
@media (max-width: 1919px) {
    .banner-img.xxl-banner ,.banner-img.desktop-banner , .banner-img.mobile-banner{
        display: none;
    }
    .banner-img.xl-banner{
        display: block;
    }
}
/* @media (max-width: 40px) {
    .banner-img.xxl-banner ,.banner-img.desktop-banner ,  .banner-img.mobile-banner{
        display: none;
    }
    .banner-img.xl-banner{
        display: block;
    }
} */
@media (max-width:1440px) {
    .banner-img.xxl-banner ,.banner-img.xl-banner ,  .banner-img.mobile-banner{
        display: none;
    }
    .banner-img.desktop-banner{
        display: block;
    }
}
@media (min-width: 1920px){
    h1, .h1 {
        font-size: 6.5rem;
        line-height: 7rem;
    }
    .service-slider .owl-nav{
        display: none;
    }
    .carousel-indicators {
        margin-bottom: 11.8rem;
    }
}
@media (min-width: 1365px) {
    .banner-section-main .container , .top-header .container {
        max-width: 1299.5px;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1214.5px
    }
}
@media (max-width: 1365px) {
    .top-header .nav-item .nav-link {
        margin-left: 3rem;
    }
}
@media(max-width: 1199px){
    body {
        font-size: 1.7rem;
        line-height: 2.6rem;
    }
    .container {
        max-width: 100%;
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .top-header .nav-item .nav-link {
        margin-left: 1.4rem;
    }
    .banner-section {
        height: auto;
        padding: 31rem 0 7rem;
    }
    h1, .h1, h2, .h2 {
        font-size: 3.8rem;
        line-height: 4.6rem;
    }
    .banner-text {
        max-width: 48rem;
    }
    .theme-btn {
        font-size: 1.6rem;
        min-width: 23rem;
    }
    .carousel-indicators {
        margin-bottom: 2.8rem;
    }
    .connect-section, .score-section, .circle-section, .service-section, .founder-section, .collaboration-section, .contact-section {
        padding: 8rem 0;
    }
    .quiz-dots-img {
        margin-top: 8rem;
    }
    .service-slider .owl-stage-outer {
        padding-left: 4rem;
    }
    .service-slider .owl-nav {
        right: 4rem;
    }
    .why-matters-content p {
        max-width: 27rem;
    }
    .why-matters-content p br {
        display: none;
    }
    /* new update  */
    /* menu css starts */
     .offcanvas-collapse {
        transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
        background-color: var(--grey-color);
        height: 100dvh;
        top: 0;
        padding: 111px 46px 70px 46px;
        justify-content: space-between;
        overflow-x: auto;
    }
    .top-header .nav-item .nav-link {
        margin-left: 0;
        font-size: 24px;
        line-height: 34px;
        color: #3A3A3A !important;
    }
    .top-header .nav-item{
        margin-bottom: 2.4rem;
    }
    .offcanvas-collapse.show {
        visibility: visible;
        /* transform: translateX(-100%); */
        /* transform: translateX(0); */
        opacity: 1;
    }
    .top-header .nav-item .menu-btn {
        background-color: var(--theme-color);
        width: fit-content;
        margin-top: 20px !important;
        font-weight: 400;
        font-size: 20px !important;
        border: 1px solid #fff;
        margin-left: 10px;
    }
    .navbar-toggler .bar1, .navbar-toggler .bar2, .navbar-toggler .bar3 {
        background-color: var(--white-color);
        width: 2.2rem;
        height: 1.5px;
        margin: 6px 0;
        transition: 0.4s;
        display: block;
        border-radius: 20px;
    }
    .navbar-toggler .bar1, .navbar-toggler .bar3 {
        width: 1.6rem;
        margin-left: auto;
    }
    /* .top-header {
        padding: 1.2rem 0;
    } */
    .navbar-toggler:before {
        content: "";
        left: -3px;
        top: 3px;
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: var(--orange-color);
        border-radius: 50%;
    }
    .navbar-toggler {
        position: relative;
    }
    .offcanvas-open .change{
        z-index: 99999;        
        right: 40px;
        position: fixed;
    }
    .offcanvas-open button.navbar-toggler.p-0.border-0 .bar1, 
    .offcanvas-open button.navbar-toggler.p-0.border-0 .bar2, 
    .offcanvas-open button.navbar-toggler.p-0.border-0 .bar3 {
        background-color: #3A3A3A !important;
    }
    .anim-dot-div{
        display: none;
    }
    .connect-animation {
        width: 60rem;
    }
    .connect-animation .theme-btn {
        bottom: 10.3rem;
    }
    .circle-right {
        /* transform: scale(0.85);
        margin: 0 auto;
        transform-origin: left; */
        margin: 0 auto;
        transform-origin: left;
        height: 54rem;
        width: 54rem;
    }
    .circle-diagram {
        height: 42rem;
        width: 42rem;
    }
    .circle-diagram .circle-item {
        width: 16rem;
        height: 16rem;
        font-size: 1.4rem;
    }
    .circle-diagram .circle-item5 {
        top: 100px;
    }
    .circle-diagram .circle-item2 {
        top: 103px;
        right: 3px;
    }
    .circle-diagram .circle-item3 {
        right: 55px;
    }
    .circle-diagram .circle-item4 {
        left: 43px;
    }
    .menu-logo {
        margin-top: 4rem;
    }
    .why-matters-container .container {
        min-height: 89rem;
    }
}
/* TABLET css starts  */
@media (max-width: 991px) {
    
    .site-footer .footer-top {
        padding: 2.4rem 0;
        padding-bottom: 0.4rem;
        background: #231815;
        box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.24);
        z-index: 999;
        position: relative;
    }
    .banner-section {
        padding: 18rem 0 7rem;
    }
    h1, .h1, h2, .h2 {
        font-size: 3.8rem;
        line-height: 4.2rem;
    }
    .banner-text {
        max-width: 38rem;
    }
    .theme-btn {
        min-width: 26rem;
        position: relative;
    }
    .service-section p br , .connect-section p br , .score-section p br, .why-matters-content p br ,.circle-section p br{
        display: none;
    }

    .connect-animation {
        position: relative;
        margin: 0 auto;
    }
    .why-matters-content {
        padding: 8rem 0 3rem;
    }
    .why-matters-container .container {
        min-height: auto;
    }
    .why-matters-content p br {
        display: none;
    }
    .why-matters-content p {
        margin-top: 6rem;
        max-width: 100%;
    }
    .circle-section p br{
        display: none;
    }
    .circle-right{
        margin: 0 auto;
    }
    .thankyou-msg .h3 {
        font-size: 2.6rem;
        line-height: 3rem;
    }
    h6, .h6 {
        font-size: 1.4rem;
        line-height: 1.3rem;
    }
    .service-section {
        padding: 6.8rem 0 5.8rem;
    }
    .service-section .dot.dot2 {
        top: 20%;
        left: 62%;
    }
    .service-slider .owl-nav img {
        width: 14px;
    }
    .service-slider .owl-nav {
        gap: 2.5rem;
    }
    .single-service {
        width: 22.5rem;
        padding: 2.6rem;
    }
    .single-service img {
        height: 107px;
    }
    .single-service .h5 {
        font-size: 1.4rem;
        line-height: 1.5rem;
    }

    .single-service .theme-btn {
        font-size: 1.2rem;
        line-height: 1.3rem;
        padding: 9px;
    }

    .single-service .h5 {
        padding-bottom: 5px !important;
    }
    .service-slider .owl-stage-outer {
        padding-left: 6rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    body {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }
    .top-header .navbar-brand {
        width: 14rem;
    } 
    h1, .h1 {
        font-size: 2.6rem;
        line-height: 2.8rem;
    }
    .banner-text {
        max-width: 36rem;
    }
    .banner-section-main .theme-btn {
        min-width: 17rem;
        font-size: 1.4rem;
        line-height: 1.6rem;
        padding: 1rem 1.4rem;
    }
    .banner-section {
        padding: 21rem 0 7rem;
    }
      /* updated css  */
    
    .circle-diagram .circle-item4:before {
        background: #e7b219;
        opacity: 70%;
    }
    .connect-section .h2 {
        max-width: 24.4rem;
        position: relative;
    }
    .connect-section .h2 br {
        display: none;
    }
    .container {
        padding-left: 6rem; 
        padding-right: 6rem;
    }
    .connect-section {
        padding: 8.6rem 0 7rem;
    }
    .score-section {
        padding: 8rem 0 11rem;
    }
    .score-section .h2 {
        max-width: 20.4rem;
    }
    .banner-section-main .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .score-section .dot.dot2{
        display: none;
    }

    .connect-animation {
        width: 41rem;
        position: absolute;
    }
    .why-matters-content {
        padding: 9.1rem 0 5.2rem;
    }
    .why-matters-container .container {
        min-height: 57rem;
        max-width: 100%;
    }
    .custom-width-left {
        max-width: calc(100% - 38.5rem);
    }
    .anim-dot-div{
        display: none;
    }
    .connect-animation .theme-btn {
        bottom: 2.3rem;
    }
    @keyframes floatMove {
        0% {
            transform: translate(0, 0);
            scale: 0.8;
        }
        25% {
            transform: translate(10px, -7px);
            scale: 1.1;
        }
        50% {
            transform: translate(-10px, 10px);
            scale: 1.3;
        }
        75% {
            transform: translate(7px, 12px);
            scale: 0.6;
        }
        100% {
            transform: translate(-10px, -2px);
            scale: 1;
        }
    }
    .circle-right {
        transform: none;
        height: 34.2rem;
        position: absolute !important;
        bottom: 9rem;
        width: 34.2rem;
        margin-top: auto;
    }
    .circle-diagram .circle-item {
        width: 10.3rem;
        height: 10.3rem;
        font-size: 1rem;
        line-height: 1;
    }
    .circle-diagram {
        height: 26.8rem;
        width: 26.8rem;
    }
    .circle-diagram .circle-item2 {
        top: 62px;
        right: 0px;
    }
    .circle-diagram .circle-item3 {
        right: 34px;
    }
    .circle-diagram .circle-item4 {
        left: 28px;
    }
    .circle-diagram .circle-item5 {
        top: 61px;
    }
    .circle-section {
        padding: 9rem 0 7.5rem;
    }
    .circle-section .h2 {
        padding-bottom: 4.3rem;
    }
    .founder-left {
        width: 28.5rem;
    }
    .founder-section .h3 {
        font-size: 2rem;
        line-height: 2.3rem;
    }
    .founder-section  .h4 {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }
    .founder-section {
        padding: 11rem 0 10rem;
    }

    .founder-right .dot.dot2 {
        top: 22%;
    }
    .founder-right p {
        max-width: 23.2rem;
    }
    .founder-section .dot.small-dot3 {
        top: auto;
        bottom: 3rem;
        left: 40%;
    }
    .collaboration-section {
        padding: 8rem 0 5.8rem;
    }
    .collaboration-section .dot.dot2 {
        left: 100%;
    }
    .collab-form {
        margin-top: 7rem;
    }
    .contact-section {
        padding: 8rem 0 10rem;
    }
    .footer-links a {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }
    .footer-links a:last-child {
        margin-left: 16px !important;
    }
    .footer-bottom img {
        max-width: 23.6rem;
    }
    .theme-form label {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }
    .collab-form .theme-btn {
        margin-top: 2.5rem;
    }
    .theme-form .theme-btn {
        max-width: 25.3rem;
    }
    .contact-section  .theme-form .theme-btn {
        margin-top: 1.5rem;
    }
    .contanct-form {
        padding-bottom: 4rem;
    }
}
/* TABLET css ends  */
/* Mobile css starts  */
@media (max-width: 767px){
    .top-header {
        padding: 4rem 0;
    }
    .banner-img.desktop-banner {
        display: none;
    }
    .banner-section:before {
        display: none;
    }
    .banner-section {
        padding: 0;
    }
    .banner-section .container {
        position: absolute;
        bottom: 7.3rem;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
    }
    h1, .h1, h2, .h2 {
        font-size: 3.2rem;
        line-height: 3.4rem;
    }
    .banner-text .h1 {
        padding-bottom: 4.4rem;
    }
    .theme-btn {
        min-width: 23rem;
        padding: 1.2rem;
        font-size: 1.4rem;
        line-height: 1.6rem;
    }
    .btn-grp .theme-btn:first-child {
        margin-bottom: 1.6rem;
    }
    .banner-text {
        max-width: 100%;
    }
    .carousel-indicators {
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        bottom: 19.3rem;
        gap: 8px;
    }
    .carousel-indicators [data-bs-target] {
        width: 6px;
        height: 6px;
    }

    body {
        font-size: 1.6rem;
        line-height: 2.4rem;
        text-align: center;
    }
    .container {
        padding-left: 4rem;
        padding-right: 4rem;
        max-width: 50rem;
    }
    h5, .h5{
        font-size: 1.4rem;
        line-height: 1.8rem;
    }
    h6, .h6 {
        font-size: 1.2rem;
    }
    .connect-section {
        padding: 15.7rem 0 16.8rem;
    }
    .connect-section .h2 ,.score-section .h2{
        padding-bottom: 7.3rem;
    }
    .connect-section p br , .score-section p br{
        display: none;
    }
    .score-section {
        padding: 6.1rem 0 6.5rem;
    }
    .container.no-padding {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
    .quiz-dots-img {
        margin-top: 6.8rem;
        width: 100%;
    }
    .score-section .theme-btn {
        min-width: 24.3rem;
        margin-top: 2.5rem;
    }
    .why-matters-content {
        padding: 9.2rem 0 12.2rem;
    }
    .why-matters-content p {
        margin-top: 11.5rem;
    }
    .connect-img img {
        width: 100%;
        margin: 0 auto;
    }
    .connect-animation .theme-btn {
        bottom: 7.3rem;
    }
    
    .circle-right {
        width: 100%;
        max-width: 27.8rem;
        border-radius: 14rem !important;
        height: auto;
        padding: 7.7rem 4.5rem;
        transform: none;
    }
    .connect-animation {
        width: 100%;
        position: relative;
    }
    .anim-dot-div .anim-dot {
        width: 2rem;
        height: 2rem;
    }
    .anim-dot-div1 {
        left: 78px;
        top: 97px;
    }
    @keyframes animName {
        0%{
            left: 78px;
            top: 97px;
        }
        100%{
            left: 65px;
            top: 138px;
        }
    }
    .anim-dot-div2 {
        left: 113px;
        top: 269px;
    }
    @keyframes animName2 {
        0%{
             left: 113px;
            top: 269px;
        }
        100%{
            left: 168px;
            top: 304px;
        }
    }
    .anim-dot-div3 .h5 {
        top: -58px;
    }
    .anim-dot-div3 {
        left: 73px;
        top: 325px;
    }
    @keyframes animName3 {
        0%{
            left: 73px;
            top: 325px;
        }
        100%{
            left: 100px;
            top: 455px;
        }
    }
    .anim-dot-div4 {
        left: 333px;
        top: 460px;
    }
    .anim-dot-div4 .h5 {
        left: -79px;
    }
    @keyframes animName4 {
        0%{
            left: 333px;
            top: 460px;
        }
        100%{
            left: 264px;
            top: 561px;
        }
    }
    .founder-section {
        padding: 8rem 0 6rem;
    }
    .founder-left img {
        width: 20.3rem;
    }
    .founder-left .founder-info {
        padding-top: 2.5rem;
    }
    h3, .h3 {
        font-size: 2rem;
        line-height: 2.2rem;
    }
    h4, .h4 {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }
    .founder-right p {
        max-width: 22.5rem;
        margin-left: auto;
        margin-right: auto;
    }
    .collaboration-section {
        padding: 13.4rem 0 7rem;
    }
    .collab-form .theme-btn {
        margin-top: 3rem;
        width: 100%;
    }
    .collaboration-section img {
        max-width: 19rem;
        margin: 2.2rem auto;
    }
    .collaboration-section p,.collab-check {
        max-width: 28rem;
        margin-left: auto;
        margin-right: auto;
    }
    .connect-section p {
        max-width: 28rem;
        margin-left: auto;
        margin-right: auto;
    }
    .theme-form .form-control {
        margin-bottom: 3.2rem;
        line-height: 1;
        padding: 8px 10px;
        font-size: 16px;
    }
    .theme-form {
        text-align: left;
    }
    .theme-form label {
        font-size: 16px;
        line-height: 18px;
    }
    .theme-form label.form-label.opacity-0 {
        display: none;
    }
    .contact-form .theme-btn {
        margin-top: 14px;
    }
    .collab-check {
        margin-top: 3rem;
        max-width: 26rem;
    }
    .footer-bottom {
        padding-top: 11.3rem;
        text-align: center;
        max-width: 18.2rem;
        margin: 0 auto;
    }
    .footer-bottom > img {
        margin-bottom: 4rem;
    }
    .footer-links a {
        font-size: 1.4rem;
        justify-content: center;
    }
    .footer-links a img {
        max-width: 1.6rem;
    }
    .circle-section {
        /* background-color: var(--grey-color); */
        padding: 8.2rem 0 9.7rem;
    }
    .circle-section .h2 {
        margin-bottom: 8rem;
    }
    .circle-section p {
        max-width: 30rem;
        margin-left: auto;
        margin-right: auto;
    }
    .circle-section p span {
        display: block;
        margin-bottom: 3rem;
    }
    .circle-diagram .circle-item,.circle-diagram .circle-item2,.circle-diagram .circle-item3,.circle-diagram .circle-item4,.circle-diagram .circle-item5 {
        position: relative;
        left: auto;
        transform: none;
        top: auto;
        right: auto;
        bottom: auto;
    }
    .circle-diagram {
        width: auto;
        height: auto;
    }
    .circle-diagram .circle-item:not(:first-child) {
        margin-top: -35px;
    }
    .service-section {
        padding-top: 5rem;
    }
    .single-service .h5 {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }
    .single-service {
        margin: 0 auto;
    }
    .service-section .h2 {
        margin-bottom: 4rem;
    }
    .service-section p br {
        display: none;
    }
    .offcanvas-collapse {
        max-width: 26rem;
        text-align: left;
    }
    .top-header .nav-item .nav-link {
        font-size: 16px;
        line-height: 27px;
    }
    @keyframes floatMove {
        0% {
            transform: translate(0, 0);
            scale: 0.8;
        }
        25% {
            transform: translate(15px, -10px);
            scale: 1.1;
        }
        50% {
            transform: translate(-15px, 15px);
            scale: 1.3;
        }
        75% {
            transform: translate(10px, 20px);
            scale: 0.6;
        }
        100% {
            transform: translate(-15px, -5px);
            scale: 1;
        }
    }
    .dot {
        left: auto;
        right: 100px;
    }
    .dot.dot2 {
        left: 50%;
        top: 37%;
    }
    .dot.dot3 {
        top: 13px;
        left: 0px;
    }
    .dot.small-dot2 {
        top: auto;
        bottom: 90px;
        right: 150px;
    }
    .dot.small-dot3 {
        top: auto;
        bottom: 50px;
        right: 50px;
    }
    .score-section .dot.dot2{
        left: 50%;
        top: 22%;
    }
    .why-matters-section .dot.dot2{
        left: 50%;
    }
    .circle-section .dot.dot2 {
        left: 50%;
        top: 28%;
    }
    .service-section .dot.dot2 {
        left: 50%;
        top: 9%;
    }
    .collaboration-section .dot.dot2 {
        left: 50%;
        top: -20px;
    }
    .contanct-form .dot.dot2 {
        top: -21px;
    }
    .circle-diagram .circle-item {
        font-size: 1.8rem;
        line-height: 1.8rem;
    }
    .single-service {
        font-size: 2rem;
        line-height: 2rem;
    }
    .thankyou-msg .h3 {
        font-size: 2rem;
        line-height: 3.4rem;
    }
    .thankyou-msg .dot.dot2 {
        top: -38px;
    }
}
@media (max-width: 766px) and (min-width: 645px){
    .connect-animation .theme-btn {
        /* bottom: 16.3rem; */
        bottom: 5.3rem;
    }
}
@media (max-width: 645px) and (min-width: 577px){
    .connect-animation .theme-btn {
        /* bottom: 10.3rem; */
        bottom: 3.3rem;
    }
}
@media (max-width: 576px) and (min-width: 450px){
    .connect-animation .theme-btn {
        bottom: 10.3rem;
    }
}
@media (max-width: 767px) and (min-width: 576px){
    .connect-animation {
        width: 28rem;
        position: absolute;
    }
    .why-matters-content {
        padding: 9.2rem 0 4.2rem;
    }
    .why-matters-container .container {
        min-height: 69rem;
        max-width: 100%;
    }
    .custom-width-left {
        max-width: calc(100% - 30rem);
    }
}

/* Mobile css ends  */