/* ✅ Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700;900&display=swap');
*{
margin: 0;
padding: 0;
}
:root {
--primary: #2c67a2;
--secondary: rgba(245, 197, 24, 0.45);
--light: #fff;
--dark: #000;
}
* {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
font-family: 'Merriweather', serif;
}
body {
font-family: 'Titillium Web', sans-serif;
margin: 0;
padding: 0;
background-color: #fafafa;
color: #0d0d0d;
}
.container{
max-width: 1250px;
}
/* ================================
Desktop Navigation
================================ */
.top-bar{
background: var(--primary);
color: #fff;
padding: 5px 0;
}
.top-bar i{
color: #fff;
font-size: 16px;
}
.top-bar a{
text-decoration: none;
color: #fff;
}
.top-bar-inner{
display: flex;
gap: 20px;
}
.top-bar-icon {
display: flex;
gap: 12px;
align-items: center;
}
.top-bar-icon p{
margin: 0 !important;
}
.top-bar-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.site-header .main-header {
position: absolute;
left: 0;
width: 100%;
z-index: 10;
background: #fff !important;
padding: 30px 0 !important;
}
.site-header.sticky .main-header {
position: fixed !important;
top: 0;
padding: 12px 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
animation: slideDown 0.4s ease;
background: var(--light) !important;	
}
.site-header.sticky .main-header a {
    color: var(--dark) !important;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.site-header .nav {
list-style: none;
margin: 0;
padding: 0;
}
.site-header .nav > li {
position: relative;
}
.logo-box {
position: absolute;
top: 0px;
z-index: 20;
}
.logo-box img {
width: 190px;
height: auto;
}
.wpcf7-submit {
background: var(--primary);
padding: 10px 30px;
color: #fff;
text-decoration: none;
border-radius: 20px 0;
transition: all 0.3s ease;
display: inline-block;
border: none;
}
.wpcf7-submit:hover {
border-radius: 0 20px;
}
.site-header .nav > li > a {
text-decoration: none;
padding: 5px 15px;
font-weight: 600 !important;
transition: all 0.3s ease;
display: inline-block;
color: var(--primary) !important;
}
.site-header .nav > li > a:hover,
.site-header .nav > li.current-menu-item > a,
.site-header .nav > li.current_page_item > a {
padding: 5px 15px;
color: var(--dark) !important;
}
.site-header .nav li ul.sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px 0;
list-style: none;
margin: 0;
display: none;
z-index: 9999;
}
.site-header .nav li ul.sub-menu li a {
padding: 8px 15px;
color: #333;
display: block;
font-weight: 400;
}
.site-header .nav li ul.sub-menu li a:hover {
background: #f8f9fa;
color: #0d6efd;
}
.site-header .nav > li:hover > ul.sub-menu {
display: block;
}
.site-header .nav li ul.sub-menu li {
position: relative;
}
.site-header .nav li ul.sub-menu li ul.sub-menu {
top: 0;
left: 100%;
margin-left: 1px;
}
@media (max-width: 991px) {
.site-header .nav {
display: none;
}
}
/* ================================
Mobile Menu
================================ */
.mobile-menu {
position: fixed;
top: 0;
right: -300px;
width: 280px;
height: 100%;
background: #fff;
transition: right 0.3s ease;
z-index: 1050;
}
.mobile-menu.open {
right: 0;
}
.mobile-menu-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
z-index: 1040;
}
.mobile-menu-overlay.active {
display: block;
}
.mobile-menu-btn .btn-primary{
margin-top: 2rem;
display: inline-block;
border: 1px solid #fff;
}
.mobile-menu {
position: fixed;
top: 0;
right: -300px;
width: 280px;
height: 100%;
background: var(--primary)!important;
transition: right 0.3s ease;
z-index: 1050;
}
.mobile-menu-header {
background-color: #fff;
}
#menu-primary-1 li {
padding: 10px;
border-bottom: 1px solid #fff;
}
#menu-primary-1 li a {
color: var(--white);
text-decoration: none;
font-size: 20px;
font-weight: 600;
}
.top-bar-icon .social-icons a i {
border: 1px solid #ffffff;
border-radius: 50%;
height: 30px;
width: 30px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.top-bar-inner-box {
display: flex;
gap: 10px;
align-items: center;
}
/* ================================
Breadcrumb Section
=============================== */
.breadcrumb-section .container {
display: flex;
flex-direction: column;
align-items: left;
position: relative;
top: 40%;
z-index: 2;
}
section.breadcrumb-section {
background: url(https://dev.algopage.com/projects/dpcelectrical.ca/wp-content/uploads/2026/05/BREADCRUMB-1-scaled.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 60vh;
position: relative;
text-align: center;	
}
.breadcrumb-item.active {
color: var(--dark) !important;
}
ol.breadcrumb {
font-size: 18px;
font-weight: 700;
justify-content: center;	
}
.breadcrumb-item+.breadcrumb-item::before{
color: var(--primary) !important;
}
.breadcrumb-title h2 {
color: var(--primary);
}
li.breadcrumb-item a {
color: var(--primary);
text-decoration: none;
}
/*===============================
FOOTER SECTION CSS
================================= */
.progress-wrap {
position: fixed;
right: 30px;
bottom: 30px;
height: 50px;
width: 50px;
cursor: pointer;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 8px rgba(195,180,186,.49);
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 200ms linear;
z-index: 99;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.progress-wrap::after {
position: absolute;
content: "\f102";
font-family: "Font Awesome 6 Free";
font-weight: 900;
line-height: 50px;
text-align:center;
font-size:16px;
color: var(--primary);
inset:0;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: var(--primary);
stroke-width: 4;
}
ul.ftricons figure img {
width: 15px;
filter: brightness(100);
}
.underline1 {
height: 2px;
width: 100px;
background: var(--primary);
margin: auto;
margin-top: 8px;
}
.underline2 {
height: 4px;
width: 30px;
background: var(--yellow);
margin: auto;
margin-top: -3px;
}
.no-margin {
margin-left: 0px;
}
footer {
position: relative;
background: url(https://webzensys.com/work/aureusuniversity.ca/wp-content/uploads/2026/03/footer-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
z-index: 1;
padding-top: 30px;
}
footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #111827 0%, #1b2635 100%);
z-index: -1;
}
footer > * {
position: relative;
z-index: 2;
}
footer .btn-primary {
padding: 8px 20px;
margin-top: 8px;
letter-spacing: 1px;
font-size: 14px;
border: 1px solid var(--secondary);
}
.footertop-cnt ul.smoicons li a i {
font-size: 16px;
}
.footer_top {
background: #009f0726;
border-radius: 0 0 15px 15px;
padding: 0 15px;
}
.footertop-cnt {
padding-left: 0;
border-right: 1px solid #ffffff14;
}
.footertop-cnt p a {
font-family: "Mulish", sans-serif;
font-size: 15px;
color: var(--white);
font-weight: 400;
}
.footertop-cnt p {
color: var(--white);
font-weight: 600;
font-size: 18px;
padding-left: 62px;
letter-spacing: 1px;
font-family: "Syne", sans-serif;
}
.footer_top .row {
margin: 0;
}
.footer_top .col-md-6 {
padding: 0;
}
footer a.footer-logo {
margin-bottom: 15px;
}
footer a.footer-logo img {
width: 200px;
display: block;
background: var(--light);	
}
.footer_menu {
padding: 40px 0 0 0;
}
.footer-details li {
display: flex;
margin-bottom: 15px;
position: relative;
gap: 20px;
}
ul.footer-details li i {
background: var(--primary);
padding: 10px;
height: 35px;
width: 35px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
ul{
padding-left: 0rem !important;
list-style-type: none;
}
ul.ftricons li a {
border: 1px solid #ffffff36;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 14px;
margin-top: 8px;
}
footer ul li.menu-item a {
display: inline-block;
}
footer ul li.menu-item:last-child a {
margin: 0;
}
.menu,.footer-details {
margin-top: 25px;
}
footer h3 {
margin-bottom: 15px;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--light);	
}
footer p {
margin-bottom: 6px;
line-height: 27px;
}
footer .menu li {
position: relative;
padding-left: 0 !important;
list-style-type: none;
}
footer a{
color: var(--dark) !important;
}
footer .menu li{
padding-left: 0 !important;
color: var(--light) !important;
transition: transform 0.3s ease;
line-height: 40px;
}
footer .menu li::after {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: -25px;
top: 50%;
transform: translateY(-50%) translateX(-10px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
color: var(--primary);
}

footer .menu li:hover::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
footer .menu li:hover{
color: var(--primary) !important;
transform: translateX(20px);
}
footer .social-icons {
display: flex;
transition: 0.3s;
}
footer .social-icons a:hover{
background: var(--primary);
}
footer .social-icons a {
display: flex;
text-decoration: none;
color: var(--light);
background-color: #bcc6cc;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
}
footer ul li, footer ul li a, footer p, footer p a {
font-weight: 600;
position: relative;
text-decoration: none;
color: var(--light) !important;
}
footer a.viewmore {
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: underline;
text-underline-offset: 4px;
font-weight: 500;
margin-top: 12px;
display: inline-block;
font-size: 14px;
}
.copyright {
padding: 15px 0;
border-top: 1px solid var(--primary);
}
.copyright .row {
align-items: center;
}
.copyright p {
margin: 0 !important;
color: var(--white);
font-size: 15px;
letter-spacing: 1px;
font-weight: 300;
}
.copyright p a {
color: var(--white);
font-weight: 400;
text-decoration: underline;
text-underline-offset: 4px;
}
footer ul.socialicon li a {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background: #c98d830f;
width: 40px;
height: 40px;
color: var(--secondary);
transition: .5s;
margin-right: 5px;
backdrop-filter: blur(2px);
border-radius: 50%;
}
.contact-card a {
    text-decoration: none !important;
    color: #2c67a2;
    font-size: 14px;
    font-weight: 600;
}
#GoToTop {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--primary);
color: #fff;
font-size: 20px;
padding: 12px 20px;
border-radius: 50%;
z-index: 999;
transition: all 0.3s ease-in-out;
}
#GoToTop i{
color: #fff;
}
#GoToTop:hover {
background: var(--primary);
transform: scale(1.1);
}
#whatsappbtn {
cursor: pointer;
position: fixed;
bottom: 4%;
left: 20px;
z-index: 99999999;
padding: 0 9px;
background: #4fcc5d;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
font-size: 32px;
color: var(--white);
z-index: 1;
}
#whatsappbtn:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #4fcc5d;
box-shadow: 0 0 10px #4fcc5d;
animation: playbtn 3s linear infinite forwards;
z-index: -3;
}
@keyframes playbtn {
from {
transform: scale(1.0);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
}
}
#whatsappbtn img {
width: 30px;
}
a.btn-primary {
background: var(--primary);
padding: 10px 30px;
color: #fff;
text-decoration: none;
border-radius: 20px 0;
transition: all 0.3s ease;
display: inline-block;
}
a.btn-primary:hover {
border-radius: 0 20px;
}
section{
padding: 40px 0;
}

/* HERO SECTION */

.hero-modern {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            var(--dark) 0%,
            #111827 45%,
            #0f172a 100%);
    color: var(--light);
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 0;
}

/* Animated Grid */
.hero-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: moveGrid 12s linear infinite;
}

/* Glow Effects */
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.hero-glow-1 {
    width: 420px;
    height: 420px;
    background: rgb(191 195 200 / 54%);
    top: -100px;
    left: -100px;
}

.hero-glow-2 {
    width: 350px;
    height: 350px;
    background: rgba(0, 123, 255, 0.18);
    right: -80px;
    bottom: -80px;
}

/* Content */
.hero-content {
    position: relative;
    z-index: 2;
    animation: fadeUp 1s ease;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 18px;
    border-radius: 100px;
    margin-bottom: 24px;
    font-size: 14px;
    backdrop-filter: blur(10px);
    color: var(--light);
}

.pulse-dot {
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    position: relative;
}

.pulse-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    animation: pulse 1.8s infinite;
}

.hero-title {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
    letter-spacing: -2px;
}

.hero-title span {
    color: var(--primary);
    text-shadow: 0 0 25px rgb(131 135 139 / 83%);
}

.hero-desc {
    font-size: 18px;
    line-height: 1.8;
    max-width: 620px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 35px;
}

/* Buttons */
.hero-btns {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-btn-primary {
    background: var(--primary);
    color:var(--light);
    padding: 16px 30px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.4s ease;
}

.hero-btn-primary:hover {
    transform: translateY(-4px);
    color: var(--light);
    box-shadow: 0 18px 40px rgb(44 103 162 / 64%);
}

.hero-btn-outline {
    padding: 16px 30px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--light);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.4s ease;
    backdrop-filter: blur(10px);
}

.hero-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--light);
    transform: translateY(-4px);
}

/* Features */
.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.feature-item i {
    color: var(--primary);
}

/* Image Card */
.hero-image-card {
    position: relative;
    z-index: 2;
    animation: floatImage 4s ease-in-out infinite;
}

.hero-image-card img {
    width: 100%;
    border-radius: 28px;
    object-fit: cover;
    min-height: 620px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* Experience Badge */
.experience-badge {
    position: absolute;
    top: 30px;
    left: -30px;
    background: var(--primary);
    color: var(--light) !important;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    z-index: 3;
    box-shadow: 0 15px 40px rgb(245 250 255 / 31%);
}

.experience-badge h3 {
    font-size: 42px;
    margin: 0;
    font-weight: 800;
}

.experience-badge span {
    font-size: 14px;
    font-weight: 600;
}

/* Floating Cards */
.floating-card {
    position: absolute;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    padding: 14px 18px;
    border-radius: 16px;
    color: var(--light);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.floating-card i {
    color: var(--primary);
}

.floating-card-1 {
    bottom: 80px;
    left: -40px;
}

.floating-card-2 {
    right: -30px;
    top: 120px;
}

/* Stats */
.hero-stats {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.stat-box {
    background: rgb(255 255 255 / 15%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    backdrop-filter: blur(12px);
    transition: 0.4s ease;
}

.stat-box:hover {
    transform: translateY(-8px);
    border-color: var(--light);
    box-shadow: 0 15px 40px rgba(255,193,7,0.08);
}

.stat-box h3 {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 10px;
    font-weight: 800;
}

.stat-box p {
    margin: 0;
    color: rgba(255,255,255,0.75);
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes floatImage {
    0%,100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes moveGrid {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(60px);
    }
}

/* SERVICE SECTION */

/* =========================
   SERVICES SECTION
========================= */

.services-section {
  background: linear-gradient(to bottom, #f9fbff, #ffffff);
  position: relative;
  overflow: hidden;
}

/* Heading */
.section-header {
  animation: fadeUp 1s ease;
}

.mini-badge {
  background: rgba(44, 103, 162, 0.08);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 16px;
  border-radius: 50px;
  display: inline-block;
}

.section-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
}

.section-title span {
  color: var(--primary);
  position: relative;
}

.section-subtitle {
  max-width: 650px;
  margin: 15px auto 0;
  color: #777;
  font-size: 0.97rem;
  line-height: 1.8;
}

/* =========================
   CARD
========================= */

.service-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  overflow: hidden;
  border: 1px solid #edf1f7;
  transition: all 0.4s ease;
  height: 100%;
  z-index: 1;
  box-shadow: 0 5px 25px rgba(0,0,0,0.03);
}

/* Top hover line */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: var(--primary);
  transition: 0.4s ease;
}

/* Glow effect */
.service-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  background: rgba(44, 103, 162, 0.08);
  border-radius: 50%;
  top: -60px;
  right: -60px;
  transition: 0.5s ease;
}

/* Hover */
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 45px rgba(44, 103, 162, 0.12);
  border-color: rgba(44, 103, 162, 0.18);
}

.service-card:hover::before {
  width: 100%;
}

.service-card:hover .service-glow {
  transform: scale(1.4);
}

.service-card:hover .icon-box {
  background: var(--primary);
  transform: rotateY(180deg);
}

.service-card:hover .icon-box i {
  color: #fff;
}

.service-card:hover .service-title {
  color: var(--light);
}

/* Watermark icon */
.watermark-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 3.5rem;
  opacity: 0.05;
  color: var(--primary);
}

/* Icon box */
.icon-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #f2f7fc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all 0.5s ease;
  position: relative;
  z-index: 2;
}

.icon-box i {
  color: var(--primary);
  font-size: 1.4rem;
  transition: 0.4s ease;
}

/* Text */
.service-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--light);
  margin-bottom: 14px;
  transition: 0.3s ease;
}

.service-desc {
  font-size: 16px;
  color: #7d7d7d;
  line-height: 1.8;
  margin-bottom: 18px;
	font-weight: 600;
}

/* Link */
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: 0.3s ease;
}

.service-link i {
  transition: 0.3s ease;
}

.service-link:hover i {
  transform: translateX(5px);
}

/* Animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {

  .section-title {
    font-size: 1.8rem;
  }

  .service-card {
    padding: 28px 22px;
  }

}

/* WHY CHOOSE US SECTION */

/* =========================
   WHY SECTION
========================= */

.why-section {
  background: linear-gradient(135deg, #111827 0%, #1b2635 100%);
  padding: 85px 0;
  position: relative;
  overflow: hidden;
}

/* subtle background glow */
.why-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  background: rgba(255, 193, 7, 0.06);
  border-radius: 50%;
  top: -120px;
  right: -120px;
  filter: blur(10px);
}

/* =========================
   LEFT CONTENT
========================= */

.why-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 50px;
  background: var(--light);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  margin-bottom: 24px;
  backdrop-filter: blur(5px);
}

.why-badge i {
  font-size: 0.9rem;
}

.why-heading {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 22px;
}

.why-heading .yellow {
  color: var(--primary);
}

.why-heading .white {
  color: #fff;
}

.why-body {
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 28px;
  max-width: 500px;
}

/* =========================
   LIST
========================= */

.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #fff;
  margin-bottom: 16px;
  font-size: 15px;
}

.why-list li i {
  color: var(--light);
  margin-top: 3px;
  font-size: 1rem;
}

/* =========================
   FEATURE CARD
========================= */

.feature-card {
  background: rgba(255,255,255,0.97);
  border-radius: 18px;
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
  height: 100%;
  border: 1px solid transparent;
}

/* slight highlight card */
.active-card {
  background: linear-gradient(to bottom right, #fffdf2, #ffffff);
  border-color: rgba(255, 193, 7, 0.3);
}

.feature-card::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgb(44 103 162 / 23%);
  border-radius: 50%;
  top: -40px;
  right: -40px;
  transition: 0.4s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 193, 7, 0.4);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.feature-card:hover::before {
  transform: scale(1.2);
}

/* top area */
.fc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

/* icon */
.fc-icon {
  width: 58px;
  height: 58px;
  background: rgb(44 103 162 / 23%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.35s ease;
}

.fc-icon i {
  color: rgb(44 103 162 / 23%);
  font-size: 1.3rem;
}

.feature-card:hover .fc-icon {
  transform: rotate(-8deg) scale(1.05);
}

/* number */
.fc-number {
  font-size: 2rem;
  font-weight: 800;
  color: rgba(0,0,0,0.06);
  line-height: 1;
}

/* text */
.fc-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
  transition: 0.3s ease;
}

.feature-card:hover .fc-title {
  color: var(--primary);
}

.fc-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  margin: 0;
}

@media (max-width: 768px) {

  .why-section {
    padding: 70px 0;
  }

  .feature-card {
    padding: 22px 20px;
  }

}

/* TESTIMONIALS */

/* =========================
   REVIEWS SECTION
========================= */

.reviews-section {
  padding: 85px 20px;
  background: linear-gradient(to bottom, #f8f9fb, #ffffff);
  position: relative;
  overflow: hidden;
}

/* subtle glow */
.reviews-section::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  background: rgb(44 103 162 / 23%);
  border-radius: 50%;
  top: -120px;
  right: -100px;
}

/* =========================
   HEADER
========================= */

.badge-testimonials {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255, 193, 7, 0.3);
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.section-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.section-title .google {
  color: var(--primary);
}

.review-subtitle {
  max-width: 650px;
  margin: 0 auto 18px;
  color: #666;
  font-size: 15px;
  line-height: 1.8;
}

.stars-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 10px 18px;
  border-radius: 50px;
  box-shadow: 0 5px 18px rgba(0,0,0,0.05);
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.star-icons {
  color: var(--primary);
  font-size: 17px;
  letter-spacing: 2px;
}

/* =========================
   REVIEW CARD
========================= */

.review-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 22px;
  position: relative;
  overflow: hidden;
  height: 100%;
  border: 1px solid #eee;
  transition: all 0.35s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}
.review-card::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgb(163 187 211 / 10%);
  border-radius: 50%;
  top: -40px;
  right: -40px;
  transition: 0.4s ease;
}

.review-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
}

.review-card:hover::before {
  transform: scale(1.15);
}

/* quote icon */
.quote-icon {
  width: 42px;
  height: 42px;
  background: rgb(44 103 162 / 23%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.quote-icon i {
  color: var(--primary);
  font-size: 1rem;
}

/* stars */
.card-stars {
  color: var(--primary);
  font-size: 15px;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

/* text */
.review-text {
  font-size: 14px;
  color: #444;
  line-height: 1.8;
  margin-bottom: 24px;
  flex-grow: 1;
}

/* reviewer */
.reviewer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviewer-name {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin-bottom: 2px;
}

.reviewer-time {
  font-size: 12px;
  color: #888;
}

/* avatar */
.reviewer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.avatar-orange { background: #f59e0b; }
.avatar-dark { background: #111827; }
.avatar-blue { background: #3b82f6; }
.avatar-green { background: #22c55e; }
.avatar-purple { background: #8b5cf6; }

/* =========================
   BUTTON
========================= */

.btn-leave-review {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.35s ease;
}

.btn-leave-review:hover {
  background: #111827;
  color: #fff;
  transform: translateY(-3px);
}

.btn-leave-review i {
  font-size: 0.9rem;
}

/* Testimonial Section */
section.testimonial-section {
    background: var(--primary) url(https://webzensys.com/work/lorinya-hochbau.de/wp-content/uploads/2026/05/tes-bg.png);
    padding: 80px 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
section.testimonial-section  .sub-heading {
    color: #fff;
    background: #ffffff24;
	margin-bottom: 20px;
}
section.testimonial-section .swiper-pagination-bullet-active{
	background: var(--secondary);
}
.testimonial-section .haeding-section {
    text-align: center;
    width: 70%;
    color: #fff;
    margin: 0 auto 4rem;
}
.testimonial-slider{
    position:relative;
    z-index:2;
    padding-bottom:60px;
}

.testimonial-card {
    background: #05143c;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.4s;
    height: 530px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.testimonial-card:hover{
    transform:translateY(-8px);
}
.quote-box{
    background:rgba(255,255,255,0.12);
    padding:45px 35px 70px;
    border-radius:20px;
    text-align:center;
    position:relative;
	height: 100%;
}
.testimonial-card .stars{
    margin-bottom:25px;
}
.testimonial-card .stars i{
    color: #fff;
    margin:0 3px;
    font-size:18px;
}
.contact-item a {
    text-decoration: none;
    color: #000;
}
.quote-text{
    color:#fff;
    font-size:18px;
    line-height:1.8;
    margin:0;
}
.profile-image{
    width:65px;
    height:65px;
    border-radius:50%;
    overflow:hidden;
    border:4px solid #111;
    position:absolute;
    left:50%;
    bottom:-32px;
    transform:translateX(-50%);
}
.profile-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.profile-content{
    text-align:center;
    padding:65px 30px 35px;
}
.profile-content h3{
    color:#fff;
    font-size:28px;
    font-weight:600;
    margin-bottom:10px;
}
.profile-content p{
    color:#ddd;
    font-size:17px;
    margin:0;
}
/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

  .section-title {
    font-size: 1.8rem;
  }

  .review-card {
    padding: 24px 20px;
  }

}

/* CONTACT SECTION CSS */


/* Badge */
.badge-get-in-touch {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgb(44 103 162 / 23%);
color: var(--dark);
font-size: 13px;
font-weight: 500;
padding: 7px 20px;
border-radius: 30px;
border: 1px solid var(--primary-border);
margin-bottom: 20px;
}

.badge-get-in-touch i {
color: var(--primary);
font-size: 14px;
}

/* Heading */
.section-heading {
font-size: 2.4rem;
font-weight: 800;
line-height: 1.2;
color: var(--dark);
margin-bottom: 14px;
}

.section-heading .highlight {
color: var(--primary);
}

.section-subtext {
font-size: 14.5px;
color: #666;
max-width: 520px;
margin: 0 auto;
line-height: 1.7;
}

/* Contact Cards */
.contact-card {
background: #fff;
border-radius: 16px;
padding: 36px 24px 30px;
text-align: center;
border: 2px solid transparent;
transition: all 0.3s ease;
height: 100%;
}

.contact-card:hover {
border-color: var(--primary);
box-shadow: 0 8px 28px rgb(44 103 162 / 23%);
transform: translateY(-4px);
}
/* Icon containers */
.icon-wrap {
width: 64px;
height: 64px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
font-size: 24px;
}

.icon-wrap.icon-light {
background: rgb(44 103 162 / 23%);
color: var(--primary);
}

.icon-wrap.icon-dark {
background: rgb(44 103 162 / 23%);
color: var(--primary);
}

/* Card text */
.card-label {
font-size: 15px;
font-weight: 700;
color: var(--dark);
margin-bottom: 6px;
}

.card-value {
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: 5px;
text-decoration: none;
display: block;
transition: opacity 0.2s;
}

.card-value:hover {
opacity: 0.8;
color: var(--primary);
}

.card-note {
font-size: 13px;
color: #888;
margin: 0;
}

/* GALLERY SECTION CSS */

.gallery-section {
  background: linear-gradient(135deg, #111827 0%, #1b2635 100%);
}

.gallery-badge {
  display: inline-block;
  padding: 6px 18px;
  background: #ffffff1f;
  color: var(--light);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}

.gallery-title {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
}

.gallery-text {
  max-width: 650px;
  color: #fff;
  font-size: 16px;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  cursor: pointer;
}

.gallery-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: 0.5s ease;
  border-radius: 18px;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  display: flex;
  align-items: end;
  padding: 25px;
  opacity: 0;
  transition: 0.4s ease;
  border-radius: 18px;
}

.gallery-overlay h5 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  transform: translateY(20px);
  transition: 0.4s ease;
}

.gallery-card:hover img {
  transform: scale(1.08);
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.gallery-card:hover .gallery-overlay h5 {
  transform: translateY(0);
}

/* About Page */
section.about-inner img {
    border-radius: 30px;
}
.about-inner-right img {
    margin-top: 2rem;
}
.mission {
    background: #fff;
    box-shadow: 0 0 10px 0 #80808069;
    padding: 20px;
    height: 100%;
    border-radius: 10px;
}
.cornerstone-item {
    background: #5788b540;
    border: 1px dashed var(--primary);
    border-radius: 10px;
    height: 100% !important;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    transition: all 0.35s ease;
    margin-bottom: 12px;
    position: relative;
}
section.approch {
    padding: 80px 0;
}
.cornerstone-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
.about-inner-right .heading {
    color: var(--primary);
}
section.mission-vision .heading {
    color: var(--primary);
}
.cornerstone-item p {
    font-size: 1rem;
    text-align: start;
	font-weight: 800;
}
section.mission-vision {
    background: linear-gradient(to bottom, #f9fbff, #ffffff);
}
section.partner-contact {
    background: linear-gradient(to bottom, #f9fbff, #ffffff);
}
.about-inner-right p {
    line-height: 1.9;
}

/* Quoatation Page */
.service-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.service-item {
    background: #5788b540;
    border: 1px solid var(--primary);
    padding: 10px 20px;
    border-radius: 14px;
    color: #000000;
    font-size: 16px;
    transition: 0.4s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}
.service-item:hover{
    transform:translateY(-5px);
    background:var(--button);
}
.quote-image{
    position:relative;
}
.quote-image img{
    width:100%;
    border-radius:20px;
    object-fit:cover;
}

/*=========================
     Contact Page CSS 
=============================*/
.info-card {
   padding: 35px 25px;
   background: #fff;
   border: 1px solid #ececec;
   box-shadow: 0 4px 15px rgba(0,0,0,0.04);
   transition: 0.3s;
   display: flex;
   gap: 30px;
}
.info-card a{ 
   color: #000 !important;
	text-decoration: none;		
}
.info-card:hover {
   border-color: var(--button);
   transform: translateY(-4px);
}
.info-card i{
    font-size: 28px;
    color: var(--button);
    margin-bottom: 10px;
}
.info-card h6 {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
}
section.contact-inner-section {
    padding: 80px 0;
}
section.contact-section {
    background: url(https://dev.algopage.com/projects/dpcelectrical.ca/wp-content/uploads/2026/05/contact-bg.avif);
    padding: 80px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.contact-form {
    padding: 25px;
    background: #ffffffb0;
    border-top: 5px solid var(--button);
}
.form-control, .form-select {
    border-radius: 0;
    line-height: 30px;
} 

/* Service Lists */
.electrical-services-section{
    background:#fff;
    overflow:hidden;
}
.section-heading p{
    max-width:700px;
    margin:auto;
    color:#666;
}
.service-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(0,0,0,.05);
    color:var(--primary);
    font-weight:600;
    margin-bottom:15px;
}
.service-card{
    height:100%;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    padding:35px;
    transition:.4s ease;
    position:relative;
    overflow:hidden;
}
.service-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:var(--primary);
}
.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}
.service-icon{
    width:80px;
    height:80px;
    border-radius:18px;
    background:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
}
.service-icon i{
    font-size:34px;
    color:#fff;
}
.service-card h3{
    font-size:28px;
    font-weight:700;
    margin-bottom:15px;
}
.service-card p{
    color:#fff;
    margin-bottom:25px;
}
.service-card ul{
    padding:0;
    margin:0 0 30px;
    list-style:none;
}
.service-card ul li{
    position:relative;
    padding-left:28px;
    margin-bottom:12px;
    font-size:15px;
    line-height:1.5;
}
.service-card ul li:before{
    content:'✓';
    position:absolute;
    left:0;
    top:0;
    color:var(--secondary);
    font-weight:700;
}
.featured{
    background:var(--primary);
    color:#fff;
}
.featured p,
.featured ul li{
    color:#fff;
}
.featured .service-icon{
    background:#fff;
}
.featured .service-icon i{
    color:var(--primary);
}



/* Responsive Css */

@media (max-width: 991px){
.hero-modern .container
{
    top: 60px !important;
}
.hero-image-card{
	top: 25px;	
}
.floating-card-1{
    left: -10px;	
}
.experience-badge{
	left: -10px;	
}
.floating-card-2 {
	right: 0px;
}
.image-box.rt-img {
    display: none;
}
.why-body{
	max-width: 100%;	
}	
}
@media (max-width: 767px){
li.menu-item a {
    color: #fff;
    text-decoration: none;
}
section {
    padding: 40px 10px;
}	
}
@media (max-width: 676px){
.hero-stats{
	grid-template-columns: repeat(1, 1fr) !important;	
}
}
@media (max-width: 480px){
.hero-title
 {
    font-size: 34px;
}
.hero-desc
 {
    font-size: 14px;
}
.section-title {
   font-size: 22px;
   line-height: 1.5;
}
.quote-content {
    font-size: 14px;
}
.service-item{
	padding: 10px;
	font-size: 14px;	
}
.section-heading {
	font-size: 22px;
}
.section-heading {
	font-size: 26px;
}
.contact-card{
	padding: 20px;
}	
}
@media (max-width: 414px){
.gallery-title {
	font-size: 28px;
}
.gallery-text{
	font-size: 14px;	
}
.service-item {
    padding: 10px;
    font-size: 12px;
}	
}


.service-card{
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: #0000006e;
    z-index: 0;
    height: 100%;
}

.service-card > *{
    position: relative;
    z-index: 2;
}

/* Pre Loader */
#preloader{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.loader-wrapper{
    position:relative;
    width:180px;
    height:180px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.preloader-logo{
    width:300px;
    position:relative;
    z-index:2;
    animation: logoPulse 2s ease-in-out infinite;
}

.spinner{
    position:absolute;
    width:160px;
    height:160px;
    border:3px solid rgba(0,0,0,0.1);
    border-top:3px solid #0B6E4F;
    border-radius:50%;
    animation:logoZoomFade 2s ease-in-out infinite;
}

@keyframes spin{
    100%{
        transform:rotate(360deg);
    }
}
@keyframes logoPulse{
    0%{
        transform:scale(0.85);
        opacity:0.6;
    }
    50%{
        transform:scale(1.15);
        opacity:1;
    }
    100%{
        transform:scale(0.85);
        opacity:0.6;
    }
}
#preloader.hide{
    opacity:0;
    visibility:hidden;
    transition:.5s;
}@keyframes logoZoomFade{
    0%{
        transform:scale(0.8);
        opacity:0.3;
    }
    50%{
        transform:scale(1);
        opacity:1;
    }
    100%{
        transform:scale(1.1);
        opacity:0.5;
    }
}

/* Hide Animation */
#preloader.hide{
    opacity:0;
    visibility:hidden;
}

#preloader.hide .preloader-logo{
    transform:scale(1.3);
    opacity:0;
    transition:all .8s ease;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #2c67a2 !important;
}