@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Questrial&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

h1,h2,h3,h4,h5,h6 {
    font-family: "Red Hat Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
p,a {
    font-family: "Questrial", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Custome colours*/
.gold {
    color: #D0A348;
}
.bg-gold {
    background-color: #D0A348;
}

/* Custome margin*/
.mt-6 {
    margin-top: 5rem;
}
.mb-6 {
    margin-bottom: 5rem;
}

.my-6 {
    margin: 6rem 0;
}

.py-6 {
    padding: 6rem 0;
}

nav .container-fluid,
.hero,
#trust,
#services,
.contact-form,
.about-container,
#product .our-services,
.quote-section .container {
    max-width: 1200px;
    margin: 0 auto;
}



/* ---- Main styling ----
------------------------- * /

/* Nav styling */ 
nav {
    background-color: #000;
}

/* nav li a {
    color: #fff !important;
} */

.nav-btn:hover  {
    background: #fff;
    color: #000 !important;
}

/* Hero styling */ 
#landing-hero {
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 83vh;
}
.header-main-txt {
    opacity: 0;
}
.hero {
    justify-content: center;
    height: 80vh;
    text-align: center;
}

.hero h1 {
    font-size: 2rem;
}
.hero p {
    font-size: 1.2rem;
}

.hero-btn  {
    width: 100%;
}

/* Why you can trust us styling */ 
#trust h2 {
    margin: 4rem 0;
}
#trust .experience-section {
    width: 50%;
    margin: 0 auto;

}

.experience-section {
    background-color: #D0A348;
    padding: 20px 0;
    height: 580px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.experience-circle {
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 10px;
    position: relative;
    top: -50px;
}
.experience-circle p:first-child {
    font-size: 2.5rem;
}
.experience-circle p:last-child {
    font-size: 1rem;
}
.experience-text {
    margin: 0;
}
.trust-txt {
    margin-top: 5rem;
}
.trust-btn {
    width: 80%;
}
.trust-btn:hover {
    background-color: #000;
    color: #fff !important;
}

/* Services  */ 

.custom-height {
    height: 300px;
    object-fit: cover;
}

/* contact  */ 
#contact-hero {
    background-image: url(../img/contact-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* height: 83vh; */
}

/* Footer  */
footer {
    background-color: #000;
}
footer h4 {
    color: #fff;
}
.footer-dets p {
    margin-bottom: 0;
    margin-left: 1rem;
    color: #fff;
}
footer ul {
    padding-left: 0;
}
footer ul li a {
    color: #fff !important;
}
footer ul li a:hover {
    color: #fff !important;
}


#about {
    background-image: url(../img/about-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* ---- service page ----
------------------------- */ 
#product .service-img {
    width: 100%;
}
#product .service-quote {
    width: 100%;
}
.quote-section {
    background-color: #222222;
    /* background-image: url(../img/service-sectiong-bg.jpg); */
}

/* ---- contact page ----
------------------------- */ 
#contact-pge {
    background-image: url(../img/contact-page-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}
.contact-temp h4 {
    font-size: 2rem;
}
.contact-temp p {
    font-size: 1.25rem;
}

/* Form */

.contact-form label {
    color: #fff;
}

.contact-form input[type=text] {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    margin: 5px 0 15px;
}
#comments {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
}



.contact-form input[type=email] {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    margin: 5px 0 15px;
}

.contact-form input[type=submit] {
    width: 100%;
    padding: 8px;
    border-radius: 3px;
    background: #D0A348;
    color: #fff;
    margin: 20px 0;
    border: none;
    text-align: center;
    appearance: none;
    -moz-appearance: none;
   -webkit-appearance: none;
}

.terms-contact  p {
    font-weight: 600;
    font-style: 14px !important;
    width: 250px;
    display: inline-block;
    width: 250px;
}

.terms-contact label a {
    color: #e4a053;
    text-decoration: none;
}


.terms-contact label {
    position: relative;
    top: -5px;
}


.form-sucess, .form-error {
    color: #68a0d3;
}


/* Temp contact section 
----------------------*/
.temp-form h2 {
    text-align: center;
    font-size: 2rem;
}
.temp-form h3 {
    text-align: center;
    font-size: 1.5rem;
}
.temp-form p {
    font-size: 1.25rem;
}







/* Desktop */
@media screen and (min-width: 1000px) {

    .header-main-txt,
    .header-sub-txt,
    .header-service-btn,
    .header-quote-btn
    {
    opacity: 0;
   }
    /* Hero styling */ 
    .hero {
        text-align: left;
    }
    .hero h1 {
        font-size: 4rem;
    }
    .hero p {
        font-size: 2rem;
    }
    .hero-btn a {
        width: 150px;
        text-align: center;
    }
    .hero-btn a:hover {
        background-color: #fff;
        color: #000 !important;
    }
    .hero-btn a:first-child {
        margin-right: 2rem;
    }


    /* Why you can trust us styling */ 
    #trust h2 {
        margin: 4rem 0;
    }
    #trust .experience-section {
        width: 900px;
        margin: 0 auto;
        height: 190px;
    }

    .experience-section {
        background-color: #D0A348;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .experience-circle {
       background-color: #000;
       color: #fff;
       border-radius: 50%;
       width: 250px;
       height: 250px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       margin: 0 10px;
      
    }
    .experience-circle p:first-child {
       font-size: 4rem;
    }
    .experience-circle p:last-child {
        font-size: 1.5rem;
    }
    .experience-text {
       margin: 0;
    }
    .trust-btn {
        width: 200px;
    }
    /* ---- contact page ----
------------------------- */ 
/* Form */

.contact-form label {
    color: #fff;
}

.contact-form input[type=text] {
    width: 50%;
    padding: 8px;
    border-radius: 5px;
    margin: 5px 0 15px;
}
#comments {
    width: 50%;
    padding: 8px;
    border-radius: 5px;
}



.contact-form input[type=email] {
    width: 50%;
    padding: 8px;
    border-radius: 5px;
    margin: 5px 0 15px;
}

.contact-form input[type=submit] {
    width: 20%;
    padding: 8px;
    border-radius: 3px;
    background: #D0A348;
    color: #fff;
    margin: 20px 0;
    border: none;
    text-align: center;
    appearance: none;
    -moz-appearance: none;
   -webkit-appearance: none;
}

.terms-contact  p {
    font-weight: 600;
    font-style: 14px !important;
    width: 250px;
    display: inline-block;
    width: 250px;
}

.terms-contact label a {
    color: #e4a053;
    text-decoration: none;
}


.terms-contact label {
    position: relative;
    top: -5px;
}


.form-sucess, .form-error {
    color: #D0A348;
}

/* Temp contact section 
----------------------*/
.temp-form h2 {
    text-align: left;
    font-size: 2rem;
}
.temp-form h3 {
    text-align: left;
    font-size: 1.5rem;
}
.temp-form p {
    font-size: 1.25rem;
} 
#contact-hero {
    background-image: url(../img/contact-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    /* height: 83vh; */
}




    /* Footer */
    .footer-link {
        justify-content: center;
    }

    /*----About us----
    ------------------*/
    #about .about-btn a:hover {
        background-color: #fff;
        color: #000 !important;
    }

    /* ---- service page ----
    ------------------------- */ 
    #product .our-services .service-img {
       width: 100%;
       height: 530px;
    }
    #product .service-quote {
        width: 100%;
        height: 580px;
    }
 

    /* Contact page */
    .contact-temp h4 {
        font-size: 3rem;
    }
    .contact-temp p {
        font-size: 1.5rem;
    }

    
    #contact-pge .contact-form input[type=text] {
        width: 70%;
        padding: 8px;
        border-radius: 5px;
        margin: 5px 0 15px;
    }
    #contact-pge #comments {
        width: 70%;
        padding: 8px;
        border-radius: 5px;
    }
    
    
    
    #contact-pge .contact-form input[type=email] {
        width: 70%;
        padding: 8px;
        border-radius: 5px;
        margin: 5px 0 15px;
    }
    
    #contact-pge .contact-form input[type=submit] {
        width: 30%;
        padding: 8px;
        border-radius: 3px;
        background: #D0A348;
        color: #fff;
        margin: 20px 0;
        border: none;
        text-align: center;
        appearance: none;
        -moz-appearance: none;
       -webkit-appearance: none;
    }
    

    

       






}