/*Global*/
    :root {
  --primary-bg-color: #FFF9EB;
  --secondary-bg-color: #e3e3ff;
  --third-bg-color: #E2F2F1;
  --fourth-bg-color: #AAD9BB;
  --fifth-bg-color: #F6FEAA;
  --sixth-bg-color: #FBEBDA;
  --seven-bg-color: rgb(255, 238, 206);

  --primary-color: #028C6A;
  --secondary-color: #FF8C42;
  --third-color: #62C370;
  --fourth-color: #F96265;
  --fifth-color: #08787A;

  --one-contrast-color: #FFC099;
  
  --primary-text-color: #7A2F00;
  --secondary-text-color: #373737;
  --contrast-text-color: #5C5CFF;
  --contrast-text-2: #01747E; 
  --button-text-dark: #331700;
}

@font-face {
    font-family: 'Karla';
    src: url('/fonts/karla/Karla-Regular.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Karla';
    src: url('/fonts/karla/Karla-SemiBold.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
  font-family: "Corben";
  src: url('/fonts/corben/Corben-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face  {
  font-family: "Corben";
  src: url('/fonts/corben/Corben-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
body {
    margin: 0 0 0 0;
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    position: relative;
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    }
.hide-section {
        display: none;
    }
.box-wrap-voice {
    display: flex; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    gap: 3vw;
}
.orange-box {
    border: 1px solid var(--secondary-color); 
    width: 350px;
}
.inner-box {
margin: 20 auto; 
width: 80%;
display: flex; 
justify-content: space-between; 
flex-direction: column;
}
.inner-text {
}
.audio-1 {
    margin: 20 auto;
    width: 240;
}
.audio-2 {
    width: 240;
    margin-top: 10px;
}
    /* Text Styles Font*/
h1, h2, h3, h4, .p-header {
    font-family: 'Corben', serif;
    font-weight: 300;
    line-height: 1.3;
}
h1 {
    font-size: calc(3vw + 1.4rem);
    margin: 0;
    padding: 15 0 35 0;
    line-height: 1;
    }
h2 {
    font-size: 3.2rem;
    margin: 0;
    padding: 15 0 25 0;
    }
.h2-smaller {
    font-size: 2.5rem;
}
h3 {
    font-size: 1.7rem;
    margin: 10 0; 
    padding: 0;
    }
h3.testimonials {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    }
h3.demo {
    font-size: 20px;
    margin: 30 0 0 0;
    padding: 0;
    }
h4 {
    font-size: 1.5rem;
    margin: 0;
    }
p {
    font-size: 18px;
    margin: 0;
    padding: 0;
    }
.large-p > p {
      font-size: clamp(1.5rem, -0.875rem + 2.8vw, 1.8rem);
}
.reg-font {
    font-family: 'Karla', sans-serif;
    font-weight: 300;
}
.demo-sound {
    font-size: 18px;
}
li {
    font-size: 18px;
    margin: 5 0;
    }
.featured-add-text {
    font-size: 20px; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    font-weight: 100;
    margin: 0;
    padding-bottom: 35px;
    }
.small-head {
    font-size: 22px;
    padding: 0;
    }
.big-title {
    font-size: 2.7rem;
    font-weight: bold;
    margin: 0;
    padding: 15 0 25 0;
    }
.center-text {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    height: 100%;
    }
.small-header1 {
    font-weight: 300;
    font-size: 20px;
    padding: 0;
    margin: 0 0 15 0;
    color: var(--primary-color);
    border-bottom: 2px solid var(--third-color);
    }
.footer-text {
    min-width: 150px;
    }
.footer-text > h2 {
    font-size: 22px;
    margin: 0;
    padding: 0px;
    }
.footer-links {
    text-decoration: none;
    color: var(--primary-text-color);
    cursor: pointer;
    }
.content-spacer {
    }
.content-spacer > p {
    margin: 0em 0em 1.5em 0em;
    }
.content-space1 {
    width: 10%;
    height: 10%;
    }
.blog-style-format > p > a {
    color: var(--contrast-text-color);
    }
.blog-style-format > h2 {
    margin: 40 0 0 0;
    }
.grand-arches-title {
    text-align: left; 
    margin: 100 30 0 0;
}
/* Header */
.topblock {
    height: 3vh;
    width: 100%;
    display: flex;
    justify-content: right;
    padding: 5 0 0 0;
    align-items: center;
    }
.topnav {
    padding-left: 5px;
    }
.main-nav {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-around;
    }
.main-nav > li {
    width: 150px;
    margin: 0px 50px;
    padding: 15px 0px;
}
.socialimg {
    width: 20px;
    padding: 5px;
    }
#desktop-menu {
    display: flex;
}
 #mobile-menu {
    display: none;
 }

 /* Hamburger Icon Menu - Mobile Menu */
#hamburger-icon {
    margin: auto 0;
    cursor: pointer;
    display: none;
    padding: 3vw;
}
#hamburger-icon > div {
width: 35px;
height: 3px;
background-color: var(--secondary-color);
margin: 6px;
transition: 0.4s;
}
.open .bar1 {
-webkit-transform: rotate(45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-6px, 6px);
}
.open .bar2 {
opacity: 0;
}
.open .bar3 {
-webkit-transform: rotate(45deg) translate(-6px, -8px);
transform: rotate(45deg) translate(-6px, -8px);
}
.open .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.mobile-menu {
    display: none;
    position: absolute;
    z-index: 10;
    left: 0;
    margin: 50px 0px;
    height: fit-content;
    width: 100%;
    background-color: var(--secondary-bg-color);
}
.mobile-menu > li {
    list-style: none;
    margin: 3vh 0;
}

/* style*/
.title-text {
    font-size: 35px;
    color: var(--primary-text-color);
    text-decoration: none;
    text-align: left;
    width: auto;
    padding-left: 20px;
    }
.service-navtext {
    color: var(--secondary-text-color);
    font-weight: 500;
    margin: 0;
    text-decoration: none;
    }
ul.service-navtext {
    list-style-type: none;
    }
.home-quick-linksList {
    list-style-type: none;
}
.home-quick-linksList > li {
}
/*links*/

a {
    color: var(--primary-text-color);
    text-decoration: none;
    }
a.testimonials {
    color: var(--third-color);
    font-weight: 600;
    text-decoration: none;
    }
a.nav-link {
   font-size: 20px;
}
a.nav-link:hover {
    text-decoration: 2px wavy var(--secondary-color) underline;
   }


/*Buttons*/
.button-style-A {
    text-decoration: none;
    font-size: 18px;
    color:var(--button-text-dark);
    background-color: var(--secondary-color);
    border-radius: 5px;
    padding: 12px;
    margin: 0;
    width: fit-content;
    }
.button-style-A:hover {
    text-decoration: none;
    color:var(--button-text-dark);
    background-color: var(--one-contrast-color);
    border-radius: 5px;
    padding: 12px;
    margin: 0;
    width: fit-content;
    }
.button-style-A-outline {
    text-decoration: none;
    font-size: 18px;
    color:var(--button-text-dark);
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    padding: 12px;
    margin: 0;
    width: fit-content;
    }
.button-style-A-outline:hover {
    text-decoration: none;
    color:var(--button-text-dark);
    background-color: var(--one-contrast-color);
    border-radius: 5px;
    padding: 12px;
    margin: 0;
    width: fit-content;
    }
.button-style-B {
    text-decoration: none;
    font-size: 18px;
    color:var(--button-text-dark);
    background-color: inherit;
    border: 1px solid var(--third-color);
    padding: 15px;
    margin: 25 0;
    width: auto;
    }
.button-style-B:hover {
    text-decoration: none;
    color:var(--button-text-dark);
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--third-color);
    padding: 15px;
    margin: 25 0;
    width: auto;
    }
.voice-service-box {
    background-color: var(--secondary-bg-color);
}
.voice-service-box:hover {
    background-color: var(--fifth-bg-color);
}
/* Body Blocks */
.full-width {
    width: 100vw; 
}
.wide {
    width: 98vw;
    margin: auto;
}
.reg {
    width: 85vw;
    margin: auto;
}
.reg-small {
    width: 75vw;
    max-width:;
    margin: auto;
}
.tight {
    width: 60%;
    margin: auto;
}
.tiny-text {
    max-width: 450px;
}
.tight-text {
    max-width: 500px;
}
.reg-text {
    max-width: 650px;
    min-width: 300px;
}
.wide-text {
    max-width: 780px;
}
.exwide-text {
    max-width: 850px;
    min-width: 300px;
}
.tight-marg {
    margin: 5vh auto 5vh auto;
}
.head-marg {
    margin: 0px auto 10vh auto;
}
.reg-marg {
    margin: 8vh auto;
}
.large-marg {
    margin: 20vh auto;
}
.little-pad-pad {
 padding: 5vh 0px;
}
.variable-flex-row {
    display: flex;
    flex-direction: row;
}
.variable-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}
.variable-flex-row-1200 {
    display: flex;
    flex-direction: row;
}
.variable-flex-column {
    display: flex;
    flex-direction: column;
}
.fifty {
    width: 50%;
    margin: 2vw;
}
/* Top block */
.top-wrapper {
    height:700px; 
    padding-top: 50px; 
    padding-bottom: 100px; 
    margin: auto; 
    display: flex;
}
.top-card {
    width: 50%; 
    height: 100%; 
    display: flex;
    }
.top-card-pages {
    background-color: var(--secondary-color);
    }
.top-textbox {
    max-width: 600px; 
    margin: auto;
    padding: 20px;
    }
.top-alt-side {
    width: 50%; 
    height: 100%; 
    display: flex; 
    flex-direction: column;
    }
.top-image {
    overflow: hidden;   
    }
.main-square {
    width: 40vw;
    height: 100%;
    }
.main-head-text {
    width: 40vw; margin: auto; display: flex; flex-direction: column; gap: 0;
    }
/* Service cards */
.service-card-wrapper {
    width: 100%; 
    background-color: var(--fourth-color); 
    height: auto; 
    padding: 50 0 100 0;
     }
.service-card-all {
    width:95%; 
    margin: auto;
     }
.service-card-header-textbox {
    padding-top: 20px;
     }
.service-card-card-wrap {
    margin: 100 0 0 0; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between;
     }
.service-card {
    background-color: var(--secondary-color); 
    max-width: 23%; 
    padding: 200 40 10 40;
     }
    /* Breakdown */
.breakdown-wrapper {
    display: flex; 
    width: 95%; 
    margin: 150 auto;
    }
.breakdown-main-textbox {
    display: flex; 
    align-items: end; 
    padding: 50 0; 
    width: 45%;
    }
    /* Explain block*/
.explain-text-wrap {
        width: 40%; border-top: 3px solid var(--secondary-color); border-bottom:3px solid var(--secondary-color);
    }
.explain-text {
        padding: 5vh;
    }
.explain-img {
        max-width: 60%; margin: 0 0 0 55;
    }
/* Testimonials*/
        .testimonial-content {
        }
        .testimonial-content > p {
            font-size: 22px;
        }
/* VO Features*/
    .features {
        display: flex; 
        flex-direction: row; 
        align-items: center;
        height: 70vh;
    }
    .features-div {
        width: 50%;
    }
    .features-img {
    }
    .clients-logo-img {
        width: 100%; height: 100%; object-fit: cover;
    }
    .session-box {
        margin: auto; padding: 30px;
    }
 /* Contact */
 .contact-text-wrap {
    width: 50%; margin: auto; display: flex; flex-direction: column; gap: 0;
 }
 .contact-form-wrap {
    background-color: var(--secondary-bg-color); width: 50%; height: 75vh; display: flex; position: relative;
 }
/* About */
.about-texts {
    display: flex; 
    align-items: flex-end; 
    justify-content: center;
}
.about-texts-center {
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 50%;
}
.about-texts-experience {
    margin: 50;
}
.abt > h3 {
    font-size: 20px;
}
.about-img-wrap {
    background-color: #FF8C42; width: 50%; height: 75vh; display: flex; position: relative;
}
.about-img {
    width: 50%;
    display: flex;
    align-items: center;
}
.about-imgs-style {
    width: 100%;
}
.about-color-block {
    width: 50%; height: 700px; background-color: var(--secondary-bg-color);
}
/* Misc Voiceover Page */
.studio-imgs-wrap {
    width: 70%;
}
.studio-text {
    width: 30%
}
.studio-img-1 {
height: 600px; margin: 50px;
}
.studio-img-2-wrap {
    width: 50%;
}
.studio-img-2 {
height: 700px; margin: 50px; padding: 120 0 0 0;
}
/* Whats on next */
.whats-on-next {
    margin-top: -160px;
}
.whats-on-box {
    background-color: var(--fifth-color); 
    display: flex;  
    height: 400px; 
}
/* STYLE - Color Box */
    .color-box-1 {
        display: flex; 
        align-items: center; 
        padding: 100;
    }
    .color-box-spacer {
        width: 10%;
    }
    .color-box-2-int {
        display: flex; 
        flex-direction: column; 
        padding: 100 50 100 0;
    }
    .color-box-listing-style {
        margin: auto; 
        gap: 50px; 
    }
    /* STYLE - Portfolio Images */
    .port-image-cover {
        height: 240px;
        width: 240px;
    }
    .port-image-cover > a {
    height: 240px;
        width: 240px;
    }
    .port-image-cover > a > img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
    /* STYLE - Port See More Images */
    .cmore-image-cover {
        height: 360;
        width: 240px;
    }
    .cmore-image-cover > a {
    height: 360;
        width: 240px;
    }
    .cmore-image-cover > a > img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
      /* STYLE - Left Head cover image */
    .lhead-image-cover {
        height: 600px;
        width: 85%;
    }
    .lhead-image-cover > a {
    height: 600px;
    width: 360px;
    }
    .lhead-image-cover > a > img {
        object-fit: cover;
        height: 100%;
        width: 100%;
     }
    /* STYLE - Contact Form */
    form > label > p {
        margin: 10 0;
        font-size: 20px;
    }
    form > label > input, textarea {
        margin: 0 0 30 0;
    }
    form > label > textarea {
        resize: vertical;
    }
    .cf-input {
        width: 100%;
        font-size: 18px;
        border: 3px solid var(--secondary-color);
        border-radius: 50px;
        padding: 20px;
        font-family: 'Karla', sans-serif;     
    }
    .cf-input:focus {
        border: 3px solid var(--secondary-color);
        background-color: var(--third-bg-color);
        outline: none;
        padding: 20 40;
        transition-duration: 0.5s;
    }
    .formbutton {
                text-decoration: none;
                color: var(--primary-text-color);
                border: none;
                background-color: var(--third-color);
                padding: 20px;
                margin: 25 0;
                width: auto;
                transition-duration: 0.5s;
    }
    .formbutton:hover {
                background-color: var(--secondary-color);
                cursor:pointer;
    }
/* Images */
.center-image {
    overflow: hidden;
    display: flex; 
    justify-content: center;
}
.left-image {
    overflow: hidden;
    display: flex; 
    justify-content: flex-start;
}
.head-image {
    overflow: hidden;
    display: flex; 
    justify-content: center;
}
.visual-gal-a {
    justify-content: center; gap: 1vw; height:80vh;
}
.visual-gal-a-main {
    width: 50%; height: 80vh;
}
.visual-gal-a-main > img {
    max-height: 100%; object-fit:cover;
}
.visual-gal-a-1 {
    display: flex;
    flex-direction: column;
    width: 25%; 
    gap: 1vw;
}
.visual-gal-a-1 > img {
    object-fit: cover;
}
.visual-gal-a-1-large {
    height: 50vh; 
}
.visual-gal-a-1-small {
    height: 30vh;
}
.vo-work-background {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.no-squish {
    min-width: 350px;
}
/* Accessories */
.project-short-details {
    padding-bottom: 5px;
    padding-right: 40px;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    margin: 20px;
}
.project-short-details-container {
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
    align-items: flex-start;
}
.project-divider {
    border-bottom: 5px double var(--fifth-color);
    margin: 50 auto;
}

/* Project Pages */
        .project-head {
            background-color: var(--secondary-bg-color); 
            display: inline-block; 
            position: absolute; 
            top: 20vh; 
            left: 60vw; 
            padding: 50px;
        }
        .project-head > h1 {
            font-size: 7.5em;
        }
        .project-feat-img {
            height: 85vh; width: 70vw; left: 10vw;
        }
        .short-text-wrap {
            width: 70%;
        }
        .project-short-text {
            text-align: center;
        }
        .project-short-text > p {
            font-size: 35px;
            font-weight: 500; 
        }
        .project-short-details-text {
            font-size: 24px;
            margin: 10 0 0 0;
        }
        .project-short-details-header {
            padding: 10 0 0 0;
            font-weight: 600;
        }
        .project-institute-img {
            width: 100%; height: 100%; object-fit: contain; object-position: left;
        }
        .project-flavour-text {
        }
        .project-flavour-text > p {
            font-size: 50px;
            font-weight: 600;
            padding: 30 0;
            margin: 0;
        }
        .flavour-img {
            width: 100%; 
            height: 85vh;
        }
    /*Footer*/
        .footerbase {
            width:100%;
            bottom: 0px;
            margin: 0;
            position: relative;
            z-index: 3;
        }
 /*Style*/
     /*Buttons*/
            /* Main Nav Buttons */
            .navigate button {
                background-color: inherit;
                border: inherit;
                margin: none;
                padding: 10px;
                cursor: pointer;
                height: 100%;
                font-size: 15px;
                font-weight:200;
                font-family: 'Karla', sans-serif;
            }
    /*Corners*/
.small-corner {
    border-radius: 5px;
}
.reg-corner {
    border-radius: 5%;
}
/* Responsive */
 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 850px) {
    #desktop-menu {
        display: none;
    }
    #hamburger-icon, #mobile-menu {
        display:block;
        }
    .reg, .tight, .reg-small {
        width: 90%; 
    }
    .variable-flex-row, .features, .variable-row-reverse {
        flex-direction: column;
    }
    .variable-flex-column {
        flex-direction: row;
    }
    .inner-text > h2 {
        font-size: 12vw;
    }
    .orange-box {
        width: 100vw;
        margin: auto;
    }
    .features-div, .studio-text, .studio-imgs-wrap, .main-square, .main-head-text, .explain-text-wrap, .studio-img-2-wrap, .about-texts-center, .short-text-wrap {
        width: 100%;
    }
    .features-img {
        max-width: 100%;
        margin: 10vw 0vw 10vw 0vw;
    }
    .studio-img-1, .studio-img-2 {
        margin: 0; 
        height: 50vh;
        padding: 0;
    }
    .studio-img-1 {
        display: none;
    }
    .whats-on-next {
        margin-top: -100px;
    }
    .whats-on-box {
        padding: 100 0;
    }
    .explain-img {
        margin: 20 0 0 0;
        max-width: 100%;
    }
    .color-box-1 {
        padding: 15vw;
    }
    .color-box-spacer {
        border: 1px solid var(--primary-color); 
        width: 90%;
        margin: auto;
    }
    .color-box-2-int {
        padding: 5vw;
    }
    .contact-form-wrap {
        height: auto;
        padding: 5vh 0;
    }
    .about-color-block {
        display: none;
    }
    .about-texts-center {
        background-color: var(--secondary-bg-color);
    }
    .flavour-img {
        height: 35vh;
        margin: 0 0 50 0;
    }
    .grand-arches-title {
        margin: 0;
    }
    .no-squish {
    min-width: 300px;
}
}
@media only screen and (max-width: 1200px) {
    .tight, .reg-small {
        width: 90%;
    }
    .reg-marg, .large-marg {
        margin: 5vh auto;
    }
    .little-pad-pad {
        padding: 0;
    }
    .reg-text, .tight-text, .wide-text, .exwide-text {
        min-width: 250px;
    }
    .variable-flex-row-1200 {
        flex-direction: column;
    }
    .visual-gal-a {
        height:auto;
    }
    .visual-gal-a-main, .visual-gal-a-1, .contact-form-wrap, .contact-text-wrap, .about-img-wrap, .about-texts, .fifty {
        width: 100%;
    }
    .fifty {
        margin: 2vh 0;
    }
    .visual-gal-a-1-large, .visual-gal-a-1-small {
        height: 50vh; 
    }
    .contact-form-wrap {
        margin: 10vh 0 0 0;
    }
    .about-img {
    width: 100%;
    }
    .about-img {
    margin: 2vh 0;
    }
    .project-head {
            left: 40vw;
            top: 37vh;
    }
    .project-head > h1 {
            font-size: 9vw;
    }
    .project-feat-img {
            height: 55vh; 
            width: 50vw;
    }
    .project-short-text > p {
            font-size: 25px;
            font-weight: 500; 
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
           .project-head {
            left: 55vw; 
        }
        .project-head > h1 {
            font-size: 6em;
        }
}