@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --primary: #163563;
  --secondary: #FBEC6B;
  --accent: #6C757D;
  --bg-light: #F5F7FA;
  --white: #FFFFFF;
  --text-dark: #1F2933;
}



*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif;
   
}


html,
body {
  height: 100%;
  width: 100%;
}



body {
  overflow-x: hidden;
} 



a {
  text-decoration: none !important;
  pointer-events: auto; /* Ensure links remain clickable */


}





/* header section */
header{
 background-color: #163563dd;
 
}

.header-holder{
 
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

}

.header-left{
  display: flex;
  align-items: center;
  gap: 30px;
 padding: 6px 0; /* fixed */
  font-size: 14px;
  color: var(--text-dark);
}
.header-left_container span{
 color: var(--bg-light);
 font-weight: 400;
}

.header-left_container i{
   display: inline-block;
   margin-right: 5px;
   color: var(--primary);
   font-size: 18px;
   color: var(--secondary);
}

.header-right i{
  color: var(--bg-light);
 
}





/* navbar  */

.navbar-image_logo{
  width:50px;
  height:50px;
}
.navbar-business_name{
  font-weight: bold;
  font-size: 1.5rem;
    color: var(--bg-light);
}


.bi-chevron-double-down{
  font-size: 10px !important;
  font-weight: bold !important;
  margin-top: 3% !important;
 padding: 3%;
  
}

.nav-item{
  font-weight: bolder;
  font-size: 1rem;
 

}
.nav-item:hover{
   font-weight: 900;
  color: var(--secondary);
}

.nav-link{
 color: var(--white);
}
.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--white) !important;
}


.dropdown-menu{
  padding: 0 !important;
}

.dropdown-item:hover{
  background-color: var(--secondary);
}

.custom-toggler {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent;
  width:26px;
  height:26px;
  position: relative;
  padding: 0;
  margin-top: 3%;
}

.custom-toggler span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0D2A4A; /* your primary color */
  transition: 0.3s ease;
  border-radius: 2px;
}

.custom-toggler span:nth-child(1) { top: 0; }
.custom-toggler span:nth-child(2) { top: 5px; }
.custom-toggler span:nth-child(3) { top: 10px; }

/* When menu is open */
.custom-toggler:not(.collapsed) span:nth-child(1),
.custom-toggler:not(.collapsed) span:nth-child(3) {
  opacity: 0;
  border: none !important ;
}

.custom-toggler:not(.collapsed) span:nth-child(2) {
  top: 5px;
}

.show {
  border: none;
}


/* end of navbar */


/* button */

a.btn-main {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
a.btn-main,
a.btn-main:active,
a.btn-main:focus,
a.btn-main:visited {
  background: var(--secondary);
  width:13rem;
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1.1;
  padding: 1%; 
  text-decoration: none;
  text-transform: var(--btn-text-transform);
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: none;
  position: relative;
  display: inline-block;
  text-align: center;
  outline: 0;
}

a.btn-main.fx-slide{
  overflow: hidden;
}

a.btn-main.fx-slide span{
  display: block;
  position: relative;
  transition: all .3s ease-in-out;
}

a.btn-main.fx-slide:hover span{
  transform: translate(0, 40px);
  opacity: 0;
}

a.btn-main.fx-slide:hover:before {
  opacity: 1;
  transform: translate(0, 0);
}

a.btn-main.fx-slide:before {
  content: attr(data-hover);
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translate(0, -100%);
  transition: all 0.3s ease-in-out;
}
/* button  */

/* main */

#main{
  background-image: url(../images/best-locksmiths-atlanta-ga-services.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center left ;
 
}


.bg-navy{
background: #1F2933;
background: radial-gradient(circle,rgba(31, 41, 51, 0.7) 0%, rgba(22, 53, 99, 0.5) 100%);
 
}


#hero-txt{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;

  height:90vh;
  color: var(--bg-light);
}


#hero-txt h1{
  font-size: 5rem;
  font-weight:bolder;
  color: var(--bg-light);
}


#hero-txt article{
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  color: var(--bg-light);
  margin-top: 5%;
}









/* ABOUT US  */


#about-us{
  padding-top: 5%;
  padding-bottom: 5%;
}
.counters{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 5%;
  margin-bottom: 5%;
  color: var(--text-dark)
}

#about-us article{
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-dark);

}




.counter-value{
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dark);
}


 .plus-sign {
        padding-left: 5%;
        font-size: 3rem; /* Smaller size for + */
 }

.counter p {
    font-size: 1.2rem;
      color: #666;
        }
/* END OF ABOUT US */






/* main services  */



#services{
  padding-top: 5%;
  padding-bottom: 10%;
}

#services article{
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-dark);
}


.service-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  padding: 1rem;
  color: var(--text-dark);
  text-align:left;
  
 
}

/* STOP any image zoom inside service-card (even if zoom is triggered by card hover) */

.service-card:hover img{
  transform: scale(1.2);
}




.card-img-top{
  border-radius: 15px;
}
.service-card-body {
  position: absolute;
  bottom: -15%;
  border-radius: 15px;
  padding: 5%;
  background-color: var(--white);
 

  
}



.service-card-title{
 font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--primary);  
  padding-top: 5px;
  padding-bottom: 10px;
    position: relative;
}

.service-arrow{
  position: absolute;
  top: -35px;
  left: 78%;
  background-color: var(--secondary);
  color: var(--text-dark);
  border-radius: 50%;
  padding: 15px;
  font-size: 1.2rem;
  font-weight: bold;
}


.service-card-body p{
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-dark);  

  

}

/* end of services  */





/* sub context */


.sub-txt{
  background-color: var(--secondary);
  color: var(--text-dark);
}



/* end of sub context */



/* contact us */



#contact-us{
  padding-top: 5%;
  padding-bottom: 5%;

}

.contct-us_card i{
  color: var(--secondary);
  padding-right: 3%;
  font-size: 1.3rem;

}

.contct-us_card span{
  font-size: 1.1rem;
  font-weight: 600;
}


.contct-us_card p{
  color: #6C757D;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin-left: 3%;
}

form{
  margin-top: 5%;
  margin-bottom: 5%;
  background-color: #6C757D77 ;
  padding: 5%;
  border-radius: 15px;
} 

.input {
  border: 2px solid transparent;
  width: 100%;
  height: 2.5em;
  padding: 0.5em;
  outline: none;
  overflow: hidden;
  background-color: #F3F3F3;
  border-radius: 10px;
  transition: all 0.5s;
  margin: 0.1em;
}

/* .input:hover,
.input:focus {
  border: 2px solid var(--accent);
  background-color: white;
} */

.input-submit{
  background-color: var(--primary);
  color: var(--secondary);
}

/* end of contact us */


/* contact-us-info-cta  */

#contact-us-info-cta{
  background-color: var(--secondary);
}


.contact-us-info-cta-card{
  display: flex;
  flex-direction: row;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  padding: 1rem;
  color: var(--text-dark);
  text-align:left;
  gap: 15px;
  
 
}

.contact-us-info-cta-card i{
  color: var(--primary);
  font-size: 3.5rem;

}

.contact-us-info-cta-card span{

  font-size: 1.4rem;
  font-weight: 600;
  
}

.why-choose-us{
  padding-top: 5%;
  padding-bottom: 5%;
}



/* contact-us-info-cta */



/* why choose us  */
.why-choose-us{
  background-color: var(--primary);
  color: var(--bg-light);
  padding-top: 5% !important;
  padding-bottom: 10% !important;
}

.bi-check-circle{
  color: var(--secondary);
  font-size: 1.5rem
}

.item-1{
  position: relative;
   width: 500px;
  height: 500px;
}
.item-2{
  position: absolute;
  top: 50%;
  left: 45%;
  width: 300px;
  height: 300px;
}
.item-3{
   position: absolute;
  top: 50%;
  left: 5%;
  width: 200px;
  height: 200px;
 
}
.item-3 p{
 background-color: var(--bg-light);
  color:var(--bg-light);
  padding: 15% 5%;
  margin: 20% 0% 0% 0%;
  font-size: 1.7rem;
  font-weight: 600;
  text-align: center;
  border-radius: 10px;
     backdrop-filter: blur(9px) saturate(78%);
    -webkit-backdrop-filter: blur(9px) saturate(78%);
    background-color: rgba(108, 117, 125, 0.54);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);

}

#keyword-marquee_container{
  width:100%;
  background-color: var(--bg-light);
  border-top:1px solid #FBEC6B;
  border-bottom:1px solid #FBEC6B;
  position: relative; /* better than absolute for layout */
}

.keyword-marquee{
  width:100%;
  overflow:hidden;
  padding:20px 0;
  background-color: var(--bg-light);
  border-top:1px solid #FBEC6B;
  border-bottom:1px solid #FBEC6B;
  position: relative;
}

.keyword-track{
  display:flex;
  width:max-content;
  will-change: transform;
  animation: marquee var(--marquee-duration, 18s) linear infinite;
}

.keyword-item{
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-size:26px;
  font-weight:600;
  color:var(--primary);
  margin-right:30px;
  flex: 0 0 auto;
}

.keyword-item img{
  height:28px;
  margin:0 20px;
}

@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance))); }
}

/* pause on hover */
.keyword-marquee:hover .keyword-track{
  animation-play-state: paused;
}

@media (max-width:768px){
  .keyword-item{ font-size:14px; }
  .keyword-item img{ height:22px; margin:0 12px; }
}


/* end of why choose us */


/* offer section */


#offers{
  padding-top: 10%;
  padding-bottom: 10%;
}

.offers-row{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;

}
.offer-card {
  width: 380px;
  height: 380px;
  background: var(--white);
  border-radius: 15px;
  font-weight: 900;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: 1px solid #6C757Dcc;
}

.offer-card:hover {
  cursor: pointer;
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}

.offer-context{
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
   gap: 10px;
  align-items: left;
  text-align: left;
  padding: 0 2rem;
  color: var(--text-dark)
}

.offer-context p{
  color: #333 !important;
}
.offer-logo {
  width:70px;
  height:70px;
   position: absolute;
  right: 0;
  top: 0;
   padding:  1rem 1rem 0 0; 
}

.offer-number{
   position: absolute;
  left: 0;
  top: -100px !important;
 padding:0 0  1rem 1rem ; 
 font-size: 1.2rem;
 text-align: center;
}

/* FIRST CONTENT — stays visible */
.first-content {
  position: relative;
  z-index: 2; /* always on top */
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: transform 0.35s ease;
}

.offer-card:hover .first-content {
  transform: scale(0.96); /* subtle depth only */
  
}


 .offer-card:hover  .offer-context{
    color: var(--white) !important;
}

 .offer-card:hover  .offer-context p{
    color: var(--white) !important;
}

/* SECOND CONTENT — blurred hover layer */
.second-content {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* image (no blur) */
.second-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}

/* color overlay ON TOP of image */
.second-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(22, 53, 99, 0.5); /* #163563 overlay */
  z-index: 2;
  pointer-events: none;
}
/* hover state */
.offer-card:hover .second-content {
  opacity: 1;
  transform: scale(1);
}






/* testimonials  */

#testimonials{
  padding-top: 10%;
  padding-bottom: 10%;
  background-color: #16356311;
}




.testimonials_card{
    background: linear-gradient(rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
  border-radius: 20px;
  display: flex;
   justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10%;
  margin:1%;
  position: relative;

}

.testimonials_card-image{
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% ;
        margin-bottom: 15px;

}


.quote{
  position: absolute;
  top: 0;
  left: 0;
  padding:  1rem ;
  color: var(--primary);
  font-size: 3rem;
}

.mySwiper {
  padding-bottom: 40px; /* space for pagination */
}

.swiper-pagination {
  bottom: 0 !important;
}
/*
.swiper-slide {
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.6;
}

 .swiper-slide-active {
  transform: scale(1.05);
  opacity: 1;
} */



/* end of testimonials */


/* faq */

#faqs{
  margin-top: 5%;
  margin-bottom: 10%;
}

/* remove default arrow */
.accordion-button::after {
  display: none;
}

/* bottom border style */
.accordion-item {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* chevron icon */
.accordion-icon {
  transition: transform 0.3s ease;
  font-size: 1.1rem;
  color: var(--text-dark); /* brand primary */
}

/* rotate when open */
.accordion-button:not(.collapsed) .accordion-icon {
  transform: rotate(180deg);
}

/* cleaner button look */
.accordion-button {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
}



/* end of faq */

iframe{
  padding: 0 !important;
  margin: 0 !important;
  height: 250px;
  width: 100% ;
}


.email{
  color: var(--text-dark);
}

/* footer */

footer{
  padding-top: 5%;
  padding-bottom: 1%;
  background-color: var(--bg-light);

  }

footer i{
  color: var(--primary);
  font-size: 1rem;
}
.main-button {
  padding: 1px 2px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--primary);
  font-weight: 500;
  transition: all 0.2s ease;
}



.flex-item {
  min-width: 60px;
  border-bottom: 1px solid var(--accent);
  border-top: #0D2A4A solid 1px;
  flex: 1 1  calc(30% - 0.5rem); /* 4 per row on large screens */
}


.main-button:hover{
  background-color: var(--text-dark);
  color: var(--secondary);
}





.service-con{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  font-size: 1.5rem; 
  font-weight: 500;
  padding:0.51rem;
   border-radius: 10px;
   text-align: left;
   color: var(--text-dark);
  border: 0.5px solid var(--accent);
  border: #0D2A4A solid 1px;
  flex: 1 1 1 calc(30% - 0.5rem); /* 4 per row on large screens */
}


.service-con i{
  color: var(--secondary);
  font-size: 2.2rem;
}
.service-con:hover i{
  scale: 1.2;
  transform: translateY(-20px);
  
}


/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

header{
  display: none;
}

.navbar-business_name{
  font-weight: bold;
  font-size: 1rem;
  color: var(--primary);
}

.bi-chevron-double-down{
  margin-top: 0% !important;
 padding: 0% !important;
  
}

nav{
background-color: var(--bg-light);
position: fixed;

}

.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--text-dark) !important;
}


#hero-txt h1{
  font-size: 3rem;
 
}

#hero-txt article{
  line-height: 1.3;
  font-size: 0.8rem;
  margin-top: 5%;
}


.item-1{
  position: relative;
   width: 400px;
  height: 400px;
}




#about-us{
  padding-top: 15%;
  padding-bottom: 5%;
  padding-left: 3%;
  padding-right: 3%;
}


#about-us article{
  font-size: 1rem;
}

.counter-value{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
}


 .plus-sign {
        padding-left: 5%;
        font-size:2rem; /* Smaller size for + */
 }
.counter  p {   font-size: 0.8rem;
  }




.input {
 
  height: 2em;
  padding: 0.3em;
 
}

#contact-us-info-cta{
  display: none;
}
.sub-txt h2{
  font-size: 1.2rem !important;
}

.sub-txt article{
  font-size: 0.7rem !important;
}




.offers-row{
  display: grid;
  grid-template-rows: repeat(3,1fr);
  grid-template-columns: 1fr;
  gap: 1rem;

}
.offer-card {
  width: 360px;
  height: 360px;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
  
 
}

.testimonials_card_body p{
 font-size: .8rem !important;

}

.testimonials_card-image{
  width: 50px !important;
  height: 50px !important;
}




.offer-number{
   position: absolute;
  left: 0;
  top: -150px !important;

}



.service-con{
  width: 100%;
  font-size: 1.4rem; 
  font-weight: 500;
  padding:0.6rem;
   border-radius: 10px;
   text-align: left;
   color: var(--text-dark);
  border: 0.5px solid var(--accent);
  border: #0D2A4A solid 1px;
  flex: 1 1 1 calc(30% - 0.5rem); /* 4 per row on large screens */
}



}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
 header{
  display: none;
}
.bi-chevron-double-down{
  margin-top: 0% !important;
 padding: 0% !important;
  
}




.why-choose-us , #contact-us ,#faqs  {
 padding-left: 5%;
  padding-right: 5%;
}



}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
  header{
  display: none;
}

.bi-chevron-double-down{
  margin-top: 0% !important;
 padding: 0% !important;
  
}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
  
}

/* XXL devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {
  
}