*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#header{
    background-color: rgb(240, 228, 214);
    color: rgb(81, 60, 41);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.7rem;
    z-index: 10;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

header{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.5% 1% 0.5% 1%;  /*0.5% 5% 0.5% 2%*/
}

.brand{
    display: flex;
    align-items: center;
    width: 55%;
    line-height: 2rem;
}

#logo{
    width: 7rem;
}

#CompName{
    margin-left: 5%;
}

h1{
    font-size: 2rem;
    white-space: nowrap;
    font-weight: 700;
}

.prem-hardware{
    color: rgb(179, 114, 59);
    font-weight: 600;
    font-size: 1.5rem;
}

nav{
    display: flex;
    align-items: center;
    justify-content: center;
}

.navlinks{
    margin-right: 2.5vw;
    text-decoration: none;
    font-size: 1.2rem;
    color: rgb(81, 60, 41);
    font-weight: 600;
    white-space: nowrap;
}
.navlinks:hover{
    color: rgb(171, 101, 44);
}
.navlinks:active{
    color: rgb(255, 255, 255);
}

.getquote{
    color: rgb(255, 255, 255);
    background-color: rgb(179, 114, 59);
    border: 0.14rem solid rgb(81, 60, 41);
    border-radius: 0.6rem;
    font-size: 0.9rem;
    cursor: pointer;
    width: 8.6rem;
    height: 2.8rem;
    white-space: nowrap;
    /* margin-right: 2rem; */
}
.getquote:hover{
    background-color: rgb(189, 127, 76);
    border: 0.15rem solid rgb(81, 60, 41);
}

.heroSection{
    margin-top: 4.7rem;
    height: 45vw;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.heroSection::before{
    background-image: url('Non-product images/background_Image.png');
    background-size: cover;
    position: absolute;
    inset: 0;
    opacity: 0.5;
    content: '';
}

.heroSection_content{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-left: 4%;
    isolation: isolate;
    height: 60%;
}

.heroSection_premium{
    font-size: 3.5rem;
    font-weight: 600;
    width: 100%;
    max-width: 45rem;
    line-height: 3.5rem;
    color: rgb(81, 52, 27);
}

.heroSection_info{
    font-size: 1.3rem;
    width: 100%;
    max-width: 42rem;
    color: rgb(69, 42, 19);
}

.heroSection_buttons{
    margin-top: 3%;
}

.product_button{
    margin-right: 2rem;
    font-size: 1.15rem;
    width: 13.5rem;
    height: 3.6rem;
}

.request_button{
    font-size: 1.15rem;
    width: 13.5rem;
    height: 3.6rem;
    color: rgb(179, 114, 59);
    background-color: rgb(240, 228, 214);
    border: 0.14rem solid rgb(134, 119, 106);
}

.request_button:hover{
    background-color: rgb(237, 220, 201);
    border: 0.15rem solid rgb(134, 119, 106);
}

.post-herosection{
    background-color: rgb(189, 127, 76);
    padding: 2rem 0rem;
}

.four-trust-points{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 2vw;
    color: rgb(237, 220, 201);

}

.four-trust-points div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.four-trust-points h2{
    font-size: 2.5rem;
    font-weight: 500;
}

.home-main-content{
    padding: 7rem 5vw;
    background-color: rgb(237, 232, 225);
    color: rgb(140, 70, 10);
}

.why-amd{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
    margin-bottom: 6rem;
}

.why-amd-content{
    align-self: center;
}

.why-amd-content div{
    border-left: 0.3rem solid rgb(189, 127, 76);
    padding-left: 1.5vw;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.why-amd-content h2{
    font-size: 3rem;
    font-weight: 600;
    line-height: 3rem;
    margin-bottom: 1.5rem;
    color: rgb(107, 59, 20);
}

.why-amd-content p{
    font-size: 1.1rem;
}

.why-amd-img{
    display: flex;
    align-items: center;
}

.why-amd-img img{
    width: 100%;
    box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.1);
}

.key-points{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
    margin: 0rem 1rem;
}

.single-key-point{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border-radius: 1rem;
}

.single-key-point:hover{
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
}

.single-key-point div{
    font-size: 1.8rem;
    background-color: rgb(228, 182, 144);
    border-radius: 50%;
    padding: 1rem;
}

.single-key-point h3{
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(107, 59, 20);
    text-wrap: nowrap;
}

.single-key-point p{
    font-size: 1.1rem;
    text-align: center;
}


/* Contact Page*/

.contact-heroSection{
    margin-top: 4.7rem;
    width: 100%;
    height: 19rem;
    background-color: rgb(81, 60, 41);
    padding: 4.2rem 4rem 2rem 9rem;
    color: rgb(230, 216, 198);
    font-size: 1.2rem;
}

.get-in-touch{
    border-left: 0.3rem solid rgb(197, 166, 127);
    padding-left: 1rem;
    margin-bottom: 2rem;
}

.contact-team{
    font-size: 3rem;
    margin-bottom: 0.7rem;
    color: rgb(223, 221, 217);
}

.contact-heroSection p{
    line-height: 1.7rem;
}

.contact-info-section{
    background-color: rgb(237, 232, 225);
    padding: 5rem 2rem 2rem 2rem;
    min-height: 100vh;
    height: auto;
    display: flex;
    justify-content: center;
} 

.layout-wrapper{
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
}

.info-form{
    display: flex;
    justify-content: space-between;
}

.info{
    display: flex;
    flex-direction: column;
}

.info-box{
    display: flex;
    padding: 2rem;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
    background-color: rgb(246, 240, 233);
    border-radius: 0.8rem;
    color: rgb(81, 60, 41);
}

.info-box-icon{
    background-color: rgb(237, 205, 179);
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1.2rem;
    border-radius: 0.6rem;
}

.info-box-icon i{
    font-size: 1.4rem;
}

.info-box-content h3{
    font-size: 1.2rem;
    line-height: 2.3rem;
    color: rgb(71, 50, 32);
}

.info-box-content p{
    line-height: 1.4rem;
}

.form{
    background-color: rgb(246, 240, 233);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 0.8rem;
    flex: 1;
    width: 100%;
    margin-left: 2rem;
    padding: 2rem;
    max-width: 900px;
    color: rgb(81, 60, 41);
}

.form-heading{
    margin-bottom: 2.5rem;
}

.form-heading div{
    border-left: 0.3rem solid rgb(197, 166, 127);
    padding-left: 1rem;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
}

.form-heading h3{
    font-size: 2rem;
    color: rgb(71, 50, 32);
}

.two-input-boxes{
    display: flex;
    flex-wrap: wrap;
    column-gap: 10%;
}

.form-input-boxes{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.form-input-boxes label{
    margin-bottom: 0.7rem;
    font-size: 1.2rem;
}

.form-input-boxes input{
    height: 3rem;
    min-width: 270px;
    margin-bottom: 2.5rem;
    padding-left: 1rem;
}

.user-query textarea{
    height: 15rem;
    padding: 1rem;
    margin-bottom: 4rem;
}

.all-input-boxes{
    border-radius: 0.6rem;
    border: 0.09rem solid rgb(110, 72, 41);
}

.all-input-boxes:focus{
    outline: none;
    border: 0.15rem solid rgb(110, 72, 41);
}

.submit-button{
    height: 3rem;
    width: 100%;
    border-radius: 0.6rem;
    background-color: rgb(148, 85, 33);
    color: rgb(255, 247, 235);
    border: none;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.submit-button:hover{
    background-color: rgb(110, 72, 41);
}

.submit-button i{
    margin-right: 0.8vw;
}

.required-field-symbol{
    text-align: center;
}

.immediate-assistance{
    background-color: rgb(81, 60, 41);
    border-radius: 0.6rem;
    margin: 5rem auto 3rem auto;
    padding: 1.5rem;
    text-align: center;
    color: rgb(235, 219, 195);
    align-self: center;
    width: 100%;
}

.immediate-assistance h3{
    font-size: 2rem;
    margin-bottom: 1rem;
}

.immediate-assistance p{
    font-size: 1.2rem;
    margin-bottom: 1.7rem;
}

.phone-email-links button{
    border-radius: 0.6rem;
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
}

.phone-email-links i{
    margin-right: 0.6rem;
}

.phone-link button{
    margin-right: 1.4rem;
    background-color: rgb(246, 240, 233);
    color: rgb(81, 60, 41);
}

.phone-link button:hover{
    background-color: rgb(247, 227, 205);
}

.email-link button{
    color: rgb(255, 247, 235);
    background-color: rgb(148, 85, 33);
}

.email-link button:hover{
    background-color: rgb(133, 74, 26);
}

footer{
    width: 100%;
}

.footer-to-top{
    width: 100%;
    height: 3rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(81, 60, 41);
    color: rgb(235, 219, 195);
}

.footer-section{
    height: auto;
    padding: 3rem 4rem;
    background-color: rgb(91, 67, 47);
    color: rgb(241, 223, 195);
}

.footer-content{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3vw;
    font-size: 1.1rem;
}

.footer-content h4{
    font-size: 1.5rem;
    margin-bottom: 0.9rem;
    color: rgb(247, 238, 224);
}

.about-company{
    grid-column: 1/3;
    width: 85%;
}

.about-company p{
    line-height: 2rem;
}

.footer-link-names{
    display: flex;
    flex-direction: column;
    line-height: 2rem;
}

.footer-link-names a{
    text-decoration: none;
    color: rgb(235, 219, 195);
    width: max-content;
}

.footer-link-names a:hover{
    color: rgb(255, 255, 255);
}

.footer-contact-details div{
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.footer-contact-details i{
    color: rgb(244, 240, 235);
}

.rights-reserved{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    border-top: 0.2rem solid rgb(133, 74, 26);
    font-size: 0.8rem;
}


/* About Us */

.about-intro-section::before{
    background-image: url('Non-product images/skilled craftsmen bg img.png');
}

.intro-section-content{
    padding-left: 6%;
    height: 50%;
}

.establishment-year{
    border: 0.2rem solid rgb(138, 90, 51);
    padding: 0.7rem 1rem;
    font-size: 1.2rem;
    color: rgb(120, 69, 18);
    max-width: max-content;
    border-radius: 0.8rem;
    font-weight: 700;
}

.intro-section-content h2{
    font-size: 3.7rem;
    width: 100%;
    max-width: 45rem;
    font-weight: 650;
    color: rgb(89, 47, 6);
}

.intro-section-content p{
    font-size: 1.3rem;
    color: rgb(120, 69, 18);
    width: 100%;
    max-width: 42rem;
}

.story-section{
    max-width: 1400px;
    justify-self: center;
}

.AMD-story{
    align-self: center;
}

.story-heading{
    border-left: 0.3rem solid rgb(189, 127, 76);
    padding-left: 1.5vw;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    font-weight: 700;
}

.AMD-story h3{
    font-size: 3rem;
    font-weight: 600;
    line-height: 3rem;
    margin-bottom: 1.7rem;
    color: rgb(107, 59, 20);
}

.AMD-story p{
    font-size: 1.15rem;
    margin-bottom: 1.7rem;
    line-height: 1.8rem;
}

.spacing-div{
    margin-top: 8rem;
    border-bottom: 0.15rem solid rgb(224, 203, 186);
    box-shadow: 0px 3px 10px rgb(179, 157, 139);
}

.AMD-driving-values{
    margin-top: 7rem;
}

.driving-values-heading{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.3rem;
}

.core-values{
    max-width: max-content;
    font-size: 1.3rem;
}

.core-values-content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.two-core-values{
    display: flex;
    max-width: 1400px;
    width: 100%;
    justify-content: space-evenly;
    margin-bottom: 2.3rem;
}

.one-core-value{
    width: 30vw;
}

.one-core-value h4{
    text-wrap: nowrap;
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(107, 59, 20);
}

.journey-content{
    display: flex;
    flex-direction: column;
    gap: 3vw;
    margin: 0vw 5vw 8rem 15vw;
}

.single-milestone{
    display: flex;
    gap: 3vw;
}

.year{
    border-radius: 0.6rem;
    background-color: rgb(215, 129, 58);
    color: rgb(107, 59, 20);
    font-size: 1.3rem;
    padding: 0.8rem 1.6rem;
    max-height: max-content;
}

.milestone-content{
    border-left: 0.25rem solid rgb(234, 190, 155);
    padding-left: 2vw;
}

.milestone-content:hover{
    border-left: 0.25rem solid rgb(189, 127, 76);
}

.milestone-content h4{
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: rgb(90, 48, 14);
}

.milestone-content p{
    font-size: 1.2rem;
}

.Achievement-bar{
    background-color: rgb(135, 95, 62);
}


/*Products*/
.development-phase{
    margin-top: 4.7rem;
    color: rgb(90, 48, 14);
    background-color: rgb(237, 232, 225);
    padding: 5rem 4rem;
    font-size: 3rem;
    font-weight: 500;
}

.development-content{
    font-size: 1.5rem;
    color: rgb(104, 64, 32);
    font-weight: 400;
    line-height: 2.5rem;
}

.development-heading{
    margin-bottom: 2rem;
}


/* ===========================
   Responsive Design (<950px)
=========================== */

@media (max-width:950px){

    /* Header */

    #header{
        height: auto;
        position: relative;
    }

    header{
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .brand{
        width:100%;
        justify-content:center;
    }

    nav{
        width:100%;
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    .navlinks{
        margin-right:0;
    }


    /* Hero */

    .heroSection{
        margin-top:0;
        height:auto;
        padding:70px 25px;
    }

    .heroSection_content{
        padding:0;
        height:auto;
        gap:25px;
    }

    .heroSection_premium{
        width:100%;
        font-size:2.8rem;
        line-height:3.2rem;
    }

    .heroSection_info{
        width:100%;
        font-size:1.1rem;
    }

    .heroSection_buttons{
        display:flex;
        flex-wrap:wrap;
        gap:15px;
    }


    /* Achievement Bar */

    .four-trust-points{
        grid-template-columns:repeat(2,1fr);
        row-gap:35px;
    }


    /* Home */

    .why-amd{
        grid-template-columns:1fr;
    }

    .why-amd-content h2{
        font-size:2.4rem;
        line-height:2.8rem;
    }

    .key-points{
        grid-template-columns:1fr;
    }


    /* Contact */

    .contact-heroSection{
        padding:4rem 2rem;
        height:auto;
        margin-top: 0;
    }

    .contact-team{
        font-size:2.5rem;
    }

    .info-form{
        flex-direction:column;
    }

    .form{
        margin-left:0;
        margin-top:2rem;
    }

    .two-input-boxes{
        flex-direction:column;
        gap:0;
    }

    .form-input-boxes input{
        min-width:100%;
    }


    /* About */

    .intro-section-content h2{
        width:100%;
        font-size:2.8rem;
    }

    .intro-section-content p{
        width:100%;
    }

    .two-core-values{
        flex-direction:column;
        align-items:center;
        gap:25px;
    }

    .one-core-value{
        width:100%;
        max-width:500px;
    }

    .journey-content{
        margin:0;
    }


    /* Footer */

    .footer-content{
        grid-template-columns:1fr;
        text-align:center;
    }

    .about-company{
        width:100%;
        grid-column:auto;
    }

    .footer-link-names{
        align-items:center;
    }

    .footer-contact-details div{
        justify-content:center;
    }
}


@media (max-width:600px){

    #logo{
        width:5rem;
    }

    h1{
        font-size:1.5rem;
    }

    .prem-hardware{
        font-size:1rem;
    }

    .heroSection_premium{
        font-size:2rem;
        line-height:2.5rem;
    }

    .heroSection_info{
        font-size:1rem;
    }

    .product_button,
    .request_button,
    .getquote{
        width:100%;
    }

    .heroSection_buttons{
        flex-direction:column;
    }

    .four-trust-points{
        grid-template-columns:1fr;
    }

    .contact-team{
        font-size:2rem;
    }

    .intro-section-content h2{
        font-size:2.2rem;
    }

    .AMD-story h3{
        font-size:2rem;
        line-height:2.4rem;
    }

    .single-milestone{
        flex-direction:column;
        gap:15px;
    }

    .footer-section{
        padding:2rem;
    }
}