header {

    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(0, 0, 0);
}

main {

    min-height: auto;
    background-color: rgb(22, 22, 22);
    padding-bottom: 100px;

    /* background-color: black; */
}

.title_Container {

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgb(0, 0, 0);
    background-attachment: fixed;
    background-blend-mode:overlay;

    height: 50vh;
    padding-inline: clamp(20px, 10vw, 100px);

    text-align: center;
    text-shadow: 1px 1px 20px hsla(170, 30%, 8%, 0.829);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: clamp(1rem, 4vw, 1.3rem);
}

h1 span{

    color: #20a5da;
}

/* intro */

.services_Intro {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: max(2vw, 3%);

    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;

    border-top: 4px #00b7ff solid;
}

.services_Heading {

    font-weight: 900;

    font-size: clamp(1rem, 8vw, 2rem);
    margin-bottom: 20px;
}

.intro_Description {

    font-size: clamp(1rem, 1.5vw + 0.5rem, 2rem);

}

.services_List {

    display: grid;
    grid-auto-flow: row;
    grid-template-columns:repeat(auto-fit, 1fr);
    padding: clamp(20px, 10vw, 100px);
    justify-content: center;
    align-items:center;
    gap: 60px;
}

.service_Container {

    width: clamp(100px, 90vw, 500px);
    height: 600px;

    background-color: rgb(12, 12, 12);
    /* background-color: rgb(19, 19, 19); */
    border-radius: 10px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;


}


.service_Description {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 1.3vw, 3rem);

    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.service_Description h3 {

    /* font-size: 24px; */
    display: flex;
    align-items: center;
    height: 40px;
    font-size: clamp(1rem, 1.3vw, 4rem);
    margin-top: clamp(1rem, 1.3vw, 3rem);
}

.service_Description p {
    max-height: 220px;
    padding: 0px 20px;
    overflow:hidden;
    /* font-size: 21px; */
    font-size: clamp(0.5rem, 0.4vw + 0.8rem, 2rem);
}

.learn_More {

    /* width: 150px;
    height: 50px; */
    padding: clamp(10px, 0.3px, 200px) clamp(25px, 1vw, 300px);
    /* font-size: 21px; */
    font-size: clamp(0.8rem, 1vw, 3.5rem);
    border-radius: 50px;
    font-weight: 900;
}

.img_Wrapper {

    height: max(20vw, 150px);
    width: 100%;
    background: rgb(26, 26, 26);
    overflow: hidden;
    

}

.thumbnail {

    /* Width: 100%; */
    width: 100%;
    transition: 400ms;
}


/* why choose us */

.why_Choose_Container {

    display: flex;
    flex-direction: column;
    align-items: center;

    width: clamp(100px, 90%, 700px);
    margin: clamp(10px, 5vh, 100px) auto;
    

    border-radius: 30px;

    background-attachment: fixed;
    background-size: cover;
    background-image: url(https://cdn.prod.website-files.com/6727558e5c774a0b63d63d12/67bb3e1f23b017da45589047_hero-bg.avif);

    color:white;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.backdrop_Styling {

    padding: clamp(10px, 1.5vw, 100px);
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
}

.backdrop_Styling > div > p {

    background-color: rgba(192, 192, 192, 0.384);
    border-radius: 20px;

    width: max-content;
    display: inline-block;
    padding: 8px  16px;
    backdrop-filter: blur(12px);
    font-size: clamp(00.5rem, 6vw, 1rem);

}

.why_Choose_Centerer {

    display: flex;
    justify-content: center;
    align-items: center;

    flex-grow: 1;

}

.why_Card_Container {

    display: grid;
    grid-template-columns: repeat(1, minmax(auto, 1fr));
    row-gap: 20px;
    column-gap: 20px;


}

.why_Choose_Card {

    padding: 10px;
    /* height: 15vh; */
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(192, 192, 192, 0.384);
    border-radius: 20px;
    backdrop-filter: blur(12px);
}

.why_Choose_Desc_Title {

    font-size: clamp(0.5rem, 8vw, 1.5rem);
}

.why_Choose_Desc {

    font-size: clamp(0.5rem, 4vw, 1rem);
}

.why_Choose_Heading {

    font-size: clamp(1.5rem, 8vw, 3rem);
}

.why_Choose_Titiling {

    height: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;

    
}

/* quote section */

.quote_Section {

    height: clamp(min-content, 1vw, 800px);
    background-color: rgb(12, 12, 12);
    display: flex;
    justify-content: center;

    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

.quote_Container {
    display: flex;
    width: 100%;
    padding: clamp(30px, 1vw, 50px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.img_Quote_Container {

    width: clamp(100px, 80vw, 500px);
    height: clamp(100px, 80vw, 500px);
    display: flex;
    justify-content: center;
    align-items:start;
    border-radius: 30px;

    overflow: hidden;
}

.img_Quote {

    width: 100%;
}

.quote_Desc_Positioner {

    display: flex;
    align-items: center;
}

.quote_Desc_Container {

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    gap: clamp(0.5rem, 5vw, 1rem);

}

.quote_Desc_Container h2 {

    font-size: clamp(1.5rem, 7.5vw, 2.5rem);
    /* margin-bottom: 10px; */

}

.quote_Desc_Container p {

    font-size: clamp(0.3rem, 4.5vw, 1.25rem);
    /* margin-bottom: 20px; */

}

.quote_Contact_Btn {

    padding:  clamp(5px, 0.8vw, 25px) clamp(10px, 2.5vw, 50px);
    font-size: clamp(0.5rem, 4vw, 1.4rem);
    border-radius: 30px;

}


@media  (min-width: 800px) {


    
    /* Intro Section */

    .services_Intro {

        width: 100%;
        padding-bottom: 0;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        color: white;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
    
        border-top: 4px #00b7ff solid;
    }
    
    .services_Heading {
    
        font-size: clamp(0.5rem, 4.3vw, 3rem);
        margin-bottom: 20px;
    }
    
    .intro_Description {
    
        font-size: 21px;
        width: 800px;
    
    }
    
    .services_List {

        display: grid;
        grid-auto-flow: row;
        grid-template-columns:repeat(2, max-content);
        padding: clamp(20px, 5vw, 30px);
        justify-content: center;
        align-items:start;
        gap: 5vh;
    }
    
    .service_Container {
    
        /* height: 550px;
        width: 550px; */
        width: clamp(100px, 40vw, 500px);

        background-color: rgb(12, 12, 12);
        /* background-color: rgb(19, 19, 19); */
        border-radius: 10px;
        padding: 20px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    
    }
    
    .img_Wrapper {
    
        max-height: 200px;
        width: 100%;
        background: rgb(26, 26, 26);
        overflow: hidden;
        
    
    }
    
    .service_Description {
    
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    
        color: white;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
    }
    

    .service_Description h3 {
    
        /* font-size: 24px; */
        display: flex;
        align-items: center;
        font-size: clamp(1rem, 1.3vw, 4rem);
    }
    
    .service_Description p {
        max-height: 220px;
        padding: 0px 20px;
        overflow:hidden;
        /* font-size: 21px; */
        font-size: clamp(0.8rem, 0.4vw + 0.8rem, 1rem);
    }
    
    .learn_More {
    
        /* width: 150px;
        height: 50px; */
        padding: clamp(10px, 0.5vw, 200px) clamp(25px, 1vw, 300px);
        /* font-size: 21px; */
        font-size: clamp(1rem, 1vw, 3.5rem);
        border-radius: 2vw;
        font-weight: 900;
    }
    
    .thumbnail {
    
        width: 150%;
        transition: 400ms;
    }
    
    /* Why Choose Us */

    .why_Choose_Container {

        display: flex;
        flex-direction: column;
        align-items: center;

        width: clamp(700px, 90%, 1400px);
        margin: clamp(10px, 5vh, 100px) auto;
        

        border-radius: 30px;

        background-attachment: fixed;
        background-size: cover;
        background-image: url(https://cdn.prod.website-files.com/6727558e5c774a0b63d63d12/67bb3e1f23b017da45589047_hero-bg.avif);

        color:white;
        font-family: Arial, Helvetica, sans-serif;
        overflow: hidden;
    }

    .backdrop_Styling {

        padding: clamp(10px, 1.5vw, 100px);
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-grow: 1;
    }

    .backdrop_Styling > div > p {

        background-color: rgba(192, 192, 192, 0.384);
        border-radius: 20px;

        width: max-content;
        display: inline-block;
        padding: 8px  16px;
        backdrop-filter: blur(12px);
        font-size: clamp(00.5rem, 6vw, 1rem);

    }

    .why_Choose_Centerer {

        display: flex;
        justify-content: center;
        align-items: center;

        flex-grow: 1;

    }

    .why_Card_Container {

        display: grid;
        grid-template-columns: repeat(2, minmax(auto, 1fr));
        row-gap: 20px;
        column-gap: 20px;


    }

    .why_Choose_Card {

        padding-inline: clamp(10px, 5%, 100px);
        width: 100%;
        display: flex;
        align-items: baseline;
        background-color: rgba(192, 192, 192, 0.384);
        border-radius: 20px;
        backdrop-filter: blur(12px);
    }

    .why_Choose_Desc_Title {

        font-size: clamp(0.5rem, 8vw, 1.3rem);
    }

    .why_Choose_Desc {

        font-size: clamp(0.5rem, 4vw, 1rem);
    }

    .why_Choose_Heading {

        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }

    .why_Choose_Titiling {

        height: 200px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
        text-align: center;

        
    }

    /* quote section */

    /* quote section */

.quote_Section {

    height: clamp(min-content, 1vw, 800px);
    background-color: rgb(12, 12, 12);
    display: flex;
    justify-content: center;

    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

.quote_Container {
    display: flex;
    width: 100%;
    padding: clamp(30px, 1vw, 50px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.img_Quote_Container {

    width: clamp(100px, 80vw, 500px);
    height: clamp(100px, 80vw, 500px);
    display: flex;
    justify-content: center;
    align-items:start;
    border-radius: 30px;

    overflow: hidden;
}

.img_Quote {

    width: 100%;
}

.quote_Desc_Positioner {

    display: flex;
    align-items: center;
}

.quote_Desc_Container {

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    gap: clamp(0.5rem, 5vw, 1rem);

}

.quote_Desc_Container h2 {

    font-size: clamp(1.5rem, 7.5vw, 2.5rem);
    /* margin-bottom: 10px; */

}

.quote_Desc_Container p {

    font-size: clamp(0.3rem, 4.5vw, 1.25rem);
    /* margin-bottom: 20px; */
    max-width: 80%;

}

.quote_Contact_Btn {

    padding:  clamp(5px, 0.8vw, 25px) clamp(10px, 2.5vw, 50px);
    font-size: clamp(0.5rem, 4vw, 1.4rem);
    border-radius: 30px;

}

    
}



@media  (min-width: 1600px) {

    h1 {

        font-size: clamp(2rem, 30vw, 4rem);

        /* transform: translate(0, -50px); */
    }
    
    /* Intro Section */

    .services_Intro {

        width: 100%;
        padding: 80px;
        padding-bottom: 0;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        color: white;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
    
        border-top: 4px #00b7ff solid;
    }
    
    .services_Heading {
    
        font-size: 46px;
        margin-bottom: 20px;
    }
    
    .intro_Description {
    
        font-size: 21px;
        width: 800px;
    
    }
    
    .services_List {

        display: grid;
        grid-auto-flow: row;
        grid-template-columns:repeat(3, max-content);
        padding: clamp(20px, 10vw, 100px);
        justify-content: space-evenly;
        align-items:start;
    }
    
    .service_Container {
    
        /* height: 550px;
        width: 550px; */
        width: clamp(100px, 25vw, 550px);

        background-color: rgb(12, 12, 12);
        /* background-color: rgb(19, 19, 19); */
        border-radius: 10px;
        padding: 20px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    
    }
    
    .img_Wrapper {
    
        height: 42%;
        width: 100%;
        background: rgb(26, 26, 26);
        overflow: hidden;
        
    
    }
    
    .service_Description {
    
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    
        color: white;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        gap: unset;

        height: clamp(300px, 40vw, 350px);
    }
    

    .service_Description h3 {
    
        /* font-size: 24px; */
        display: flex;
        align-items: center;
        font-size: clamp(1rem, 1.3vw, 4rem);
        margin-top: unset;
        height: 60px;
    }
    
    .service_Description p {
        max-height: 220px;
        padding: 0px 20px;
        overflow:hidden;
        
        /* font-size: 21px; */
        font-size: clamp(0.8rem, 0.4vw + 0.8rem, 1rem);
    }
    
    .learn_More {
    
        /* width: 150px;
        height: 50px; */
        padding: clamp(10px, 0.5vw, 200px) clamp(25px, 1vw, 300px);
        /* font-size: 21px; */
        font-size: clamp(1rem, 1vw, 3.5rem);
        border-radius: 2vw;
        font-weight: 900;
    }
    
    .thumbnail {
    
        Width: 100%;
        transition: 400ms;
    }
    
    /* why choose us */

    .why_Choose_Container {

        width: max-content;
        margin: clamp(10px, 5vh, 100px) auto;
    }

    .why_Choose_Centerer {
        max-width: max-content;
    }

    .backdrop_Styling {

        padding: clamp(10px, 5%, 200px);
        display: flex;
        gap: 50px;
        flex-direction: column;
        width: 100%;
        flex-grow: 1;
    }

    .backdrop_Styling > div > p {

        font-size: clamp(0.5rem, 6vw, 1.3rem);

    }

    .why_Choose_Desc_Title {

        font-size: clamp(0.5rem, 8vw, 1.5rem);
    }

    .why_Choose_Desc {

        font-size: clamp(0.5rem, 4vw, 1rem);
    }

    .why_Choose_Heading {

        font-size: clamp(2rem, 8vw, 3.7rem);
    }

    .why_Choose_Titiling {

        height: unset;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content:center;
        align-items: start;
        text-align: center;

        
    }

    /* Quote Section */

    .quote_Section {

        height: 700px;
        background-color: rgb(12, 12, 12);
        padding: 40px 80px;
        display: flex;
        justify-content: center;
    
        color: white;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .quote_Container {
        display: flex;
        flex-direction: row;
        max-height: 100%;
        width: 1200px;
        justify-content: center;
        gap: 60px;
    }
    
    .img_Quote_Container {
    
        height: 600px;
        width: 600px;
        min-width: 600px;
        min-height: 600px;
        display: flex;
        justify-content: center;
        align-items: top;
    
        overflow: hidden;
    }
    
    .img_Quote {
    
        height: 980px;
        width: auto;
    }
    
    .quote_Desc_Positioner {
    
        display: flex;
        align-items: center;
    }
    
    .quote_Desc_Container {
    
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 600px;
        text-align: center;
    
    }
    
    .quote_Desc_Container h2 {
    
        font-size: 46px;
        margin-bottom: 10px;
    
    }
    
    .quote_Desc_Container p {
    
        font-size: 20px;
        margin-bottom: 20px;
    
    }
    
    .quote_Contact_Btn {
    
        padding: 8px 16px;
    
    }
    
}

@media (min-width: 2000px) {
     h1 {

        font-size: clamp(4rem, 7vw, 8rem);

        /* transform: translate(0, -50px); */
    }
    
    /* Intro Section */

    .services_Intro {

        padding: clamp(80px,4vw, 160px);
        padding-bottom: 0;
        border-top: clamp(4px, 0.25vw, 10px) #00b7ff solid;
    }
    
    .services_Heading {
    
        font-size: clamp(3rem, 2.5vw, 6rem);
        margin-bottom: clamp(20px, 1vw, 40px);
    }
    
    .intro_Description {
    
        font-size: clamp(1.5rem, 1.2vw, 3rem);
        width: clamp(800px, 41vw, 1600px);
    
    }
    
    .services_List {

        grid-template-columns:repeat(3, max-content);
        padding: clamp(100px, 10vw, 200px);
    }
    
    .service_Container {
    

        width: clamp(500px, 25vw, 900px);
        height: unset;
        border-radius: clamp(10px, 0.5vw, 20px);
        padding: clamp(20px, 0.5vw, 40px);
    
    }
    
    .img_Wrapper {
    
        max-height: unset;
        height: clamp(200px, 25vw, 360px);
        width: 100%;
        
    
    }
    
    .service_Description {
    
        /* height: 950px; */
        height: unset;
        
    }
    

    .service_Description h3 {
    
        font-size: clamp(1rem, 1.3vw, 4rem);
        height: clamp(75px, 4vw, 150px);
        margin-top: 1px;
    }
    
    .service_Description p {
        /* max-height: clamp(220px, ); */
        max-height: unset;
        height: clamp(275px, 10vw, 550px);
        padding: 0px 20px;
        overflow:hidden;
        
        /* font-size: 21px; */
        font-size: clamp(1rem, 0.4vw + 0.8rem, 2.5rem);
    }
    
    .learn_More {
    
        /* width: 150px;
        height: 50px; */
        padding: clamp(10px, 0.5vw, 200px) clamp(25px, 1vw, 300px);
        /* font-size: 21px; */
        font-size: clamp(1rem, 1vw, 3.5rem);
        border-radius: 2vw;
        font-weight: 900;
        margin: clamp(10px, 0.5vw, 20px);
    }
    
    .thumbnail {
    
        Width: 100%;
        transition: 400ms;
    }
    
    /* why choose us */



    .why_Choose_Desc_Title {

        font-size: clamp(1.5rem, 8vw, 3rem);
    }

    .why_Choose_Desc {

        font-size: clamp(0.5rem, 4vw, 1rem);
    }

    .why_Choose_Heading {

        font-size: clamp(3rem, 4vw, 5rem);
    }


    .why_Choose_Container {
    
        width: clamp(650px, 80vw, 3500px);
        
        border-radius: clamp(30px, 1.5vw, 60px);
        font-size: clamp(1.5rem, 1vw, 3rem);

        width: max-content;
        margin: clamp(100px, 5.5vh, 200px) auto;
    }
    
    .backdrop_Styling {
    
        padding: clamp(100px, 10vw, 200px);

    }
    
    .backdrop_Styling > div > p {
    
        border-radius: clamp(20px, 1vw, 40px);
        padding: clamp(10px, 5%, 50px)  clamp(20px, 10%, 100px);
    
    }
    
    .why_Choose_Centerer {
    
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: clamp(50px, 5vw, 100px);
    
        flex-grow: 1;
    
    }
    
    .why_Card_Container {
    
        display: grid;
        grid-template-columns: repeat(2, minmax(auto, 700px));
        grid-template-rows: minmax(auto, max-content);
        gap: clamp(20px, 1.2vw, 40px);
    
    }
    
    .why_Choose_Card {
    
        padding: clamp(20px, 0.75vw, 30px);
        height: clamp(125px, 6.5vw, 250px);
        width: clamp(700px, 36.45vw, 1400px);
        border-radius: clamp(20px, 1.2vw, 40px);
        backdrop-filter: blur(12px);
    }
    
    
    .why_Choose_Desc {
    
        font-size: clamp(1.25rem, 4.5vw, 2.4rem);
    }
    
    
    .why_Choose_Titiling {
    
        /* height: clamp(200px, 10vw, 400px); */
        gap: clamp(10px, 0.6vw, 20px);
        align-items: center;
        font-size: clamp(1.25rem, 4.5vw, 2.4rem);
    }

    /* Quote Section */

    .quote_Section {

        height: clamp(700px, 36.45vw, 1400px);
        background-color: rgb(12, 12, 12);
        padding: clamp(40px, 2.2vw, 80px) clamp(80px, 2.2vw, 160px);
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .quote_Container {
        /* width: clamp(1260px, 66.5vw, 2520px); */
        width: unset;
        justify-content: center;
        gap: clamp(60px, 3.1vw, 120px);
    }
    
    .img_Quote_Container {
    
        max-width: unset;
        height: clamp(600px, 31vw, 1200px);
        width: clamp(600px, 31vw, 1200px);
    }
    
    .img_Quote {
    
        height: auto;
        width: 100%;
    }
    
    .quote_Desc_Positioner {
    
        display: flex;
        align-items: center;
    }
    
    .quote_Desc_Container {
    
        display: flex;
        flex-direction: column;
        align-items: center;
        width: clamp(600px, 31vw, 1200px);
        text-align: center;
        
    
    }
    
    .quote_Desc_Container h2 {
    
        font-size: clamp(3rem, 2.5vw, 6rem);
        margin-bottom: clamp(10px, 0.6vw, 20px);
    
    }
    
    .quote_Desc_Container p {
    
        font-size: clamp(1.25rem, 2vw, 2.5rem);
        margin-bottom: 20px;
        max-width: unset;
    
    }
    
    .quote_Contact_Btn {
    
        padding: clamp(8px, 0.4vw, 16px) clamp(16px, 0.8vw, 32px);
        font-size: clamp(1.5rem, 1.5vw, 3rem);
        border-radius: 30vw;
    
    }
}