/*
Theme Name: Seven Hills Creative
Author: Seven Hills Creative
Author URI: https://www.sevenhillscreative.co.uk/
Description: Another custom theme for a happy customer!
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2022.1
Requires at least: 5.2
Requires PHP: 7.0
*/


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{text-decoration:none}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:none}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


/* ///// BASE ///// */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    color: #1B1C1F;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    /* transition: all 0.4s ease; */
    /* outline: 1px solid red !important; */
}

html{
    overflow-x: hidden !important;
  }
  
body{
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden !important;
    display: grid;
  }


@media only screen and (max-width: 1100px) {}
@media only screen and (max-width: 960px) {}
@media only screen and (max-width: 760px) {}
@media only screen and (max-width: 660px) {}
@media only screen and (max-width: 560px) {}
@media only screen and (max-width: 460px) {}
@media only screen and (max-width: 360px) {}
@media only screen and (max-width: 320px) {
    body, header, main, section, footer {
    width: 320px;
    }
}

/* LAYOUT ************************************************/

section, article, main, nav, header{
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-column: 1 / 17;
    justify-self: center;
    max-width: 2000px;
    width: 100%;
}

footer {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-column: 1 / 17;
    justify-self: center;
    max-width: 2000px;
    width: 100%;
}
  
footer img{
    max-width: 100%;
}

ul, li {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.1em;
    line-height: 30px
}

ul, ol {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
}



/*  BUTTONS  */
.blue-button {
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0.05em;
    text-align: center;
    background: transparent;
    color: #1E1E1E;
    border: 1px solid #1E1E1E;
    padding:  0.5em 2em;
}

.inner-text a.blue-button{
    color: #fff;
    border: 1px solid #fff;
}


@media only screen and (max-width: 760px) {
    .blue-button {
        font-size: 16px;
        font-weight: 700;
        line-height: 30px;
        letter-spacing: 0.1em;
    }
}

/* ///// TEXT //// */
h1, h2, h3, h4, h5, h6{
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
}

h1{
    font-size: 96px;
    font-weight: 900;
    line-height: 100px;
    text-transform: uppercase;
}

h2{
    font-size: 64px;
    font-weight: 700;
    line-height: 78px; 
}

h3{
    font-size: 48px;
    font-weight: 600;
    line-height: 55px;
}

h4{
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0.1em; 
}

h5{
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0.05em;     
}

p{
  color: black;
  margin-bottom: 0.8em;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.1em;
}

p a{
    color: #74B2D7;
  }

ul, ol{
    font-family: 'Montserrat', sans-serif;
    margin: 1.2em 0;
    padding: 0 6%;
}

ul {
   list-style-type: disc;
}

ul.main-nav{
  padding: 0;
  list-style-type: none;
}

ol{
  list-style-type: decimal;
}

ol li, ul li{
  font-family: 'Montserrat', sans-serif;
  color: black;
  /* margin-bottom: 0.8em; */
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.1em;
  text-align: left;
}

strong{
  font-weight: 700;
}

em{
  font-style: italic;
}

.underline{
  text-decoration: underline;
}

a{
  cursor: pointer !important;
  text-decoration: none;

}

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

    h1{
        font-size: 32px;
        line-height: 40px;
        font-weight: 700;
    }
    
    h2{
        font-size: 32px;
        line-height: 40px;
    }
    
    h3{
        font-size: 24px;
        line-height: 30px;
        font-weight: 900;
    }
    
    h4{
        font-size: 20px;
        line-height: 26px;
        letter-spacing: 0.05em;
    }
    
    h5{
      font-size: 1.2em;
    }
    
    h6{
      font-size: 1.1em;
    }
    
    p{
      color: black;
      margin-bottom: 0.8em;
      font-weight:400;
      width: 100%;
      font-size: 16px;
      line-height: 30px;
      letter-spacing: 0.1em;
    
    }

}


/* MENU BAR DESKTOP VIEW */
@media only screen and (min-width: 900px) {

    #hamburger-input:checked, #hamburger-menu #sidebar-menu{
        display: none;
    }

    .grid-header-section {
        display: grid;
        margin: 1em 0;
        z-index: 2;
    }

    .grid-header-outer {
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-column: 2 / 16;
        grid-column-gap: 1.5em;
    }

    .grid-header-outer a img{
        max-width: 120px;
        width: 100%;
    }

    .header-menu {
        align-self: center;
    }

    .header-menu ul{
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        text-align: center;
        align-self: center;
        margin: 0;
        background: rgba(255, 255, 255, 0.8);
        padding: 8px;
        border-radius: 8px;
    }

    .menu-item a span{
        color: #003366;
        font-size: 1.1em;
        font-weight: 700;
        display: block;
        width: 100%;
        text-align: center;
    }

    body.single-casestudies .menu-item a span, body.error404 .menu-item a span{
        color: #1B1C1F;
    }
   
    #hamburger-input, .overlay, #hamburger-menu, #sidebar-menu, .header-bar  {
        display: none;
    }

    /* SUB MENU ************************************************/

    .menu-item .sub-menu {
        display: none;
    }

    .menu-item:hover .sub-menu {
        display: grid;
        background-color: #ACADAD;
        padding: 3em;
        text-align: left;
        z-index: 5;
        position: absolute;
        font-weight: 700;
        font-size: 20px;
        line-height: 26px;
        color: white;   
        width: 100%;  
        max-width: 2000px;  
        justify-self: center;
        left: 0; 
        right: 0;
        margin: auto;
        border-top: 2em black solid;    
    }
}




    

/* RESPONSIVE MENU UNCLICKED */
@media only screen and (max-width: 900px) {

    .grid-header-outer{
        display: none;
    }

    /* Mobile display settings before menu in clicked */
    .header-bar {
        display:grid;
        grid-template-columns: 50% 1fr;
        grid-column:  2 / 16; 
        align-self: center;
        margin: 1em 0;
        z-index: 20;
    }
    
    .header-bar img{
        max-width: 104px;
        width: 100%;
    }

    .responsive-menu {
        align-self: center;
    }

    /* Hamburger Menu settings */
    .menu-icon {
        width: 30px;
        height: 2px;
        background-color: #74B2D7;
        margin: 2px 0;
    }

    /* Flyout Settings */
    .overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s, visibility .35s, height .35s;
        overflow: hidden;
        background: white;
    }
    
    /* hiding the hamburger menu */
    #hamburger-input{
        display: none;
    }
    
    /* postition of hamburger menu */
    #hamburger-menu {
        display: flex;
        align-items: end;
        flex-direction: column;
    }

    /* appearance of flyout */
    #hamburger-menu #sidebar-menu {
        grid-template-columns: 1fr;
        visibility: hidden;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        background-color: white;
        transition: 0.3s;
        padding: 1em;
        box-sizing: border-box;
        z-index: 20;
        height: 100%;
        align-content: start;
    }

    #hamburger-menu ul {
        padding-right: 0px;
        margin: 3em 0;
    }

    #hamburger-menu li {
        list-style-type: none;
        padding: 3% 0;
    }

    #hamburger-menu a {
        color: #74B2D7;
        text-decoration: none;
        transition: transform 0.5s;
    }

    #hamburger-menu a:hover {
       color: #74B2D7;
    }

    #hamburger-menu a span{
        color: #74B2D7;
    }

    #hamburger-menu a:active{
        -ms-transform: translateX(30px); /* IE 9 */
        -webkit-transform: translateX(30px); /* Safari 3-8 */
        transform: translateX(3px);
    }

    #hamburger-input:checked + #hamburger-menu #sidebar-menu {
        visibility: visible;
        right: 0;
    }
}




/* MAIN BANNER */
.main-banner {
    position: relative; 
    height: 100vh;
    margin-top: -11em;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.case-study-banner {
    height: 70vh;
}

.video-container {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-text {
    align-content: center;
    display: grid;
    gap: 2em;
    position: relative; 
    text-align: center;
    padding: 3em 4em;
    background: linear-gradient(to right, rgba(30, 30, 30, 0.3) 0%, rgba(30, 30, 30, 0.3) 100%);
    z-index: 1; 
    width: 100%;
    height: 100%;
}

.inner-text h1, .inner-text h4{
    color: #fff;
    align-self: center;
}

.inner-text h1 span {
    color: #74B2D7;
}

.inner-text a {
    justify-self: center;
}

.main-banner.mobile-banner{
    display: none;
}

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

   
    .inner-text {
        grid-column: 1 / 17;
        padding: 1em;
    }
}

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

    .main-banner.desktop-banner{
        display: none;
    }

    .main-banner.mobile-banner{
        display: flex;
    }
   
}




/* WHAT WE CAN DO */

.direction-down {
    display: grid; 
    height: 100vh;
    background-color:hsla(199,62%,62%,1);
    background-image:
    radial-gradient(at 76% 68%, hsla(199,61%,62%,1) 0px, transparent 50%),
    radial-gradient(at 66% 91%, hsla(234,0%,78%,0.88) 0px, transparent 50%),
    radial-gradient(at 91% 6%, hsla(0,0%,78%,0.88) 0px, transparent 50%),
    radial-gradient(at 13% 13%, hsla(193,3%,52%,1) 0px, transparent 50%),
    radial-gradient(at 5% 87%, hsla(0,2%,84%,1) 0px, transparent 50%);
}

.direction-down-inner-text {
    display: grid; 
    text-align: center;
    grid-column: 4 / 14;
    align-self: center;
    gap: 2em;
}

.direction-down-inner-text h2 {
    color: #1B1C1F;
    font-weight: 900;
}

.bounce {
    font-size: 32px;
    animation: bounce 2s infinite; 
}

@keyframes bounce { 
    0%, 
    20%, 
    50%, 
    80%, 
    100% { 
        transform: translateY(0); 
    } 

    40% { 
        transform: translateY(-30px); 
    } 

    60% { 
        transform: translateY(-15px); 
    } 
} 

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

    .direction-down {
        height: 75vh;
    }
    .direction-down-inner-text {
        grid-column: 2 / 16;
    }
}



/* CASE STUDIES */
.slider-case-studies {
    display: grid;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    margin: 5em ;

}

.case-study {
    display: grid;
    grid-column: 2 / 16;
    width: 100%;
    height: 100%;
    position: absolute;
    right: -100%; /* Initially position the background image outside the element */
    transition: right 4s ease; /* Add a smooth transition effect */
    z-index: -1;
}

.inner-case-study {
    display: grid;
    gap: 0.2em;
    align-self: center;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
    padding: 1em;
    font-family: 'Montserrat', sans-serif;
}

.case-study-title p{
    font-size: 38px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0.05em;
    text-align: left;
}

.name {
    color: #74B2D7;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.inner-case-study p {
    color: #1E1E1E;
}

.inner-case-study h4 {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 0.05em;
}

.read-more {
    display: grid; 
}

.read-more a {
    display: grid;
    grid-template-columns: auto auto;
    grid-column: 2 /16;
    align-items: center;
    justify-self: end;
    margin: 0 0 3em 0;;
}

.read-more h5 {
    padding-right: 1em;
}

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

    /* .inner-case-study {
        grid-column: 2 / 16;
    } */

    .case-study {
        grid-column: 1 / 17;
    }
}




/* CONTACT FORM*************************************************/

.contact {
    display: grid;
    grid-column: 1 / 17;
    background-color: #F2F0F0;
    align-self: center;
    text-align: center;
    padding: 5em 0;
}

.contact h2 {
    grid-column: 2 / 16;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0.5em;
}

.contact p {
    grid-column: 2 / 16;
}

.contact h2 span{
    color: #74B2D7;
}

div.wpcf7{   
    margin-top:  2em;
  }
  
  .wpcf7-form input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], select, textarea {width:100% !important;}
  
.contact-form {
    display: grid;
    grid-column: 5 / 13;
    margin: 2em 0;
}

.contact-page-form {
    grid-column: auto;
}

.contact-form input[type=submit] {
    margin: auto;
    display: flex;
}
.contact-form input[type=submit], input[type=submit] {
    height: 45px;
    cursor: pointer;
    justify-self: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0.05em;
    text-align: center;
    background: transparent;
    color: #1E1E1E;
    border: 1px solid #1E1E1E;
    padding:  0.5em 2em;
}

.services-sub-page input[type=submit] {
    margin-top: 1em;
}

input[type=text], 
input[type="email"], 
input[type="tel"], 
input[type="url"], 
select, 
textarea{
    width: 100%;
    padding: 12px;
    border: none;
    border-bottom: 1.5px solid #000000;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    text-align: left;
    justify-self: center;
    background: transparent;
    font-size: 1.2em;
    color: #000;
}

input::placeholder, textarea::placeholder{
    font-size: 1.8em;
    color: #000;
}

.contact-form input[type=text]:focus, textarea:focus {
    outline: none;
}

#message {
    padding-top: 5px;
}


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

    .contact-form-title {
        font-size: 24px;
        line-height: 29px;
    }

    .contact-form {
        grid-column: 2 / 16;
    }


}




/* FOOTER */
.footer {
   
}

.footer-areas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: 2 / 16;
    padding: 2em 0;
}

.footer-box {
    justify-self: center;    
}

.footer-box h5 {
    font-family: 'Montserrat', sans-serif;
    color: #1e1e1e;
    font-size: 20px;
    font-weight: 700;
    line-height: 70px; 
}

.footer-box hr {
    border-bottom: #74B2D7 2.5px solid;
    max-width: 78px;
    justify-self: left;
    text-align: left;
    margin: 0;
}

.footer-box li {
    padding: 0.2em 0;
    color: #1E1E1E;
    font-family: 'Montserrat', sans-serif;
}

.footer-box li a{
    color: #003366;
}

.footer-box ul, .footer-box ol {
    padding: 0;
    list-style: none;
}


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

    .footer-areas {
        grid-template-columns: 1fr;
        grid-column: 2 / 16;
    }

    .footer-box li {
        padding: 0.2em 0;
        text-align: center;
    }

    .footer-box {
        text-align: center;
    }

    .footer-box hr {
        text-align: center;
        margin: auto;
    }
}







/* CASE STUDIES LISTING */

.casestudies-listings {
    display: grid;
    margin: 5em 0;
    grid-template-columns: repeat(3, 1fr);
    grid-column: 2 / 16;
    gap: 1em;
}

.casestudies-listings-no-results {
    display: grid;
    margin: 2em 0;
    grid-template-columns: 1fr;
    grid-column: 3 / 15;
}

.listings-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    box-shadow: 0px 5px 5px 0px #00000026;
    background: #F6F9FC;
    border-radius: 5px;
    padding: 1em;
}

.listings-box img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
}

.listings-box i {
    font-size: 80px;
}

.listing-details {
    padding-bottom: 0.5em;
}

.buttons{
    gap: 0.5em;
    display: grid;
}

.see-more-listings {
    justify-self: center;
    margin: 2em 0;
    box-shadow: none;
}

.listings-button-one, .listings-button-two {
    justify-self: center;
    width: 100%;
    box-shadow: none;
}

.listings-button-one {
    align-self: end;
    padding: 0.5em 2%;
}

.listings-button-two {
    align-self: start;
    padding: 0.5em 2%;
    box-shadow: none;
}


.listings-box h3, .listings-box p {
    margin: 0 !important;
 
}



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

    .listings {
        grid-template-columns:1fr;
        grid-column: 2 / 16;
    }
    
    .listings-box {
        grid-template-columns: 1fr;
    }

    .buttons {
        display: flex;
    }
    
    .casestudies-listings h2, .casestudies-listings p  {
        grid-column: 2 / 16;
    }

    .casestudies-listings h3, .jocasestudiesb-listings h4, .see-more-listings {
        grid-column: 2 / 16;
    }

}









/* BLOG */

.blog-area {
    margin: 4em 0;
}

.blog-area h1{
    display: grid;
    grid-template-columns: 1fr;
    grid-column: 2 / 16;
    text-align: center;
    padding-bottom: 1em;
}

.blog-area h2{
    display: grid;
    grid-template-columns: 1fr;
    grid-column: 2 / 16;
    text-align: left;
    padding-bottom: 1em;
}

.blog-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: 2 / 16;
    gap: 3em;
}

.blog-box {
    display: grid;
    box-shadow: 0px 5px 5px 0px #00000026;
}

.blog-box:hover {
    -ms-transform: translateY(-10px); /* IE 9 */
    -webkit-transform: translateY(-10px); /* Safari 3-8 */
    transform: translateY(-10px);
    transition: transform 0.5s;
}

.blog-box-inner {
    display: grid;
    gap: 0.5em;
    margin: 1em 2em 2em 2em;
}

.blog-box-inner p a {
    color: black;
}

.blog-box img, .indi-blog img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    max-height: 237px;
}

.date-cat {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
}

.date-cat li{
    list-style: none;
}

div.category a{
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0.05em;
    text-align: left;
}

.category ul {
    margin: 0;
}

.blog-button {
    font-weight: 700;
    box-shadow: none;
}

.indi-blog {
    display: grid;
    grid-template-columns: 1fr;
    grid-column: 1 / 17;
    gap: 1em;
    margin: 2em 0;
    word-break: break-all;
}

.indi-blog h1 {

}



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

    .blog-boxes {
        grid-template-columns: 1fr;
    }

}
















/* SINGLE MAIN BANNER ************************************************/

.single-archive-outer {
    display: grid;
    grid-column: 2/16;
    justify-self: center;
    width: 100%;
    padding: 0 0 5em 0 !important;
  }


/* TEXT / IMAGE 50 / 50 ************************************************/
  
  .text-image {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-column: 1 / 17;
    background-color: white;
    gap: 2em;
    margin: 3em 0;
  }

  .case-study-titles {
    display: grid;
    gap: 1em;
    align-self: center;
  }

  .case-study-contents {
    display: grid;
    align-self: center;
  }
  
  .case-study-img {
    width: 100%;
}
  
  
  
  
  /* WHAT WE DID ************************************************/
  
  .what-we-did {
    display: grid;
    grid-template-columns: 1fr 30% 20%;
    grid-column: 1 / 17;
    gap: 2em;
  }
  
  .what-we-did-titles h2, .what-we-did-titles p, .what-we-did-sector h2, .what-we-did-sector p {
    text-align: left;
  }
  
  .what-we-did-titles {
    align-self: center;
  }
  
  .what-we-did-button {
    align-self: center;
  }
  
  hr{
    background-color: #74B2D7;
    border: 0;
    height: 1px;
    justify-self: center;
    margin: 1em 0 2em 0;
    width: 80%;
  }

  .what-we-did-titles h2,   .what-we-did-sector h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: 55px;
  }

  .case-study-titles h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 55px;
  }

  

  @media only screen and (max-width: 1100px) {
    .text-image {

        grid-template-columns: 1fr;
      }

      .what-we-did {
        grid-template-columns: 1fr;
      }

  }

  @media only screen and (max-width: 800px) {
  .case-study-titles h1 {
    font-size: 2em;
    font-weight: 600;
    line-height: 30px;
  }
}
  






  /* SERVICES SUB PAGE  */

  .services-sub-page {
    display: grid;
    grid-template-columns: 1fr;
    grid-column: 4 / 14;
    max-width: 700px;
    gap: 1em;
    margin: 5em 0;
}

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

    .services-sub-page {
        grid-column: 2 / 16;
    }

}

.scrollmagic-pin-spacer{
    grid-column: 2 / 16;
    margin: 5em 0;
}

#pinContainer_60, #pinContainer_59, #pinContainer_57, #pinContainer_61, #pinContainer_931   {
    width: 200%;
    height: 100vh;
    display: flex;
}

.panel {
    display: grid;
    grid-column: 3 / 10;
    width: 50%;
    height: 80vh;
    justify-content: left;
    align-items: center;
    font-size: 2rem;
    padding-left: 1em;
    align-self: center;
}

.blue {
    background-color: transparent;
    z-index: 20;
}

/* .purple {

} */



.outer-cs {
    display: grid;
    grid-template-columns: 1fr 40%;
}

@media only screen and (max-width: 1050px) {
    .outer-cs {
        display: grid;
        grid-template-columns: 1fr 30%;
    }
}

@media only screen and (max-width: 900px) {
    .outer-cs {
        display: grid;
        grid-template-columns: 1fr;
    }
    .panel {
        padding: 0 0.5em;
        height: 100vh;
    }

    .case-study-title p{
        font-size: 24px;
        line-height: 28px;
    }

    .inner-case-study h4 {
        font-size: 16px;
        line-height: 22px;
    }

    
    .inner-case-study {
        padding: 1em;
    }
    
    .scrollmagic-pin-spacer{
        grid-column: 1 / 17;
    }
    
}







/* WP CONTENT */
.wp-content-section {
    grid-column: 3 / 15;
    grid-template-columns: 1fr;
    display: grid;
    gap: 2em;
    text-align: center;
}

.wp-content-section h2, .wp-content-section h3 {
    margin-top: 1em;
}

.wp-block-button a {
    border-radius: 5px;
    justify-self: start;
    font-family: 'gill-sans-nova', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    max-width: 400px;
    width: 100%;
    text-transform: capitalize;
    border: none;
    background: #FBBA00;
    border: 1px solid #FBBA00;
    color: #5C2244;
    border-radius: 0;
}

.wp-content-section {
    padding: 5em 0;
}

.wp-content-section .wpcf7 {
    display: grid
}

.wp-content-section form {
    max-width: 1000px;
    justify-self: center;    
    text-align: left;
}

.wp-content-section form h3 {
    margin-bottom: 1em;
}

.wp-content-section form input[type=submit] {
    margin: 5em auto 0 auto;
    display: flex;
}
.wp-content-section form input[type=submit] {
    height: 45px;
    cursor: pointer;
    justify-self: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0.05em;
    text-align: center;
    background: transparent;
    color: #1E1E1E;
    border: 1px solid #1E1E1E;
    padding:  0.5em 2em; 
}

.wp-content-section form label {
    font-weight: 700;
}

.wp-content-section form label span {
    font-weight: 300;
}

.wp-content-section input[type=text], 
.wp-content-section input[type="email"], 
.wp-content-section input[type="tel"], 
.wp-content-section input[type="radio"],
.wp-content-section select, 
.wp-content-section textarea {
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
}

.wp-content-section input[type=text]:focus, .wp-content-section textarea:focus {
    outline:auto;
}

.radio-buttons {
    display: flex;
    margin: 2em 0 0 0; 
}

div.wpcf7-response-output{
    margin: 0;
    padding: 1em;
    font-size: 2em;
    line-height: 1.5;
    text-align: center;
    font-weight: 700;
}

.wpcf7 form.sent .wpcf7-response-output{
    border: 4px solid #46b450;
}


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

    .wp-content-section {
        grid-column: 2 / 16;
    }

    .radio-buttons {
        display: grid;
    }

    div.wpcf7-response-output{
        font-size: 1.4em;
    }


}


/* BLOCK HEADING */

.wp-content-section ul li a, .wp-content-section ul li, .wp-content-section{
    word-break: break-word;
}