/*----------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------   ROOT STYLES  ----------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/

:root{
  --primary-color--: #001d44d7;
  --primary-color-transparent--: #00111158;
  --secondary-color--:#00326adb;
  --tertiary-color--: #a75600;
  --tertiary-color-transparent--:#a756007d;

  --primary-font-color--:#ffffff;
  --secondary-font-color--: #a75600;

  --primary-hover-color--:#018f7a;
  
  --primary-font--: "Poiret One", sans-serif;
  --secondary-font--:"Fira Sans", sans-serif;
}
html{
    scroll-behavior: smooth;
}

body{
    padding:0;
    margin:0;
    background: linear-gradient(#000000,#001d44d7);
}
.branding{
    margin-top:12vw;
    h1{
        font-family: var(--primary-font--);
        font-size: 7vw;
        margin: auto 0;
        justify-content: center;
        animation: fadeup 2s;
    }
    h2{
        font-size: 4vw;
        animation: fadeup 2s;
        margin:0;
    }
    position: absolute;
    display:flex;
    
}
.heading{
    justify-content: center;
    align-items: center;
    margin: auto 10vw;
}
.logo{
    position: relative;
    top:3vw;
    left:4vw;
    height: 20vw;
    width: 20vw;
    margin:1vw;
    animation: fadeup 2s;
}
.main-background-image{
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    z-index:-1;
}
.divider{
    width:100%;
}

/* TEXT & HEADINGS */
h1{
    color: var(--primary-font-color--);
    font-family: var(--primary-font--);
    font-size: 4vw;
}

h2{
    color: var(--secondary-font-color--);
    font-size: 2vw;
    font-family: var(--primary-font--);
}

p{
    color: var(--primary-font-color--);
    font-family: var(--primary-font--);
    font-size: 2vw;
}

.slogan{
    font-family: var(--primary-font--);
    color: var(--primary-font-color--);
    font-size: 6vw;
    animation: fadeup 5s;
}

/*----------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------   SECTIONS  ----------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/

/* HERO SECTION */
.hero-section{
    margin:0;
    display: block;
    justify-content: center;
    text-align: center;
}


.hero-message{
    padding:1vw;
    border: solid 0.5vw #a75600;
}

.cta-buttons{
    position: absolute;
    display: block;
    z-index: 0;
    margin:125% 2% 0% 57%;
    animation: fadeup 5s;
}

.cta-button{
    a{
        text-decoration: none;
        color: var(--primary-font-color--);
    }
    padding:4vw;
    margin:1vw;
    font-family: var(--primary-font--);
    font-size: 2vw;
    border-radius: 1vw;
    border:none;
    padding:1vw;
    background-color: var(--primary-color--);
    color: var(--primary-font-color--);
    &:hover{
        background-color: var(--tertiary-color--);

    }
}

.cta-button2{
    a{
        text-decoration: none;
        color: var(--primary-font-color--);
    }
    padding:4vw;
    
    font-family: var(--primary-font--);
    font-size: 2vw;
    border-radius: 1vw;
    border:none;
    padding:1vw;
    background-color: var(--tertiary-color--);
    color: var(--primary-font-color--);
    &:hover{
        background-color: var(--primary-color--);
    }
}

.hero-content-box{
    position: absolute;
    margin:80% 2% 0% 50%;
}

.hero-message-box{
    font-family: var(--primary-font--);
    color: var(--primary-font-color--);
    animation: fadeup 5s;
    z-index: 0;
    padding:1vw;
    background-color: var(--primary-color--);
}

/* ABOUT SECTION */
section{
    display: flex;
    text-align: center;
    margin:5vw;
}

.about-text{
    text-align: left;
    padding-right:2vw;
    animation: fadeup 2s;
}

.text{
    text-align: left;
    animation: fadeup 2s;
}

.profile-photo{
    margin:0vw 5vw;
    height:fit-content;
    width: 30vw;
    filter: drop-shadow(0 0 0.75rem var(--primary-color--));
    animation: fadeup 2s;
}

.image-left{
    padding:4vw 4vw;
    display: flex;
    height:50%;
    width: 20%;
    border-radius:9vw;
}
/* PROCESS SECTION */
.process-section{
    margin:5vw;
    text-align: left;
    animation: fadeup 2s;
}
.process-grid{
    h1{
        margin: 0;
    }
    p{
        justify-content: right;
    }
    justify-content: right;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(25%, 0.9fr));
}
.process-card{
    align-items: center;
    text-align: center;
    margin:1vw;
}
.step{
    display: block;
    margin: 0 auto;
    width: 5vw;
}
.arrow{
    height: 8vw;
    margin:auto;
}
/* SERVICES SECTION */
.services-section{
    display: flex;
    text-align: center;
    margin:5vw;
}

.services-text{
    text-align: left;
    padding-right:2vw;
    animation: fadeup 2s;
}
.service-cards{
    margin: 2vw auto;
    padding:0;
    justify-content: center;
    display: grid;
    grid-gap:0;
    grid-template-columns: repeat(auto-fill, minmax(30%, 0.9fr));
    
}

/* Sources:https://stackoverflow.com/questions/2027657/overlapping-elements-in-css  and https://www.youtube.com/watch?v=bhzBhbOJ5OE*/
.service-card{
    margin: 2vw;
    justify-content: center;
    position: relative;
    width:25vw;
    height: 25vw;
    align-items: center;
    
    &:hover{
        .coin-front{
            transition: transform 1.5s ease-in-out;
            transform: rotateY(-180deg);
        }
        .coin-back{
            transition: transform 1.5s ease-in-out;
            transform: rotateY(-0deg);
        }
    }

    .coin-front{
        position:absolute;
        backface-visibility: hidden;
        height:100%;
        z-index: 1;
        animation: glow 2s;
    }

    .coin-back{
        position:absolute;
        height:100%;
        z-index: 0;
        transform:rotateY(180deg);
        backface-visibility: hidden;
    }
}
/* CALL TO ACTION SECTION */

.cta-text{
    text-align: center;
    padding-right:2vw;
    animation: fadeup 2s;
    background-color: var(--primary-color-transparent--);
    border-radius: 5vw;
    padding: 4vw;
    
}

/* CONTACT SECTION */
.popup-contact-form{
  visibility: hidden;
  position: absolute;
  justify-content: center;
  margin:390% 25%;
  width: 50vw;
  height: 40vw;
  text-align: center;
  border-radius:5vw;
  color: var(--primary-color--);
  background-color: #071624e9;
  z-index: 2;
  animation: fadeup 4s;

  h1{
    font-family: var(--primary-font--);
    color: var(--primary-font-color--);
    font-size: 2vw;
  }

  textarea,input{
    color: var(--primary-font-color--);
    background-color: var(--primary-color--);
    border-radius:2vw;
    font-family: var(--primary-font--);
    font-size: 5vw;
    width:40vw;
    height: 2vw;
  }
  button{
    font-family: var(--primary-font--);
    font-size:2vw;
    color: var(--primary-font-color--);
    background-color: var(--primary-color--);
    border-radius:5vw;
    margin-top:2vw;
    margin-bottom:1vw;
    &:hover{
        color: var(--primary-font-color--);
        background-color: var(--tertiary-color--);
    }
  }
}
.close-button{
    margin-left:90%;
}


/*----------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------   SCREEN SIZES  ---------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/


/*-----------------------------------*/
/*----- 7680 X 4320 (8K Displays) ---*/
/*-----------------------------------*/

@media screen and (max-width: 7680px) {
  body{
    max-width: 7680px;
  }
}

/*-----------------------------------*/
/*--- 3840 X 2160 (4K Displays) -----*/
/*-----------------------------------*/

@media screen and (max-width: 3840px) {
  body{
    max-width: 3840px;
  }
    .cta-button2{ 
        margin:2vw;
    }  
}

/*-----------------------------------*/
/*-- 2560 X 1440 (2K/QHD Displays) --*/
/*-----------------------------------*/

@media screen and (max-width: 2560px) {
  body,html{
    max-width: 2560px;
  }

}

/*-----------------------------------*/
/*- 1920 X 1080 (Full HD Displays) --*/
/*-----------------------------------*/

@media screen and (max-width: 1920px) {
  body,html{
    max-width: 1920px;
  }
}


/*-----------------------------------*/
/*----- 1280 X 720 (HD Displays) ----*/
/*-----------------------------------*/

@media screen and (max-width: 1280px) {
  body,html{
    max-width: 1280px;
  }
}


/*-----------------------------------*/
/*----- 640 X 480 (SD Displays) -----*/
/*-----------------------------------*/

@media screen and (max-width: 640px) {
  body,html{
    max-width: 640px;
  }
}

/*------------------------------------*/
/*----------- Phone Displays ---------*/
/*------------------------------------*/

@media screen and (max-width: 600px) {

  body,html{
    max-width: 600px;
  }
  .divider{
    width:100%;
  }
  .branding{
    h1{
        font-size: 10vw;
        margin-top: 4vw;
   
    }
    h2{
        font-size: 5vw;
        margin:0;
    }
    position: absolute;
    display:flex;
    
}
.heading{
    justify-content: center;
    align-items: center;
    margin: auto 6vw;
}

  /* TEXT & HEADINGS */
    h1{
        font-size: 8vw;
    }

    h2{
        font-size: 4vw;
    }

    p{
        font-size: 5vw;
    }

    .slogan{
        font-size: 8vw;
       
    }
    .cta-buttons{
        margin:139% 3% 0% 50%;
    }
    .cta-button,.cta-button2{
        font-size: 6vw;
    }
    .cta-button2{
        align-self: center;
        margin:2vw;
    }
    .about-section{
        display:block;
    }
    .profile-photo{
        height:80vw;
        width:80vw;
        display:block;
        margin: 0vw auto;
    }
    .service-cards{
        grid-template-columns: repeat(auto-fill, minmax(100%, 0.4fr));
        
    }
    .service-card{
        width: 80vw;
        height: 80vw;
        margin:5vw 2vw;

        justify-content: center;
        text-align: left;
    }
    .coin-front,.coin-back{
        width: 80vw;
        padding: 0;
        margin:0;
    }
    .process-section{
    margin:5vw;
    text-align: left;
    animation: fadeup 2s;
    }
    .process-grid{
        h1{
            margin: 0;
        }
        p{
            justify-content: right;
        }
        justify-content: right;
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(60%, 1fr));
    }
    .process-card{
        align-items: center;
        text-align: center;
        margin:1vw;
    }
    .step{
        display: block;
        margin: 0 auto;
        width: 15vw;
    }
    .arrow{
        height: 8vw;
        margin:auto;
    }
 
    /* CONTACT SECTION */
    .popup-contact-form{
        margin:1270% 6.5%;
        width: 87vw;
        height: 128vw;
        .form-headings{
            margin:10vw;
            font-size: 8vw;
            margin: 0;
        }

        textarea,input{
            width:60vw;
            height:10vw;
            margin: 2vw;
        }
        button{
            margin-bottom:4vw;
            font-size:5vw;
        }
    }
}
/*----------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------   ANIMATIONS / TRANSITIONS  ----------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
@keyframes glow {
  from {
    text-shadow: 0 0 10px var(--tertiary-color--), 0 0 20px var(--tertiary-color--), 0 0 30px var(--tertiary-color--), 0 0 40px var(--tertiary-color--), 0 0 50px var(--tertiary-color--), 0 0 3vw var(--tertiary-color--), 0 0 4vw var(--tertiary-color--);
    filter: drop-shadow(0 0 0rem var(--tertiary-color--));
  }
  
  to {
    text-shadow: 0 0 20px var(--primary-color--), 0 0 30px var(--primary-color--) 0 0 40px var(--primary-color--) 0 0 50px var(--primary-color--) 0 0 60px var(--primary-color--) 0 0 70px var(--primary-color--) 0 0 80px var(--primary-color--);
    filter: drop-shadow(0 0 20rem var(--primary-color--));
  }
}

@keyframes flip-over {
  0% {
    transform: scale(0,1);
  }

  100% {
    transform: scale(0.9,1);
  }

}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }

}

@keyframes fadeup {
  from {
    transform: translateY(100%); 
    opacity: 0;
  }
  to {
    opacity:1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
  }
  to {
   transform: translateY(10vw); 
    opacity: 1;
  }

}