:root {
    --brown:#684A2A;
    --heading-two: 40px;
    --card-titles: 25px;
    --text: 18px;
    --heading-one:60px;
    --mobile-heading-one:40px;
    --mobile-heading-two:30px;
    --mobile-text:14px;
    --new-colour:#38618C;
}
*,
*::before,
*::after {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Lato', sans-serif;
}
button {
    background-color:var(--new-colour) !important;
    border:2px solid var(--new-colour) ;
    border-radius:2rem;
    padding:0.5rem 1rem;
    font-weight:700;
    cursor:pointer;
    color:white;
}
section {
    overflow-x:hidden !important;
}
ul {
    list-style:none;
}
a {
    color:black;
    text-decoration: none;
}
header,
section,
main,
footer {
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}
.wrapper {
    width:100%;
    max-width:1440px;
    padding:6rem 4rem;
}
p {
    line-height:1.75;
}
h2 {
    text-align:center;
}
/**** Header *****/
header {
    position:fixed;
    background-color:#FFFFFF;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
}
.header-wrapper {
    width:100%;
    max-width:1440px;
    padding:1rem 4rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.header-wrapper ul {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    gap:2rem;
}
.header-wrapper img:nth-child(1) {
    width:150px;
}
.menu {
    width:50px;
    display:none;
}
@media (max-width:1050px) {
    .header-wrapper ul {
        display:none;
    }
    .menu {
        display:block;
    }
}
@media (max-width:700px) {
    .header-wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:552px) {
    .header-wrapper {
        padding-inline:1rem;
    }
}
/****** Hero *******/

main .wrapper {
    padding-top:16rem;
    padding-bottom:12.25rem;
    overflow:visible;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
video,
.rectangle {
    object-fit:cover;
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    max-height:1000px;
    pointer-events:none;
}
.rectangle {
    background-color:black;
    opacity:0.55;
    width:100%;
    height:100%;
    z-index:1;
}
.hero-content button {
    padding-inline:4rem;
    padding-block:1rem;
}
.hero-content {
    z-index:10;
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color:white;
    gap:1rem;
}
.hero-content p {
    width:100%;
    max-width:60ch;
    text-align:center;
}
h1 {
    color:white;
    font-size:var(--heading-one);
    width:100%;
    text-align:center;
    font-weight:700;
}

@media (max-width:864px) {
    h1 {
        font-size: 55px;
    }
}
@media (max-width:786px) {
    h1 {
        font-size: var(--mobile-heading-one);
    }
    br {
        display:none;
    }
    main .wrapper p {
        max-width:45ch;
     }
}
@media (max-width:700px) {
 main .wrapper {
    padding-inline:2rem;
 }
}
@media (max-width:500px) {
 main .wrapper {
    padding-inline:1rem;
    padding-top:13rem;
    padding-bottom:8rem;
 }
 main .wrapper p {
    font-size:var(--mobile-text);
 }
}

/***** Service ****/
.what-we-do-section .wrapper {
    display:flex;
    align-items: center;
    gap:2rem;
}
.what-we-do-section img {
    width:50% !important;
    border-radius:24px;
}
.what-we-do-titles {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    align-self:center;
    overflow:visible !important;
    width:50%;
}
.what-we-do-titles p:nth-of-type(2) {
    width:100%;
    text-align:left;
    font-weight:300 !important;
    margin-top:2rem;
}
.what-we-do-titles h2 {
    font-size:var(--heading-two);
    position:relative;
    overflow:visible !important;
}
.what-we-do-titles button {
    margin-top:2rem;
}
.line {
    position:absolute;
    top:80%;
    right:-5%;
    z-index:-1;
    width:150px;
}
.what-we-do-titles p {
    font-size:var(--text);
}
@media (max-width:1270px) {
    .what-we-do-titles p:nth-of-type(2) {
        margin-top:1rem;
    }
}
@media (max-width:1141px) {
    .what-we-do-titles button {
        margin-top:1rem;
    }
}
@media (max-width:1051px) {
    .what-we-do-section .wrapper {
        flex-direction: column;
    }
    .what-we-do-titles,
    .what-we-do-section img {
        width:100% !important;
    }
    .what-we-do-titles button {
        margin-top:2rem;
    }
    .what-we-do-titles p:nth-of-type(2) {
        margin-top:2rem;
    }
}
@media (max-width:700px) {
    .what-we-do-section .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    .what-we-do-section .wrapper {
        padding-inline:1rem;
    }
    .what-we-do-section h2 {
        font-size:var(--mobile-heading-two) !important;
    }
    .what-we-do-titles p:nth-of-type(2) {
        font-size:var(--mobile-text) !important;
    }
}
 





/********** First Text *****/
.first-text-section {
    background-color:var(--new-colour);
    color:white;
    padding-block:0;
}

.first-text-section .wrapper h2 {
    text-align:center;
    font-size:var(--heading-two);
    line-height:1.5;
    font-weight:300;
    padding-block:4rem;
}
strong {
    font-weight:700;
}
@media (max-width:1050px) {
    .first-text-section h2 {
        font-size:30px !important;
    }
}
@media (max-width:700px) {
    .first-text-section .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:649px) {
    .first-text-section h2 {
        font-size:25px !important;
    }
}
@media (max-width:500px) {
    .first-text-section .wrapper {
        padding-inline:1rem;
    }
    .first-text-section .wrapper h2 {
        font-size:var(--mobile-heading-two);
    }
}
/*********************** Why Us Cards */ 


.why-choose-us-section .wrapper {
    display:flex;
    align-items: center;
    justify-content: center;
    padding-inline:0;
}
.why-choose-us-image {
    border-radius:48px;
    padding:4rem;
    display:flex;
    flex-direction: column;
    gap:6rem;
    padding-top:4rem;
    
}
.why-choose-us-titles {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}







.why-choose-us-titles h2 {
    font-size:var(--heading-two);
    color:black;
    position:relative;
}
.why-choose-us-titles h2 .line {
    width:225px;
}






.why-choose-us-titles p {
    font-size:var(--text);
    color:black;
}
.why-choose-us-cards {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:1rem;
}
.why-choose-us-card {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding:2rem;
    gap:1rem;
    border-radius:24px;
    background-color:white;
}
.why-choose-us-card p:nth-of-type(1) {
    font-size:25px;
    font-weight:700;
}
.why-choose-us-card p:nth-of-type(2) {
    font-size:var(--text);
    font-weight:300;
}
@media (max-width:1229px) {
    .why-choose-us-cards {
        grid-template-columns: 1fr 1fr;
    }
    .why-choose-us-card:nth-child(1),
    .why-choose-us-card:nth-child(2) {
        margin-bottom:0;
    }
    .why-choose-us-card:nth-child(3) {
        place-self:center;
        grid-column: span 2;
        width:50%;
    }
}
@media (max-width:1050px) {
    .why-choose-us-cards {
        grid-template-columns: 1fr;
    }
    .why-choose-us-card:nth-child(1),
    .why-choose-us-card:nth-child(2) {
        margin-bottom:0;
    }
    .why-choose-us-card:nth-child(3) {
        place-self:center;
        grid-column: span 1;
        width:100%;
    }
}
@media (max-width:700px) {
    .why-choose-us-image {
        padding-inline:2rem !important;
    }
}
@media (max-width:500px) {
    .why-choose-us-image {
        padding-inline:1rem !important;
    }
   
    .why-choose-us-card p:nth-of-type(1) {
        font-size:25px;
    }
    .why-choose-us-card p:nth-of-type(2) {
        font-size:var(--mobile-text);
    }
    .why-choose-us-titles h2 {
        font-size:var(--mobile-heading-two);
    }
    .why-choose-us-titles p {
        font-size:var(--mobile-text);
    }

}
/***** Second Text *****/
.second-text-section {
    background-color:var(--new-colour);
    color:white;
}
.second-text-section .wrapper {
    display:flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    padding-block:12rem;
    
}
.second-text-section .wrapper h2 {
    font-size:var(--heading-two);
    font-weight:300;
}
@media (max-width:700px) {
    .second-text-section .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    .second-text-section .wrapper {
        padding-inline:1rem;
    }
    .second-text-section .wrapper h2 {
        font-size:var(--mobile-heading-two);
    }
}
/************** Our Work Section ****/

.our-work-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:6rem;
    
}

.image-titles {
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.image-titles h2 {
    font-size:var(--heading-two);
    position:relative;
}
.image-titles .line {
    width:125px;
}
.our-work-grid {
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:2rem;
   
}
.our-work-grid img {
    width:100%;
    border-radius:24px;
    aspect-ratio:1/1;
    object-fit:cover;
}
.our-work-section .wrapper a {
    align-self:center;
    margin-top:-6rem;
}
.our-work-section .wrapper button {
    align-self:center !important;
    padding:1rem 4rem;
    background-color:var(--brown);
    color:white;
    margin-top:2rem;
}

@media (max-width:750px) {
    .our-work-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width:700px) {
    .our-work-section .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:585px) {
   
  
    .our-work-image img {
        border-radius:24px;
    } 
}
@media (max-width:500px) {
    
   
    .our-work-section .wrapper {
        padding-inline:1rem;
    }
}

/********** Contact ************/
.contact-section {
    background-image: linear-gradient(#00000040, #00000040 100% ), url(justbuildit-tiny/IMG_4301.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.contact-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:6rem;
    padding:6rem 4rem;

}
.contact-titles {
    display:flex;
    width:100%;
    align-items: center;
    flex-direction: column;
}
.contact-titles h2 {
    font-size:var(--heading-two);
    color:white;
}
.contact-titles p {
    font-size:var(--text);
    color:white;
}
.contact-image {
    width:100%;
    
}
form {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:0.5rem;
    width:100%;
}
fieldset {
    border:none;
    display:flex;
    flex-direction: column;
    width:40%;
    align-items: flex-start;
    gap:0.5rem;
}
label {
    font-size:var(--text);
    font-weight:700;
    color:white;
}
input,
textarea {
    width:100%;
    border-radius:24px;
    border:none;
    background-color:#FFFFFF80;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding:0.5rem;
    font-size:var(--text);
}
input:focus,
textarea:focus {
    border:none;
    outline:none;
}
form button {
    background-color:var(--brown);
    color:white;
    padding:1rem 4rem;
    margin-top:1rem;
}
@media (max-width:1229px) {
    fieldset {
        width:50%;
    }
    .contact-image {
        background-position-x:-25rem;
    }
}
@media (max-width:1050px) {
    fieldset {
        width:60%;
    }
    .contact-image {
        background-position-x:-30rem;
    }
}
@media (max-width:918px) {
    fieldset {
        width:100%;
    }
    .contact-image {
        background-position-x:-45rem;
    }
}
@media (max-width:714px) {
    .contact-image {
        background-position-x: -50rem;
    }
}
@media (max-width:700px) {
    .contact-section .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:594px) {
    .contact-image {
        background-position-x: -60rem;
    }
}
@media (max-width:500px) {
    .contact-titles p {
        font-size:var(--mobile-text);
    }
    .contact-titles h2 {
        font-size:var(--mobile-heading-two);
    }
    label {
        font-size:var(--mobile-text);
    }
    .contact-section .wrapper {
        padding-inline:1rem;
    }
    .contact-image {
        padding-inline:1rem;
    }
    .contact-image button {
        font-size:var(--mobile-text);
        padding-inline:2rem;
        width:100%;
    }
}
@media (max-width:360px) {
    .contact-image {
        background-position-x: -70rem;
    }
}
/***** Footer *****/
footer .wrapper {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer-bottom {
    border-top:1px solid black;
    width:100%;
    display:flex;
    justify-content: space-between;
    padding-block:2rem;
}
.footer-top {
    display:flex;
    width:100%;
    justify-content: space-between;
    padding-block:2rem;

}
.footer-top ul {
    display:flex;
    align-items: center;
    width:100%;
    justify-content: flex-end;
    gap:2rem;
}
.social-icons {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    gap:1rem;
    width:25%;
}
.logo {
    width:25%;
}
.social-icons img {
    width:50px;
}
.social-icons img:nth-child(2) {
    width:35px;
}
footer ul li {
    width:max-content;
}
@media (max-width:1050px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
        gap:4rem;
    }
    .footer-top ul {
        flex-direction: column;
        align-items: center;
    }
    .logo,
    .social-icons,
    .footer-top ul {
        width:100%;
        display:flex;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width:750px) {
    .footer-bottom {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center !important;
        gap:4rem;
    }
}
@media (max-width:700px) {
    .footer .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    footer li,
    footer p  {
        font-size:var(--mobile-text);
    }
    footer .wrapper {
        padding-inline:1rem;
    }
}

button:hover {
    background-color:var(--brown);
    transition:0.5s;
    color:white;
}
button {
    transition:0.5s;
}

.wrapper {
    position:relative;
}
.watermark {
    font-size:200px !important;
    font-weight:900;
    letter-spacing:0rem !important;
    opacity:0.05;
    position:absolute;
    line-height:1 !important;
    pointer-events:none;
    z-index:0 !important;
    color:white;
}
.intro-section {
    position:relative !important;
    z-index:100!important;
    margin-top:-1rem;
}

.intro-section .wrapper {
    position:relative !important;
    z-index:100 !important;
    overflow-y:hidden !important;
}
.intro-section .watermark {
    font-weight:900;
    font-size:300px !important;
    left:25%;
    letter-spacing: 1rem !important;
    top:50%;
    border:2px solid green !important;
    transform: translate(-50%, -50%);
}
.testimonials-titles {
    position:relative;
}
.testimonials-titles .watermark {
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}
.first-text-section .watermark {
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-size:300px !important;
}
.second-text-section .watermark {
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);

}
/*********/
.intro-section {
    background-color:var(--new-colour);
    color:white;
    
}
.intro-section .wrapper {
    display:flex;
    align-items: flex-start;
    justify-content: space-between;
    width:100%;
  
}
.intro-section p {
    font-weight:400;
    width:47.5%;
}
.intro-section h2 {
    font-size:var(--mobile-heading-two)
}

@media (max-width:1050px) {
    .intro-section .wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap:2rem;
    }
    .intro-section p {
        width:100%;
    }
}
@media (max-width:700px) {
    .intro-section .wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    .intro-section .wrapper {
        padding-inline:1rem;
    }
    .intro-section p {
        font-size:var(--mobile-text);
    }
}



/***********************/
.dropdown {
    position:relative !important;
    display:none;
    z-index:10000000000000000000000 !important;
    overflow-x:visible !important;


    
}
.dropdown-menu {
    position:absolute;
    right:0;
    top:calc(100% + 0.5rem);
    padding:1.5rem;
    background-color:white;
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.1);
    display:grid;
    grid-template-columns:1fr 1fr;
    width:max-content;
    opacity:0;
    transform:translateY(-1rem);
    transition:opacity 0.5s, transform 0.5s;
    pointer-events:none;
    gap:2rem;
    border-radius:24px;

   
}
.dropdown-heading > a {
    font-weight:500 !important;
}
.dropdown-links {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}
.dropdown-links a {
    font-weight:500 !important;
}
.div {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}

.dropdown.active > .link + .dropdown-menu {
    opacity:1;
    transform:translateY(0);
    pointer-events:all;
    transition:opacity 0.5s, transform 0.5s;

}
.menu + .dropdown-menu {
    padding-block:2rem;
}
.dropdown-heading > p {
    font-weight:700 !important;
}
.dropdown > a {
    font-weight:500 !important;
}
.menu {
    width:50px !important;
    display:none;
}
@media (max-width:1050px) {
    .menu {
        display:block;
        cursor:pointer;
    }
    nav {
        display:none;
    }
    .dropdown {
        displaY:block;
    }
}
@media (max-width:324px) {
    .dropdown-menu {
        grid-template-columns: 1fr;
    }
}
/***********************/

.blue {
    color:var(--new-colour) !important;
    font-weight:700;
}
.footer-bottom {
    align-items:flex-end;
    padding-block:2rem;
}

.author-wrapper img {
    width:100px;
}
.author-wrapper p {
    line-height:1;
}
.author-wrapper a {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap:0.75rem;
}
header {
    z-index:1000000000000000000000;
}