:where([class^="ri-"])::before {
content: "\f3c2";
}
.topbar {
  transition: 0.3s ease, 0.3s ease;
}

.header-top {
  transition: top 0.3s ease;
}

.hero-slide {
display: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-slide.active {
display: block;
opacity: 1;
}
.counter {
font-weight: bold;
}
@media (max-width: 940px) {
.topbar {
display: none !important;
}
.header-top {
top: 0 !important;
}
}

.btn-main-style {
  background: #FEC648;
  color: #12103F; /* navy text */
  border: transparent; 
  border-radius: 25px;
  font-weight: 700;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}
.btn-main-style:hover {
  background: #fff;
  color: #12103F;
  box-shadow: 0 8px 20px rgba(255, 199, 72, 0.5);
  transform: translateY(-2px);
}
.btn-tertiary-style {
  background: #fff;
  color: #12103F;
  border: transparent;
  border-radius: 25px;
  font-weight: 600;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
}
.btn-tertiary-style:hover {
  background: #FFEB3B;
  color: #12103F;
  box-shadow: 0 6px 15px rgba(255, 199, 72, 0.4);
  transform: translateY(-2px);
}
.btn-accent-style {
  background: transparent;
  color: #12103F;
  border: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  position: relative;
  transition: color 0.3s ease;
}
.btn-accent-style::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #FFD54F;
  transition: width 0.3s ease;
}
.btn-accent-style:hover {
  color: #FFD54F;
}
.btn-accent-style:hover::after {
  width: 100%;
}
.btn-secondary-style {
  background: #12103F; 
  color: #fff;
  border: transparent;
  border-radius: 25px;
  font-weight: 600;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
}
.btn-secondary-style:hover {
  background: #FFD54F; 
  color: #12103F;
  box-shadow: 0 6px 15px rgba(18,16,63,0.4);
  transform: translateY(-2px);
}


/* about  */

.text-slider {
height: 80px;
overflow: hidden;
}
.text-slide {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
font-size: 2rem;
font-weight: bold;
color: #12103F;
opacity: 0;
position: absolute;
transition: opacity 0.5s ease-in-out;
}
.text-slide.active {
opacity: 1;
}
.faq-item {
transition: all 0.3s ease;
}
.faq-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* blog */
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.featured-post {
background: linear-gradient(135deg, #12103F 0%, #1a165e 100%);
}
.category-badge {
background-color: rgba(255, 199, 72, 0.1);
}

/* construction jobs */
.prose img {
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.infographic-card {
background: linear-gradient(135deg, #12103F 0%, #1a165e 100%);
border-radius: 16px;
}
.job-level {
border-left: 4px solid #FFC748;
}

/* contrustion management */
.methodology-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.methodology-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* construction savings */
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('./Images/Sandhurst\ Construction\ Savings.jpg');
background-size: cover;
background-position: center;
height: 60vh;
}
.feature-card {
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}

/* gallery */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 1000;
}
.lightbox.active {
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-content {
max-width: 90vw;
max-height: 90vh;
position: relative;
}
.lightbox-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 1rem;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.3s;
}
.lightbox-nav:hover {
background: rgba(0, 0, 0, 0.8);
}
.lightbox-prev {
left: -60px;
}
.lightbox-next {
right: -60px;
}
.lightbox-close {
position: absolute;
top: -50px;
right: 0;
background: none;
border: none;
color: white;
font-size: 2rem;
cursor: pointer;
}
.gallery-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.filter-btn.active {
background-color: #F59E0B;
color: white;
}
.project-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
}
.project-modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.gallery-image {
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-image:hover {
transform: scale(1.05);
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 2000;
}
.lightbox.active {
display: flex;
align-items: center;
justify-content: center;
}

/* Professional Teams */
.prose img {
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.side-card {
background: linear-gradient(135deg, #12103F 0%, #1a165e 100%);
border-radius: 16px;
border-left: 4px solid #FFC748;
}
.cta-card {
background: linear-gradient(135deg, #FFC748 0%, #ffb700 100%);
border-radius: 16px;
}

/* Quote request */
.form-section {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.form-section.visible {
opacity: 1;
transform: translateY(0);
}
.custom-radio {
appearance: none;
width: 1.25rem;
height: 1.25rem;
border: 2px solid #D1D5DB;
border-radius: 50%;
background: white;
cursor: pointer;
position: relative;
}
.custom-radio:checked {
border-color: #FFC748;
background: #FFC748;
}
.custom-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
}
.custom-checkbox {
appearance: none;
width: 1.25rem;
height: 1.25rem;
border: 2px solid #D1D5DB;
border-radius: 4px;
background: white;
cursor: pointer;
position: relative;
}
.custom-checkbox:checked {
border-color: #FFC748;
background: #FFC748;
}
.custom-checkbox:checked::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.file-upload-area {
border: 2px dashed #D1D5DB;
transition: all 0.3s ease;
}
.file-upload-area:hover {
border-color: #FFC748;
background: #FEF3C7;
}
.file-upload-area.dragover {
border-color: #FFC748;
background: #FEF3C7;
}

/* Renovation and Extensions */
.timeline-item {
position: relative;
}
.timeline-item::before {
content: '';
position: absolute;
top: 50%;
left: -1rem;
width: 2rem;
height: 2px;
background: #FFC748;
transform: translateY(-50%);
}
.timeline-item:first-child::before {
display: none;
}
.portfolio-item {
position: relative;
overflow: hidden;
cursor: pointer;
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(30, 58, 138, 0.9);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.before-after-slider {
position: relative;
overflow: hidden;
}
.before-after-handle {
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: #F59E0B;
cursor: ew-resize;
z-index: 10;
}
.before-after-handle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background: #F59E0B;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.before-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.after-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 1000;
}
.modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.scroll-fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-fade-up.visible {
opacity: 1;
transform: translateY(0);
}
.scroll-delay-1 { transition-delay: 0.2s; }
.scroll-delay-2 { transition-delay: 0.4s; }
.scroll-delay-3 { transition-delay: 0.6s; }

/* Schedule */
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.25rem;
}
.time-slot {
transition: all 0.2s ease;
}
.time-slot:hover {
background-color: #FEF3C7;
}
.time-slot.selected {
background-color: #FFC748;
color: white;
}
.time-slot.unavailable {
background-color: #F3F4F6;
color: #9CA3AF;
cursor: not-allowed;
}
.budget-slider {
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 5px;
background: #E5E7EB;
outline: none;
}
.budget-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #FFC748;
cursor: pointer;
border: 3px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.budget-slider::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: #FFC748;
cursor: pointer;
border: 3px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.form-progress {
width: 0%;
transition: width 0.3s ease;
}

/* Services */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.accordion.active .accordion-content {
max-height: 1000px;
}
.accordion.active .accordion-icon {
transform: rotate(180deg);
}

/* Taxi Rank Project */
.hero-image1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('./Images/Steel-Canopy-Erected-for-Taxi-Rank-SIKHA.jpg');
background-size: cover;
background-position: center;
height: 60vh;
}

/* house renovation  */
.hero-image2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('./Images/construction-worker.jpg');
background-size: cover;
background-position: center;
height: 60vh;
}

/* Phone ring */
@keyframes ring {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(15deg); }
  30% { transform: rotate(-15deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.phone-ring {
  animation: ring 1.4s infinite ease-in-out;
  transform-origin: center;
}