/* ----------------------------------- */
/*            General Styles           */
/* ----------------------------------- */

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

:root{
  --white: #fff;
  --grey: #9e9e9e;
  --black: #252525;

  --purple: #4700e8;
  --violet: #f702ff;

  --bar-width: 60px;
  --bar-height: 8px;
  --hamburger-gap: 6px;
}

html{
  scroll-behavior: smooth;
  font-size: 62.5%
}

@media(max-width: 981px){
html,
body{
  overflow-x: hidden;
}
}

body {
  position: relative;

  font-family: 'General Sans', sans-serif;
  background-color: var(--black);
  color: var(--white);
}

.parallax-background{
  background-image: url(../media/fixed-site-background.gif);
  background-size: cover;
  background-size: cover;
  height: 600px;
  width: 100vw;
  position: fixed;
  top: 0;

  z-index: -1;

  @media(min-height: 600px){
    height: 800px;
  }

  @media(min-height: 800px){
    height: 1000px;
  }

  @media(min-height: 1200px){
    height: 100vh;
  }
}

/*Custom cursor + mobile + tablet conflict fix*/
@media only screen and (min-width:980px){

  html,
  body {
    cursor: url("/media/Cursor.png"), auto !important;
    }

  a, 
  .question, 
  .hamburger-icon_nav,
  button.send-button,
  #email-copy,
  #toTopBtn{
      cursor: url("/media/Pointer.png"), pointer;
    }

  }

button {
  background: none;
  border: none;
  font: inherit;
  color: var(--white);
}


/* ----------------------------------- */
/*                Fonts                */
/* ----------------------------------- */

@font-face {
  font-family: 'General Sans';
  src: url(/fonts/GeneralSans-Variable.ttf) format('truetype');
  font-weight: 1 1000;
}

@font-face {
  font-family: 'Poppins Regular';
  src: url(/fonts/Poppins-Regular.ttf);
}

@font-face {
  font-family: 'Poppins Light';
  src: url(/fonts/Poppins-Light.ttf);
}

@font-face {
  font-family: 'Oswald';
  src: url(/fonts/Oswald-VariableFont_wght.ttf);
  font-weight: 1 1000;
}


h2 {
  font-size: 4rem;
}


p {
  font-size: 1.7rem;
  line-height: 1.4em;
  font-weight: 500;
}

a {
  color: var(--white);
  text-decoration: none;
}

/* ----------------------------------- */
/*               Navigation            */
/* ----------------------------------- */

header {
  position: fixed;

  width: 100%;
  top: 0;

  transition: top 0.4s ease-in-out;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 100; 

  padding: 30px 0px;

  @media(max-width: 1400px){
    padding: 20px 0px;
  }
}

.nav-up {
  top: -120px; 
}

.header-content {
  width: 90%;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ----------------------------------- */
/*               Eye Logo              */
/* ----------------------------------- */

.logo-container {
  position: relative;
  z-index: 6969;
}

.eye-frame {
  display: block;
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.mobile-logo{
  display: block;
  width: 55px;
  height: 55px;
  border-radius: 50%;
}

.pupil {
  position: absolute;
  top: 22px;
  left: 21px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* ----------------------------------- */
/*           Navigation Links          */
/* ----------------------------------- */

@media(min-width: 980px){
.nav_header {
  position: relative;
  z-index: 10;

  border-radius: 50px;
  padding: 0px 10px;
  background-color: rgba(112, 112, 112, 0.2);
}

.link-container_nav {
  display: flex;
  align-items: center;
}

}

.link-container_nav li {
  list-style: none;
  white-space: nowrap;
  position: relative;

  display: flex;
  align-items: center;

}

.link-container_nav li a {
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;

  height: 100%;
  display: block;

  @media(min-width: 979px){
    font-size: 1.3rem;
    padding: 16px 20px;
    }
}


.highlight_nav {
    position: absolute;
    height: 38px;
    top: 6px; 
    background: linear-gradient(to left, #4700e8, #f702ff);
    border-radius: 25px;
    transition: .7s; 

    z-index: -1;
}

/* ----------------------------------- */
/*              Mobile Nav             */
/* ----------------------------------- */

.hamburger-icon_nav{
  display: flex;
  flex-direction: column;
  align-items: center;

  text-transform: uppercase;

  position: relative;
  z-index: 6969;
}

.hamburger-icon_nav svg{
  width: 43px;
  fill: var(--white);
}

/*menu text*/
.hamburger-icon_nav div{
  font-size: 1.2rem;
  margin-top: -5px;
}

/*Hamburger menu animation*/


/* Base styles for the bars */
.hamburger-icon_nav svg .bar {
  transition: transform 0.5s ease, opacity 0.5s ease;
  transform-origin: center;
}

/* Transform origins */
.hamburger-icon_nav svg .top-bar,
.hamburger-icon_nav svg .bottom-bar {
  transform-origin: center center;
  transform-box: fill-box;
}

/* Animation when the icon is open */
.hamburger-icon_nav.open svg .top-bar {
  transform: translateY(-200px) rotate(45deg);
}

.hamburger-icon_nav.open svg .middle-bar {
  opacity: 0;
}

.hamburger-icon_nav.open svg .bottom-bar {
  transform: translateY(200px) rotate(-45deg);
}


/**/

@media(max-width: 980px){

.no-scroll {
  overflow: hidden;
}

.mobile-menu-container_nav {

  padding-top: 160px;

  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 0%;

  z-index: 69;
  background-image: url(../media/fixed-site-background.gif);
  background-size: cover;
  box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;


  transition: width 0.6s ease-out;

  white-space: nowrap;
  overflow-x: hidden;

  overflow-y: auto; /* Allow scrolling within menu */

  @media(min-width: 620px){
    transition: width 0.8s ease-out;
  }

}

.mobile-menu-container_nav li {

  margin-left: 30px;
  width: 100%;
  position: relative;

  font-size: 3.5rem;
}

.bottom-mobile_nav{
  margin: 0px 30px 20px 30px;
  width: 100%;
}

.bottom-mobile_nav a p:nth-child(1){
  font-size: 2.2em;
  margin-bottom: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.bottom-mobile_nav a p:nth-child(2){
  font-size: 1.55em;
}

.mobile-menu-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;

  margin-top: 12px;
  margin-right: 60px;

}

.mobile-menu-grid div{
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  margin: 10px 0px;

  border: 1px solid var(--white);
  border-radius: 50px;

  font-size: 1.2em;
  font-weight: 500;
}



/* Onclick this class is added or removed */
.mobile-menu-container_nav.display_nav {
  width: 100%;
}


/* -------Mobile Menu Animation------- */

.mobile-menu-container_nav li {
  overflow: hidden;
}

/* Initial state of links */
.nav-link a {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Animated state of links */
.nav-link a.aniLink {
  opacity: 1;
  transform: translateY(0);
}

/* Accesibility Maxxing */
@media (prefers-reduced-motion) {
  .nav-link a {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
}

/* Disable transitions on desktop */
@media screen and (min-width: 981px) {
  .nav-link a {
    transition: none;
  }
}

}

/* ----------------------------------- */
/*               Footer                */
/* ----------------------------------- */

footer{
padding: 150px 0px 50px 0px;

background-color: var(--black);

overflow: hidden;

@media(max-width: 980px){
  padding-top: 60px;
}
}

footer p{
font-size: 1vw;
font-weight: 600;
}

.main-p{
text-align: center;
font-size: 1.9vw;
font-weight: 600;

@media(max-width: 980px){
  font-size: 6vw;
  margin-bottom: 0px;
}
@media(max-width: 500px){
  font-size: 7vw;
  margin-bottom: 5px;
}

}

footer p a{
text-decoration: none;
}

p.cta-p{
  text-align: center;
}

.cta_footer{
font-size: 14.4vw;
line-height: 1em;
letter-spacing: 2px;
font-family: 'Oswald', sans-serif;
text-align: center;
text-transform: uppercase;


@media(max-width: 980px){
  font-size: 33.5vw;
}
}

.footer-links_container{
max-width: 100%;
width: 80%;
margin: 60px auto 100px auto;

display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;

@media(max-width: 980px){
  width: 95%;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;

  margin-bottom: 60px;
}

}

.footer-links h2{
text-transform: uppercase;
font-size: 2.2rem;

padding-bottom: 6px;
border-bottom: 2px solid var(--white);
margin-bottom: 15px;
}

.footer-links ul li{
list-style: none;
margin-top: 10px;
font-size: 1.8rem;
font-weight: 500;

}

.footer-links ul li a{
text-decoration: none;
}

/*centre social media icons*/
.social-logo_container{
  display: flex;
  align-items: center;
}

.social-logo_container img{
  margin-left: 2px;
  margin-top: 2px;
}

/*Info footer*/

.info_footer{
width: 80%;

margin: 0 auto;

display: grid;
grid-template-columns: 1fr 1fr;

@media(max-width: 980px){
  width: 95%;
  grid-template-columns: 3fr 1fr;
}
}

.right-info_footer{

display: flex;
justify-content: space-between;
align-items: flex-end;

@media(max-width: 980px){
  justify-content: flex-end;
}
}

.right-info_footer a{
  text-decoration: none;
}

.left-info_footer{
display: flex;
align-items: flex-end;
}

.left-info_footer .visible-websites_copyright{
font-size: 4.6rem;
font-family: 'Oswald', sans-serif;
font-weight: 600;
line-height: 1em;

@media(max-width: 980px){
  font-size: 3.2rem;
}
}

/*----------------------------Stars---------------------------*/

@keyframes background-pan {
from {
  background-position: 0% center;
}

to {
  background-position: -200% center;
}
}

@keyframes scale {
from, to {
  transform: scale(0);
}

50% {
  transform: scale(5);
}
}

@keyframes rotate {
from {
  transform: rotate(0deg);
}

to {
  transform: rotate(180deg);
}
}

.magic {
display: inline-block;
position: relative;
}

.magic > .magic-star {
--size: clamp(20px, 1.5vw, 30px);

animation: scale 800ms ease forwards;
display: inline-block;
height: var(--size);
left: var(--star-left);
position: absolute;
top: var(--star-top);
width: var(--size);
}

.magic > .magic-star > svg {
animation: rotate 2000ms linear infinite;
display: inline-block;
opacity: 0.75;
pointer-events: none;
}

.magic > .magic-star > svg > path {
fill: var(--violet);
}

.magic > .magic-text,
.magic-footer-text:hover, .to-top_footer, .case-study_item:hover h4{
animation: background-pan 2.5s linear infinite;
background: linear-gradient(
  to right,
  var(--purple),
  var(--violet),
  var(--white),
  var(--purple)
  
);
background-size: 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/*Clock*/

@media(max-width: 980px){
.local-time_footer{
display: none;
}
}

.local-time_footer p{
font-size: 2.2rem;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
}

.local-time_footer span{
font-size: 1.9rem;
font-weight: 400;
}

.local-time_footer p:nth-child(2){
font-size: 1.6rem;
font-weight: 300;
}


/*To top button*/

.to-top_footer{
font-size: 2.8rem;

@media(max-width: 980px){
  font-size: 2.6rem;
}
}

#toTopBtn{
background-color: var(--white);
width: 75px;
height: 75px;
border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

overflow: hidden;

@media(max-width: 980px){
  width: 60px;
  height: 60px;
}
}

#toTopBtn svg{
  width: 55%;
  margin-top: 16px;
  margin-bottom: 60px;

  transition: margin-top 0.5s ease;

  @media(max-width: 981px){
    margin-top: 12px;
  }
}


/* ----------------------------------- */
/*            Media Queries            */
/* ----------------------------------- */

@media (max-width: 981px) {
  .hide-mobile { 
    display: none; 
  }
}

@media (min-width: 980px) {
  .hide-desktop { 
    display: none; 
  }
}