/* Small screens (Tablets & Large Phones) */
@media (max-width: 768px) {
    .logo {
        top:20px;
        left:20px;
        height:80px;
    }
    .hero-section {
        height: 100vh !important;
        background-size: cover;
    }

    .hero-banner-text {
        top: 80%;
        text-align: center;
        width: 80%;
        padding-bottom: 10px;
    }

        .hero-banner-text h3 {
            font-size: 2.5rem;
            top: 70%;
        }

        .hero-banner-text span {
            font-size: 14px;
        }
        .hero-banner-text .gradient-n {
            font-size: 1.8rem;
        }

    .dropbtn {
        font-size: 35px;
        top: 15px;
        margin-right:10px;
    }
    .dropdown-content {
        top:80px;
        background-color:#000;

    }
    .square-box {
        top: 35%;
    }
        .square-box img {
            height: 120px;
        }

    .banner-overlay img {
        height: 150px;
        margin-top: 40px;
    }

    .logo {
        top: 20px;
        left: 20px;
        height: 80px;
    }
    
    .hero-image {
        min-height: 200px;
    }

    .hero-text h1 {
        font-size: 4rem;
    }

    .brand-box {
        height: 150px;
        width: 150px;
    }

    .brand-anchor {
        font-size: 16px;
    }
    .about-btn {
        min-width: 150px;
        font-size: 18px;
    }
    .client-image {
        height: 200px;
    }

    .hundred-plus h3 {
        font-size: 2.5em;
    }

    .hundred-plus span {
        font-size: 3.5em;
    }

    .hundred-plus h4 {
        font-size: 1em;
    }

    .image-box {
        width: 80px;
        height: 80px;
    }
    .hero-banner-text {
        font-size: 22px;
    }

    .adventure-text {
        font-size: 16px;
    }

    .dropbtn {
        font-size: 35px;
    }

    .banner-overlay img {
        height: auto;
        max-width: 100%;
    }

    .square-box img {
        height: 100px;
    }
    /*************Status Section**************************/
      .status-count {
        display: grid;
       grid-template-columns:repeat(2,1fr);
        align-items: center; /* Center align content */
    }

    .status-count .col-lg-2 {
        width: 100%; /* Full width for smaller screens */
        margin-bottom: 15px; /* Add spacing between items */
    }
    .status-count h3{
        font-size:3rem !important;
    }
        .status-count span {
            font-size: 3rem !important;
        }
        
        /********************Work Section*******************************/
        .col-wrapper {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Two equal columns */
            gap: 10px; /* Space between columns */
            text-align: center;
        }

    /* Ensure col-lg-3 takes two columns */
    .border-box {
        width: 100%;
    }

    /* Make the .col-lg-4 take full width below */
    .hero-image {
        grid-column: span 2; /* Full width below */
        min-height: 250px;
    }

    .brand-box {
        height: 180px;
        width: 180px;
    }

    .brand-anchor {
        font-size: 16px;
    }

    .hero-text h1 {
        font-size: 2rem;
    }
    .hero-text span {
        font-size: 3rem;
    }
        .circle, .star, .triangle, .square {
            width: 60px;
            height: 60px;
        }

    .star {
        width: 100px;
        height: 100px;
    }

    .triangle {
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 60px solid transparent;
    }

    .square {
        width: 60px;
        height: 60px;
    }
    /***************************Happy Clients************************************/
    .client-image {
        height: 450px; /* Increased height for better visibility */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .client-text {
        justify-content:center;
        flex-direction: column; /* Stack elements vertically */
        text-align: center;
        gap: 20px; /* Reduce gap */
        top:20%;
    }

    /* Ensure 100+ section stays visible */
    .hundred-plus {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .hundred-plus h2 {
            font-size: 4rem; /* Adjust font size */
            padding:10px;
        }

        .hundred-plus span {
            font-size: 4em;
        }

        .hundred-plus h4 {
            font-size: 1.2em;
            line-height: 1.2;
            text-align: center;
        }

    /* Adjust client logos */
    .client-header {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Ensure all logos display */
        gap: 10px;
        width: 100%;
        justify-content: center;
    }

    .image-box {
        height: 80px; /* Adjust height */
        width: 80px; /* Ensure consistency */
        padding: 10px;
        margin-left:10px;
    }
    /********************Why Us Section******************************/
    .why-us-section {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 20px;
    }

    .why-us-section h1 {
        font-size: 4rem !important; /* Adjust font size for smaller screens */
    }
        .why-us-section span {
            font-size: 4rem !important; /* Adjust font size for smaller screens */
        }
    .service-btn {
        font-size: 18px;
        padding: 6px 8px;
        margin-top: 20px;
        margin-bottom: 20px; /* Reduce margin */
        align-items: center !important;
        min-width: 150px;
    }

    .why-us {
        text-align: center;
    }

        .why-us .row {
            flex-direction: column;
            gap: 20px;
        }

        .why-us .col-md-2 {
            width: 100%;
            text-align: center;
        }

    .why-us-img {
        width: 100px; /* Reduce image size for smaller screens */
        height: 100px;
    }

    .why-us p {
        font-size: 14px;
    }
    /***************************Testimonials*************************************/
    /*
    .testimonials-section h3,span {
        font-size:34px;
    }
    .testimonials-section .row {
        flex-direction: column;
        align-items: center;
    }

    .profile-info {
        flex-direction: column;
        align-items: center;
    }
    .profile-img {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .profile-details {
        text-align: center;
    }

    .testimonial-box,
    .testimonial-box-center {
        width: 100%;
        height:100% !important;
        padding: 15px;
        text-align: center;
    }
    .testimonial-box-center {
        margin-top:20px;
    }
    .testimonial-body,
    .testimonial-body-center {
        font-size: 14px;
        max-height: 180px;
    }
    .comma-image {
        width: 50px;
        opacity: 0.2;
    }
    .comma-top-left {
        left: 10px;
        top: 5px;
    }
    .comma-bottom-right {
        right: 10px;
        bottom: 20px;
    }
    .readmore-btn-testim {
        margin:30px 0 20px 0;
    }*/

    .testimonial-card {
        flex: 0 0 100%; /* Show one card at a time */
        padding: 10px;
        max-height: auto;
    }

    .profile-img-testimonial {
        width: 100px;
        height: 100px;
        margin-top: 0;
    }

    .profile-name {
        font-size: 16px;
    }

    .company-name {
        font-size: 12px;
    }

    .testimonial-body,
    .testimonial-body-center {
        font-size: 14px;
        line-height: 1.4;
        max-height: 200px;
    }

    .testimonials-section {
        padding: 15px;
    }
        .testimonials-section h3 {
            font-size: 3rem !important;
        }

        .testimonial-prev,
        .testimonial-next {
            font-size: 28px;
            padding: 6px 10px;
            top: auto;
            bottom: -50px;
            transform: none;
        }

    .testimonial-prev {
        left: 30%;
    }

    .testimonial-next {
        right: 30%;
    }

    .comma-image {
        width: 50px;
        opacity: 0.2;
    }

    .comma-top-left {
        top: 10px;
        left: 20px;
    }

    .comma-bottom-right {
        bottom: 50px;
        right: 20px;
    }
    /****************Our Blog************************************/
    .our-blog h3, span {
        font-size: 34px;
    }
    .our-blog {
        padding-top: 100px;
    }
    .Blog-section {
       
        height: auto;
        text-align: center;
    }
        .Blog-section img {
            height: 180px;
        }

        .Blog-section h4 {
            font-size: 16px;
            margin-top: 10px;
        }

        .Blog-section span {
            font-size: 12px;
        }

    .arrow-link {
        font-size: 14px;
        bottom: 5px;
        right: 10px;
    }
    /****************How to grow brand*******************************/
    .brand-image img {
        height: 200px !important;
    }
    .overlay-content {
        left: 30px;
        right: 30px;
        top: 55%;
        padding: 10px;
    }

    .left-text h2 {
        font-size: 28px;
    }
    .right-box {
      max-width:200px !important;
        font-size: 22px;
    }
        .right-box p {
            font-size:18px;
        }
    /*********************************Footer home page********************************/
     .grid-container {
        grid-template-columns: repeat(1, 1fr);  
        text-align: left;
    }
    .footer-logo {
        max-width: 70px; 
        text-align:center;
    }
    .footer-body {
        text-align: left;
       padding-left:0 !important;
       padding-right:0 !important;
        padding-bottom:50px;
    }
    .form-control {
        margin-top:10px;
        font-size: 14px !important;
    }
    .footer-body .row {
        flex-direction: column;
    }

    .footer-body .col-md-6 {
        width: 100%;
        margin-top: 30px;
    }
    .footer-body {
        padding: 0px !important;
    }
   

    .footer-body h2 {
        font-size: 20px !important;
        text-align: center;
    }

    .footer-body p,
    .footer-body label {
        font-size: 14px;
        text-align: center;
    }

    .footer-body input,
    .footer-body textarea {
        font-size: 14px;
    }

    .footer-body .grid-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        font-size: 14px;
    }

        .footer-body .grid-container > div {
            width: 45%;
        }

    .footer-body .about-btn {
        font-size: 16px;
        padding: 10px;
    }
    .custom-checkbox {
        width: 14px;
        height: 14px;
    }
    .about-btn {
        font-size: 14px;
        padding: 8px;
    }
    #main-banner {
        display:none;
    }
    .mobile-banner {
        display: block;
        /*background-image: url('../images/about/about-last.png');*/ /* Change this per page */
        background-size: cover;
        background-position: center;
        height: 300px;
       
        color: white;
        position: relative;
    }
   
    .banner-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .banner-logo {
            width: 80px;
            height: auto;
        }

        .menu-toggle {
            font-size: 28px;
            cursor: pointer;
        }

        .banner-content {
            text-align: center;
            margin-top: 40px;
        }

            .banner-content h1 {
                font-size: 34px;
                margin-bottom: 10px;
            }

        .center-icon {
            width: 30px;
            height: auto;
        }
  /*****************Footer Layout.cshtml********************/
        #mainfooter .row > a img {
            height: 70px; /* Smaller logo on mobile */
           
            margin: 0 auto;
        }

        #mainfooter .col-md-6 {
            margin-top: 30px;
        }

        #mainfooter .links-footer a {
            margin-bottom: 10px;
            font-size: 16px;
        }

        #mainfooter .font-2xl {
            font-size: 20px;
        }

        #mainfooter .font-xl {
            font-size: 16px;
        }

        #mainfooter .font-lg {
            font-size: 14px;
        }

        #mainfooter .row {
            flex-direction: column;
        }
        #mainfooter .footer-links {
            display:grid;
            grid-template-columns:repeat(2,1fr);
        }
    }

    


/* Extra Small screens (Phones) */
@media (max-width: 480px) {
    .hero-section {
        height: auto;
    }

    .hero-banner-text {
     
        text-align: center;
    }

        .hero-banner-text h3 {
            font-size: 2rem;
        }

        .hero-banner-text span {
            font-size: 12px;
            line-height: 1.2;
        }

    .dropbtn {
        font-size: 30px;
        top: 10px;
        right: 10px;
    }

    .square-box {
        top: 18%;
    }
        .square-box img {
            height: 100px;
        }

    .banner-overlay img {
        height: 300px;
    }

    .dropdown-content {
        width: 100%;
        right: 0;
        text-align: center;
    }
        .dropdown-content a {
            font-size: 14px;
            padding: 10px;
        }

    .logo {
        top: 20px;
        left: 20px;
        height: 80px;
    }
    .banner-container {
        top:50%;
    }
    .testimonials-section {
        padding: 10px;
    }

    .profile-img {
        width: 60px;
        height: 60px;
    }

    .profile-name {
        font-size: 16px;
    }

    .company-name {
        font-size: 12px;
    }

    .ratings {
        font-size: 14px;
    }

    .testimonial-body,
    .testimonial-body-center {
        font-size: 13px;
        max-height: 150px;
    }
    .comma-image {
        display: none; /* Hide commas for very small screens */
    }
   
}
@media (min-width: 1200px) {
    .square-box img {
        height: 120px;
    }
}
@media (max-width: 1199px) {
    .brand-box {
        height: 200px;
        width: 200px;
    }

    .brand-anchor {
        font-size: 18px;
    }

    .hero-image {
        min-height: 250px;
    }
    .about-section {
        padding: 20px;
    }
}
@media (max-width: 991px) {
    .banner-container {
        height: auto;
    }

    .hero-section {
        height: auto;
        padding: 50px 20px;
    }
    .dropbtn {
        font-size: 40px;
    }

    .hero-text h1 {
        font-size: 5rem;
    }

    .brand-box {
        height: 180px;
        width: 180px;
    }
    .about-section {
        flex-direction: column;
        text-align: center;
    }

    .about-us {
        font-size: 16px;
    }

    .abt-image img {
        width: 100%;
        height: auto;
    }
    .overlay-content {
        flex-direction: column; /* Stack items */
        justify-content: center;
        text-align: center;
        gap: 20px;
        padding: 30px;
    }

    .left-text {
        max-width: 100%;
        text-align: center;
    }

    .right-box {
        min-width: 200px;
        font-size: 18px;
    }
    .client-text {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
  /*******************Testimonials*********************************/
  
}
@media (max-width: 575px) {
    .hero-text h1 {
        font-size: 3rem;
    }

    .brand-box {
        height: 120px;
        width: 120px;
    }

    .brand-anchor {
        font-size: 14px;
    }

    .circle, .star, .triangle, .square {
        display: none; /* Hide decorative elements for clarity */
    }

    .about-section {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 15px;
    }

    .about-btn {
        min-width: 120px;
        font-size: 16px;
        padding: 10px;
    }

    .abt-image img {
        width: 100%;
        height: auto;
    }
    .overlay-content {
        padding: 10px;
        gap: 15px;
    }

    .left-text {
        font-size: 14px;
        max-width: 90%;
    }

    .right-box {
        font-size: 12px;
      
        padding: 6px;
    }
    .hero-banner-text {
        font-size: 18px;
    }

    .adventure-text {
        font-size: 14px;
        line-height: 1.2;
    }

    .dropbtn {
        font-size: 30px;
    }

    .square-box img {
        height: 80px;
    }
    
}
/*===========================About Page css===============================*/
@media (max-width: 768px) {
    .h3-flex-wrapper {
        gap:0px !important;
    }
    /* Show mobile banner and hide main grid banner */
    #main-banner {
        display: none !important;
    }

    .mobile-banner {
        display: block;
        background-color: black;
        height: 300px;
        color: white;
       
        position: relative;
    }

    .banner-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

   .banner-top a img {
        height: 60px !important;
    }

    .dropbtn-mobile {
        font-size: 28px;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
    }

    .banner-content {
        text-align: center;
        margin-top: 30px;
    }

        .banner-content h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }

    .center-icon {
        width: 30px;
        height: auto;
    }

    .dropdown-content-mobile {
        display: none;
        position: absolute;
        top: 70px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        padding: 10px;
    }
        .dropdown-content-mobile a {
            display: block;
            color: white;
            padding: 8px 12px;
            text-decoration: none;
        }
            .dropdown-content-mobile a:hover {
                color: #f7d61b;
            }
    /* Hide decorative lines */
    .vision-block-wrapper .line-left,
    .vision-block-wrapper .line-right,
    .vision-block-wrapper .line-horiz-top-left,
    .vision-block-wrapper .line-horiz-bottom-left
    {
        display: none !important;
    }
   
    /* Align Vision block like Mission block */
    .vision-block .d-flex {
        flex-direction: column !important;
        /* align-items: center !important;*/

        width: 100% !important;
    }
    /*.vision-block-wrapper img{
        height: 120px;
        text-align: left !important;
    }
    .mission-block img {
        height: 120px;
        text-align: left !important;
    }*/
    .vision-block p {
        padding: 0 !important;
        margin-left: 0;
        max-width: 100%;
        padding-bottom: 15px;
    }
    .vision-block {
        margin-left: 0;
        border-bottom: 1px solid #bfbfbf;
        text-align: center;
    }
    .mission-block {
        text-align: center;
    }
    .vision-mission-section {
        padding-top: 0 !important;
    }
    #service-Section h2 {
    font-size: 4rem !important; /* Adjust font size for smaller screens */
    }

    #service-Section h2 span {
        font-size: 4rem !important; /* Adjust font size for smaller screens */
    }
    .service-row,
    .service-col-right,
    .service-col-left {
        border: none !important;
    }
    .director-profile {
        width: 300px;
        justify-content:end;
        align-items:end;
        padding:0 !important;
    }
    .profile-img-testimonial {
        width: 100%;
        height: 200px;
        object-fit: cover;
      
        text-align:right;
    }
    .team-directors .col-md-6,
    .team-testimonials .col-md-6 {
        width: 100%;
        margin-bottom: 30px;
    }

    .team-heading {
        text-align: center;
        font-size: 3.2rem;
    }
        .team-heading span {
            font-size: 3.2rem;
        }
        .team-quote {
            font-size: 0.95rem;
            text-align: center;
        }

    .testimonial-card {
        height: 250px;
        margin-bottom: 20px;
    }

    .testimonial-info span{
        padding: 5px;
        font-size: 18px;
    }

    .social-icons {
        text-align: center;
        margin-top: 5px;
    }

        .social-icons a {
            margin: 0 5px;
        }
    .border-line {
        height: 250px;
    }

    .font-5xl {
        font-size: 2rem;
    }

    .gradient-plus {
        font-size: 2rem;
    }
    .our-team-card-info span {
        font-size:18px;
    }
}
    @media screen and (max-width: 991px) {
        .about-image {
            width: 100%;
            height: auto;
        }

        .overlay-text-abt-img {
            position: static;
            width: 100%;
            padding: 15px;
            text-align: center;
            color: #bfbfbf;
        }

        .overlay-text-abt-status {
            position: static;
            padding: 10px 10px;
            text-align: center;
        }

            .overlay-text-abt-status .row {
                flex-wrap: wrap;
                justify-content: center;
            }

            .overlay-text-abt-status .col {
                flex: 0 0 45%;
                max-width: 45%;
                margin: 10px 0;
            }
        .border-line {
            height:250px;
        }
        .font-5xl {
            font-size: 2rem;
        }
        .gradient-plus {
            font-size: 2rem;
        }
    }

    @media screen and (max-width: 576px) 
    {
        .overlay-text-abt-status .col {
            flex: 0 0 100%;
            max-width: 100%;
        }

       
        .overlay-text-abt-img p {
            font-size: 14px;
            line-height: 1.5;
        }
    }

    /*============================work Page CSS======================================*/
/* Show mobile banner and hide main grid banner */
@media (max-width: 768px) {
    #main-banner {
        display: none !important;
    }

    .banner-content h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .border-column {
        width: 100%;
        height: auto;
        padding: 20px;
    }

        .border-column h3 {
            font-size: 24px !important;
        }
    .category-section row {
        flex-direction:row;
        align-items:end !important;
    }
    .category-section .fa-arrow-left,
    .category-section .fa-arrow-right {
        font-size: 18px !important;
    }
}
@media (max-width: 576px) {
    .border-column {
        padding: 15px;
        text-align: center;
    }

        .border-column h3 {
            font-size: 20px;
        }

        .border-column span {
            font-size: 14px;
        }

    .category-section h3.services-brand {
        font-size: 1.5rem;
    }

    .category-section .fa-arrow-left,
    .category-section .fa-arrow-right {
        font-size: 16px;
    }
}
@media (max-width: 1200px) {
    .square-wrapper {
        justify-content: center;
        gap: 20px;
    }

    .border-column {
    
        margin-bottom: 20px;
    }
}
/********************Portfolio/work detail page*********************/
@media (max-width: 768px) {
    #main-banner {
        display: none !important;
    }

    .banner-content h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }
}
@media (max-width: 992px) {
    .project-section .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .project-title {
        font-size: 48px;
    }

    .project-details p,
    .project-nav {
        font-size: 16px;
    }

        .project-nav .nav-icons,
        .project-nav div:last-child {
            justify-content: flex-start;
            gap: 30px;
        }

        .project-nav div:last-child {
            margin-top: 40px !important;
        }
}

@media (max-width: 576px) {
    .project-section {
        padding: 40px 15px;
    }

    .project-title {
        font-size: 36px;
    }

    .project-details p {
        font-size: 15px;
    }

    .project-nav {
        font-size: 15px;
        text-align:center !important;
    }

    .nav-icons i {
        font-size: 16px;
    }
    .nav-icon-title {
        margin-top: 100px;
    }
        .nav-icon-title span {
            font-size:16px;
        }


        .project-nav .nav-icons,
        .project-nav div:last-child {
            gap: 50px;
            font-size: 16px;
        }

    .next-prev-icon .gap-5 {
        gap: 50px !important;
    }

    .next-prev-icon span,
    .next-prev-icon i {
        font-size: 16px;
    }
}
/*************************Shop Page CSS**********************************/
@media (max-width: 768px) {
    #main-banner {
        display: none !important;
    }

    .banner-content h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }
}
/* Tablets and below (max-width: 992px) */
@media (max-width: 992px) {
    .shop {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .shop h4 {
            position: static;
            margin-top: 20px;
            font-size: 28px;
        }

        .shop img {
            max-width: 100%;
            height: auto;
        }

    .arrow-icons {
        position: static;
        margin-top: 20px;
        margin-bottom: 20px;
        justify-content: center;
    }

    .shop-item + .shop-item {
        border-top: none;
        border-left: none;
        margin-top: 20px;
    }

    .shop-text {
        font-size: 20px;
        padding: 0 10px;
    }

    .about-shop::before {
        display: none; /* Hide background image on small screens */
    }

    .nav {
        flex-wrap: wrap;
        justify-content: center !important;
    }
}

/* Mobiles (max-width: 576px) */
@media (max-width: 576px) {
    .shop h4 {
        font-size: 22px;
    }
    .about-shop {
        padding-top: 20px;
        
    }
    .arrow-icons i {
        font-size: 20px;
        gap: 15px;
    }

    .shop-text {
        font-size: 16px;
    }

    .categories {
        font-size: 14px;
        padding: 6px 10px;
    }

    .cloth .price p {
        font-size: 14px;
    }

    .cloth .text-muted {
        font-size: 13px;
    }

    .product-gallery .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Small mobile (max-width: 400px) */
@media (max-width: 400px) {
    .cloth .price p {
        font-size: 13px;
    }

    .shop-text {
        font-size: 14px;
    }

    .nav-item .categories {
        font-size: 12px;
    }
}
/**********************Contact page css**************************************/
@media (max-width: 768px) {
    #main-banner {
        display: none !important;
    }

    .banner-content h1 {
        font-size: 32px;
        margin-bottom: 10px;
    }
}


/* About page css new */
@media (max-width: 992px) {
    .row.bgAboutImg {
        height: auto !important; /* let content decide height */
        flex-direction: column; /* stack columns vertically */
        position: relative;
        padding: 20px 0;
    }

        .row.bgAboutImg .col-md-6 {
            position: relative !important;
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
        }

    .overlay-text-abt-status {
        position: relative !important;
        margin-top: 20px;
    }

    .h3-flex-wrapper {
        gap: 2rem;
    }

        .h3-flex-wrapper .text-center p {
            font-size: 14px;
        }

        .h3-flex-wrapper .number {
            font-size: 2rem;
        }
}

/* Mobile phones */
@media (max-width: 576px) {
    .hidden-div {
        display:none;
    }
    .row.bgAboutImg {
        padding: 15px 10px;
    }
    .about-data {
        padding-top:100px;
    }
    .row.bgAboutImg .col-md-6 {
        margin-bottom: 15px;
    }

    .h3-flex-wrapper {
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }

        .h3-flex-wrapper .number {
            font-size: 1.8rem;
        }

        .h3-flex-wrapper .text-center p {
            font-size: 13px;
            line-height: 1.4;
        }
}