@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
body { font-family: "Noto Sans", sans-serif !important; overflow-x: hidden;}
p, h1, h2, h3, h4, h5, h6 {font-family: "Noto Sans", sans-serif !important;}
a { text-decoration: none;}
p, .main-table ul li {font-size: 15px;margin: 0 0 15px 0;color: #121212;font-weight: 400;line-height: 1.7;}
.main-table ul li, .main-table ul { list-style-type: none; margin: 0; padding: 0;}
.main-table ul li { font-size: 15px; margin: 0 0 4px 0; color: #121212; line-height: 1.7; letter-spacing: .5px; display: flex;}
.main-table ul li i {font-size: 17px; margin: 3px 10px 0 0;}
.custom-btn { background: #FDD428; color: #222; display: inline-block; padding: 12px 34px; letter-spacing: .5px; font-size: 14px; font-weight: 500; border-radius: 30px;}
.custom-btn:hover { background: #fff; color: #222;}
.heading { color: #2e2e38; font-size: 42px; font-weight: 700; margin: 0 0 40px 0; position: relative;}
.heading::after { content: ''; position: absolute; background: #2e2e38; width: 100px; height: 3px; left: 0; right: 0; margin: 0 auto; top: 54px; border-radius: 5pxs;}
.product-name { padding: 12px 0; margin: 0; font-size: 20px;}
.sub-heading {color: #2e2e38;font-size: 27px;font-weight: 600;margin: 0 0 20px 0;}

.top-header { background: #2e2e38; padding: 8px 0;}
.top-header a{ color: #c7c7c7; font-size: 14px; margin: 0 0 0 15px;}
.top-header a i { margin: 0 5px 0 0; color: #FDD428;}

header {background: rgba(255, 255, 255, .5);position: absolute;width: 100%;z-index: 9;padding: 10px;backdrop-filter: blur(2px);}

.banner-section .carousel-item img { width: 100%; height: 100vh;}
.banner-section .carousel-caption { top: 40%; left: 20%; right: 20%;}
.banner-section .carousel-caption h1 { font-size: 54px; font-weight: 700; text-shadow: 3px 3px 3px #000;}

.banner-bottom { background: #2e2e38; padding: 5% 0;}
.banner-bottom h4 { color: #fff; font-size: 32px; margin: 0;}

.about-section { padding: 6% 0;}
.about-section .about-text { background: #2e2e38;}
.about-section .about-text p { color: #d6d6d6;}

.ser-card .pic {overflow: hidden;border-radius: 10px;}
.ser-card .pic img { width: 100%; height: 270px; object-fit: cover; filter: brightness(90%); border-bottom: 3px solid #FDD428; transition: all .4s ease-in-out;}  
.ser-card p { margin: 0; padding: 12px 0; font-size: 17px; font-weight: 600; letter-spacing: 0; position: relative;}
.ser-card p a { color: #2e2e38;}
.ser-card p::after { content: ''; position: absolute; width: 15%; height: 2px; background: #929292; left: 0; top: 50px; transition: all .4s ease-in-out;} 
.ser-card:hover .pic img{transform: scale(1.1);filter: brightness(70%);border-radius: 10px;}
.ser-card:hover p::after { width: 100%; background: #FDD428;}

.product-section { padding: 0 0 6% 0;}
 
.contact-section { padding: 6% 0; background: #2e2e38;}
.contact-section .request-call-back { padding: 30px; border: 2px solid #FDD428; border-radius: 10px;}
.contact-section .request-call-back h5 { color: #FDD428; font-weight: 700; font-size: 27px; margin: 0 0 20px 0;}
.contact-section .request-call-back p { color: #fff; margin: 0 0 8px 0;}

.contact-section .contact-form h5 { color: #fff; font-size: 32px; margin: 0 0 10px 0;}
.contact-section .contact-form .form-control { margin: 10px 0; padding: 13px; font-size: 14px; color: #141414;}
.contact-section .contact-form .form-control::placeholder { color: #141414;}
.contact-section .contact-form input[type="button"] { background: #FDD428; border-color: #FDD428; color: #000; font-weight: 500;}

footer {background: #19191f;padding: 5% 0 0 0;margin: -17px 0 0 0;}
footer p a { color: #ddd; font-size: 14px;}
footer p a:hover { color: #FDD428;}
footer .social-icon a i{ display: inline-block; background: #000; width: 30px; height: 30px; border-radius: 5px; font-size: 13px; text-align: center; line-height: 2.4; margin: 0 8px 0 0;}
footer .footer-bottom { margin: 4% 0 0 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .2);}
footer .footer-bottom p { margin: 0; font-size: 14px; color: #ddd;}

.inner-banner {background-image: url('image/inner-banner.jpg');background-size: cover;padding: 14% 0 7% 0;margin: -22px 0 0 0;background-attachment: fixed;} 
.inner-banner h3 {color: #fff;font-size: 42px;text-align: left;font-weight: 700;position: relative;padding: 7px 0 7px 25px;margin: 0;text-transform: uppercase;text-shadow: 2px 2px 2px #222;}
.inner-banner h3::after { content: ''; position: absolute; width: 5px; height: 100%; background: #FDD428; left: 0; top: 0;}

.process-steps { margin: 20px 0;}
.process-steps .icon { background: #2e2e38; position: relative; display: inline-block; width: 80px; height: 80px; padding: 20px; border-radius: 50%; outline: 1px solid #2e2e2e; outline-offset: 3px; margin: 0 0 20px 0;}
.process-steps .icon img { opacity: .8;}
.process-steps .icon .num {position: absolute; top: -10px; left: -10px; background: #FDD428; width: 30px; height: 30px; padding: 3px; border-radius: 50%;}
.process-steps .icon .num p  { font-size: 14px; font-weight: 700;}
.process-steps h5 { color: #19191f; font-size: 19px;}

.contact-info {background: #2e2e38;padding: 25px;margin: 0 0 10px 0;}
.contact-info i { color: #e4e4e4; font-size: 30px;}
.contact-info h5 {color: #fdd428;text-transform: uppercase;font-size: 17px;font-weight: 700;letter-spacing: .5px;}
.contact-info p, .contact-info p a {color: #ececec;margin: 0;font-size: 14px;text-align: left;font-weight: 300;}

@media (min-width: 320px) and (max-width: 768px) {
    .custom-btn { padding: 10px 30px;}
    .heading { font-size: 30px; margin: 0 0 30px 0;}
    .heading::after {top: 38Px;}
    .sub-heading {font-size: 21px;}
    
    .top-header a{ color: #c7c7c7; font-size: 13px; margin: 0 0 0 13px;}

    .banner-section .carousel-item img { height: 240px; object-fit: cover;}
    
    .banner-bottom { padding: 7% 0;}
    .banner-bottom h4 { font-size: 21px; line-height: 30px; margin: 0 0 10px 0;}
  
    .ser-card p { font-size: 14px;}
    .ser-card p::after {top: 40px;} 
     
    .contact-section .request-call-back { padding: 20px;}
    .contact-section .request-call-back h5 { font-size: 21px; margin: 0 0 15px 0;}
    .contact-section .request-call-back p { color: #fff; margin: 0 0 8px 0;}
    
    .contact-section .contact-form h5 { font-size: 21px; margin: 20px 0 10px 0;}
    .contact-section .contact-form .form-control { margin: 5px 0; padding: 10px;}
    
    .inner-banner h3 { font-size: 30px;}
    
}