@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap');

body{
    direction: ltr;
    font-family: 'Sarabun', sans-serif !important;
    font-size: 16px;
    margin: 0;
    padding: 0;
}



a {
    text-decoration: none;
    cursor: pointer;
}


    .hd-bg-color {
        background-color: #00ADB5;
    }

    .hd-bg-img {
        padding-top: 36px;
        padding-bottom: 36px;
        background-image: url(bg/0-misty-frame-IeDK.png);
        background-position: center;
        background-size: cover;
    }

    .hd-navigation {
        gap: 15px;
        margin-bottom:  26px;
        padding: 23px 36px;
        border-radius: 85px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        background: #c4b6b6;
    }

    .hd-logo-contact {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .hd-logo-contact a {
        color: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .hd-logo-img {
        width: 40px;
        height: auto;
    }

    .hd-logo-txt {
        color: inherit;
        font-size: 34px;
        margin: 0;
    }

     .hd-cont {
        display: none;
        flex-direction: row;
        gap:  11px;
    }

    .hd-cont-item {
        display: flex;
        flex-direction: row;
        gap:  11px;
        align-items: center;
    }

    .hd-cont-item p {
        color: #000;
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 0;
        word-break: break-word;
    } 

    .hd-cont-item i {
        color: #000;
        font-size: 29px;
    }

    .nav-box {
        color: inherit;
        display: flex;
        flex-direction: row;
        gap:  11px;
        justify-content: center;
        align-items: center;
    }

    .nav-box-link {
        color: inherit;
        font-size: 18px;
        text-transform:  uppercase;
        letter-spacing:  1px;
    }

    .dropdown .dropbtn {
        color: inherit;
        font-size: 18px;
        text-transform:  uppercase;
        letter-spacing: 1px;  
        border: none;
        outline: none;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
        padding: 0;
        transition: all .4s ease;
    }

    .nav-box-link:hover , .dropdown .dropbtn:hover {
        color: #ACA22E;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 6px 11px 0px rgba(0,0,0,0.2);
        z-index: 3;
    }
        
    .dropdown-content a {
         float: none;
        color: black;
        padding: 10px;
        text-decoration: none;
        display: block;
        text-align: left;
        width: 300px;
    }
        
    .dropdown-content a:hover {
        background-color: #ddd;
    }
        
    .dropdown:hover .dropdown-content {
        display: block;
    }

    .hello-category {
        display: flex;
        flex-direction: row-reverse;
        gap: 23px;
    }

    .wrapper-category {
        width: 100%;
    }

    .category-carousel-item {
        margin: 23px 11px;
        min-height: 225px;
        display: flex;
        transition: all .3s ease;
        background-color: #c4b6b6;
        border-radius: 3px;
        box-shadow: 0 3px 12px -1px rgba(7,10,25,.1),0 22px 27px -30px rgba(7,10,25,.1);
        position: relative;
        box-sizing: border-box;
    }

    .category-carousel-item:hover {
        box-shadow: 2px 2px 0px 0px #333;
        transform: translate(-2px,-2px);
    }

    .category-title {
        border: .5px solid #333;
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 26px;
        letter-spacing: 1px;
        color: #333;
        background: #fff;
        padding: 4px 17px;
        border-radius: 100px;
        position: absolute;
        left: 50%;
        top: -20px;
        z-index: 5;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .category-img {
        padding: 36px;
        padding-bottom: 22px;
        margin: auto;
        
    }

    .category-img img {
        width: 100%;
        height: 200px;
    }

    .hd-hello {
        width: 50%;
        display: block;
        margin: auto;
        border-radius: 3px;
        background: rgba(0,0,0,0.5); color: #fff;
    }

    .hd-hello-title {
        padding: 23px 36px;
        font-size: 20px;
        letter-spacing: 1px;
        font-style: italic;
    }

    .main-block-container {
        display: flex;
        flex-direction: column ;
        margin-top: 58px;
        margin-bottom: 58px;
    }

    .main-title {
        font-size: 29px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 26px !important;
    }

    .blog-artcl-sidebar {
        display: flex;
        flex-direction: row;
        gap: 26px;
        position: relative;
    }

    .artcl {
        display: flex;
        flex-direction: row;
        gap: 23px;
        align-items: center;
        padding: 17px;
        background-color: #c4b6b6;
        border-radius: 3px;
        box-shadow: 0 3px 12px -1px rgba(7,10,25,.1),0 22px 27px -30px rgba(7,10,25,.1);
    }

    .artcl-img-part {
        width: 40%;
        height: 250px;
        position: relative;
    }

    .artcl-img img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       border-radius: 3px;
    }

    .comm-cloud {
        position: absolute;
        top: 5px;
        left: 5px;
    }

    .comm-cloud-icon {
        background: rgba(255,255,255,0.9); color: #222;
        border-radius: 3px;
        padding: 6px;
    }

    .comm-cloud-icon i {
        font-size: 20px;        
    }

    .comm-cloud-icon p {
        margin: 0;
    }
    
    .artcl-txt-part {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 23px;
    }

    .title-wrapper {
        display: flex;
        flex-direction: column-reverse;
        gap: 6px;
    }

    .artcl-stat-info {
        display: flex;
        flex-direction: row;
        gap: 17px;
        background: rgba(0,0,0,0.5); color: #fff;
        border-radius: 3px;
        padding: 6px 11px;
        width: fit-content;
    }

    .artcl-stat-info p {
        margin: 0;
    }

    .artcl-stat-info i {
        margin-right: 11px;
    }

    .artcl-txt-title {
        font-size: 34px;
        color: #333;
        margin: 0;
    }

    .artcl-txt-title:hover {
        color: #333;
        text-decoration: underline;
    }

    .artcl-txt-content {
        font-size: 18px;
        margin: 0;
    }

    .more-btn-autor {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 11px;
    }

    .Btn-more {
        margin-right: 17px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 45px;
        height: 45px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition-duration: .3s;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
        background-color: #ED6363;
      }
      
      .more-arrow {
        width: 100%;
        transition-duration: .3s;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .more-arrow svg {
        width: 17px;
      }
      
      .more-arrow svg path {
        fill: white;
      }

      .more-text {
        position: absolute;
        right: 0%;
        width: 0%;
        opacity: 0;
        color: white;
        font-size: 1.2em;
        font-weight: 600;
        transition-duration: .3s;
      }

      .Btn-more:hover {
        width: 200px;
        border-radius: 40px;
        transition-duration: .3s;
      }
      
      .Btn-more:hover .more-arrow {
        width: 25%;
        transition-duration: .3s;
      }

      .Btn-more:hover .more-text {
        opacity: 1;
        width: 70%;
        transition-duration: .3s;
        padding-right: 10px;
      }

      .Btn-more:active {
        transform: translate(2px ,2px);
      }

      .artcl-autor {
        display: flex;
        align-items: center;
      }

      .artcl-autor p {
        font-size:  18px;
        margin: 0;
      }

      .artcl-autor i {
        font-size: 34px;
        margin-right: 11px;
      }

      .block-artckl {
        width: 65%;
        display: flex;
        flex-direction: column;
        gap: 26px;
      }

      .side-section {
        display: flex;
        width: 35%;
        flex-direction: column;
        gap: 36px;
        position: sticky;
        top: 0;
        height: fit-content;
      }

      .blog-tag {
        padding: 30px 25px;
        padding-top: 45px;
        position: relative;
        display: flex;
        background-color: #c4b6b6;
        border-radius: 15px;
        box-shadow: 0 3px 12px -1px rgba(7,10,25,.1),0 22px 27px -30px rgba(7,10,25,.1);
        box-sizing: border-box;
      }

      .title-tag {
        border: .5px solid #333;
        font-weight: 36px;
        font-size: 29px;
        margin-bottom: 36px;
        letter-spacing: 1px;
        color: #333;
        background: #fff;
        padding: 6px 23px;
        border-radius: 100px;
        position: absolute;
        left: 50%;
        top: -20px;
        z-index: 5;
        transform: translateX(-50%);
        white-space: nowrap;
      }

      .blog-tag-block {
        display: flex;
        flex-direction: row;
        gap: 11px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .b-t-item {
        background-color: #fff;
        padding: 6px 17px;
        border: 1px solid #000;
        border-radius: 30px;
        transition: all .3s cubic-bezier(.5,2.5,.7,.7);
        font-size: 16px;
        word-break: break-word;
      }

      .b-t-item i {
        color: #ccf70b;
      }

      .b-t-item p {
        margin: 0;
      }

      .about-blog {
        padding: 26px 23px;
        padding-top: 36px;
        position: relative;
        background-image: url(view/renders_header_66d9492b5b3398.03892313.jpg);
        background-position: center;
        background-size: cover;
        border-radius: 15px;
        box-shadow: 0 3px 12px -1px rgba(7,10,25,.1),0 22px 27px -30px rgba(7,10,25,.1);
        box-sizing: border-box; 
      }


      .about-blog-overlay {
        padding:  23px 26px;
        border-radius: 3px;
        background: rgba(0,0,0,0.5); color: #fff;
      }


      .about-blog-title {
        border: .5px solid #333;
        font-weight: 700;
        font-size: 22px;
        margin-bottom: 36px;
        letter-spacing:  1px;
        color: #333;
        background: #fff;
        padding: 6px 23px;
        border-radius: 85px;
        position: absolute;
        left: 50%;
        top: -20px;
        z-index: 5;
        transform: translateX(-50%);
        white-space: nowrap;
      }

      .about-blog-overlay p {
        font-size: 20px;
      }

      .tag-wrapper {
        display: none;
      }

      .about-wrapper {
        display: none;
      }

      .four-row {
        display: flex;
        flex-direction: column;
        gap: 26px;
      }

      .two-center {
        display: flex;
        flex-direction: column;
        gap: 26px;
      }

      .media-qa {
        display: flex;
        flex-direction: column;
        gap: 26px;
        padding-top: 36px;
        padding-bottom: 36px;
      }

      .media-gallery {
            width: 50%;
            display: flex;
            flex-direction: column-reverse;
            gap: 23px;
        }

        .m-img {
            display: flex;
            flex-direction: row;
            gap: 23px;
            height: 100%;
        }

        .img-first {
            width: 50%;
        }

        .img-second {
            display: none;
        }

        .img-first img, .img-second img {
            display: block;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .m-video video {
            display: block;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .qa-blog {
            width: 50%;
        }

        .qa-blog-title {
            margin-bottom: 26px;
            font-size: 34px;
            color: black;
            text-transform: uppercase;
            text-align: center;
            font-weight:  700;
        }

        .accordion-item {
            margin-bottom: 23px;
            border: none;
            background: #f3f3f3;
            border-radius: 20px!important;
        }

        .accordion-header {
            position: relative;
            display: block;
            width: 100%;
            background: 0 0;
            cursor: pointer;
            border: none;
            padding: 17px;
            color: #575757;
        }

        .accordion-button, .accordion-item:first-of-type .accordion-button, .accordion-button:not(.collapsed) {
            border: none;
            color: black;
            background-color: initial;
            font-size: 20px;
        }

        .accordion-button:focus {
            box-shadow: none;
        }

        .accordion-button {
            font-size: 20px;
            font-weight: 700;
        }

        .accordion-body {
            padding: 0 23px 23px;
            color: #575757;
            font-weight: lighter;
        }

        .big-footer-bg {
            padding-top: 36px;
            padding-bottom: 36px;
            background-color: #c4b6b6;
        }

        .big-footer {
            display: flex;
            flex-direction: column;
            gap: 26px;
        }

        .phone-btn {
            position: relative;
        }

        .phone-btn img {
            width: 30%;
            max-height: 300px;
            margin-left: 5%;
        }

        .phone-btn-wrap {
            position: absolute;
            top: 30%;
            right: 0;
            padding: 23px 26px;
            border-radius: 3px;
            background: rgba(0,0,0,0.5); color: #fff;
        }

        .phone-btn-title {
            font-size: 34px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 26px;
        }

        .p-btn {
            width: fit-content;
            margin: auto;
        }

        .p-btn a {
            display: block;
        }

        .just-footer {
            display: flex;
            flex-direction: row;
            gap: 17px;
        }

        .just-footer-col {
            width: 33%;
            display: flex;
            flex-direction: column;
            gap: 17px;
            justify-content: center;
        }

        .j-f-logo a {
            display: flex;
            align-items: center;
            gap: 11px;    
        }
    
        .j-f-logo-img {
            width: 40px;
            height: auto;
        }
    
        .j-f-logo-txt {
            color: #000;
            font-size: 34px;
            margin: 0;
        }

        .j-f-contact {
            margin-top: 23px;
            display: flex;
            flex-direction: column;
            gap:  11px;
        }
 
        .j-f-contact-item {
            display: flex;
            flex-direction: row;
            gap:  11px;
            align-items: center;
        }
    
        .j-f-contact-item p {
            color: #000;
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 0;
            word-break: break-word;
        } 
    
        .j-f-contact-item i {
            color: #000;
            font-size: 29px;
        }

        .most-comm-art {
            display: flex;
            flex-direction: row;
            gap: 17px;
        }

        .most-comm-art-img  {
            width: 30%;
            height: fit-content;
            border-radius: 6px;
            overflow: hidden;
        } 

        .most-comm-art-img img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .most-comm-art-txt {
            width: 60%;
        }

        .most-comm-art-title {
            color: #000;
            margin: 0;
            text-decoration: none;
            word-break: break-word;
            font-size: 18px;
            font-weight: 700;
            transition: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
    
        .most-comm-art-title:hover {
            text-decoration: underline;
            color: #ACA22E;
        }

        .sp-link {
            color: #000;
            margin: 0;
            text-decoration: none;
            font-size: 20px;
            text-align: center;
        }

        .sp-link:hover {
            color: #ACA22E;
        }

        .form-sub-block {
            position: relative;
        }

        .form-sub-block img {
            position: absolute;
            right: 15%;
            bottom: 0;
        }

        .form-sub {
            width: 70%;
            margin: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-top: 3em;
            padding-left: 2.8em;
            padding-right: 2.8em;
            padding-bottom: 2.1em;
            border: 2px dashed #DAA06D;
            border-radius: 3px;
            background-color: #EADDCA;
            box-shadow: 0 0 0 4px #EADDCA, 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
            transition: .4s ease-in-out;
          }
          
          ::placeholder {
            color: #000;
            text-align: center;
          }
          
        .form-sub .heading {
            padding-left: 0.8em;
            color: #000;
            background-color: transparent;
            letter-spacing: 1px;
            text-align: center;
            padding-top: 17px;
            padding-bottom: 17px;
        }
        .form-sub label{
            text-align: center;
        }
        .input-z58372155, .textarea-z58372155{
            margin: auto;
            outline: none;
            padding: 0.5em;
            border: 1px solid #DAA06D;
            color: #DAA06D;
            width: 70%;
            height: 3em;
            border-radius: 11px;
            background-color: #FFF;
            text-align: center;
        }
          
        .form-sub .btn {
            align-self: center;
            margin-top: 11px;
            border-radius: 10px;
            outline: none;
            border: none;
            color: white;
            background-color: #E5AA70;
            font-weight: bold;
            letter-spacing: 0.1em;
            transition: .4s ease-in-out opacity,.1s ease-in-out active;
            padding: 1em;
            box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
        }
          
        .form-sub .btn:hover {
            opacity: 0.8;
        }
          
        .form-sub .btn:active {
            transform: translateX(0.1em) translateY(0.1em);
            box-shadow: none;
        }

        .form-check {
            margin: auto;
            padding-top: 23px;
        }

        .check {
            color: #000;
        }

        .check:hover {
            color: #ACA22E;
        }

   
        .blog-one-page {
            padding-top: 58px;
            padding-bottom: 58px;
            display: flex;
            flex-direction: row;
            gap: 23px;
        }

        .one-page-art {
            width: 75%;
            padding: 23px;
            background-color: #c4b6b6;
            border-radius: 3px;
            box-shadow: 0 3px 12px -1px rgba(7,10,25,.1),0 22px 27px -30px rgba(7,10,25,.1); 
        }

        .opa-img {
            width: 100%;
            border-radius: 3px;
            display: flex;
            margin: auto;
        }

        .opa-title {
            margin-top: 26px;
            text-align: center;
            font-size: 34px;
            letter-spacing: 1px;
            text-transform:  uppercase;
            font-weight: 700;
        }  

        .opa-info {
            font-style: italic;
            text-align: center;
            font-size: 18px;
            color: ##444444;
        }

        .opa-tags {
            display: flex;
            flex-direction: row;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: center;
        }
    
        .opa-tags-item {
            background-color: #fff;
            padding: 6px 17px;
            border: 1px solid #000;
            border-radius: 30px;
            transition: all .3s cubic-bezier(.5,2.5,.7,.7);
            font-size: 16px;
            word-break: break-word;
        }
    
        .opa-tags-item i {
            color: #ccf70b;
        }
    
        .opa-tags-item p {
            margin: 0;
        }

        .opa-price {
            font-size: 20px;
            color: #ED6363;
            font-weight: 700;
            text-align: center;
        }

        .one-page-sidebar {
            display: block;
            width: 35%;
        }

        .autor-block {
            margin-top: 23px;
            position: relative;
            padding: 23px;
            background-color: #c4b6b6;
            border-radius: 3px;
            box-shadow: 0 3px 12px -1px rgba(7,10,25,.1),0 22px 27px -30px rgba(7,10,25,.1);  
        }

        .ab-title {
            border: .5px solid #333;
            font-weight: 700;
            font-size: 29px;
            margin-bottom: 26px;
            letter-spacing: 1px;
            color: #333;
            background: #fff;
            padding: 6px 23px;
            border-radius: 85px;
            position: absolute;
            left: 50%;
            top: -20px;
            z-index: 5;
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .ab-name {
            margin-top:  23px;
            margin-bottom: 17px;
            display: flex;
            flex-direction: row;
            gap: 11px;
            justify-content: center;
            align-items: center;
        }

        .ab-name i {
            font-size: 42px;
            color: #ED6363;
        }

        .ab-name p {
            font-size: 20px;
            font-weight: 700;
            margin: 0;
        }

        .ab-txt {
            font-style: italic;
            text-align: center;
            font-size: 18px;
            color: #444444;
        }

        .ab-social {
            display: flex;
            flex-direction: row;
            gap: 11px;
            justify-content: space-around;
        }

        .ab-social i {
            font-size: 34px;
            color: #ED6363;
        }

        .related-artcl {
            margin-top: 36px;
            position: relative;
            padding: 23px;
            background-color: #c4b6b6;
            border-radius: 3px;
            box-shadow: 0 3px 12px -1px rgba(7,10,25,.1),0 22px 27px -30px rgba(7,10,25,.1); 
        }

        .ra-title {
            border: .5px solid #333;
            font-weight: 700;
            font-size: 34px;
            margin-bottom: 36px;
            letter-spacing: 1px;
            color: #333;
            background: #fff;
            padding: 6px 23px;
            border-radius: 85px;
            position: absolute;
            left: 50%;
            top: -20px;
            z-index: 5;
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .ra-item {
            margin-top: 26px;
            display: flex;
            gap: 17px;
        }

        .ra-item-img {
            display: block;
            width: 40%;
        }

        .ra-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 35px;
        }

        .ra-txt-content {
            width: 60%;
        }

        .ra-txt-content a {
            color: #000;
            font-size: 20px;
        }

        .ra-txt-content p {
            font-size: 18px;
        }

        .testimonial-blog-bg {
            background-image: url(view/renders_header_66d9492b5b3398.03892313.jpg);
            background-size: cover;
            background-position: center;
        }
        
        .testimonial-blog-overlay {
            background: rgba(0,0,0,0.5); color: #fff;
        }
        
        .testimonial-blog {
            padding: 117px 0;
        }
        
        .tes-blog-title {
            margin-bottom: 26px;
            font-size: 34px;
            letter-spacing: 1px;
            text-transform:  uppercase;
            font-weight: 700;
        }

        .tes-blog-block {
            display: flex;
            flex-direction: row;
        }
    
        .tes-blog-item {
            width: 50%;
            display: flex;
            position: relative;
            margin-left: 130px;
        }
    
        .tes-blog-circle {
            height: 100%;
            width: 40%;
            border-radius: 50%;
            border: 1px solid;
            overflow: hidden;
            position: absolute;
            left: -20%;
        }
    
        .tes-blog-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    
        .tes-blog-txt {
            height: 220px;
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            padding-right: 26px;
            border-top: 1px solid;
            border-right: 1px solid;
            border-bottom: 1px solid;
            background-color: #f6f6f6;
        }
    
        .tes-blog-txt p, .tes-blog-txt h4 {
            margin-left: 120px ;
            color: #000;
        }

        .cont-us-bg {
            background-image: url(view/depictions_header_66d9492cc42b91.21840350.jpg);
            background-size: cover;
            background-position: center;
        }

        .cont-us-overlay {
            padding-top: 23px;
            padding-bottom: 23px;
            background: rgba(255,255,255,0.9); color: #222;
        }

        .cont-us-title {
            text-align: center;
            font-size: 34px;
            letter-spacing: 1px;
            text-transform:  uppercase;
            font-weight: 700;
        }

        .cont-us-block {
            padding-top: 85px;
            padding-bottom: 26px;
        }
        
        .cont-us-list {
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 23px;
        }
       
        .cont-us-item {
            margin-bottom:  26px;
            width: 30%;
            border-radius: 3px;
            background: rgba(255,255,255,0.9); color: #222;
            display: flex;
            gap: 23px;
            padding: 11px 26px;
            align-items: center;
        } 

        .cont-us-item i {
            font-size: 34px;
        }

        .cont-us-item p {
            margin: 0;
            font-size: 20px;
            word-break: break-word;
        }

        .b-stat {
            border-radius: 15px;
            display: flex;
            width: 50%;
            padding: 36px;
            gap: 26px;
            flex-direction: column;
            justify-content: center;
            background: rgba(255,255,255,0.9); color: #222;
        }

        .b-stat-title {
            font-size: 34px;
            font-weight: 700;
            text-align: center; 
        }

        .b-stat-wrap {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            gap: 23px;
            align-items: center;
        }

        .b-stat-img {
            background-color: #1D2D50;
            display: inline-block;
            margin-bottom: 17px;
            padding: 2px;
            border-radius: 20px;
        }

        .b-stat-pic {
            min-width: 90px;
            text-align: center;
            background-color: #1D2D50;
            border-radius: 20px;
            padding: 23px;
        }

        .b-stat-pic i {
            font-size: 31px;
            background: #fff;
            -webkit-background-clip: text!important;
            -webkit-text-fill-color: transparent;
        }

        .b-stat-txt {
            display: flex;
            gap: 23px;
        }

        .b-stat-txt p {
            font-size: 21px;
            font-weight: 700;
            letter-spacing: 1px;
            text-align: center;
            margin: 0;
            margin-bottom: 11px;
        }

        @media (max-width: 992px){
            .artcl {
                flex-direction: row !important;
                width: 100% !important;;
            }
        .two-center {
        flex-direction: column !important;
        }
        }
        @media (max-width: 576px) {
                    .artcl {
                        flex-direction: column !important;
                    }
                    .cont-us-item p{
                        font-size: 16px;
                    }
        }
        @media (max-width: 1400px) {
            .tes-blog-txt p, .tes-blog-txt h4 {
                font-size: 16px;
            }
        
            .tes-blog-txt {
                height: 200px;
            }
        
            .tes-blog-txt p, .tes-blog-txt h4 {
                margin-left: 130px;
            }
        
            .tes-blog-circle {
                width: 47%;
            }
        }
        
        @media (max-width: 1200px){
            .hello-category {
                flex-direction: column-reverse;
            }
        
            .wrapper-category {
                width: 100% !important;
            }
        
            .hd-hello {
                width: 100%;
            }
        
            .artcl-stat-info p {
                font-size: 12px;
            }
        
            .tes-blog-block {
                flex-direction: column;
                gap: 25px;
                align-items: center;
            }
        
            .tes-blog-item {
                position: static;
                width: 95%;
                margin: 0;
            }
        
            .tes-blog-circle {
                position: static;
                width: 100%;
                height: auto;
                border-radius: 0;
            }
        
            .tes-blog-txt {
                height: auto;
                padding: 20px;
            }
        
            .tes-blog-txt p {
                margin: 0;
            }
        
            .tes-blog-txt h4 {
                margin: 0;
                margin-top: 15px;
            }
        
            .blog-one-page {
                flex-direction: column; 
            }
        
            .one-page-art {
                width: 100%;
            }
        
            .one-page-sidebar {
                width: 100%;
            }
        
            .ra-img {
                height: 250px;
                object-fit: contain; 
            }
        
            
        
        }
        
        
        
        @media (max-width: 992px){
            .dropdown-content a {
                width: 200px !important;
            }
            .just-footer {
                flex-direction: column;
            }
        
            .just-footer-col {
                flex-direction: row;
                width: 100%;
            }
        
            .most-comm-art {
                flex-direction: column;
                width: 33%;
            }
        
            .most-comm-art-img {
                width: 40%;
                margin: auto;
            }
        
            .most-comm-art-txt {
                width: 100%;
            }
        
            .most-comm-art-title {
                font-size: 12px;
            }
        
            .phone-btn-title {
                font-size: 18px;
            }
        
            .media-qa {
                flex-direction: column !important;
            }
        
            .sp-link {
                font-size: 16px;
            }
        
            .hd-cont {
                display: none !important;
            }
        
            .hd-navigation {
                flex-direction: column;
                gap: 15px;
            }
        
            .blog-artcl-sidebar {
                flex-direction: column !important;
                gap: 40px;
            }
        
            .block-artckl {
                width: 100% !important;
            }
          
            .side-section {
                width: 100%;
                display: flex !important;
                flex-direction: column;
                gap: 40px;
            }
        
            .hd-hello-title {
                font-size: 16px;
            }
        
            .nav-box-link {
                font-size: 14px;
            }
        
            .dropdown .dropbtn {
                font-size: 14px ;
            }
        
            .tes-blog-txt p, .tes-blog-txt h4 {
                font-size: 12px;
            }
        
            .opa-img {
                float: none !important;
            }
        
            .form-sub-block img {
                right: 10%; 
                width: 150px;
            }
        
            .cont-us-block {
                flex-direction: column !important;
            }
        
            .cont-us-list {
                width: 100% !important;
                flex-direction: column !important;
            }
        
            .b-stat {
                width: 100%;
            }
        
            .form-sub {
                width: 100%;
            }
        
            .cont-us-item {
                width: 100%;
            }
        
            .just-footer-col {
                align-items: center;
            }
        
            .j-f-contact {
                margin-top: 0;
                flex-direction: row;
            }
        
            .f-logo {
                flex-direction: column !important;
            }
        
            .f-artcl {
                flex-direction: column;
            }
        
            .f-artcl-adp {
                display: flex;
                flex-direction: row;
                gap: 15px;
            }
        
            .blog-tag {
                display: none !important;
            }
        
            .about-wrapper {
                display: none !important;
            }
        
            .four-row {
                flex-direction: column !important;
            }
        
            .artcl {
                flex-direction: row;
                width: 100%;
            }
        
            .media-gallery {
                width: 100%;
            }
        
            .qa-blog {
                width: 100%;
            }
        
        
        }
        
        
        @media(max-width: 768px){
           
            .artcl-stat-info i {
                margin-right: 5px;
            }
        
            .category-img {
                padding: 0;
            }
        
            .artcl-txt-title {
                font-size: 16px;
            }
        
            .artcl-txt-content {
                font-size: 14px;
            }
        
            .artcl-autor p {
                font-size: 13px;
            }
        
            .phone-btn-wrap {
                top: 5%;
            }
        
            .opa-img {
                width: 100%;
            }
        
            .form-sub-block img {
                right: 0;
            }
        
            .nav-box {
                flex-wrap: wrap;
            }
        
            .hd-logo-contact {
                justify-content: center;
            }
        
        }
        
        
        @media(max-width: 576px){
            
            .nav-box {
                flex-wrap: wrap;
            }
        
            .artcl {
                flex-direction: column;
            }
        
            .artcl-img-part {
                width: 100%;
            }
        
            .artcl-txt-part {
                width: 100%;
            }
        
            .m-img {
                flex-direction: column;
            }
        
            .img-first {
                width: 100%;
            }
        
            .img-second {
                width: 100% !important;
            }
        
            .phone-btn-title {
                font-size: 12px;
            }
        
            .phone-btn-wrap {
                top: 0%;
            } 
        
            .phone-btn {
                margin-bottom: 120px;
            }
        
            .just-footer-col {
                flex-direction: column;
            }
        
        
            .most-comm-art {
                flex-direction: row;
                width: 100%;
            }
        
        
            .tes-blog-title {
                font-size: 25px; 
                margin-left: 15px;
            }
        
            .ra-title {
                font-size: 25px;
            }
        
            .ra-item {
                flex-direction: column;
            }
        
            .ra-item-img {
                width: 100%;
            }
        
            .ra-txt-content {
                width: 100%;
            }
        
            .tes-blog-txt p, .tes-blog-txt h4 {
                font-size: 10px;
            }
        
            .b-stat-wrap {
                flex-direction: column;
            }
        
            .b-stat-title {
                font-size: 18px;
            }
        
            .b-stat-txt p {
                font-size: 18px;
            }
        
            .form-sub {
                padding-top: 1em;
                padding-left: 0.8em;
                padding-right: 0.8em;
                padding-bottom: 1.1em;
            }
        
            .form-sub .input {
                width: 95%;
            }
        
            .form-sub-block img {
                width: 100px;
                bottom: 10%;
            }
        
            .j-f-contact {
                flex-direction: column;
            }
        
            .f-artcl-adp {
                flex-direction: column;
            }
        
            .big-footer {
                padding-left: 20px;
                padding-right: 20px;
            }
        
        
            .opa-title {
                font-size: 20px;
            }
            .about-blog-overlay p {
                font-size: 16px;
            }
        
            .dropdown-content {
                min-width: 140px;
                left: -70px;
            }
        
            .dropdown-content a {
                width: auto;
                font-size: 12px;
            }
        
        }