/*Common CSS*/
:root {
    --primary-color: #002640;
    --secondary-color: #f08661;
    --text-light: #f6f3f2;
}
@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

.shake {
    animation: shake 0.5s;
}
.body{
    color: #7A7A7A;
    background-color: #F5F6F7;
}
.h1, h2, h3, h4, h5{
    color:#1f1f1f;
    font-family: 'Overpass', sans-serif !important;
}
a{
    text-decoration: none !important;
}
.text-primary{
    color: var(--primary-color) !important;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus{
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-light);
}
section{
    padding: 100px 0;
}
.bg-grey{
    background-color: #F5F6F7;
}
.top-header{
    background-color: var(--primary-color);
}
.top-header, .top-header a, .top-header i{
    color: var(--text-light);
}
.navbar-brand img{
    max-width: 200px;
}
.nav-item a:hover, .nav-item .active{
    color: var(--primary-color);
    font-weight: bold;
    border-bottom: 2px solid var(--primary-color);
}
.inner-header-area{
    background-image: url("../images/inner-bg.jpg");
    background-position: center;
    background-size: cover;
}
.cta-btn{
    background-color: var(--secondary-color);
    color: #FFFFFF;
    font-weight: bold;
}
.cta-btn:hover{
    background-color: var(--primary-color);
    color: var(--text-light) !important;
}
.footer-area{
    padding:50px 0 25px !important;
    background-color: var(--primary-color);
    color: var(--text-light);
}
.footer-area a, .footer-area h5{
    color: var(--text-light);
}
.footer-area a:hover{
    color: var(--text-light) !important;
    border-bottom: none !important;
}

/* Home Page */

.header-area .header-text-area{
    padding: 70px 50px 70px 0;
}
.header-area h1{
    font-size: 4rem;
    line-height: 1.1em;
    letter-spacing: -1.8px;
}
.img-box{
    position: absolute;
}
.header-area .header-img{
    height: 650px;
    max-width: 555px;
    object-fit: cover;
    object-position: center center;
    border-radius: 50% 50% 0% 0%;
}
.header-area .highlight-box{
    background-color: var(--secondary-color);
    color: var(--text-light);
    box-shadow: -14px 14px var(--primary-color);
    padding: 15px 50px;
    max-width: 220px;
    position: absolute;
    left: -50px;
    bottom: 150px;
}
.highlight-box h1, .highlight-box h4{
    color: var(--text-light);
}
.highlight-box h1{
    font-weight: bold;
    font-size: 45px;
}
.service-area h1{
    font-size: 45px;
}
.service-area .service-img{
    height: 550px;
    object-fit: cover;
    object-position: center center;
    border-radius: 50% 50% 0% 0%;
}
.service-area .highlight-box{
    background-color: var(--secondary-color);
    color: var(--text-light);
    box-shadow: -14px 14px var(--primary-color);
    padding: 15px 50px;
    max-width: 220px;
    position: absolute;
    left: -50px;
    bottom: 100px;
}
.why-area .why-img{
    height: 450px;
    object-fit: cover;
    object-position: center center;
    border-radius: 50% 50% 0% 0%;
}
.icon-highlight{
    background-color: #1E50791A;
    fill: var(--primary-color);
    color: var(--primary-color);
    border-radius: 50%;
    padding: 18px 7px 6px;
}
#recent img{
    border-radius: 7px;
}
.carousel-indicators [data-bs-target]{
    background-color: var(--primary-color);
}

/* About Us Page */
#location ul{
    list-style: none;
}
#location ul li{
    font-size: 1.5rem;
}

/*Contact Us Page */
#contact .header-text-area{
    padding: 0;
}
#contact .info-box a, #contact .info-box a:hover{
    color: var(--primary-color);
}
#map{
    padding:0;
}
#map iframe{
    width:100%;
    height:400px;
}
.input-group-lg>.input-group-text, .input-group-text{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Service Details Page */
#detail p, #detail ul li{
    font-size: 1.2rem;
}

/* Mobile CSS */
@media (max-width: 992px) {
    section{
        padding:50px 0 100px;
    }
    .header-area .header-img, .service-area .service-img, .why-area .why-img{
        max-width: 100%;
        max-height: 330px;
    }
    .header-area .header-text-area{
        padding: 0;
    }
    .img-box {
        padding-top:30px;
        position: relative;
    }
    .header-area .highlight-box, .service-area .highlight-box{
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Heading tags were corrected so each page has one h1 and no skipped levels.
   Several rules above key off the TAG, so an element that changed tag lost its
   styling even though nothing about it was meant to look different.

   Restored below by matching the size class the element now carries. The
   statistic blocks get classes of their own, because a figure like "2,500+" is
   a caption rather than a heading and should not depend on being one.
   --------------------------------------------------------------------------- */

/* Footer headings are now h2.h5 rather than h5. */
.footer-area .h5 {
    color: var(--text-light);
}

/* Was .highlight-box h1 / h4 before the numbers became paragraphs. */
.highlight-box .stat-number,
.highlight-box .stat-label {
    color: var(--text-light);
}
.highlight-box .stat-number {
    font-weight: bold;
    font-size: 45px;
}

/* The services section heading is now h2.h1. */
.service-area .h1 {
    font-size: 45px;
}

/*
 * Article body.
 *
 * Copy written in the portal editor arrives as plain <h2>/<p>/<ul>, with no
 * classes to hook onto. These rules give it a comfortable measure and rhythm
 * without touching headings anywhere else on the site - the .fence-article
 * scope matters, because bare h2/p rules would leak into every page.
 */
.fence-article {
    font-size: 1.075rem;
    line-height: 1.75;
}

.fence-article h2 {
    margin-top: 2.25rem;
    margin-bottom: .85rem;
    font-size: 1.6rem;
}

.fence-article h3 {
    margin-top: 1.75rem;
    margin-bottom: .65rem;
    font-size: 1.25rem;
}

.fence-article p,
.fence-article ul,
.fence-article ol {
    margin-bottom: 1.15rem;
}

.fence-article li {
    margin-bottom: .4rem;
}

.fence-article > *:first-child {
    margin-top: 0;
}