/* ==========================================================================
   SMARTER studio – Modern base (added 2026 redesign)
   Mobile-first, CSS custom properties, optional dark mode skeleton.
   All original artistic rules preserved below for visual continuity.
   ========================================================================== */

:root {
    --ss-color-primary: #001B4C;
    --ss-color-bg: #ffffff;
    --ss-color-text: #0a0a0a;
    --ss-color-muted: #555555;
    --ss-color-accent: #1a3a6e;
    --ss-space-base: 8px;
    --ss-font-family: 'Rajdhani', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ss-radius: 0; /* keep current sharp aesthetic */
}

@media (prefers-color-scheme: dark) {
    :root {
        --ss-color-bg: #0f1115;
        --ss-color-text: #f0f0f0;
        --ss-color-muted: #a0a0a0;
        /* Artistic dark variant can be tuned further */
    }
    .projectInfo,
    .projectLocal,
    .projectDetails,
    .smarterTalk {
        color: var(--ss-color-text);
    }
}

/* Future: .dark class toggle for manual switch (template param) */
body.dark {
    --ss-color-bg: #0f1115;
    --ss-color-text: #f0f0f0;
}

h1.projectDataTitle {
			font-family: rajdhani;
			font-weight: 400;
			text-transform: lowercase;
			text-align: right;
			font-size: 32px;
			position: absolute;
			width: 100%;
			left: 0;
			line-height: 64px;
			top: 90px;
			margin: 0;
			padding-right: 48px;
		}  
.smarterTalk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-56%);
  user-select: none;
}
.smarterTalk .topCorner {
  width: 5vw;
  height: 5vw;
  position: absolute;
  top: -70px;
  left: -60px;
  border-left: 3px solid;
  border-top: 3px solid;
}
.smarterTalk .bottomCorner {
  width: 5vw;
  height: 5vw;
  position: absolute;
  bottom: -60px;
  right: -65px;
  border-right: 3px solid;
  border-bottom: 3px solid;
}
.smarterName {
  font-size: 4vw;
  line-height: 2.1vw;
  margin-bottom: 20px;
}
.smarterCompany {
  font-size: 1.2vw;
  text-align: right;
  display: block;
  margin-right: 5px;
}
.smarterBuilding {
  font-size: 2vw;
  display: block;
  margin-bottom: 5px;
}
.smarterAddress {
  font-size: 1.55vw;
}
.smarterPhone {
  margin-top: 35px;
  font-size: 1.8vw;
  display: block;
  text-align: right;
  user-select: none;
}
.smarterMail {
  margin-top: -6px;
  font-size: 1.54vw;
  display: block;
  text-align: right;
  user-select: none;
}
.relatedProjects h3 {
	font-family: rajdhani;
	font-weight: 400;
	text-transform: lowercase;
	font-size: 32px;
	width: 100%;
	line-height: 64px;
	margin: 0 0 14px;
	padding: 0 48px;
}

.projectDataImgContainer {
	position: relative;
}

.projectDataImg {
	width: 100vw;
	height: 38vw;
	margin: 78px 0 32px;
	background-position: center center;
	background-size: cover;
	max-height: 60vh;
	margin-left: -46px;
	display: none;
}

.projectDataImg.nextImg {
	top: 0;
	margin-top: 0;
}

.projectDataImgNav,
.relatedImgNav {
	display: grid;
	width: 100%;
	margin: 0;
	grid-template-columns: auto auto auto auto auto;
	grid-gap: 32px;
}

.projectDataSmallImg {
	width: 100%;
	height: 9vw;
	background-position: center center;
	background-size: cover;
	display: inline-block;
	margin: 0;
	transition: opacity 800ms ease;
	opacity: 0.5;
	cursor: pointer;
}

.projectDataSmallImg.active {
	opacity: 1;
	transition: opacity 400ms ease;
}

.relatedProjects {
	margin-top: 60px;
	z-index: 100;
	position: relative;
	margin-bottom: 40px;
}

.relatedImg {
	width: 100%;
	height: 14vw;
	background-position: center center;
	background-size: cover;
	display: inline-block;
	margin: 0;
	transition: opacity 800ms ease;
	opacity: 1;
	cursor: pointer;
}

.projectDetails {
	z-index: 100;
	position: relative;
}

.prevNext {
	display: block;
	position: relative;
	height: calc(24vw + 40px);
	width: 100vw;
	margin-left: -46px;
	margin-top: -21vw;
	overflow: hidden;
	margin-top: -22vw;
	z-index: 90;
}

.prevContain,
.nextContain {
	height: 0;
	float: left;
	display: inline-block;
}

.prevContain {
	position: absolute;
	left: 0;
}

.nextContain {
	position: absolute;
	right: 0;
}

.prevButton {
	width: 22vw;
	height: 0;
	float: left;
	margin-bottom: 0;
	position: relative;
}

.nextButton {
	width: 22vw;
	height: 21vw;
	float: right;
	margin-bottom: 0;
	position: relative;
}

.prevContent,
.nextContent {
	width: auto;
	height: 45px;
	z-index: 10000;
	padding: 0 48px;
	position: relative;
	background: transparent;
	transition: ease-in-out 500ms;
	top: 21vw;
	margin: 16px 0 16px;
}

.prevImg {
	width: 16vw;
	height: 16vw;
	float: left;
	margin-left: calc(-16vw - 20px);
	background-position: center center;
	background-size: cover;
	transition: ease-in-out 400ms;
	z-index: 101;
	top: 0;
	position: absolute;
	border: 30px solid #fff;
	border-left: none;
	border-bottom: none;
}

.nextOLD {
	width: 16vw;
	height: 16vw;
	float: right;
	margin-right: calc(-16vw - 20px);
	background-position: center center;
	background-size: cover;
	transition: ease-in-out 400ms;
	z-index: 101;
	top: 0;
	right: 0;
	position: absolute;
	border: 20px solid #fff;
	border-right: none;
	border-bottom: none;
}

.prevContain:hover>.prevButton .prevImg,
.nextContain:hover>.nextButton .nextImg {
	width: 22vw;
	height: 22vw;
}

.prevContain:hover>.prevButton .prevImg,
.prevContain:hover>.prevButton .prevContent {
	margin-left: 0;
	transition: ease-in-out 300ms;
	z-index: 1;
}

.prevContain:hover>.prevButton .prevContent {
	margin-left: 0;
}

.prevContain:hover~.nextImg {
	margin-right: 0;
	transition: ease-in-out 300ms;
}

.prevContain:hover>.prevButton .prevContent .titleButton,
.nextContain:hover>.nextButton .nextContent .titleButton {
	text-decoration: none;
}

.nextContain:hover~.nextImg {
	margin-right: 0;
	transition: ease-in-out 300ms;
}

.nextContain:hover>.nextButton .nextContent {
	margin-right: 0;
}

.nextContain:hover>.nextButton .nextImg,
.nextContain:hover>.nextButton .nextContent {
	margin-right: 0;
	transition: ease-in-out 300ms;
	z-index: 1;
}

.prevContent div,
.nextContent div {
	width: 100%;
	font-family: 'Rajdhani';
	text-transform: lowercase;
	line-height: 52px;
	font-size: 24px;
}

.prevContent div {
	text-align: left;
}

.nextContent div {
	text-align: right;
}

.titleButton {
	text-transform: uppercase;
	color: #111;
	text-decoration: underline;
}

.nameButton {
	text-transform: uppercase;
	font-weight: bold;
	color: #555555;
}

.projectData {
	width: calc(100vw - 92px);
	margin: 0 auto;
	margin-top: -18px;
}

.pageData {
  padding: 0 48px;
  max-width: 1800px;
  margin: 30px auto 80px;
  grid-template-columns: auto auto;
  grid-gap: 60px;
}

.sectionData {
  position: relative
}

.sectionData p {
  margin: 0;
  text-align: justify;
  font-size: 1vw;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.prev,
.next {
	height: 100%;
	z-index: 1000;
	position: absolute;
	width: 40px;
	cursor: pointer;
}

.next {
	right: 0;
}

.prev span,
.next span {
	position: absolute;
	top: 50%;
	color: #fff;
	font-size: 26px;
}

.prev span {
	left: 15px;
}

.next span {
	right: 15px;
}

.site-grid {
	grid-template-columns: unset;
	grid-template-areas: unset;
	grid-gap: unset;
}

.header .grid-child {
	width: auto;
	display: inline-block;
	padding: 10px 0;
}

.header .grid-child:first-child {
	width: 170px;
	margin: 0;
}

.container-nav {
	position: relative;
	float: right;
	top: 12px;
}

.container-header .mod-menu>li {
	margin-left: 30px !important;
	font-size: 20px;
}

.container-header {
	background-color: rgba(255, 255, 255, 0.8);
	background-image: none;
	padding: 0 48px;
	display: none;
}

.container-header .mod-menu {
	color: #0a0a0a;
}

.container-header .navbar-brand {
	padding-bottom: 5px;
	padding-top: 0;
}

.brand-logo img {
    width: 180px;
}

.container-header .container-nav {
	padding: 11px 0;
}

.mod-menu li:first-child {
	display: none;
}

.container-header .mod-list li.active>a {
	font-weight: 600;
	color: #000;
}

.projectDetails {
	font-family: "rajdhani";
	font-size: 18px;
	font-weight: 500;
	margin-top: 24px;
}

.projectLocal {
	font-size: 22px;
}

.projectList {
	position: relative;
	width: calc(100% - 92px);
	margin: 0 48px;
	display: grid;
	/* Modern mobile-first responsive grid (added in redesign; old fixed columns preserved below for continuity) */
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	grid-gap: 32px;
}

.projectItem {
	position: relative;
	width: 100%;
	height: calc(16.6vw - 48px);
	overflow: hidden;
}

.projectItem .projectImage {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	transform: scale(1.1);
	transition: ease-in-out 400ms;
}

.projectItem:hover .projectImage {
	transform: scale(1);
	transition: ease-in 300ms;
}

.projectItem .projectInfo {
	position: absolute;
	top: 100%;
	color: #0a0a0a;
	padding: 0 20px;
	opacity: 0;
	transition: ease-in 100ms;
	font-size: 1.5vw;
	font-family: rajdhani;
	font-weight: 400;
}

.relatedContain {
	position: relative;
}

.relatedContain .projectInfo {
	position: absolute;
	top: 100%;
	color: #0a0a0a;
	padding: 0 20px;
	opacity: 0;
	transition: ease-in 100ms;
	font-size: 1.5vw;
	font-family: rajdhani;
	font-weight: 400;
}

.projectItem:hover .projectInfo {
	top: 50%;
	transform: translateY(-50%);
	transition: ease-in 500ms;
}

.relatedContain:hover .projectInfo {
	top: 50%;
	transform: translateY(-50%);
	transition: ease-in 300ms;
}

.projectItem .projectDate {
	font-family: helvetica;
	display: none;
}

.slideshow-container {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	top: 0;
	left: 0;
}

.slide {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	transform: scale(1.05);
	cursor: pointer;
}

.slide .slideimage {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	animation: slideAnimation 8s infinite alternate;
}

.mod-menu {
	flex-direction: inherit !important;
}

.nav-item {
	font-family: rajdhani;
	font-weight: 500;
	letter-spacing: 0.3px;
}

body {
    font-family: "rajdhani";
    font-size: 18px;
    font-weight: 500;
}
@keyframes slideAnimation {
	0% {
		transform: scale(1.2) translate(-30px, -50px);
		filter: opacity(0.95);
	}

	100% {
		transform: scale(1)translate(20px, 0px);
		filter: opacity(1);
	}
}


@media all and (max-width: 2000px) {
    
    .sectionData p {
        font-size: 1.4vw;
    }
	.projectList {
		grid-template-columns: auto auto auto auto auto;
	}

	.projectItem {
		height: calc(20vw - 48px);
	}
}

@media all and (max-width: 1500px) {
	.projectList {
		grid-template-columns: auto auto auto auto;
	}

	.projectItem {
		height: calc(25vw - 48px);
	}

	.projectItem .projectInfo,
	.relatedContain .projectInfo {
		font-size: 1.8vw;
	}

	.projectDataImgNav,
	.relatedImgNav {
		grid-template-columns: auto auto auto auto;
	}

	.projectDataImg {
		width: 100%;
		height: 50vw;
		margin: 78px auto 32px;
	}

	.projectDataSmallImg {
		height: 13vw;
	}

	.relatedImg {
		height: 21vw;
	}
}

@media all and (max-width: 1100px) {
    .pageData {
        grid-template-columns: auto;
    }
    .sectionData p {
        position: relative;
        font-size: 2vw;
    }
    .smarterName {
        font-size: 6vw;
        line-height: 3.1vw;
    }
    .smarterCompany {
        font-size: 1.8vw;
    }
    .smarterAddress {
        font-size: 2.2vw;
    }
    .smarterBuilding {
        font-size: 3vw;
    }
    .smarterPhone {
        font-size: 2.8vw;
    }
    .smarterMail {
        font-size: 2.4vw;
    }
	.projectList {
		grid-template-columns: auto auto auto;
	}

	.projectItem {
		height: calc(33.3vw - 48px);
	}

	.projectItem .projectInfo,
	.relatedContain .projectInfo {
		font-size: 2.3vw;
	}

	.slide {
		transform: scale(1.10);
	}

	.projectDataImgNav,
	.relatedImgNav {
		grid-template-columns: auto auto auto;
	}

	.projectDataSmallImg {
		height: 17vw;
	}

	.relatedImg {
		height: 25vw;
	}

	.projectData {
		margin-top: 0;
	}
}

@media all and (max-width: 800px) {
    
    .sectionData p {
        font-size: 2.5vw;
    }
    h1.projectDataTitle {
      padding: 0 24px;
  font-size: 24px;
  line-height: 32px;
  text-align: left;
  top: 96px;
    }
    .smarterTalk {
        transform: translateX(-50%) translateY(-45%);
    }
    .smarterName {
        font-size: 8vw;
        line-height: 4.4vw;
    }
    .smarterCompany {
        font-size: 2.5vw;
    }
    .smarterAddress {
        font-size: 3.2vw;
    }
    .smarterBuilding {
        font-size: 4vw;
    }
    .smarterPhone {
        font-size: 3.3vw;
    }
    .smarterMail {
        font-size: 2.8vw;
    }
	.projectList {
		grid-template-columns: auto auto;
		width: calc(100% - 48px);
		margin: 0 24px;
	}

	.projectItem {
		height: calc(50vw - 48px);
	}

	.projectItem .projectInfo,
	.relatedContain .projectInfo {
		font-size: 4vw;
	}

	.projectData {
		width: calc(100vw - 44px);
	}

	.header .grid-child:first-child {
		width: 170px;
	}

	.container-header {
		padding: 0 24px;
	}

	.container-header .container-nav {
		padding: 14px 0;
	}

	.container-header .mod-menu>li {
		font-size: 18px;
	}

    .pageData {
	    padding: 0 24px;
    }
  
	.projectDataImgNav,
	.relatedImgNav {
		grid-template-columns: auto auto;
        margin-top: 60px
	}

	.projectDataSmallImg {
		height: 25vw;
	}

	.relatedImg {
		height: 29vw;
	}

    .prevContent div, .nextContent div {
        line-height: 32px;
    }

    .prevContain:hover > .prevButton .prevImg, .nextContain:hover > .nextButton .nextImg {
       width: 38vw;
       height: 38vw;
    }

    .prevNext {
        height: calc(44vw + 40px);
        margin-left: -22px;
        margin-top: -46vw;
    }
    .prevButton, .nextButton {
        width: 32vw;
        height: 32vw;
    }
    .prevContent, .nextContent {
        padding: 0 22px;
        top: 39vw;
    }
    .prevImg {
        width: 24vw;
        height: 24vw;
        margin-left: calc(-24vw - 20px);
    }
    .nextImg {
        width: 24vw;
        height: 24vw;
        margin-right: calc(-24vw - 20px);
    }
    .prevButton, .nextButton {
        width: 32vw;
        height: 32vw;
    }
    .relatedImgNav {
        margin-top: 22px;
    }
    .relatedProjects h3 {
        padding: 0;
    }
}

@media all and (max-width: 650px) {

    .sectionData p {
        font-size: 3.6vw;
    }
    .smarterTalk .topCorner {
        top: -50px;
        left: -50px;
        width: 7vw;
        height: 7vw;
    }
    .smarterTalk .bottomCorner {
        bottom: -50px;
        right: -50px;
        width: 7vw;
        height: 7vw;
    }
    .smarterTalk {
        width: max-content;
        transform: translateX(-50%) translateY(-45%);
    }
    .smarterName {
        font-size: 10vw;
        line-height: 5.4vw;
    }
    .smarterCompany {
        font-size: 2.9vw;
    }
    .smarterAddress {
        font-size: 3.9vw;
    }
    .smarterBuilding {
        font-size: 5vw;
    }
    .smarterPhone {
        font-size: 4.3vw;
    }
    .smarterMail {
        font-size: 3.7vw;
    }
	.projectList {
		grid-template-columns: auto;
	}

	.projectItem {
		height: calc(100vw - 48px);
	}

	.projectItem .projectInfo,
	.relatedContain .projectInfo {
		font-size: 4vw;
	}

	.projectDataImg {
		display: none;
	}

	.projectDataImgNav,
	.relatedImgNav {
		grid-template-columns: auto;
	}

	.projectDataImgNav {
        margin-top: 60px;
    }

	.projectDataSmallImg,
	.relatedImg {
		height: 62vw;
		opacity: 1;
		cursor: default;
	}

	.relatedImg {
		height: 66vw;
	}

	.projectDataSmallImg:nth-child(even) {
		height: 50vw;
	}
}

@media all and (max-width: 550px) {
	.projectDataImgNav {
        margin-top: 90px;
    }
    .prevContent {
        padding-right: 0;
    }
    .nextContent {
        padding-left: 0;
    }
  }

@media all and (max-height: 900px) and (min-width: 650px) {
    .smarterTalk {
        transform: translateX(-50%) translateY(-50%);
    }
}

@media all and (max-height: 700px) and (min-width: 650px) {
    .smarterTalk {
        transform: translateX(-50%) translateY(-38%);
    }
}