:root{
    --mainclr:#3b80ff;
    --secclr:#ffd700;
    --third:#ddc5c5;
    --mainafterclr:hsl(167, 81%, 79%);
}

* {
    margin: 0px;
    padding: 0px;
    outline: none;
    box-sizing: border-box;
    transition: .2s;
    text-transform: capitalize;
    text-decoration: none;
}

html {
    font-size: 62.5%;
    background-color: #f7eeee;

}
body {
    background-color: #fdf8f8;
}
.all{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #dddddd;
}

/*============= TOP BAR HEADER =============*/

/* Top Bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(60deg,
            rgba(84, 58, 183, 1) 0%,
            rgba(0, 172, 193, 1) 100%);
    color: white;
    padding: 0 5px;
    z-index: 10;
    height: auto;
    min-height: 35px;
    font-family: 'Arial', sans-serif;
    flex-wrap: wrap;
}

/* Left Side - Contact */
.contact {
    padding-left: 3px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.contact i,
.contact p,
.contact a {
    margin-right: 5px;
    color: #ffffff;
    font-size: 18px;
}

/* Phone number with hover effect */
.phone-link {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.phone-link:hover {
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* Middle - Date */
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.items-center {
    align-items: center;
}
.items-start {
    align-items: flex-start;
}
.space-x-2 > * + * {
    margin-left: 0.3rem;
}
.gap-1 {
    gap: 0.2rem;
}
.gap-3 {
    gap: 0.5rem;
}
.pl-2 {
    padding-left: 0.3rem;
}
.pl-4 {
    padding-left: 0.7rem;
}

/* Right Side - Language */
#right-side {
    padding-right: 3px;
}

.google-translate:hover {
    background-color: var(--secclr);
}
.google-translate i {
    margin-right: 3px;
    font-size: 0.7rem;
}

/* Fix for Google Translate element */
#google_translate_element {
    height: 50%;
    display: flex;
    align-items: center;
}

/* Hide Google Translate branding */
.goog-te-banner-frame, .goog-te-ftab-frame {
    display: none !important;
}

/* Affix */
.affix {
    top: 0;
    width: 100%;
    z-index: 990 !important;
    position: sticky;
}

/* Responsive utilities */
.hidden {
    display: none;
}

/* Text sizes */
.text-lg {
    font-size: 0.9rem;
}
.text-xl {
    font-size: 1rem;
}
.text-2xl {
    font-size: 1.1rem;
}
.text-base {
    font-size: 0.8rem;
}
.md\:text-lg {
    font-size: 1rem;
}
.lg\:text-xl {
    font-size: 1.1rem;
}

/* Font weight */
.font-bold {
    font-weight: 600;
}

/* Media queries for small screens (phones) */
@media (max-width: 480px) {
    .top-bar {
        padding: 3px 2px;
        height: auto;
        min-height: 40px;
    }
    
    .contact {
        padding-left: 2px;
        flex: 1;
        justify-content: center;
    }
    
    .contact i,
    .contact p,
    .contact a {
        font-size: 9px;
        margin-right: 3px;
    }
    
    .flex-col {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.2rem;
    }
    
    .space-x-2 > * + * {
        margin-left: 0.2rem;
    }
    
    .text-lg, .text-xl, .text-2xl {
        font-size: 0.8rem;
    }
    
    #right-side {
        padding-right: 2px;
        flex: 1;
        display: flex;
        justify-content: center;
    }
    
    .google-translate {
        height: 22px;
        font-size: 0.6rem;
        padding: 0 3px;
    }
    
    .pl-2, .pl-4 {
        padding-left: 0.2rem;
    }
}

/* Media queries for medium screens (tablets) */
@media (min-width: 481px) and (max-width: 768px) {
    .top-bar {
        padding: 0 6px;
    }
    
    .contact {
        padding-left: 10px;
    }
    
    .contact i,
    .contact p,
    .contact a {
        font-size: 10px;
    }
    
    #right-side {
        padding-right: 12px;
    }
    
    .google-translate {
        height: 23px;
        font-size: 0.8rem;
    }
}

/* Media queries for large screens (desktops) */
@media (min-width: 769px) {
    .contact {
        padding-left: 4vw;
    }
    
    #right-side {
        padding-right: 5vw;
    }
    
    .contact i,
    .contact p,
    .contact a {
        font-size: 10x;
    }
    
    .google-translate {
        height: 26px;
        font-size: 0.6rem;
    }
}

/* Media queries for the sm: classes */
@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:items-start {
        align-items: flex-start;
    }
    .sm\:gap-3 {
        gap: 0.55rem;
    }
    .sm\:pl-4 {
        padding-left: 0.5rem;
    }
    .sm\:inline {
        display: inline;
    }
}
/*============= HEADER =============*/

nav {
    padding: 2rem 7%;
    background-color: var(--mainclr);
    margin-top: 0%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    font-family: 'Times New Roman', Times, serif;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0%;
    margin: 0%;
}

nav .navbar {
    position: sticky;
    height: 100%;
    max-width: 1250px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    /* background: red; */
    padding: 0 50px;
}

.navbar #logo {
    width: 300px;
   
}

.navbar .logo a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

nav .navbar .nav-links {
    line-height: 70px;
    height: 100%;
}

nav .navbar .links {
    display: flex;
    padding: 0%;
    margin: 0%;
}

nav .navbar .links li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0 14px;
}

nav .navbar .links li a {

    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

nav .navbar .links li a:after {
    content: '';
    background: var(--secclr);
    width: 0;
    height: 3px;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    transition: .3s;
    display: flex;
    justify-content: space-between;
    
}

nav .navbar .links li a:hover:after {
    content: '';
    background: var(--secclr);
    width: 100%;
    height: 3px;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;

}

.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow {
    transform: rotate(180deg);
}

nav .navbar .links li .arrow {
    /* background: red; */
    height: 100%;
    width: 22px;
    line-height: 70px;
    text-align: center;
    display: inline-block;
    color: #fff;
    transition: all 0.3s ease;
}

nav .navbar .links li .sub-menu {
    position: absolute;
    top: 70px;
    left: 0;
    line-height: 40px;
    background: var(--mainclr);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 0 0 4px 4px;
    display: none;
    z-index: 2;
}

nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu {
    display: block;
    color: #ffd700;
}

.navbar .links li .sub-menu li {
    padding: 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar .links li .sub-menu a {
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
}

.navbar .links li .sub-menu .more-arrow {
    line-height: 40px;
}

.navbar .links li .htmlCss-more-sub-menu {
    /* line-height: 40px; */
}

.navbar .links li .sub-menu .more-sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    border-radius: 0 4px 4px 4px;
    z-index: 1;
    display: none;
}

.links li .sub-menu .more:hover .more-sub-menu {
    display: block;
}

.navbar .search-box {
    position: relative;
    height: 40px;
    width: 40px;
}

.navbar .search-box i {
    position: absolute;
    height: 100%;
    width: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 22px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.navbar .search-box .input-box {
    position: absolute;
    right: calc(100% - 40px);
    top: 80px;
    height: 60px;
    width: 300px;
    background: var(--mainclr);
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
}

.navbar.showInput .search-box .input-box {
    top: 65px;
    opacity: 1;
    pointer-events: auto;
    background: var(--mainclr);
}

.search-box .input-box::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    background: var(--mainclr);
    right: 10px;
    top: -6px;
    transform: rotate(45deg);
}

.search-box .input-box input {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    height: 35px;
    width: 280px;
    outline: none;
    padding: 0 15px;
    font-size: 16px;
    border: none;
}

.navbar .nav-links .sidebar-logo {
    display: none;
}

.navbar .bx-menu {
    display: none;
}

@media (max-width:920px) {
    nav .navbar {
        max-width: 100%;
        padding: 0 25px;
    }

    nav .navbar .logo a {
        font-size: 27px;
    }

    nav .navbar .links li {
        padding: 0 10px;
        white-space: nowrap;
    }

    nav .navbar .links li a {
        font-size: 15px;
    }
}

@media (max-width:800px) {
    nav {
        /* position: relative; */
    }

    .navbar .bx-menu {
        display: block;
    }

    nav .navbar .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        display: block;
        max-width: 270px;
        width: 100%;
        background: var(--mainclr);
        line-height: 40px;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.5s ease;
        z-index: 1000;
    }

    .navbar .nav-links .sidebar-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar-logo .logo-name {
        font-size: 25px;
        color: #fff;
    }

    .sidebar-logo i,
    .navbar .bx-menu {
        font-size: 25px;
        color: #fff;
    }

    nav .navbar .links {
        display: block;
        margin-top: 20px;
    }

    nav .navbar .links li .arrow {
        line-height: 40px;
    }

    nav .navbar .links li {
        display: block;
    }

    nav .navbar .links li .sub-menu {
        position: relative;
        top: 0;
        box-shadow: none;
        display: none;
    }

    nav .navbar .links li .sub-menu li {
        border-bottom: none;

    }

    .navbar .links li .sub-menu .more-sub-menu {
        display: none;
        position: relative;
        left: 0;
    }

    .navbar .links li .sub-menu .more-sub-menu li {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .links li:hover .htmlcss-arrow,
    .links li:hover .js-arrow {
        transform: rotate(0deg);
    }

    .navbar .links li .sub-menu .more-sub-menu {
        display: none;
    }

    .navbar .links li .sub-menu .more span {
        /* background: red; */
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
    }

    .links li .sub-menu .more:hover .more-sub-menu {
        display: none;
    }

    nav .navbar .links li:hover .htmlCss-sub-menu,
    nav .navbar .links li:hover .js-sub-menu {
        display: none;
    }

    .navbar .nav-links.show1 .links .htmlCss-sub-menu,
    .navbar .nav-links.show3 .links .js-sub-menu,
    .navbar .nav-links.show2 .links .more .more-sub-menu {
        display: block;
    }

    .navbar .nav-links.show1 .links .htmlcss-arrow,
    .navbar .nav-links.show3 .links .js-arrow {
        transform: rotate(180deg);
    }

    .navbar .nav-links.show2 .links .more-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width:370px){
  nav .navbar .nav-links{
  max-width: 100%;
} 
}

/* Full screen responsive slider */
.slider {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: var(--mainclr);
}

/* Slides */
.slide {
    margin-top: 100px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Active slide */
.slide.active {
    opacity: 1;
}

/* Base styles */
.slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin-top: 250px;
    margin-left: 60%;
    /* Centered horizontally */
    margin-right: auto;
    /* Centered horizontally */
    text-align: right;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    max-width: 400px;
}

/* Slide title */
.slide-content h1 {
    padding-top: 40px;
    font-size: 24px;
}

/* Slide text */
.slide-content p {
    font-size: 14px;
    padding-top: 5px;
}

.slide-content a {
    padding-top: 5px;
    padding-bottom: 40px;
    text-align: center;
    padding: 1vw;
    color: var(--third);
    font-size: 20px;
}

.slide-content a:hover {
    background-color: rgba(167, 165, 255, 0.39);
    color: var(--secclr);
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .slide-content {
        margin-top: 100px;
        /* Smaller top margin */
        margin-left: 10%;
        /* Space from the left */
        margin-right: 10%;
        /* Space from the right */
        text-align: center;
        /* Center text for smaller screens */
    }

    .slide-content h1,
    .slide-content p,
    .slide-content a {
        font-size: 16px;
        /* Smaller font size for all text elements */
    }
}

/* Media query for screens smaller than 480px */
@media (max-width: 480px) {
    .slide-content {
        margin-top: 50px;
        /* Even smaller top margin */
        margin-left: 5%;
        /* Less space from the left */
        margin-right: 15%;
        /* Less space from the right */
        text-align: center;
        /* Center text for very small screens */
    }

    .slide-content h1,
    .slide-content p,
    .slide-content a {
        font-size: 10px;
        /* Even smaller font size for all text elements */
    }
}

.learn-more {
    size: 44cap;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
}

/* Navigation buttons */
.slider-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

/* Navigation buttons style */
.slider-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
}

/* Style the features container */
.features-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    color: white;
    font-family: "Times New Roman", Times, Georgia, serif;
    font-weight: bold;
    padding-left: 5em;
    padding-right: 5em;
    margin-top: -30px;
    position: relative;
    z-index: 2;
    /* Add a negative margin-top to move the container up */
}

/* Style the individual feature blocks */
.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 50px);
    /* Subtract 40px from the width to create gaps on the left and right */
    height: 150px;
    margin-bottom: 0em;
}

/* Style the feature icons */
.feature img {
    width: 5em;
    height: 5em;
    margin-bottom: 0.5em;
}

/* Style the feature titles */
.feature h2 {
    font-size: 1.8em;
    margin-bottom: 0.5em;
}

/* Style the feature descriptions */
.feature p {
    font-size: 1.2em;
    text-align: center;
}

/* Style the feature colors */
.red {
    background-color: var(--mainclr);
}

.green {
    background-color: rgb(2, 6, 61);
}

.blue {
    background-color: rgb(128, 2, 2);
}

/* Make the layout responsive using media query */

/* For mobile phones: */
@media only screen and (max-width: 480px) {

    /* Adjust the slide content position and width */
    .slide-content {
        margin-top: 100px;
        margin-left: 0;
        width: 100%;
    }

    /* Adjust the features container padding and margin */
    .features-container {
        padding-left: 2em;
        padding-right: 2em;
        margin-top: 0;
    }

    /* Adjust the feature icons size */
    .feature img {
        width: 3em;
        height: 3em;
    }
}

/* For tablets: */
@media only screen and (min-width: 481px) and (max-width: 768px) {

    /* Adjust the slide content position and width */
    .slide-content {
        margin-top: 150px;
        margin-left: 200px;
        width: 70%;
    }

    /* Adjust the features container padding and margin */
    .features-container {
        padding-left: 3em;
        padding-right: 3em;
        margin-top: -20px;
    }

    /* Adjust the feature icons size */
    .feature img {
        width: 4em;
        height: 4em;
    }
}

/* For desktops: */
@media only screen and (min-width: 769px) {

    /* Make the feature blocks sit side-by-side */
    .features-container {
        flex-direction: row;
        justify-content: space-between;
    }

    /* Adjust the height of the feature blocks */
    .feature {
        height: 200px;
    }
}



/* break line for all media */
.break-line {
    background: linear-gradient(60deg,
                rgba(84, 58, 183, 1) 0%,
                rgba(0, 172, 193, 1) 100%);
    height: 450px;
    width: 100%;
    /* Use 100% width to make it responsive */
    padding-left: 30px;
    padding-right: 0px;
    border-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 200px;
    position: relative;
    z-index: 5;
}

.break-line h2 {
    padding-top: 90px;
    padding-left: 50px;
    font-size: 30px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
}

.break-line p {
    padding-top: 100px;
    font-size: 25px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    color: #f88181;
    text-align: center;
}

.break-line p a {
    color: #ffffff;
    
}

#read-news {
    background-color: transparent;
    padding: 10px;
    transition: background-color 0.5s ease;
}

.double-line {
    border-top: 10px double #000000;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: -20px;
}
#read-news:hover {
    background-color: rgba(0, 0, 0, 0.514);
}

/* Define the styles for media with a max-width of 600px */
@media (max-width: 600px) {
    .break-line {
        height: 300px;
        /* Reduce the height */
        border-radius: 25px;
        /* Reduce the border radius */
        border-bottom-right-radius: 100px;
        /* Reduce the border radius */
    }

    .break-line h2 {
        padding-left: 80px;
        /* Increase the padding left */
        font-size: 25px;
        /* Reduce the font size */
        padding-top: 50px;
        /* Reduce the padding top */
    }

    .break-line p {
        font-size: 20px;
        /* Reduce the font size */
        padding-top: 80px;
        /* Reduce the padding top */
    }

    .double-line {
        width: 100%;
        /* Use 100% width */
        margin-top: 10px;
        /* Remove the margin top */
    }
}

/* Define the styles for media with a min-width of 601px and a max-width of 1200px */
@media (min-width: 601px) and (max-width: 1200px) {
    .break-line {
        height: 400px;
        /* Reduce the height */
        border-radius: 40px;
        /* Reduce the border radius */
        border-bottom-right-radius: 150px;
        /* Reduce the border radius */
    }

    .break-line h2 {
        padding-left: 60px;
        /* Reduce the padding left */
        font-size: 28px;
        /* Reduce the font size */
        padding-top: 80px;
        /* Reduce the padding top */
    }

    .break-line p {
        font-size: 23px;
        /* Reduce the font size */
        padding-top: 90px;
        /* Reduce the padding top */
    }

    .double-line {
        width: 75%;
        /* Use 75% width */
        margin-top: 10px;
        /* Reduce the margin top */
    }
}


/* ----------         start feedback        ----------*/
.feedback{
    align-items: center;
    display: flex;
    height: 80vh;
    width: 85vw;
    box-shadow: 0.2rem .5rem #333;
    background-image:url(../images/grhc15.jpg) ;
    background-size: 90%;
    margin: 50px;
}
 

.form {
    height: 100vh;
    width: 100%;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container {
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0px 0px 20px #00000010;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 20px;
}

.form-group {
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 5px;
    font-size: 18px;
    border: 1px solid rgba(128, 128, 128, 0.199);
    margin-top: 5px;
}

textarea {
    resize: vertical;
}

button[type="submit"] {
    width: 100%;
    border: none;
    outline: none;
    padding: 20px;
    font-size: 24px;
    border-radius: 8px;
    font-family: "Montserrat";
    color: rgb(27, 166, 247);
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s ease background-color;
}

button[type="submit"]:hover {
    background-color: rgb(214, 226, 236);
}

#status {
    width: 90%;
    max-width: 500px;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    border-radius: 8px;
}

#status.success {
    background-color: rgb(211, 250, 153);
    animation: status 4s ease forwards;
}

#status.error {
    background-color: rgb(250, 129, 92);
    color: white;
    animation: status 4s ease forwards;
}

@keyframes status {
    0% {
        opacity: 1;
        pointer-events: all;
    }

    90% {
        opacity: 1;
        pointer-events: all;
    }

    100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* ----------       .feeddback-left,
      .form {
          width: 50%;
          height: 100%;
      }

      .form {
          position: relative;
          background-color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
      }

      .form::before {
          position: absolute;
          top: 10%;
          left: -2.5rem;
          content: "";
          width: 0;
          height: 0;
          border: 1.4rem solid transparent;
          border-right: 1.4rem solid var(--third);
      }

      .form h1 {
          color: #000000;
          font: 500 2.8rem 'Times New Roman', Times, serif;
          padding: 0 2rem;
      }

      .form form {
          padding: 0 2rem;
      }

      .form input,
      .form textarea {
          width: 100%;
          padding: 1rem;
          border: .08rem solid var(--secclr);
          border-radius: 2rem;
          background-color: unset;
          color: rgb(0, 0, 0);
          font-size: 1rem;
      }

      .form input:not(:first-child),
      .form textarea,
      .form button {
          margin-top: .8rem;
      }

      .form textarea {
          height: 10rem;
          resize: none;
      }

      .form button {
          background-color: var(--mainclr);
          padding: 1rem 2rem;
          color: #ffffff;
          border-radius: 2rem;
          border: none;
      }

      .form button:hover {
          background-color: var(--secclr);
      }

      .feeddback-left .form {
          width: 50%;
          min-height: 100%;
      }

      .feeddback-left iframe {
          width: 100%;
          height: 100%;

      }       ----------*/


/* ----------         end feedback       ----------*/
/* ---------- our-services ---------- */
/* Define the default styles for all media */
.our-services {
    margin-top: -120px;
    padding: 4rem 7%;
    background-image: url("../images/GHC Building.png");
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.service-content {
    padding-top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}

.left-service-content {
    flex: 1 1 45rem;
}

.right-service-content {
    flex: 1 1 45rem;
    display: flex;
    justify-content: flex-end;
}

.left-service-content h1 {
    font-size: 40px;
    margin-bottom: 15px;
    color: white;
}

.left-service-content p {
    font-size: 1.5rem;
    color: white;
}

.right-service-content .right-btn a {
    padding: 1.5rem 3rem;
    font-size: 2rem;
    color: white;
    background: var(--secclr);
}

.right-service-content .right-btn a:hover {
    border: 1px solid var(--secclr);
    background: transparent;
    color: rgb(255, 255, 255);
}
.hover-btn a{
    padding: .5rem 2rem;
    font-size: 1.2rem;
    color: transparent;
    background: transparent;
}
.hover-btn a:hover{
    border: 1px solid var(--secclr);
    background: var(--secclr);
    color: rgb(255, 255, 255);
}
.main-services {
    padding-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.inner-services-content {
    flex: 1 1 300px;
    padding: 1rem 3rem;
    text-align: center;
}

.inner-services-content h2 {
    font-size: 25px;
    margin-bottom: 10px;
    color: white;
}

.inner-services-content p {
    font-size: 1.5rem;
    line-height: 2;
    color: white;
}

.service-icon i {
    font-size: 4rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    text-align: center;
    line-height: 8rem;
    background: var(--mainafterclr);
    color: var(--mainclr);
    margin-bottom: 15px;
    cursor: pointer;
    transition: 0.3s;
}

.service-icon i:hover {
    color: white;
    background: var(--mainclr);
}

/* Media query for small screens */
@media (max-width: 768px) {
    .our-services {
        padding: 2rem 5%;
        /* Smaller padding on small screens */
    }

    .service-content,
    .main-services {
        gap: 20px;
        /* Reduced gap for smaller screens */
    }

    .left-service-content h1 {
        font-size: 30px;
        /* Smaller font size for h1 on small screens */
    }

    .left-service-content p,
    .inner-services-content p {
        font-size: 1.2rem;
        /* Smaller font size for paragraphs on small screens */
    }

    .right-service-content .right-btn a {
        padding: 1rem 2rem;
        /* Smaller button padding on small screens */
        font-size: 1.5rem;
        /* Smaller font size for button text on small screens */
    }

    .service-icon i {
        font-size: 3rem;
        /* Smaller icons on small screens */
        width: 6rem;
        height: 6rem;
        line-height: 6rem;
    }

    .inner-services-content {
        flex: 1 1 100%;
        /* Take full width on small screens */
    }

    .inner-services-content h2 {
        font-size: 20px;
        /* Smaller font size for h2 on small screens */
    }
}
/*============= gallery =============*/
.single-line {
    color: #000;
    width: 95%;
    margin-top: 0px;
    /* Reduce the margin top */
}
#gallery-read {
    color: #000;
    background-color: transparent ;
    padding: 10px;
    transition: background-color 0.5s ease;
}
#gallery-read:hover {
    background-color: rgba(167, 165, 255, 0.39);
}
.gallery {
    padding: 4rem 7%;
}

.gallery h1 {
    color: black;
    font-size: 40px;
    text-align: center;
    margin-bottom: 30px;
}

.main-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inner-gallery {
    flex: 1 1 300px;
    width: 100%;
    height: 250px;
    /* Fixed height */
}

.inner-gallery img {
    width: 100%;
    height: 100%;
    /* Fixed height */
    size-adjust: fixed;
    transition: .3s;
}

.inner-gallery img:hover {
    transform: scale(1.1);
    border-radius: 20px;
}
/* Responsive styles */
@media (max-width: 768px) {
    .inner-gallery {
        flex-basis: calc(50% - 10px);
        /* Two images per row */
    }
}

/***--------------footer------------------***/
.footer{
    height: 120%;
    width: auto;
    padding-top: 80px;
    padding:  3%;
    background: linear-gradient(60deg,
                rgba(84, 58, 183, 1) 0%,
                rgba(0, 172, 193, 1) 100%);
    border-top-left-radius: 50px;
    border-top-right-radius: 20px;
    position: relative;
}
.main-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.logo-inner-footer {
    margin-top: -20px;
    margin-right: 0px;
}
.inner-footer{
    flex: 1 1 200px;
    margin-left: 20px;
}
.logo-inner-footer h4 {
    font-size: 2rem;
    color: rgb(255, 255, 255);
}
.logo-inner-footer p {
    padding-top: 10px;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.1;
    font-size: 1.8rem;
    color: rgb(255, 255, 255);
    margin-bottom: 20px;
}
.logo-inner-footer p:hover {
   color: var(--secclr);

}
.inner-footer h2{
    font-size: 2rem;
    color: rgb(255, 255, 255);
    
}
.inner-footer a{
    font-size: 1.5rem;
    font-weight: bolder;
    color: rgb(255, 255, 255);
    display: block;
    margin-top: .5rem;
    padding-top: .5rem;
}
.inner-footer a:hover{
    margin-left: 10px;
    color: var(--secclr);
}
.logo-inner-footer .icons {
    display: flex;
    margin-top: 30px;
    gap: 30px;
    cursor: pointer;
    padding-left: 10px;
    
}

.logo-inner-footer .icons a {
    color: #ffffff;
    font-size: 25px;

}

.logo-inner-footer .icons i:hover {
    color: var(--secclr);
}

.copyright-design {
    text-align: center;
    padding: 20px 0;
    color: #fff;
    background-color: #000808bd;
}

.copyright-design hr {
    border: none;
    height: 1px;
    background-color: #777;
    margin-bottom: 0px;
}

.copyright-design p {
    margin: 10px 0;
    font-size: 1.5em;
}

.copyright-design a {
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    color: white;
}

.copyright-design p a{
    color: var(--mainclr);
}

.copyright-design p a:hover{
    color: var(--secclr);
}

/***********about us*********/
*
.container {
    display: flex;
}
.about-1 {
    margin: 30px;
    padding: 5px;
}

.about-1 h1 {
    text-align: center;
    color: black;
    font-weight: bold;
}

.about-1 p {
    text-align: center;
    padding: 3px;
    color: #fff;
}

 /*----************ servicess****************----*/
 .title{
    color: #00ffff;
    font-family: "Raleway";
    font-size: 1.5em;
    width: 1000px;
    margin: 10px;
    text-align: center;
 }
 .servicess{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
 }
.card{
   height: 380px;
   width: 300px;
   padding: 20px 35px;
   border-radius: 10px;
   background: #dff9fb; 
   margin: 10px;
   overflow: hidden;
   position: relative;
   transition: all 0.3s cubic-bezier(0.02, 0.01,0.47,1);
}
.card .icon{
    font-size: 64px;
    display: block;
    text-align: center;
    color: #7ed6df;
    margin: 18px;
}
.card h1{
    font-family: 'Raleway';
    text-align: center;
    color: #22a6b3;
    font-size: 22px;
}
.card .buttons{
    background: #22a6b3;
    color: #c7ecee;
    border: none;
    border-radius:5px ;
    width: 120px;
    padding: 15px;
    margin-top: 25px;
    display: inline-block;
    font-family:'raleway' ;
    font-size: 16px;
    text-align: center;
}
.card a{
text-decoration: none;
}
.card .content p{
    font-size: 12px;
    color: #535c68;
    line-height: 18px;
    font-family: 'century gothic';
}
.card:hover{
color: #fff;
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
animation: rotate 0.7s ease-in-out both;
}
.card:before,
.card::after{
    content: '';
    background: #22a6b3;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    opacity: 0;
    position: absolute;
    right: 0;
    bottom: -80px;
    z-index: -1;
    transform: translate(100%, -25%) translate3d(0,0,0);
    transition: all 0.15s cubic-bezier 0.02,0,01,0.47,1;

}
.card:hover:before,
.card:hover::after{
    opacity: 0.15;
}
.card.card:hover:before{
    transform: translate3d(50%,0,0) scale(0.9);
}
.card.card:hover::after {
    transform: translate(50%,0) scale(1,1);
}
/*animation*/
@keyframes rotate{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(3deg);}
    50%{transform: rotate(-3deg);}
    75%{transform: rotate(1deg);}
    100%{transform: rotate(0deg);}
}
@media(max-width: 900px)
{
    .title{
        width:100px ;
    }
     .title{
        font-size:20px ;
    }
     .servicess{
        flex-direction: column;
    }
}
/*Blog Section*/

section.blog-section {
    padding: 100px 0px;
}

.blog-info h3 a {
    color: #000;
}

ul.meta li {
    display: inline-block;
}

.blog-info p {
    margin-top: 20px;
}

.blog-media {
    margin-bottom: 17px;
}

.blog-box {
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .11);
}


/* Continue with your existing styles and animations */

.waver {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg,
            rgba(84, 58, 183, 1) 0%,
            rgba(0, 172, 193, 1) 100%);
    color: #f5efef;
    height:200px; /* Assuming 1920px screen width, 243px is approximately 12.65625vw */
    border-bottom-left-radius: 10px;
}

@media (max-width: 768px) {
    .waver {
        height: 26.89vh; /* Adjust the height for smaller screens */
    }
    .waves-content h1 {
    font-size: 20px;
    margin-top: -15px;
    top: 50%;
    position: absolute;
}
}
.waves-content h1 {
    font-size: 3.1vw;
    position: absolute;
    top: 20%;
    left: 32%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.waves-content {
    position: absolute;
    margin-top: -230px;
    bottom: 0;
    width: 100%;
}
.inner-header {
    height: 65vh;
    width: 70%;
    margin: 0;
    padding: 0;
}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.waves {
    margin-top: 0px;
    position: relative;
    width: 100%;
    height: 5.2vw;
    margin-bottom: -2px;
}
.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: #f5efef;
}


.parallax>use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* end of content container head text for titel all */
/***********************************---History of grhc---*****************************************/
/* Style the text content container */
.text-content {
    padding-left: 4vw;
    padding-right: 4vw;
    text-indent: 15px;
    margin: 0%;
    font-family: Arial, sans-serif;
    padding-bottom: 50px;
}

.text-content h1 {
    color: #333;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.text-content h2 {
    color: #333;
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

.text-content p {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

.text-content ul {
    color: #333;
    font-size: 18px;
    line-height: 1.5;
    list-style-type: disc;
    margin-left: 40px;
}

/* Responsive styles for screens less than 480px */
@media only screen and (max-width: 480px) {
    .text-content {
        padding-bottom: 5px;
    }

    .text-content h2 {
        font-size: 16px;
        margin-top: 15px;
        margin-bottom: 8px;
    }

    .text-content p {
        font-size: 13px;
    }

    .text-content ul {
        font-size: 12px;
        margin-left: 20px;
    }
}

/***********************************--- CONTACT of grhc---*****************************************/
.location {
    width: 90%;
    margin: auto;
    padding: 80px 0;
}

.location iframe {
    width: 100%;
    padding-top: 1%;
}

.contact-map h7{
    font-family: Arial, sans-serif;
    font-size: 30px;

}
/***********************************--- NEWS of grhc---*****************************************/
.news {
    margin: 0;
    font-family: sans-serif;
    min-height: 100vh;
    max-width: 100vw;
    line-height: 1.4;
    padding: 3vw ;
    margin-bottom: 100px;
}
.news-blog {
    font-family: sans-serif;
    min-height: 100vh;
    max-width: 100vw;
    line-height: 1.4;
    padding: 3vw;
    margin-bottom: 100;
}
.news-container {
    max-width: 1200px;
}

.news-heading-1 {
    font-size: 40px;
    text-transform: uppercase;
}

.news-heading-2 {
    font-size: 35px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.news-heading-3 {
    font-size: 20px;
    text-transform: uppercase;
    color: rgb(27, 26, 26);
    margin-bottom: 10px;
}

.news-sub-heading {
    font-size: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.news-sub-heading p {
    font-weight: 700;
    text-transform: capitalize;
    margin-right: 10px;
}

.news-sub-heading span {
    color: #555;
    font-weight: 300;
    border-right: 1px solid #ccc;
    padding-right: 10px;
}
.news-left p {
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    margin-right: 10px;
}

.news-left span {
    font-size: 20px;
    color: #555;
    font-weight: 300;
    border-right: 1px solid #ccc;
    padding-right: 10px;
}
.news-btn a {
    margin: 15px;
    padding: .5rem 2rem;
    font-size: 1.2rem;
    color: white;
    background: var(--mainclr);
}

.news-btn a:hover {
    border: 1px solid var(--secclr);
    background: var(--secclr);
    color: rgb(255, 255, 255);
}
.news-sub-heading .importent {
    color: rgb(26, 25, 25);
    text-transform: uppercase;
    font-weight: 300;
}

/* HOME */
.news-home {
    margin: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.news-home-img {
    width: 100%;
    height: 500px;
}

.news-list {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
    margin-bottom: 10px;
}
.news-list p{
    font-size: 14px;
}
.news-list img {
    width: 100%;
    height: 100px;
}

/* ARTICLE */
article>p {
    font-size: 20px;
    margin-bottom: 20px;
    columns: 3 25ch;
    column-gap: 40px;
    hyphens: auto;
}

article p:first-child::first-line {
    font-weight: 700;
    font-size: 25px;
}

/* blockquote */
blockquote {
    font-size: 20px;
    padding: 10px 30px;
    margin-bottom: 40px;
    position: relative;
}

blockquote::before {
    content: open-quote;
    position: absolute;
    top: -48px;
    left: -4px;
    opacity: .3;
    color: #666;
    font-size: 150px;
}

.news-cards {
    columns: 25ch 3;
    gap: 40px;
    margin-bottom: 40px;
}

.news-card {
    font-size: 20px;
    border: 1px solid;
    padding: 10px 20px;
    break-inside: avoid;
}

@media (max-width: 950px) {
    .news-home {
        grid-template-columns: 1fr;
    }

    .news-lists {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .news-list {
        grid-template-columns: 1fr 5fr;
    }

    .news-card {
        margin-bottom: 40px;
    }
}

@media (max-width: 650px) {
    .news-lists {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {

    .news,
    .news-blog,
    .news-container,
    .news-home,
    .news-list,
    .news-cards,
    .news-card {
        margin-top: auto;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-bottom: 1vw;
    }

    /* Adjust other elements as needed for mobile responsiveness */
}
/***********************************--- orgaization of grhc---*****************************************/
.organogram {
    text-align: center;
    padding: 1.5vw;
}

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

@media screen and (max-width: 600px) {
    .organogram {
        margin: 10px;
    }
}
/***********************************--- leader of grhc---*****************************************/
.main-leader {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    padding-right: 0px;
}

.inner-leader {
    position: relative;
    display: flex;
    align-items: center;
}
.leader-image {
    display: block;
    max-width: 50%; /* Adjust the width as necessary */
    height: auto;
    margin-right: 20px; /* Space between image and text */
}
.leader-image {
    width: 100%;
    max-width: 300px;
    /* Adjust as needed */
    margin: auto;
    display: block;
}

.leader-icons {
    display: none;
    position: absolute;
    top: 10px;
    /* Adjust as needed */
    right: 10px;
    font-size: 25px;
    color: var(--mainclr);
}

.inner-leader:hover .leader-icons {
    display: block;
    color: var(--mainclr);
}

.leader-text {
    margin-left: 20px;
    /* Adjust as needed */
}

@media (max-width: 768px) {
    .main-leader {
        flex-direction: column;
    }

    .leader-text {
        margin-left: 0;
        text-align: center;
    }
}
main.table {
    padding-top: 150px;
    width: 82vw;
    height: 90vh;
    background-color: #fff5;
    backdrop-filter: blur(7px);
    box-shadow: 0 .4rem .8rem #0005;
    border-radius: .8rem;
    overflow: hidden;
}

.table__header {
    width: 100%;
    height: 10%;
    background-color: #fff4;
    padding: .9rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.table__body {
    width: 95%;
    max-height: calc(89% - 1.6rem);
    background-color: #fffb;

    margin: .8rem auto;
    border-radius: .6rem;

    overflow: auto;
    overflow: overlay;
}
.table__body h4 {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

table {
    padding-top: 50px;
    width: 100%;
}

td img {
    width: 36px;
    height: 36px;
    margin-right: .5rem;
    border-radius: 50%;

    vertical-align: middle;
}

table,
th,
td {
    border-collapse: collapse;
    padding: 1rem;
    text-align: left;
    font-size: 17px;
}

thead th {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #d5d1defe;
    cursor: pointer;
    text-transform: capitalize;
}

tbody tr:nth-child(even) {
    background-color: #0000000b;
}

.table__body .leader-icon i {
    color: var(--mainclr);
    font-size: 24px;
}
.tbody .fa-brands.fa-telegram {
    color: var(--mainclr);
    font-size: 24px;
    transition: color 0.3s ease-in-out;
}

.fa-brands.fa-telegram:hover {
    color: var(--secclr);
}
/* Base styles */
.table__body {
    width: 95%;
    max-height: calc(89% - 1.6rem);
    margin: .8rem auto;
    border-radius: .6rem;
    overflow: auto;
    overflow: overlay;
}

/* ... other styles ... */

/* Responsive styles */
@media (max-width: 1024px) {
    .table {
        width: 95vw;
        height: auto;
    }

    .table__header,
    .table__body {
        padding: 0.5rem;
    }
    .table__body h4{
        font-size: 18px;

        }

    table,
    th,
    td {
        padding: 0.5rem;
        font-size: 15px;
    }

    td img {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 768px) {
    .table {
        width: 100vw;
    }

    .table__header,
    .table__body {
        padding: 0.2rem;
    }

    table,
    th,
    td {
        padding: 0.2rem;
        font-size: 13px;
    }

    td img {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 320px) {
    .table__body {
        width: 100%;
        max-height: none;
    }

    thead th,
    tbody tr {
        display: block;
    }
    .table__body h4 {
    font-size: 10px;

     }
    thead th {
        position: static;
    }

    tbody tr {
        margin-bottom: 0.5rem;
    }

    tbody tr td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    tbody tr td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: bold;
        text-align: left;
    }
}
/***********************************--- feedback of grhc---*****************************************/

.contact-wrap {
    padding-top: 10px;
    width: 90%;
    height: auto;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.contact-in {
    padding: 10px 20px;
}

.contact-in:nth-child(1) {
    flex: 30%;
    background: url(../images/grhc12.jpg) ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
}
.contact-in:nth-child(2) {
    flex: 45%;
    background: rgb(255, 255, 255);
}
.contact-in:nth-child(3) {
    flex: 25%;
    padding: 0;
}

.contact-in h1 {
    font-size: 24px;
    color: #000000;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 20px;
    font-family: 'Times New Roman', Times, serif;
}

.contact-in h2 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 15px;
    
}

.contact-in h2 i {
    font-size: 16px;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background: var(--mainclr);
    color: var(--third);
    border-radius: 50px;
    line-height: 40px;
    text-align: center;
}
.contact-in h2 i:hover{
    background-color:var(--secclr);
}
.contact-in p {
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 20px;
    color: rgb(255, 255, 255);
}

.contact-in ul {
    padding: 0;
    margin: 0;
}

.contact-in ul li {
    list-style: none;
    display: inline-block;
    margin-right: 5px;
    margin-top: 5px;
}

.contact-in ul li a {
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    background: var(--mainclr);
    border-radius: 50px;
}
.contact-in ul li a:hover{
    background-color: var(--secclr);
}
.contact-in ul li a i {
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
}

.contact-in form {
    width: 100%;
    height: auto;
}

.contact-in-input {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border: 1px solid #000000;
    outline: none;
    padding-left: 5px;
    background: transparent;
    color: #000000;
    font-size: 12px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.contact-in-input::placeholder {
    color: #352d2d79;
}

.contact-in-textarea {
    width: 100%;
    height: 140px;
    margin-bottom: 20px;
    border: 1px solid #000000;
    outline: none;
    padding-top: 5px;
    padding-left: 5px;
    background: transparent;
    color: #000000;
    font-size: 12px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.contact-in-textarea::placeholder {
    color: #352d2d79;
}

.contact-in-btn {
    width: 100%;
    height: 40px;
    border: 1px solid #fff;
    outline: none;
    background-color: var(--secclr);
    color: #000000;
    font-size: 12px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}
.contact-in-btn:hover{
    background-color:#dfd9d9a9;
}
.contact-in iframe {
    width: 100%;
    height: 96%;
}
.contact-in .map-a a {
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    font-size: 15px;
}
.contact-in a{
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
}
.contact-in a:hover{
    color: var(--secclr);
}
@media only screen and (max-width:480px) {
    .contact-in:nth-child(1) {
        flex: 50%;
    }

    .contact-in:nth-child(2) {
        flex: 50%;
    }

    .contact-in:nth-child(3) {
        flex: 100%;
    }

}

@media only screen and (max-width:360px) {
    .contact-in:nth-child(1) {
        flex: 50%;
    }

    .contact-in:nth-child(2) {
        flex: 50%;
    }

    .contact-in:nth-child(3) {
        flex: 100%;
    }

}

/***********************************--- Glow of grhc---*****************************************/


@keyframes glow {
    from {
        text-shadow: 0 0 10px #f7f7f7, 0 0 20px #f7f7f7, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }

    to {
        text-shadow: 0 0 20px #f7f7f7, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}

.glow {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-color: transparent;
    font-family: 'Arial', sans-serif;
}

.glow h5 {
    font-size: 5em;
    color: #fff;
    animation: glow 2s ease-in-out infinite alternate;
}

/***********************************--- Relation ship with organiztion of grhc---*****************************************/

.Relation-section {
    height: 100vh;
    width: 100%;
    background: linear-gradient(#ebe6e6, #eee7e7);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.Relation-section .Relation-title {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.Relation-section .Relation-title h2 {
    position: relative;
    /* border-left: 5px solid #eb8714; */
    font-size: 3rem;
    color: #000000;
    padding: 0 12px;
}

.Relation-section .Relation-title h2:before {
    content: " ";
    position: absolute;
    height: 0;
    width: 5px;
    top: 0;
    left: 0;
    background: var(--mainclr);
    animation: down 3s forwards;
}

@keyframes down {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}
.Relation-section .Relation-title .Relation-arrows button {
    background: var(--secclr);
    margin: 0px 15px;
    border: 0;
    border-radius: 12px;
}

.Relation-section .Relation-title .Relation-arrows button:hover i {
    color: #000;
}

.Relation-section .Relation-title .Relation-arrows button:hover {
    background: transparent;
}

.Relation-section .Relation-title .Relation-arrows button i {
    padding: 10px 30px;
    color: var(--mainclr);
    font-size: 1.3rem;
    border: 1px solid #fff;
    border-radius: 12px;
}

 .team-members  {
        margin: 0%;
        padding: 0%;
    }

/* section team members  */
.Relation-section .team-members {
    height: 520px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Relation-section .team-members .member-card1 {
    position: relative;
    max-height: 350px;
    max-width: 300px;
    border-radius: 26px;
    margin: 0 12px;
    overflow: hidden;
    transition: 0.7s;
}

/* card icons  */
.member-card1 .Relation-icons {
    position: absolute;
    display: none;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    top: 20%;
    left: 10%;
    transition: 1s;

}

.member-card1 .Relation-icons i {
    padding: 6px 0;
    margin: 4px 0;
    color:var(--secclr);
    font-size: 1.1rem;
    transform: rotate(-60deg);
    transition: all 1s;

}

/* card icons end */
.member-card1:hover .Relation-icons {
    display: flex;
}

.member-card1:hover .Relation-icons i {
    transform: rotate(0deg);
    transition: all 1s;
    font-size: 30px;
}

.Relation-icons i:hover {
    color: var(--third);
}

.member-card1 img {
    height: 100%;
    width: 100%;
    border-radius: 26px;
    transition: all 1s ease;
}

/* content start  */
.member-card1 .Relation-content {
    position: absolute;
    z-index: 1;
    top: 72%;
    left: 10%;
}

.member-card1 .Relation-content {
    color: #fff;
    margin: 5px 0;
}
.Relation-content h3{
    font-size: 18px;
    color: #333;
}
.Relation-content h2 {
     font-size: 20px;
     color: #000000;

}
.Relation-section .team-members .member-card1 .content h3 {
    color: #817878;
    font-weight: 300;

}

.Relation-section .team-members .member-card1:hover img {
    transform: scale(1.1);
}

/* cdn  */

.slick-slider {
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;

    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;

    height: auto;

    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

/* Responsive styles */
@media only screen and (max-width: 768px) {
    .Relation-section {
        height: auto; /* Adjust height for smaller screens */
        padding: 10px; /* Add padding for better spacing */
    }

    .Relation-section .Relation-title h2 {
        font-size: 1.5rem; /* Smaller font size for titles */
    }

        .Relation-section .team-members {
            height: 320px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .team-members  {
        margin: 0%;
        padding: 0%;
    }

    .Relation-section .team-members .member-card1 {
        max-height: 280px; /* Adjust card size */
        max-width: 240px;
    }

    .member-card1 .Relation-content h3,
    .member-card1 .Relation-content h2 {
        font-size: 12px; /* Smaller font size for content */
    }
}

@media only screen and (max-width: 480px) {
    .Relation-section .Relation-title h2 {
        font-size: 1.1rem; /* Even smaller font size for very small screens */
    }

    .Relation-section .team-members .member-card1 {
  
        max-height: 250px; /* Further adjust card size */
        max-width: 200px;
    }

     .Relation-section .team-members {
            height: 220px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    .member-card1 .Relation-content h3,
    .member-card1 .Relation-content h2 {
        font-size: 14px; /* Adjust font size for content */
    }
}

/***********************************--- TENDER of grhc---*****************************************/
.container-tender {
    text-align: center;
    font-family: Arial, sans-serif;
}

.container-tender img {
    width: 90px;
    padding-top:20px;
    display: block;
    margin: 0 auto;
}
.container-tender h5 {  
    font-family: Arial, sans-serif;
	color:#333;
	font-weight:700;
	margin-top:25px;	 
	text-align:center;
	text-transform:uppercase;
	letter-spacing:2px;
	line-height:23px;
    font-size: 20px;
}
.container-tender p {
    font-size:2.4vh ;
}
/* --- Start progress bar --- */

.process-wrapper {
	margin:auto;
	max-width:1080px;
    font-family: Arial, sans-serif;
}

#progress-bar-container {
	position:relative;
	width:90%;
	margin:auto;
	height:100px;
	margin-top:65px;
}

#progress-bar-container ul {
	padding:0;
	margin:0;
	padding-top:15px;
	z-index:99;
	position:absolute;
	width:100%;
	margin-top:-40px
}

#progress-bar-container li:before {
	content:" ";
	display:block;
	margin:auto;
	width:30px;
	height:30px;
	border-radius:50%;
	border:solid 2px #aaa;
	transition:all ease 0.3s;
     
}

#progress-bar-container li.active:before, #progress-bar-container li:hover:before {
	border:solid 2px #fff;
       	 
    background: linear-gradient(60deg,
                rgba(84, 58, 183, 1) 0%,
                rgba(0, 172, 193, 1) 100%);
        color: white;
}
.bold-text {
    font-weight: bold;
}
#progress-bar-container li {
	list-style:none;
	float:left;
	width:20%;
	text-align:center;
	color:#aaa;
	text-transform:uppercase;
	font-size:11px;
	cursor:pointer;
	font-weight:700;
	transition:all ease 0.2s;
	vertical-align:bottom;
	height:60px;
	position:relative;
}

#progress-bar-container li .step-inner {
	position:absolute;
	width:100%;
	bottom:0;
    font-size: 12px;
}

#progress-bar-container li.active, #progress-bar-container li:hover {
	color:#444;
}

#progress-bar-container li:after {
	content:" ";
	display:block;
	width:6px;
	height:6px;
	background:#777;
	margin:auto;
	border:solid 7px #fff;
	border-radius:50%;
	margin-top:40px;
	box-shadow:0 2px 13px -1px rgba(0,0,0,0.3);
	transition:all ease 0.2s;
     
}

#progress-bar-container li:hover:after {
	background:#000000;
}

#progress-bar-container li.active:after {
	background:#207893;
}

#progress-bar-container #line {
	width:80%;
	margin:auto;
	background: #eee;
	height:6px;
	position:absolute;
	left:10%;
	top:57px;
	z-index:1;
	border-radius:50px;
	transition:all ease 0.9s;
}

#progress-bar-container #line-progress {
	content:" ";
	width:3%;
	height:100%;
	background: #207893;	 
	background: linear-gradient(to right, #207893 0%,#2ea3b7 100%); 
	position:absolute;
	z-index:2;
	border-radius:50px;
	transition:all ease 0.9s;
}

#progress-content-section {
	width:90%;
	margin: auto;
	background: #f3f3f3;
	border-radius: 4px;
}

#progress-content-section .section-content {
	padding:30px 40px;
	text-align:center;
}

#progress-content-section .section-content h2 {
	font-size:17px;
	text-transform:uppercase;
	color:#333;
	letter-spacing:1px;
}

#progress-content-section .section-content p {
	font-size:16px;
	align-items: start;
	color:#353535;
}

#progress-content-section .section-content {
	display:none;
	animation: FadeInUp 700ms ease 1;
	animation-fill-mode:forwards;
	transform:translateY(15px);
	opacity:0;
}

#progress-content-section .section-content.active {
	display:block;
}

@keyframes FadeInUp {
	0% {
		transform:translateY(15px);
		opacity:0;
	}
	
	100% {
		transform:translateY(0px);
		opacity:1;
	}
}
/*---tender-table----*/
.tender-table {
    background-color: #f3ebebc4;
    text-align: center;;
    margin-bottom: 20px;
    margin-left: 10px;
    width: calc(100% - 40px); 
    margin: 0 20px; 
    border-collapse: collapse;
    margin-bottom: 20px
}
.table-top {
    width: calc(100% - 40px);
    margin: 0 20px;
    border-collapse: collapse;
    margin-bottom: 20px;
    text-align: center;
}
.table-top h4 {
    font-size: 18px;
}
.tender-table th,
.tender-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.tender-table th {
    background-color: #f2f2f2;
}

/* Responsive table */
@media (max-width: 768px) {

    .tender-table,
    .tender-table thead,
    .tender-table tbody,
    .tender-table th,
    .tender-table td,
    .tender-table tr {
        display: block;
    }

    .tender-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .tender-table tr {
        border: 1px solid #ccc;
    }

    .tender-table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    .tender-table td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-title);
        font-weight: bold;
    }
}

/*---------------------servive major functions-----------------*/
/* Existing styles */
.major-service {
     margin: 0;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    margin-top: 0%;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}
.line-services{
    width: 100%;
}
.major-service h2 {
    font-size: 20px;
    text-align: center;
    color: #101111;
    margin-bottom: 10px;
}
.major-service h4 {
    color: #101111;
    margin-bottom: 10px;
    font-size: 18px;
}
.major-service p{
    font-size: 18px;
    margin-left: 15px;
    margin-bottom: 10px;
}
.major-service ul {
    
    margin-bottom: 10px;
}

.major-service ul {
    padding-left: 10px;
    list-style-type: disc;
    margin-left: 10px;
}

.major-service li {
    color: #101111;
        font-size: 14px;
    margin-left: 25px;
    margin-bottom: 5px;
}
/* New styles */
.service-section {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
}

.service-section h2 {
  color: #0056b3;
  margin-bottom: 10px;
}

.service-section p,
.service-section ul {
  margin-bottom: 10px;
}

.service-section ul {
  list-style-type: disc;
  margin-left: 10px;
}

.service-section li {
  margin-bottom: 5px;
}

/* Responsive design for all screen sizes */
@media only screen and (max-width: 1200px) {
  .service-section h2,
  .major-service h2 {
    font-size: 18px; /* Adjusted for large screens */
  }
  .service-section h4,
  .major-service h4 {
    font-size: 16px; /* Adjusted for large screens */
  }
  .major-service p {
    font-size: 15px;
  }
}

@media only screen and (max-width: 992px) {
  .service-section h2,
  .major-service h2 {
    font-size: 17px; /* Adjusted for medium screens */
  }
  .service-section h4,
  .major-service h4 {
    font-size: 15px; /* Adjusted for medium screens */
  }
}

@media only screen and (max-width: 768px) {
  .service-section h2,
  .major-service h2 {
    font-size: 16px; /* Adjusted for small screens */
  }
  .service-section h4,
  .major-service h4 {
    font-size: 14px; /* Adjusted for small screens */
  }
}

@media only screen and (max-width: 400px) {
  .service-section h2,
  .major-service h2 {
    font-size: 14px; /* Adjusted for extra small screens */
  }
  .service-section h4,
  .major-service h4 {
    font-size: 12px; /* Adjusted for extra small screens */
  }
  .service-section p,
  .major-service p,
  .service-section ul,
  .major-service ul,
  .service-section li,
  .major-service li {
    font-size: 12px; /* Adjusted text for extra small screens */
  }
}

/************************* about us Base styles ********************/
/* CSS styling */
.about-grhc {
    padding: 2vw;
   font-family: Arial, sans-serif;
    line-height: 0.2;
    color: #333;
    line-height: 1.6;
    color: #333;
}

.about-grhc h2 {
    text-align: center;
    color: #333;
    font-size: 20px;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.about-grhc p {
    font-size: 17px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.about-grhc ul {
    list-style-type: none;
    padding: 0;
}

.about-grhc ul li {
    margin-left: 25px;
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

/* Media query for screens with a maximum width of 768px (e.g., tablets and smaller) */
@media screen and (max-width: 768px) {
    .about-grhc {
        margin-left: 0px;
        /* Adjust margin for smaller screens */
    }

    .about-grhc h2 {
        font-size: 16px;
        /* Decrease font size for smaller screens */
    }

    .about-grhc p {
        font-size: 15px;
        /* Decrease font size for smaller screens */
    }

    .about-grhc ul li {
        font-size: 14px;
        /* Decrease font size for smaller screens */
    }
}
/************************* FAQ Base styles ********************/
/* styles.css */

/* Base styles for all screen sizes */
.faq-section {
    width: 100%;
    margin-top: 20px;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    margin-bottom: 30px;
    padding-left: 5vw;
}

.accordion h5 {
    text-align: start;
    font-size: 25px;
    margin-bottom: 20px;
}

/* Accordion styles */
.accordion-item {
    margin-bottom: 10px;
}

.accordion-title {
    font-size: 22px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: bold;
    padding: 0;
    text-align: left;
    width: 100%;
    /* Ensure the title does not cause overflow */
}

.accordion-text p {
    font-size: 2vw;
    margin-left: 4vw;
    /* Consider reducing this if it causes overflow */
}

.accordion-collapse {
    display: none;
}

/* Toggle the collapse content when button is clicked */
.accordion-title:focus+.accordion-collapse {
    display: block;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .faq-section {
        max-width: 100%;
    }

    .accordion-title {
        font-size: 16px;
        /* Further decrease font size for smaller screens */
    }

    .accordion-text {
        font-size: 15px;
        /* Decrease font size for smaller screens */
    }
}
/************************* calander Base styles ********************/
 #calendar {
    margin: 0%;
     width: 100%;
     max-width: 400px;
     /* Maximum width */
     height: auto;
     /* Height is automatic */
     aspect-ratio: 2;
     /* Maintain a 2:1 aspect ratio */
     border: 1px solid #000;
 }

 #calendar .header {
     display: flex;
     justify-content: space-between;
     padding: 5px;
     background: #e3e3e3;
 }

 #calendar .days {
     display: flex;
     flex-wrap: wrap;
 }

 #calendar .day {
     width: calc(100% / 7);
     /* Responsive width */
     height: calc((100vw - 2px) / 14);
     /* Responsive height based on width */
     max-height: 57px;
     /* Maximum height to maintain aspect ratio */
     border-right: 1px solid #000;
     border-bottom: 1px solid #000;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s;
 }

 #calendar .day:hover {
     background-color: #f0f0f0;
 }

 #calendar .day:nth-child(7n) {
     border-right: none;
 }

 #calendar .day.today {
     font-weight: bold;
     background-color: var(--mainclr);
 }

 /* Responsive styles for small mobile screens */
 @media (max-width: 480px) {
     #calendar {
        margin: 0%;
         max-width: none;
         /* Allow full width */
     }

     #calendar .day {
         height: calc((100vw - 2px) / 7);
         /* Adjust height for smaller width */
         max-height: none;
         /* Remove max-height restriction */
     }
 }

/************************* video Base styles ********************/
.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 38.25%; /* 16:9 Aspect Ratio */
    max-width: 1000px;
    margin: auto; /* Center the container */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Media query for mobile devices */
@media (max-width: 480px) {
    .video-container {
        margin: 0;
        max-width: none; /* Allow the container to fill the width */
        padding-top: 75%; /* Adjust aspect ratio for portrait orientation */
    }
}

/************************* pagination Base styles ********************/
.pagination {
    text-align: center;
    margin: 20px;
    display: flex;
    list-style-type: none;
    padding-top: 10px;
    padding-left: 30vh;
  }
.pagination li {
    margin: 0 5px;
  }
.news-next-btn a {

     margin: 15px;
    padding: .5rem 2rem;
    font-size: 1.6rem;
    background: var(--secclr);
    text-decoration: none;
    color: #000;
    padding: 5px 10px;
    border: 1px solid #ddd;
    transition: background-color 0.3s;
  }
.pagination li a:hover {
    border: 1px solid var(--secclr);
    background-color: transparent;
  }
.pagination li a.active {
    font-weight: bold;
    color: white;
    background-color: #4CAF50;
    border-color: #4CAF50;
  }
.news-next-btn a:hover {
    border: 1px solid var(--secclr);
    background-color: transparent;
  }
@media (max-width: 600px) {
    .pagination li a {
      padding: 3px 6px;
    }
  }

/************************* Labratroy service Base styles ********************/

.lab-container {
    padding: 4vw;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 300;
    line-height: 24px;
}

.lab-container p {
    color: #333;
    text-indent: 30px;
    font-size: 17px;
    margin-bottom: 10px;
}

.lab-container h4 {
    margin: 10px;
    font-size: 20px;
}

.lab-container li {
    padding-left: 20px;
    font-size: 16px;

}

.thumbanail {
    width: 450px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 10px;
}

.thumbanail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transform: scale(1) rotate(0deg);
    transition: all .5s linear;
}

.thumbanail.right {
    float: right;
    margin-left: 20px;
}

.thumbanail.left {
    float: left;
    margin-right: 20px;
}

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

    .thumbanail.right {
        float: none;
        margin-left: 0px;
    }

    .thumbanail.left {
        float: none;
        margin-right: 0px;
    }

    .thumbanail {
        width: 100%;
    }
}


.laboratory-slider {
    width: auto;
    height: 300px;
    overflow: hidden;
}

.laboratory-slider img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    object-fit: cover;
}

@media (max-width: 768px) {


    .bottom-content {
        flex-direction: column;
    }

    .text-content,
    .laboratory-slider,
    .laboratory-picture {
        width: 100%;
        /* Full width on smaller screens */
    }

    .laboratory-slider {
        height: auto;
        /* Height will adjust to maintain aspect ratio */
    }
}
.table-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.ghcl h2{
    color: #333;
    font-size: 19px;
}
.service-hours p,
.service-hours h2 {
    color: #555;
    padding-top: 5px;
    font-size: 15px;
}

.ghcl,
.service-hours {
    flex: 1;
    min-width: 300px;
    max-width: 50%;
    margin: 10px;
    transition: 0.3s;
    border-radius: 5px;
}

.service-hours h2 {
    color: #333;
    font-size: 19px;
}

.ghcl:hover,
.service-hours:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #0e0a0abe;
}

.ghcl th {
    background-color: #7a80946e;
    color: #555;
}

@media (max-width: 768px) {
    .table-container {
        flex-direction: column;
    }

    .ghcl,
    .service-hours {
        max-width: 90%;
    }
}

.lab-ghc {
    margin-top: 0px;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

.lab-ghc h2 {
    text-align: center;
    text-transform: uppercase;
    padding: 1vw;
    color: #333;
    font-size: 18px;
}

.lab-ghc p {
    font-size: 17px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.lab-ghc ul {
    list-style-type: none;
    padding: 0;
}

.lab-ghc ul li {
    margin-left: 50px;
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    .lab-ghc {
        margin-left: 2px;
    }

    .lab-ghc h2 {
        font-size: 16px;
    }

    .lab-ghc p {
        font-size: 15px;
    }

    .lab-ghc ul li {
        font-size: 14px;
    }
}

/* Mobile screen adjustments */
@media (max-width: 480px) {
    .table-container {
        padding: 5px;
    }

    .ghcl,
    .service-hours,
    .lab-ghc {
        min-width: 100%; /* Full width for mobile screens */
        margin: 5px 0; /* Adjusted margin for mobile screens */
    }

    .ghcl h2,
    .service-hours h2,
    .lab-ghc h2,
    .lab-ghc p,
    .lab-ghc ul li {
        font-size: 12px; /* Adjusted font size for mobile screens */
    }
}

/************************* ghc all service Base styles ********************/
/* Base styles for ghc-all-service */
.ghc-all-service {
    margin: 0;
    padding-left: 3vw;
    padding-right: 3vw;
    font-family: Arial, sans-serif;
    color: #333;
}

/* Styles for ghc-services */
.ghc-services h1 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.ghc-services h2 {
    text-align: center;
    /* Center align all text */
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

.ghc-services p {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

.ghc-services ul {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    list-style-type: disc;
    margin-left: 40px;
}

/* Styles for ghc-main-service */
.ghc-main-service h2 {
    text-transform: uppercase;
    text-align: center;
    /* Center align all text */
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ghc-main-service ol {
        color: #333;
    counter-reset: list-counter;
    /* Reset the list counter */
    list-style-type: none;
    /* Remove default list style */
    padding: 0;
    /* Remove default padding */
}

.ghc-main-service ol li {
    font-size: 16px;
    counter-increment: list-counter;
    /* Increment the list counter */
    margin-bottom: 10px;
    /* Add space between list items */
}

.ghc-main-service ol li::before {
    padding-left: 3vw;
    content: counter(list-counter) ". ";
    /* Add the counter number and a dot before the list item */
    font-weight: bold;
    /* Make the number bold */
}

.main-services-ul {
    padding-left: 4vw;
}
.red-services {
    color: rgba(187, 7, 7, 0.822); /* This will set the text color to red for the element with class 'red-services' */
}
/* Responsive styles for tablets */
@media only screen and (max-width: 768px) {

    .ghc-services h1,
    .ghc-services h2,
    .ghc-services p,
    .ghc-main-service h2{
        font-size: 16px;
    }
    .ghc-services ul,
    .ghc-main-service ol li{
        font-size: 13px;
    }
    .ghc-services ul,
    .main-services-ul {
        margin-left: 20px;
    }
}

/* Responsive styles for mobile phones */
@media only screen and (max-width: 480px) {

    .ghc-services h1,
    .ghc-services h2,
    .ghc-main-service h2{
        font-size: 18px;
    }

    .ghc-services p,
    .ghc-services ul,
    .ghc-main-service ol li {
        font-size: 13px;
    }

    .ghc-services ul,
    .main-services-ul {
        margin-left: 10px;
    }
}