*, 
::before,
::after{
    box-sizing: border-box;

}
:root{
    --secondary-color: linear-gradient(to bottom,  #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    --secondary-color-top: linear-gradient(to top,  #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    --header-color: #f3e7e9;
    --dark-mode-color: rgb(16, 25, 34);
}

body, html {
    margin: 0;
    padding: 0;
    font-family: "FreeMono, monospace";
    scroll-behavior: smooth;
    overflow-x: hidden
}


/* Navigation bar */ /*--------------------------------------------*/
/* for combinaiton l-logo and oy */
#img-h1-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

/* header's main container */
#header {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;    
    flex-wrap: wrap;
    background: var(--header-color); 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
}   
#oy{
    font-size: 1.8em;
    color: black;
}

#nav-bar {
  padding: 1.3rem;

  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid black; */
}

#nav-bar ul {
    list-style: none;
    font-size: 1.2rem;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;       
    margin: 0;
    padding: 0; 
}

/* #nav-bar ul li a */
.nav-link {
    font-size: 1.3rem;
    color: black;
    cursor: pointer;
    text-decoration: none;
    position: relative; 
     padding: 10px 20px;
    /* margin: 0 5px;  */
} 


/*----------------------------------------------  */
/* hoover for nav-bar */

  /* #nav-bar ul li a::before,
  #nav-bar ul li a::after { */
  .nav-link::before,
  .nav-link::after {
    content: "";
    position: absolute;
    display: block;
    border: 0px solid transparent;
    width: 0%;
    height: 0%;
    transition: all 0.3s ease;
}

  
.nav-link::after {
    top: 0;
    left: 0;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
  }
  
  .nav-link::before {
    right: 0;
    bottom: 0;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
  }
  
  #nav-bar ul li a:hover::before,
  #nav-bar ul li a:hover::after {
    width: 10px;
    height: 10px;
    /* border-color:  black */
    border-color: #00f2fe; 
  }
/*----------------------------------------------  */
/*----------------------------------------------  */


/* Scroll Icon Styling */
.scrollme {
 
    position: fixed;
    bottom: 1rem;
    left: 46.4%;
    transform: translateX(-50%);
    opacity: 0.8;
    animation: bounce 2s infinite;

  }
  
  .scrollme svg path {
    stroke:#4facfe;
    stroke-width: 2px;
    fill: none;
    
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }
  
/* /----------------------------------------------------------------- */

/* /----------------------------------------------------------------- */
  h1 {
    font-size: 6rem;
    margin:0;
}

p{
  font-size: 1.3rem;
  margin: 0;
  padding: 0;
}

/* Home section =====================================================*/
 .home-article {
    height: 100vh;
  

    display: grid;
    grid-template-columns: minmax(15rem, 1fr) auto  2.5fr;
    column-gap: 2rem;

}

#home-header{
    align-self: center;
    justify-self: end;

    text-align: center;


}

.div-grid {
    align-self: center;
    padding-right: 2rem;



}
/* Add modern line */
.line {
    width: 2px;                /* Thin line */
    height: 150px;             /* Height depends on content */
    background: linear-gradient(to bottom, #00f2fe,#4facfe, #00f2fe); /* Gradient line */
    margin: 1rem auto;   
    border-radius: 5px;      
    /* animation: growLine 1.5s ease-in-out forwards; */
    box-shadow:#bfd9fe 0px 0px 10px 0px;

    align-self: center;

  }

  /* Line Animation   =================================== */
  @keyframes growLine {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: 140px;
      opacity: 1;
      
    }
  }
/*----------------------------------------------  */


.features-article {
  height: 100vh;
  overflow-x: hidden;
  /* margin: 0;
  padding: 0; */
  display: grid;
  grid-template-columns: minmax(1rem, 15%) minmax(20rem, auto) 1fr;
  column-gap: 2rem;

}

header[id="features-header"]  {
  grid-column: 3/3;
  align-self: center;
  padding-right: 8rem;
  text-align: center;
} 

.features-container-div, .features-container {
 
  padding:0;
  margin: 0;
  list-style: none;
  grid-column: 2/2;
  grid-row: 1/1;
  align-self: center;
  
 
} 

.features-container-div >  ul > li >h3 {
  font-size: 1.5rem;
  font-weight: bold;
  /* color: white */
  margin:1rem 0
}


#features-line {
  
  /* animation: growLineFeatures 4s ease-in-out forwards;   */
  /* height: 25rem; */
  padding:0;
  margin: 0;
  justify-self: end;
 
}

@keyframes growLineFeatures {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 28rem;
    opacity: 1;
  
  }
}

/* Description section's style *****************/
#Description {
  height: 100vh;

}


#description-article{
  height: inherit;
  display: grid;
  grid-template-columns: minmax(1rem, 10%) repeat(2, 1fr) minmax(1rem, 10%);
  grid-template-rows: 1fr 1.5fr;
  gap: 1rem;
 
  
}
#header-description{
  justify-self: center;
  align-self: end;

  grid-column: 2/2;
}

#p-description {
  justify-content: stretch;
  align-self: stretch;
  grid-column: 2/2;
}

#you-video{
  grid-area: 2 / 3 /2 / 3;
  align-self: start;
  justify-self: center;


}

/*==========================================================================*/
.line-package{
 
  height: 2px;
  
  background: linear-gradient(to bottom, #00f2fe,#4facfe, #00f2fe); /* Gradient line */

  margin: 1rem auto;   
  border-radius: 5px; 
  box-shadow:#bfd9fe 0px 0px 10px 0px;

}

/* This is for packages section */
#Packages {
  height: 100vh;
  /* width: 100vw; */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;

  box-sizing: border-box;
  

}

/* This style is for div container that contains our two primary packages */
.packages-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;

  box-sizing: border-box;

}

.header-packages {
  text-align: center;
}

.package-name{
  font-size: 2rem;
  padding:0;
  margin:0;
  text-align: center;
  list-style: none;
}

.package-basic, .package-pro{
  padding: 2rem;
  margin: 1rem;
  border-radius: 16px;
  transition: .5s;

  box-shadow: #4facfe 2px 3px 5px -4px;
  box-sizing: border-box;

}


.package-button {
  font-size: 1rem;
  padding: 12px; 
  border: none;
  border-radius: 6px;
  box-shadow: #0e5b5f5e 1px 3px 5px -2px;
  background: transparent;
  color: black;
  position: relative;
  top: 10px;
  left: 5em;
  font-weight: bold;
}


.package-button:hover {
  background: #00f1fe65;

  transition: 0.5s;
  cursor: pointer;

}

.package-basic:hover, .package-pro:hover{
  transform: scale(1);

    box-shadow: #0e5b5f93 20px 25px 20px -20px;


}

.available-mark::before{
  /* content: '✔'; */
  content: "\2713 \fe0e";
  color: #4facfe;
  position: relative;
  top:20px;
  right: 20px
}


.x-mark::before {
  /* content: '✘'; */
  content: "\2717 \fe0e";
  position: relative;
  top:20px;
  right: 20px;
  color: #4facfe;

} 



/* handling list style */
.package-li {
  margin: 1rem;
list-style: none;

}

/* Footer style configuration ----------------------------*/
#footer  {
  height: 50vh;
  width: 100vw;
  background-color: var(--header-color);

  display: grid;
  grid-template-columns: 10% 1fr 1fr 10%;
  grid-template-rows: auto 10%;

  
 column-gap: 1rem;
}
#form {
  grid-column: 2/2;

 display: flex;
 flex-direction: column;
 padding-top: 2rem;
 gap:1rem;
 flex-wrap: wrap;
}

#email-address{
  max-height: 2.4rem;
  max-width: 15rem;
  border-radius: 6px;
  border: none;

  box-shadow:#bfd9fe 0px 0px 10px 0px;
  padding: .5rem;
  background-color: #e3eeffbb
}

#questions {
  max-height: 10rem;
  max-width: 40rem;
  min-height: 10rem;
  border-radius: 6px;
  border:none;
  box-shadow:#bfd9fe 0px 0px 10px 0px;
  padding: .5rem;
  background-color: #e3eeffbb


}
#form-btn {
  width: 7rem;
  height: 2rem;
  background-color: var(--header-color) ;
  font-size: 0.9rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color:black;
  border: 1px solid black;
}

#form-btn:hover{
  box-shadow: 0px 0px  2px 0px;

}
.copyright-icons-container{
 
  display: grid;
  grid-column: 3/3;
  grid-row: 1/1;
grid-template-rows: 2fr 1fr;
/* align-items: center; */
justify-content: center;
gap:1rem 0

}

.social-icons {
  align-self: unset;
  display: grid;
  font-size: 3rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;

  justify-items: center;
  column-gap: 0.5rem;
  align-self: end;

} 

#copyright-p{
  align-self: start;
  font-size: 1rem;
}

.social-icons > a {
  font-style: none;
  color: black;
  font-size: 3rem;
}

/* Animation for revealing text =================================== */
@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

 

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }




/* dark-light mode */       /*--------------------------------------------*/
#icon-light {

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;    
  color: black;
}

#icon-dark {

  padding: 0.2rem
}
#theme-toggle {
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 0;

}

#theme-toggle:hover {
    cursor: pointer;

}

.backgrounds {
  background: var(--secondary-color);
}

 .dark-mode  {
    background: var(--dark-mode-color);
    color: var(--header-color);

}
.dark-mode-btn {
  color:aqua;
}


/* Animation during scrolling ======================== */


.hidden {
  opacity: 0;
}

.show-header {
  opacity: 1;
  animation: slideInLeft 1s ease-in-out forwards;
}


.line-vertical-show {
  opacity: 1;
  animation: growLine 1.5s ease-in-out forwards;
} 

.grid-p-show {
  opacity: 1;
  animation: fadeInUp 1.5s ease-out forwards;
  
}

.grid-p-show p {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
  
}


.grid-p-show p:nth-child(1) {
  animation-delay: 0.2s;
}
.grid-p-show p:nth-child(2) {
  animation-delay: 0.5s;
}
.grid-p-show p:nth-child(3) {
  animation-delay: 1s
}

.features-line-show{
  opacity: 1;

  animation: growLineFeatures 2.5s ease-in-out forwards;  

}

.features-header-show {
  opacity: 1;

  animation: slideInRight 1.5s ease-in-out forwards;

}



.features-container-show {
  opacity: 1;
  animation: fadeInUp 1.5s ease-out forwards;
}

.features-container-show li {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
}


.features-container-show li:nth-child(1){
  animation-delay:  0.1s;
}

.features-container-show li:nth-child(2){
  animation-delay: 0.4s;
}


.features-container-show li:nth-child(3){
  animation-delay: 0.7s;
}


.features-container-show li:nth-child(4){
  animation-delay: 1s;
  --index: 5;

}

.features-container-show li:nth-child(5) {
  animation-delay: 1.3s;
}



.header-p-description-show {
  opacity: 1;
  animation: fadeInUp 1.3s ease-out forwards;

}

.vid-description-show {
  opacity: 1;
  animation: slideInRight 1.3s ease-in-out forwards;
}


.header-packages-show {
  opacity: 1;
  animation: slideInLeft 1s ease-in-out forwards;
}

.packages-container-show {
  opacity: 1;
  animation: slideInRight 1s ease-in-out forwards;
}

.packages-container-show > div {
  opacity: 0;
  animation: slideInRight 1s ease-in-out forwards;
}

.packages-container-show div:nth-child(1){
  animation-delay: 0.5;
}

.packages-container-show div:nth-child(2){
  animation-delay: 1s;
}
/******************Response sections **********************/

#menu-toggle {
  border: none;
  background: transparent;
  margin:0;
  padding: 0;
  display: none;
}
.burger-menu {
  width: 1.7em;
  /* margin: 0 auto; */
  font-size: 1.9em;
  display: none;
}

@media (prefers-reduced-motion: no-preference){
  * {
  scroll-behavior: smooth;
}
}

@media only screen and (max-width: 1150px ){
  
 
  #footer, #form{
    display: flex;
    flex-direction: column;
    justify-content: center;    
    align-self: center;
    flex-wrap: wrap;
    height: auto;
    padding: 1rem
  }
  #copyright-p{
    align-self: center;
    font-size: 0.8rem;
  }

  #header-packages{
    padding-top: 4rem;
  }


  .package-li {
    margin: 0;
    padding: 0;
  }

  .package-button {
  
    position: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

  }
}

@media only screen and (max-width: 777px){
  #Packages {
    width: 100vw;
    height: auto;
  }
  #header-packages{
    margin-top: 2rem;

  }

  .social-icons > a{
    font-size: 2rem
  }
}

/* only screen and */
@media only screen and  (max-width: 1100px) {
  #description-article{
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
  #header-description{
  
    align-self: center;
  }
  
  #p-description {
  
    margin: 0 2rem
  }
  
  #you-video{
  
  align-self: center;
  }
}

/* Handling burger menu and nav-bar */
@media only screen and  (max-width: 850px){
  #header {
    height: 3rem;
  }

  .burger-menu {
    display: block;
  }

  #menu-toggle {
    display: block;
  }

  #nav-bar{
   
    display: none;
  }

  #nav-bar > ul {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }

  .menu-show  {
    width: 100%;
    height: auto;
    background-color: var(--header-color);
 
    position: absolute;
    /* top: 42px; */
    left:0;
    top: 2.5rem

  }
  



}


@media only screen and  (max-width: 800px) {
  
  
  /******** Home section ********/

  .home-article {
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem
  } 
  #line-separator {
    transform: rotate(90deg);
    animation: none;
    padding: 0;
    margin: 0;
  }

  .div-grid {
    position: relative;
    left: 1rem;
    padding-left: 0.4rem;
    
  }
  
  /******** Features section ********/

  .features-article {
    display: grid;
    grid-template-columns: 0.1rem 1fr 0.2rem;
    grid-template-rows: 1fr 2fr;
    gap: 0.9rem;
    padding: 1rem;
    height: auto;
  }

  .features-container-div{
  
    grid-column : 2/2;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

  }
  #features-header  {
  
    grid-column: 2/2;
    grid-row: 1/1;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  } 
  #features-header > h1, #features-header > h2 {
    margin: 0;
    padding: 0;
    justify-items: flex-end;


  }

  #features-line {
    grid-row: 2/2;
    grid-column: 1/1;
    height: 2rem;
    padding:0;
    margin: 0;
    justify-self: center;
    align-self: center;
  }


  /**** Description section ********/

    #header-description > h1{
      font-size: 4rem;
     
    }
    
    /***Packages section ********/

  }


  @media only screen and (max-width: 600px){
    #you-video {
      width: 100%;
    }

   
  }

  @media only screen and (max-width: 421px) {
  
      .features-article {
        padding-top: 20%;
     
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
      }

      .features-container-div > ul >li > p  {
       
        font-size: 1.1rem
       }
       .features-container-div ul li h3 {
        font-size: 1.2rem;
        margin: 0.6rem 0;
       }
      
    
      #features-line {
    
        animation: none;
        height: 4rem;
            max-height: 7rem;

      }
      #features-header > h1 {
        font-size: 4rem;
      }
      #features-header > h2 {
        padding: 0 0.2rem;
        font-size: 1.2rem;
      }
     
/***Description section --------------------------------------*/
      #header-description > h1{
        margin-top: 3rem;
      }
      #p-description {
        font-size: 1.1rem;
      }

      #header-packages > h1 {
        font-size: 4rem;
        margin-top: 2rem;
      }
 }


/***
***TODO: "iphone" --> get in touch button / svg color / nav-bar's wrong gap
--- Treshold for the packages section
**/