/*Extra Large Screens*/
@media screen and (min-width:1200px){
    /* BUilding services Styling */
    #buildingServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: #0f0c2c;
        color: white;
    }

    #buildingServices h1 {
        font-size:50px;
        text-align:center;
    }

    #buildingServices p {
        font-size:18px;
        width:80%;
        text-align: justify;
    }

    /* power services styling */
    #powerBkgnd {
        background-color: #35424a;
        height:max-content;
        width:100%;
    }

    #powerServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: white;
        color: black;
    }

    #powerServices h1 {
        font-size:50px;
        text-align:center;
    }

    #powerServices p {
        font-size:18px;
        width:80%;;
        text-align: left;
    }

    /* nuclear services styling */
    #nuclearServices {
        height:auto;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:33vh;
        background-color: #35424a;
        color: white;
    }

    #nuclearServices h1 {
        font-size:50px;
        text-align:center;
    }

    #nuclearServices p {
        font-size:18px;
        width:80%;
        text-align: left;
    }





    /* General styling grid sections */
    .gridRows {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 35px;
        width:100%;
    }

    .serviceItems {
        max-height:500px;
        width:24vw;
        min-width:400px;
        padding:15px;
    }

    .serviceItems img {
        width:100%;
        background-attachment: fixed;
        height: 350px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius:5px;
        object-fit: cover;
    }



    /* dropdowns */
    .box {
        position: relative;
        width: 100%;
        height: max-content;
    }


    /* BS dropdown, repeat for each drop down because I am an amateur web developer*/
    /* BS1*/
    .dropdown {
        position: relative;
        width: 100%;
        height: 60px;
        background: transparent;
        color: inherit;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        cursor: pointer;
    }

    .dropdown p {
        padding-left:25px;
        text-align:left;
        text-wrap: wrap;
    }

    .dropdown i {
        margin-right:25px;
        font-size: 30px;
    }

    /* drop down box space */
    .dropdown .items {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        visibility: hidden;
        transition: .35s;
        z-index:9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dropdown.active .items {
        visibility: visible;
    }

    /* drop down content */
    .dropdown .items .info {
        position: relative;
        left: 100%;
        display: block;
        max-width: 80vw;
        max-height: 80vh;
        font-size: 16px;
        background: #c9c9c9;
        color: black;
        text-decoration: none;
        border-radius:5px;
        padding: 10px 15px;
        margin-top: 2.5px;
        overflow-y: auto;
        transition: .35s;
    }

    .dropdown.active .items .info {
        left: 0;
    }

    .dropdown .blur {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition:0.35s;
    }

    .dropdown.active .blur {
        -webkit-backdrop-filter:blur(6px) brightness(50%);
        backdrop-filter: blur(6px) brightness(50%);
    }

    .info h3{
        text-align: center;
    }
}

/*Large Screens*/
@media screen and (min-width:992px) and (max-width:1199px){
    /* BUilding services Styling */
    #buildingServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: #0f0c2c;
        color: white;
    }

    #buildingServices h1 {
        font-size:40px;
        text-align:center;
    }

    #buildingServices p {
        font-size:16px;
        width:80%;
        text-align: justify;
    }

    /* power services styling */
    #powerBkgnd {
        background-color: #35424a;
        height:max-content;
        width:100%;
    }

    #powerServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: white;
        color: black;
    }

    #powerServices h1 {
        font-size:40px;
        text-align:center;
    }

    #powerServices p {
        font-size:16px;
        width:80%;;
        text-align: left;
    }

    /* nuclear services styling */
    #nuclearServices {
        height:auto;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:33vh;
        background-color: #35424a;
        color: white;
    }

    #nuclearServices h1 {
        font-size:40px;
        text-align:center;
    }

    #nuclearServices p {
        font-size:16px;
        width:80%;
        text-align: left;
    }





    /* General styling grid sections */
    .gridRows {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 35px;
        width:100%;
    }

    .serviceItems {
        max-height:500px;
        width:24vw;
        min-width:350px;
        padding:25px;
    }

    .serviceItems img {
        width:100%;
        background-attachment: fixed;
        height: 350px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius:5px;
        object-fit: cover;
    }



    /* dropdowns */
    .box {
        position: relative;
        width: 100%;
        height: max-content;
    }


    /* Dropdown*/
    .dropdown {
        position: relative;
        width: 100%;
        height: 60px;
        background: transparent;
        color: inherit;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        cursor: pointer;
    }

    .dropdown p {
        padding-left:25px;
        text-align:left;
        text-wrap: wrap;
    }

    .dropdown i {
        margin-right:20px;
        font-size: 25px;
    }

    /* drop down box space */
    .dropdown .items {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        visibility: hidden;
        transition: .35s;
        z-index:9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dropdown.active .items {
        visibility: visible;
    }

    /* drop down content */
    .dropdown .items .info {
        position: relative;
        left: 100%;
        display: block;
        max-width: 80vw;
        max-height: 80vh;
        font-size: 16px;
        background: #c9c9c9;
        color: black;
        text-decoration: none;
        border-radius:5px;
        overflow-y: auto;
        transition: .35s;
    }

    .dropdown.active .items .info {
        left: 0;
    }

    .dropdown .blur {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition:0.35s;
    }

    .dropdown.active .blur {
        -webkit-backdrop-filter:blur(6px) brightness(50%);
        backdrop-filter: blur(6px) brightness(50%);
    }

    .info h3{
        text-align: center;
    }

    .info li {
        padding:5px;
    }
}

/*Medium Screens*/
@media screen and (min-width:768px) and (max-width:991px){
    /* BUilding services Styling */
    #buildingServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: #0f0c2c;
        color: white;
    }

    #buildingServices h1 {
        font-size:30px;
        text-align:center;
    }

    #buildingServices p {
        font-size:16px;
        width:80%;
        text-align: left;
    }

    /* power services styling */
    #powerBkgnd {
        background-color: #35424a;
        height:max-content;
        width:100%;
    }

    #powerServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: white;
        color: black;
    }

    #powerServices h1 {
        font-size:30px;
        text-align:center;
    }

    #powerServices p {
        font-size:16px;
        width:80%;;
        text-align: left;
    }

    /* nuclear services styling */
    #nuclearServices {
        height:auto;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:33vh;
        background-color: #35424a;
        color: white;
    }

    #nuclearServices h1 {
        font-size:30px;
        text-align:center;
    }

    #nuclearServices p {
        font-size:16px;
        width:80%;
        text-align: left;
    }





    /* General styling grid sections */
    .gridRows {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 25px;
        width:100%;
    }

    .serviceItems {
        max-height:300px;
        min-width:150px;
        max-width:200px;
        padding:15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .serviceItems img {
        width:100%;
        background-attachment: fixed;
        height: 250px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius:5px;
        object-fit: cover;
    }

    /* dropdowns */
    .box {
        width: 100%;
        height: 50px;
    }


    /* Dropdown*/
    .dropdown {
        position: relative;
        width: 100%;
        height: max-content;
        background: transparent;
        color: inherit;
        border-radius: 5px;
        cursor: pointer;
    }

    .dropdown p {
        text-align:center;
        text-wrap: wrap;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 14px;
        text-decoration: underline;
    }

    .dropdown i {
        display: none;
    }

    /* drop down box space */
    .dropdown .items {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        visibility: hidden;
        transition: .35s;
        z-index:9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dropdown.active .items {
        visibility: visible;
    }

    /* drop down content */
    .dropdown .items .info {
        position: relative;
        left: 100%;
        display: block;
        max-width: 80vw;
        max-height: 80vh;
        font-size: 16px;
        background: #c9c9c9;
        color: black;
        text-decoration: none;
        border-radius:10px;
        overflow-y: auto;
        transition: .35s;
        padding:20px;
    }

    .dropdown.active .items .info {
        left: 0;
    }

    .dropdown .blur {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition:0.35s;
    }

    .dropdown.active .blur {
        -webkit-backdrop-filter:blur(6px) brightness(50%);
        backdrop-filter: blur(6px) brightness(50%);
    }

    .info h3{
        text-align: center;
    }

    .info li {
        padding:5px;
    }
}

/*Small Screens*/
@media screen and (min-width:526px) and (max-width:767px){
    /* BUilding services Styling */
    #buildingServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: #0f0c2c;
        color: white;
    }

    #buildingServices h1 {
        font-size:25px;
        text-align:center;
    }

    #buildingServices p {
        font-size:15px;
        width:80%;
        text-align: left;
    }

    /* power services styling */
    #powerBkgnd {
        background-color: #35424a;
        height:max-content;
        width:100%;
    }

    #powerServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: white;
        color: black;
    }

    #powerServices h1 {
        font-size:25px;
        text-align:center;
    }

    #powerServices p {
        font-size:15px;
        width:80%;;
        text-align: left;
    }

    /* nuclear services styling */
    #nuclearServices {
        height:auto;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:33vh;
        background-color: #35424a;
        color: white;
    }

    #nuclearServices h1 {
        font-size:25px;
        text-align:center;
    }

    #nuclearServices p {
        font-size:15px;
        width:80%;
        text-align: left;
    }





    /* General styling grid sections */
    .gridRows {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 25px;
        width:100%;
    }

    .serviceItems {
        max-height:300px;
        min-width:150px;
        max-width:200px;
        padding:15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .serviceItems img {
        width:100%;
        background-attachment: fixed;
        height: 250px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius:5px;
        object-fit: cover;
    }

    /* dropdowns */
    .box {
        width: 100%;
        height: 50px;
    }


    /* Dropdown*/
    .dropdown {
        position: relative;
        width: 100%;
        height: max-content;
        background: transparent;
        color: inherit;
        border-radius: 5px;
        cursor: pointer;
    }

    .dropdown p {
        text-align:center;
        text-wrap: wrap;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 14px;
        text-decoration: underline;
    }

    .dropdown i {
        display: none;
    }

    /* drop down box space */
    .dropdown .items {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        visibility: hidden;
        transition: .35s;
        z-index:9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dropdown.active .items {
        visibility: visible;
    }

    /* drop down content */
    .dropdown .items .info {
        position: relative;
        left: 100%;
        display: block;
        max-width: 80vw;
        max-height: 80vh;
        font-size: 15px;
        background: #c9c9c9;
        color: black;
        text-decoration: none;
        border-radius:10px;
        overflow-y: auto;
        transition: .35s;
        padding:20px;
    }

    .dropdown.active .items .info {
        left: 0;
    }

    .dropdown .blur {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition:0.35s;
    }

    .dropdown.active .blur {
        -webkit-backdrop-filter:blur(6px) brightness(50%);
        backdrop-filter: blur(6px) brightness(50%);
    }
    .info h3{
        text-align: center;
    }

    .info li {
        padding:5px;
    }
}

/*Mobile Screens*/
@media screen and (max-width:525px){
    /* BUilding services Styling */
    #buildingServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: #0f0c2c;
        color: white;
    }

    #buildingServices h1 {
        font-size:25px;
        text-align:center;
    }

    #buildingServices p {
        font-size:15px;
        width:80%;
        text-align: left;
    }

    /* power services styling */
    #powerBkgnd {
        background-color: #35424a;
        height:max-content;
        width:100%;
    }

    #powerServices {
        height:max-content;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:25px;
        background-color: white;
        color: black;
    }

    #powerServices h1 {
        font-size:25px;
        text-align:center;
    }

    #powerServices p {
        font-size:15px;
        width:80%;;
        text-align: left;
    }

    /* nuclear services styling */
    #nuclearServices {
        height:auto;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top:5px;
        padding-bottom:33vh;
        background-color: #35424a;
        color: white;
    }

    #nuclearServices h1 {
        font-size:25px;
        text-align:center;
    }

    #nuclearServices p {
        font-size:15px;
        width:80%;
        text-align: left;
    }





    /* General styling grid sections */
    .gridRows {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width:100%;
    }

    .serviceItems {
        max-height:200px;
        width:80%;
        padding:15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .serviceItems img {
        width:100%;
        background-attachment: fixed;
        height: 100px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius:5px;
        object-fit: cover;
    }

    /* dropdowns */
    .box {
        width: 100%;
        height: 50px;
    }


    /* Dropdown*/
    .dropdown {
        position: relative;
        width: 100%;
        height: max-content;
        background: transparent;
        color: inherit;
        border-radius: 5px;
        cursor: pointer;
    }

    .dropdown p {
        text-align:center;
        text-wrap: wrap;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 14px;
        text-decoration: overline;
    }

    .dropdown i {
        display: none;
    }

    /* drop down box space */
    .dropdown .items {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        visibility: hidden;
        transition: .35s;
        z-index:9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dropdown.active .items {
        visibility: visible;
    }

    /* drop down content */
    .dropdown .items .info {
        position: relative;
        left: 100%;
        display: block;
        max-width: 80vw;
        max-height: 80vh;
        font-size: 15px;
        background: #c9c9c9;
        color: black;
        text-decoration: none;
        border-radius:10px;
        overflow-y: auto;
        transition: .35s;
        padding:20px;
    }

    .dropdown.active .items .info {
        left: 0;
    }

    .dropdown .blur {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition:0.35s;
    }

    .dropdown.active .blur {
        -webkit-backdrop-filter:blur(6px) brightness(50%);
        backdrop-filter: blur(6px) brightness(50%);
    }

    .info h3{
        text-align: center;
    }

    .info li {
        padding:5px;
    }
}