<!DOCTYPE html>
<html lang="es-MX">
	<head>

		<!-- Basic -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Bienvenido | Ferreteria Panal</title>	

		<meta name="keywords" content="WebSite Template" />
		<meta name="description" content="Porto - Multipurpose Website Template">
		<meta name="author" content="okler.net">

		<!-- Favicon -->
		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">

		<!-- Mobile Metas -->
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">

		<!-- Web Fonts  -->
		<link id="googleFonts" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap" rel="stylesheet" type="text/css">

		<!-- Vendor CSS -->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css">
		<link rel="stylesheet" href="vendor/animate/animate.compat.css">
		<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css">
		<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
		<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
		<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css">
		<link rel="stylesheet" href="vendor/bootstrap-star-rating/css/star-rating.min.css">
		<link rel="stylesheet" href="vendor/bootstrap-star-rating/themes/krajee-fas/theme.min.css">

		<!-- Theme CSS -->
		<link rel="stylesheet" href="css/theme.css">
		<link rel="stylesheet" href="css/theme-elements.css">
		<link rel="stylesheet" href="css/theme-blog.css">
		<link rel="stylesheet" href="css/theme-shop.css">

		<!-- Demo CSS -->
		<link rel="stylesheet" href="css/demos/demo-auto-services.css">

		<!-- Skin CSS -->
		<link id="skinCSS" rel="stylesheet" href="css/skins/skin-auto-services.css">

		<!-- Theme Custom CSS -->
		<link rel="stylesheet" href="css/custom.css">
		
		<!-- plugins -->
		<link rel="stylesheet" href="shisan/plugins/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
		<link rel="stylesheet" href="shisan/plugins/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">

		

	</head>
	<body>

		<div class="body">
			<!-- <div class="notice-top-bar bg-primary" data-sticky-start-at="100">
				<button class="hamburguer-btn hamburguer-btn-light notice-top-bar-close m-0 active" data-set-active="false">
					<span class="close">
						<span></span>
						<span></span>
					</span>
				</button>
				<div class="container">
					<div class="row justify-content-center py-2">
						<div class="col-9 col-md-12 text-center">
							<p class="text-color-light mb-0"><strong>DEAL OF THE WEEK</strong> - Free Diagnosis & Break Checks - <strong><a href="#" class="text-color-light text-decoration-none custom-text-underline-1">Make an Appointment</a></strong></p>
						</div>
					</div>
				</div>
			</div> -->
			<header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyStartAt': 54, 'stickySetTop': '-54px', 'stickyChangeLogo': false}">
				<div class="header-body header-body-bottom-border-fixed box-shadow-none border-top-0">
					<div class="header-top header-top-small-minheight header-top-simple-border-bottom">
						<div class="container py-2">
							<div class="header-row justify-content-between">
								<div class="header-column col-auto px-0">
									<div class="header-row">
										<div class="header-nav-top">
											<ul class="nav nav-pills position-relative">
												<li class="nav-item d-none d-sm-block">
													<span class="d-flex align-items-center font-weight-medium ws-nowrap text-3 ps-0"><a href="mailto:porto@domain.com" class="text-decoration-none text-color-dark text-color-hover-primary"><i class="icons icon-envelope font-weight-bold position-relative text-4 top-3 me-1"></i> mmartinez@ferreteriapanal.com.mx</a></span>
												</li>
												<li class="nav-item nav-item-left-border nav-item-left-border-remove nav-item-left-border-sm-show">
													<span class="d-flex align-items-center font-weight-medium text-color-dark ws-nowrap text-3"><i class="icons icon-clock font-weight-bold position-relative text-3 top-1 me-2"></i> Lun - Sab 8:00am - 8:00pm</span>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="header-column justify-content-end col-auto px-0 d-none d-md-flex">
									<div class="header-row">
										<nav class="header-nav-top">
											<ul class="header-social-icons social-icons social-icons-clean social-icons-icon-gray social-icons-medium custom-social-icons-divider">
												<li class="social-icons-facebook">
													<a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
												</li>
												<li class="social-icons-x">
													<a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a>
												</li>
												<li class="social-icons-linkedin">
													<a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
												</li>
											</ul>
										</nav>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="header-container container">
						<div class="header-row">
							<div class="header-column w-100">
								<div class="header-row justify-content-between">
									<div class="header-logo z-index-2 col-lg-2 px-0">
										<a href="demo-auto-services.html">
											<img alt="Porto" width="70" height="70" data-sticky-width="82" data-sticky-height="40" data-sticky-top="84" src="shisan/logo.png">
										</a>
									</div>
									<div class="header-nav header-nav-links justify-content-end pe-lg-4 me-lg-3">
										<div class="header-nav-main header-nav-main-arrows header-nav-main-dropdown-no-borders header-nav-main-effect-3 header-nav-main-sub-effect-1">
											<nav class="collapse">
												<ul class="nav nav-pills" id="mainNav">
													<li><a href="demo-auto-services.html" class="nav-link active">Inicio</a></li>
													<li><a href="demo-auto-services-about-us.html" class="nav-link">Nuestra Empresa</a></li>
													<li class="dropdown">
														<a href="demo-auto-services-services.html" class="nav-link dropdown-toggle">Cobertura</a>
														<ul class="dropdown-menu">
															<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">Brake Repair</a></li>
															<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">Check Engine</a></li>
															<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">Suspension Repair</a></li>
															<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">Transmission Repair</a></li>
															<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">A/C Repair</a></li>
														</ul>
													</li>
													<li><a href="demo-auto-services-products.html" class="nav-link">Proveedores</a></li>
													<li><a href="demo-auto-services-blog.html" class="nav-link">Productos</a></li>
													<li><a href="demo-auto-services-contact.html" class="nav-link">Contacto</a></li>
												</ul>
											</nav>
										</div>
									</div>
									<ul class="header-extra-info custom-left-border-1 d-none d-xl-block">
										<li class="d-none d-sm-inline-flex ms-0">
											<div class="header-extra-info-icon">
												<i class="fab fa-whatsapp text-3 text-color-dark position-relative top-3"></i>
											</div>
											<div class="header-extra-info-text line-height-2">
												<span class="text-1 font-weight-semibold text-color-default">Llámanos!!</span>
												<strong class="text-4"><a href="tel:3511210168" class="text-color-hover-primary text-decoration-none">351 560 4010</a></strong>
											</div>
										</li>
									</ul>
									
									<button class="btn header-btn-collapse-nav ms-4" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
										<i class="fas fa-bars"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</header>

			<div role="main" class="main">

				<section class="section custom-section-background position-relative border-0 overflow-hidden m-0 p-0">
					<div class="background-image-wrapper custom-background-style-1 position-absolute top-0 left-0 right-0 bottom-0 animated kenBurnsToRight" style="overflow: hidden;">
						<video autoplay muted loop playsinline style="width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;">
							<source src="shisan/video.mp4" type="video/mp4">
							Tu navegador no soporta videos.
						</video>
					</div>
					<div class="container position-relative py-sm-5 my-5">
						<svg class="custom-svg-1 d-none d-sm-block" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 649 578">
							<path fill="#FFF" d="M-225.5,154.7l358.45,456.96c7.71,9.83,21.92,11.54,31.75,3.84l456.96-358.45c9.83-7.71,11.54-21.92,3.84-31.75
								L267.05-231.66c-7.71-9.83-21.92-11.54-31.75-3.84l-456.96,358.45C-231.49,130.66-233.2,144.87-225.5,154.7z"/>
							<path class="animated customLineAnim svg-stroke-color-primary" fill="none" stroke-width="1.5" stroke-miterlimit="10" d="M416-21l202.27,292.91c5.42,7.85,3.63,18.59-4.05,24.25L198,603" style="animation-delay: 300ms; animation-duration: 5s;"/>
						</svg>
						<div class="row mb-5 p-relative z-index-1">
							<div class="col-md-8 col-lg-6 col-xl-5">
								<div class="overflow-hidden mb-1">
									<h2 class="font-weight-bold text-color-grey text-4-5 line-height-2 line-height-sm-7 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="800">Expertos en herramientas preparados para ti</h2>
								</div>
								<h1 class="text-color-dark font-weight-bold text-8 pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1100">Le brindamos el servicio que usted se merece</h1>
								<a href="#" class="btn btn-primary text-color-light custom-btn-border-radius custom-btn-arrow-effect-1 font-weight-bold text-3 px-5 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1300">
									Contáctanos
									<svg class="ms-2" version="1.1" viewBox="0 0 15.698 8.706" width="17" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
										<polygon stroke="#FFF" stroke-width="0.1" fill="#FFF" points="11.354,0 10.646,0.706 13.786,3.853 0,3.853 0,4.853 13.786,4.853 10.646,8 11.354,8.706 15.698,4.353 "/>
									</svg>
								</a>
							</div>
						</div>
					</div>
				</section>

				<section class="section border-0 m-0 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1200">
					<div class="container">
						<div class="row align-items-center justify-content-center">
							<div class="col-sm-9 col-md-12 col-lg-7 text-center text-lg-end mb-4 mb-lg-0">
								<h2 class="font-weight-bold text-color-primary text-7 line-height-1 mb-1 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1700">Somos empresa lider en sector ferretero</h2>
								<p class="font-weight-bold text-4 mb-0 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1900">Descubre todas nuestras herramientas con un click</p>
							</div>
							<div class="col-lg-5 text-center text-lg-start ps-lg-4">
								<a href="demo-auto-services-appointment.html" class="btn btn-primary btn-outline custom-btn-border-radius font-weight-bold text-3 btn-px-5 btn-py-3 ms-lg-2 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1500">VER CATÁLOGO</a>
							</div>
						</div>
					</div>
				</section>

				<div class="container my-5 pt-md-4 pt-xl-0">
					<div class="row align-items-center justify-content-center pb-4 mb-5">
						<div class="col-lg-6 pb-sm-4 pb-lg-0 mb-5 mb-lg-0">
							<div class="overflow-hidden">
								<h2 class="font-weight-bold text-color-dark line-height-1 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="300">Más de 60 años de experiencia</h2>
							</div>
							<div class="custom-divider divider divider-primary divider-small my-3">
								<hr class="my-0 appear-animation" data-appear-animation="customLineProgressAnim" data-appear-animation-delay="700">
							</div>
							<p class="font-weight-light text-3-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">En Ferretería Panal ponemos a tu disposición un catálogo completo de productos y proveedores, con descripciones claras, información técnica, imágenes y condiciones de venta. Nuestro sitio web está diseñado para ser una herramienta práctica que te permita explorar fácilmente todo lo que necesitas en ferretería y construcción, convirtiéndose en un aliado confiable para hacer crecer tu negocio.
</p>
							<p class="pb-1 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">Con más de seis décadas de trayectoria, nos hemos consolidado como líderes en la comercialización de artículos de ferretería y materiales de construcción. Atendemos a mayoristas, medio mayoristas, profesionales y consumidores finales, siempre con el compromiso de ofrecer calidad, servicio y confianza. Gracias a la preferencia de nuestros clientes y proveedores, seguimos generando beneficios mutuos y creando nuevas oportunidades de empleo, reafirmando nuestra posición como tu ferretería de confianza.
</p>
							<div class="d-flex align-items-start align-items-sm-center flex-column flex-sm-row">
								<div class="feature-box align-items-center border border-top-0 border-end-0 border-bottom-0 custom-remove-mobile-xs-border-left ms-sm-4 ps-sm-4 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1200">
									<div class="feature-box-icon bg-transparent">
										<i class="fab fa-whatsapp text-6 text-color-dark"></i>
									</div>
									<div class="feature-box-info line-height-2 ps-1">
										<span class="d-block text-1 font-weight-semibold text-color-default">Llamanos!!</span>
										<strong class="text-4-5"><a href="tel:+1234567890" class="text-color-dark text-color-hover-primary text-decoration-none">351 560 4010</a></strong>
									</div>
								</div>
								
								<div class="feature-box align-items-center border border-top-0 border-end-0 border-bottom-0 custom-remove-mobile-xs-border-left ms-sm-4 ps-sm-4 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1200">
									<div class="feature-box-icon bg-transparent">
										<i class="icons icon-phone text-6 text-color-dark"></i>
									</div>
									<div class="feature-box-info line-height-2 ps-1">
										<span class="d-block text-1 font-weight-semibold text-color-default">Contáctaos!!</span>
										<strong class="text-4-5"><a href="tel:+1234567890" class="text-color-dark text-color-hover-primary text-decoration-none">351 121 0168</a></strong>
									</div>
								</div>
							</div>
						</div>
						<div class="col-10 col-md-9 col-lg-6 ps-lg-5 pe-5 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1450" data-plugin-options="{'accY': -200}">
							<div class="position-relative">
								<div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.2, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
									<img src="shisan/imagen1.png" class="img-fluid" alt="" />
								</div>
								<div class="position-absolute transform3dxy-n50" style="top: 25%; left: 7%;">
									<div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.5, 'transition': true, 'transitionDuration': 2000, 'isInsideSVG': false}">
										<img src="img/demos/auto-services/generic-1-1.png" class="appear-animation" alt="" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1700" />
									</div>
								</div>
								
							</div>
						</div>
					</div>
					<div class="row pt-2 pb-2">
						<div class="col-lg-4 text-center px-lg-5 mb-5 mb-lg-0">
							<a href="demo-auto-services-services-detail.html" class="text-decoration-none">
								<div class="custom-icon-box-style-1 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="250" data-plugin-options="{'accY': -200}">
									
										<img class="imgICon" src="shisan/mision.png" alt="mision" />
									
									<h3 class="text-transform-none font-weight-bold text-color-dark line-height-3 text-4-5 px-3 px-xl-5 my-2">Misión</h3>
									<p>Satisfacer las necesidades de nuestros clientes a través de nuestro amplio portafolio de productos con las mejores marcas, excelente calidad y precios competitivos; y a través de un equipo humano altamente capacitado brindarle el servicio que usted se merece.</p>
								</div>
							</a>
						</div>
						<div class="col-lg-4 text-center px-lg-5 mb-5 mb-lg-0">
							<a href="demo-auto-services-services-detail.html" class="text-decoration-none">
								<div class="custom-icon-box-style-1 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500" data-plugin-options="{'accY': -200}">
									
										<img class="imgICon" src="shisan/vision.png" alt="vision" />
									
									<h3 class="text-transform-none font-weight-bold text-color-dark line-height-3 text-4-5 px-xl-5 my-2 mx-4">Visión</h3>
									<p>Ser una empresa líder en el sector ferretero, buscando superar las expectativas de nuestros clientes, proyectándonos como una compañía competitiva que sea de gran aporte para el crecimiento económico de nuestra región.</p>
								</div>
							</a>
						</div>
						<div class="col-lg-4 text-center px-lg-5">
							<a href="demo-auto-services-services-detail.html" class="text-decoration-none">
								<div class="custom-icon-box-style-1 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="750" data-plugin-options="{'accY': -200}">
									
										<img class="imgICon"  src="shisan/valores.png" alt="Valores"/>
									
									<h3 class="text-transform-none font-weight-bold text-color-dark line-height-3 text-4-5 px-4 px-xl-5 my-2">Valores</h3>
									<p>Honestidad, Innovación, Respeto, Compromiso, Lealtad, Humildad, Responsabilidad, Profesionalismo, Amabilidad, Integridad.</p>
								</div>
							</a>
						</div>
					</div>
				</div>

				<section class="section custom-bg-color-grey-1 custom-background-size-1 position-relative overflow-hidden border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '130%', 'fadeIn': true}" data-image-src="shisan/mapa2.jpg">
					<!-- <svg class="custom-svg-background-1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 537" data-appear-animation-svg="true">
						<path fill="#F4F4F4" d="M964.33,189.3L1110.08,0H0v537h1338.31L972.96,255.7C952.24,239.74,948.38,210.02,964.33,189.3z"/>
						<path class="appear-animation svg-stroke-color-primary" data-appear-animation="customLineAnim2" data-appear-animation-delay="500" data-appear-animation-duration="5s" data-plugin-options="{'accY': -400}" fill="none" stroke-width="2" stroke-miterlimit="10" d="M1854.35,105.63l-485.31-340.84c-18.3-12.85-43.56-8.44-56.42,9.86L971.79,259.96
							c-12.85,18.3-8.44,43.56,9.86,56.42l485.31,340.84c18.3,12.85,43.56,8.44,56.42-9.86l340.84-485.31
							C1877.07,143.74,1872.65,118.48,1854.35,105.63z" />
					</svg> -->
					<div class="container my-5">
						<div class="row">
							<div class="col-lg-6">
								<div class="overflow-hidden">
									<h2 class="font-weight-bold text-color-dark line-height-3 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">Cobertura</h2>
								</div>
								<div class="custom-divider divider divider-primary divider-small pt-1 mb-3 mt-2">
									<hr class="my-0 appear-animation" data-appear-animation="customLineProgressAnim" data-appear-animation-delay="600">
								</div>
								<p class="font-weight-light text-3-5 pb-3 pe-5 me-md-5 me-lg-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
								<div class="row">
									<div class="col-5 col-lg-4 order-1 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="750">
										<ul class="list list-icons list-icons-style-2 list-icons-lg mb-0">
											<li class="font-weight-semibold text-color-dark">
												<i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i> 
												Colima
											</li>
											<li class="font-weight-semibold text-color-dark">
												<i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i> 
												Guanajuato
											</li>
											<li class="font-weight-semibold text-color-dark">
												<i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i> 
												Guerrero
											</li>
										</ul>
									</div>
									<div class="col-lg-4 order-3 order-lg-2 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1000">
										<ul class="list list-icons list-icons-style-2 list-icons-lg mb-0">
											<li class="font-weight-semibold text-color-dark">
												<i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i> 
												Jalisco
											</li>
											<li class="font-weight-semibold text-color-dark">
												<i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i> 
												Michoacán
											</li>
											<li class="font-weight-semibold text-color-dark">
												<i class="fas fa-check text-color-dark border-color-grey-1 top-7 text-3"></i> 
												Nayarit
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-lg-6">
								<img src="shisan/mapa.png" class="img-fluid" alt="">
							</div>
						</div>
					</div>
				</section>

				<div class="container py-5 my-5">
					<div class="row justify-content-center">
						<div class="col-lg-9 col-xl-8 text-center">
							<div class="overflow-hidden">
								<h2 class="font-weight-bold text-color-dark line-height-1 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">Proveedores</h2>
							</div>
							<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
								<hr class="my-0 appear-animation" data-appear-animation="customLineProgressAnim" data-appear-animation-delay="600">
							</div>
							<p class="font-weight-light text-3-5 mb-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
						</div>
					</div>
					<div class="row appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">
						<!-- <div>
						
						</div> -->
						<div class="owl-carousel owl-theme">
							<div class="item">
								<img src="cpanal2026/marcas/italia.jpg" class="img-fluid" alt="">
							</div>
							<div class="item">
								<img src="cpanal2026/marcas/kitta.jpg" class="img-fluid" alt="">
							</div>
							<div class="item">
								<img src="cpanal2026/marcas/urrea.png" class="img-fluid" alt="">
							</div>
							<div class="item">
								<img src="cpanal2026/marcas/letsa.png" class="img-fluid" alt="">
							</div>
							<div class="item">
								<img src="cpanal2026/marcas/rotoplas.png" class="img-fluid" alt="">
							</div>
							<div class="item">
								<img src="cpanal2026/marcas/cuprum.jpg" class="img-fluid" alt="">
							</div>
							<div class="item">
								<img src="cpanal2026/marcas/truper.png" class="img-fluid" alt="">
							</div>
							<div class="item">
								<img src="cpanal2026/marcas/deacero.png" class="img-fluid" alt="">
							</div>
						</div>
					</div>
					<!-- <div class="row">
						<div class="col text-center">
							<a href="demo-auto-services-services.html" class="btn btn-primary text-color-light custom-btn-border-radius font-weight-bold text-3 btn-px-5 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="850">VIEW ALL SERVICES</a>
						</div>
					</div> -->
				</div>

				<section class="section border-0 m-0">
					<div class="container pb-3 my-5">
						<div class="row justify-content-center pb-3 mb-4">
							<div class="col text-center">
								<h2 class="font-weight-bold text-color-dark line-height-1 mb-0">Productos</h2>
								<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
									<hr class="my-0">
								</div>
								<p class="font-weight-bold text-3-5 mb-1">We are very proud of the service we provide and stand by every product we carry.</p>
								<p class="font-weight-light text-3-5 mb-0">Read our testimonials from our happy customers.</p>
							</div>
						</div>
						<div class="row">
							<div class="col-12 col-md-4">
								<img src="https://ferreteriapanal.com.mx/cpanal2026/images/portadilla-panal.jpg" alt="" srcset="">
							</div>
							<div class="col-12 col-md-4 offset-md-3">
								<img src="https://ferreteriapanal.com.mx/cpanal2026/images/portadilla-truper.jpg" alt="" srcset="">
							</div>
						</div>
					</div>
				</section>

				<section class="section border-0 m-0">
					<div class="container pb-3 my-5">
						<div class="row justify-content-center pb-3 mb-4">
							<div class="col text-center">
								<h2 class="font-weight-bold text-color-dark line-height-1 mb-0">Galería</h2>
								<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
									<hr class="my-0">
								</div>
								<p class="font-weight-bold text-3-5 mb-1">We are very proud of the service we provide and stand by every product we carry.</p>
								<p class="font-weight-light text-3-5 mb-0">Read our testimonials from our happy customers.</p>
							</div>
						</div>

						<div id="galeria" class="row appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">
                        <?php
                            $directory= "shisan/galeria/";
                            
                            $dirint = dir($directory);
                            while (($archivo = $dirint->read()) !== false)
                            {
                                if (preg_match("/gif/i", $archivo) || preg_match("/jpg/i", $archivo) || preg_match("/png/i", $archivo)){
                                    echo '
                                    <img alt="" src="shisan/galeria-thumbs/'.$archivo.'"
                                        data-image="shisan/galeria/'.$archivo.'"
                                        data-description="">
                                    ';
                                }
                            }
                            $dirint->close();
                        ?>

							
						</div>
					</div>
				</section>

				<section class="section section-height-3 bg-primary border-0 m-0">
					<div class="container">
						<div class="row align-items-center">
							<div class="col-lg-6 col-xl-7 text-center text-lg-start mb-4 mb-lg-0">
								<h2 class="text-color-light font-weight-medium text-3-5 line-height-2 line-height-sm-1 ls-0 mb-2 mb-lg-2">LOOKING FOR HONEST AND RELIABLE SERVICES?</h2>
								<h3 class="font-weight-bold text-color-light text-transform-none text-8 line-height-2 line-height-lg-1 mb-1">Best Mechanics Downtown Los Angeles CA</h3>
								<p class="font-weight-bold text-color-light text-4 opacity-7 mb-0">Make An Appointment Today With Our Online Form</p>
							</div>
							<div class="col-lg-6 col-xl-5">
								<div class="d-flex flex-column flex-lg-row align-items-center justify-content-between">
									<div class="feature-box align-items-center mb-3 mb-lg-0">
										<div class="feature-box-icon bg-transparent">
											<i class="icons icon-phone text-6 text-color-light"></i>
										</div>
										<div class="feature-box-info line-height-2 ps-1">
											<span class="d-block text-1 font-weight-semibold text-color-light mb-1">CALL US NOW</span>
											<strong class="text-4-5"><a href="tel:+1234567890" class="text-color-light text-decoration-none">+123 4567 890</a></strong>
										</div>
									</div>
									<a href="demo-auto-services-appointment.html" class="btn btn-light btn-outline custom-btn-border-radius border-color-light font-weight-bold text-color-light text-color-hover-dark bg-color-hover-light btn-px-5 btn-py-3">MAKE AN APPOINTMENT</a>
								</div>
							</div>
						</div>
					</div>
				</section>

				<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
					<div class="container-fluid">
						<div class="row">
							<div class="col-6 col-md-3 px-0">
								<a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0" href="img/demos/auto-services/generic/generic-square-1.jpg">
									<img class="img-fluid rounded-0" src="img/demos/auto-services/generic/generic-square-1.jpg" alt="" />
								</a>
							</div>
							<div class="col-6 col-md-3 px-0">
								<a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0" href="img/demos/auto-services/generic/generic-square-2.jpg">
									<img class="img-fluid rounded-0" src="img/demos/auto-services/generic/generic-square-2.jpg" alt="" />
								</a>
							</div>
							<div class="col-6 col-md-3 px-0">
								<a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0" href="img/demos/auto-services/generic/generic-square-3.jpg">
									<img class="img-fluid rounded-0" src="img/demos/auto-services/generic/generic-square-3.jpg" alt="" />
								</a>
							</div>
							<div class="col-6 col-md-3 px-0">
								<a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0" href="img/demos/auto-services/generic/generic-square-4.jpg">
									<img class="img-fluid rounded-0" src="img/demos/auto-services/generic/generic-square-4.jpg" alt="" />
								</a>
							</div>
						</div>
					</div>
				</div>

				<div class="container py-5 my-5">
					<div class="row justify-content-center pb-3 mb-4">
						<div class="col-lg-9 col-xl-8 text-center">
							<div class="overflow-hidden">
								<h2 class="font-weight-bold text-color-dark line-height-1 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">Frequently Asked Questions</h2>
							</div>
							<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
								<hr class="my-0 appear-animation" data-appear-animation="customLineProgressAnim" data-appear-animation-delay="650">
							</div>
							<p class="font-weight-light text-3-5 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
						</div>
					</div>
					<div class="row row-gutter-sm">
						<div class="col-md-8 col-lg-9 mb-5 mb-md-0">
							<svg class="custom-svg-2 overflow-visible" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 185 151">
								<g data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.1, 'transition': true, 'transitionDuration': 2000, 'isInsideSVG': true}">
									<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="850" d="M34.81,102.81L5.18,73.18c-2.13-2.13-2.13-5.59,0-7.72l29.63-29.63c2.13-2.13,5.59-2.13,7.72,0l29.63,29.63
										c2.13,2.13,2.13,5.59,0,7.72l-29.63,29.63C40.4,104.94,36.94,104.94,34.81,102.81z"/>
								</g>
								<g data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.2, 'transition': true, 'transitionDuration': 2500, 'isInsideSVG': true}">
									<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" d="M92.49,35.35L80.4,23.26c-1.75-1.75-1.75-4.59,0-6.34L92.49,4.83c1.75-1.75,4.59-1.75,6.34,0l12.09,12.09
										c1.75,1.75,1.75,4.59,0,6.34L98.83,35.35C97.08,37.1,94.24,37.1,92.49,35.35z"/>
								</g>
								<g data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.3, 'transition': true, 'transitionDuration': 3000, 'isInsideSVG': true}">
									<path fill="#F4F4F4" class="appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1150" d="M129.88,148.41l-43.21-43.21c-2.13-2.13-2.13-5.59,0-7.72l43.21-43.21c2.13-2.13,5.59-2.13,7.72,0l43.21,43.21
										c2.13,2.13,2.13,5.59,0,7.72l-43.21,43.21C135.46,150.54,132.01,150.54,129.88,148.41z"/>
								</g>
							</svg>
							<div class="accordion custom-accordion-style-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" id="accordion1">
								<div class="card card-default">
									<div class="card-header" id="collapse1HeadingOne">
										<h4 class="card-title m-0">
											<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1One" aria-expanded="false" aria-controls="collapse1One">
												1 - Why Choose Porto Auto Services?
											</a>
										</h4>
									</div>
									<div id="collapse1One" class="collapse" aria-labelledby="collapse1HeadingOne" data-bs-parent="#accordion1">
										<div class="card-body">
											<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
										</div>
									</div>
								</div>
								<div class="card card-default">
									<div class="card-header" id="collapse1HeadingTwo">
										<h4 class="card-title m-0">
											<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Two" aria-expanded="false" aria-controls="collapse1Two">
												2 - Cras a elit sit amet leo accumsan?
											</a>
										</h4>
									</div>
									<div id="collapse1Two" class="collapse" aria-labelledby="collapse1HeadingTwo" data-bs-parent="#accordion1">
										<div class="card-body">
											<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
										</div>
									</div>
								</div>
								<div class="card card-default">
									<div class="card-header" id="collapse1HeadingThree">
										<h4 class="card-title m-0">
											<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Three" aria-expanded="false" aria-controls="collapse1Three">
												3 - Hel officitur felis ultricis nan?
											</a>
										</h4>
									</div>
									<div id="collapse1Three" class="collapse" aria-labelledby="collapse1HeadingThree" data-bs-parent="#accordion1">
										<div class="card-body">
											<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
										</div>
									</div>
								</div>
								<div class="card card-default">
									<div class="card-header" id="collapse1HeadingFour">
										<h4 class="card-title m-0">
											<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Four" aria-expanded="false" aria-controls="collapse1Four">
												4 - Wuspaisse hendreirit vehicula leo?
											</a>
										</h4>
									</div>
									<div id="collapse1Four" class="collapse" aria-labelledby="collapse1HeadingFour" data-bs-parent="#accordion1">
										<div class="card-body">
											<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
										</div>
									</div>
								</div>
								<div class="card card-default">
									<div class="card-header" id="collapse1HeadingFive">
										<h4 class="card-title m-0">
											<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Five" aria-expanded="false" aria-controls="collapse1Five">
												5 - Lintegers aliquet ullamcorper dollor, quis sollic tudin?
											</a>
										</h4>
									</div>
									<div id="collapse1Five" class="collapse" aria-labelledby="collapse1HeadingFive" data-bs-parent="#accordion1">
										<div class="card-body">
											<p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 text-center text-md-start">
							<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000">
								<h3 class="font-weight-bold text-color-dark text-transform-none text-5-5 mb-3">Our Mission</h3>
								<p class="pb-1 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
								<a href="demo-auto-services-about-us.html" class="btn btn-primary text-color-light custom-btn-border-radius font-weight-bold btn-px-5 py-3 mb-2">VIEW MORE</a>

								<hr class="my-4">
							</div>
							<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1100">
								<h3 class="font-weight-bold text-color-dark text-transform-none text-5-5 pt-2 mb-3">Any Questions?</h3>
								<p class="pb-1 mb-2">Lorem ipsum dolor sit amet, consect etur adipiscing elit.</p>
								<a href="demo-auto-services-contact.html" class="btn btn-primary text-color-light custom-btn-border-radius font-weight-bold btn-px-5 py-3">CONTACT US</a>
							</div>
						</div>
					</div>
				</div>

				<section class="shop section section-height-4 border-0 m-0">
					<div class="container">
						<div class="row justify-content-center pb-3 mb-4">
							<div class="col-lg-8 text-center">
								<div class="overflow-hidden">
									<h2 class="font-weight-bold text-color-dark line-height-1 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">Products For Sale</h2>
								</div>
								<div class="d-inline-block custom-divider divider divider-primary divider-small my-3">
									<hr class="my-0 appear-animation" data-appear-animation="customLineProgressAnim" data-appear-animation-delay="600">
								</div>
								<p class="font-weight-light text-3-5 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
							</div>
						</div>
						<div class="products row row-gutter-sm mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">
							<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
								<div class="product mb-0">
									<div class="product-thumb-info border-0 mb-3">
										<div class="product-thumb-info-badges-wrapper">
											<span class="badge badge-ecommerce text-bg-danger">27% OFF</span>
										</div>
										<div class="addtocart-btn-wrapper">
											<a href="shop-cart.html" class="text-decoration-none addtocart-btn" title="Add to Cart">
												<i class="icons icon-bag"></i>
											</a>
										</div>
										<a href="ajax/demo-auto-services-product-quick-view.html" class="quick-view text-uppercase font-weight-semibold text-2">
											QUICK VIEW
										</a>
										<a href="shop-product-sidebar-left.html">
											<div class="product-thumb-info-image bg-light">
												<img alt="" class="img-fluid" src="img/demos/auto-services/products/product-1.jpg">
											</div>
										</a>
									</div>
									<div class="d-flex justify-content-between">
										<div>
											<a href="#" class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">CATEGORY</a>
											<h3 class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0"><a href="" class="text-color-dark text-color-hover-primary">Product Short Name</a></h3>
										</div>
									</div>
									<div title="Rated 5 out of 5">
										<input type="text" class="d-none" value="5" title="" data-plugin-star-rating data-plugin-options="{'displayOnly': true, 'color': 'default', 'size':'xs'}">
									</div>
									<p class="price text-5 mb-3">
										<span class="sale text-color-dark font-weight-medium">49,00</span>
										<span class="amount">59,00</span>
									</p>
								</div>
							</div>
							<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
								<div class="product mb-0">
									<div class="product-thumb-info border-0 mb-3">
										<div class="product-thumb-info-badges-wrapper">
											<span class="badge badge-ecommerce text-bg-danger">27% OFF</span>
										</div>
										<div class="addtocart-btn-wrapper">
											<a href="shop-cart.html" class="text-decoration-none addtocart-btn" title="Add to Cart">
												<i class="icons icon-bag"></i>
											</a>
										</div>
										<a href="ajax/demo-auto-services-product-quick-view.html" class="quick-view text-uppercase font-weight-semibold text-2">
											QUICK VIEW
										</a>
										<a href="shop-product-sidebar-left.html">
											<div class="product-thumb-info-image bg-light">
												<img alt="" class="img-fluid" src="img/demos/auto-services/products/product-2.jpg">
											</div>
										</a>
									</div>
									<div class="d-flex justify-content-between">
										<div>
											<a href="#" class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">CATEGORY</a>
											<h3 class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0"><a href="" class="text-color-dark text-color-hover-primary">Product Short Name</a></h3>
										</div>
									</div>
									<div title="Rated 5 out of 5">
										<input type="text" class="d-none" value="5" title="" data-plugin-star-rating data-plugin-options="{'displayOnly': true, 'color': 'default', 'size':'xs'}">
									</div>
									<p class="price text-5 mb-3">
										<span class="sale text-color-dark font-weight-medium">49,00</span>
										<span class="amount">59,00</span>
									</p>
								</div>
							</div>
							<div class="col-sm-6 col-lg-3 mb-4 mb-sm-0">
								<div class="product mb-0">
									<div class="product-thumb-info border-0 mb-3">
										<div class="product-thumb-info-badges-wrapper">
											<span class="badge badge-ecommerce text-bg-danger">27% OFF</span>
										</div>
										<div class="addtocart-btn-wrapper">
											<a href="shop-cart.html" class="text-decoration-none addtocart-btn" title="Add to Cart">
												<i class="icons icon-bag"></i>
											</a>
										</div>
										<a href="ajax/demo-auto-services-product-quick-view.html" class="quick-view text-uppercase font-weight-semibold text-2">
											QUICK VIEW
										</a>
										<a href="shop-product-sidebar-left.html">
											<div class="product-thumb-info-image bg-light">
												<img alt="" class="img-fluid" src="img/demos/auto-services/products/product-3.jpg">
											</div>
										</a>
									</div>
									<div class="d-flex justify-content-between">
										<div>
											<a href="#" class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">CATEGORY</a>
											<h3 class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0"><a href="" class="text-color-dark text-color-hover-primary">Product Short Name</a></h3>
										</div>
									</div>
									<div title="Rated 5 out of 5">
										<input type="text" class="d-none" value="5" title="" data-plugin-star-rating data-plugin-options="{'displayOnly': true, 'color': 'default', 'size':'xs'}">
									</div>
									<p class="price text-5 mb-3">
										<span class="sale text-color-dark font-weight-medium">49,00</span>
										<span class="amount">59,00</span>
									</p>
								</div>
							</div>
							<div class="col-lg-3 col-sm-6">
								<div class="product mb-0">
									<div class="product-thumb-info border-0 mb-3">
										<div class="product-thumb-info-badges-wrapper">
											<span class="badge badge-ecommerce text-bg-danger">27% OFF</span>
										</div>
										<div class="addtocart-btn-wrapper">
											<a href="shop-cart.html" class="text-decoration-none addtocart-btn" title="Add to Cart">
												<i class="icons icon-bag"></i>
											</a>
										</div>
										<a href="ajax/demo-auto-services-product-quick-view.html" class="quick-view text-uppercase font-weight-semibold text-2">
											QUICK VIEW
										</a>
										<a href="shop-product-sidebar-left.html">
											<div class="product-thumb-info-image bg-light">
												<img alt="" class="img-fluid" src="img/demos/auto-services/products/product-4.jpg">
											</div>
										</a>
									</div>
									<div class="d-flex justify-content-between">
										<div>
											<a href="#" class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">CATEGORY</a>
											<h3 class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0"><a href="" class="text-color-dark text-color-hover-primary">Product Short Name</a></h3>
										</div>
									</div>
									<div title="Rated 5 out of 5">
										<input type="text" class="d-none" value="5" title="" data-plugin-star-rating data-plugin-options="{'displayOnly': true, 'color': 'default', 'size':'xs'}">
									</div>
									<p class="price text-5 mb-3">
										<span class="sale text-color-dark font-weight-medium">49,00</span>
										<span class="amount">59,00</span>
									</p>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col text-center">
								<a href="demo-auto-services-products.html" class="btn btn-primary text-color-light custom-btn-border-radius font-weight-bold text-3 btn-px-5 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800">VIEW ALL PRODUCTS</a>
							</div>
						</div>
					</div>
				</section>

				<section class="section bg-transparent position-relative border-0 z-index-1 m-0 p-0">
					<div class="container py-4">
						<div class="row align-items-center text-center py-5">
							<div class="col-sm-4 col-lg-2 mb-5 mb-lg-0">
								<img src="img/logos/logo-8.png" alt class="img-fluid" style="max-width: 90px;" />
							</div>
							<div class="col-sm-4 col-lg-2 mb-5 mb-lg-0">
								<img src="img/logos/logo-9.png" alt class="img-fluid" style="max-width: 140px;" />
							</div>
							<div class="col-sm-4 col-lg-2 mb-5 mb-lg-0">
								<img src="img/logos/logo-10.png" alt class="img-fluid" style="max-width: 140px;" />
							</div>
							<div class="col-sm-4 col-lg-2 mb-5 mb-sm-0">
								<img src="img/logos/logo-11.png" alt class="img-fluid" style="max-width: 140px;" />
							</div>
							<div class="col-sm-4 col-lg-2 mb-5 mb-sm-0">
								<img src="img/logos/logo-12.png" alt class="img-fluid" style="max-width: 100px;" />
							</div>
							<div class="col-sm-4 col-lg-2">
								<img src="img/logos/logo-13.png" alt class="img-fluid" style="max-width: 100px;" />
							</div>
						</div>
					</div>
					<svg class="custom-svg-3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 193 495">
						<path class="svg-fill-color-primary" d="M193,25.73L18.95,247.93c-13.62,17.39-10.57,42.54,6.82,56.16L193,435.09V25.73z"/>
						<path fill="none" stroke="#FFF" stroke-width="1.5" stroke-miterlimit="10" d="M196,53.54L22.68,297.08c-12.81,18-8.6,42.98,9.4,55.79L196,469.53V53.54z"/>
					</svg>
				</section>

			</div> 

			<footer id="footer" class="border-0 mt-0">
				<div class="container py-5">
					<div class="row py-3">
						<div class="col-md-4 mb-5 mb-md-0">
							<div class="feature-box flex-column flex-xl-row align-items-center align-items-lg-start text-center text-lg-start">
								<div class="feature-box-icon bg-transparent mb-4 mb-xl-0 p-0">
									<img width="45" src="img/demos/auto-services/icons/icon-location.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light position-relative bottom-3'}" />
								</div>
								<div class="feature-box-info line-height-1 ps-2">
									<span class="d-block font-weight-bold text-color-light text-5 mb-2">Address</span>
									<p class="text-color-light text-4 line-height-4 font-weight-light mb-0">123 Street Name, Los Angeles, CA</p>
								</div>
							</div>
						</div>
						<div class="col-md-4 mb-5 mb-md-0">
							<div class="feature-box flex-column flex-xl-row align-items-center align-items-lg-start text-center text-lg-start">
								<div class="feature-box-icon bg-transparent mb-4 mb-xl-0 p-0">
									<i class="icons icon-phone text-9 text-color-light position-relative top-4"></i>
								</div>
								<div class="feature-box-info line-height-1 ps-2">
									<span class="d-block font-weight-bold text-color-light text-5 pb-1 mb-1">Call Us Now</span>
									<a href="tel:1234567890" class="text-color-light text-4 line-height-7 text-decoration-none">+123 4567 890</a>
									<span class="text-color-light text-4 px-2">/</span>
									<a href="tel:1234567890" class="text-color-light text-4 line-height-7 text-decoration-none">+123 4567 890</a>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="feature-box flex-column flex-xl-row align-items-center align-items-lg-start text-center text-lg-start">
								<div class="feature-box-icon bg-transparent mb-4 mb-xl-0 p-0">
									<img width="45" src="img/demos/auto-services/icons/car-winch.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light position-relative bottom-3'}" />
								</div>
								<div class="feature-box-info line-height-1 ps-xl-3">
									<span class="d-block font-weight-bold text-color-light text-5 pb-1 mb-1">24/7 Assistance</span>
									<a href="tel:1234567890" class="text-color-light text-4 line-height-7 text-decoration-none">+123 4567 890</a>
									<span class="text-color-light text-4 px-2">/</span>
									<a href="tel:1234567890" class="text-color-light text-4 line-height-7 text-decoration-none">+123 4567 890</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<hr class="bg-light opacity-2 my-0">
				<div class="container pb-5">
					<div class="row text-center text-md-start py-4 my-5">
						<div class="col-md-6 col-lg-3 align-self-center text-center text-md-start text-lg-center mb-5 mb-lg-0">
							<a href="demo-auto-services.html" class="text-decoration-none">
								<img src="img/demos/auto-services/logo-light.png" class="img-fluid" alt="" />
							</a>
						</div>
						<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
							<h5 class="text-transform-none font-weight-bold text-color-light text-4-5 mb-4">About Us</h5>
							<ul class="list list-unstyled">
								<li class="pb-1 mb-2">
									<span class="d-block font-weight-semibold line-height-1 text-color-grey text-3-5">ADDRESS</span> 
									<a href="demo-auto-services-contact.html#get-direction" class="text-color-light custom-text-underline-1 font-weight-medium text-3-5">GET DIRECTIONS</a>
								</li>
								<li class="pb-1 mb-2">
									<span class="d-block font-weight-semibold line-height-1 text-color-grey text-3-5 mb-1">PHONE</span>
									<ul class="list list-unstyled font-weight-light text-3-5 mb-0">
										<li class="text-color-light line-height-3 mb-0">
											Sales: <a href="tel:+1234567890" class="text-decoration-none text-color-light text-color-hover-default">+123 4567 890</a>
										</li>
										<li class="text-color-light line-height-3 mb-0">
											Services: <a href="tel:+1234567890" class="text-decoration-none text-color-light text-color-hover-default">+123 4567 890</a>
										</li>
									</ul>
								</li>
								<li class="pb-1 mb-2">
									<span class="d-block font-weight-semibold line-height-1 text-color-grey text-3-5">EMAIL</span>
									<a href="mailto:mail@example.com" class="text-decoration-none font-weight-light text-3-5 text-color-light text-color-hover-default">mail@example.com</a>
								</li>
							</ul>
							<ul class="social-icons social-icons-medium">
								<li class="social-icons-instagram">
									<a href="http://www.instagram.com/" class="no-footer-css" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
								</li>
								<li class="social-icons-x mx-2">
									<a href="http://www.twitter.com/" class="no-footer-css" target="_blank" title="Twitter"><i class="fab fa-whatsapp"></i></a>
								</li>
								<li class="social-icons-facebook">
									<a href="http://www.facebook.com/" class="no-footer-css" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
								</li>
							</ul>
						</div>
						<div class="col-md-6 col-lg-2 mb-5 mb-md-0">
							<h5 class="text-transform-none font-weight-bold text-color-light text-4-5 mb-4">Auto Services</h5>
							<ul class="list list-unstyled mb-0">
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">Brake Repair</a></li>
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">Check Engine</a></li>
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">Suspension Repair</a></li>
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">Transmission Repair</a></li>
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">A/C Repair</a></li>
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">Oil Change</a></li>
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">Electrical Diagnostics</a></li>
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">Tune Up</a></li>
								<li class="mb-0"><a href="demo-auto-services-services-detail.html">Fuel System Repair</a></li>
							</ul>
						</div>
						<div class="col-md-6 col-lg-3 offset-lg-1">
							<h5 class="text-transform-none font-weight-bold text-color-light text-4-5 mb-4">Opening Hours</h5>
							<ul class="list list-unstyled list-inline custom-list-style-1 mb-0">
								<li>Mon - Fri: 8:30 am to 5:00 pm</li>
								<li>Saturday: 9:30 am to 1:00 pm</li>
								<li>Sunday: Closed</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="footer-copyright bg-light py-4">
					<div class="container py-2">
						<div class="row">
							<div class="col">
								<p class="text-center text-3 mb-0">Porto Auto Services © 2025. All Rights Reserved.</p>
							</div>
						</div>
					</div>
				</div>
			</footer>

		</div>

		<!-- Vendor -->
		<script src="vendor/plugins/js/plugins.min.js"></script>
		<script src="vendor/bootstrap-star-rating/js/star-rating.min.js"></script>
		<script src="vendor/bootstrap-star-rating/themes/krajee-fas/theme.min.js"></script>

		<!-- Theme Base, Components and Settings -->
		<script src="js/theme.js"></script>

		<!-- Current Page Vendor and Views -->
		<script src="js/views/view.contact.js"></script>
		<script src="js/views/view.shop.js"></script>

		<!-- Demo -->
		<script src="js/demos/demo-auto-services.js"></script>

		<!-- Theme Custom -->
		<script src="js/custom.js"></script>

		<!-- Theme Initialization Files -->
		<script src="js/theme.init.js"></script>
		
		<!-- Owl Carroucel-->
		<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
		<script src="shisan/plugins/OwlCarousel2-2.3.4/dist/owl.carousel.js"></script>

		<script src='shisan/plugins/unitegallery/js/unitegallery.js' type='text/javascript'></script>
		<link rel='stylesheet' href='shisan/plugins/unitegallery/css/unite-gallery.css' type='text/css' />
		<script src='shisan/plugins/unitegallery/themes/tilesgrid/ug-theme-tilesgrid.js' type='text/javascript'></script>

		<script>
			$(document).ready(function(){
			  $(".owl-carousel").owlCarousel({
				  items: 5,
				  margin: 10,
				  loop: true,
				  autoplay: true
			  });

			  	$("#galeria").unitegallery({
					gallery_theme: "tilesgrid"
				});

			});
		</script>
		
	</body>
</html>
