@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; line-height: 1.7; letter-spacing: .5px;}
.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 { color: #f77575; font-size: 18px; margin: 4px 5px 0 0;}
.heading {font-size: 30px;margin: 0 0 20px 0;font-weight: 600;position: relative;color: #212121;text-align: left;}
.heading::after { content: ''; position: absolute; width: 60px; height: 2px; background: #f77575; top: 30px; margin-left: 10px;}
.sub-heading {font-size: 24px;margin: 0 0 15px 0;font-weight: 600;position: relative;/* display: inline-block; */text-align: left;color: #212121;}
.sub-heading::after { content: ''; position: absolute; width: 60px; height: 2px; background: #f77575; top: 24px; margin-left: 10px;}
.custom-btn{display: inline-block;background: #fff;color: #ef7c14;padding: 12px 42px;border-radius: 30px;font-weight: 500;font-size: 15px;} 
.top-nav {
    background: #f5f5f5;
    color: #000;
    /* border-bottom:1px solid #000; */
}
.top-nav a{color: #000;text-decoration:none;}
.top-nav-lft ul{list-style:none; padding-left:0;     margin-bottom: 0;   margin: 0;}
.top-nav-lft ul li{display:inline-block;margin-right:20px;color: #000;}
.top-nav-lft ul li .fa{
    margin-right:5px;
    color: #ef7c14;
    font-size: 16px;
    text-align: center;
    /* background: #0b2322; */
    padding: 11px 15px;
    }

.top-nav-rht ul{list-style:none; padding-left:0; text-align:right;     margin-bottom: 0;     margin: 1px;}
.top-nav-rht ul li{display:inline-block;margin-left:-1px;position:relative;/* background: #0b2322; */}
.top-nav-rht ul li .fa{text-align: center; padding: 12px 15px; transition:0.5s; z-index:9; position:relative;}
	
.top-nav-rht ul li:before{/* position:absolute; *//* top:-40px; *//* left:0; *//* background:#006aa0; *//* width:100%; *//* height:100%; *//* transition:0.5s; *//* content:""; *//* border:1px solid #ccc; *//* color:#fff; *//* opacity:.3; */}
	
.top-nav-rht ul li:hover:before{background:#006aa0; transition:0.5s; top:0;}
.top-nav-rht ul li:hover .fa{color:#006aa0;}

.top-nav-lft{float:left}
.top-nav-rht{float:right}
.top-header {background: #fff;/* position: absolute; */z-index: 3;/* width: 100%; */height: 90px;padding: 12px 0;}
.top-header .right-icon a{display: inline-block;color: #ef7c14;background: #fff;width: 30px;height: 30px;border-radius: 50%;text-align: center;line-height: 2;margin: 0 0 0 3px;font-size: 14px;}

.banner-section .carousel-control-next, .banner-section .carousel-control-prev {width: 40px;height: 40px;border: 1px solid #fff;border-radius: 50%;top: 53%;padding: 5px;opacity: .7;}
.banner-section .carousel-control-prev { left: 3%;}
.banner-section .carousel-control-next { right: 3%;}
.banner-section .carousel-caption {text-align: left;top: 45%;left: 10%;width: 60%;}
.banner-section .carousel-caption h1 { font-size: 42px; text-transform: uppercase; margin: 0 0 20px 0; font-weight: 700; text-shadow: 3px 3px 3px #131313;}
.banner-section .carousel-caption .custom-btn {text-transform: uppercase;color: #ef7c14;font-size: 16px;}

.call-to-action { background: #ef7c14; padding: 4% 0;}
.call-to-action p { color: #fff; margin: 0; font-size: 30px; font-weight: 500; letter-spacing: .4px;}
.call-to-action a { display: inline-block; background: #fff; color: #ef7c14; padding: 12px 42px; border-radius: 30px; font-weight: 500; font-size: 18px;}

.about-section { padding: 5% 0;}
.about-section img { border-radius: 10px}
.about-section ul li, .about-section ul { list-style-type: none; margin: 0; padding: 0;}
.about-section ul li { font-size: 15px; margin: 0 0 4px 0; color: #121212; line-height: 1.7; letter-spacing: .5px; display: flex;}
.about-section ul li i { color: #f77575; font-size: 18px; margin: 4px 5px 0 0;}

.service-section { padding:5% 0 6% 0;}
.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 #f77575; transition: all .4s ease-in-out;}  
.ser-card p { margin: 0; padding: 12px 0; font-size: 16px; font-weight: 600; letter-spacing: 0; position: relative;}
.ser-card p::after { content: ''; position: absolute; width: 15%; height: 2.5px; 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: #f77575;}

.project-section { background: #ef7c14; padding: 6% 0 8% 0;}
.project-section .project-card {position: relative;margin: 30px 0 0 0;overflow: hidden;border-radius: 10px;}
.project-section .project-card .text { position: absolute; width: 100%; height: 100%; bottom: 100%; left: 0; background: rgba(247, 117, 117, .8); transition: all .4s ease-in-out;} 
.project-section .project-card .text p { color: #0c0c0c; font-size: 18px; text-align: center; margin: 0 0 5px 0;}
.project-section .project-card .text a { color: #0c0c0c; text-align: center; border-bottom: 1px solid #0c0c0c;}
.project-section .project-card .project-name {top: 50%; left: 50%; position: absolute; width: 100%; transform: translate(-50%, -50%);} 
.project-section .project-card:hover .text{ bottom: 0;}

.client-section { padding: 5% 0;}
.client-section .item { display: inline-block; margin:10px 0;}

footer {background: #363b5e;padding: 5% 0 0 0;}
footer p, footer p a { color: #8f8f8f; margin: 0 0 8px 0;}
footer p a:hover { color: #f77575;}
footer p i {color: #ef7c14;margin: 5px 5px 0 0;}
footer h4 { color: #fff; font-size: 20px; margin: 20px 0; font-weight: 700; position: relative;}
footer h4::after {content: '';position: absolute;width: 50px;height: 2px;background: #ef7c14;top: 20px;margin-left: 10px;}
footer .social-icon a { display: inline-block; color: #f77575; width: 35px; height: 35px; border: 1px solid #fff; border-radius: 50%; margin: 0 5px 0 0; color: #fff; text-align: center; line-height: 2.2; font-size: 14px;}
footer .social-icon a:hover { color: #f77575; border-color: #f77575;}
footer .footer-bottom { margin: 4% 0 0 0; border-top: 1px solid #666666; padding: 12px 0;}
footer .footer-bottom p  {font-size: 14px; margin: 0;}

.inner-banner { background-image: url(image/inner-banner.jpg); background-size: cover; padding: 18% 0 7% 0;}
.inner-banner h2 { color: #fff; text-align: left; font-size: 40px; margin: 0; font-weight: 800;}

.contact-page .contact-form .form-control{ padding: 12px; margin: 0 0 20px 0;}
.contact-page .contact-form input[type="button"] { background: #ef7c14; color: #fff; padding: 10px 34px; border: 0; border-radius: 5px;} 

.contact-page .contact-info { background: #ef7c14; padding: 30px; display: flex; margin: 12px 0;}
.contact-page .contact-info i { color: #fff; font-size: 30px; margin: 0 20px 0 0;}
.contact-page .contact-info h5 {text-align: left;color: #ffffff;margin: 0 0 10px 0;font-size: 18px;letter-spacing: .5px;}
.contact-page .contact-info p, .contact-page .contact-info p a {color: #ffffff;margin: 0;font-size: 14px;}

.team-card img{ width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 0 15px 0;}
.team-card h4 { color: #ef7c14; font-size: 21px; font-weight: 700; margin: 0 0 7px 0;}
.team-card h5 { color: #f77575; font-size: 18px; font-weight: 700; margin: 0 0 40px 0;}

.services-page { padding: 6% 0;}
.services-page .nav-pills .nav-link {background: #d3d3d3;border-radius: 0;margin: 0 0 4px 0;padding: 20px;color: #2f2f2f !important;border-left: 4px solid #f77575;text-align: left;color: #ef7c14;font-size: 17px;font-weight: 700;} 
.services-page .nav-pills .nav-link.active {background: #ef7c14;color: #FFF !important;}
.services-page .nav-pills .nav-link:hover {background: #ef7c14;color: #fff !important;}
.services-page .key-function { margin: 15px 0;}
.services-page .key-function h4 {text-align: left;color: #f77575;font-size: 19px;font-weight: 700;margin: 5px 0 0 0;line-height: 1.3;}
.services-page .key-function .icon { background: #ef7c14; padding: 10px; border-radius: 50%; float: left; margin: 0 15px 0 0;}
.services-page .key-function .icon img { width: 35px;}
.services-page .icon i {background: #ffaeae;color: #ef7c14;width: 25px;height: 25px;text-align: center;line-height: 1.8;border-radius: 50%;margin: 5px 15px 0 0;}
.services-page .contact-bx { background: #f77575; padding: 30px; position: relative; margin: 30px 0 0 0;}
.services-page .contact-bx:after { content: ""; position: absolute; bottom: -18px; right: 15px; width: 0; height: 10px !important; border-left: 18px solid transparent;  border-right: 18px solid transparent; border-top: 18px solid #f77575; }
.services-page .contact-bx .sub-heading { color: #ef7c14; margin: 0 0 30px 0;}
.services-page .contact-bx .sub-heading::after { background: #131313;}
.services-page .contact-bx p i{ background: rgba(255, 255, 255, .8); font-size: 14px; display: inline-block; width: 30px; height: 30px; margin: 0 10px 0 0; color: #ef7c14; text-align: center; line-height: 2; border-radius: 50%;}
.services-page .contact-bx p a{ color: #131313; font-weight: 700; }
.services-page .text { font-size: 15px; margin: 0 0 10px 0; color: #121212; line-height: 1.7; letter-spacing: .5px; text-align: left}

.project-page .project-card {border: 1px solid #b8b8b8;margin: 25px 0 0 0;min-height: 370px;}
.project-page .project-card .text {padding: 20px 20px 5px 20px;}
.project-page .project-card .text h4 {text-align: left;color: #ef7c14;font-size: 18px;font-weight: 700;margin: 0 0 15px 0;border-bottom: 1px solid #cacaca;}
.project-page .project-card .text p { margin: 8px 0 0 0;}

.Category-card {border: 1px solid #f1f1f1; background: #cecece; text-align: center; margin: 25px 0 0 0; padding: 20px;}
.Category-card h4 { color: #ef7c14; font-size: 18px; font-weight: 600; margin: 0; padding: 15px 0 0 0;}

.project-page .nav-tabs .nav-link {color: #1f1f1f !important;font-weight: 600;font-size: 15px;padding: 10px 30px;background: #bdbdbd;margin: 0 5px;}
.project-page .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active  {border: 0; background: #f77575;}

.strength { background-image: linear-gradient(100deg, #d9d9d9, #fff);}

@media (min-width: 320px) and (max-width: 768px) { 
    p, .main-table ul li { letter-spacing: 0px;}
    .main-table ul li { letter-spacing: 0;}
    .heading { font-size: 24px;}
    .heading::after { top: 24px;}
    .custom-btn{ padding: 10px 24px; font-size: 14px;} 

    .banner-section .carousel img { height: 320px; object-fit: cover;}
    .banner-section .carousel-control-next, .banner-section .carousel-control-prev { top: 70%;}
   
    .call-to-action { padding: 6% 0;}
    .call-to-action p { font-size: 21px; margin: 0 0 20px 0;}
    .call-to-action a { padding: 10px 30px; font-size: 16px;}

    .inner-banner { background-image: url(image/inner-banner.jpg); background-size: cover; padding: 18% 0 7% 0;}
    .inner-banner h2 { color: #fff; text-align: left; font-size: 24px; margin: 0; font-weight: 800;}

}