@font-face {
   font-family: Avenir;
   src: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/fonts/Avenir-Light-07.woff);
   font-weight: 200;
}

@font-face {
   font-family: Avenir;
   src: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/fonts/Avenir-Book-01.woff);
   font-weight: 300;
}

@font-face {
   font-family: Avenir;
   src: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/fonts/Avenir-Roman-12.woff);
   font-weight: 400;
}

@font-face {
   font-family: Avenir;
   src: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/fonts/Avenir-Medium-09.woff);
   font-weight: 500;
}


@font-face {
   font-family: Avenir;
   src: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/fonts/Avenir-Heavy-05.woff);
   font-weight: 600;
}

@font-face {
   font-family: Avenir;
   src: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/fonts/Avenir-Black-03.woff);
   font-weight: 800;
}



*  { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  font-family: "Avenir", Arial, Helvetica, sans-serif;
}




/* default formatting   */
/* default formatting   */
/* default formatting   */
html, body, div, span, object, iframe, h1, h2, h3, 
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
address, code, del, dfn, em, img, q, dl, dt, dd, 
ol, ul, li, fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td  {  border: 0 none;  margin: 0;  padding: 0;  vertical-align: baseline; }

.sr-only {
    display: none;
}

html  { 

  scroll-behavior: smooth;
}

:root {
    --black:#17181C;
    --grey:#7B7B7B;
    --lightgrey:#E2E7E8;
    --white:#F7FCFD;
    --blue:#00AEEF;
    --yellow:#FFF200;
    --pink:#EC008C;


    --step--2: clamp(0.6944rem, 0.6822rem + 0.0611vw, 0.7738rem);
    --step--1: clamp(0.8333rem, 0.8028rem + 0.1524vw, 1.0315rem);
    --step-0: clamp(1rem, 0.9423rem + 0.2885vw, 1.5rem);
    --step-1: clamp(1.1rem, 1.1026rem + 0.4868vw, 1.5329rem);
    --step-2: clamp(1.44rem, 1.2857rem + 0.7717vw, 2.4432rem);
    --step-3: clamp(1.728rem, 1.4928rem + 1.176vw, 3.2568rem);
    --step-4: clamp(2.0736rem, 1.6247rem + 1.7444vw, 3.75rem);
    --step-5: clamp(2.4883rem, 1.9808rem + 2.5374vw, 5.787rem);

}




body {
    margin: 0;
    padding: 0;
    position: relative;
    font-size: 1.5rem;
    font-size: var(--step-0);
    font-weight: 400;
    font-optical-sizing: auto;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
      color: var(--black); 
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    background-color: var(--white);
}


img, svg, picture {
    max-width: 100%;
    height: auto;
    display: block;
}


body.fade-in {
  opacity: 1;
}


.container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 1600px;
}

.header-mobile {
  display: none;
  max-width: 768px;
}

.header {
    background-color: var(--white);
    width: 400px;
    width: 20%;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 1;
}

.bgwrap {
    background-color: var(--white);
    width: 100%;
    height: 100vh;
    position: relative;
    
}
.main {
    padding-left: 25%;
    padding-right: clamp(1rem, 4vw, 3.75rem);

}

.content {

    padding-top: clamp(1rem, 4vw, 3.75rem);
    padding-bottom: clamp(1rem, 4vw, 3.75rem);
}

.sitelogo {

    padding-bottom: clamp(9rem, 19vw, 19rem);
    padding-left: clamp(1rem, 4vw, 3.75rem);
    padding-top: clamp(1rem, 4vw, 3.75rem);

}

.sitelogo img {
    max-width: 124px;
}

.navigation {
    padding-left: clamp(1rem, 5vw, 3.75rem);
}

.navigation ul {
    margin: 0;
    padding: 0;
    
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--black);
}
.navigation ul li {
    margin: 0;
    padding: 0 ;
    list-style-type: none;
}

.navigation ul li a {
    padding: 0 0 8px 0;
    color: var(--black);
    text-decoration: none;
    display: block;
    text-transform: uppercase;
}

.navigation ul li a:hover {
    color: var(--blue);
}

.navigation ul li a.active {
  font-weight: bold;
}

.navigation ul ul {
  padding: 0 0 24px 0;
}

.navigation ul ul li {
    font-size: var(--step-0);
    font-weight: 500;
}

.navigation ul ul li a {
    padding: 0 0 4px 0;
    text-transform: capitalize;
}



p a {
    color: var(--blue);
}




h2 {
    font-weight: 500;
    margin-top: 0;
    font-size: 3rem;
    font-size: var(--step-3);
}

p {
   line-height: 1.5;
}

.greeting {
    padding-bottom: clamp(5rem, 8vw, 8rem);
}

.large {
    font-size: 3.75rem;
    font-size: var(--step-4);
    font-weight: 900;
    line-height: 1;
}

.line {
    border-top:1px solid var(--lightgrey);
    margin: 24px 0;
    display: block;
    width: 100%;
}

.main-heading {
  width: 75%;
}










.gridportfolio {
  display: grid;
  grid-gap: 24px;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 24px;
  padding-bottom: clamp(4rem, 4vw, 10rem);
}

.gridportfolio div {
  border-radius: 16px;
}

.gridportfolio :nth-child(1) {
  grid-column: span 4 !important;
  grid-row: 1 / span 2;
}

.gridportfolio :nth-child(1), .gridportfolio :nth-child(4), .gridportfolio :nth-child(5), .gridportfolio :nth-child(8), .gridportfolio :nth-child(9), .gridportfolio :nth-child(10) {
    grid-column: span 2;
}

.gridportfolio .card figure img {
    object-fit: cover;
}

.gridportfolio .card {
    height: 100%;
    flex-direction: column;
}

.item.hidden {
  display: none;
}



.card {
    display: flex;
    flex-wrap: wrap;
    row-gap:8px;
    column-gap: 16px;
    color: var(--black);
    text-decoration: none;
    font-weight: 500;
}

.card:hover figure {

  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


.card>*:first-child {
    flex-grow: 1;
}

.card figure {
    border-radius: var(--step--2);

    overflow: hidden;
    transition: all .2s ease-in-out;
    box-shadow: 0 4px 8px var(--color-shadow-initial);
}
.card ul {
  font-size: 1rem;
}

.card ul.flex {
    list-style-type: none;
    padding-inline-start: unset;
}

.card figure img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.card h3 {
    font-size: 1.3rem;
    font-size: var(--step--1);
}
.post-title h3 {
    line-height: 1.2;

}

.flex {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}



.tags {
    column-gap: 8px;
    row-gap: 0;
    color: var(--grey);
}

.tags li:after {
    content: " /";
    opacity: .5;
}
.tags li:last-child:after {
    content: "";
}


.testimonial {
  border: 1px solid var(--lightgrey);
  background-color: var(--white);
  padding: 16px;


}

.testimonial blockquote {

  font-size: var(--step--1);
  margin: 16px 0;



  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 170px;
    -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /*text-overflow: ellipsis;*/

}

.testimonial h3 {
  font-size: var(--step--1);
}

.testimonial p {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--grey);
}

/* Smooth add/remove */
.gridportfolio .slot {
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
.gridportfolio .slot.pre-in {        /* just inserted */
  opacity: 0;
  transform: scale(.98);
}
.gridportfolio .slot.fade-out {      /* about to be removed */
  opacity: 0;
  transform: scale(.98);
  
  pointer-events: none;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  .gridportfolio .slot,
  .gridportfolio .slot.pre-in,
  .gridportfolio .slot.fade-out {
    transition: none !important;
    transform: none !important;
  }
}









.grid-about {
  display: grid;
  grid-gap: 24px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin-top: 24px;
  padding-bottom: clamp(4rem, 4vw, 10rem);
}

.grid-about :nth-child(1) {
  grid-column: span 3 !important;
  grid-row: 1 / span 1;
  width: 100%;
}

.profile-thumbnail {
  grid-column: span 2 !important;
  grid-row: 1 / span 1;
  padding: 36px;
}







.grid-services {
  display: grid;
  grid-gap: 24px;
  row-gap: 48px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 24px;
  padding-bottom: clamp(4rem, 4vw, 10rem);
}

.service {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 60px 1fr;
}


.service h3 {
  font-size: 1.5rem;
  font-size: var(--step-1);
}

.service p {
  font-size: 1.3rem;
  font-size: var(--step-0);
}








.grid-contactdetails {
  display: grid;
  grid-gap: 48px;
  row-gap: 48px;
  grid-template-columns: 1fr 1fr;
  margin-top: 48px;
  padding-bottom: clamp(4rem, 4vw, 10rem);
}

.contact-details {
    display: grid;
    grid-template-columns: 30% 70%;
}

.contact-details dt, .contact-details dd {
    margin-bottom: 16px;
}

.contact-details a {
  color: var(--black);
  text-decoration: none;
}

.contact-details a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.contact-details .social-icon {
 float: left; 
 margin-right: 16px;
}




.contact-form fieldset {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 16px;
}
.contact-form .field {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2px;
}

.contact-form label {
    font-weight: 600;
    font-size: 1.3rem;
    font-size: var(--step-0);
}

.contact-form input, .contact-form textarea {
    font-size: var(--step-0);
    padding:  4px 8px;
    border-radius: 4px;
    border: 1px solid var(--grey);
}

.contact-form button {
    font-size: var(--step-0);
    padding: 4px;
    border-radius: 4px;
    border: 0;
    background-color: var(--blue);
    color: var(--white);
    font-weight: 600;
    padding: 8px;
}


.contact-form legend {
  visibility: hidden;
  display: none;
}

.form-success {
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 1rem;
  background-color: color-mix(in srgb, var(--blue) 10%, white 20%);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.form-error {
  border: 1px solid var(--pink);
  color: var(--pink);
  padding: 1rem;
  background-color: color-mix(in srgb, var(--pink) 10%, white 20%);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}






/* Change background overlay */
.fancybox__backdrop {
  background: rgba(247, 252, 253, 0.85) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Caption styling */
.fancybox__caption {
  font-size: 0.9rem;
  color: var(--black);
  text-align: center;
  padding: 10px;
}

/* Close button */
.fancybox__toolbar .fancybox__button--close {
  color: var(--blue);
  font-size: 3rem;
}
.fancybox__toolbar {
  background: none!important;
}
.carousel__button svg {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0)) !important; 
}
.fancybox__toolbar__items--center {
  display: none!important;
}
.fancybox__image {
  border-radius: 8px;
}


.designedby {
  float: right;
}

.designedby a {
  color: var(--blue);
}