/* Index.html body styling */

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-wrap: break-word;
    gap: 5vw;
    margin: 0 auto 0 auto;
    z-index: 1;
    max-width: 100%;
    width: 100vw;
    height: 70vh;
}

 /* main page image - to be replaced with a slideshow*/
.slideshow {
   position: relative;
  width: 100%;
  height: 100%;   /* match video height */
  overflow: hidden;
  z-index: 1;
}
 .slideshow video{
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 
 }

 /*Hero text section - beside image*/
.text-content-hero {
  position: absolute;   /* floats above video */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* center text */
  z-index: 2;           /* make sure it's above */
  color: white;         /* contrast */
  text-align: center;
  padding: 1rem;
}

 .text-content-hero h1 {
    padding-bottom: 10px;
    margin-top: 1.2vh;
    justify-content: center;
    text-align: center;
    margin-bottom: 1.5vh;
    margin-left: 1.5vw;   
    margin-right: 1.5vw;
 }

 .text-content-hero h2 {
    text-align: center;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    margin-top: 1.5vh;
 }

/* services section */
.services-title{
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
    width: 100%;
    margin: 0 auto;
    padding-top: 5vh;
    background-color: rgba(31, 46, 46, .8);
}


.services-title h1{ 
   align-items: center;
   padding: 2vh 0 2vh 0;
  
       width: 100%;
       text-align: center;

 }

 .network, .climate, .security, .entertainment, .smrtlight {
    display: flex;
  flex-direction: column;   /* stack subsections vertically */
  width:100%;
  margin: 0 auto 0 auto;  /* center and add spacing */
 }

 .topic-item {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;   
 }

 .topic-left, .topic-right {
  flex: 0 0 50%;            /* fixed width column */
  display: flex;
  flex-direction: column;   /* stack header + image */
  align-items: center;      /* center image + text */
  justify-content: center;
  text-align: center;   
}

.topic-left h2, .topic-right h2 {
   flex: 0 0 80%;
   margin: 2rem auto;
   padding-bottom: 10px;
   overflow-wrap: break-word;
}

.topic-left p, .topic-right p {
   margin: 1vh 3vw;
   text-align: center;
   overflow-wrap: break-word;
}

.topic-left img, .topic-right img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

/* Google reviews section */
.google-reviews {
   width: 100%;
   height: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.reviews-header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
    margin-top: 8vh;
}

.reviews-header h2{
   padding-bottom: 3vh;
}