@media screen and (min-width: 55rem) {

    :root {
        --backgroundColor: rgb(20, 17, 150);
        --tertiaryColor: rgb(53, 87, 121);
        --secondaryColor: rgba(51, 9, 99, 0.945);
        --primaryfont: 'PT Serif', serif;
        --headingsfont: 'Playpen Sans', cursive;
        --secondaryfont: 'Sofadi One';
    }

    body {
        display: grid;
        grid-template-columns: 24% 76%;
        grid-row: 1fr;
    }

    #menuItems {
        display: block;
        grid-column: 1;
        grid-row: 1 / 3;
        width: 24%;
        height: 100vh;
        background-color: rgba(198, 198, 224, 0.836);
        box-sizing: border-box;
    }


    #menuItems>ul {
        overflow: hidden;
        padding: 0 2rem;
        background-color: rgba(206, 206, 228, 0.849);
    }


    #menuItems #firstElement {
        padding-top: 9rem;
    }

    #menuItems li>a {
        font-size: 1.4rem;
    }

    #menuItems li>a:hover {
        font-size: 1.6rem
    }

    #menuItems li>a.wayFinder {
        padding: 0.5rem;
        margin-left: -0.5rem;
        background-color: navy;
        color: white;
        border: 3px solid rgb(6, 31, 100);
        border-radius: 14px;
        transition: color 0.5s, background-color 1s;
    }

    #menuItems li>a.wayFinder:hover {
        font-weight: 600;
        color: rgb(6, 31, 100);
        background-color: white;
    }

    .gradient {
        position: relative;
        height: 400px;
        align-content: center;
        background-image: linear-gradient(to bottom, rgba(238, 232, 232, 0.096), rgba(233, 227, 227, 0.158));
    }

    .gradient img {
        height: 400px;
    }


    .slidetext {
        font-size: 4.3rem;
        padding: 2rem 4rem;
        margin: auto 1rem;
        color: rgb(230, 230, 236)
    }

    .buyAndSell {
        position: sticky;
        top: 5.3rem;
        padding: 0.8rem 0 0 0;
        z-index: 5;
    }


    .intro {
        padding-left: 2rem;
    }

    .intro>p {
        padding-left: 20px;
    }

    header {
        position: fixed;
        right: 0rem;
        grid-column: 2/3;
        width: 76%;
        grid-row: 1;
        background-color: var(--tertiaryColor);
    }


    header>img {
        position: relative;
        top: 0rem;
        left: 1rem;
        height: 4rem;
        margin: 0.8rem 1rem;
    }

    .slidingText {
        font-size: 1.3rem;
        font-weight: 600;
        display: block;
        position: fixed;
        top: 1.7rem;
        left: 48%;
        width: 30%;
        overflow: hidden;
        height: 2.5rem;
        padding: 2px 1rem 0;
        z-index: 2;
        color: white;
        background-color: rgba(31, 40, 161, 0.979);
        border: 3px solid rgb(10, 10, 10);
        border-radius: 15px;
        box-sizing: border-box;
        line-height: 2rem;
    }

    .slidingText span {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        animation: slidingText 15s linear infinite;
        text-wrap: nowrap;
    }


    @keyframes slidingText {
        0% {
            transform: translateX(100%);
        }

        90% {
            transform: translateX(-350%);
        }

        100% {
            transform: translateX(-350%);
        }
    }




    header>div {
        position: fixed;
        top: 1.3rem;
        right: 3%;
        width: 120px;
        text-align: center;
    }


    header>div>p>a {
        width: 10%;
        font-size: 1rem;
        animation: grow 3s infinite;
    }

    @keyframes grow {
        0% {
            font-size: 1rem;
        }

        50% {
            font-size: 1.2rem;
        }

        100% {
            font-size: 1rem;
        }
    }

    .flipCards {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .flipCards h2 {
        grid-column: 1 / 3;
        margin-bottom: 1rem;
    }

    .aboutUs {
        padding: 4rem 3rem;
    }

    .sellingItems {
        padding: 1rem 3.5rem;
        margin-bottom: 8rem;
    }


    .freqAsked .question {
        padding: 1rem 3rem;
    }

    .freqAsked .response.active {
        padding: 1rem 4rem;
    }

    #menuBars {
        display: none;
    }

    main {
        position: relative;
        right: 0rem;
        width: 70%;
        margin: 0;
        padding: 0;
        width: 100%;
        grid-column: 2 / 3;
        grid-row: 1;
    }


    .Slider {
        height: 20rem;
        width: 60%;
        border-radius: 35px;
    }

    .Slider img {
        width: 100%;
        height: 20rem;
        margin: 0 auto;
        padding: 0;
        animation: slidestop 36s infinite;
        border: 0;
    }

    @keyframes slidestop {
        0% {
            transform: translateX(0%);
        }

        6% {
            transform: translateX(0%);
        }

        10% {
            transform: translateX(-100.5%);
        }

        20% {
            transform: translateX(-100.5%);
        }

        24% {
            transform: translateX(-201.1%);
        }

        40% {
            transform: translateX(-201.1%);
        }

        44% {
            transform: translateX(-302.4%);
        }

        60% {
            transform: translateX(-302.4%);
        }

        64% {
            transform: translateX(-403.7%);
        }

        80% {
            transform: translateX(-403.7%);
        }

        84% {
            transform: translateX(-505%);
        }

        100% {
            transform: translateX(-505%);
        }
    }

    .SliderTwo {
        height: 21rem;
        width: 80%;
        border-radius: 25px;
    }

    
    .SliderTwo img {
        width: 100%;
        height: 21rem;
        margin: 0 auto;
        padding: 0;
        animation: slidestopTwo 36s infinite;
        border: 0;
    }

    @keyframes slidestopTwo {
        0% {
            transform: translateX(0%);
        }

        6% {
            transform: translateX(0%);
        }

        10% {
            transform: translateX(-100.7%);
        }

        20% {
            transform: translateX(-100.7%);
        }

        24% {
            transform: translateX(-201.5%);
        }

        40% {
            transform: translateX(-201.5%);
        }

        44% {
            transform: translateX(-302%);
        }

        60% {
            transform: translateX(-302%);
        }

        64% {
            transform: translateX(-402.5%);
        }

        80% {
            transform: translateX(-402.5%);
        }

        84% {
            transform: translateX(-503%);
        }

        100% {
            transform: translateX(-503%);
        }
    }


    .sellingItems {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        font-size: 1.6rem;
        padding: 2rem;
    }

    .sellingItems img {
        height: auto;
        grid-row: 1 / 3;
        align-self: center;
        opacity: 0;
        transition: opacity 1s;
    }

    .sellingItems img.animate {
        animation: flyInLeft 1s ease-out;
        opacity: 1;
    }

    @keyframes flyInLeft {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(0%);
        }
    }

    .technetwork {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
        padding: 2rem 2rem 1rem;
    }

    .technetwork img {
        grid-column: 2;
        grid-row: 1 / 4;
        height: 22rem;
        align-self: center;
        padding: 0 1rem;
        margin: 0;
        opacity: 0;
        transition: opacity 1s;
    }

    .technetwork>img.animate {
        animation: flyInRight 1s ease-out;
        opacity: 1;
    }

    @keyframes flyInRight {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(0%);
        }
    }

    .technetwork P {
        font-size: 1.5rem;
        padding: 1rem;
        margin: 0;
    }

    .technetwork a {
        text-align: center;
    }

    footer {
        grid-column: 2 / 3;
    }

    .gridForSellSection {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: center;
        padding-top: 2rem;
    }

    .introText {
        padding-top: 2rem;
        align-self: center;
        grid-column: 1 / 2;
    }



    /*--------- Technicians Page Styling ---------*/

    .Slider {
        height: 300px;
    }

    .divForJoiningNetwork {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        padding: 4rem 2rem 1rem;
    }

    .divForJoiningNetwork img {
        margin: 0;
        border-radius: 25px;
        opacity: 0;
        transition: opacity 1s;
    }

    /*---------- the animation flyInLeft is defined above ----------*/

    .divForJoiningNetwork img.animate {
        animation: flyInLeft 1s ease-out;
        opacity: 1;
    }

    .divForJoiningNetwork .joinUs {
        margin: 0;
        justify-self: center;
        align-self: center;
    }

    .linkToContactPage {
        margin-bottom: 10rem;
    }

    /*--------- contact Page Styling ---------*/

    .heroImage img {
        height: 400px;
    }

    .trapezoid {
        border-bottom: 120px solid rgba(56, 214, 17, 0.938);
    }

    .secondImage img {
        height: 320px;
    }

    /*--------- sell Section Styling ---------*/

    .contactCardToSell {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
        padding: 2.5rem 1.5rem;
    }

    .contactCardToSell img {
        grid-row: 1 / 3;
        height: 250px;
        border-radius: 20px;
    }

    .contactCardToSell p {
        align-content: center;
    }

    /*--------- About Page Styling ---------*/

    .increasedMarginTop,
    .increasedMarginTop .backgroundImage {
        height: 400px;
    }

    .increasedMarginTop h1 {
        font-size: 3.4rem;
        padding-top: 4.5rem;
    }

    .increasedMarginTop p {
        font-size: 1.9rem;
        line-height: 3rem;
    }

    .visionSection,
    .purposeSection {
        padding: 3rem 0;
        width: 80%;
        margin: 0 auto;
    }

    .flex p {
        font-size: 1.5rem;
        font-weight: 550;
    }

    .aboutSection {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .aboutSection h2 {
        grid-column: 1 / 3;
        margin-bottom: 1.5rem;
    }

    .aboutSection .featuresToChooseUs {
        border-radius: 20px;
    }

    .ourImpact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        height: 400px;
        padding: 0 0 50px;
        margin: 4rem auto;
    }

    .ourImpact img {
        height: 450px;
    }

    .ourImpact h2 {
        grid-column: 1 / 3;
        margin-bottom: 30px;
    }

    .ourImpact .spanFourRowsInGrid {
        grid-row: 2 / 6;
        margin-left: 2rem;
    }

    .ourImpact #completedJobs,
    .ourImpact #noOfYears {
        align-self: self-end;
    }

    .ourImpact #completedJobs {
        margin-top: 2rem;
    }

    .ourImpact #noOfYears {
        margin-top: -3rem;
    }

    .ourImpact span {
        align-self: self-start;
        padding-top: 5px;
    }

}