@charset "utf-8";
/* CSS Document */

html{
    scroll-behavior: smooth;
}
body{
	font-family:Switzer, sans-serif;
	-webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
h1{
	font-family:"Switzer Semibold", sans-serif;
	font-size:2.6rem;
	font-weight:700;
}
h2{
	font-family:"Switzer Semibold", sans-serif;
	font-size:2rem;
	font-weight:700;
}
h3{
	font-family:"Switzer Semibold", sans-serif;
	font-size:1.5rem;
	font-weight:700;
}
p, q, ul li{
	font-size:1rem;
	color:rgb(90,90,90);
}
.con{
    border-right:1px solid rgb(210,210,210);
	border-right:1px solid rgba(210,210,210, 0.5);
	border-left:1px solid rgb(210,210,210);
	border-left:1px solid rgba(210,210,210,0.5);
}
nav{
    background:rgb(255,255,255);
    background:rgba(255,255,255,0.6);
    border:1px solid rgb(210,210,210);
	border:1px solid rgba(210,210,210,0.5);
	border-radius:15px;
	height:62px;
	z-index:1030;
}
nav p{
	color:rgb(220,220,220);
}
.icon-div{
	width:13%;
	height:85%;
	padding:0;
}
.icon-div:hover{
	background:rgb(227,227,227);
	width:13%;
	height:85%;
	border-radius:15px;
	padding:0;
}
.icon-div a:hover{
	color:rgb(0,0,0);
}
.icon{
	font-size:18px;
}
.bg-black{
	background:rgb(0,0,0);
}
.text-black{
	color:rgb(0,0,0);
}
.text-div{
	width:35%;
	height:85%;
	border-radius:15px;
	margin-left:2.5%;
}
.text-div a{
	font-size:1rem;
	font-weight:700;
}
.cta-btn{
	width:60%;
	height:45px;
	border-radius:15px;
	background:rgb(0,0,0);
	transition:width .5s;
}
.cta-btn i{
	display:none;
	transition:.5s;
}
.cta-btn:hover{
	width:70%;
}
.cta-btn:hover i{
	display:inline;
	margin-left:1rem !important;	
}
.inactive{
	background:rgb(225,250,220);
	color:rgb(23,141,0);
	font-size:16px;
	min-width:88%;
	height:45px;
	border-radius:25px;
	border:none;
	font-weight:700;
	margin-left:-40%;
}
button span{
	color:rgb(23,141,0);
	font-size:24px;
}
.slideShow{
	overflow:hidden;
	position:relative;
}
.slideshow-container{
	display:inline-flex;
    animation:scroll-left 30s linear infinite;
}
.mySlides{
	background:rgb(190,191,194);
	width:500px;
	height:350px;
	margin-top:2%;
	border-radius:20px;
	display:inline-block;
	margin-right:0.5% !important;
}
.mySlides img{
	vertical-align:middle;
	border-radius:20px;
}
.mySlides img:hover{
	animation-duration:60s;
}
.aka{
	font-family:Switzer, sans-serif;
	font-size:.8rem;
	color:rgb(90,90,90);
}
.data{
	margin-top:15%;
	margin-bottom:10%;
}
.data p{
	font-family:"Comic Sans MS", cursive;
	font-size:10px;
}
.dataBox1{
	width:180px;
	height:200px;
	transform: rotateZ(-15deg);
	margin-top:20%;
	margin-left:-35%;
	transition:transform .5s;
	transition:margin-left .5s;
}
.dataBox2{
	width:180px;
	height:200px;
	transform: rotateZ(15deg);
	margin-top:-153%;
	margin-left:30%;
	transition:transform .5s;
	transition:margin-left .5s;
}
.data:hover .dataBox1{
	transform: rotateZ(-20deg);
	margin-left:-40% !important;
}
.data:hover .dataBox2{
	transform: rotateZ(20deg);
	margin-left:35% !important;
}
.projBox{
    border:1px solid rgb(210,210,210);
	border:1px solid rgba(210,210,210,0.5);
	border-radius:20px;
	height:580px;
	background-color:transparent;
}
.projBox a{
	background:rgb(242,242,242);
	width:32%;
	height:45px;
	border-radius:10px;
	font-size:1rem;
	font-weight:700;
	transition:width .5s;
}
.projBox a i{
	transition:.5s;
}
.projBox a:hover{
	width:35%;
}
.projBox a:hover i{
	margin-left:.8rem !important;
}
.innerBox{
	background:rgb(188,189,194);
	height:360px;
	border-radius:20px;
}
.innerBox img{
	border-radius:10px;
}
.helpDiv{
	background:rgb(250,250,250);
	min-height:165px;
	border-radius:10px;
	border:1px solid rgb(150,150,150);
	border:1px solid rgba(150,150,150,0.1);
}
.helpDiv i{
	font-size:1.5rem;
}
.helpDiv .fa-gear{
	animation-name:round;
	animation-duration:.5s;
	animation-iteration-count:infinite;
}
.review{
	overflow:hidden;
	position:relative;
}
.review-container{
	display:inline-flex;
    animation:scroll-left 20s linear infinite;
}
.reviewSlides{
	width:600px;
	background:rgb(250,250,250);
	display:inline-block;
	border-radius:20px;
	height:250px;
	margin-right:0.3%;
	border:1px solid rgb(150,150,150);
	border:1px solid rgba(150,150,150,0.1);
}
.review:hover .review-container{
	animation-play-state:paused;
}
.author{
	font-size:1.125rem;
	color:rgb(0,0,0);
}
.fill{
	height:43px !important;
	background:rgb(245,245,245) !important;
	border:1px solid rgb(150,150,150);
	border:1px solid rgba(150,150,150,0.4) !important;
	border-radius:15px !important;
}
input::placeholder, textarea::placeholder{
	font-size:0.875rem;
}
textarea{
	background:rgb(245,245,245) !important;
	border:1px solid rgb(150,150,150);
	border:1px solid rgba(150,150,150,0.4) !important;
	border-radius:15px !important;
}
.send{
	width:98% !important;
	background:rgb(0,0,0) !important;
	border-radius:10px !important;
}
ul li a i{
	font-size:1.2rem;
}
.btn-transparent{
	background:transparent;
	width:100%;
	height:45px;
	border:1px solid rgba(0,0,0,0.1);
	border-radius:20px;
	font-size:1rem;
	font-weight:700;
}
.box{
	background-image:url("../img/living-room-1835923_1280.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	height:360px;
	border-radius:20px;
	margin-top:5rem !important;
}
.box img{
	border-radius:10px;
}
.box1{
	background:rgb(240,241,245);
	height:260px;
	border-radius:20px;
}
.box1 img{
	border-radius:10px;
}
.box2{
	background-image:url("../img/living-room-1835923_1280.jpg");
	height:260px;
	border-radius:20px;
}
.box2 img{
	border-top-left-radius:10px;
	border-bottom-right-radius:20px;
	margin-left:2.3rem;
}
.back:hover{
	color:rgb(0,0,0) !important;
}


/* --- Dark Mode Toggle Button --- */
.dark-mode-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  transition: background 0.3s, color 0.3s;
  z-index: 9999;
}

.dark-mode-btn:hover {
  background-color: #333;
}

/* --- Dark Mode Styles --- */
body.dark-mode {
  background-color: #000;
  color: #fff;
}

/* Buttons invert colors in dark mode */
body.dark-mode button,
body.dark-mode .btn {
  background-color: #fff !important;
  color: #000 !important;
  border: none;
}



@keyframes round{
  0%   {transform:rotate(60deg);}
  20%  {transform:rotate(120deg);}
  40%  {transform:rotate(180deg);}
  60% {transform:rotate(240deg);}
  80% {transform:rotate(300deg);}
  100% {transform:rotate(360deg);}
}
@keyframes fade{
	from {opacity: .4} 
	to {opacity: 1}
}
@keyframes scroll-left{
	0%{
		transform: translateX(0);
	}
	100%{
        transform: translateX(-50%);
    }
}

@media (max-width: 576px){
p, ul li{
	font-size:0.875rem;
}
h1{
	font-size:1.8rem;
}
h2{
	font-size:1.6rem;
}
h3{
	font-size:1.25rem;
}
.icon-div{
	width:10%;
}
.text-div{
	margin-right:1%;
}
.cta-btn{
	width:40%;
	margin-left:0 !important;
}
.cta-btn:hover{
	width:50%;
}
.inactive{
	min-width:75%;
	margin-top:2%;
	margin-left:0;
}
.mySlides img{
	height:90%;
}
.data{
	margin-bottom:20%;
}
.dataBox1{
	margin-top:30%;
	margin-left:15%;
}
.dataBox2{
	margin-top:-70%;
	margin-left:35%;
}
.data:hover .dataBox1{
	margin-left:10% !important;
}
.data:hover .dataBox2{
	margin-left:30% !important;
}
.projBox a{
	font-size:0.875rem;
	width:45%;
}
.projBox a:hover{
	width:50%;
}
.helpDiv{
	width:47%;
	height:170px;
	margin-left:0.2% !important;
}
.reviewSlides{
	width:400px;
}
.author{
	font-size:1rem;
}
.btn-transparent{
	width:45%;
	font-size:0.875rem;
}
.innerBox{
	height:300px;
}
.innerBox img{
	height:260px;
}
.box1 img{
    width:98%;
}
}