+
+
+ Past Projects
+Explore a selection of our completed projects where we've transformed ordinary spaces into extraordinary environments, blending quality craftsmanship with thoughtful design.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+ Our Partners
@@ -115,23 +154,22 @@
-
+
-
+
Trusted By
- 
+ 
- 
- 
- 
+ 
+ 
+
-
-
-
+
+
Get In Touch
We look forward to beautiful design moments through exciting collaborations. Let's create something exceptional together.
diff --git a/style.css b/style.css index bf5a49b..a879af8 100644 --- a/style.css +++ b/style.css @@ -83,9 +83,13 @@ header .container { } .logo { - font-size: 1.8rem; - font-weight: 300; - letter-spacing: 2px; + display: block; +} + +.logo img { + height: 2.5rem; /* This matches the original font-size to maintain the height */ + width: auto; /* This preserves your logo's aspect ratio */ + vertical-align: middle; /* Good practice for image alignment */ } header nav ul { @@ -287,6 +291,7 @@ footer p:first-child { header .container { flex-direction: column; gap: 0.5rem; + align-items: flex-start; } .about-grid, .values-grid { @@ -296,4 +301,91 @@ footer p:first-child { .content-section, .content-section-dark { padding: 4rem 0; } -} \ No newline at end of file + + header nav ul { + flex-direction: column; + width: 100%; + gap: 1rem; + } + header nav li { + width: 100%; + } + + header nav a { + display: block; + width: 100%; + } +} + +.css-slider-container { + max-width: 900px; /* Matches your image width */ + margin: 2rem auto 0 auto; + position: relative; + +} + +/* 1. Hide the actual radio buttons */ +.css-slider-container input[type="radio"] { + display: none; +} + +/* 2. Style the slider viewport and wrapper */ +.slider-viewport { + width: 100%; + overflow: hidden; /* This hides the slides that are off-screen */ + border-radius: 8px; + box-shadow: 0 8px 20px rgba(0,0,0,0.12); +} + +.slider-wrapper { + display: flex; /* Lines up slides in a row */ + width: 500%; /* 100% for each of the 5 slides */ + transition: transform 0.6s ease-in-out; /* The slide animation */ +} + +.slide { + width: 20%; /* Each slide takes up 1/5th of the wrapper width */ +} + +.slide img { + width: 100%; + height: 60vh; + max-height: 500px; + object-fit: cover; + display: block; +} + +/* 3. Style the navigation dots (which are labels) */ +.slider-nav { + text-align: center; + padding-top: 1rem; +} + +.slider-nav label { + display: inline-block; + width: 12px; + height: 12px; + background-color: #c4c4c4; + border-radius: 50%; + margin: 0 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +/* 4. The Magic: Connect the radio buttons to the slider position */ +/* When a radio button is :checked, move the .slider-wrapper using the general sibling selector (~) */ + +#slide-1:checked ~ .slider-viewport .slider-wrapper { transform: translateX(0%); } +#slide-2:checked ~ .slider-viewport .slider-wrapper { transform: translateX(-20%); } +#slide-3:checked ~ .slider-viewport .slider-wrapper { transform: translateX(-40%); } +#slide-4:checked ~ .slider-viewport .slider-wrapper { transform: translateX(-60%); } +#slide-5:checked ~ .slider-viewport .slider-wrapper { transform: translateX(-80%); } + +/* 5. Highlight the active navigation dot */ +/* When a radio is :checked, style its corresponding label */ + +#slide-1:checked ~ .slider-nav label[for="slide-1"] { background-color: var(--primary-color); } +#slide-2:checked ~ .slider-nav label[for="slide-2"] { background-color: var(--primary-color); } +#slide-3:checked ~ .slider-nav label[for="slide-3"] { background-color: var(--primary-color); } +#slide-4:checked ~ .slider-nav label[for="slide-4"] { background-color: var(--primary-color); } +#slide-5:checked ~ .slider-nav label[for="slide-5"] { background-color: var(--primary-color); } \ No newline at end of file