@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100vw;
}

.header {
    background: black;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.header i {
    display: none;
}

.menu-desktop {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    position: absolute;
    left: 60px;
}

.menu-desktop a {
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: black;
}

.menu-desktop a:hover {
    text-decoration: underline;
    /* font-weight: 700; */
}

.header-socials {
    display: flex;
    flex-direction: row;
    gap: 32px;
    position: absolute;
    right: 60px;
}

.header-socials a {
    text-decoration: none;
}

.header-socials i {
    display: block;
    font-size: 22px;
    color: black;
}

.header-socials a i:hover {
    color: #0D1C2D;
}

.header img {
    height: 80%;
}

.welcome {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    background: black;
    gap: 20px;
    width: 100%;
}

.welcome-contents {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 30%;
}

.welcome-contents h2 {
    color: white;
    font-size: 28.18px;
    font-weight: 400;
}

.welcome-contents h1 {
    color: white;
    font-size: 48.55px;
    font-weight: 800;
}

.welcome-contents h3 {
    color: white;
    font-size: 28.18px;
    font-weight: 400;
    line-height: 31.69px;
}

.welcome-contents p {
    color: white;
    font-size: 13.64px;
    font-weight: 400;
    line-height: 17.45px;
    text-align: justify;
    margin-bottom: 10px;
}

.welcome-contents a {
    color: black;
    background: white;
    font-size: 13.64px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 8px;
}

.welcome-contents a:hover {
    background: black;
    border: 2px solid white;
    color: white;
}

.welcome-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    width: 30%;
}

.welcome-image img {
    width: 90%;
}

.about-us {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 100px 0;
    background: white;
    gap: 40px;
}

.about-us-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
}

.about-us-image img {
    width: 100%;
    padding: 100px 40px;
}

.about-us-contents {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 30%;
}

.about-us-contents h2 {
    color: black;
    font-family: Inter;
    font-size: 36px;
    font-weight: 400;
}

.our-story {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.our-story h1 {
    font-family: Inter;
    font-size: 64px;
    font-weight: 800;
}

.about-us-contents p {
    color: black;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
}

.about-us a {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    background: #265A81;
    border-radius: 10px;
    padding: 10px 30px;
}

.about-us a:hover {
    background: #204B6D;
    border: 2px solid #A1B8CA;
}

.services {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    width: 100%;
    background-image: linear-gradient(white,black);
    gap: 100px;
}

.services-contents {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.services-title {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
}

.services-contents h1 {
    color: #0D1D2D;
    font-size: 64px;
    font-weight: 800;
    line-height: 76.8px;
    text-align: center;
}

.services-contents h2 {
    color: #265A81;
    font-size: 64px;
    font-weight: 800;
    line-height: 76.8px;
    text-align: center;
}

.services-contents p {
    color: #0D1C2D;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.services-cards {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.card {
    background: #F2F6F9;
    border: 3px solid #C5DCED;
    border-radius: 20px;
    width: 10%;
    padding: 0 51px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    height: 423px;
}

.card img {
    height: 30%;
}

.card h4 {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: #265A81;
}

.card h5 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #0D1C2D;
}

.why-telehux {
    display: flex;
    flex-direction: column;
    padding: 100px 0;
    width: 100%;
    background: url('../img/telehux-pattern.png'),
    linear-gradient(180deg, #C5DCED80 0%, #F2F6F9 37.5%);
    background-size: inherit;
    background-position: top;
    gap: 40px;
}

.why-telehux-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-telehux-desktop img {
    width: 80%;
}

.why-telehux-title {
    display: none;
}

.why-telehux-title h1 {
    display: none;
}

.why-telehux-title h2 {
    display: none;
}

.why-telehux-title img {
    display: none;
}

.telehux-cards-container {
   display: none;
}

.why-telehux-cards {
    display: none;
}

.vision {
    background: white;
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 100px 0;
    gap: 112px;
    align-items: center;
    justify-content: center;
}

.vision-1 {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 40%;
}

.vision-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 90%;
}

.vision-title h1 {
    font-size: 64px;
    font-weight: 800;
    text-align: left;
    color: #265A81;
}

.vision-title h2 {
    font-size: 64px;
    font-weight: 800;
    text-align: left;
    color: #0D1D2D;
}

.vision-1 p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    color: #0D1C2D;
}

.vision-1 p a {
    color: #CC6601;
    font-weight: 600;
    text-decoration: none;
}

.vision-2 {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.form {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 40px;
    border-radius: 20px;
    width: 100%;
}

.form-title {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.form-title h1 {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    color: #FF9730;
}

.form-title h2 {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    color: #CC6601;
}

.form form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form form input,
.form form textarea {
    border: 3px solid #8AB8D8;
    outline: none;
    padding: 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: #265A81;
}

.form form input::placeholder,
.form form textarea::placeholder {
    color: #8AB8D8;
}

.submit-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.form form input[type="submit"] {
    background: linear-gradient(90deg, #153048 0%, #285E88 100%);
    border-radius: 10px;
    border: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.form form input[type="submit"]:hover {
    background: linear-gradient(270deg, #153048 0%, #285E88 100%);
    border: 3px solid #153048;
    /* border-image-source: linear-gradient(90deg, #153048 0%, #285E88 100%); */
}

.form form input[type="submit"]:disabled,
.form form input[type="submit"]:disabled:hover {
    background: #ccc; /* Change background color */
    border: none;
    color: #666; /* Change text color */
    cursor: not-allowed; /* Change cursor to indicate it's not clickable */
}

.footer {
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: center;
    gap: 50px;
    width: 100%;
    padding: 80px 0;
    background: #F2F6F9;
}

.footer-1 {
    display: flex;
    flex-direction: column;
    gap: 78px;
    width: 40%;
}

.footer-1-address {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-1-address img {
    width: 20%;
}

.footer-1-address h1 {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 18.75px;
    text-align: left;
    color: #0D1D2D;
    width: 60%;
}

.footer-1 p {
    font-size: 12px;
    font-weight: 300;
    text-align: left;
    color: #0D1D2D;

}

.footer-2 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 20%;
}

.footer-2-title h1 {
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    color: #0D1D2D;
}

.footer-2-contents {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-2-contents a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #0D1D2D;
}

.footer-2-contents a:hover {
    text-decoration: underline;
    font-weight: 700;
}

.policy-desktop {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.policy-desktop a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #0D1C2D;
}

.policy-desktop a:hover {
    text-decoration: underline;
    font-weight: 700;
}

.footer-3 {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-3 div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.footer-3 div i {
    font-size: 22px;
    color: #265A81;
}

.footer-3 div h1 {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: #0D1D2D;
}

.footer-3 .footer-socials {
    display: flex;
    flex-direction: row;
    gap: 34px;
}

.footer-3 .footer-socials a {
    text-decoration: none;
}

.footer-3 .footer-socials i {
    font-size: 28px;
    color: #88B7D7;
}

.footer-3 .footer-socials i:hover {
    color: #0D1C2D;
}

.policy-mobile {
    display: none;
}

.policy-mobile a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #0D1C2D;
}

.about-us-page-container {
    display: flex;
    flex-direction: column;
    padding: 100px 0;
    width: 100%;
    background: url('../img/telehux-pattern.png'),
    #F0F6FA;
    background-size: inherit;
    background-position: top;
    gap: 77px;
    align-items: center;
    justify-content: center;
}

.about-us-page-1 {
    display: flex;
    flex-direction: row;
    width: 80%;
    gap: 57px;
    align-items: center;
}

.about-us-page-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 50%;
}

.about-us-page-content div {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.about-us-page-content div h1 {
    font-size: 64px;
    font-weight: 800;
    text-align: left;
}

.about-us-page-content h3 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
}

.founders-photo {
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: center;
    justify-content: center;
}

.founders-photo img {
    /* height: 100%; */
    width: 100%;
}

.about-us-page-2 {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 80%;
}

.about-us-page-2-title {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.about-us-page-2-title h1 {
    font-size: 64px;
    font-weight: 800;
    text-align: left;
}

.about-us-page-2 h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    text-align: justify;
    color: #265A81;
}

.about-us-page-2 h3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    color: #0D1C2D;
}

.faqs-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    background: linear-gradient(180deg, #E9F2F8 17.5%, rgba(201, 222, 237, 0.2) 100%);
    gap: 48px;
}

.faqs-container-title {
    display: flex;
    flex-direction: row;
}

.faqs-container-title h1 {
    font-size: 64px;
    font-weight: 800;
    line-height: 76.8px;
    text-align: center;
}

.faqs-general-questions {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 80%;
    margin: 0 auto;
}

.faqs-general-questions h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 43.57px;
    text-align: left;
    color: #265A81;
}

.faqs-1,
.faqs-2,
.faqs-3,
.faqs-4,
.faqs-5,
.faqs-6,
.faqs-7,
.faqs-8,
.faqs-9,
.faqs-10,
.faqs-11,
.faqs-12,
.faqs-13,
.faqs-14 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 28px 24px;
}

.faqs-question {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    
}

.question {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.question h5 {
    background: #90BCD9;
    border-radius: 50%; 
    width: 30px; 
    height: 30px; 
    font-size: 15.29px;
    font-weight: 700;
    text-align: center;
    color: #FFFFFF;
    line-height: 30px;
}

.question h6 {
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    text-align: justify;
    color: #0D1D2D;
}

.faqs-question button {
    border: none;
    background: #FFFFFF;
    font-size: 18px;
    cursor: pointer;
}

.faqs_answer_1,
.faqs_answer_2,
.faqs_answer_3,
.faqs_answer_4,
.faqs_answer_5,
.faqs_answer_6,
.faqs_answer_7,
.faqs_answer_8,
.faqs_answer_9,
.faqs_answer_10,
.faqs_answer_11,
.faqs_answer_12,
.faqs_answer_13,
.faqs_answer_14 {
    display: none;
    transition: height 0.3s ease;
}

.faqs_answer_1 p,
.faqs_answer_2 p,
.faqs_answer_3 p,
.faqs_answer_4 p,
.faqs_answer_5 p,
.faqs_answer_6 p,
.faqs_answer_7 p,
.faqs_answer_8 p,
.faqs_answer_9 p,
.faqs_answer_10 p,
.faqs_answer_11 p,
.faqs_answer_12 p,
.faqs_answer_13 p,
.faqs_answer_14 p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #265A81;    
}

.faqs_answer_1.expanded,
.faqs_answer_2.expanded,
.faqs_answer_3.expanded,
.faqs_answer_4.expanded,
.faqs_answer_5.expanded,
.faqs_answer_6.expanded,
.faqs_answer_7.expanded,
.faqs_answer_8.expanded,
.faqs_answer_9.expanded,
.faqs_answer_10.expanded,
.faqs_answer_11.expanded,
.faqs_answer_12.expanded,
.faqs_answer_13.expanded,
.faqs_answer_14.expanded {
    display: block;
    transition: height 0.3s ease;
}

.faqs-1.expanded,
.faqs-2.expanded,
.faqs-3.expanded,
.faqs-4.expanded,
.faqs-5.expanded,
.faqs-6.expanded,
.faqs-7.expanded,
.faqs-8.expanded,
.faqs-9.expanded,
.faqs-10.expanded,
.faqs-11.expanded,
.faqs-12.expanded,
.faqs-13.expanded,
.faqs-14.expanded {
    border-left: 4px solid #FE9730;
}

.toggle-button-1 i,
.toggle-button-2 i,
.toggle-button-3 i,
.toggle-button-4 i,
.toggle-button-5 i,
.toggle-button-6 i,
.toggle-button-7 i,
.toggle-button-8 i,
.toggle-button-9 i,
.toggle-button-10 i,
.toggle-button-11 i,
.toggle-button-12 i,
.toggle-button-13 i,
.toggle-button-14 i {
    transition: transform 0.3s ease;
}

.toggle-button-1.expanded i,
.toggle-button-2.expanded i,
.toggle-button-3.expanded i,
.toggle-button-4.expanded i,
.toggle-button-5.expanded i,
.toggle-button-6.expanded i,
.toggle-button-7.expanded i,
.toggle-button-8.expanded i,
.toggle-button-9.expanded i,
.toggle-button-10.expanded i,
.toggle-button-11.expanded i,
.toggle-button-12.expanded i,
.toggle-button-13.expanded i,
.toggle-button-14.expanded i {
    transform: rotate(180deg);
}

.privacy-terms-container {
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 50px 0;
    background: white;
    align-items: center;
}

.privacy-policy,
.terms-of-use {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 60%;
}

.privacy-policy h1,
.terms-of-use h1 {
    font-size: 50px;
    font-weight: 800;
    text-align: center;
    color: black;
    text-transform: uppercase;
}

hr {
    height: 5px;
    background: black;
    border: none;
}

.privacy-policy h2,
.terms-of-use h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 43.57px;
    text-align: left;
    color: black;
}

.privacy-policy p,
.terms-of-use p {
    font-size: 16px;
    font-weight: 400;
    color: black;
}

/* Mobile Navigation */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 80px 0;
    z-index: 1000;
}

.mobile-nav.open {
    transform: translateX(0);
}

.mobile-nav a {
    font-size: 20px;
    font-weight: 600;
    color: black;
    text-decoration: none;
    margin: 3px 0;
    padding: 10px 20px;
    background: #ffffff63;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: maroon;
}

.close-btn:hover {
    color: rgb(162, 8, 8);
}

.thank-you-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: black;
   /* height: 100vh; */
    gap: 20px;
    padding: 50px 0;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: black;
    height: 100vh;
    gap: 20px;
}

.thank-you-page img,
.error-page img {
    width: 20%;
}

.thank-you-page p,
.error-page p {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: white;
    width: 50%;
}

.thank-you-page a,
.error-page a {
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: white;
    border: 2px solid white;
    padding: 10px 20px;
    color: black;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 20px;
    gap: 10px;
}

.thank-you-page a:hover,
.error-page a:hover {
    background: black;
    color: white;
}

.thank-you-page a i,
.error-page a i {
    font-size: 12px;
}



@media only screen and (max-width:1440px) {
    
    .card img {
        height: 20%;
    }
    
    .card h4 {
        font-size: 25px;
    }
    
    .card h5 {
        font-size: 13px;
    }

    .why-telehux-desktop img {
        width: 75%;
    }
}

@media only screen and (max-width:1070px) {
    .services-cards {
        gap: 30px;
    }

    .vision {
        gap: 90px;
    }

    .about-us-page-1 {
        display: flex;
        flex-direction: column;
    }

    .about-us-page-content,
    .founders-photo {
        width: 100%;
    }

    .question h6 {
        font-size: 20px;
        text-align: left;
    }

}

@media only screen and (max-width:1000px) {

    .menu-desktop,
    .header-socials,
    .why-telehux-desktop {
        display: none;
    }

    .header {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100vw;
        padding: 0;
    }
    
    .header i {
        display: block;
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
    }
    
    .header img {
        height: 80%;
    }

    .welcome {
        display: flex;
        flex-direction: column;
        padding: 40px 0 100px;
        gap: 20px;
        width: 100%;
    }

    .welcome-contents {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 80%;
    }

    .welcome-contents h2 {
        font-size: 28.18px;
        font-weight: 400;
    }

    .welcome-contents h1 {
        font-size: 48.55px;
        font-weight: 800;
    }

    .welcome-contents h3 {
        font-size: 28.18px;
        font-weight: 400;
        line-height: 31.69px;
    }

    .welcome-contents p {
        font-size: 13.64px;
        font-weight: 400;
        line-height: 17.45px;
        text-align: justify;
        margin-bottom: 10px;
    }

    .welcome-contents a {
        font-size: 13.64px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        padding: 10px 30px;
        border-radius: 8px;
    }

    .welcome-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        width: 60%;
    }

    .welcome-image img {
        width: 100%;
    }

    .about-us {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 0 100px;
    }

    .about-us-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
    }

    .about-us-image img {
        width: 100%;
        padding: 100px 40px;
    }

    .about-us-contents {
        display: flex;
        flex-direction: column;
        gap: 50px;
        width: 80%;
    }

    .about-us-contents h2 {
        font-family: Inter;
        font-size: 38px;
        font-weight: 400;
    }

    .our-story {
        display: flex;
        flex-direction: row;
        gap: 15px;
    }

    .our-story h1 {
        font-family: Inter;
        font-size: 66px;
        font-weight: 800;
    }

    .about-us-contents p {
        font-family: Inter;
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        text-align: justify;
    }

    .about-us a {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        color: #FFFFFF;
        background: #265A81;
        border-radius: 10px;
        padding: 10px 30px;
    }

    .about-us a:hover {
        background: #204B6D;
        border: 2px solid #A1B8CA;
    }

    .services {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100px 0;
        width: 100%;
        gap: 100px;
    }

    .services-contents {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .services-contents h1 {
        font-size: 64px;
        font-weight: 800;
        line-height: 76.8px;
        text-align: center;
    }

    .services-contents h2 {
        font-size: 64px;
        font-weight: 800;
        line-height: 76.8px;
        text-align: center;
    }

    .services-contents p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }

    .services-cards {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 48px;
    }

    .card {
        background: #F2F6F9;
        border: 3px solid #C5DCED;
        border-radius: 20px;
        width: 30%;
        padding: 0 51px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        height: 423px;
    }

    .card img {
        height: 30%;
    }

    .card h4 {
        font-size: 28px;
        font-weight: 600;
        text-align: center;
        color: #265A81;
    }

    .card h5 {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        color: #0D1C2D;
    }

    .why-telehux {
        display: flex;
        flex-direction: column;
        padding: 100px 0;
        width: 100%;
        background: url('../img/telehux-pattern.png'),
        linear-gradient(180deg, #C5DCED80 0%, #F2F6F9 37.5%);
        background-size: inherit;
        background-position: top;
        gap: 40px;
    }

    .why-telehux-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .why-telehux-title h1 {
        color: #26577F;
        font-size: 37.73px;
        font-weight: 800;
        text-align: center;
        display: block;
    }

    .why-telehux-title h2 {
        color: #0D1D2D;
        font-size: 37.73px;
        font-weight: 800;
        text-align: center;
        display: block;
    }

    .why-telehux-title img {
        width: 20%;
        display: block;
    }

    .telehux-cards-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .why-telehux-cards {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .why-telehux-cards h5 {
        position: absolute;
        background: #FF9730;
        border-radius: 50%; 
        width: 50px; 
        height: 50px; 
        font-size: 19.91px;
        font-weight: 700;
        text-align: center;
        color: #FFFFFF;
        top: -20px;
        left: 30px;
        line-height: 50px; 
    }

    .telehux-cards {
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        padding: 18.1px;
        border-radius: 9.05px;
        width: 85%;
        margin-left: 60px;
    }

    .telehux-cards p {
        font-size: 16.48px;
        font-weight: 400;
        line-height: 21.72px;
        text-align: left;
    }

    .vision {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 100px 0;
        gap: 112px;
    }

    .vision-1 {
        display: flex;
        flex-direction: column;
        gap: 48px;
        width: 80%;
    }

    .vision-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        width: 100%;
    }

    .vision-title h1 {
        font-size: 66px;
        font-weight: 800;
        text-align: left;
    }

    .vision-title h2 {
        font-size: 66px;
        font-weight: 800;
        text-align: left;
    }

    .vision-1 p {
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        text-align: justify;
    }

    .vision-1 p a {
        font-weight: 600;
        text-decoration: none;
    }

    .vision-2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .form {
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        padding: 40px;
        gap: 40px;
        border-radius: 20px;
        width: 60%;
    }

    .form-title {
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }

    .form-title h1 {
        font-size: 38px;
        font-weight: 800;
        text-align: center;
        color: #FF9730;
    }

    .form-title h2 {
        font-size: 38px;
        font-weight: 800;
        text-align: center;
        color: #CC6601;
    }

    .form form {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .form form input,
    .form form textarea {
        border: 3px solid #8AB8D8;
        outline: none;
        padding: 20px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        color: #265A81;
    }

    .form form input::placeholder,
    .form form textarea::placeholder {
        color: #8AB8D8;
    }

    .form form input[type="submit"] {
        background: linear-gradient(90deg, #153048 0%, #285E88 100%);
        border-radius: 10px;
        border: none;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
    }

    .form form input[type="submit"]:hover {
        background: linear-gradient(270deg, #153048 0%, #285E88 100%);
        border: 3px solid #153048;
        border-radius: 10px;
    }

    .footer {
        display: flex;
        flex-direction: column;
        gap: 50px;
        width: 100%;
        padding: 80px 0;
        background: #F2F6F9;
        align-items: center;
    }

    .footer-1 {
        display: flex;
        flex-direction: column;
        gap: 78px;
        width: 90%;
    }

    .footer-1-address {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .footer-1-address img {
        width: 20%;
    }

    .footer-1-address h1 {
        font-family: "Roboto", sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 18.75px;
        text-align: left;
        color: #0D1D2D;
        width: 100%;
    }

    .footer-1 p {
        font-size: 14px;
        font-weight: 300;
        text-align: left;
        color: #0D1D2D;
    }

    .footer-2 {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 90%;
    }

    .footer-2-title h1 {
        font-size: 20px;
        font-weight: 700;
        text-align: left;
        color: #0D1D2D;
    }

    .footer-2-contents {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .footer-2-contents a {
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #0D1D2D;
    }

    .policy-desktop {
        display: none;
    }

    .footer-3 {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 90%;
    }

    .footer-3 div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .footer-3 div i {
        font-size: 24px;
        color: #265A81;
    }

    .footer-3 div h1 {
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        color: #0D1D2D;
    }

    .footer-3 .footer-socials {
        display: flex;
        flex-direction: row;
        gap: 34px;
    }

    .footer-3 .footer-socials i {
        font-size: 30px;
        color: #88B7D7;
    }

    .policy-mobile {
        display: flex;
        flex-direction: row;
        gap: 40px;
        width: 90%;
    }

    .policy-mobile a {
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #0D1C2D;
    }

    .faqs-general-questions {
        width: 90%;
    }

    .faqs-container-title h1 {
        font-size: 55px;
    }

    .faqs-general-questions h2 {
        font-size: 28px;
    }

    .question h6 {
        font-size: 18px;
        text-align: left;
        width: 90%;
    }

    .question h5 {
        font-size: 12px;
    }

    .thank-you-page img,
    .error-page img {
        width: 30%;
    }

}

@media only screen and (max-width:600px) {

    .menu-desktop,
    .header-socials,
    .why-telehux-desktop {
        display: none;
    }

    .header {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100vw;
        padding: 0;
    }
    
    .header i {
        display: block;
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
    }
    
    .header img {
        height: 80%;
    }

    .welcome {
        display: flex;
        flex-direction: column;
        padding: 40px 0 100px;
        background: black;
        gap: 20px;
        width: 100%;
    }

    .welcome-contents {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 80%;
    }

    .welcome-contents h2 {
        color: white;
        font-size: 26.18px;
        font-weight: 400;
    }

    .welcome-contents h1 {
        color: white;
        font-size: 46.55px;
        font-weight: 800;
    }

    .welcome-contents h3 {
        color: white;
        font-size: 26.18px;
        font-weight: 400;
        line-height: 31.69px;
    }

    .welcome-contents p {
        color: white;
        font-size: 11.64px;
        font-weight: 400;
        line-height: 17.45px;
        text-align: justify;
        margin-bottom: 10px;
    }

    .welcome-contents a {
        color: black;
        background: white;
        font-size: 11.64px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        padding: 10px 30px;
        border-radius: 8px;
    }

    .welcome-contents a:hover {
        background: #CD6600;
        border: 2px solid #FE9730;
    }

    .welcome-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        width: 80%;
    }

    .welcome-image img {
        width: 100%;
    }

    .about-us {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 0 100px;
        background: #F0F6F9;
    }

    .about-us-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
    }

    .about-us-image img {
        width: 100%;
        padding: 100px 40px;
    }

    .about-us-contents {
        display: flex;
        flex-direction: column;
        gap: 50px;
        width: 80%;
    }

    .about-us-contents h2 {
        color: black;
        font-family: Inter;
        font-size: 36px;
        font-weight: 400;
    }

    .our-story {
        display: flex;
        flex-direction: row;
        gap: 15px;
    }

    .our-story h1 {
        font-family: Inter;
        font-size: 64px;
        font-weight: 800;
    }

    .about-us-contents p {
        color: #0D1C2D;
        font-family: Inter;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: justify;
    }

    .about-us a {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        color: #FFFFFF;
        background: #265A81;
        border-radius: 10px;
        padding: 10px 30px;
    }

    .about-us a:hover {
        background: #204B6D;
        border: 2px solid #A1B8CA;
    }

    .services {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100px 0;
        width: 100%;
        background-image: linear-gradient(white,black);
        gap: 100px;
    }

    .services-contents {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .services-contents h1 {
        color: #0D1D2D;
        font-size: 64px;
        font-weight: 800;
        line-height: 76.8px;
        text-align: center;
    }

    .services-contents h2 {
        color: #265A81;
        font-size: 64px;
        font-weight: 800;
        line-height: 76.8px;
        text-align: center;
    }

    .services-contents p {
        color: #0D1C2D;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }

    .services-cards {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 48px;
    }

    .card {
        background: #F2F6F9;
        border: 3px solid #C5DCED;
        border-radius: 20px;
        width: 60%;
        padding: 0 51px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        height: 423px;
    }

    .card img {
        height: 40%;
    }

    .card h4 {
        font-size: 28px;
        font-weight: 600;
        text-align: center;
        color: #265A81;
    }

    .card h5 {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        color: #0D1C2D;
    }

    .why-telehux {
        display: flex;
        flex-direction: column;
        padding: 100px 0;
        width: 100%;
        background: url('../img/telehux-pattern.png'),
        linear-gradient(180deg, #C5DCED80 0%, #F2F6F9 37.5%);
        background-size: inherit;
        background-position: top;
        gap: 40px;
    }

    .why-telehux-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .why-telehux-title h1 {
        color: #26577F;
        font-size: 35.73px;
        font-weight: 800;
        text-align: center;
        display: block;
    }

    .why-telehux-title h2 {
        color: #0D1D2D;
        font-size: 35.73px;
        font-weight: 800;
        text-align: center;
        display: block;
    }

    .why-telehux-title img {
        width: 30%;
        display: block;
    }

    .telehux-cards-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .why-telehux-cards {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .why-telehux-cards h5 {
        position: absolute;
        background: #FF9730;
        border-radius: 50%; 
        width: 50px; 
        height: 50px; 
        font-size: 19.91px;
        font-weight: 700;
        text-align: center;
        color: black;
        top: -20px;
        left: 20px;
        line-height: 50px; 
    }

    .telehux-cards {
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        padding: 18.1px;
        border-radius: 9.05px;
        width: 80%;
        margin-left: 50px;
    }

    .telehux-cards p {
        font-size: 14.48px;
        font-weight: 400;
        line-height: 21.72px;
        text-align: left;
    }

    .vision {
        background-image: linear-gradient(white, white);
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 100px 0;
        gap: 112px;
    }

    .vision-1 {
        display: flex;
        flex-direction: column;
        gap: 48px;
        width: 80%;
    }

    .vision-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        width: 100%;
    }

    .vision-title h1 {
        font-size: 64px;
        font-weight: 800;
        text-align: left;
        color: #265A81;
    }

    .vision-title h2 {
        font-size: 64px;
        font-weight: 800;
        text-align: left;
        color: #0D1D2D;
    }

    .vision-1 p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: justify;
        color: #0D1C2D;
    }

    .vision-1 p a {
        color: #CC6601;
        font-weight: 600;
        text-decoration: none;
    }

    .vision-2 {
        display: flex;
        flex-direction: column;
        width: 90%;
    }

    .form {
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        padding: 40px;
        gap: 40px;
        border-radius: 20px;
        width: 80%;
    }

    .form-title {
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }

    .form-title h1 {
        font-size: 36px;
        font-weight: 800;
        text-align: center;
        color: #FF9730;
    }

    .form-title h2 {
        font-size: 36px;
        font-weight: 800;
        text-align: center;
        color: #CC6601;
    }

    .form form {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .form form input,
    .form form textarea {
        border: 3px solid #8AB8D8;
        outline: none;
        padding: 20px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #265A81;
    }

    .form form input::placeholder,
    .form form textarea::placeholder {
        color: #8AB8D8;
    }

    .form form input[type="submit"] {
        background: linear-gradient(90deg, #153048 0%, #285E88 100%);
        border-radius: 10px;
        border: none;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }

    .form form input[type="submit"]:hover {
        background: linear-gradient(270deg, #153048 0%, #285E88 100%);
        border: 3px solid #153048;
        border-radius: 10px;
    }

    .footer {
        display: flex;
        flex-direction: column;
        gap: 50px;
        width: 100%;
        padding: 80px 0;
        background: #F2F6F9;
    }

    .footer-1 {
        display: flex;
        flex-direction: column;
        gap: 78px;
        width: 90%;
    }

    .footer-1-address {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .footer-1-address img {
        width: 30%;
    }

    .footer-1-address h1 {
        font-family: "Roboto", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 18.75px;
        text-align: left;
        color: #0D1D2D;
        width: 100%;
    }

    .footer-1 p {
        font-size: 12px;
        font-weight: 300;
        text-align: left;
        color: #0D1D2D;
    }

    .footer-2 {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 90%;
    }

    .footer-2-title h1 {
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        color: #0D1D2D;
    }

    .footer-2-contents {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .footer-2-contents a {
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #0D1D2D;
    }

    .policy-desktop {
        display: none;
    }

    .footer-3 {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .footer-3 div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .footer-3 div i {
        font-size: 22px;
        color: #265A81;
    }

    .footer-3 div h1 {
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #0D1D2D;
    }

    .footer-3 .footer-socials {
        display: flex;
        flex-direction: row;
        gap: 34px;
    }

    .footer-3 .footer-socials i {
        font-size: 28px;
        color: #88B7D7;
    }

    .policy-mobile {
        display: flex;
        flex-direction: row;
        gap: 40px;
    }

    .policy-mobile a {
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #0D1C2D;
    }

    .about-us-page-content div h1,
    .about-us-page-2-title h1 {
        font-size: 50px;
    }

    .about-us-page-content h3,
    .about-us-page-2 h3 {
        font-size: 14px;
    }

    .privacy-policy,
    .terms-of-use {
        width: 80%;
    }

    .privacy-policy h1,
    .terms-of-use h1 {
        font-size: 35px;
    }

    .privacy-policy h2,
    .terms-of-use h2 {
        font-size: 20px;
    }

    .privacy-policy p,
    .terms-of-use p {
        font-size: 14px;
        font-weight: 400;
        color: #265A81;
    }

    .thank-you-page img,
    .error-page img {
        width: 40%;
    }
    
    .thank-you-page p,
    .error-page p {
        font-size: 18px;
    }
    
    .thank-you-page a,
    .error-page a {
        font-size: 14px;
    }
    
    .thank-you-page a i,
    .error-page a i {
        font-size: 10px;
    }

}

@media only screen and (max-width:450px) {

    .welcome-contents h2 {
        font-size: 20px;
    }

    .welcome-contents h1 {
        font-size: 42px;
    }

    .welcome-contents h3 {
        font-size: 23px;
    }

    .about-us-contents h2 {
        font-size: 30px;
    }

    .about-us a {
        font-size: 13px;
    }

    .services-contents h2,
    .services-contents h1,
    .our-story h1,
    .vision-title h1,
    .vision-title h2 {
        font-size: 50px;
    }

    .why-telehux-title h1,
    .why-telehux-title h2 {
        font-size: 30px;
    }

    .why-telehux-title img {
        width: 25%;
    }

    .card {
        width: 50%;
    }

    .card img {
        height: 30%;
    }

    .why-telehux-cards h5 {
        position: absolute;
        background: #FF9730;
        border-radius: 50%; 
        width: 35px; 
        height: 35px; 
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        color: #FFFFFF;
        top: -20px;
        left: 10px;
        line-height: 35px; 
    }

    .telehux-cards {
        margin-left: 20px;
    }

    .form {
        width: 70%;
    }
}