@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');


:root{
    --font: 'Red Hat Display', sans-serif;
    --heading: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6{
    font-family:var(--heading);
}

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
}
html{
    scroll-behavior:smooth;
}
body{
    
    background-color:#fff;
    font-size:1.1rem;
    font-family:var(--font);
  
}
.wrapper{
    width:min(1400px, calc(100% - 2rem));
    margin-inline:auto;
}
.flex-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;

}





nav{
    position:absolute;
    z-index:200;
    background-color:white;
    display:block;
    padding:1rem 2rem;
    margin-top:3rem;
    border-radius:100px;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
}
nav a, .close-menu{
    text-decoration:none;
    color:#444;
    font-weight:400;
    margin:0 0.8rem;
    font-size:0.94rem;
    text-transform:uppercase;
    transition:all 0.14s;
    display:block;
    position:relative;
}
nav a:hover{
    transform:translateY(-2px);
    color:#000;
}
nav a:after{
    content:'';
   background-color:#777;
   width:0%;
   position:absolute;
   left:0;
   bottom:-6px;
   height:2px;
   transition:all 0.7s cubic-bezier(.4,-0.01,.05,1);

}
nav a:before{
    z-index:3;
    content:'';
   background-color:#01548b;
   width:0%;
   position:absolute;
   right:0;
   bottom:-6px;
   height:2px;
    transition:all 0.7s cubic-bezier(.4,-0.01,.05,1);
    transition-delay:0s;
}
nav a:hover:after{
    width:100%;

}
nav a:hover:before{
    width:100%;

}

.logo img{
    margin-right:2rem;
    height:3rem;
}
.parallax-bg{
    min-height:92vh;
    width:100%;
    position:relative;
    display:grid;
    place-items:center;
    background-image: url("images/bgback.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    contain:paint;
    z-index:15;
}
.parallax-bg h1{
    z-index:-1;
    color:black;
    font-size:13vw;
    margin-top:5rem;
    line-height:11vw;
    animation: parallax linear;
    animation-timeline: scroll();
    --scalar: 0.7;
}
.parallax-bg h1 span{
    display:block;
    animation:fadeuptext 1.4s ease-out;
    animation-fill-mode: forwards;
    --delay-amount: 1.4;
    opacity:0;
    transform: translateY(20%);
    
}
.parallax-bg h1 span:nth-child(1){
    animation-delay:calc(0.1s * var(--delay-amount));
}
.parallax-bg h1 span:nth-child(2){
    animation-delay:calc(0.2s * var(--delay-amount));
}
.parallax-bg h1 span:nth-child(3){
    animation-delay:calc(0.3s * var(--delay-amount));
}
.parallax-bg div{

    width:100%;
    height:100%;
    position:absolute;
}
.parallax-bg div span{
    width:100%;
    height:100%;
    display:block;
    z-index:16;
    transform:translateX(0px);
    background-image: url("images/bgtop.png");
    background-size:cover;
    background-position:center;
    animation: parallax linear;
    animation-timeline: scroll();
    --scalar: 1;
}
@keyframes parallax {
    to{
        transform:translateY(calc(1000px * var(--scalar)));
    }
}

.main{
    display:grid;
    place-items:center;
    grid-row:1;
    grid-column: 1;;
}
.main > *{
    grid-column:1;
    grid-row:1;
}

@keyframes fadeuptext{
    0%{
        opacity:0;
        transform: translateY(20%);
    }
    100%{
        opacity:1;
        transform: translateY(0);
    }
}
.big-box{
    padding-top:7rem;
    padding-bottom:7rem;
}
.j-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:2rem;
}
.j-flex > *{
    flex:1;
}
.image-cover{
    object-fit:cover;
    display:block;
    width:100%;
    height:100%;
}
.heading{
    position:relative;
    font-size:3em;
    text-transform:uppercase;
    margin-bottom:2rem;
}
.text-center{
    text-align:center;
}
.angled-card{
    background-color:#f9f9f9;
    border-radius:0.6rem;
    padding:3rem 2rem;
    grid-column:1;
    grid-row:1;
    max-width:60%;
    box-shadow:0 9px 10px -9px rgba(0,0,0,0.4);
    position:relative;
    transform-style:preserve-3d;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    transition: all 0.4s ease-out;
}
.angled-card h3{
    font-size:1.5em;
    margin-block:2rem;
    text-transform:uppercase;

}
.angled-cards{
    perspective:20rem;
    display:grid;
    place-items:center;;
    align-items:stretch;
}
.angled-card:nth-child(1){
    transform: rotateY(-5deg) scale(0.6) rotate(-10deg);
    translate:-30%;
    z-index:3;
}
.angled-card:nth-child(2){
    transform: rotateY(-5deg) scale(0.75);
    z-index:4;
}
.angled-card:nth-child(3){
    transform: rotateY(-5deg) scale(0.9) rotate(10deg);
    z-index:5;
    translate:30%;
}
.heading:after{
    content:'';
    position:absolute;
    bottom:-1rem;
    left:0;
    width:0;
    height:2px;
    background-color:#01548b;
    transition:all 0.8s;
    transition-delay:0.4s;
}
.heading.active:after{
    width:calc(100% - 10rem);
}
.grey-box{
    background-color:#f6f6f6;
}
.skew-image{
    perspective:50rem;
}
.skew-image img{
    transform:rotateY(10deg) scale(0.9);
    box-shadow:0 9px 10px -9px rgba(0,0,0,0.4);
}
.company-logo{
    margin-bottom:3rem;
    max-height:3rem;
}
.button{
    padding:0.8rem 2rem;
    background-color:#01548b;
    color:white;
    border:none;
    border-radius:100px;
    font-size:1.1rem;
    text-transform:uppercase;
    cursor:pointer;
    transition:all 0.3s;
    display:inline-block;
    text-decoration:none;
    margin-top:2rem;
}
.button:hover{
    background-color:#012f4b;
}
.skew-image-rev img{
    transform:rotateY(-10deg) scale(0.9);
}
footer{
    background-color:#222;
    color:white;
    text-align:center;
    padding:2rem 0;
}
@media(max-width:980px){
    .big-box{
        padding-block:3rem;
    }
    .j-flex{
        flex-direction:column;
        text-align:center;
    }
    .j-flex-rev{
        flex-direction:column-reverse;
    }
    .skew-image img, .skew-image-rev img{
        transform:scale(1) rotateY(0);
        margin-bottom:2rem;
    }
    .skew-image{
        width:min(600px, calc(100% - 5rem));
        margin-inline:auto;
    }
}
.menu{
    display:flex;
    align-items:center;
}
.menu-toggle, .close-menu{
    display:none;
}
@media(max-width:780px){
    nav{
        width:calc(100% - 3rem);
        margin-top:1rem;
    }
    .menu{
        display:none;
    }
    .menu.active{
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        background-color:white;
        overflow-y: auto;
        gap:0;
    }
    .menu a, .close-menu{
        display:block;
        margin:0;
        padding:2rem;
        border-bottom:1px solid #e3e3e3;
    }
    .close-menu{
        /*remove all button styling*/
        background:transparent;
        border:none;
        padding:2rem;
        width:100%;
        text-align:left;
        background-color:#fff;
        border-radius:0.25rem;
        cursor:pointer;
        outline:none;
        display:block;
        position:relative;
        border-bottom:1px solid #e3e3e3;
    }
    

    .menu a:hover, .close-menu:hover{
        background-color:#f3f3f3;
        transform:translate(0, 0);
    }
    .menu a:after, .menu a:before{
        display:none;
    }
    .menu-toggle{
        /*remove button styling*/
        background:none;
        border:none;
        padding:1rem;
        background-color:#f3f3f3;
        border-radius:0.25rem;
        cursor:pointer;
        outline:none;
        display:block;
    }
}

#defense {
display:none;
}
#defense:target {
    display:block;
    width:100vw;
    height:100vh;
    padding:2rem;
    
    position:fixed;
    z-index:300;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}
.dismissModal {
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.3);
    display:block;
    top:0;
    left:0;
}
.modalContent {
    z-index:2;
     width:100vw;
     max-width:600px;
     max-height:300px;
    height:100vh;
    padding:2rem;
    background-color:white;
    border-radius:6px;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    position:fixed;
    box-shadow:0px 10px 30px rgba(0,0,0,0.4);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;

}
    .modalContent h2 {
    
    margin-bottom:1rem;}
    .modalContent p {
    
    flex-grow:20;}
    .modalContent a {
        align-self:flex-end;
        justify-self:flex-end;
    }