@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,100;0,200;0,300;0,400;0,600;0,900;1,400;1,600;1,900&family=Ubuntu:ital,wght@0,100;0,200;0,300;0,400;0,600;0,900;1,400;1,600;1,900&display=swap');
:root{
--fr-color-site : 1 94 163;
--fr-color-site-dark : 1 66 115;
--fr-color-site-acc : 214 19 23;
--fr-color-site-acc-dark : 129 12 14;
--fr-color-font : 102 102 102;

    --fr-font1 : Ubuntu;
    --fr-font2 : Ubuntu;
}
body{
font-family:var(--fr-font1), sas-serif;
color:rgb(var(--fr-color-font));
margin-top: 75px;
}
.font1{
font-family:var(--fr-font1), sans-serif;
}
.font2{
font-family:var(--fr-font2), sans-serif;
}
.opacity-5{
--fr-opacity: 5% !important;
}
.opacity-10{
    --fr-opacity: 10% !important;
}
.opacity-20{
    --fr-opacity: 20% !important;
}
.opacity-30{
    --fr-opacity: 30% !important;
}
.opacity-40{
    --fr-opacity: 40% !important;
}
.opacity-50{
    --fr-opacity: 50% !important;
}
.opacity-60{
    --fr-opacity: 60% !important;
}
.opacity-70{
    --fr-opacity: 70% !important;
}
.opacity-80{
    --fr-opacity: 80% !important;
}
.opacity-90{
    --fr-opacity: 90% !important;
}
.opacity-100{
    --fr-opacity: 100% !important;
}
.bg-site{
--fr-opacity:100%;
background-color:rgb(var(--fr-color-site) / var(--fr-opacity)) !important;
}
.bg-site-dark{
background-color:rgb(var(--fr-color-site-dark)) !important;
}

.bg-site-5{
background-color:rgb(var(--fr-color-site) /5%) !important;
}
.bg-site-10{
background-color:rgb(var(--fr-color-site) /10%) !important;
}
.bg-site-20{
background-color:rgb(var(--fr-color-site) /20%) !important;
}
.bg-site-30{
background-color:rgb(var(--fr-color-site) /30%) !important;
}
.bg-site-40{
background-color:rgb(var(--fr-color-site) /40%) !important;
}
.bg-site-50{
background-color:rgb(var(--fr-color-site) /50%) !important;
}
.bg-site-60{
background-color:rgb(var(--fr-color-site) /60%) !important;
}
.bg-site-70{
background-color:rgb(var(--fr-color-site) /70%) !important;
}
.bg-site-80{
background-color:rgb(var(--fr-color-site) /80%) !important;
}
.bg-site-90{
background-color:rgb(var(--fr-color-site) /90%) !important;
}
.bg-site-dark-10{
background-color:rgb(var(--fr-color-site-dark) /10%) !important;
}
.bg-site-dark-20{
background-color:rgb(var(--fr-color-site-dark) /20%) !important;
}
.bg-site-dark-30{
background-color:rgb(var(--fr-color-site-dark) /30%) !important;
}
.bg-site-dark-40{
background-color:rgb(var(--fr-color-site-dark) /40%) !important;
}
.bg-site-dark-50{
background-color:rgb(var(--fr-color-site-dark) /50%) !important;
}
.bg-site-dark-60{
background-color:rgb(var(--fr-color-site-dark) /60%) !important;
}
.bg-site-dark-80{
background-color:rgb(var(--fr-color-site-dark) /80%) !important;
}
.bg-site-acc {
background-color: rgb(var(--fr-color-site-acc)) !important;
}
.bg-site-acc-10{
background-color: rgb(var(--fr-color-site-acc) /10%) !important;
}
.bg-site-acc-20{
background-color: rgb(var(--fr-color-site-acc) /20%) !important;
}
.bg-site-acc-30{
background-color: rgb(var(--fr-color-site-acc) /30%) !important;
}
.bg-site-acc-40{
background-color: rgb(var(--fr-color-site-acc) /40%) !important;
}
.bg-site-acc-50{
background-color: rgb(var(--fr-color-site-acc) /50%) !important;
}
.bg-site-acc-60{
background-color: rgb(var(--fr-color-site-acc) /60%) !important;
}
.bg-site-acc-70{
background-color: rgb(var(--fr-color-site-acc) /70%) !important;
}
.bg-site-acc-80{
background-color: rgb(var(--fr-color-site-acc) /80%) !important;
}
.bg-site-acc-90{
background-color: rgb(var(--fr-color-site-acc) /90%) !important;
}
.bg-site-acc-light {
background-color: rgb(var(--fr-color-site-acc-light));
}
.bg-site-light {
background-color: rgb(var(--fr-color-site-light));
}
.border-site {
border-color: rgb(var(--fr-color-site)) !important;
}
.border-acc{
border-color: rgb(var(--fr-color-site-acc)) !important;
}
.text-site{
color: rgb(var(--fr-color-site));
}
.text-site-light{
color: rgb(var(--fr-color-site) /50%);
}
.text-site-75{
color: rgb(var(--fr-color-site) /75%);
}
.text-site-dark{
color: rgb(var(--fr-color-site-dark));
}
.text-site-dark-50{
color: rgb(var(--fr-color-site-dark) /50%);
}
.text-site-acc {
color: rgb(var(--fr-color-site-acc));
}
.text-site-acc-light {
color: rgb(var(--fr-color-site-acc-light));
}
.bg-gradient-dark{
background-image:linear-gradient(180deg, rgb(var(--fr-color-site-dark)/100%), rgb(var(--fr-color-site-dark)/0%))
}
.bg-gradient-white{
background-image:linear-gradient(180deg, rgb(255 255 255 /40%),  rgb(255 255 255/0%))
}
.bg-gradient-white-120{
background-image:linear-gradient(120deg, rgb(255 255 255 /40%),  rgb(255 255 255/0%))
}
.btn-site-acc {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site-acc));
--bs-btn-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-acc-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-acc-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-acc-dark));
}
.btn-site {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site));
--bs-btn-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-dark));
}
.btn-site-light {
--bs-btn-color: #fff;
--bs-btn-bg: rgb(var(--fr-color-site-light));
--bs-btn-border-color: rgb(var(--fr-color-site));
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgb(var(--fr-color-site-dark));
--bs-btn-hover-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-focus-shadow-rgb: 211, 212, 213;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgb(var(--fr-color-site-dark));
--bs-btn-active-border-color: rgb(var(--fr-color-site-dark));
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: rgb(var(--fr-color-site-dark));
--bs-btn-disabled-border-color: rgb(var(--fr-color-site-dark));
}
.lh-normal{
line-height:normal !important;
}
.vertical-center {
min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-)       */

display: flex;
align-items: center;
}
.spooler{
display:none;
}
.preview{
display:none;
z-index:10000 !important;
}
.ft-12 {
font-size: 12px;
}
.ft-14 {
font-size: 14px;
}
.ft-16 {
font-size: 16px;
}
.ft-18 {
font-size: 18px;
}
.ft-19 {
font-size: 19px;
}
.ft-24 {
font-size: 24px;
}
.ft-28 {
font-size: 28px;
}
.ft-32 {
font-size: 32px;
}
.ft-36 {
font-size: 36px;
}
.ft-40 {
font-size: 40px;
}
.ft-48 {
font-size: 48px;
}
.ft-52 {
font-size: 52px;
}

.ft-72 {
font-size: 72px;
}
@media (max-width: 768px){
.ft-sm-12{
font-size: 12px !important;
}
.ft-sm-14{
font-size: 14px !important;
}
.ft-sm-16{
font-size: 16px !important;
}
.ft-sm-18{
font-size: 18px !important;
}
.ft-sm-20{
font-size: 20px !important;
}
.ft-sm-24{
font-size: 24px !important;
}
.ft-sm-28{
font-size: 28px !important;
}
.ft-sm-32{
font-size: 32px !important;
}
.ft-sm-36{
font-size: 36px !important;
}
.ft-sm-48{
font-size: 48px !important;
}
.ft-sm-52{
font-size: 52px !important;
}
.ft-sm-58{
font-size: 58px !important;
}
}
header{
    background-image: url(https://serrurier-jadel.fr/serrurier-jadel/img/headerBgImg_1732215330_0.png), linear-gradient(120deg, rgb(var(--fr-color-site) /45%) , #00397e 40%, #000e3b);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
    min-height: 670px;
    overflow: hidden;
}
header h1 {
    font-size: calc(1rem + 4.5vw);
    line-height: 100%;
    text-shadow: 3px 4px rgb(var(--fr-color-site-dark));
}
.stars{
color:#ffc107;
}
.tarif{
width:191px;
top:2rem;
position:absolute;
right:0;
}
.tarif .prix{
font-size:90px;
line-height:100%
}
.tarif sup {
font-size: 20px;
vertical-align: 15px;
background-color: rgb(var(--fr-color-site-dark));
padding: 0rem .5rem .25rem;
line-height: normal;
border-radius: .5rem;
position: absolute;
top: 25%;
right: 22px;
}
.btn-gradient{
color:#ffffff;
background-image: url(https://serrurier-jadel.fr/serrurier-jadel/img/button.png);
background-size:contain;
}
.bg-photo {
position: absolute;
bottom: 0;
}
.service.service-1 ul{
    list-style: none;
    padding: 0;
}
.service.service-0 ul{
    padding-left: 50px;
    list-style: none;
}
.service.service-0 ul b, .service.service-0 ul strong{
    font-size:1.15rem;
    color:rgb(var(--fr-color-site));
}
.service ul li {
    margin-bottom: .25rem;
}
.service.service-0 ul li {
    background-image:url(https://serrurier-jadel.fr/serrurier-jadel/img/puce.png);
    background-repeat: no-repeat;
    line-height: normal;
    padding-left: 40px;
    margin-bottom: .75rem;
}
img.references{
    max-height:100px;
}
.stars-body{
    margin-left:-2rem;
}
.call-me span {
    padding: 3px 12px;
    margin-top: 140px;
}
@media (min-width:1920px){
    header h1 {
        font-size: 100px;
    }
}
@media (min-width: 1024px) {

    .btn-gradient{
        width: 435px;
        height: 148px;
        padding-top: 35px;
        margin-left: -2rem;
        margin-top
    }
    .bg-photo {
        left: 50%;
        height: 85%;
        transform: translateX(-15%);
    }
    .row-cols-lg-7>* {
        flex: 0 0 auto;
        width: 14.28571428571429%;
    }
}
@media (max-width:1024px){
    header{
        min-height: 565px;
    }
    .bg-photo {
        left: 50%;
        height: 75%;
        transform: translateX(0%);
    }
    .tarif {
        top:0;
        scale: 70%;
    }
    .btn-gradient {
        width: calc(435px* .9);
        height: calc(148px* .9);
        margin-left: -1rem;
        font-size: 42px;
    padding-top: 32px;
    }
}
@media (max-width: 768px){
    .call-me {
        width: 140px;
    }
    .call-me span {
        margin-top: 86px;
        width: 100px;
    }
    .service.service-0 ul {
        padding-left: 0px;
    }
    .bg-photo {
        display:none
    }
    header{
        min-height: auto;
    }
    header .row{
        margin-top:120px !important;
    }
    header h1{
        font-size: calc(1rem + 7vw);
    }
    img.references {
        max-width : 73px;
    max-height:none;
    }
}