:root {
    --clr-neutral-white: #f2f2f2;
    --clr-neutral-grey: hsl(0, 0%, 75%);
    --clr-neutral-black: #141414;

    --clr-brand-primary: #d50a0d;
    --clr-brand-secondary: #22223B;
    --clr-brand-tertiary: #B5C3F4;

    --clr-op-primary: rgba(214, 10, 13, 0.4);

    --clr-glow: #50C878;
    --clr-glow-dim: #50c878b0;
    --clr-glow-light: #D0F1DB;

    --clr-feat1: #dbeafe;
    --clr-feat2: #ffedd5;
    --clr-feat3: #ffe4e6;
    --clr-feat4: #ccfbf1;
    --clr-feat5: #f5f5f4;
    --clr-feat6: #ede9fe;

    --ff-body: system-ui, sans-serif;

    --br: 0.25em;
    --pad: 0.25em;

    --h2-svg-size: 32px;

    --pg-margin: 10%;

    --animate-duration-ticker: 75s;
    --animate-duration-fade: 5s;
}


* {
    font: inherit;
    font-family: var(--ff-body);
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--clr-neutral-black);

    /* border: 1px solid lime; */
}

html {
    scroll-behavior: smooth;
}

body {
    background-image: url(./images/logo/NAVandHERO_IMAGE_bg\ red\ cape_1920x1080.png);
    background-attachment: fixed;
    background-position: top center;
}


section ul,
section ol,
footer ul,
nav ul { list-style-type: none; }


/* Navigation */

#header {
    background-image: url(./images/logo/NAVandHERO_IMAGE_bg\ red\ cape_1920x1080.png);
    background-position: top center;
    position: fixed;
    width: 100%;
    top: 0;
    transition: 0.2s;
    z-index: 100;
}

nav {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), var(--clr-brand-secondary));
    padding: 0.5em var(--pg-margin);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}



nav li {
    display: inline;
    margin-left: 2em;
}

.navLink {
    padding: 0.25em 0;
    border-bottom: 4px solid transparent;
}

.navLink:hover {
    color: var(--clr-glow);
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, var(--clr-glow), transparent);
}

#navCTA {
    text-transform: uppercase;
}

#navLogoContainer {
    border: 2px solid transparent;
    height: 5em;
    transition: 0.2s;
}

#navLogoImg {
    height: 100%;
    transition: 0.2s;
}



/* section control */

section {
    padding: 6em var(--pg-margin);
    min-height: 35dvh;
}


.darkCard {
    background-color:rgba(0, 0, 0, 0.2);

    /* background-image: 
        linear-gradient(0deg,#060a0f75,#060a0f45),
        linear-gradient(135deg,#15191f05,var(--clr-glow-dim)); */
    padding: 1em;
    border-radius: 1em;
}

.darkCard:hover {
    box-shadow: 0 0 5px var(--clr-neutral-black),
                0 0 25px var(--clr-glow);
}



.imgPending {
    border: 1px solid black;
    height: 50dvh;
    min-width: 50dvh;
}

.iconPending {
    border: 1px solid black;
    width: 50px;
    height: 50px;
}

.sectionHead {
    padding: 1em;
}

.sectionHeadSubtext {
    width: 75%;
    margin-inline: auto;
}

.sectionH2wrapper {
    background-color: rgba(0, 0, 0, 0.2);
    width: fit-content;
    border-bottom: 4px solid var(--clr-glow);
    border-radius: .5em .5em 2em 2em;
    box-shadow: 0 8px 24px var(--clr-neutral-black);
    margin-bottom: 2.5em;
    margin-inline: auto;

}

.sectionH2 {
    color: var(--clr-neutral-white);
    font-size: 1em;
    width: fit-content;
    text-transform: uppercase;
    padding: 0.5em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}


.svgIcons {
    width: var(--h2-svg-size);
    height: var(--h2-svg-size);
    fill: var(--clr-glow);
    
}

/* text sizing */


.sizeH3 {
    font-size: 1.2em;
    font-weight: 600;
}


.sizeSubtext {
    font-size: 0.8em;
    line-height: 1.5;
    margin-bottom: 0.5em;
}


.ts-h3 {
    font-size: 1.2em;
}

.ts-p1 {
    font-size: 1em;
    line-height: 1.8;
    margin-bottom: 0.5em
}

.ts-p2 {
    font-size: 0.8em;
    line-height: 1.8;
    margin-bottom: 0.5em;
}

.ts-p3{
    font-size: 1.2em;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

.ts-H4-xl {
    font-size: 2.8em;
    font-weight: 800;

}



/* text adjustments */

.ta-left {
    text-align: left;
}

.ta-upper {
    text-transform: uppercase;
    text-decoration: underline solid var(--clr-glow);
}

.tw-600 {
    font-weight: 600;
}

.ta-shadow-dark {
    text-shadow: 0 0 8px black;
}

.ta-shadow-light {
    text-shadow: 0 0 8px white;
}



/* section BG color */

.darkBG {
    background-color: var(--clr-brand-secondary);
}

.lightBG {
    background-color: var(--clr-neutral-white);
}

.darkBGtext {
    color: var(--clr-neutral-white);
}

.lightBGtext {
    color: var(--clr-neutral-black);
}



/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */
/* hero section */

#hero {
    padding-bottom: 8em;
    overflow: hidden;
    margin-top: 6em;
    position: relative;

    .wrapper {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr 1fr;
        gap: 2em;
    }

    #heroContent {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2rem;
        min-width: 400px;
    }
}


.heroH2 span {
    display: block;
    font-size: 3em;
    font-weight: 700;
    line-height: 1.05em;
}

.heroH2 span:nth-child(2) {
    color: var(--clr-glow);
}

#heroContent p {
    width: 100%;
}

.heroH2 span, #heroContent p {
    text-align: left;
}

.heroCarousel {
    width: 100%;
    height: 100%;
    position: relative;


    .heroH1 {
        position: absolute;
        top: 50%;
        font-size: 4em;
        font-weight: 700;
        left: 55%;
        transform: translate(-50%, -50%);
        color: var(--clr-neutral-white);
    }

    /* .heroImg {
        position: absolute;
        top: 50%;
        height: 120%;
        left: 0;
        border-radius: 2em;
        z-index: -2;
        transform: translateY(-50%);
    } */


    .hero-slideshow-container {
        width: 150%;
        height: 100%;
        border-radius: 2em 0 0 2em;
        position: absolute;
        z-index: -2;
        left: 0; 
        top: 50%;
        transform: translateY(-50%);
        overflow: hidden;
    }

    .heroSlides {
        display: none;
        width: 100%;
        height: 100%;
    }

    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }


    .fade {
        animation: var(--animate-duration-fade) fade;
    }
    
    @keyframes fade {
        from {opacity: .2} 
        to {opacity: 1}
    } 
}




/* Industry Ticker */

.ticker-wrap {
  
  position: absolute;
  bottom: 0;
  width: 100%;
  left: -10%;
  overflow: hidden;
  height: 3rem;
  background-color: rgba(#000, 0.9); 
  padding-left: 100%;
  box-sizing: content-box;

  .ticker {

    display: inline-block;
    height: 3rem;
    line-height: 3rem;  
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;

    -webkit-animation-iteration-count: infinite; 
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
   -webkit-animation-name: ticker;
           animation-name: ticker;
    -webkit-animation-duration: var(--animate-duration-ticker);
            animation-duration: var(--animate-duration-ticker);

    .ticker__item {

      display: inline-block;

      padding: 0 1.5rem;
      font-size: 1.5rem;
      color: white;   
      text-transform: capitalize;

    }
  }
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}




/* glow buttons */

.glowBtn {
    font-size: 1.5em;
    position: relative;
    display: inline-block;
    padding: 0.5em 1em;
    letter-spacing: 4px;
    color: var(--clr-glow);
    font-weight: bold;
    transition: .5s;
    overflow: hidden;
    cursor: pointer;
}

.glowBtn:hover {
    background-color: var(--clr-glow);
    color: var(--clr-brand-secondary);
    box-shadow: 0 0 5px var(--clr-glow),
                0 0 25px var(--clr-glow),
                0 0 60px var(--clr-glow);
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
    z-index: 1000;
}

.glowBtnBorder {
    border: 1px solid var(--clr-glow);
}

.glowBtn span {
    position: absolute;
    display: block;
}

.glowBtn span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-glow));
    animation: animate1 1s infinite;
}
@keyframes animate1 {
    0% { left: -100%; }
    100% { left: 100%; }
}

.glowBtn span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--clr-glow));
    animation: animate2 1s infinite;
    animation-delay: 0.25s;
}
@keyframes animate2 {
    0% { top: -100%; }
    100% { top: 100%; }
}

.glowBtn span:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(270deg, transparent, var(--clr-glow));
    animation: animate3 1s infinite;
    animation-delay: .5s;
}
@keyframes animate3 {
    0% { right: -100%; }
    100% { right: 100%; }
}

.glowBtn span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(360deg, transparent, var(--clr-glow));
    animation: animate4 1s infinite;
    animation-delay: .75s;
}
@keyframes animate4 {
    0% { bottom: -100%; }
    100% { bottom: 100%; }
}



/* features section */
.featuresContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2em;
    max-width: 840px;
    margin-inline: auto;
}


.featureItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.featureIcon {
    border-radius: 1em;
    padding: 1em;
    background-color: var(--clr-glow-light);
}

.featureIcon img {
    max-width: 50px;
    aspect-ratio: 1;
}




/* process section */

#process {
    background-color: var(--clr-brand-secondary);

    .sectionH2wrapper {
        background-color: var(--clr-brand-secondary);
        overflow: hidden;

        .sectionH2 {
            background-color:rgba(0, 0, 0, 0.2);
        }
    }
}

#processContainer {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.5em;
}

.processCard  {
    display: grid;
    grid-template-columns: 60px auto;
    grid-template-rows: auto auto;
    gap: 0.5em 1.5em;
    grid-template-areas:    "num step"
                            "num desc";

    div {
        color: var(--clr-brand-secondary);
        grid-area: num;
        font-size: 4em;
        border-radius: 2em 2em 0 0;
        background-image: linear-gradient(to bottom, var(--clr-glow), transparent);
    }

    h3 {
        grid-area: step;
        color: var(--clr-neutral-white);
    }

    p {
        grid-area: desc;
        color: var(--clr-neutral-white);
    }
}




/* benefits section */

.benefitCards {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1em;
    margin: 4em 0;
}

.benefitCards * {
    color: var(--clr-neutral-white);
}

.gradientCard {
    background-image: 
        linear-gradient(0deg,#060a0f75,#060a0f45),
        linear-gradient(135deg,#15191f05,var(--clr-glow-dim));
}

.benefitCard {
    display: flex;
    flex-direction: column;
    gap: 1em;
    flex: 1;
    min-width: 25%;
    border-radius: 1em;
    overflow: hidden;
    cursor: pointer;
    /* position: relative; */
    padding: 1.5em 2em;

    .benefitDropper {

        * {
            font-size: 0.8rem;
            text-align: left;
        }

        button {
            background: none;
            font-size: 1.2em;
            float: left;
            width: 1.4em;
            height: 1.4em;
            text-align: center;
            padding: 1px;
        }
    }

}

.bentoLarge {
    min-width: 60%;
    position: relative;
    flex-direction: row;

    .bentoLargeContent {
        width: 50%;
        transform: none;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 2em;
    }
}


.benefitHide {
    display: none;
}

#benefitImg1, #benefitImg2 {
    position: absolute;
    max-height: 100%;
    max-width: 45%;
    aspect-ratio: 1;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
    border-radius: 1em 0 0 1em;

}


#benefitImg2 {
    margin-right: 5%;
    max-width: 40%;
}



/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */
/* about section */

.aboutWrapper p,
.aboutContent * {
    color: var(--clr-neutral-white);
}

.aboutWrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2em;

}

.aboutContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    
}

.aboutCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}


.aboutList li {
    margin-bottom: 1.5em;
    margin-left: 2.5em;
    padding-left: 1em;
    position: relative;

    .aboutLiIcon {
        height: 32px;
        width: 32px;
        position: absolute;
        left: -32px;
        transform: translateY(-50%);
        top: 50%;
    }
}




/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */
/* cta section */


.ctaWrapper {
    background-color: var(--clr-brand-primary);
    border-radius: 3em;
    padding: 4em 8em;
    height: 80dvh;
    box-shadow: 0 0 8px black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
    grid-template-rows: auto;
    grid-template-areas:    "heading imge"
                            "cta imge";
    gap: 1em;
    align-items: center;


    .ctaHeading {
        grid-area: heading;
        margin: 0;
    }


    .ctaContent {
        grid-area: cta;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.5em;
        /* flex: 1 0 40dvw; */
        max-width: 300px;
    }


    .ctaImgWrapper {
        grid-area: imge;
    }


    .ctaImg {
        width: 100%;
        scale: 1.5;
    }
}










/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */
/* portfolio section */

.portfolioWrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.projectContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3em;  
    min-width: 0;
    max-height: 145px;
}

.projectImg {
    width: 30%;
    max-width: 220px;
}









/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */
/* contact form - modal #id01 */

/* reset text alignment for entire form */
#id01 * {
    text-align: left;
}

/* Full-width input fields */
input[type=text], input[type=email], select, textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 4px 0 8px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
  
  /* Style the label to display next to the inputs */
label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

label b {
    text-align: left;
}


/* Set a style for all buttons */
button {
    background-color: var(--clr-glow);
    color: var(--clr-neutral-black);
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    /* opacity: 0.8; */
    scale: 0.8;
  }
  
  
  /* Extra styles for the submit button */
  .submitbtn {
    float: right;
  }


  .fconsent {
    font-size: 0.8em;
  }
  
  /* Extra styles for the cancel button */
  .cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
  }
  
  /* Center the image and position the close button */
  .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
  }
  
  img.avatar {
    width: 40%;
    border-radius: 50%;
  }
  
  .container {
    padding: 16px;
  }
  
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    padding: 2em;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    /* border: 4px solid var(--clr-glow); */
    border-radius: 2em;
    width: 60%; /* Could be more or less, depending on screen size */
    box-shadow: 0 0 5px var(--clr-neutral-black),
                0 0 25px var(--clr-glow),
                0 0 60px var(--clr-glow);
  }
  
  /* The Close Button (x) */
  .close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: red;
    cursor: pointer;
  }
  
  /* Add Zoom Animation */
  .animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
  }
  
  @-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
  }
    
  @keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
  }
  
  
  
  /* Floating column for labels: 25% width */
  .col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
  }
  
  /* Floating column for inputs: 75% width */
  .col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  









/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */
/* contact section */

#id02 *, .contactHeader *, .contactGrid * {
    text-align: left;
}

.contactWrapper {
    border-radius: 3em;
    box-shadow: 0 0 16px black;
    padding: 2em;
    max-width: 1000px;
    margin-inline: auto;
}


 /* Floating column: 40% width */
 .col-40 {
    float: left;
    width: 40%;
    margin-top: 6px;
  }
  
  /* Floating column: 60% width */
  .col-60 {
    float: left;
    width: calc(100% - 325px);
    max-width: 60%;
    margin-top: 6px;
  }


/* contact details */

#contactDetails {
    background-color: var(--clr-brand-primary);
    border-radius: 2em;
    padding: 3em 2.5em;
    min-width: 325px;
    
}

.contactHeader *, .contactGrid * {
    color: var(--clr-neutral-white);
}

.contactHeader {
    margin-bottom: 1.5em;

    h4 {
        text-align: center;
    }
}


.contactItem {
    margin-bottom: 0.8em;
    margin-inline: auto;
    width:fit-content;
    max-width: 350px;


    .contactIcon {
        width: calc(25% - 1em);
        aspect-ratio: 1;
        max-width: 56px;
        overflow: hidden;
        margin-right: 1em;
        float: left;
        /* margin-top: 6px; */

    }
    
    .svgIcons {
        width: 100%;
        height: 100%;
    }

    .contactInfo {
        float: left;
        width: 75%;
        max-width: 250px;
        margin-top: 6px;
        
        p {border-bottom: 4px solid transparent;}
    }
}

.contactItem:hover,
.contactItem:focus {
    .contactInfo p {
        border-image-slice: 1;
        border-image-source: linear-gradient(to right, var(--clr-glow), transparent);
    }
}



/* contact form - #id02 */

#id02 {
    padding-left: 3em;
}


/* crockpot */

.crockpot, .formID {
    display: none;
}











/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */
/* footer section */

.footerContent {
    margin-top: 2em;
    margin-bottom: 2em;
    display: grid;
    grid-template-columns: 1.5fr 4px repeat(4, 1fr);
    gap: 0.5em;

    * {
        color: var(--clr-neutral-white);
    }

    .footerCol {
        padding: 1em;

        li, h3 {
            text-align: left;
        }

        li {
            margin-bottom: 0.5em;
            border-bottom: 4px solid transparent;
            padding: 0 0.25em;
        }

        /* li:hover {
            border-bottom: 4px solid;
            border-image-slice: 1;
            border-image-source: linear-gradient(to right, var(--clr-glow), transparent);
        } */
    }

    .footerDivider {
        background-image: linear-gradient(to bottom, var(--clr-glow), transparent);
    }


    /* .footerCol1 * {
        border: 1px solid lime;
    } */

    .footerCol1 {
        display: flex;
        flex-direction: column;
        gap: 1em;
        
        
        .footerLogo {

            img {
                width: 100%;
                margin-bottom: 0.5em;
            }
        }

        .NarrowScreen {display: none;}
    }

    .footerH3 {
        font-size: 1.2em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--clr-glow);
        margin-bottom: 1em;
    }

    .footerSocialLinks {
        margin-top: 1.5em;
        display: flex;
        gap: 1em; 

        .socialLink svg {
            width: 2em;
            height: 2em;
            fill: var(--clr-glow);
        }
    }
}






/* header and footer defaults */

footer {
    background-color: var(--clr-brand-secondary);
    color: var(--clr-neutral-grey);
    padding: 2em var(--pg-margin);
}


/* attribution */
.attribution { 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.attribution span, .attribution a { font-size: 1em; color: white; }
.attribution a { color: hsl(115, 93%, 59%); }


/* SEO requirements */

.hiddenFromView {
    display: none;
}




/* Media Queries */


/* 768px (tablets) */
@media only screen and (max-width: 800px) {
    :root {
        --pg-margin: 5%;
    }

    * {
        font-size: 12px;
    }

    section {
        padding: 4em var(--pg-margin);
        min-height: 20dvh;
    }

    #hero {
        .wrapper {
            display: flex;
            flex-direction: column-reverse;
        }

        #heroContent {
            align-items: center;

            * {
                text-shadow: 0 0 4px black;
            }

            #heroCTA:hover {
                text-shadow: none;
            }

            .heroH2 span, p {
                text-align: center;
            }

            

            .heroH2 span:nth-child(1),
            .heroH2 span:nth-child(3) {
                color: var(--clr-neutral-white);
            }
        }

        .heroCarousel {
            position: static;

            .heroH1 {
                position: static;
                width: 100%;
                transform: translate(0, 0);
            }


            .heroSlides {
                opacity: 0.3;

                
                img {
                    scale: 1.2;
                    object-position: 25%;
                }
            }

            .hero-slideshow-container {
                background-color: black;
                height: 100%;
                border-radius: 0;
            }
        }
    }




    #processContainer {
        flex-direction: column;
        gap: 2em;

        /* .processCard {
            display: flex;
            flex-direction: column;
            gap: 0.5em;
            justify-content: flex-start;
            align-items: stretch;

            div {
                text-align: left;
                padding-left: 0.5em;
                border-radius: 2em 0 0 2em;
                background-image: linear-gradient(to right, var(--clr-glow), transparent);
            }
        } */
    }


    .aboutContent {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }


    #ctaSection {
        .ctaWrapper {
            height: fit-content;
            padding-inline: 5%;
            grid-template-columns: minmax(250px, 1fr);
            grid-template-areas:    "heading"
                                    "imge"
                                    "cta";

            .ctaContent {
                justify-content: center;
                align-items: center;
                margin-inline: auto;
            }

            .ctaHeading {
                margin-inline: auto;
            }
            .ctaImg {
                width: 50%;
                scale: 1;
                margin-inline: auto 0;
            }
        }
    }


    #portfolio {
        .projectContainer {
            gap: 1.5em;

            .projectImg {
                padding: 0.3em;
            }
        }
    }


    .contactItem {
        max-width: 280px;
    }


    .col-25, .col-75, .col-40, .col-60, input[type=submit] {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
    }


    [class*="col-"] {
        width: 100%;
    }


    .footerContent {
        grid-template-columns: 1.5fr 4px repeat(2, 1fr);


        .footerCol1 {grid-area: 1 / 1 / 3 / 2;}
        .footerDivider {grid-area: 1 / 2 / 3 / 3;}
        .footerCol2 {grid-area: 1 / 3 / 2 / 4;}
        .footerCol3 {grid-area: 2 / 3 / 3 / 4;}
        .footerCol4 {grid-area: 2 / 4 / 3 / 5;}
        .footerCol5 {grid-area: 1 / 4 / 2 / 5;}
    }
}





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


    #navCTA {
        font-size: 1em;
    }

    #navLogoContainer {
        height: 4em;
    }


    /* #features {
        margin-top: 6em;
    } */

    .hiddenAt600 {
        display: none;
    }


    .benefitCard {
        min-width: 35%;
    }

    #benefitImg1, #benefitImg2 {
        display: none;
    }

    .contactWrapper {
        padding: 1em;
    }

    #contactDetails {
        min-width: 280px;
    }

    #id02 {
        padding-left: 1em;
    }



    .footerContent {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto) 4px auto;


        .footerCol1 {
            grid-area: 4 / 1 / 5 / 3;
            gap: 0;

            .WideScreen {display: none;}
            .NarrowScreen {display: block;}
            p {margin-left: auto;}

            .footerLogo {

                img {
                    margin-bottom: 0;
                }
            }
        }
        .footerDivider {
            grid-area: 3 / 1 / 4 / 3;
            background-image: linear-gradient(to right, var(--clr-glow), transparent);
        }
        .footerCol2 {grid-area: 1 / 1 / 2 / 2;}
        .footerCol3 {grid-area: 2 / 1 / 3 / 2;}
        .footerCol4 {grid-area: 2 / 2 / 3 / 3;}
        .footerCol5 {grid-area: 1 / 2 / 2 / 3;}
    }
}



/* 400px (small phones) */
@media only screen and (max-width: 400px) {

    /* nav {
        flex-direction: column;
        gap: 0;

        #navLogoContainer {
            margin-right: auto;
        }

        #navCTA {
            margin-left: auto;
        }
    } */

    #navCTA {
        font-size: 1em;
    }

    #navLogoContainer {
        height: 3em;
    }

    #hero {

        #heroContent {
            p {
                font-size: 0.9em;
                min-width: 320px;
            }
        }
    }

    #processContainer {
        flex-direction: column;

        .processCard {
            display: flex;
            flex-direction: column;
            gap: 0.5em;
            justify-content: flex-start;
            align-items: stretch;

            div {
                text-align: left;
                padding-left: 0.5em;
                border-radius: 2em 0 0 2em;
                background-image: linear-gradient(to right, var(--clr-glow), transparent);
            }
        }
    }



    #portfolio {
        .projectContainer {
            gap: 1em;

            
        }
    }


    .footerContent {
        margin-inline: 2em;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto) 4px auto;


        .footerCol1 {grid-area: 6 / 1 / 7 / 2;}
        .footerDivider {grid-area: 5 / 1 / 6 / 2;}
        .footerCol2 {grid-area: 4 / 1 / 5 / 2;}
        .footerCol3 {grid-area: 2 / 1 / 3 / 2;}
        .footerCol4 {grid-area: 3 / 1 / 4 / 2;}
        .footerCol5 {grid-area: 1 / 1 / 2 / 2;}
    }
}



/* Change styles for cancel button on extra small screens */
@media screen and (max-width: 300px) {
    
    .cancelbtn {
       width: 100%;
    }
}