@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
a { text-decoration: none; font-size: 15px}
p, .main-table ul li {font-family: "Mulish", sans-serif;font-size: 16px;margin: 0 0 10px 0;line-height: 1.6;}
h1, h2, h3, h4, h5, h6 { font-family: "Mulish", sans-serif;}
.heading h2 {font-size: 37px;font-weight: 800;text-align: center;margin: 0 0 30px 0;position: relative;color: #243c5a;}
.sub-heading {font-size: 27px;color: #243c5a;font-weight: 700;border-bottom: 1px solid #cfcfcf;padding: 5px 0;margin: 0 0 20px 0;}
.heading h2::after {position: absolute;content: '';width: 150px;height: 4px;background: #26a69a;left: 0;right: 0;margin: auto;top: 56px;}
.button-bottom a{
    display: inline-block;
    background: #ffc107;
    padding: 15px 34px;
    color: #000000;
    font-weight: 500;
    font-size: 17px;
}
.banner-section .carousel-inner .carousel-item img { animation: zoom 15s;}
.banner-section .carousel-control-next, .carousel-control-prev { width: 10%; opacity: .7;}
.banner-section .carousel-control-next-icon, .carousel-control-prev-icon { width: 3rem; height: 3rem;} 
.banner-section .carousel-caption { text-align: left; top: 22%; left: 10%; width: 50%;}
.banner-section .carousel-caption h4 { font-size: 32px;}
.banner-section .carousel-caption h2 { font-size: 47px; font-weight: 700; letter-spacing: .7px; margin: 0 0 30px 0;}
.banner-section .carousel-caption a { display: inline-block; padding: 10px 30px; border: #d1d1d1 1px solid; color: #fff; font-weight: 500;}
.banner-section .carousel-caption a:hover {background: #26a69a;}

.banner-bottom {background: #26a69a;padding: 40px 70px;margin: -60px auto 0 auto;position: relative;z-index: 9;}
.banner-bottom p {color: #0a0a0a;font-size: 24px;font-weight: 600;margin: 0;}
.banner-bottom a {display: inline-block;background: #ffc107;padding: 15px 34px;color: #000000;font-weight: 500;font-size: 17px;}
.banner-bottom a:hover { background: #acacac;}

.service-section { padding: 5% 0;}
.service-section .pic { margin: 20px 0; position: relative;}
.service-section .pic .text {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(29, 29, 29, 0.3);transition: all .3s ease-in-out;}
.service-section .pic .text h4 {text-align: center;color: #fff;font-size: 23px;font-weight: 800;margin-top: 80%;transition: all .3s ease-in-out;}
.service-section .pic .text:hover h4 {margin-top: 48%;}

.about-section { padding: 6% 0; background-image: url(image/about-bg.jpg); background-size: cover; background-attachment: fixed;}
.about-section .content { background: #fff; padding: 50px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.57);}
.about-section .content p { margin: 15px 0 0 0;}
.about-section .content .heading h2 { text-align: left; margin: 0 0 40px 0;}
.about-section .content .heading h2::after {margin: 0;}

.industries-section { padding: 5% 0;}
.industries-section .industries-bx { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 20px 10px; margin: 12px 0; text-align: center; min-height: 210px;}
.industries-section .industries-bx img { width: 90px; transition: all .3s ease-in-out;}
.industries-section .industries-bx h4 {text-align: center;font-size: 17px;margin: 20px 0 0 0;font-weight: 700;color: black;}
.industries-section .industries-bx:hover img {transform: scale(1.1); }
.industries-section .industries-bx:hover { cursor: pointer;}

footer { background: #313131; padding: 5% 0 1% 0;}
footer p, footer p a { color: #d8d8d8;}
footer h4 { color: #fff; margin: 0 0 20px 0; font-weight: 700; border-bottom: 1px solid #fff; padding: 0 0 10px 0;}
footer p a:hover { color: #fff;}

.page-title {background: #26a69a;padding: 4% 0;}
.page-title h2 {color: #0a0a0a;font-weight: 800;font-size: 42px;margin: 0;text-align: left;letter-spacing: .6px;}

.team-page h4, .contact-page h4{ font-size: 21px; font-weight: 700;}

.contact-page .contact-form { padding: 40px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.contact-page .contact-form .form-control { margin: 0 0 15px 0; padding: 12px 16px;}
.contact-page .contact-form input[type=button] { background: #313c43; border: none; padding: 10px 34px; color: #fff; font-weight: 600;}
.contact-page h5 { font-size: 19px; font-weight: 600;}
.contact-page i { color: #15568a; font-size: 23px; margin: 5px 0 0 0;}
.contact-page p a { color: #313131;}

.branch-office { padding:20px 30px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; min-height: 250px;}
.branch-office p i { font-size: 14px; margin: 0 5px 0 0;}

@keyframes zoom {
    from { transform: scale(1,1);}
    to { transform: scale(1.4, 1.4);}
}   

@media (min-width:320px) and (max-width:768px) {
    
    .heading h2 { font-size: 27px; margin: 0 0 20px 0;}
    .sub-heading { font-size: 21px;}
    .heading h2::after { top: 40px;}

    .banner-section .carousel-inner .carousel-item img { animation: zoom 15s; height: 250px; object-fit: cover;}

    .banner-bottom { padding: 30px; margin: -40px auto 0 auto;}
    .banner-bottom p { font-size: 18px; text-align: center; margin: 0 0 20px 0;}
    .banner-bottom a { padding: 12px 24px;}

    .about-section .content { padding: 30px;}
    .about-section .content p { margin: 10px 0 0 0;}

    footer p, footer p a { font-size: 14px;}
    footer h4 { padding: 0 0 10px 0; margin: 20px 0 10px 0;}
    footer p a:hover { color: #fff;}

    .page-title { padding: 6% 0;}
    .page-title h2 { font-size: 27px; margin: 0; letter-spacing: .6px;}

    .team-page h4, .contact-page h4{ font-size: 21px; font-weight: 700;}

    .contact-page .contact-form { padding: 20px;}
    .contact-page .contact-form .form-control {padding: 10px 14px; font-size: 16px;}

    .branch-office { margin: 0 0 20px 0;}

}

.clients-logo { padding: 2% 0;}
.clients-logo .item { display: inline-block; margin: 20px 10px; padding: 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;}

.service-page { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 1% 0; padding: 20px}