@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body {margin: 0;padding: 0;font-family: "Inter", sans-serif !important;}
a{ text-decoration: none;}
p { color: #212529; font-size: 16px; margin: 0 0 15px 0; letter-spacing: .3px; font-family: "Inter", sans-serif; line-height: 1.6}
.heading { color: #212529; font-size: 34px; font-weight: 600; padding: 0 0 0 20px; border-left: 5px solid #18a790; margin: 0 0 25px 0;}
.sub-heading { color: #212529; font-size: 27px; padding: 0 0 5px 0; border-bottom: 1px solid #bbbbbb; margin: 0 0 20px 0;}
.custom-btn { display: inline-block; background: linear-gradient(60deg, #18a790, #316db3); color: #fff; padding: 12px 34px;}
.custom-btn:hover { color: #fff; background: linear-gradient(60deg, #316db3,#18a790);}

.banner-section { position: relative;}
.banner-section video{ width: 100%; height: 100vh; object-fit: cover;}
.banner-section .banner-content {width: 100%; height: 99%; position: absolute; background: linear-gradient(60deg, rgba(32, 32, 32, 0.7), rgba(19, 19, 19, 0)); top: 0; left: 0;}
.banner-section .banner-content .text {position: absolute;left: 90px;top: 50%;width: 45%;}
.banner-section .banner-content .text h2 { color: #fff; font-size: 54px; font-weight: 600;}

.about-section { padding: 6% 0; background: #ebebeb;}
.about-section .text { background: #fff; padding: 40px; margin: 10px 0 0 -10px;}
.about-section .text a { color: #18a790; font-size: 16px; transition: all .2s ease-in-out;}
.about-section .text a:hover { letter-spacing: 1.5px;}

.section-2 { padding: 7% 0;}
.section-2 .heading h2 { color: #212529; font-size: 34px; font-weight: 600; margin: 5px 0 20px 0;}
.section-2 .heading p {font-weight: 400;}
.section-2 .card1 { margin: 10px 0 0 0; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 30px; transition: all .3s ease-in-out;}
.section-2 .card1:hover { background: linear-gradient(60deg, #18a790, #316db3); transform: scale(1.07);}
.section-2 .card1:hover h4 { color: #fff; transition: all .1s ease-in-out;}
.section-2 .card1:hover p {color: #fff; transition: all .1s ease-in-out;}
.section-2 .card1:hover img { filter: brightness(0);}
.section-2 .card1 .icon { text-align: center;}
.section-2 .card1 .icon img { width: 80%;}
.section-2 .card1 h4 { color: #18a790; font-size: 22px; font-weight: 500; margin: 0 0 5px 0;}
.section-2 .card1 p { margin: 0; font-size: 14px;}

.section-3 { padding: 4% 0 12% 0; margin: 2% 0 0 0; background-image: url('image/bg-img.jpg'); background-size: cover; }
.section-3 .heading h2 { color: #212529; font-size: 34px; font-weight: 600; margin: 5px 0 20px 0;}
.section-3 .heading p {font-weight: 400;}

.section-4 { padding: 8% 0 3% 0; background: #ebebeb;}
.section-4 .text { background: #fff; padding: 25px; margin: 10px 0 0 -10px;}
.section-4 .text p { font-size: 17px;}

.section-5 { padding: 7% 0; background: #ebebeb; background-size: cover; }
.section-5 .custom-btn { margin: 10px 0 40px 0;}
.section-5 .heading h2 { color: #212529; font-size: 34px; font-weight: 600; margin: 5px 0 20px 0;}
.section-5 .heading p {font-weight: 400;}
.section-5 .ser-card .text, .section-5 .ser-card1 .text { background: #fff; padding: 25px; position: relative;}
.section-5 .ser-card .text::after { content: ''; position: absolute;border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 22px solid #fff;  top: 15px; left: -25px; transform: rotate(-90deg)}
.section-5 .ser-card1 .text::after { content: ''; position: absolute;border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 22px solid #fff;  top: -20px; right: 15px;}
.section-5 .ser-card .text h4, .section-5 .ser-card1 .text h4 {font-size: 24px;font-weight: 600;margin: 0 0 15px 0;color: #212529;}
.section-5 .ser-card .ser-img, .section-5 .ser-card1 .ser-img { overflow: hidden;}
.section-5 .ser-card .ser-img img, .section-5 .ser-card1 .ser-img img { transition: all .4s ease-in-out;}
.section-5 .ser-card1 .ser-img img { height: 250px; object-fit: cover;}
.section-5 .ser-card:hover .ser-img img, .section-5 .ser-card1:hover .ser-img img { transform: scale(1.1);}
.section-5 .ser-card1 .text { height: 315px;}
.section-5 .ser-card .text p, .section-5 .ser-card1 .text p{font-size: 15px;}
.section-5 .ser-card .text a, .section-5 .ser-card1 .text a { color: #18a790; font-size: 16px; transition: all .2s ease-in-out;}
.section-5 .ser-card .text a:hover, .section-5 .ser-card1 .text a:hover { letter-spacing: 1.5px;}

.section-6 { padding: 3% 0 7% 0; background: #ebebeb;}
.section-6 .carousel-control-next, .carousel-control-prev { width: 10%; filter: brightness(10%);}
.section-6 .client { background: #fff; padding: 30px; margin: 20px 0 0 0;}

footer { padding: 6% 0 0 0;}
footer h4 { color: #212529; font-size: 20px; padding: 0 0 0 15px; border-left: 3px solid #18a790; margin: 0 0 27px 0;}
footer p, footer p a { color: #36393b; font-size: 15px; margin: 0 0 8px 0;}
footer .social-icon a { display: inline-block; color: #316db3; font-size: 21px; margin: 0 12px 15px 0;}
footer .footer-bottom { margin: 5% 0 0 0; background: #383838; padding: 12px 0;}
footer .footer-bottom p, footer .footer-bottom p a { margin: 0; color: #ddd; margin: 0;}

.inner-banner { padding: 2% 0 0 0; background-image: url('image/inner-banner.jpg'); background-size: cover;}
.inner-banner p, .inner-banner p a { color: #fff; text-shadow: 2px 2px 2px #212529;}
.inner-banner .bottom-text {margin: 350px 0 0 0;}
.inner-banner h4 {background: rgba(0, 0, 0, 0.5);padding: 40px 40px 40px 60px;color: #fff;font-size: 32px;text-align: left;margin: 0;position: relative;}
.inner-banner h4::after { content: ''; position: absolute; width: 5px; height: 40%; background: #fff; left: 40px; top: 30%;}

.service-page .ser-card { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 30px; margin: 0 0 20px 0; min-height: 325px;}
.service-page .ser-card h3 { color: #212529; font-size: 21px; font-weight: 600; padding: 0 0 0 15px; border-left: 3px solid #18a790; margin: 0 0 25px 0;}
.service-page .ser-card p { font-size: 15px; margin: 0;}

.contact-form { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 40px;}
.contact-form h4 { color: #212529; font-size: 27px; font-weight: 600; padding: 0 0 0 20px; border-left: 3px solid #18a790; margin: 0 0 30px 0;}
.contact-form .form-control{ padding: 14px; margin: 0 0 15px 0;}
.contact-form input[type="button"] { background: linear-gradient(60deg, #18a790, #316db3); color: #fff; padding: 12px 34px; border: 0;}
.contact-page .contact-info { background: linear-gradient(60deg, #18a790, #316db3); padding: 40px;}
.contact-page .contact-info h4 { color: #fff; font-size: 27px; font-weight: 500; padding: 0 0 0 20px; border-left: 3px solid #fff; margin: 0 0 30px 0;}
.contact-page .contact-info p { color: #f1f1f1; font-size: 17px;}

.tm_img{border: 4px solid #18a790;border-radius: 50%;}
.teamsub-head{font-size: 22px;font-weight: 600;}

@media (min-width: 320px) and (max-width: 768px) { 
    p { font-size: 14px;}
    .heading { font-size: 24px; padding: 0 0 0 15px;}
    .sub-heading { font-size: 20px;}
    .custom-btn { padding: 10px 24px; font-size: 14px;}
    
    .banner-section video{ height: 320px;}
    .banner-section .banner-content { height: 98.5%;}
    .banner-section .banner-content .text { left: 20px; top: 74%;width: 95%;}
    .banner-section .banner-content .text h2 { font-size: 27px; font-weight: 600;}

    .about-section .text { padding: 20px; margin:0;}

    .section-2 .heading h2 { font-size: 24px;}
    .section-2 .card1 { margin: 20px 0 0 0;}

    .section-3 { padding: 4% 0 12% 0; margin: 2% 0 0 0; background-image: url('image/bg-img.jpg'); background-size: cover; }
    .section-3 .heading h2 {font-size: 24px;}

    .section-4 .text { margin:0;}
    .section-4 .text p { font-size: 15px;}

    .section-5 .custom-btn { margin: 0 0 20px 0;}
    .section-5 .heading h2 { font-size: 24px;}
    .section-5 .ser-card .text, .section-5 .ser-card1 .text { padding: 20px;}
    .section-5 .ser-card .text::after { border: 0;}
    .section-5 .ser-card .text::before { content: ''; position: absolute;border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 22px solid #fff;  top: -20px; right: 15px;}
    .section-5 .ser-card .text h4, .section-5 .ser-card1 .text h4 { font-size: 21px;}
    .section-5 .ser-card1 .text { height: 300px;}

    .section-6 { padding: 3% 0 7% 0; background: #ebebeb;}
    .section-6 .carousel-control-next, .carousel-control-prev { width: 10%; filter: brightness(10%);}
    .section-6 .client { background: #fff; padding: 30px; margin: 20px 0 0 0;}

    .inner-banner .bottom-text {margin: 100px 0 0 0;}
    .inner-banner h4 { padding: 20px 20px 20px 40px; font-size: 16px; }
    .inner-banner h4::after { width: 3px; left: 20px;}

}