39085-vm/ctlinfrangualr/service.html
2026-03-10 12:34:23 +00:00

762 lines
22 KiB
HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title> CTLENG INFRA </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="56x56" href="images/icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/animate.css" type="text/css" media="all">
<link rel="stylesheet" href="css/animated-text.css" type="text/css" media="all">
<link rel="stylesheet" href="css/all.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/theme-default.css" type="text/css" media="all">
<link rel="stylesheet" href="css/meanmenu.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.transitions.css" type="text/css" media="all">
<link rel="stylesheet" href="css/venobox.css" type="text/css" media="all">
<link rel="stylesheet" href="css/bootstrap-icons.css" type="text/css" media="all">
<link rel="stylesheet" href="css/flaticon.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all">
<link rel="stylesheet" href="css/coustom-animation.css" type="text/css" media="all">
<link rel="stylesheet" href="css/odometer-theme-default.css" type="text/css" media="all">
<link rel="stylesheet" href="css/scroll-up.css" type="text/css" media="all">
<script src="js/modernizr-3.5.0.min.js"></script>
</head>
<style>
.about_area {
background: linear-gradient(#1e222f);
background-size: cover;
background-position: center;
padding: 100px 0;
color: #fff;
text-align: center;
}
.img-modal{
display:none;
position:fixed;
z-index:9999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
justify-content:center;
align-items:center;
}
.modal-img{
max-width:95%;
max-height:90%;
object-fit:contain;
image-rendering:auto;
}
.img-close{
position:absolute;
top:25px;
right:40px;
font-size:45px;
color:#fff;
cursor:pointer;
}
.service-img{
cursor:pointer;
transition:0.3s;
}
.service-img:hover{
transform:scale(1.05);
}
.modal-img{
animation:zoomIn .3s ease;
}
@keyframes zoomIn{
from{
transform:scale(0.7);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}
.owl-dot {
display: none;
}
.progress-container {
width: 100%;
background-color: #e0e0e0;
border-radius: 10px;
}
.progress-bar {
height: 25px;
background-color: #58595B; /* Green */
color: white;
text-align: center;
line-height: 25px;
border-radius: 10px;
}
.nav_scroll li a.active {
color: #E31E24;
font-weight: bold;
}
</style>
<body>
<div class="loading-screen" id="loading-screen">
<span class="bar top-bar"></span>
<span class="bar down-bar"></span>
<div class="animation-preloader">
<div class="spinner"></div>
<div class="txt-loading">
<span data-text-preloader="C" class="letters-loading">C</span>
<span data-text-preloader="T" class="letters-loading">T</span>
<span data-text-preloader="L" class="letters-loading">L</span>
<span data-text-preloader="E" class="letters-loading">E</span>
<span data-text-preloader="N" class="letters-loading">N</span>
<span data-text-preloader="G" class="letters-loading">G</span>
<!-- <span data-text-preloader="I" class="letters-loading">I</span>
<span data-text-preloader="N" class="letters-loading">N</span>
<span data-text-preloader="F" class="letters-loading">F</span>
<span data-text-preloader="R" class="letters-loading">R</span>
<span data-text-preloader="A" class="letters-loading">A</span> -->
</div>
</div>
</div>
<div class="ctl-header-area upper" id="sticky-header" >
<div class="container-fluid">
<div class="row header-top">
<div class="col-xxl-6 col-xl-8 col-lg-8" style="margin-top: 10px;">
<div class="header-top-icon-list">
<ul>
<li><i class="bi bi-telephone"></i>(304)549-3080</li>
<li><i class="bi bi-geo-alt"></i>300 Capital St , Suite 1520</li>
</ul>
</div>
</div>
<div class="col-xxl-6 col-xl-4 col-lg-4">
<div class="header-top-social-icon-list" style="margin-top: 10px;">
<ul>
<div class="ctl_btn1">
<a href="#" style="padding: 7px 21px 7px;">CTLENG <i class="flaticon flaticon-right-arrow"></i></a>
</div>
</ul>
</div>
</div>
</div>
<div class="row header-bottom align-items-center">
<div class="col-lg-3">
<div class="header-logo" >
<a class="active_logo" href="index.html"><img src="images/logo-main.png" alt="logo" ></a>
<a class="logo_two" href="index.html"><img src="images/logo-main.png" alt="logo"></a>
</div>
</div>
<div class="col-lg-9">
<div class="header-menu">
<ul class="nav_scroll">
<li><a href="#">Home </a>
</li>
<li><a href="#">About US <i class="bi bi-chevron-down"></i><span></span></a>
<ul class="sub_menu">
<li><a href="#">Company Overview</a></li>
<li><a href="#">Leadership Team</a></li>
<li><a href="#">Safety & Quality</a></li>
<li><a href="#">Parent Company (CTLEng)</a></li>
</ul>
</li>
<li><a href="#" class="active">Services <i class="bi bi-chevron-down"></i> <span></span></a>
<ul class="sub_menu">
<li><a href="#">Slip & Slide Repair </a></li>
<li><a href="#">Drainage Infrastructure</a></li>
<li><a href="#">Emergency Response</a></li>
<li><a href="#">Geotechnical Services</a></li>
<li><a href="#">Preventive Maintenance</a></li>
</ul></li>
<!-- <li><a href="#">Projects <i class="bi bi-chevron-down"></i><span></span></a>
<ul class="sub_menu">
<li><a href="#">Project Gallery</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Capabilities Statement</a></li>
</ul>
</li> -->
<li><a href="#">Resources <i class="bi bi-chevron-down"></i> <span></span></a>
<ul class="sub_menu">
<li><a href="#">Technical Information </a></li>
<li><a href="#">Equipment Fleet</a></li>
<li><a href="#">Industry Links</a></li>
</ul>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact us <i class="bi bi-chevron-down"></i> <span></span></a>
<ul class="sub_menu">
<!-- <li><a href="#">Emergency Response </a></li> -->
<li><a href="#">Project Inquiries</a></li>
<li><a href="#">General Contact</a></li>
</ul>
</li>
</ul>
<!-- <div class="header_right">
<div class="header-button ctl_btn">
<a href="#">Emergency Response <i class="bi bi-arrow-right"></i> <span></span></a>
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="mobile-menu-area sticky d-sm-block d-md-block d-lg-none">
<div class="mobile-menu">
<nav class="header-menu">
<ul class="nav_scroll">
<li><a href="#">Home <span></span></a>
</li>
<li><a href="#"><i class="bi bi-chevron-down"></i> About Us <span></span></a>
<ul class="sub_menu">
<li><a href="#">Company Overview</a></li>
<li><a href="#">Leadership Team</a></li>
<li><a href="#">Safety & Quality</a></li>
<li><a href="#">Parent Company (CTLEng)</a></li>
</ul>
</li>
<li><a href="#">Services <i class="bi bi-chevron-down"></i> <span></span></a>
<ul class="sub_menu">
<li><a href="#">Slip & Slide Repair </a></li>
<li><a href="#">Drainage Infrastructure</a></li>
<li><a href="#">Emergency Response</a></li>
<li><a href="#">Geotechnical Services</a></li>
<li><a href="#">Preventive Maintenance</a></li>
</ul>
<!-- <li><a href="#">Projects <i class="bi bi-chevron-down"></i><span></span></a>
<ul class="sub_menu">
<li><a href="#">Project Gallery</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Capabilities Statement</a></li>
</ul>
</li> -->
<li><a href="#">Resources <i class="bi bi-chevron-down"></i> <span></span></a>
<ul class="sub_menu">
<li><a href="#">Technical Information </a></li>
<li><a href="#">Equipment Fleet</a></li>
<li><a href="#">Industry Links</a></li>
</ul>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us <i class="bi bi-chevron-down"></i> <span></span></a>
<ul class="sub_menu">
<!-- <li><a href="#">Emergency Response </a></li> -->
<li><a href="#">Project Inquiries</a></li>
<li><a href="#">General Contact</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="hero-slider owl-carousel">
<section class="hero_area style_two style_two d-flex align-items-center" >
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<!-- hero content -->
<div class="hero_content style_two text-center">
<h1 data-animation="fadeInUp" data-delay="100ms">Slip & Slide Repair</h1><br>
<!-- <p class="hero-des" data-animation="fadeInUp" data-delay="100ms">Specialized geotechnical construction services backed by nearly 100 years of CTL Engineering expertise.</p> -->
<!-- slider button -->
<div class="hero_button" data-animation="fadeInUp" data-delay="100ms">
</div>
</div>
</div>
<!-- <div class="col-lg-4">
</div> -->
</div>
</div>
</section>
<section class="hero_area style_two style_three d-flex align-items-center">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<!-- hero content -->
<div class="hero_content style_two text-center">
<h1 data-animation="fadeInUp" data-delay="100ms">Drainage Infrastructure</h1>
<!-- <p class="hero-des" data-animation="fadeInUp" data-delay="100ms">Specialized geotechnical construction services backed by nearly 100 years of CTL Engineering expertise.</p> -->
<!-- slider button -->
<div class="hero_button" data-animation="fadeInUp" data-delay="100ms">
</div>
</div>
</div>
<!-- <div class="col-lg-4">
</div> -->
</div>
</div>
</section>
<section class="hero_area style_two style_four d-flex align-items-center">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<!-- hero content -->
<div class="hero_content style_two text-center">
<h1 data-animation="fadeInUp" data-delay="100ms">Emergency Response</h1><br>
<!-- <p class="hero-des" data-animation="fadeInUp" data-delay="100ms">Specialized geotechnical construction services backed by nearly 100 years of CTL Engineering expertise</p> -->
<!-- slider button -->
<div class="hero_button" data-animation="fadeInUp" data-delay="100ms">
</div>
</div>
</div>
<!-- <div class="col-lg-4">
</div> -->
</div>
</div>
</section>
</div>
<section class="service_area">
<div class="container" style="max-width:16">
<div class="row">
<div class="col-lg-12">
<div class="section_title text-center">
<h4>our services</h4>
<h1>Our Awesome Services</h1>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single_service_box">
<div class="service_thumb">
<img src="images/sliderepair.jpg"
data-large="images/sssl.jpg"
class="service-img">
<!-- <div class="service_icon">
<img src="images/service-icon.png" alt="service-icon">
</div> -->
</div>
<div class="service_content">
<h3 class="service_title">Slip & Slide Repair</h3>
<p class="service_des">High quality and experienced crews provide geostabilization through piling, micro-piling, and soil nail construction.</p>
<div class="ctl_btn">
<a href="#">Read More <i class="flaticon flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single_service_box">
<div class="service_thumb">
<img src="images/drianage.jpg" alt="service-thumb" class="service-img">
<!-- <div class="service_icon">
<img src="images/service-icon2.png" alt="service-icon">
</div> -->
</div>
<div class="service_content">
<h3 class="service_title">Drainage Infrastructure</h3>
<p class="service_des">Removal and installation of water systems in an ever-changing environment that requires performance and expertise.</p>
<div class="ctl_btn">
<a href="#">Read More <i class="flaticon flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single_service_box">
<div class="service_thumb">
<img src="images/service1.jpg"
data-large="images/sssl.jpg"
class="service-img">
<!-- <div class="service_icon">
<img src="images/service-icon3.png" alt="service-icon">
</div> -->
</div>
<div class="service_content">
<h3 class="service_title">Emergency Response</h3>
<p class="service_des">Local to West Virginia, CTL Infrastructure Solutions provides knowledge and native understanding of regional topography.</p>
<div class="ctl_btn">
<a href="#">Read More <i class="flaticon flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single_service_box">
<div class="service_thumb">
<img src="images/geotechnical.png"
data-large="images/sssl.jpg"
class="service-img">
<!-- <div class="service_icon">
<img src="images/service-icon3.png" alt="service-icon">
</div> -->
</div>
<div class="service_content">
<h3 class="service_title" style="line-height: 41px;">Geotechnical Support Services</h3>
<p class="service_des">Local to West Virginia, CTL Infrastructure Solutions provides knowledge and native understanding of regional topography.</p>
<div class="ctl_btn">
<a href="#">Read More <i class="flaticon flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single_service_box">
<div class="service_thumb">
<img src="images/prevent.jpeg"
data-large="images/sssl.jpg"
class="service-img">
<!-- <div class="service_icon">
<img src="images/service-icon3.png" alt="service-icon">
</div> -->
</div>
<div class="service_content">
<h3 class="service_title" style="line-height: 41px;">Preventive Maintenance Programs</h3>
<p class="service_des">Local to West Virginia, CTL Infrastructure Solutions provides knowledge and native understanding of regional topography.</p>
<div class="ctl_btn">
<a href="#">Read More <i class="flaticon flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="about_area">
<div class="container">
<div class="section_title text-center">
<div style="display:inline-block;">
<!-- <h4>About Us</h4> -->
<h1 style="color:#fff; margin:0;">Technology & Innovation:</h1>
<hr style="border:none; height:2px; background:#fff; border-radius:5px; margin:5px 0 0 0; opacity: 1;">
</div>
<p style="font-size:20px;color:#fff;">Our employee owners are our most valuable resource and it is our core responsibility to ensure their health and safety.
CTL Infra also understands that safe work practices are the key to a successful project and a successful company.</p>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<p style="font-size:20px; color:#fff; text-align:left;text-indent: 20px;">
<i class="bi bi-chevron-double-right"></i>&nbsp;&nbsp;Advanced geotechnical analysis software
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p style="font-size:20px; color:#fff; text-align:left;text-indent: 20px;">
<i class="bi bi-chevron-double-right"></i>&nbsp;&nbsp;Drone surveying for slope assessment
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p style="font-size:20px; color:#fff; text-align:left;text-indent: 20px;">
<i class="bi bi-chevron-double-right"></i>&nbsp;&nbsp;GPS monitoring systems
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p style="font-size:20px; color:#fff; text-align:left;text-indent: 20px;">
<i class="bi bi-chevron-double-right"></i>&nbsp;&nbsp;Geophysical investigations (GPR, resistivity, seismic)
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p style="font-size:20px; color:#fff; text-align:left;text-indent: 20px;">
<i class="bi bi-chevron-double-right"></i>&nbsp;&nbsp;Sustainable drainage solutions
</p>
</div>
</div>
</div>
</div>
</section>
<section class="footer_area boxed">
<div class="container" style="max-width: 1500px;">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-6">
<div class="footer-widget-contact">
<div class="footer_logo">
<a href="#"><img src="images/ffflogo.png" alt="footer-logo"style="width:300px;"></a>
</div>
<p>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="footer-widget-content">
<div class="footer-widget-title">
<h4>Our Services</h4>
</div>
<div class="footer-widget-menu">
<ul>
<li><a href="#"><i class="bi bi-chevron-double-right"></i>Slip & Slide Repair</a></li>
<li><a href="#"><i class="bi bi-chevron-double-right"></i>Drainage Infrastructure</a></li>
<li><a href="#"><i class="bi bi-chevron-double-right"></i>Emergency Response</a></li>
<li><a href="#"><i class="bi bi-chevron-double-right"></i>Geotechnical Services</a></li>
<li><a href="#"><i class="bi bi-chevron-double-right"></i>Preventive Maintenance</a></li>
</ul>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6">
<div class="footer-widget-content">
<div class="footer-widget-title">
<h4>Quick Links</h4>
</div>
<div class="footer-widget-menu">
<ul>
<li><a href="#"><i class="bi bi-chevron-double-right"></i>About US</a></li>
<!-- <li><a href="#"><i class="bi bi-chevron-double-right"></i>Projects</a></li> -->
<li><a href="#"><i class="bi bi-chevron-double-right"></i>Privacy Polocy</a></li>
<li><a href="#"><i class="bi bi-chevron-double-right"></i>CTLENG</a></li>
<li><a href="#"><i class="bi bi-chevron-double-right"></i>Sit Map</a></li>
</ul>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="footer-widget-title">
<h4>Contact Info</h4>
</div>
<div class="footer_from">
<p class="footer_desc2">
300 Capital St , Suite 1520
Charleston, West Virginia</br>
<i class="bi bi-telephone-fill"></i>&nbsp; <a href="#" style="color:#fff;">+1 (304)549-3080</a></br>
<i class="bi bi-envelope-fill"></i>&nbsp; <a href="#" style="color:#fff;">jwriston@ctleng.com</a>
</p>
</div>
<div class="footer_social_icon">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</div>
<div class="row add-border align-items-center">
<div class="col-md-12">
<div class="footer-bottom-content">
<div class="footer-bottom-content-copy">
<p>Copyright @ 2026 CTLENG. All Rights Reserved</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="prgoress_indicator active-progress">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 212.78;"></path>
</svg>
</div>
<script src="js/jquery-3.6.2.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/venobox.js"></script>
<script src="js/animated-text.js"></script>
<script src="js/venobox.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/jquery.meanmenu.js"></script>
<script src="js/jquery.scrollUp.js"></script>
<script src="js/jquery.barfiller.js"></script>
<script src="js/theme.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
const modal = document.getElementById("imgModal");
const modalImg = document.getElementById("modalImage");
const images = document.querySelectorAll(".service-img");
const closeBtn = document.querySelector(".img-close");
images.forEach(function(img){
img.addEventListener("click", function(){
modal.style.display = "flex";
modalImg.src = this.getAttribute("data-large") || this.src;
});
});
closeBtn.addEventListener("click", function(){
modal.style.display = "none";
});
});
</script>
<div id="imgModal" class="img-modal">
<span class="img-close">&times;</span>
<img class="modal-img" id="modalImage">
</div>
</body>
</html>