/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

@media (max-width: 2000px) {
body, html {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  color: #ffffff; position: absolute;
  
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Background Image */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("your-background.jpg") no-repeat center center/cover;
  z-index: -1;
  opacity: 0.9;
}

/* Layout */
.content {
  position: relative; margin-left: 10%; margin-top: 15%;
  width: 100%;
  height: 50%;
  padding: 5% 6%; padding-top: 0px; padding-bottom: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

/* Logo (top-left) */
.logo img {
  width: 280px; /* tuned to match screenshot */
  height: auto; scale: 200%;
}

/* Left column (logo + tagline + icons) */
.left-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info {
  margin-left: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 28%;
}

/* Event Name */
.info h1 {
  font-size: 2.5rem;
  font-weight: bold;
  scale: 150%;
}

/* Contact */
.info .phone {
  font-size: 1.2rem;
  margin-bottom: 0.5rem; margin-left: 30%;

}
.info .address {
  font-size: 1.2rem;
  font-weight: bold;
}

/* Tagline (bottom-left) */




/* Social Icons (under tagline) */
.social {
  display: block; position: absolute;
}

.social a {
  color: #ff4c61;
  font-size: 1.6rem;
  transition: transform 0.3s; bottom: 200px;

  
}


.phonestuff{
              margin-left: 50%; margin-top: -14%; position: absolute;

}

.fab .fa-google-plus-g :hover{ background: #ffa2f7;


}



.ifyoureadthisiwascodedbyalex {

    margin-left: -1000%;
    margin-right: 200%;
}

.hii{display: inline-block; scale: 200%; margin-right: -300px; position: absolute; margin-top: ;}

.byee{display: none;}

.thiswascodedbyalxbro{display: none;}

.footer{position: fixed;}

.fixedstuff{position: absolute;}
}
/* ---------------------- */
/* Responsive */
/* ---------------------- */
@media (max-width: 767px) {
  .content { position: fixed; left: -9%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
  }

  .logo img {
    width: 200px;
    margin-bottom: 1.2rem;
  }

  .info {
    margin: 10px;
    align-items: center;
  }

  .info h1 {
    font-size: 1.8rem;
  }

  .info .phone,
  .info .address {
    font-size: 1rem; position: relative; left: -50px; display: block ;
  }

  .tagline {
    position: fixed;
    margin-top: 1.2rem; margin-left: -28%; align-content: center;
    font-size: 1rem;
    
  }

.hii{display: block; scale: 200%; margin-top: 800px;;}
 
.social{display: block; position: relative; width: 100%; margin-left: -20; }

.social2{display: none;}

.footer{position: fixed;}

 .overlay2 {
  position: fixed;        /* stays fixed on screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient( to bottom, #1509b9, #140042); /* dark blue gradient */
  opacity: 0.7;           /* transparency */
  z-index: 0;             /* sits above background but below content */
  pointer-events: none;   /* not clickable, ignores mouse */

  

  }


  

 


.overlay{display: block;}
  










 @media (max-width: 375px) {

 .content { position: absolute; left: -9%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
  }

  .logo img {
    width: 200px;
    margin-bottom: 1.2rem; scale: 90%;
  }

  .info {
    margin: 10px;
    align-items: center;
  }

  .info h1 {
    font-size: 1.8rem;
  }

  .info .phone,
  .info .address {
    font-size: 1rem; position: absolute; display: block; 
  }

  .tagline {
    position: relative;
    margin-top: 1.2rem; margin-left: -30%; margin-bottom: -70px; align-content: center;
    font-size: 0.8rem;
    
  }
.social{display: block; bottom: -200px;}

.footer{position: fixed;}


 .background{position: fixed; overflow-y: hidden;}





 }

}

@media (max-height: 800px){

  .background{position: fixed; overflow-y: hidden;}

.fixedit{margin-left: 1%; display: block; position: relative;}

.phonecontainer{display: none;}

.social2{display: none;} 

.ugh{ margin-bottom: -30%px; margin-top: 150%;}








}


@media (max-width: 1500px){

  .background{position: fixed; overflow-y: hidden;}

.fixedit{margin-left: 20%; display: block; }

.phonecontainer{display: none;}








}

@media (max-height: 2000px){

    .background{position: fixed; overflow-y: hidden;}


    .phonecontainer{display: none;}
}

@media (max-height: 750px){

  
.fixedit{margin-left: 1%; display: block; position: relative;}

.phonecontainer{display: none;}

.social2{display: none;} 

.ugh{ %; margin-top: 60%; margin-left: 450px;

  }

  .phonestuff{margin-left: 60%; display: block; margin-top: -7%;}

  .logo{ scale: 80%; margin-left: -80px; margin-top: -100px;}
  
}