/*CSS variables section*/
:root {

color:white;
}

/*Extra Large screens - Extra large desktops*/

/*General CSS and CSS reset*/

html, body {
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
    background-color: #0a0c0f;
}

* {
  margin: 0;
  padding: 0;
}
section{
    margin-top: 2.875em;
}

.navbar{
  background-color:#222;
}

.hero{
    background-image:url("/img/Banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 37.5em;
    width:100%;



}
.hero-text{
    background-color: rgba(4,7,32,0.5);
    height: 37.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imageBox{
    border: solid; 
    border-width: thin; 
    border-radius: 0.4vw; 
    border-color: #000000;
}

.borderOne{
    box-shadow: 0.5rem 0.5rem #c7d4ff, -0.5rem -0.5rem #ccc;
}

.borderTwo{
    box-shadow: -0.5rem -0.5rem #c7d4ff, 0.5rem 0.5rem #ccc;
}

.borderThree{
    border: 5px solid hsl(0, 0%, 40%);
  
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
    
    border-radius: 0.5vw;
    
}


h1{
    color:white;

    text-shadow: 0.5em 0.625em 0.625em #000000;
    border-top:none;
    border-bottom: none;
    padding: 5.625em 2.5em;
    text-transform: uppercase;
    font-size: 5em;
    font-weight: 800;

}

.icons{
    font-size: 1.25em;
    letter-spacing: 0.3125em;

}
.title{
    color:white;
    width:100%;
    margin:auto;
    padding:0.75em 0.625em;
    font-size: 3.125em;
    font-weight: 600;
    margin-left: 10%;
    text-transform: uppercase;
    width: 80%;

}

h3{
    font-size: 2.5em;

    font-weight: 600;

}

.parent {
height: 12.5em;
background: #a31a1a;
display: flex;
align-items: center;
justify-content: center;
}

.testimony{
    padding-bottom: 0em;
    background-color: #0a0c0f;
    overflow: hidden;

}
.testimony-main{
    display: flex;
    flex-wrap: wrap;
    flex:1 1 ;
    margin: auto;
    justify-content: space-evenly;
    margin-top: 3.125em;

}
.testimony-image{
    width:23.75em;
    height: 23.75em;
    margin-left: 2.5em;

}
.testimony-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.text-marg{
    margin-left:2em;
    margin-right:2em;
}


.ft-image {
    width: 23.75em;
    height: 23.75em;
}

    .ft-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .testimony-text {
        width: 40%;
    }
.contact{

    background-color: #242526;
    padding-bottom: 9.375em;
}

.contact-main{
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
}

.contact-address{
    padding-bottom: 2.375em;
    background-color: #0a0c0f;;
    overflow: hidden;



}
.contact-address-list{
    display: flex;
    background-color: #0a0c0f;;
    justify-content: space-evenly;
    flex-wrap: wrap;

}
.contact-list{
    margin: 1.25em 0em !important;
}
h4{
    text-transform: uppercase;
}

/* Desktop First (Side-by-Side) */
.media-container {
    display: flex;
    gap: 20px; /* Adds space between the image and the text */
    margin-left:15em;
    margin-right:15em;
}

.media-img {
    max-width: 100%;
    height: auto;
}

.des-text {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
}

.glowing-box-pulse {
    border: 2px solid #ffffff;
    animation: whiteGlow 2s infinite alternate;
}

@keyframes whiteGlow {
    0% {
        box-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
    }

    100% {
        box-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff; /* Deepens the glow at the peak of the pulse */
    }
}



/*MEDIA QUERIES*/
/*Large screens - Desktop*/
@media screen and (min-width: 1700px) {
    section{
        background-color: rgba(4,7,32,0.9);
    }
    .hero{

        margin: auto;
        height: 56.25em;
        width:100%
    }
    .hero-text{
        height: 56.25em;
    }
    .testimony-main{
        
        justify-content: space-evenly;
   }
   .contact-address-list{

       margin: auto;
       width: 70%;
   }

   .imageBox{
    border: solid; 
    border-width: thin; 
    border-radius: 0.4vw; 
    border-color: #000000;
}

.borderOne{
    box-shadow: 0.5rem 0.5rem #c7d4ff, -0.5rem -0.5rem #ccc;
}

.borderTwo{
    box-shadow: -0.5rem -0.5rem #c7d4ff, 0.5rem 0.5rem #ccc;
}

.borderThree{
    border: 5px solid hsl(0, 0%, 40%);
  
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
    
    border-radius: 0.5vw;
    
}
}

/*medium screens - Laptops*/
@media screen and (max-width: 1024px) {
    .hero {
        background-image: url("/img/Banner.png");
        height: 31.25em;
        width: 100%;
        background-position: center;
    }
    .hero-text{
        height: 31.25em;
    }
    h1{
        font-size: 4.375em;
    }
    .testimony-main{
        
        justify-content: space-evenly;
   }

   .imageBox{
    border: solid; 
    border-width: thin; 
    border-radius: 0.4vw; 
    border-color: #000000;
}

.borderOne{
    box-shadow: 0.5rem 0.5rem #c7d4ff, -0.5rem -0.5rem #ccc;
}

.borderTwo{
    box-shadow: -0.5rem -0.5rem #c7d4ff, 0.5rem 0.5rem #ccc;
}

.borderThree{
    border: 5px solid hsl(0, 0%, 40%);
  
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
    
    border-radius: 0.5vw;
    
}
}

/*Small screens - tablets*/
@media screen and (max-width: 768px) {
    .hero {
        background-image: url("/img/Banner.png");
        height: 37.5em;
        width: 100%;
        background-position: center;
    }
    .hero-text{
        height: 37.5em;
    }
    h1{
        font-size: 3.75em;
    }
    .about{
        overflow: hidden;
    }
    .title{
        font-size: 2.25em;
    }

    .imageBox{
    border: solid; 
    border-width: thin; 
    border-radius: 0.4vw; 
    border-color: #000000;
}

.borderOne{
    box-shadow: 0.5rem 0.5rem #c7d4ff, -0.5rem -0.5rem #ccc;
}

.borderTwo{
    box-shadow: -0.5rem -0.5rem #c7d4ff, 0.5rem 0.5rem #ccc;
}

.borderThree{
    border: 5px solid hsl(0, 0%, 40%);
  
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
    
    border-radius: 0.5vw;
    
}

    .media-container {
        flex-direction: column; /* Stacks the items vertically */
        text-align: center; /* Optional: Centers the text when stacked */
        margin-left: 0em;
        margin-right: 0em;
    }

    .ft-image {
        width: 100%;
        height: 30em;
    }

        .ft-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .text-marg {
        margin-left: 2em;
        margin-right: 2em;
    }

}

/*Extra small screens - phones*/
@media screen and (max-width: 480px) {
    .hero {
        background-image: url("/img/Banner.png");
        height: 31.25em;
        width: 100%;
        background-position: center;
    }
    .hero-text{
        height: 31.25em;
    }
    h1{
        font-size: 2.5em;
    }
    .title{
    font-size: 1.875em;
    padding:2.5em 0.625em;
    }
    h3{
        font-size: 1.5625em;
    }
    .testimony-main{
        justify-content: center;
    }
    .testimony-text{
        width: 80%;
    }
    .testimony-image{
        margin-left:0px;
        width:18.75em;
    }

    .imageBox{
    border: solid; 
    border-width: thin; 
    border-radius: 0.4vw; 
    border-color: #000000;
}

.borderOne{
    box-shadow: 0.5rem 0.5rem #c7d4ff, -0.5rem -0.5rem #ccc;
}

.borderTwo{
    box-shadow: -0.5rem -0.5rem #c7d4ff, 0.5rem 0.5rem #ccc;
}

.borderThree{
    border: 5px solid hsl(0, 0%, 40%);
  
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
    
    border-radius: 0.5vw;
    
}

.toto{
border: red;
    height: 24vh;
    -moz-border-radius:75%;
    -webkit-border-radius: 75%;
    width: 24vh;
    }

    .media-container {
        flex-direction: column; /* Stacks the items vertically */
        text-align: center; /* Optional: Centers the text when stacked */
        margin-left: 0em;
        margin-right: 0em;
    }

    .text-marg {
        margin-left: 2em;
        margin-right: 2em;
    }

}

@media (min-width: 1920px) {
    .main-area {
        max-width: 1400px;
        margin: 0 auto; /* Centers the content, creating massive automatic side margins */
        padding: 0 40px; /* Extra breathing room inside */
    }
}

/* 📺 For Mega-Wide Screens (4K Monitors) */
@media (min-width: 2560px) {
    .main-area {
        max-width: 1600px; /* Lets the content expand a bit more, but keeps it contained */
        margin: 0 auto;
    }
}