/*
Theme Name: SmartVidia Theme
Author: Michael Soriano
Author URI: http://michaelsoriano.com/
Version: 1.0
Repository: https://github.com/michaelsoriano/smartvidia-theme
*/
/* variables */
:root {
    --color-blue: #006241;
    --color-blue-dark: #028824;
    --color-black: #000;
    --color-black-medium:#212121;
    --color-black-light:#292929;
    --color-gray-dark: #4c4c4c;
    --color-gray: #878787;
    --color-gray-light: #c6c6c6;
    --color-gray-light2: #bbbbbb;
    --color-gray-ultra-light: #f8f8f8;
    --color-gray-semi-light: #e9e9e9;
}
/* end variables */


* {
    transition: all 0.5s ease;
}


/* Reset some default styles */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}
/* end Reset */


body {
    font-family: 'Inter', sans-serif;
    opacity: 0;
}
.button {
    background-color: var(--color-blue);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}
.button:hover {
    background-color: var(--color-blue-dark);
}
.button-md {
    padding: 8px 14px;
    font-size: 13px;
}
a.button {
    display:inline-block;
}
.cta {
    font-family:'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
}
.outline-black {
    background-color: transparent;
    border: 1px solid #333333;
    color: #333;
}
.outline-black:hover {
    background-color: transparent;
    opacity: 0.6;
}
.outline-white {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
}
.outline-white:hover {
    background-color: transparent;
    opacity: 0.6;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 118px;
}
#header ul {
    display:flex;
    list-style: none;
    gap: 15px;
}
#header ul a {
    text-decoration: none;
    font-size:14px;
    color: var(--color-black);
}
#header a.active {
    color: var(--color-blue);
    text-decoration: underline;
    text-underline-offset: 10px;
    padding-bottom: 12px;
} 
#header a:hover {
    color: var(--color-gray);
}
#header .logo {
    width: 200px;
}
#header .logo:hover {
    opacity: 0.6;
}

/* From Uiverse.io by Galahhad 
https://uiverse.io/Galahhad/heavy-dog-14
*/ 
/* switch settings 👇 */

.ui-switch {
  /* switch */
  --switch-bg: rgb(135, 150, 165);
  --switch-width: 38px;
  --switch-height: 16px;
  /* circle */
  --circle-diameter: 26px;
  --circle-bg:  var(--color-gray-dark);
  --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
    /* general styles*/
    position: relative;
    top: 5px;
}

.ui-switch input {
  display: none;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--switch-width);
  height: var(--switch-height);
  /* background: var(--switch-bg);
  border-radius: 999px; */
  position: relative;
  cursor: pointer;
}

.slider .circle {
  top: calc(var(--circle-inset) * -1);
  left: 0;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  position: absolute;
  background: var(--circle-bg);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  ;
}

.slider .circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}

/* actions */

.ui-switch input:checked+.slider .circle {
  /* left: calc(100% - var(--circle-diameter)); */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active+.slider .circle::before {
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
  opacity: 1;
  width: 0;
  height: 0;
}


.max-width-xl {
    max-width: 1480px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
    width: 100%;
}
.max-width-lg {
    max-width: 1200px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
    width: 100%;
}
.max-width-md {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 960px;
    margin:0 auto;
    width: 100%;
}
.max-width-sm {
    max-width: 768px;
    margin:0 auto;
    width: 100%;
}
.page-header {
    height: 208px;
    background:var(--color-gray-ultra-light);
    border-top: 1px solid var(--color-gray-semi-light);
    border-bottom:1px solid var(--color-gray-semi-light);
}
.page-header-content{
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.split-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.card {
    display: flex;
    flex-direction: column;
    border: 1px solid #ebebeb;
    border-radius: 16px;
    background: #fff;
    padding: 32px 35px;
}
.card h3{
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 10px;
    color:var(--color-gray);
}
.card p{
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-light2);
}
.card svg {
    fill:var(--color-blue-dark);
    margin-bottom: 16px;
}
.step-block {
    display:grid;
    grid-template-columns: 40px auto;
}
.step-block svg{
    position: relative;
    left: 22px;
    top: -5px;
    background: #f8f8f8;
}
.steps-section {
    background:#f8f8f8; 
    padding: 60px 0 75px; 
    margin-bottom: -35px;
}
.steps-section h2{
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 10px;
    color:var(--color-gray);
}

textarea, input {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 5px;
}
label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    color: var(--color-gray);
}

form button.button {
    border:none;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: 15px;
}
#apmd-contact-fail,
.apmd-error {
    font-size: 11px;
    font-style: italic;
    color: red;
}
#apmd-contact-success {
    font-size: 11px;
    color: green;
}

.steps-section h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
    color:var(--color-blue-dark)
}
.steps-section p {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray);
}

.step-block > div {
    border-left: 1px solid #ccc;
    padding-left: 35px;
    padding-bottom: 40px;
}
.step-block.no-line > div {
    border-left: none;
}

.blog .page-header-content > div{
    top: -18px;
    position: relative;
}
.blog .page-header-content img {
    position: relative;
    bottom: -30px;
}
.post-type-archive-case_studies .page-header-content img {
    position: relative;
    bottom: -58px;
}

.sub-header {
    width:100%;
    height: 208px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.about .sub-header {
    background-image: url('/wp-content/themes/smartvidia-theme/images/about-us-bg.png');
}
.services .sub-header {
    background-image: url('/wp-content/themes/smartvidia-theme/images/services-bg.jpg');
}
.contact .sub-header {
    background-image: url('/wp-content/themes/smartvidia-theme/images/contact-bg.png');
}
.contact {
    background-color: var(--color-gray-ultra-light);
}
.sub-header h1{
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 36px;
}
.sub-header p{
    font-weight: 200;
    color: var(--color-gray);
}

.hero-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 36px;
    color: #000; 
}
.hero-subtitle {
    font-weight: 200;
    color: var(--color-gray);
}
.get-in-touch  {
    background-color: var(--color-gray-semi-light);   
    padding-top: 65px;
    padding-bottom: 50px;;
}
.get-in-touch p {
    margin-bottom: 26px;
}
.get-in-touch > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px ;
}
.get-in-touch-content {
    padding-left: 55px;
}
.get-in-touch-content .hero-title {
    margin-bottom: 15px;
}

.why-us {
    padding: 54px 60px;
    border: 1px solid #ebebeb;  
    border-radius: 16px;
    background: #fff;
    position: relative;
    margin-bottom:-25px;
    z-index: 1;
    display: flex;
    gap: 50px;
    align-items: center;
}
.why-us p, 
.three-boxes > div p {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-light2);
}
.why-us .hero-subtitle {
    color:var(--color-black-light);
    margin-bottom: 15px;
}
.why-us p {
    margin-bottom:15px;
}


.page-numbers {
    font-size: 14px;
    color:var(--color-gray-dark);
}
.prev.page-numbers, 
.next.page-numbers {
    display:flex;
    align-items: center;
}

.view-all {
    font-size: 14px;
    color:var(--color-gray-dark);
    text-decoration: none;
    background-image: url('/wp-content/themes/smartvidia-theme/images/chevron-right.png');
    background-repeat: no-repeat;
    background-position-x: right;
    padding-right: 24px;
    background-position-y: -3px;
}
.view-all:hover {
    opacity: 0.6;
}



.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.pagination a {
    text-decoration: none;
    color: var(--color-gray);
}
.section-titles {
    font-family:'Open Sans', sans-serif;
    font-weight: 500;
    line-height: 120%;
}
a.post {
    text-decoration: none;
    display:grid;
    grid-template-columns: 228px auto;
    gap:30px;
    margin-bottom: 55px;
    margin-top: 40px;
}
a.post:hover {
    opacity:0.6;
}
.entry-title {
    font-family:'open sans', sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: var(--color-black);
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}
.entry-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 23px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: var(--color-gray-light2);
}
.entry-thumbnail {
    width:228px;
    height:122px;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--color-gray-ultra-light);
}
.case-study-thumbnail {
    width: 100%;
    height: 174px;
    margin-bottom:15px;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--color-gray-ultra-light);
}
.post-type-archive-case_studies .case-studies-section {
    padding-top: 115px;
    padding-bottom:20px;
}
.case-studies-section {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap:60px;
    padding-top: 50px;
    padding-bottom: 65px;
}
.case-studies-section a {
    text-decoration: none;
    color: var(--color-black);
}
.case-studies-section a:hover {
    opacity: 0.6;
}

.single .page-header {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 45px;
}
.single .entry-content {
    font-family: "inter", sans-serif;
    font-size: 16px;
    line-height: 30px;
    color: var(--color-gray);
}
.single .entry-content a {
    color: var(--color-gray-dark);
    text-decoration: none;
    border-bottom:1px solid var(--color-gray-light);
}
.single .entry-content a:hover {
    color: var(--color-blue-dark);
    border-bottom:1px solid var(--color-blue-dark);
}
.single .entry-content h1, 
.single .entry-content h2, 
.single .entry-content h3, 
.single .entry-content h4, 
.single .entry-content h4, 
.single .entry-content h6 {
    font-family:'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 120%;
}
.single .entry-content h1, 
.single .entry-content h2, 
.single .entry-content h3, 
.single .entry-content h4, 
.single .entry-content h4, 
.single .entry-content h6, 
.single .entry-content strong {
    color:var(--color-gray-dark);
    margin-bottom: 25px;
    margin-top: 25px;
}
.single .entry-content img{
    max-width: 120%;
    margin-left: -10%;
    margin-bottom: 45px;
    margin-top: 45px;
}
.single .entry-content p, 
.single .entry-content hr, 
.single .entry-content ol, 
.single .entry-content ul {
    margin-bottom: 25px;
}

footer {
    min-height: 340px; 
    background-image: url('/wp-content/themes/smartvidia-theme/images/footer-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-size: 12px;
    color: var(--color-gray);
    display: flex;
    align-items: center;
}

.logo-footer {
    opacity: 0.8;
    width: 194px;
    position: relative;
    left: -6px;
    margin-bottom: 10px;
}
.logo-footer:hover {
    opacity: 1;
}
footer > div {
    width: 100%;
}
footer ul {
    list-style: none;
    display:flex;
    padding:0;
    margin:15px 0 0;
}
footer .social-links {
    width:105px;
    opacity: 0.6;
}
footer .social-links:hover {
    opacity: 1;
}

.home-hero-wrap {
    border-top: 1px solid var(--color-gray-semi-light);
    border-bottom:1px solid var(--color-gray-semi-light);
}
.home-hero-wrap-2 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('/wp-content/themes/smartvidia-theme/images/hero-image-1-light.png'); 
    margin-bottom: 45px;
}

.home-hero {
    position: relative;
    height:490px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.home-hero h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 36px;
    color: var(--color-gray-ultra-light);
    margin-bottom: 10px;
}
.home-hero p {
    margin-bottom:25px;
    color:var(--color-gray-light2)
}
.home-hero-image {
    width: 732px;
    position: absolute;
    right: -75px;
}
.home .articles-section{
    margin-top: 120px;
}

.our-partners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    background-color: var(--color-gray-ultra-light);
}
.our-partners img{
    margin-top: 25px;
    margin-bottom: 25px;
}
.our-partners h2 {
    margin-bottom:15px;
}
.our-partners p {
    color: var(--color-gray-light2);
    font-size: 14px;
    line-height: 24px;
    max-width: 700px;
}
.our-partners .max-width-md {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.three-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
    margin-top: 60px;
    margin-bottom: 60px;
}
.three-boxes .hero-subtitle{
    font-size: 20px;
    font-weight: 300; 
    margin-bottom: 4px;  
}

.image-text-block {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
}
.image-text-block.image-center {  
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}
.image-text-block h3{
    font-weight: 200;
    font-size: 22px;
    margin-bottom: 15px;
}
.image-text-block p{
    color: #b1b1b1;
    line-height: 22px;
    font-size: 14px;
}
.image-text-block img{
    border-radius: 12px;
    max-height: 226px;
    width: 100%;
}
.image-text-block.image-left{
    grid-template-columns: 400px 1fr;
}

.mid-section-light-gray {
    background-color: #f5f5f5;
}

/***** DARK MODE STYLES *****/
body.dark {
    background-color: #2f2f2f;
}
.dark #header ul a {
    color:var(--color-gray);
}
.dark #header ul a.active {
    color: var(--color-blue-dark);
}
.dark .section-titles {
    color:var(--color-gray-semi-light);
}
.dark .entry-title, 
.dark .view-all {
    color:var(--color-gray)
}
.dark hr {
    border-color: #000;
}
.dark.single .entry-content a {
    color: var(--color-gray-light2);
    border-bottom:1px solid var(--color-gray-dark);
}

.dark.single .entry-content h1, .dark.single .entry-content h2, .dark.single .entry-content h3, .dark.single .entry-content h4, .dark.single .entry-content h4, .dark.single .entry-content h6, .dark.single .entry-content strong {
    color: var(--color-gray-light);
}

.dark .page-header,
.dark .home-hero-wrap {
    background-color: #121212;
    border-top: #4f4f4f solid 1px;
    border-bottom: #4f4f4f solid 1px;
}
.dark .home-hero h1, 
.dark .hero-title {
    color: #a6a6a6;
}
.dark .home-hero p {
    color: var(--color-gray);
}
.dark .home-hero-wrap-2 {
    background-image: url('/wp-content/themes/smartvidia-theme/images/hero-image-1-dark.png'); 
}
.dark .image-text-block h3 {
    color: var(--color-gray-ultra-light);
}
.dark .three-boxes > div svg {
    background-color: var(--color-black-medium);
    border-color: var(--color-gray-dark);
}
.dark .mid-section-light-gray {
    background-color: var(--color-gray-dark);
}
.dark footer {
    background-color: var(--color-black) ;
}
.dark .get-in-touch {
    background-color: var(--color-gray-dark);
}
.dark .get-in-touch .hero-subtitle {
    color: var(--color-gray-light2);
}
.dark .our-partners {
    background-color: var(--color-black-light);
}
.dark .why-us, 
.dark .card {
    background-color: var(--color-black-medium);
    border-color: var(--color-black);
}
.dark .why-us .hero-subtitle {
    margin-top:-10px;
    color:var(--color-gray-ultra-light);
}
.dark .why-us .view-all {
    color:var(--color-gray-ultra-light);
}
.dark .why-us p {
    color: var(--color-gray);
}
.dark .outline-white {
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-light);
}

.dark .steps-section h2 {
    color:#fff;
}
.dark .steps-section svg,
.dark .steps-section {
    background-color: var(--color-black-light);
}
.dark .steps-section svg {
    fill: var(--color-gray-light);
}
.dark .step-block > div {
    border-left: 1px solid #4c4c4c;
}
.dark .step-block.no-line > div {
    border-left: none;
}
.dark input, 
.dark textarea {
    background-color: var(--color-black-light);
    border: 1px solid #4c4c4c;
    color: var(--color-gray-light2);
}
.dark footer {
    background-image: url('/wp-content/themes/smartvidia-theme/images/footer-dark-bg.png');
}
/***** END DARK MODE STYLES *****/



/* Responsive styles for mobile and tablets */
@media (max-width: 1024px) {
    #header {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 15px;
    }
    .page-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .get-in-touch > div {
        flex-direction: column;
        align-items:center;
        gap: 20px;
    }
    .case-studies-section {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 50px;
    }
    a.post {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .entry-thumbnail,
    .case-study-thumbnail {
        width: 100%;
        height: 150px;
    }
    .max-width-xl,
    .max-width-lg,
    .max-width-md,
    .max-width-sm {
        max-width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }
    .page-header {
        padding: 20px 0;
    }
}

/* Extra small devices (phones) */
@media (max-width: 600px) {
    #header ul {
        padding-left: 0;
        gap: 10px;
        align-items: flex-start;
    }
    .hero-title {
        font-size: 24px;
    }
    .home-hero-image {
        display: none;
    }
    .image-text-block {
        display: flex;
        gap:20px;
        flex-direction: column-reverse;
    }
    .image-text-block.image-left {
        display: grid;
        gap:20px;
        grid-template-columns: 1fr;
    }
    .why-us {
        flex-direction: column;
    }
    .image-text-block img{
        height: auto;
    }
    .page-header-content img {
        bottom: 0;
        width: 100%;
        height: auto;
    }
    .pagination {
        /* flex-direction: column; */
        gap: 5px;
    }
    .single .entry-content img {
        max-width: 100%;
        margin-left: 0;
    }
    .three-boxes, 
    .split-grid {
        grid-template-columns: 1fr;
    }
}