/*
Theme Name: Divi Child
Theme URI: https://diviextended.com/
Version: 1.0
Description: Child Theme of Divi
Author: Divi Extended
Template: Divi
*/
:root {
  --primary-color: #333;
  --secondary-color: #555;
  --font-color: #0a0a0a;
  --bg-color: #f5f5f5;
  --heading-color: #0a0a0a;
  --button-colorText: #0a0a0a;
  --button-colorBack: #0000;
  --button-colorBorder: #0a0a0a;
  --button-colorTextOver: #bcbcbc;
  --button-colorBackOver: #0a0a0a;
}

@media (max-width: 768px) {
  :root {
    --bg-color: #e5e5e5;  
  }
}

/*studio page is darker*/
.page-id-11 {
  --bg-color: #e5e5e5; 
}
[data-theme=dark] {
  --primary-color: #ccc;
  --secondary-color: #aaa;
  --font-color: #fff;
  --bg-color: #191919;
  --heading-color: #fff;
  --button-colorText: #bcbcbc;
  --button-colorBack: #0000;
  --button-colorBorder: #bcbcbc;
  --button-colorTextOver: #fff;
  --button-colorBackOver: #bcbcbc;

}

[data-theme=dark] .page-id-11 {
  --bg-color: #191919; /* Dark background color for studio page in dark mode */
}

/* Add a class to disable transitions */
.disable-transitions * {
    transition: none !important;
}

/* Disable slider transition on page load */
.disable-transitions .slider,
.disable-transitions .slider:before {
    transition: none !important;
}
html {
    background-color: var(--bg-color);
    transition: background-color 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
   display: flex;
   width:100vw;
   max-width:100vw;
   background-color: var(--bg-color) !important;
   color: var(--font-color)!important;
   justify-content: center;
   transition: background-color 2.0s cubic-bezier(0.4, 0, 0.2, 1)!important;
   transition: color 2.0s cubic-bezier(0.4, 0, 0.2, 1)!important;
   margin:0;
   font-family: 'Graphik Web';
	font-size: clamp(16pt, 3vw, 22pt);
	line-height:140%;
	letter-spacing: -1%;
	overflow-x:hidden;
}



/* Ensure links still transition properly */
a {
   transition: color 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}


p {
	font-size: clamp(16px, 3vw, 18px);
	line-height:140%;
}

.fontBody {
	font-size: clamp(16px, 1.2vw, 18px);
	line-height:140%;
}

.fontBody2 {
	font-size: 16px;
	line-height:130%;
}


.fontCredits {
	font-size: clamp(12px, 2vw, 14px);
	line-height:130%;
}
.textGrey{
	color: #878787!important;
}

.spacer12 {
    height: 12px;
    width: 100%; /* Ensures it spans the entire column */
    visibility: hidden; /* Optional: Keeps it completely invisible */
}
.spacer80 {
    margin-bottom:80px;
}

.defaultColor {
	color: var(--font-color)!important;
}
.textBody {
	color: var(--font-color)!important;
}
/*slider switch css */
.theme-switch-wrapper {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.theme-switch {
  display: inline-block;
  height: 38px;
  position: relative;
  width: 76px;
}

.theme-switch input {
  display: none;
}

.theme-switch .slider {
  background-color: #0a0a0a;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-switch .slider:before {
  background-color: #fff;
  content: "";
  height: 34px;
  left: 2px;
  top: 2px;
  position: absolute;
  width: 44px;
  /* Define the transition here so it applies in both checked and unchecked states */
  transition: background-color 2.0s cubic-bezier(0.4, 0, 0.2, 1), transform 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-switch input:checked + .slider {
  background-color: #fff;
  transition: all 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-switch input:checked + .slider:before {
  background-color: #0a0a0a;
  transform: translateX(28px);

}

.theme-switch .slider.round {
  border-radius: 38px;
}

.theme-switch .slider.round:before {
  border-radius: 17px;
}

@media (max-width: 768px) {
    .theme-switch {
        height: 29px;
        width: 58px;
    }
	.theme-switch .slider:before {
	  background-color: #f5f5f5;
	  content: "";
	  height: 26px;
	  left: 2px;
	  top: 2px;
	  position: absolute;
	  width: 34px;
	  /* Define the transition here so it applies in both checked and unchecked states */
	  transition: background-color 2.0s cubic-bezier(0.4, 0, 0.2, 1), transform 2.0s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.theme-switch input:checked + .slider:before {
	  background-color: #191919;
	  transform: translateX(21px);

	}

	.theme-switch .slider.round {
	  border-radius: 29px;
	}

	.theme-switch .slider.round:before {
	  border-radius: 13px;
	}
	

}

.et_pb_slide_title h2,
.et_pb_more_button.et_pb_button,
.et_pb_button a.active,
.et_pb_slide_title a,
.et_pb_slide_title a.active {
    color: #fff!important;
}

.mainSlider h2{
	color: #fff!important;
}

#main-content { background-color: var(--bg-color)!important;transition: background-color 2.0s cubic-bezier(0.4, 0, 0.2, 1)!important;  }
.HeaderRow { background-color: var(--bg-color)!important ;transition: background-color 2.0s cubic-bezier(0.4, 0, 0.2, 1)!important; }
.FooterRow { background-color: var(--bg-color)!important ;transition: background-color 2.0s cubic-bezier(0.4, 0, 0.2, 1)!important; }
footer { background-color: var(--bg-color)!important ;transition: background-color 2.0s cubic-bezier(0.4, 0, 0.2, 1)!important; }

h1,h2,h3,h4,h5,a,a.active,
#top-menu li a:hover,
#top-menu li li a:hover {
	color: var(--font-color) !important;
	transition: color 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}

.et_pb_menu_0_tb_header.et_pb_menu ul li a {
	color: var(--font-color) !important;
	transition: color 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-container {
	width:100vw;
}



[data-theme="dark"] .FooterLogo  {
   background-image: url('https://gradation.theworldwidewebster.com/wp-content/uploads/2025/04/GDN_G_Logo_W.svg');
 
}

.HeaderLogo img{
	filter:invert(0);
	transition: filter 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .HeaderLogo img {
  filter: invert(1);  /*Invert colors for dark theme */
  transition: filter 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}

.navigation {
   display: flex;
   justify-content: center;
   list-style-type: none;
   margin: 0;
   padding-left: 0;
   & > li {
      margin-left: 20px;
      margin-right: 20px;
   }
   & > li > a {
      text-decoration: none;
      text-transform: uppercase;
      color: var(--font-color);
      font-size: 20px;
      transition: color 2.0s cubic-bezier(0.4, 0, 0.2, 1);
      &:hover {
         color: var(--font-color);
		 transition: color 2.0s cubic-bezier(0.4, 0, 0.2, 1);
      }
   }
}


.portfolioGridTitle {
	font-size: 20px;
	font-family: 'Graphik Web';
}
.portfolioGridTag {
	font-size: 12px;
	margin-bottom:15px;
	font-family: 'Graphik Web';
}
.portfolioGridLocation {
	font-size: 14px;
	margin-top:25px;
	font-family: 'Graphik Web';
}

.titleCredits{
	font-size:12px;
}


.containerCredits {
  display: grid;
  grid-template-columns: auto 1fr; /* First column auto-sized, second column takes up remaining space */
  grid-auto-rows: minmax(16px, auto); /* Rows have a minimum height of 100px, but will expand as needed */
  grid-gap: 1px 10px; /* Gap between grid items */
  font-size:12px;
}

.itemCredit,
.contentCredit {
	   overflow: hidden; /* Prevent content overflow */
	  display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to show before truncating */
    -webkit-box-orient: vertical;
      line-height: 1.2; /* Adjust as needed for line spacing */
    max-height: 4.8em; /* Adjust based on your line height and desired lines to show */
    margin: 0; /* Reset margin to ensure consistent spacing */

 
  border: 0px solid black;
  padding: 0px;
}

.projectTitles {
	margin-bottom:0px!important;
	margin-top:0px!important;
	line-height:1em!important;
}


/* Keep More Projects button in a fixed position */
.more-projects-wrapper {
    text-align: center;
    margin-top: 20px;
    min-height: 60px;
}

/* Mobile styles */
@media (max-width: 768px) { 
    .more-projects-wrapper {
        margin-top: 64px;
        
    }
}
/* Style for the More Projects Button */
.more-projects-btn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 18px;
    background-color:var(--button-colorBack)!important;
    color: var(--button-colorText)!important;
    border: 1px solid var(--button-colorBorder)!important;
    transition: background 0.3s ease;
}
.more-projects-btn:hover {
    background-color: var(--button-colorBackOver)!important;
	color: var(--button-colorTextOver)!important;
}

/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2024 Schwartzco Inc.
        License 2411-VOEBZM      
*/


@font-face {
	font-family: 'Graphik Web';
	src: url('fonts/Graphik-Light-Web.woff2') format('woff2'),
		 url('fonts/Graphik-Light-Web.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	}

.Graphik-Light-Web {
	font-family: 'Graphik Web';
	font-weight: 300;
	font-style: normal;
	}

@font-face {
	font-family: 'Graphik Web';
	src: url('fonts/Graphik-Regular-Web.woff2') format('woff2'),
		 url('fonts/Graphik-Regular-Web.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	}

.Graphik-Regular-Web {
	font-family: 'Graphik Web';
	font-weight: 400;
	font-style: normal;
	}