.navbar-light .navbar-nav .nav-link {
    color: #206A5D;
    font-weight: bold;
    font-size: 20px;

}




/**********************************************/


.hero {
    background-image: url('../img/garage-door-hero.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.insidehero {
    backdrop-filter: blur(6px) saturate(102%);
    -webkit-backdrop-filter: blur(6px) saturate(102%);
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);

}




.lead {

    color: black;
    font-weight: 500;
    font-size: 20px;
    margin-top: 5%;

}



/*****/

.centerr {

    backdrop-filter: blur(6px) saturate(102%);
    -webkit-backdrop-filter: blur(6px) saturate(102%);
    background-color: rgba(16, 93, 60, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(20, 83, 57, 0.3);
}

.cta {
    background-image: url('../img/garage-door.webp');
    background-size: cover;
    padding: 10%;

    background-attachment: fixed;

}


.cta .cta-btn {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 40px;
    border-radius: 50px;
    transition: 0.1s;
    margin: 10px;
    border: 2px solid #921e1eb0;
    color: #ebdfdfe1;
    background-color: #921e1eb0;
}

.cta .cta-btn:hover {
    background: #921e1eb0;
    border: 2px solid #d67070b0;
}

@media (max-width: 1024px) {
    .cta {
        background-attachment: scroll;
    }
}

@media (min-width: 769px) {
    .cta .cta-btn-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}


/****/




.number {

    font-size: 25.6px;

    --black: #12522c;
    --ch-black: #12522c;
    --eer-black: #12522c;
    --night-rider: #2e2e2e;
    --white: #ffffff;
    --af-white: #f3f3f3;
    --ch-white: #e1e1e1;
    border-radius: 8px;
    width: 200px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 15px;
    border: none;
    color: white;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    transition-duration: .2s;
    background-color: var(--ch-green);

}

.number:before,
.number:after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    border-radius: 15px;
    background: linear-gradient(45deg,
            var(--ch-black), var(--eer-black),
            var(--night-rider), var(--ch-white), var(--night-rider),
            var(--eer-black), var(--ch-black), var(--ch-black));
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    animation: steam 20s linear infinite;
}

@keyframes steam {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.number:after {
    filter: blur(50px);
}



/**********************************************/

/*************Timeline*********************************/
.lead1 {

    color: #206A5D;
    font-weight: bold;


}



.timeline:before {
    content: " ";
    background: var(--bs-secondary);
    width: 5px;
    height: 95%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item:nth-child(even) .timeline-content {
    float: right;
    padding: 40px 30px 10px 30px;
}

.timeline-item:nth-child(even) .timeline-content .date {
    right: auto;
    left: 0;
}

.timeline-item:nth-child(even) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent var(--bs-light) transparent transparent;
}

.timeline-item::after {
    content: "";
    display: block;
    clear: both;
}

.timeline-content {
    position: relative;
    width: 45%;
    padding: 10px 30px;
    border-radius: 4px;
    background: var(--bs-light);
}

.timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    right: -15px;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent var(--bs-light);
}

.timeline-img {
    width: 30px;
    height: 30px;
    background: var(--bs-secondary);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-top: 25px;
    margin-left: -15px;
}



@media screen and (max-width: 768px) {
    .timeline::before {
        left: 50px;
    }

    .timeline .timeline-img {
        left: 50px;
    }

    .timeline .timeline-content {
        max-width: 100%;
        width: auto;
        margin-left: 70px;
    }

    .timeline .timeline-item:nth-child(even) .timeline-content {
        float: none;
    }

    .timeline .timeline-item:nth-child(odd) .timeline-content::after {
        content: "";
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 30px;
        left: -15px;
        border-width: 10px 15px 10px 0;
        border-color: transparent #f5f5f5 transparent transparent;
    }

}



.center {
    width: 730px;
    height: 262px;
    box-shadow: 10px 10px 5px #206A5D;
}


.text {

    font-size: 50px;
    text-align: center;
}

/*************************************************/



/*********************************/
.offer {
 
    font-size: 30px;
    font-weight: bold;

    margin-top: 15%;


}

.money {
    font-size: 60px;
    color: rgb(12, 12, 12);

}

.contentoffer {
    padding: 1%;
    margin-left: 15%;
    color: rgb(12, 12, 12);
}


.symbol {
    font-size: 30px;
    color: rgb(12, 12, 12);

}



.click a {
    text-decoration: none;
    color: rgb(12, 12, 12);
}

.workers {

    margin-top: -20%;

}



@media screen and (max-width: 600px) {
    .timeline::before {
        left: 50px;
    }



}

@media screen and (max-width:991px) {
    .workers {

        margin-top: 10%;

    }

}

/**********************************************************/

/**********BRANDS************/
/*marquee*/
.marquee {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
    color: #fff;
    margin-top: 10%;
}

.marquee:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0% {
        text-indent: 27.5em
    }

    100% {
        text-indent: -105em
    }
}

/**********End of BRANDS************/


.circlesection {
    margin-top: 200px;
}

.circle-img {

    height: 450px;
    width: 450px;
    border-radius: 50%;
    background: url(../img/opener-remote.gif);
    background-size: cover;
    border: solid 10px #206A5D;

}


.circle {
    border-radius: 50%;
    height: 30px;
    width: 30px;

}



.centersection {
    backdrop-filter: blur(6px) saturate(102%);
    -webkit-backdrop-filter: blur(6px) saturate(102%);
    background-color: rgba(121, 126, 122, 0.685);
    border-radius: 12px;
    border: 1px solid rgba(119, 124, 122, 0.3);



}

.centertext {

    color: black;
    padding: 3%;
    margin-top: 2%;
    font-size: 20px;

}


.centertext1 {
    color: black;
    margin-top: 2%;
    font-size: 20px;
    padding: 2%;
}

/***********************/

.brandss {
    padding: 0%;
}

/**************************************/



#contactsection {
    background-color: #FAFAFA;
    padding: 50px 0px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 50px 0px;
    float: left;
    width: 100%;
    margin-top: 300px;
}

.contactsection p {
    color: #9a9a9a;
}

.contactsection textarea {
    min-height: 200px;
    max-width: 100%;
}

/* ************************************* */


/***************************************/

.circle-img2 {


    background: url('../img/garage-doorr.webp');

    margin: -60px;
    background-repeat: no-repeat;


}

@media screen and (max-width: 991px) {
    .circle-img2 {

        border-radius: 10%;
        background: url('../img/garage-doorr.webp');
        background-size: cover;
        border: solid 10px #206A5D;
        padding: 40% 0;
        background-repeat: no-repeat;
        margin-left: 1%;


    }

}


/********/
.lastsection {
    margin-top: 10%;



}

.why {
    background-image: url('../img/spinner.jpg');
    background-size: cover;
    border-radius: 10%;
    min-height: 500px;
    box-shadow: 5px 5px #206A5D;

}


.why2 {

    background-image: url('../img/Garage-Door-Repair.jpg');
    background-size: cover;
    border-radius: 10%;
    min-height: 500px;
    box-shadow: 5px 5px #206A5D;

}

/*  */
.spam {
    display: none;
}

.lastsection {
    background-image: url('../img/car.gif');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1%;


}

/*  */
/*  */



.circlesectioninstall {
    margin-top: 200px;
}

.circle-imginstall {

    height: 450px;
    width: 450px;
    border-radius: 50%;
    background: url(../img/install.gif);
    background-size: cover;
    border: solid 10px #206A5D;

}



.cta1 {
    background-image: url('../img/garage-door.webp');
    background-size: cover;
    padding: 10%;

    background-attachment: fixed;

}



.circle-img2install {


    background: url('../img/single-double-garage-doors.png');


    margin: -60px;
    background-repeat: no-repeat;


}

@media screen and (max-width: 991px) {
    .circle-img2install {

        border-radius: 10%;
        background: url('../img/single-double-garage-doors.png');
        background-size: cover;
        border: solid 10px #206A5D;
        padding: 40% 0;
        background-repeat: no-repeat;
        margin-left: 1%;


    }

}



.whyinstall {
    background-image: url('../img/experienced-garage-door-installers.webp');
    background-size: cover;
    border-radius: 10%;
    min-height: 500px;
    box-shadow: 5px 5px #206A5D;
}




.why2install {

    background-image: url('../img/emergency-garage-doors.webp');
    background-size: cover;
    border-radius: 10%;
    min-height: 500px;
    box-shadow: 5px 5px #206A5D;

}

/*  */
/*  */



.circleopener {
    margin-top: 200px;
}

.circle-imgopener {

    height: 450px;
    width: 450px;
    border-radius: 50%;
    background: url('../img/install-and-program-your-garage-door-opener.gif');
    background-size: cover;
    border: solid 10px #206A5D;

}



.ctaopener {
    background-image: url('../img/Opener-Banner.png');
    background-size: cover;
    padding: 10%;

    background-attachment: fixed;

}



.circle-img2opener {



    background: url('../img/garage-repair.webp');


    margin: -60px;
    background-repeat: no-repeat;


}

@media screen and (max-width: 991px) {
    .circle-img2opener {

        border-radius: 10%;
        background: url('../img/garage-repair.webp');
        background-size: cover;
        border: solid 10px #206A5D;
        padding: 40% 0;
        background-repeat: no-repeat;
        margin-left: 1%;


    }

}



.whyopener {
    background-image: url('../img/expert-garage-door-technician-installing-or-repairing-a-garage-door-with-precision-and-professionalism.png');
    background-size: cover;
    border-radius: 10%;
    min-height: 500px;
    box-shadow: 5px 5px #206A5D;
}




.why2opener {

    background-image: url('../img/save-money-garage-door-repair.jpg');
    background-size: cover;
    border-radius: 10%;
    min-height: 500px;
    box-shadow: 5px 5px #206A5D;

}

/*  */
/*  */
.circlespring {
    margin-top: 200px;
}

.circle-imgspring {

    height: 450px;
    width: 450px;
    border-radius: 50%;
    background: url('../img/spring.gif');
    background-size: cover;
    border: solid 10px #206A5D;

}


.centerrspring {

    backdrop-filter: blur(6px) saturate(102%);
    -webkit-backdrop-filter: blur(6px) saturate(102%);
    background-color: rgba(16, 93, 60, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(20, 83, 57, 0.3);

}

.ctaspring {
    background-image: url('../img/Garage_Door_Spring_Replacement_Cost_Need.webp');
    background-size: cover;
    padding: 10%;

    background-attachment: fixed;

}



.circle-img2spring {


    background: url('../img/Spring-replacement.jpg');


    margin: -60px;
    background-repeat: no-repeat;


}

@media screen and (max-width: 991px) {
    .circle-img2spring {

        border-radius: 10%;
        background: url('../img/Spring-replacement.jpg');
        background-size: cover;
        border: solid 10px #206A5D;
        padding: 40% 0;
        background-repeat: no-repeat;
        margin-left: 1%;


    }

}



.whyspring {
    background-image: url('../img/garage-door-spring-redpair.jpg');
    background-size: cover;
    border-radius: 10%;
    min-height: 500px;
    box-shadow: 5px 5px #206A5D;
}




.why2spring {

    background-image: url('../img/garage-door-spring-repair-technician.jpg');
    background-size: cover;
    border-radius: 10%;
    min-height: 500px;
    box-shadow: 5px 5px #206A5D;

}

/* ********************************* */

.circlesectionrepair {
    margin-top: 200px;
}

.circle-imgrepair {

    height: 450px;
    width: 450px;
    border-radius: 50%;
    background: url('../img/garage-repair.jpg');
    background-size: cover;
    border: solid 10px #206A5D;

}







.circle-img2repair {


    background: url('../img/garage-door-repair-service.webp');

    margin: -60px;
    background-repeat: no-repeat;


}

@media screen and (max-width: 991px) {
    .circle-img2repair {

        border-radius: 10%;
        background: url('../img/garage-door-repair-service.webp');
        background-size: cover;
        border: solid 10px #206A5D;
        padding: 40% 0;
        background-repeat: no-repeat;
        margin-left: 1%;


    }

}


/********/
.footer {
    margin-left: 10%;

}



.user-select-none{
    text-decoration: none;
    color: white !important;
  
}