@media screen and (max-width: 768px) {
    .links-menu {
        width: 100%;
    }

    .mainnavbar {
        padding: 0;
        margin: 0;
    }

    .nav-menu {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-item {
        margin-left: .3rem;
        list-style: none;
    }

    #logo-container {
        display: flex;
        padding: 0;
        margin: 0;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    
    .main-logo {
        font-family: 'Kanit', sans-serif;
        color: #0f6ab5;
        font-size: 2rem;
        letter-spacing: 3.5px;
        padding: 0;
        margin: 0;
        line-height: 10px;
    }

    .main-logo1 {
        font-family: 'Kanit', sans-serif;
        color: #052A60;
        font-size: .75rem;
    }
    
    .main-logo2 {
        font-family: 'Kanit', sans-serif;
        color: #98999a;
        font-size: .75rem;
    }

    .page-links-text {
        font-family: sans-serif;
        font-size: .6rem;
        text-decoration: none;
        color: #4b4a4a;
        font-weight: bold;
    }
    
    .page-links-text:hover {
        font-family: sans-serif;
        font-size: .75rem;
        text-decoration: none;
        color: #f50909;
        font-weight: bold;
    }
    
    .active {
        font-family: sans-serif;
        font-size: .75rem;
        text-decoration: none;
        color: #04529c;
        font-weight: bold;
        text-decoration: rgb(252, 82, 3) underline;
        text-underline-offset: 10px;
        text-decoration-thickness: 2px;
    }

    .dropbtn {
        background-color: white;
        border: none;
        font-family: sans-serif;
        font-size: .6rem;
        text-decoration: none;
        color: #4b4a4a;
        font-weight: bold;
    }
    
    .dropbtn:hover {
        background-color: white;
        border: none;
        font-family: sans-serif;
        font-size: .75rem;
        text-decoration: none;
        color: #f50909;
        font-weight: bold;
    }

    .best {
        width: 100%;
        order: 2;
    }
    
    .best-img {
        width: 100%;
        margin-top: 25px;
    }

    .logo-responsive {
        width: 70%;
        height: auto;
    }

    .responsive {
        width: 100%;
        height: auto;
    }

    #hp-intro-box {
        display: flex;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
    }
    
    #hp-intro-box h1 {
        font-family: 'Roboto', sans-serif;
        font-size: 2.5rem;
        color: #494949;
    }
    
    #hp-intro-box span {
        font-family: 'Roboto', sans-serif;
        font-size: 1.5rem;
        color: #494949;
    }
    
    #hp-intro-box p {
        font-family: 'Roboto', sans-serif;
        font-size: 1.2rem;
        color: #6d6c6c;
        text-align: justify;
        margin-right: 25px;
        line-height: 32px;
    }
    
    .what-we-do {
        font-family: 'Oswald', sans-serif;
        font-size: 2rem;
        color: #CC068A;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    #w-w-d {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 30px;
    }
    
    #w-w-d p {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #3a3a3a;
        text-align: left;
        line-height: 24px;
        padding: 0;
        margin: 0;
    }

    #hp-intro-box h1 {
        font-family: 'Roboto', sans-serif;
        font-size: 1.5rem;
        color: #494949;
    }
    
    #hp-intro-box span {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #494949;
    }
    
    #hp-intro-box p {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #6d6c6c;
        text-align: justify;
        line-height: 25px;
        padding: 0;
        margin-right: 0px;
    }

    .what-we-do {
        font-family: 'Oswald', sans-serif;
        font-size: 1.5rem;
        color: #CC068A;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #w-w-d {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .hp-col1 {
        width: 100%;
        text-align: left;
    }

    .block1 {
        font-family: 'Roboto', sans-serif;
        font-size: .90rem;
        color: #141414;
        text-align: center;
        width: 32%;
    }
    
    .block1-txt {
        font-family: 'Roboto', sans-serif;
        font-size: .90rem;
        color: #141414;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    .sitemap-links-img {
        padding: 0;
        
    }

    .sitemap-links-addrs {
        font-family: 'Kanit', sans-serif;
        color: #374b63;
        font-size: .75rem;
        text-decoration: none;
        padding: 0;
    }

    .about-hdr1 {
        font-family: 'Roboto', sans-serif;
        font-size: 1.2rem;
        color: #2e8ffd;
        text-align: center;
    }

    .about-hdr2 {
        font-family: 'Roboto', sans-serif;
        font-size: 1.5rem;
        color: #5e05c3;
        text-align: center;
        font-weight: bold;
    }

    .about-btext {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #444444;
        line-height: 24px;
        text-align: justify;
        padding: 0;
        margin-top: 15px;
    }

    #hp-about-box1 {
        display: block;
        padding: 0;
        margin: 0;
    }

    .what-we-do {
        font-family: 'Oswald', sans-serif;
        font-size: 1.5rem;
        color: #CC068A;
        text-align: center;
    }

    #a-v-m {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 0;
    }

    .about-col1 {
        width: 100%;
        text-align: left;
        padding: 0;
    }

    .meet-the-team {
        font-family: 'Oswald', sans-serif;
        font-size: 1.5rem;
        color: #0450a7;
        text-align: center;
    }

    #about-photo {
        display: flex;
        justify-content: space-between;
        padding: 0;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .about-col5 {
        width: 100%;
        text-align: left;
        margin-bottom: 25px;
    }

    #services-intro-box1 {
        display: flex;
        padding: 0;
        margin: 0;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .services-partition-1 {
        width: 100%;
        order: 2;
        padding: 0;
        margin: 0;
    }
    
    .services-partition-1-img {
        width: 100%;
    }

    .services-body-txt {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #6d6c6c;
        text-align: justify;
        line-height: 22px;
        margin-top: 20px;
        margin-right: 0px;
    }

    .services-box-hdrs {
        font-family: 'Roboto', sans-serif;
        font-size: 1.2rem;
        color: #331a30;
        font-weight: bold;
        margin-top: 10px;
        padding: 0;
    }

    #services-intro-box2 {
        display: flex;
        padding: 0;
        margin: 0;
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    #services-intro-box2 li {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #331a30;
        margin: 0;
        padding: 0;
        margin-bottom: 10px;
    }

    #contact-box {
        display: flex;
        margin: 0;
        padding: 0;
        background-color: #fff;
        text-align: center;
        flex-direction: column;
        flex-wrap: wrap;
        
    }

    .contactbox1 {
        padding: 0;
        border-bottom: #9e9e9e dotted;
        color: #474546;
        width: 100%;
        margin-bottom: 25px;
    border-right: none;
    }

    .contactbox2 {
        padding: 0px;
        width: 100%;
        border-bottom: #9e9e9e dotted;
    }

    #enqiryformbox {
        display: relative;
        background-color: #ffffff;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    .enqform {
        display: flex;
        padding: 0;
        margin: 0;
        flex-direction: column;
        flex-wrap: wrap;
        
    }

    .inputbox {
        width: 98%;
        border-radius: 10px;
        border: #a9a9aa 1px solid;
        font-family: sans-serif;
        font-size: 1.2rem;
        color: #202020;
        padding: 20px;
    }

    .enqtextarea {
        width: 90%;
        height: 100px;
        border-radius: 10px;
        border: #a9a9aa 1px solid;
        font-family: sans-serif;
        font-size: 1.2rem;
        color: #202020;
        padding: 20px;
    
    }

    .name {
        display: inline-block;
        width: 90%;
        margin-right: 100px;
        margin-bottom: 20px;
    }
    
    .name1 {
        display: inline-block;
        width: 90%;
        margin-bottom: 20px;
    }
    
    .name .cf-medium {
        width: 130%;
    }

    .enqbutton {
        background-color: #95e6fb;
        padding: 15px;
        border-radius: 10px;
        border: #023340 1px solid;
        width: 90%;
        font-size: 2rem;
        font-family: sans-serif;
        color: #101010;
        cursor: pointer;
        margin-bottom: 30px;
    }

    .services-link-hdrs {
        font-family: 'Oswald', sans-serif;
        font-size: 1.75rem;
        color: #271f53;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .hp-wwd-line-meettheteam {
        background-color: #fca504;
        height: 2px;
        width: 100%;
    }

    .copyrights {
        font-family: 'Roboto', sans-serif;
        font-size: .6rem;
        text-align: center;
        background-color: #0580c7;
        color: white;
    }

}