@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


html{
  max-width: 100%;
  overflow-x: hidden;
}

body {
 font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow-x:hidden;
  animation: all 0.5s ease-in-out anim; 
  scroll-behavior: smooth;
 position:relative
}

.text {
  text-transform: uppercase;
}

.logo {
  width: 200px;
}

.nav-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 20px;
}

.open-btn {
  position: fixed;
  top: 10px;
  left: 10px;
}

.nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  background-color: #F8F7F2;
}

.nav.visible {
  transform: translateX(0);
 
}

.nav-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: 0.4s;
}

.nav-black.visible {
  transition-delay: 0s;
}

.nav-red {
  background-color: rgb(0, 187, 255);
  width: 95%;
  transition-delay: 0.2s;
}

.nav-red.visible {
  transition-delay: 0.2s;
}


.nav-white {
    background-color: #F8F7F2; 
  width: 95%;
  padding: 40px;
  position: relative;
  transition-delay: 0s;
}

.nav-white.visible {
  transition-delay: 0.4s;
}

.close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
}

.list {
  list-style-type: none;
  padding: 0;
}

.list li {
  margin: 20px 0;
}

.list li a {
  color: rgb(0, 221, 255);
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}

.list ul {
  list-style-type: none;
  padding-left: 20px;
}


.nav-logo{
  position: absolute;
  top: 0px;
  left: 50px;
  width: 70px;
}
.container-hero {
  color: #e5e5e5;
  font-size: 2.26rem;
  padding: 6%;
 
}

.animation {
  height:100px;
  overflow:hidden;
}

.animation > div > div {
 
  height:5.6rem;
  margin-bottom: 5rem; 
  display:block;
}

.animation div:first-child {
  animation: text-animation 10s infinite;
}
.hero-main{
  position: relative;
  width: 100%;
 font-family:"Montserrat", sans-serif;
 animation: animation4 1s ease ;
 z-index: 999;


 
}

h3{
  font-family: "San Francisco";
  font-weight: 500;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
  color: #000000;
  font-size: 1.2rem;
  margin-top: -10px;
  margin-bottom: -10px;
  text-align: center;
  animation: animation4 1s ease ;
  padding: 5%;
}
.p-hero {
  color: black;
  font-size: x-large;
  animation: animation4 1s ease ;
}
@keyframes animation4 {
  0%{transform: translateX(-100%);}
 100%{transform: translateY(0%);}
  
}
.btns button  a{
  text-decoration: none;
 }
button {
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  color: #00000080;
  text-shadow: none;
  background: transparent;
  cursor: pointer;
  box-shadow: transparent;
  border: 1px solid #00000080;
  transition: 0.5s ease;
  user-select: none;
  text-decoration: none;
 
}

.btns{
  justify-content: center;
  justify-items: center;
 display:grid;
 grid-template-columns: auto auto auto;
 gap: 10px;
  
}
#btn:hover
 {
  color: #ffffff;
  background: #008cff;
  border: 1px solid #008cff;
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;
  box-shadow: 0 0 5px #008cff, 0 0 20px #008cff, 0 0 50px #008cff,
    0 0 100px #008cff;
}
#btn2:hover
 {
  color: #ffffff;
  background: #ff00f2;
  border: 1px solid #ff00f2;
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;
  box-shadow: 0 0 5px #ff00f2, 0 0 20px #ff00f2, 0 0 50px #ff00f2,
    0 0 100px#ff00f2;
}
#btn3:hover
 {
  color: #ffffff;
  background: #00ff40;
  border: 1px solid#00ff40;
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;
  box-shadow: 0 0 5px #00ff40, 0 0 20px #00ff40, 0 0 50px #00ff40,
    0 0 100px #00ff40;
}
.hero-text{
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4.3rem;
}
.pic1{
  position: relative;
  top: 0;
  left: 0;
 width: 60%;
 justify-self: center;
 animation: animation3 25s ease ;

}
.hero-pics{
  overflow: hidden;
}


.pic2 img{
  scale: 1.6;
}
.pic2{
  position: relative;
  top: 0;
  left: 0;
 width: 100%;
 justify-self:center;}
.pic3{
  position: relative;
  top: 0;
  left: 0;
 width: 50%;
 margin-left: 9%;
 justify-self: center;
}
.pic4 img{
  scale: 1.2;
}
.pic4{
  position: relative;
  top: 0;
  left: 0;
 width: 100%;
 justify-self: center;
 margin-right: 20%;
}
.pic5{
  position: relative;
  top: 0;
  left: 0;
 width: 40%;
 justify-self: center;
margin-left: 20%;
margin-top: 5px;
animation: animation3 25s ease ;



}

.grid-pics{
  position: relative;
  padding-left: 20%;
  padding-right: 25.5%;
  gap: 10px;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  justify-content:center;
  align-items: center;
  animation: animation3 40s ease ;
 

  
}
@keyframes animation3 {
  0%{transform: translateX(100%);}
  10%{transform: translateX(0%);}
  70%{transform: translateX(7%);}
  100%{transform: translateX(0%);}
  
}
.hero-pics img{
  width: 100%;
  height: auto; 
  margin-top: 8px;
  
  filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.3));
 
  border-radius: 3px;
  border: white 3px solid;
}
.hero-pics{
  position: absolute;
  margin-right: -650px;
  transform: rotate(36deg);
  

  
}
.body-cont{
  position: absolute;
  margin: 0%;
  padding: 0%;
  top: 100%;
  background-color: white;
  display: block;
  width: 100%;
  height: 100%;

  
  
}

@keyframes text-animation {
  0% {margin-top: 0;background-position: 0% 50%;}
  10% {margin-top: 0;}
  15% {margin-top: -5.6rem;}
  50% {margin-top: -5.6rem;background-position: 100% 50%;}
  80% {margin-top: 0rem;}
  100% {margin-top: 0rem;background-position: 0% 50%;}
}

.contact-area {
    border-bottom: 1px solid #353C46;
    background: #1A1E25;
    

}
.foot{
  position: relative;
  bottom: 0px;
  top: 150px;
}
.contact-content p {
    font-size: 15px;
    margin: 30px 0 60px;
    position: relative;
}

.contact-content p::after {
    background: #353C46;
    bottom: -30px;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    width: 80%;
}

.contact-content h6 {
    color: #8b9199;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px;
}

.contact-content span {
    color: #353c47;
    margin: 0 10px;
}

.contact-social {
    margin-top: 30px;
}

 .foot {
  background-color: lightgrey;
  margin-top: 10%;

  padding: 7%;
}
.links{
justify-content: center;
  text-align: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  gap: 10px;
}
.links a{
  text-decoration: none;
  color: black;
  font-size: 20px;

 
  transition: all 0.3s ease-in-out;
}
.foot {
  display: grid;
  grid-template-columns:50% 50%;
  justify-content: space-evenly;
}
*, ::after, ::before {
  box-sizing: border-box;
}


.contact-social > ul {
    display: inline-flex;
}

.contact-social ul li a {
    border: 1px solid #8b9199;
    color: #8b9199;
    display: inline-block;
    height: 40px;
    margin: 0 10px;
    padding-top: 7px;
    transition: all 0.4s ease 0s;
    width: 40px;
}

.contact-social ul li a:hover {
    border: 1px solid #FAB702;
    color: #00e1ff;
}

.contact-content img {
    max-width: 210px;
}
 @media (max-width:1000px) {
  .hero-text{
    font-size: 50px;
  }
 }
 @media (max-width:615px){
  .foot {
    display: grid;
    grid-template-columns:auto;
    justify-content: space-evenly;
  }
  .hero-text{
    font-size: 40px;
    
  }
 .hero-main{
  margin-top: -50px;
  }
 
  .body-cont{
    top:70%
  }
  .hero-pics{
    position: absolute;
    margin-right: -620px;
    transform: rotate(36deg);
    margin-top: -130px;
    
  
    
  }

  .grid-pics{
    padding-left: 15%;
  }
  .pic1{
    margin-left: -500px;
    margin-top: -100px;
  }
 }
 @media (max-width:375px){
  .hero-text{
    font-size: 30px;
  }
  .btns{
    justify-content: center;
    text-align: center;
    justify-items: center;
    align-content: center;
    align-items: center;
   display:grid;
   grid-template-columns: auto auto ;
   gap: 10px;
    
  }
  .hero-pics{
    position: absolute;
    margin-right: -620px;
    margin-top: -100px;
    transform: rotate(36deg);
    
  
    
  }
  .grid-pics{
    padding-left: 15%;
  }
  .pic1{
    margin-left: -200px;
  }
  .btn3d{
    margin-left: 100%;
  }
  .pic5{
 
  margin-left: 5%;
  
  }
  .body-cont{
    top: 80%;
  }
 }

.loader {    
  --r1: 154%;
  --r2: 68.5%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%; 
  position: absolute;
 
  z-index: 9999;
  background:
    radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
    radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%),
    radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%,0% 0%,100% 0%;
  background-repeat:no-repeat;
  animation: l9 1s infinite linear;
  display: flex;
  justify-content: center;

}

#loader.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
::-webkit-scrollbar{
  width: 0px;
  
}



@keyframes l9 {
    33%  {background-position:    0% 33% ,100% 33% ,200% 33% }
    66%  {background-position: -100%  66%,0%   66% ,100% 66% }
    100% {background-position:    0% 100%,100% 100%,200% 100%}
}