@import 'variable.css';
/* ----component css------- */
*{
    padding: 0;
    margin: 0;
}
.pf{
    padding: 20px;
}
.p-m{
    padding: 5px 10px;
    margin: 5px 0;
    
}
.d-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.d-flex{
    display: flex;
}
.d-block{
    display: block;
}
.card{
    margin-top:40px;
}
a{
    text-decoration: none;
    color: var(--black);
}
.btn{
    border: 1px solid var(--black);
    color: var(--white);
}
.no-arrow {
  -moz-appearance: textfield;
}
.no-arrow::-webkit-inner-spin-button {
  display: none;
}
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.primary-btn {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--black);
    padding: 10px 15px;
    border-radius: 8px;
}
.primary-btn:hover{
    color: var(--white);
    background-color: var(--black);
    border: 1px solid var(--white);
}
.secondary-btn{
    color: var(--white);
    background-color: var(--black);
    border: 1px solid var(--white);
}

.button-whatsapp {
  position: fixed;
  background: rgb(21, 156, 21);
  bottom: 30px;
  right: 50px;
  padding: 12px 15px;
  border-radius: 70%;
  z-index: 99;
  transition: all ease 0.5s;
  animation: buzz 0.4s infinite alternate-reverse;
}

.button-whatsapp i {
  font-size: 40px;
  color: #fff;
  transition: all ease 0.5s;
}

@keyframes buzz {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

/* ----------back-to-top------------- */
.back-to-top {
    position: fixed;
    bottom: 0;
}
.back-to-top .back-icon img {
    width: 30px;
    height: 30px;
}

/* -----header-section------ */


header{
   width: 100%; 
}
    
.header{
   background: var(--white);
   display: flex;
   justify-content: space-between;
   height: 110px;
   align-items: center;
}
.header-card{
    width: 100%;
    display: flex;
    padding: 10px 0;
}
.left-header,
.right-header{
    width: 50%;
    padding: 20px;
}
.left-header-logo{
    width: 15%;
    margin-left: 73px;
}
.left-header-logo img{
    width: 100%;
}
.header-card
.left{
    width: 25%;
    display: flex;
    align-items: center;
}
.header-card
.right{
    width:75%;
    display: flex;
    align-items: center;
    justify-content: end;
}
.right-header-btn{
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
.right-header-btn .whatsapp,
.right-header-btn .call{
    transition: all ease 0.5s;
}
.right-header-btn .call a {
    padding: 9px 13px;
    background: #d83e0b;
    color: #fff;
    border-radius: 7px;
    border: none;
    font-size: var(--font-size-base);
    font-weight: 650;
}
.right-header-btn .whatsapp a {
    padding: 9px 13px;
    border: none;
    font-size: var(--font-size-base);
    background: #159c15;
    color: #fff;
    border-radius: 7px;
    font-weight: 650;
}

.right-header-btn .call:hover,
.right-header-btn .whatsapp:hover{
    transform: scale(1.03);
    box-shadow: 0px 2px 6px 3px #d0d0d0;
}
/* ----------hero-left-content------- */
.hero{
    background-color: var(--hero-bg);
}
.hero-caption {
    margin: 40px 0;
    color: var(--white);
}
.hero-caption
.offer-title h2{
    padding-top: 10px;
    font-size: 2.5rem;

}
.offer-title h1{
    font-size: 1.5rem;
    padding: 7px 0;
    font-weight: 700;
    text-decoration: double underline overline 1px;
    text-underline-offset: 10px;
}
.hero-caption
.offer-title h3{
    font-size: 28px;
    display: block;
}
.hero-caption
.contact-us{
    margin: 25px 0;
}
.hero-caption
.contact-us .title{
    display: block;
}
.hero-caption
.contact-us .title h2{
    font-size: var(--font-size-large);
    text-align: left;
}
.contact-us .contact p{
    padding: 10px 0;
}
.social-contact{
    padding: 20px 0;
    display: flex;
    gap: 20px;
}
.social-contact button{
    padding: 8px 15px;
    background: #ff9815;
    border: none;
    border-radius: 10px;
    transition: all ease 0.5s;
    
}
.social-contact button i{
    padding-right: 7px;
}
.social-contact button:nth-child(2){
    background: #283266;
    border: 1px solid #fff;
    animation: side 0.3s infinite alternate-reverse;
}
.social-contact button:nth-child(2):hover{
    background: #ff9815;
}
.social-contact button a{
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
}
.badge{
    margin: 10px 0;
    padding: 10px;
    background-color: var(--white);
}
.badge-card {
    display: grid;
    width: 100%;
}
.badge-logo img{
    width: 70px;
}
.badge-logo, .badge-mark{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.badge-mark .text{
    font-size: 26px;
    font-weight: 700;
    color: var(--hero-bg);
}
.badge-mark .rating i{
    font-size: 26px;
    font-weight: 700;
}
/* -------hero-right-content----------- */
.form-card{
    background-color: var(--white);
    box-shadow: var(--header-blue) 1px -1px 5px 0px;
    margin: 40px 0;

}
.form-wrapper-heading .title h2{
    font-size: 30px;
    text-align: center;
    font-weight: 700;
    color: var(--hero-bg);
}
.form-wrapper-heading .content h2{
    font-size: var(--font-size-large);
    text-align: center;
    padding: 0 10px;
    animation: color 2s infinite;
}
@keyframes color {
    0%{
        color: var(--hero-bg);
    }
    100%{
        color: var(--logo-yellow);
    }
}
.input-area{
    display: flex;
    flex-direction: column;
}
.g-recaptcha{
    margin: 5px 0;
}
/* ----testimonial--------- */

.testimonial-header h2{
    text-align: center;
    font-size: var(--font-size-large);
    color: var(--hero-bg);
}
.testimonial-header p{
    text-align: center;
}
.testimonial-title{
    text-align: center;
    color: var(--hero-bg);
}
.testimonial-content-wrapper .testimonial-content{
    text-align: center;
}
.carousel {
    background: #e7e3e333;
}
.carousel-inner {
    margin: 0px 60px;
    width: auto;
    padding: 50px 0;
}
.client-detail-block .testimonial-title{
    text-align: center;
    color: var(--hero-bg);
}
.carousel-indicators [data-bs-target]{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #000;
}

/* -------gurranty---------------- */
.garranty {
    margin: 20px 0;
    background: #f3eeeef7;
    padding: 20px 0;
}
.garranty .garranty-title h2{
    text-align: center;
    color: var(--hero-bg);
    margin-bottom: 20px;
}
.garranty .gurrant-content p{
    text-align: center;
}
/* -----------why-choose-us------------- */

.why-choose-us {
  margin: 50px 0;
}
.why-choose-us
.left .title h2{
    font-size: var(--font-size-large);
    color: var(--hero-bg);
    text-align: center;
}
.why-choose-us
.left .content{
    margin-top: 15px;
}
.offer-btn{
    display: flex;
    justify-content: center;
    animation: bg-color-1 2s infinite;
}
.offer-btn a{
    color: var(--white);
}
.offer-btn:hover{
    border: 1px solid var(--black);
}
.offer-btn:hover a{
    color: #fff;
}
/* -------------common-service-------- */
.common-service-card { 
    margin: 50px 0;
    background-color:#80808033;
    
}
.common-service-body .title h2{
    color: var(--hero-bg);
}
.common-service-body .content{
    margin-top: 10px;
    text-align: justify;
}
.common-service-card .left{
    padding: 33px;
}
.common-service-card .right{
    padding: 20px;
}
.common-service-card-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}
/* ----------cta-first------------ */
.cta-first {
    margin: 50px 0;
    background: var(--hero-bg);
}
.cta-card{
    padding: 50px 0;
    color: var(--white);
}
.cta-card .heading h2{
    font-size: var(--font-size-large);
    text-align: center;
    font-weight: 600;
}
.cta-card .title p{
    text-align: center;
    font-weight: 400;
}
.cta-card .content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.cta-card .content .call-us{
    animation: bg-color-1 2s infinite;
}
.cta-card .content .whatsapp-us{
    animation: bg-color-2 2s infinite;
}
.cta-card .content .call-us, .whatsapp-us{
    padding: 10px 15px;
    border: 1px solid var(--logo-yellow);
    border-radius: 8px;
}
.cta-card .content 
.call-us:hover{
    background-color: var(--white);
}
.cta-card .content 
.call-us:hover a{
    color: var(--black);
}
.cta-card .content 
.whatsapp-us:hover{
    background-color: var(--white);
}
.cta-card .content 
.whatsapp-us:hover a{
    color: var(--black);
}
.cta-card .content .call-us a, .whatsapp-us a {
    color: var(--white);
}
@keyframes bg-color-1 {
    from{ background-color: var(--logo-yellow);}
    to{
        background-color: var(--hero-bg);
    }
}
@keyframes bg-color-2 {
    from{
        background-color: var(--hero-bg);
    }
    to{ background-color: var(--logo-yellow);}
   
}
@keyframes side{
    0%{
        margin-left: -3px;
    }
    100%{
        margin-left: 3px;
    }
}
/* -------our-services------------- */
.our-service-header h2{
    text-align: center;
    margin: 5px 0 40px 0;
    font-size: var(--font-size-large);
    color: var(--hero-bg);
}
.our-service .container .row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.service-card{
    padding: 20px;
    border: 1px solid var(--logo-yellow);
    height: auto;
}
.service-card .service-card-top{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.service-card .service-card-top .icon img{
    width: 60px;
    height: 60px;
}
.service-card .service-card-top .label{
    font-size: var(--font-size-medium);
    font-weight: 700;
}
.service-card .service-card-bottom .content p{
    text-align: justify;
}
.service-card .service-card-bottom .button{
    display: inline-block;
    background: var(--hero-bg);
    padding: 5px 10px;
}
.service-card .service-card-bottom .button a{
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--white);
}
.service-card .service-card-bottom .button:hover a{
    color: var(--logo-yellow);
}
/* ------------hero-banner-second------------ */
.hero-banner-second{
    margin: 25px 0;
    background: var(--hero-bg);
    padding: 20px 0;
}
.hero-banner-second .heading h2{
    margin-bottom: 20px;
    color: var(--white);
}
.hero-banner-second .title h3{
    text-align:center;
    padding: 10px 0;
}
.second-banner-card{
    padding: 10px;
    background-color: var(--white);
    border-radius: 15px;
    margin: 0;
}
.second-banner-card .icon ,.heading ,.title{
    display: flex;
    justify-content: center;
    align-items: center;
}
.second-banner-card
.heading h2{
    color: var(--hero-bg);
    text-align: center;
    margin: 0;
}
.second-banner-card
.title p{
    color: var(--hero-bg);
    text-align: center;
    margin: 0;
    font-weight: 400;
    
}
.second-banner-card .icon img{
    width: 80px;
    height: 80px;
}
.hero-banner-second-btn {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*------brand-new------------*/
.contact-brand-new{
    margin:20px 0;
}
.contact-brand-new
.contact-brand-new-btn{
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
    
}
.contact-brand-new-btn .call,
.contact-brand-new-btn .whatsapp{
    transition: all ease 0.5s;
}
.contact-brand-new-btn .call a {
    padding: 9px 13px;
    background: #d83e0b;
    color: #fff;
    border-radius: 7px;
    border: none;
    font-size: var(--font-size-base);
}
.contact-brand-new-btn .whatsapp a {
    padding: 9px 13px;
    border: none;
    font-size: var(--font-size-base);
    background: #159c15;
    color: #fff;
    border-radius: 7px;
}

.contact-brand-new-btn .call:hover,
.contact-brand-new-btn .whatsapp:hover{
    transform: scale(1.03);
    box-shadow: 0px 2px 6px 3px #d0d0d0;
}

.contact-brand-new .title h3{
    text-align:center;
    padding:10px 0;
    color: var(--hero-bg);
}
.contact-brand-new .content{
    text-align:center;
    padding:10px 0;
}
/* -------footer----------- */
.footer-top {
    padding: 50px 20px;
}
.footer-top .p-m {
    margin: 20px 0;
}
.footer-card .icon .footer-logo {
    max-width: 100%;
}
.footer-card .important-link h3{
    justify-content:left;
    color: var(--hero-bg);
}
.footer-card .content h3{
    justify-content:left;
    color: var(--hero-bg);
}
.footer-card .content ul{
    padding:0;
}
.footer-card .content ul li{
    display:block;
}
.footer-card .content ul li a{
    color: var(--hero-bg);
}
.footer-card .content ul li a:hover{
    color: var(--logo-yellow);
}
.footer-card .important-link li a{
    font: var(--font-size-base);
}

.footer-card .important-link li a:hover{
    color: var(--logo-yellow);
}
.footer-card .social-media
.facebook img,
.instagram img,
.linkedin img {
    width: 30px;
    height: 30px;
}
.footer-card .important-link li{
    display: block;
    line-height: 32px;
    font-weight: 400;
}
.footer-card .important-link li a{
    color: var(--hero-bg);
}
.footer-copy-right{
    display: flex;
    padding: 10px 0;
    justify-content: center;
    color: var(--white);
    background-color: var(--black);
}
/* ----------Privacy-policy----------- */
.privacy-card{
    padding: 20px 100px;
    box-shadow: 2px 0 5px 1px;
    text-align: justify;
}
.privacy-card .title h2{
    font-size: var(--font-size-large);
    text-align: center;
    padding: 5px 0;
    color: var(--black);
}
/*------------thankyou-pages-------------------*/
.thankyou{
    border-top:1px solid #000;
    padding: 50px 0
}
.thankyou .content{
    margin:20px 0;
}
.thankyou .content .images img{
    width:300px;
    border-radius: 50%;
}
.thankyou .content .images ,h3 ,.back-to-home{
    display:flex;
    justify-content:center;
    align-item:center;
}
.thankyou .content .back-to-home a{
    padding:5px 10px;
    border:1px solid #000;
    border-radius:8px;
}
/*-----------404 Not found-------------------*/
.page-not-found {
    padding: 50px 0;
    border-top: 1px solid #000;
}
.page-not-found .content .images,h3 ,.back-to-home {
    display:flex;
    justify-content:center;
    align-item:center;
}
.page-not-found .content .images img{
    width:400px;
    border-radius:50%;
}
.page-not-found .content .back-to-home a{
    padding:5px 10px;
    border:1px solid #000;
    border-radius:8px;
}
/* -----------------Media-Querry------------- */
@media screen and (min-width:1024px) {
    .why-choose-us .right .right-image img{
        max-width: 100%;
    }
    .our-service .container .row-grid .col-md-2 {
        width: auto;
    }
    .service-card {
        margin: 5px;
    }
    .input-area {
        margin: 9px 0;
    }
    .service-card {
        height: 330px;
    }
    
    .footer-top {
        padding: 0px 20px;
    }


}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .left-header-logo {
        width: 35%;
        margin-left: 24px;
    }
    .left-header {
        width: 30%;
    }
    .right-header {
        width: 70%;
    }
}

@media screen and (max-width:768px) {
    .why-choose-us .right .right-image img{
        max-width: 100%;
    }
       .right-header-btn .whatsapp{
       display: none;
   }
   .left-header-logo {
    width: 26%;
    margin-left: 9px;
}
    .testimonial {
        padding: 15px 94px;
    }
    .our-service .container .row-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-banner-second .row{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .col-md-2 {
        width: auto;
    }
    .service-card {
        height: 350px;
        margin: 5px;
    }
    .header-card .header-btn{
        display:grid;
        gap: 15px;
    }
    .second-banner-card{
        margin: 5px;
    }
    
    .footer-top {
       padding: 0px 20px;
    }
   .footer-card .content{
      display: none;
    }
    .footer-card .important-link{
      margin-top: 25px;
    }
}
@media screen and (max-width:559px) {
    .left-header-logo {
    width: 100%;
    margin-left: 0;
   }
   .right-header-btn .whatsapp{
       display: none;
   }
   .left-header {
    width: 30%;
}
.right-header{
    width: 70%;
}
.right-header-btn {
    justify-content: end;
}
.right-header-btn .call{
     animation: side 0.3s infinite alternate-reverse;
}
.right-header-btn .call a {
    font-size: 13px;
    font-weight: 650;
}


    .why-choose-us .right .right-image img{
        max-width: 100%;
    }
    .p-m{
        margin: 7px 1px;
    }
    .testimonial {
        padding: 20px 0px;
    }
    .our-service .container .row-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .col-md-2 {
        width: auto;
    }
    .service-card {
        height: auto;
        margin: 5px;
    }
    .hero-banner-second .row{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .second-banner-card .icon, .heading, .title {
        padding: 10px;
    }
    .second-banner-card{
        margin: 5px;
    }
    .contact-brand-new .contact-brand-new-btn{ 
        display: grid;
        gap:15px;
    }
    .contact-brand-new .contact-brand-new-btn .call a {
      padding: 5px 45px;
    }
    .hero .left{
        text-align: center;
    }
    .hero-caption .offer-title h2 {
    padding-top: 10px;
    font-size: 2.1rem;
}
.hero-caption .contact-us {
        text-align: center;
        border: 1.5px dashed #fff;
        padding: 10px;
    }
.hero-caption .contact-us .title h2 {
    font-size: 25px;
    text-align: center;
}
.social-contact {
    justify-content: center;
}
.hero-caption .offer-title h3 {
    font-size: 18px;
    padding-top: 10px;
    display: block;
}
.form-wrapper-heading .title h2 {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    color: var(--hero-bg);
}
.form-wrapper-heading .content h2 {
    font-size: 25px;
    font-weight: 700;
    animation: color 2s infinite;
}