@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); 
body { font-family: "DM Sans", serif;}
a { font-family: "DM Sans", serif; text-decoration: none;}
p {font-family: "DM Sans", serif;font-size: 17px;margin: 0 0 12px 0;letter-spacing: .5px;color: #3a3a3a;line-height: 1.5;}
h1, h2, h3, h4, h5, h6 { font-family: "DM Sans", serif;}

.accordion-body li {
    color: #3a3a3a;
    font-size: 17px;
}

button.accordion-button.collapsed {
    font-size: 17px;
    font-weight: bold;
}

.heading { color: #131313; font-size: 37px; font-weight: 700; line-height: 1.3; margin: 0 0 25px 0; position: relative; padding: 10px 0 0 0;}
.heading::after { content: ''; position: absolute; width: 140px; height: 4px; background: #eec029; left: 0; top: 0;}
.sub-heading {color: #131313;text-align: initial;font-size: 22px;margin: 30px 0 10px 0;font-weight: 600;}

header {background: #252525;padding: 10px 0;}
.whatsapp_btn{
    position: fixed;
    bottom: 8em;
    right: 20px;
    width: 55px;
    height: 55px;
    z-index: 9999;
}
.whatsapp_btn .icon_logo{
    position: relative;
    z-index: 100;
    padding: 5px;
}

.whatsapp_btn .icon_logo > a > img{
    width: 100%;
}

.whatsapp_btn .circle_waves{
    border-radius: 50%;
    background-color: #3cc04e;
    width: 55px;
    height: 55px;
    position: absolute;
    opacity: 0;
    bottom: 1px;
    left: 0px;
    z-index: 99;
    animation: waves 4s infinite cubic-bezier(.36, .11, .89, .32);
}

@keyframes waves {
    from {
        transform: scale(.55, .55);
        opacity: .6;
    }
    to {
        transform: scale(1.8, 1.8);
        opacity: 0;
    }
}

.banner-section .carousel-caption { top: 24%; width: 60%; left: 20%;}
.banner-section .carousel-caption h1 { font-size: 42px; text-transform: uppercase; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 20px 0;}
.banner-section .carousel-caption p {color: #fff;font-size: 22px;}
.banner-section .carousel-caption a { display: inline-block; background: #eec029; padding: 14px 34px; color: #252525; font-size: 17px; font-weight: 500; border-radius: 10px;}

.service-section { background: rgba(37, 37, 37, .1); padding: 5% 0;}
.service-section .ser-card { border-radius: 10px; padding: 40px 30px; margin: 10px 0; transition: all .3s ease-in-out;}
.service-section .ser-card:hover { background: #fff;}
.service-section .ser-card .icon {background: #fff; border-radius: 50%; padding: 20px; width: 120px; height: 120px; box-shadow:0px 10px 20px 0px rgba(0,0,0,0.085); display: inline-block;}
.service-section .ser-card h5 { color: #131313; font-size: 24px; font-weight: 600; margin: 35px 0 15px 0;}
.service-section .ser-card a { color: #131313; font-size: 17px; font-weight: 500; transition: all .2s ease-in-out;}
.service-section .ser-card a:hover { letter-spacing: 1.5px;}
.service-section .ser-card a i { font-size: 11px;}

.about-section { padding: 7% 0;}
.about-section .about {margin: 30px 0 0 0;background: #252525;padding: 20px;border-radius: 10px;}
.about-section .about h4 {color: #fff;font-size: 24px;font-weight: 600;margin: 0;}
.about-section .about p {color: #e2e2e2;margin: 0;font-size: 14px;}
.about-section .about img {width: 80%;}
.about-section .about-pic { position: relative;}
.about-section .about-pic::after {content: '';position: absolute;width: 250px;height: 300px;background-image: radial-gradient(#eec029 2px, transparent 2.2px);background-size: 18px 18px;left: 8%;top: 8%;animation: bounce-y 5s infinite;}
.about-section .about-pic .pic1 img { width: 65%; position: relative; z-index: 2;} 
.about-section .about-pic .pic2 img { width: 50%; position: absolute; bottom: -40px; left: 20px; border: 10px solid #fff; z-index: 2;}

.service-section1 {background: rgba(37, 37, 37, .1); padding: 8% 0;}
.service-section1 .heading { margin: 0 0 14px 0;}
.service-section1 .heading::after { left: 0; right: 0; margin: 0 auto;}
.service-section1 .ser-card1 { background: #fff; border-radius: 10px; margin: 35px 0 0 0;}
.service-section1 .ser-card1 img { border-radius: 10px 10px 0 0;}
.service-section1 .ser-card1 .text { padding: 30px;}
.service-section1 .ser-card1 .text h4 { color: #131313; font-size: 21px; font-weight: 700; margin: 0 0 10px 0;}
.service-section1 .ser-card1 .text p {font-size: 16px;letter-spacing: .2px;margin: 0 0 20px 0;}
.service-section1 .ser-card1 .text a { display: inline-block; background: #eec029; padding: 10px 27px; color: #252525; font-size: 15px; font-weight: 500; border-radius: 7px;}

footer { background: #252525; padding: 7% 0 0 0;}
footer p, footer p a { color: #dbdbdb; margin: 0 0 8px 0; font-size: 15px; letter-spacing: .2px;}
footer p a:hover { color: #eec029;}
footer h4 { color: #fff; margin: 0 0 20px 0; font-size: 22px; font-weight: 600;}
footer .footer-bottom { margin: 5% 0 0 0; padding: 15px 0; border-top: 1px solid rgba( 255, 255, 255, .2);}
footer .footer-bottom p { margin: 0;}

.inner-banner { background-image: url('image/inner-banner.jpg'); background-size: cover; padding: 10% 0;}
.inner-banner h2 { color: #fff; font-size: 45px; font-weight: 700; margin: 0 0 25px 0; position: relative; text-align: center; letter-spacing: 1px;}
.inner-banner h2::after { content: ''; position: absolute; width: 70px; height: 2px; background: #eec029; left: 0; top: -10px; right: 0; margin: 0 auto;}
.inner-banner p {color: #fff;text-align: center !important;!i;!;font-size: 20px;}

.contact-page {padding: 7% 0;}
.contact-page .contact-info h5 {color: #131313; font-size: 19px;font-weight: 600;text-align: left;}
.contact-page .contact-info p a { color: #383838;}
.contact-page .contact-form { border-left: 1px solid #ddd;}
.contact-page .contact-form .form-control { padding: 14px; margin: 0 0 15px 0; border-color: #cfcfcf; font-size: 14px;}
.contact-page .contact-form input[type='button'] {background: #131313; color: #fff;font-size: 16px;}
.contact-page .contact-form input[type='button']:hover { background: #111111;}

@keyframes bounce-y{
    0% { transform: translateY(0);}
    50% {transform: translateY(-50px);}
    100% { transform: translateY(0);}
}

@media (min-width: 320px) and (max-width: 768px) {
    p { font-size: 16px; margin: 0 0 12px 0;}

    .heading { font-size: 24px;}
    .heading::after { width: 80px; height: 2px;}
    .sub-heading { font-size: 18px;}
    
    .service-section .ser-card { padding: 20px;}
    .service-section .ser-card .icon { padding: 15px; width: 90px; height: 90px;}
    .service-section .ser-card h5 { font-size: 24px; margin: 25px 0 10px 0;}
    .service-section .ser-card a { font-size: 17px; font-weight: 500; transition: all .2s ease-in-out;}
    .service-section .ser-card a:hover { letter-spacing: 1.5px;}
    .service-section .ser-card a i { font-size: 11px;}

    .about-section { padding: 7% 0;}
    .about-section .about {margin: 30px 0 0 0;background: #252525;padding: 20px;border-radius: 10px;}
    .about-section .about h4 {color: #fff;font-size: 24px;font-weight: 600;margin: 0;}
    .about-section .about p {color: #e2e2e2;margin: 0;font-size: 14px;}
    .about-section .about img {width: 80%;}
    .about-section .about-pic { position: relative;}
    .about-section .about-pic::after {content: '';position: absolute;width: 250px;height: 300px;background-image: radial-gradient(#eec029 2px, transparent 2.2px);background-size: 18px 18px;left: 8%;top: 8%;animation: bounce-y 5s infinite;}
    .about-section .about-pic .pic1 img { width: 65%; position: relative; z-index: 2;} 
    .about-section .about-pic .pic2 img { width: 50%; position: absolute; bottom: -40px; left: 20px; border: 10px solid #fff; z-index: 2;}

    .service-section1 {background: rgba(37, 37, 37, .1); padding: 8% 0;}
    .service-section1 .heading { margin: 0 0 14px 0;}
    .service-section1 .heading::after { left: 0; right: 0; margin: 0 auto;}
    .service-section1 .ser-card1 { background: #fff; border-radius: 10px; margin: 35px 0 0 0;}
    .service-section1 .ser-card1 img { border-radius: 10px 10px 0 0;}
    .service-section1 .ser-card1 .text { padding: 30px;}
    .service-section1 .ser-card1 .text h4 { color: #131313; font-size: 21px; font-weight: 700; margin: 0 0 10px 0;}
    .service-section1 .ser-card1 .text p {font-size: 16px; letter-spacing: 0; margin: 0 0 20px 0;}
    .service-section1 .ser-card1 .text a { display: inline-block; background: #eec029; padding: 10px 27px; color: #252525; font-size: 15px; font-weight: 500; border-radius: 7px;}

    footer { background: #252525; padding: 7% 0 0 0;}
    footer p, footer p a { color: #dbdbdb; margin: 0 0 8px 0; font-size: 15px; letter-spacing: .2px;}
    footer p a:hover { color: #eec029;}
    footer h4 { color: #fff; margin: 0 0 20px 0; font-size: 22px; font-weight: 600;}
    footer .footer-bottom { margin: 5% 0 0 0; padding: 15px 0; border-top: 1px solid rgba( 255, 255, 255, .2);}
    footer .footer-bottom p { margin: 0;}

    .inner-banner { background-image: url('image/inner-banner.jpg'); background-size: cover; padding: 10% 0;}
    .inner-banner h2 { color: #fff; font-size: 45px; font-weight: 700; margin: 0 0 25px 0; position: relative; text-align: center; letter-spacing: 1px;}
    .inner-banner h2::after { content: ''; position: absolute; width: 70px; height: 2px; background: #eec029; left: 0; top: -10px; right: 0; margin: 0 auto;}
    .inner-banner p { color: #fff; text-align: center; font-size: 20px;}

    .contact-page {padding: 7% 0;}
    .contact-page .contact-info h5 {color: #131313; font-size: 19px;font-weight: 600;text-align: left;}
    .contact-page .contact-info p a { color: #383838;}
    .contact-page .contact-form { border-left: 1px solid #ddd;}
    .contact-page .contact-form .form-control { padding: 14px; margin: 0 0 15px 0; border-color: #cfcfcf; font-size: 14px;}
    .contact-page .contact-form input[type='button'] {background: #131313; color: #fff;font-size: 16px;}
    .contact-page .contact-form input[type='button']:hover { background: #111111;}

}