*, html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* default styles */
p {
    font-size: 16px;
}
a {
    text-decoration: none;
}
/* 
.lexend-<uniquifier> {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    font-family: "Lexend", sans-serif;
}
.logo img {
    width: 240px;
}
.container {
    width: 100%;
    max-width: 1440px;
}
header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #000;
}
#mob-menubar {
    display: none;
}
#menuModal {
  position: absolute;
  top: 70px;
  right: 0;
  width: 200px;
  height: 300px;
  background-color: #ffffff;
  display: none; /* hidden by default */    
  z-index: 999;
}
#closeBtn {
    display: none;
    width: 48px;
    height: 48px;
}
#mob-menubar nav ul {
    list-style: none;
    padding: 12px;
}
#mob-menubar nav ul li {
    margin-bottom: 12px;
}
#mob-menubar nav ul a{
    color: #f04f10;
    font-weight: bold;
}
#phoneCall {
    display: block;
    position: fixed;
    right: 4px;
    bottom: 2px;
    animation: shake 1s infinite;   
}
/* Shake animation keyframes */
@keyframes shake {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-15deg); }
  20% { transform: rotate(15deg); }
  30% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  50% { transform: rotate(-5deg); }
  60% { transform: rotate(5deg); }
  70% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
#menubar ul{
    display: flex;
    justify-content: space-between;
    width: 40vw;
    list-style: none;
}
#menubar a {
    font-size: 18px;
    font-weight: bold;
    color: #f04f10;
    text-decoration: none;
}
#menubar a:hover {

}
.callext {
    display: flex;
    align-items: center;
}
.callext div {
    padding: 4px;
}
.callext a {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
main {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}
.heading {
    text-align: center;
    margin: 12px 0px 12px 0px;
}
#intro-cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
#img-intro {
    flex: 0 1 auto; 
}
#intro {
    flex: 2 1 auto;
}
.img-banner img {
    width: 250px;
}
#intro p  {
    width: 350px;
}
#book-cont {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#book-service {
    display: flex;
    flex-direction: column;
}
.input {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}
.input input {
    width: 300px;
    height: 32px;   
    margin-top: 4px;
    padding: 4px;

    font-family: "Lexend", sans-serif;
}
.input textarea {
    margin-top: 4px;
}
.input textarea {
    width: 300px;
    height: 54px;
    padding: 4px;
    font-family: "Lexend", sans-serif;
}
.input div {
    display: flex;
    align-items: center;
}
.input img {
    width: 24px;
}
input[type=submit] {
    height: 32px;
    width: 150px;
    cursor: pointer;
    background-color: #0d4eaf;
    color: #ffffff;
    font-weight: bold;
    font-family: "Lexend", sans-serif;
    outline: none;
    border-radius: 4px;
}
#book-cont {
    display: flex;
}
#cont-work {
    column-count: 3;
    column-gap: 15px;
}
.work-item {
  break-inside: avoid;
  margin-bottom: 15px;
}
.work-item img {
    display: block;
    width: 100%;

}
footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position:static;
    bottom: 0px;
}

/* media @ 425px */
@media (max-width: 576px) {
    #mob-menubar {
        display: block;
    }
    #mob-menubar > ul {
        display: none;
    }
    #menubar {
        display: none;
    }
    .logo img {
        width: 160px;
    }
    #intro-cont {
        flex-direction: column;
        align-items: center;
    }
    #cont-work {
    column-count: 1;
    column-gap: 4px;
    }
    footer {
        flex-direction: column;
    }
}