body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #888;
    line-height: 30px;
    text-align: center;
}

strong { font-weight: 600; }

a, a:hover, a:focus { color: #9b59b6; text-decoration: none; transition: all .3s; }

h1, h2 {
	margin-top: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 38px;
    font-weight: 300;
    color: #555;
    line-height: 50px;
}

h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
    font-weight: 300;
    color: #555;
    line-height: 30px;
}

img { max-width: 100%; }

.medium-paragraph {
	font-size: 17px;
	line-height: 32px;
}

.colored-text { color: #9b59b6; }

::-moz-selection { background: #9b59b6; color: #fff; text-shadow: none; }
::selection { background: #9b59b6; color: #fff; text-shadow: none; }


/***** General style, all sections *****/

.section-container {
    margin: 0 auto;
    padding-bottom: 80px;
}

.section-container-gray-bg {
	background: #f8f8f8;
}

.section-container-image-bg, 
.section-container-image-bg h2, 
.section-container-image-bg h3 {
	color: #fff;
}

.section-container-image-bg .divider-1 span {
	border-color: #fff;
}

.section-description {
	margin-top: 60px;
    padding-bottom: 10px;
}

.section-description p {
    margin-top: 20px;
	padding: 0 120px;
}
.section-container-image-bg .section-description p {
	opacity: 0.8;
}

.section-bottom-button {
	padding-top: 60px;
}

.btn-link-1 {
	display: inline-block;
	height: 50px;
	margin: 0 5px;
	padding: 0 28px;
	background: #9b59b6;
	background: rgba(155, 89, 182, 0.7);
	border: 0;
	font-size: 15px;
    font-weight: 600;
    line-height: 48px;
    color: #fff;
    border-radius: 4px;
    transition: all .3s;
}
.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active, .btn-link-1:active:focus,
.btn-link-1.btn-primary:not(:disabled):not(.disabled):active,
.btn-link-1.btn-primary:not(:disabled):not(.disabled):active:focus {
	background: #9b59b6;
	background: rgba(155, 89, 182, 0.9);
	outline: 0;
	color: #fff;
	box-shadow: none;
}

.btn-link-2 {
	display: inline-block;
	height: 50px;
	margin: 0 5px;
	padding: 0 28px;
	background: #333;
	background: rgba(0, 0, 0, 0.2);
	border: 0;
	font-size: 15px;
    font-weight: 600;
    line-height: 48px;
    color: #fff;
    border-radius: 4px;
    transition: all .3s;
}
.btn-link-2:hover, .btn-link-2:focus, .btn-link-2:active, .btn-link-2:active:focus,
.btn-link-2.btn-primary:not(:disabled):not(.disabled):active,
.btn-link-2.btn-primary:not(:disabled):not(.disabled):active:focus {
	background: #333; background: rgba(0, 0, 0, 0.4); outline: 0; color: #fff; box-shadow: none;
}

.btn-link-3 {
	display: inline-block;
	height: 50px;
	margin: 0 5px;
	padding: 0 28px;
	background: none;
	border: 0;
	border-bottom: 2px solid #9b59b6;
	font-size: 15px;
    font-weight: 600;
    line-height: 48px;
    color: #9b59b6;
    border-radius: 0;
    transition: all .3s;
}
.btn-link-3:hover, .btn-link-3:focus, .btn-link-3:active, .btn-link-3:active:focus,
.btn-link-3.btn-primary:not(:disabled):not(.disabled):active,
.btn-link-3.btn-primary:not(:disabled):not(.disabled):active:focus {
	padding: 0 10px;
	background: none;
	border: 0;
	border-bottom: 2px solid #9b59b6;
	outline: 0;
	color: #9b59b6;
	box-shadow: none;
}


/***** Divider *****/

.divider-1 span {
	display: inline-block;
	width: 200px;
	border-bottom: 1px dashed #ccc;
}


/***** Top menu *****/

.navbar {
	background: #444;
	-o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
	backface-visibility: hidden;
}
.navbar.navbar-no-bg { background: #444; background: rgba(0, 0, 0, 0.8); }

.navbar-dark .navbar-nav { font-size: 15px; color: #fff; font-weight: 600; }
.navbar-dark .navbar-nav .nav-link { color: #fff; color: rgba(255, 255, 255, 0.8); border: 0; }
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; }
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; outline: 0; }

.navbar-expand-md .navbar-nav .nav-link { padding-left: 1rem; padding-right: 1rem; }

.navbar-brand {
	width: 136px;
	/* Remove background image and text-indent */
	/* background: url(.../img/logo.png) left center no-repeat; */
	/* text-indent: -99999px; */
}

/* ...existing code... */

.navbar-brand img {
    height: 40px; /* Ensure the logo has a consistent height */
}

/* ...existing code... */

/***** Top content *****/

.top-content {
    padding: 210px 0;
}

.top-content .text {
	color: #fff;
}

.top-content .text h1 {
	margin-top: 25px;
	color: #fff;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.top-content .description {
	margin: 30px 0 10px 0;
}

.top-content .description p { /*! opacity: 0.8; */ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

.top-content .top-big-link {
	margin-top: 45px;
}

/***** About us *****/

.about-me-box {
	margin-top: 100px;
}

.about-me-box-text {
	padding-right: 30px;
	text-align: left;
}

.about-me-box-text h3 {
	margin-top: 0;
}

.about-me-box-text .medium-paragraph {
	margin-top: 20px;
	margin-bottom: 20px;
}

.about-me-box-text a { border-bottom: 1px dashed #9b59b6; }
.about-me-box-text a:hover, .about-me-box-text a:focus { border: 0; }

.about-me-box-img img {
	border-radius: 4px;
}

/***** Services *****/

.services-box {
	padding-top: 20px;
	text-align: left;
}

.services-box .services-box-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto;
    font-size: 40px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    border-radius: 28px;
    
    background: #9b59b6; /* Old browsers */
}

.services-box h3 {
	margin-top: 0;
	padding: 0 0 10px 0;
}


/***** More services *****/

.more-services-box {
	margin-top: 30px;
	text-align: left;
}

.more-services-box .more-services-box-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto;
    font-size: 28px;
    color: #fff;
    line-height: 60px;
    text-align: center;
    border-radius: 22px;
    
    background: #9b59b6; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffb24b 0%, #9b59b6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#9b59b6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffb24b 0%,#9b59b6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#9b59b6',GradientType=0 ); /* IE6-9 */
}

.more-services-box h3 {
	margin-top: 0;
	padding: 0 0 10px 0;
}


/***** Call to action *****/

.call-to-action-container .section-bottom-button {
	padding-top: 30px;
}


/***** Portfolio *****/

.portfolio-box {
	padding-top: 30px;
	text-align: left;
}

.portfolio-box-image {
	overflow: hidden;
	border-radius: 4px;
	width:350px;
}

.portfolio-box-image img {
	-o-transition: all .8s; -moz-transition: all .8s; -webkit-transition: all .8s; -ms-transition: all .8s; transition: all .8s;
}

.portfolio-box-image:hover img {
	-o-transform: scale(1.25); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);
}

.portfolio-box h3 {
	margin-top: 30px;
}
.portfolio-box h3 a { color: #555; }
.portfolio-box h3 a:hover, .portfolio-box h3 a:focus { color: #9b59b6; }

.portfolio-box h3 i {
	padding-left: 10px;
	color: #ccc;
	-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.portfolio-box h3:hover i { padding-left: 15px; }

.portfolio-box-date {
	padding-bottom: 10px;
	font-size: 14px;
	color: #aaa;
	text-transform: uppercase;
}

.portfolio-box-date i {
	padding-right: 5px;
	color: #ddd;
}

.portfolio-container .section-bottom-button {
	padding-top: 40px;
}

#WorkFull {
	display: none;
}

#WorkLatest {
	display: block;
}

/***** Testimonials *****/

.testimonials-container {
	padding-bottom: 70px;
}

.testimonial-list {
    margin-top: 30px;
    text-align: center;
}

.testimonial-list .testimonial-image img {
	max-width: 160px;
	border-radius: 4px;
}

.testimonial-list .testimonial-text {
	margin-top: 30px;
	opacity: 0.8;
}

.testimonial-list .testimonial-text a {
	color: #fff;
	border-bottom: 1px dashed #fff;
}
.testimonial-list .testimonial-text a:hover, 
.testimonial-list .testimonial-text a:focus { color: #fff; border: 0; }

.testimonial-list .nav-tabs {
	margin-top: 45px;
    border: 0;
    justify-content: center;
}

.testimonial-list .nav-tabs li {
	margin-left: 10px;
    margin-right: 10px;
}

.testimonial-list .nav-tabs li a {
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: 1px solid #fff;
    border-color: rgba(255, 255, 255, 0.8);
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}

.testimonial-list .nav-tabs li a:hover,
.testimonial-list .nav-tabs li a:focus {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
    border: 1px solid #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

.testimonial-list .nav-tabs li a.active,
.testimonial-list .nav-tabs li a.active:focus {
	background: #9b59b6; /* Old browsers */
	
	border: 0;
}

.slider {
	height: 550px;
	position: relative;
	overflow: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row nowrap;
		-ms-flex-flow: row nowrap;
			flex-flow: row nowrap;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
		-ms-flex-align: end;
			align-items: flex-end;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
		-ms-flex-pack: center;
			justify-content: center;
  }
  .slider__nav {
	width: 1em;
	height: 1em;
	margin: 2rem 12px;
	border-radius: 50%;
	z-index: 10;
	background:grey;
	cursor: pointer;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	position: relative; /* Ensure the nav is positioned relative to its container */
  }
  .slider__nav:checked {
	background:purple;
  }
  .slider__nav:checked:nth-of-type(1) ~ .slider__inner {
	left: 0%;
  }
  .slider__nav:checked:nth-of-type(2) ~ .slider__inner {
	left: -100%;
  }
  .slider__nav:checked:nth-of-type(3) ~ .slider__inner {
	left: -200%;
  }
  .slider__nav:checked:nth-of-type(4) ~ .slider__inner {
	left: -300%;
  }
  .slider__nav:checked:nth-of-type(5) ~ .slider__inner {
    left: -400%;
  }
  .slider__inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 500%; /* Adjusted width to accommodate 5 testimonials */
	height: 100%;
	-webkit-transition: left 0.4s, height 0.4s; /* Add height transition */
	transition: left 0.4s, height 0.4s; /* Add height transition */
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row nowrap;
		-ms-flex-flow: row nowrap;
			flex-flow: row nowrap;
  }
  .slider__contents {
	height: 100%;
	padding: 2rem;
	text-align: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
		-ms-flex: 1;
			flex: 1;
	-webkit-flex-flow: column nowrap;
		-ms-flex-flow: column nowrap;
			flex-flow: column nowrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
		-ms-flex-pack: center;
			justify-content: center;
  }
  .slider__image {
	max-width: 160px;
	border-radius: 4px;
	padding-bottom: 1em;
  }
  .slider__caption {
	font-weight: 500;
	margin: 2rem 0 1rem;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	text-transform: uppercase;
  }
  
  @-webkit-keyframes check {
	50% {
	  outline-color: #333;
	  box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
	}
	100% {
	  outline-color: #333;
	  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
	}
  }
  
  @keyframes check {
	50% {
	  outline-color: #333;
	  box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
	}
	100% {
	  outline-color: #333;
	  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
	}
  }

/* ...existing code... */

.slider__contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Ensure content starts from the top */
    height: 100%;
    padding: 2rem;
    text-align: center;
    /* Remove any transform properties that might cause issues */
    transform: none;
    overflow: hidden; /* Ensure content does not overflow */
}

/* ...existing code... */

/***** contact *****/

.contact-box {
	margin-top: 30px;
	text-align: left;
}

.contact-box-image {
	margin-top: 8px;
	overflow: hidden;
	border-radius: 4px;
}

.contact-box-image img {
	-o-transition: all .8s; -moz-transition: all .8s; -webkit-transition: all .8s; -ms-transition: all .8s; transition: all .8s;
}

.contact-box-image:hover img {
	-o-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25);
}

.contact-box h3 {
	margin-top: 0;
}
.contact-box h3 a { color: #555; }
.contact-box h3 a:hover, .contact-box h3 a:focus { color: #9b59b6; }

.contact-box h3 i {
	padding-left: 10px;
	color: #ccc;
	-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.contact-box h3:hover i { padding-left: 15px; }

.contact-box-date {
	padding-bottom: 10px;
	font-size: 14px;
	color: #aaa;
	text-transform: uppercase;
}

.contact-box-date i {
	padding-right: 5px;
	color: #ddd;
}

.contact-container .section-bottom-button {
	padding-top: 40px;
}

.contact-form-container {
    margin-top: 80px; /* Adjusted margin-top to ensure correct positioning */
    text-align: left;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form .form-control {
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    width: 100%; /* Ensure the form controls take full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.contact-form .btn-submit {
    background-color: #9b59b6;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background-color 0.3s;
    font-size: 16px; /* Ensure the font size is consistent */
    font-weight: 600; /* Ensure the font weight is consistent */
    text-transform: uppercase; /* Ensure the text is uppercase */
}

.contact-form .btn-submit:hover {
    background-color: #8e44ad;
}

/* ...existing code... */

.contact-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh; /* Ensure the container takes full viewport height */
	max-height: 80vh;
    text-align: left; /* Ensure the text is aligned to the left */
}

.contact-form {
    max-width: 600px; /* Set a maximum width for the form */
    margin: 0 auto; /* Center the form within the container */
    padding: 20px; /* Add some padding */
    background-color: #fff; /* Set a background color */
    border-radius: 8px; /* Add rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

/* ...existing code... */

/* ...existing code... */

.contact-form-container h2 {
    text-align: center; /* Center the title */
}

/* ...existing code... */

/* Remove the divider styles */
.contact-form-container .divider-1 {
    display: none;
}

/* ...existing code... */

/* ...existing code... */
#captcha-container {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
/* ...existing code... */

/***** Footer *****/

footer {
    padding: 40px 0 0 0;
    background: #444;
    color: #aaa;
    text-align: left;
}

.footer-left a { 
    color: #ddd; 
    border-bottom: 1px dashed #ddd; 
}
.footer-left a:hover, .footer-left a:focus { 
    color: #ddd; 
    border: 0; 
}

.footer-right {
    text-align: right;
}

.footer-right a {
    margin: 0 6px;
    font-size: 32px;
    color: #aaa;
}
.footer-right a:hover, .footer-right a:focus { 
    color: #eee; 
}

.footer-bottom {
    padding-bottom: 25px;
    text-align: center;
}

.footer-bottom a {
    font-size: 32px;
    color: #666;
    line-height: 40px;
}

.footer-bottom a:hover, .footer-bottom a:focus { 
    color: #888; 
}

.form-group {
	width:30em;
}
.form-group-dates {
	width:38em;
	padding-bottom:1em;
}
ul {
list-style-type: none;
}

li {
display: inline-block;
}

input[type="checkbox"][id^="cb"] {
display: none;
}

li label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}

label:before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
transition-duration: 0.4s;
transform: scale(0);
}

label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}

:checked + label {
border-color: #ddd;
border-radius: 10%;
}

:checked + label:before {
content: "✓";
background-color: green;
transform: scale(1);
}

:checked + label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
border-radius: 15%;
}

/* ...existing code... */
.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    display: none;
}

.hover-heading:hover + .hover-image {
    display: block;
}
/* ...existing code... */

/* ...existing code... */
.specs-section {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.specs-section img {
    width: 402px;
    height: 610px;
    margin-bottom: 10px;
}
.expand-heading {
    cursor: pointer;
}
/* ...existing code... */

/* Styles for success and error messages */
.message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
}

.message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Styles for the return to home page button */
.btn-home {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s;
}

.btn-home:hover {
    background-color: #0056b3;
}

/* ...existing code... */

/* Styles for the carousel caption with transparent background */
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Slightly transparent black background */
    padding: 10px;
    border-radius: 4px;
}

/* ...existing code... */

/* ...existing code... */

@media (max-width: 768px) {
    .slider__txt {
        font-size: 12px; /* Reduce font size for mobile devices */
    }
    .slider__image {
        max-width: 120px; /* Reduce image size for mobile devices */
    }
}

/* ...existing code... */

/* ...existing code... */

@media (max-width: 768px) {
    .slider__txt {
        font-size: 12px !important; /* Ensure font size is reduced for mobile devices */
    }
    .slider__image {
        max-width: 120px !important; /* Ensure image size is reduced for mobile devices */
        margin-bottom: 1em; /* Add margin to separate image from text */
        position: relative; /* Ensure the image is positioned relative */
        top: 0; /* Reset any top positioning */
    }
    .slider__inner {
        height: auto; /* Allow the slider inner to adjust height dynamically */
    }
    .slider__contents {
        padding: 1rem; /* Adjust padding for mobile devices */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Ensure content starts from the top */
        transform: none; /* Ensure no transform is applied on mobile */
        height: auto; /* Allow the height to adjust dynamically */
        max-height: 100vh; /* Ensure the content does not exceed the viewport height */
        overflow-y: auto; /* Add vertical scroll if content exceeds viewport height */
    }
    .slider__nav:checked:nth-of-type(4) ~ .slider__inner {
        left: -300%;
        height: auto; /* Ensure the height adjusts dynamically */
    }
    .slider__nav {
		top: 20px;
		margin: 2rem 12px;
    }
    .contact-form {
        padding: 10px; /* Adjust padding for mobile devices */
        width: 90%; /* Set a fixed width for the form */
        max-width: 400px; /* Set a maximum width for the form */
        margin: 0 auto; /* Center the form within the container */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    .contact-form .form-control {
        font-size: 14px; /* Adjust font size for mobile devices */
        width: 100%; /* Ensure the form controls take full width */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    .form-group {
        width: 100%; /* Ensure the form group takes full width */
    }
    .navbar-brand img {
        display: block; /* Ensure the logo is displayed */
        margin: 0 auto; /* Center the logo */
        height: 40px; /* Ensure the logo has a consistent height */
    }
    .navbar-toggler {
        margin-left: auto; /* Ensure the toggler is positioned correctly */
    }
    .navbar-collapse {
        display: flex;
        justify-content: center; /* Center the navigation items */
    }
    .navbar-nav {
        width: 100%; /* Ensure the navigation items take full width */
        text-align: center; /* Center the navigation items */
    }
    .navbar-nav .nav-item {
        display: inline-block; /* Ensure the navigation items are displayed inline */
    }
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem; /* Adjust padding for navigation links */
    }
    .navbar-brand {
        display: flex;
        align-items: center; /* Vertically center the logo */
    }
}

/* ...existing code... */

/* Fix the top navbar dropdown menu */
.navbar-dark .navbar-nav .nav-item .dropdown-menu {
    background-color: #444; /* Ensure the dropdown menu has the same background color as the navbar */
    border: none; /* Remove border */
}

.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    color: #fff; /* Ensure the dropdown items have the same color as the navbar links */
}

.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover,
.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1); /* Add a hover effect */
}

/* ...existing code... */

/* ...existing code... */

.featured-work-container {
    padding: 20px 0;
    background: #f8f8f8;
}

.case-study-box {
    text-align: center;
    margin-bottom: 30px;
    max-width: 400px; /* Limit the width of each case study */
    margin: 0 auto 30px auto; /* Center the case study boxes */
}

.case-study-box-image {
    margin-bottom: 20px;
}

.case-study-box-image img {
    max-width: 100%;
    border-radius: 4px;
    cursor: pointer; /* Change cursor to pointer */
    transition: transform 0.3s ease; /* Add transition for zoom effect */
}

.case-study-box-image img:hover {
    transform: scale(1.05); /* Zoom effect */
}

/* ...existing code... */

.case-study-details {
    display: flex;
    flex-direction: row; /* Ensure the text and image are side by side */
    align-items: flex-start; /* Align items to the top */
    justify-content: space-between;
    margin-top: 20px;
    text-align: left;
    width: 100%; /* Ensure the details take the full width of the container */
    position: relative; /* Ensure the image can be positioned outside the container */
    overflow: visible; /* Allow overflow to ensure the image can be positioned outside */
}

.case-study-text {
    flex: 1; /* Allow the text to take available space */
    margin-right: 20px; /* Add some space between text and image */
}

.case-study-box-image-large {
    flex: 1; /* Allow the image to take available space */
    position: absolute; /* Position the image absolutely */
    top: 0; /* Align the image to the top */
    max-width: 143%; /* Limit the width of the image */
}

.case-study-box-image-large img {
    max-width: 100%;
    max-height: 40vh; /* Limit height to 80% of viewport height */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire image is visible */
    border-radius: 4px;
    cursor: pointer; /* Change cursor to pointer */
}

.case-study-box:nth-child(odd) .case-study-box-image-large {
    right: -34.45vw; /* Move the image outside the container to the right for odd case studies */
}

.case-study-box:nth-child(even) .case-study-box-image-large {
    left: -34.35vw; /* Correct the left indent for even case studies */
}

/* ...existing code... */

/* ...existing code... */

.case-study-box:nth-child(even) .case-study-text {
    text-align: right; /* Right align the text for even case studies */
}

/* ...existing code... */

/* ...existing code... */

.fullscreen-preview {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    z-index: 9999; /* Ensure it is above all other content */
    justify-content: center;
    align-items: center;
}

.fullscreen-preview img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
}

.fullscreen-preview .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}