@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');

:root {
    --orange: #F26D2E;
    --lightorange: #F1E9E6;
    --darkorange: #df6229;
    --blue: #0A78B7;
    --lightblue: #E0EEF6;
    --darkblue: #09669c;

}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Albert Sans", sans-serif;
}

.container {
    width: 90%;
    margin: auto;
    overflow-x: hidden;
}

main {
    min-height: 50vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "DM Serif Text", serif;
}

h1 {
    font-size: 42px;
    font-weight: 500;
    line-height: 49px;
}

h3 {
    font-size: 32px;
    font-weight: 500;
    line-height: 43px;
}

h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
}

p {
    font-size: 18px;
    color: #484848;
}

.orange {
    color: var(--orange);
}

.blue {
    color: var(--blue);
}

.bg {
    background-color: var(--lightblue);
}

.blue_btn {
    border: 1px solid var(--blue);
    color: var(--blue);
    background-color: var(--lightblue);
    padding: 6px 16px;
    border-radius: 4px;
}

.orange_btn {
    border: 1px solid var(--orange);
    color: var(--orange);
    background-color: var(--lightorange);
    padding: 6px 16px;
    border-radius: 4px;
}

.submit_btn {
    color: white;
    background-color: var(--blue);
    padding: 6px 16px;
    border-radius: 4px;
}

.submit_btn:hover {
    background-color: var(--darkblue);
}

.logo {
    width: 100px;
    object-fit: cover;
}

nav {
    font-size: 18px;
}

.login_btn {
    background-color: var(--orange);
    padding: 8px 22px;
    border-radius: 4px;
    color: white;
    font-size: 16px;
}

.login_btn:hover {
    background-color: var(--darkorange);
}


.hero .heading {
    font-size: 68px;
}

.hero img {
    width: 510.86px;
    height: 400.35px;
    object-fit: cover;
}

.room .card {
    width: 365px;
    height: 365px;
}

.room img {
    width: 235px;
    height: 188px;
    object-fit: cover;
}

.room .card p {
    font-size: 14px;
}

.service img {
    width: 478px;
    height: 305px;
}

.job .jobimg {
    width: 421px;
    height: 344px;
    object-fit: cover;
}

.job .card {
    width: 365px;
    height: 365px;
    border: 1px solid #B7BABB;
}

.job .card p {
    font-size: 14px;
}

#drawer-navigation {
    background-color: #fff;
    z-index: 12000;

}

.footer {
    font-size: 18px;
}

input {
    border: 1px solid #D5D4D4;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=number],
input[type=date],
textarea,
select {
    background-color: #fbfbfb;
}

input::placeholder {
    font-size: 16px;
    color: #A4A3A3;
}

label {
    font-size: 16px;
    font-weight: 500;
}

.search input {
    height: 48px;
    border: 1px solid #D7D3D3;
    border-radius: 4px 0px 0px 4px;
}

.search button {
    width: 118px;
    height: 47px;
    padding: 14px 28px;
    border-radius: 0px 4px 4px 0px;
    background-color: var(--blue);
    color: white;
}

.job_card{
    border: 1px solid #DEDBDB;
    padding: 10px;
    height: 125px;
    border-radius: 5px;
    transition: 0.2s;
    background-color: #fbfbfb;
}

.job_card:hover{
    box-shadow: 0 0 8px 8px #DEDBDB;
}

.job_card img{
    width: 100%;
    object-fit: cover;
}

.job_card h3{
    font-size: 24px;
    color: var(--blue);
    line-height: 24px;
}

.job_card h5{
    font-size: 20px;
    color: #484848;
    line-height: 24px;
}

.job_card p{
    font-size: 16px;
    color: #484848;
    line-height: 19px;
}

.jobdetails{
    background-image: url("../images/job_details.png");
    width: 100%;
    height: 355px;
    background-size: cover;
}

.circle{
    height: 160px;
    width: 160px;
    background-color: #DEDEDE;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

.circle img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:140px;
}

#dropdownForm {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

#dropdownForm.show {
    max-height: 4000px;
}