.contactpage{ background-color: var(--white-color);padding: 3rem 5% 3rem 5%;}
.contactpage .mainheading{margin-bottom: 10px;}
.contactbox {
    background-color: #EFF6FA;
    height: 100%;
    padding: 3rem 3rem 3rem 3rem;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border: var(--cyan-color) 10px solid;
}
.contactbox .label{
    display: block;
    font-size: 15px;
    color: var(--secondary-color);
    margin-bottom: 0.2rem;
    font-weight: 500;
}
.contactbox .label span{color: #ff000f;}
.book-row.twocols{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.book-row.twocols .book-field{
    display: flex;
    flex-direction: column;
}

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

/* Start of Mini Desktop Screen */
@media screen and (max-width: 1300.98px) and (min-width: 1201px) {
 .contactpage {padding: 3rem 3% 3rem 3%;}
 .contactbox {padding: 2rem;border: var(--cyan-color) 8px solid;}
}

/* Start of Mini Desktop Screen */
@media screen and (max-width: 1200.98px) and (min-width: 1101px) {
 .contactpage {padding: 3rem 3% 3rem 3%;}
 .contactbox {padding: 2rem;border: var(--cyan-color) 6px solid;}
}

/* Start of IPad Pro Screen */
@media screen and (max-width: 1100.98px) and (min-width: 992px) {
 .contactpage {padding: 3rem 2% 3rem 2%;}
 .contactbox {padding: 2rem;border: var(--cyan-color) 5px solid;}
}

/* Start of IPad Screen */
@media screen and (max-width: 991.98px) and (min-width: 768px) {
 .contactpage {padding: 2rem 2% 2rem 2%;}
 .contactbox {padding: 2rem;border: var(--cyan-color) 4px solid;}
}

/* Start of Mobile/Iphone Screen */
@media screen and (max-width: 767.98px) and (min-width: 320px) {
    .contactpage {padding: 1.5rem 2% 1.5rem 2%;}
    .contactbox {padding: 1rem;border: var(--cyan-color) 2px solid;}
    .book-row.twocols,
    .book-row.two-cols {grid-template-columns: 1fr;gap: 10px;}
    .captcha-submit-row {display: block;}
    .booksubmitbtn{margin-top: 12px;padding: 10px 20px;}    
}