<!DOCTYPE html>
<html>
  <head>
    <title>Porras Global Energy</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
    </div>
    <div>
        <div class="topnav">
            <a href="#home">HOME</a>
            <a href="#id2">ABOUT</a>
            <a href="#id3">SERVICES</a>
            <a href="#id4">CONTACT</a>
        </div>
      <!-- Slideshow container -->
      <div>
          <div class="slide">
              <div style="background-image:url(https://i.postimg.cc/wB4MvfTs/img9.jpg&auto=format&fit=crop&w=1650&q=100)"></div>
              <div style="background-image:url(https://i.postimg.cc/HxJx7wVw/img34.jpg&auto=format&fit=crop&w=1704&q=100)"></div>
              <div style="background-image:url(https://i.postimg.cc/B6861TXM/img44.jpg&auto=format&fit=crop&w=1620&q=100)"></div>
              <div style="background-image:url(https://i.postimg.cc/yNpxdQY0/img14.jpg&auto=format&fit=crop&w=1650&q=100)"></div>
              </div>
      </div>
    </div>
     <br>
     <div>
         <h1 class="About" id="id2">ABOUT</h1>
         <br>
         <div>
             <div class="container2">
                 <div class="cols">
                     <div class="card">
                         <img src="https://i.postimg.cc/05wjkCgN/img114.jpg" alt="Description of image">
                         
                         <p class="COH">Chief Engineer, Ciro Emilio Porras Gil.</p>
                     </div>
                     
                     <div>
                         <p class="card">Before the global giants arrived, we were already there. For 30 years, our leadership was the driving force behind introducing and positioning the industry's biggest brands in the region. Today, Porras Global Energy brings you that unmatched legacy. We go where the manuals stop, mastering the art of efficiency that only decades in the mud can teach. You don’t just get a service; you get the pioneer who knows exactly how the field works</p>
                     </div>
                 </div>
            </div>
         </div>
     </div>
    
    <div>
        <h1 class="servicesh1" id="id3">SERVICES</h1>
         <div class="container">
            <div class="card">
                <h2 class="serviceshead">DRILLING EFFICIENCY</h2>
                <br>
                <p>We make your drilling faster and smarter.
                By combining 30 years of field experience with modern strategies, 
                we eliminate costly reduce and expenses.</p>
            </div>
                
            <div class="card">
                <h2 class="serviceshead">SOLIDS CONTROL</h2>
                <br>
                <p>Clean fluids, better performance, lower costs. 
                We master the science of solids control to protect your equipment and maximize fluid recovery,
                cutting down on expensive chemicals and unnecessary waste.</p>
                </div>
            
            <div class="card">
                <h2 class="serviceshead">SUPPLY & SPARES</h2>
                <br>
                <p>We source as operators, not just suppliers. 
                From Houston to your rig, we provide a direct line to specialized oilfield equipment and critical spares,
                ensuring you get high-spec supplies that meet real field demands.</p>
            </div>
                
            <div class="card">
                <h2 class="serviceshead">ENVIRONMENTAL SOLUTIONS</h2>
                <br>
                <p>We provide smart, natural ways to clean up oil-impacted soil and water. 
                We help your business stay compliant and responsible using proven biological systems
                for high-impact environmental restoration.</p>
            </div>
         </div>
    </div>
    
    <br>
    
    <div class="contact" >
        <h1 class="contacth1" id="id4">CONTACT</h1>
        <div class="container">
            <div class="card" id="contactid">
                <h2 class="serviceshead"></h2>
                <p>Email: ceo@porrasglobalenergy.com
                <br>
                Phone: 786-208-6019
                <br>
                Address: 11111 KATY FWY STE 910, HOUSTON, TX 77079
                </p>
                
            </div>
         </div>
    </div>
    <footer>
       <p>© 2026 Porras Global Energy - All rights reserved</p>
    </footer>
    
    <script src="script.js" defer></script>
  </body>
</html>


html, body {
  margin: 0;
  padding: 0;
}

html{
    scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header{
  color: #d6b780;
  text-align: left;
  background-color: black;
}

p{
    font-size: 50px;
}

.About{
    text-align: center;
    font-size: 50px;
    color:#373737;
}

.topnav {
  overflow: hidden;
  background-color: #0B0B0C;
  justify-content: space-between;
}

.topnav a {
  float: right;
  color: #D4AF37;
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  transition: 0.5s;
}

.topnav a:hover {
  background-color: #04AA6D;
  color: white;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}


/* Slides */

.slide {
    background: #fff;
    height: 645px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slide > div {
    animation: slide 32s infinite;
    background-position: center center;
    background-size: cover;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.slide > div:nth-child(2) {
    animation-delay: 8s;
}

.slide > div:nth-child(3) {
    animation-delay: 16s;
}

.slide > div:nth-child(4) {
    animation-delay: 24s;
}

@keyframes slide {
    10% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
}

.COH {
    text-align: center;
}

.container2 {
  column-width: 250px;
  column-gap: 20px;
  padding: 20px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Cards should not be split across columns */
.card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  background-color: #ffffff;
  border: 2px solid #000;
  padding: 10px;
  margin: 0 0 1em;
  box-sizing: border-box;
  border-radius: 6px;
  overflow: hidden; /* contain children like images */
  
}

/* Make images responsive and preserve aspect ratio */
.card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 1000px;
  object-fit: cover; /* crops large images nicely */
  border-radius: 4px;
  margin-bottom: 8px;
}

/* Text inside card */
.card p {
  margin: 0;
  font-size: 0.95rem;
  color: #222;
}

/* Small-screen fallback: single column */
@media (max-width: 360px) {
  .container2 {
    column-width: 100%;
    column-gap: 12px;
    padding: 12px;
  }
  .card img { max-height: none; }
}

.servicesh1{
    text-align: center;
    font-size: 50px;
    color:#373737;
}

.container {
  column-width: 250px;
  column-gap: 20px;
  padding:20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  break-inside: avoid;
  background-color: white;
  border: 2px solid black;
  padding: 10px;
  margin-bottom: 1em;
}

.serviceshead{
    font-weight: bold;
}

#contactid p {
    font-size: 18px;
}

.contacth1{
    text-align: center;
    font-size: 50px;
    color:black;
}



footer{
    text-align: center;
    color: #D4AF37;
    background-color: #0B0B0C;
    min-height: 20px;
}

