/* ===========================*** DEVT:[A-101] ***=========================== */
:root {
   --indusA: #d52a29;
   --indusB: #333333;
    --indusC: #D9CDBF;
    --indusD: #52C1EA;
}

@media(max-width: 768px) {
    body, html {
        overflow-x: hidden;
    }
    .main-header {
        display: none;
    }
    /*=============================== mobile navbar css start ===============================*/
    .nav-mobile {
        height: 0px;
        z-index: 999;
        position: relative;
        display: block;
    }
    .nav-mobile-lower li a {
        text-decoration: none;
        color: #fff;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-mobile-upper {
        display: flex;
        justify-content: space-between;
        padding: 12px 2rem;
        background-color: #FFF;
    }
    .nav-mobile-upper div img {
        width: 70%;
        height: 100%;
    }
    .nav-mobile-lower {
        margin-top: -5px;
        background-color: #bb0000;
        transition: all .5s ease-out;
        position: relative;
        z-index: 1000;
        border-top: 1px solid #fff;
    }
    .nav-mobile-lower ul {
        padding: 0;
    }
    .nav-mobile-lower ul li {
        list-style: none;
        text-align: left;
        padding: 10px;
        color: #FFF;
        background-color: #004457;
        border: 1px solid #FFF;
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    }
    .nav-mobile-lower ul li:hover { 
        list-style: none;
        text-align: left;
        padding: 10px;
        color: #FFF;
        background-color: #003442;
        border: 1px solid #fff;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }
    .nav-button {
        padding: 0 0 30px 10px;
    }
    .translateCss {
        transform: translateY(-100rem);
    }
    .bar {
        display: block;
        width: 30px;
        height: 4px;
        background-color: #004457;
        margin: 5px 0;
    }
    .ham-img {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .bar:nth-child(1) {
        transition-duration: 300ms;
    }
    .bar:nth-child(3) {
        transition-duration: 300ms;
    }
    .header-button {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px;
    }
    .mobile-social {
        padding: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
    }
    /*=============================== /mobile navbar css end ===============================*/

    /*=============================== Home css start ===============================*/
    /* BANNER STYLE START..................................... */
    .main-banner-section {
        top: 65px;
    }
    .banner-captions {
        top: 35%;
        left: 5%;
        width: 100%;
    }
    .banner-captions .banner-caption-01 {
        font-size: 18px;
        line-height: 24px;
    }
    .banner-captions .banner-caption-01 span {
        font-size: 30px;
    }
    .banner-captions .banner-caption-02 {
        display: none;
    }
    .banner-button {
        padding-top: 0;
    }
    .banner-button a {
        padding: 5px 15px;
    }
    .banner-button a:hover {
        padding: 5px 15px;
    }
    /* /BANNER STYLE END..................................... */
    
    /* ASSESSMENT STYLE START..................................... */
    .home-assessment-section {
        bottom: -15px;
    }
    .home-assessment-01 h3 {
        font-size: 16px;
    }
    .home-assessment-02 {
        flex-direction: column;
    }
    .home-assessment-col1 {
        width: 100%;
    }
    .home-assessment-col2 {
        width: 100%;
    }
    .home-assessment-col3 {
        width: 100%;
    }
    /* /ASSESSMENT STYLE END..................................... */

    /* ABOUT STYLE START..................................... */
    .home-about-section {
        padding: 50px 0;
    }
    .home-about-wrapper {
        flex-direction: column;
    }
    .home-about-left {
        width: 100%;
    }
    .home-about-right {
        width: 100%;
    }
    .home-about-right h3 {
        width: 100%;
    }
    /* /ABOUT STYLE END..................................... */

    /* SERVICES STYLE START..................................... */
    .home-services-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    /* /SERVICES STYLE END..................................... */

    /* WHY STYLE START..................................... */
    .home-why-section {
        padding: 200px 0 150px 0;
    }
    .home-why-wrapper {
        flex-direction: column;
    }
    .home-why-wrapper .home-why-left {
        width: 100%;
    }
    .home-why-card-1 {
        left: 32%;
    }
    .home-why-card-3 {
        top: -32px;
        left: 23%;
    }
    .home-why-wrapper .home-why-right {
        width: 100%;
        top: 10rem;
        position: relative;
    }
    /* /WHY STYLE END..................................... */

    /* TESTIMONIAL STYLE START..................................... */
    .home-testimonial-section {
        background-image: none;
        padding: 50px 0 50px 0;
    }
    .home-testimonial-title {
        padding-bottom: 25px;
    }
    .home-testimonial-title p {
        width: 100%;
    }
    .home-testimonial-wrapper .home-testimonial-left {
        width: 0;
    }
    .home-testimonial-slider {
        width: 100%;
    }
    .home-testimonial-card p {
        text-align: center;
    }
    .home-testimonial-user {
        justify-content: center;
    }
    .home-testimonial-slider .features-prev {
        top: 16.3rem;
        left: 35%;
    }
    .home-testimonial-slider .features-next {
        left: 50%;
    }
    /* /TESTIMONIAL STYLE END..................................... */

    /* BLOG STYLE START..................................... */
    .home-blog-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    /* /BLOG STYLE END..................................... */

    /* FOOTER STYLE START..................................... */
    .footer-touch-wrapper {
        flex-direction: column;
        gap: 25px;
    }
    .footer-touch-wrapper h2 {
        font-size: 20px;
        width: 100%;
    }
    .footer-touch-wrapper h2 span {
        font-size: 20px;
    }
    .footer-touch-wrapper .footer-touch-input-button {
        width: 100%;
        flex-direction: column;
    }
    .footer-wrapper {
        flex-direction: column;
    }
    .footer-wrapper-01 {
        width: 60%;
    }
    .footer-wrapper-02 {
        width: 100%;
    }
    .footer-wrapper-03 {
        width: 100%;
    }
    .footer-wrapper-04 {
        width: 100%;
    }
    .footer-bottom {
        flex-direction: column;
        padding: 15px 0;
        gap: 10px;
    }
    .footer-bottom p {
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
    }
    /* /FOOTER STYLE END..................................... */
    /*=============================== Home css start ===============================*/

    /*=============================== External pages css start =============================*/
    .external-banner-img img {
        height: 200px;
    }
    .external-page-title {
        top: 65%;
    }
    .external-page-title h2 {
        font-size: 20px;
    }
    .external-about-wraper img {
        width: 100%;
        height: auto;
        padding: 0 0 25px 0;
    }
    .external-services-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    .external-service-details-wrapper img {
        width: 100%;
        height: auto;
        padding: 0 0 25px 0;
    }
    .external-blogs-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    .external-blog-details-section {
        padding: 50px 0;
    }
    .external-centect-section {
        position: relative;
        padding: 50px 10px 0 10px;
    }
    .blog-left-details .blog-details-content {
        padding: 15px;
    }
    .external-contact {
        flex-direction: column;
    }
    .external-contact-form {
        width: 100%;
        padding: 15px;
    }
    .external-teams-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    .external-form-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    /*=============================== External pages css end ===============================*/
}

@media(min-width: 769px) and (max-width: 992px) {
    body, html {
        overflow-x: hidden;
    }
    .main-header {
        display: none;
    }
    /*=============================== mobile navbar css start ===============================*/
    .nav-mobile {
        height: 0px;
        z-index: 999;
        position: relative;
        display: block;
    }
    .nav-mobile-lower li a {
        text-decoration: none;
        color: #fff;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-mobile-upper {
        display: flex;
        justify-content: space-between;
        padding: 12px 2rem;
        background-color: #FFF;
    }
    .nav-mobile-upper div img {
        width: 70%;
        height: 100%;
    }
    .nav-mobile-lower {
        margin-top: -5px;
        background-color: #bb0000;
        transition: all .5s ease-out;
        position: relative;
        z-index: 1000;
        border-top: 1px solid #fff;
    }
    .nav-mobile-lower ul {
        padding: 0;
    }
    .nav-mobile-lower ul li {
        list-style: none;
        text-align: left;
        padding: 10px;
        color: #FFF;
        background-color: #004457;
        border: 1px solid #FFF;
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    }
    .nav-mobile-lower ul li:hover { 
        list-style: none;
        text-align: left;
        padding: 10px;
        color: #FFF;
        background-color: #003442;
        border: 1px solid #fff;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }
    .nav-button {
        padding: 0 0 30px 10px;
    }
    .translateCss {
        transform: translateY(-100rem);
    }
    .bar {
        display: block;
        width: 30px;
        height: 4px;
        background-color: #004457;
        margin: 5px 0;
    }
    .ham-img {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .bar:nth-child(1) {
        transition-duration: 300ms;
    }
    .bar:nth-child(3) {
        transition-duration: 300ms;
    }
    .header-button {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px;
    }
    .mobile-social {
        padding: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
    }
    /*=============================== /mobile navbar css end ===============================*/

    /*=============================== Home css start ===============================*/
    /* BANNER STYLE START..................................... */
    .banner-captions {
        top: 45%;
        left: calc((100vw - 690px) / 2);
    }
    .banner-captions .banner-caption-01 {
        font-size: 30px;
        line-height: 45px;
    }
    .banner-captions .banner-caption-01 span {
        font-size: 50px;
    }
    .banner-captions .banner-caption-02 {
        display: none;
    }
    .banner-button {
        padding-top: 0;
    }
    /* /BANNER STYLE END..................................... */

    /* ABOUT STYLE START..................................... */
    .home-about-wrapper {
        flex-direction: column;
    }
    .home-about-left {
        width: 100%;
    }
    .home-about-right {
        width: 100%;
    }
    /* /ABOUT STYLE END..................................... */

    /* SERVICES STYLE START..................................... */
    .home-services-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }                                            
    /* /SERVICES STYLE END..................................... */

    /* WHY STYLE START..................................... */
    .home-why-section {
        padding: 15rem 0 10rem 0;
    }
    .home-why-wrapper {
        flex-direction: column;
    }
    .home-why-wrapper .home-why-left {
        width: 100%;
    }
    .home-why-card-1 {
        left: 48%;
    }
    .home-why-card-3 {
        top: -25px;
        left: 42%;
    }
    .home-why-card-4 {
        top: 50px;
        left: 58%;
    }
    .home-why-wrapper .home-why-right {
        width: 100%;
        top: 10rem;
        position: relative;
    }
    /* /WHY STYLE END..................................... */

    /* TEAMS STYLE START..................................... */
    .swiper-container {
        height: 35vh;
    }
    /* /TEAMS STYLE END..................................... */

    /* TESTIMONIAL STYLE START..................................... */
    .home-testimonial-slider .features-prev {
        top: 17.6rem;
    }
    .home-testimonial-slider .features-next {
        left: 15%;
    }
    /* /TESTIMONIAL STYLE END..................................... */

    /* FOOTER STYLE START..................................... */
    .footer-touch-wrapper h2 {
        font-size: 20px;
    }
    .footer-touch-wrapper h2 span {
        font-size: 20px;
    }
    .footer-wrapper {
        padding: 65px 0 25px 0;
        flex-direction: column;
    }
    .footer-wrapper-01 {
        width: 60%;
    }
    .footer-wrapper-02 {
        width: 60%;
    }
    .footer-wrapper-03 {
        width: 60%;
    }
    .footer-wrapper-04 {
        width: 60%;
    }
    .footer-bottom {
        flex-direction: column;
        padding: 20px 0;
        gap: 10px;
    }
    .footer-bottom p {
        padding-top: 0;
        padding-bottom: 0;
    }
    /* /FOOTER STYLE END..................................... */
    /*=============================== /Home-page css end =====================*/

    /*=============================== /External-page css start ===================*/
    .external-page-title {
        top: 60%;
    }
    .external-about-wraper img {
        width: 100%;
        height: auto;
        padding-right: 0;
        padding: 0 0 50px 0;
    }
    .external-services-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .external-service-details-wrapper img {
        width: 100%;
        height: auto;
        padding: 0 0 50px 0;
    }
    .external-blogs-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .external-blog-details-section {
        padding: 0;
    }
    .external-contact {
        padding: 0;
        flex-direction: column;
    }
    .external-contact-details {
        width: 100%;
    }
    .external-contact-form {
        width: 100%;
        padding: 20px;
    }
    .external-teams-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .external-form-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    /*=============================== /External-page css end =====================*/
}

@media(min-width: 993px) and (max-width: 1365px) {
    .header-right .header-top {
        gap: 10px;
    }
    .header-top-01 a {
        font-size: 13px;
    }
    .header-top-02 a {
        font-size: 13px;
    }
    .header-top-03 {
        gap: 10px;
    }
    .header-top-03 a:first-child {
        font-size: 13px;
    }
    .header-top-03 a:first-child:hover {
        font-size: 13px;
    }
    .header-top-03 a:last-child {
        font-size: 13px;
    }
    .header-top-03 a:last-child:hover {
        font-size: 13px;
    }
    .header-bottom ul {
        gap: 40px;
    }
    .header-bottom ul li a {
        font-size: 13px;
    }
    .header-bottom ul li a:hover {
        font-size: 13px;
    }
    .banner-captions {
        top: 35%;
        left: calc((100vw - 935px) / 2);
    }
    .banner-captions .banner-caption-02 {
        width: 60vw;
    }
    .home-services-card-body a {
        height: 50px;
    }
    .home-services-card-body a:hover {
        height: 50px;
    }
    .home-services-card-body p {
        -webkit-line-clamp: 3;
        height: auto;
    }
    .home-why-card-2 {
        left: 68%;
    }
    .home-why-card-3 {
        top: -22px;
    }
    .home-why-card-4 {
        top: 55px;
        left: 60%;
    }
    .home-testimonial-wrapper .home-testimonial-left {
        width: 50%;
    }
    .home-testimonial-slider {
        width: 50%;
    }
    .footer-touch-wrapper h2 {
        width: 40%;
    }
    .footer-touch-wrapper .footer-touch-input-button {
        width: 60%;
    }
}

@media(min-width:1200px){
    .banner-captions {
        position: absolute;
        top: 50%;
        left: calc((100vw - 1140px) / 2);
        transform: translateY(-50%);
    }
}

@media(min-width:1400px){
    .banner-captions {
        position: absolute;
        top: 50%;
        left: calc((100vw - 1320px) / 2);
        transform: translateY(-50%);
    }
}

@media(min-width:1550px){
    .footer-wrapper-01 p {
        width: 12vw;
    }
    .home-talk-section {
        padding: 375px 0;
    }
    
}