/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #logo {
        width: 100%;
    }
    .scrolled #logo {
        width: 80%;
    }
    .banner-p {
        font-size: 1.30rem;
        padding: 3% 0% 0;
    }
    .main-p {
        margin-top: 30%;
    }
    .btn2 {
        margin-left: unset !important;
    }
    .banner-block {
        padding: 25% 5%;
    }
    .arrowdown {
        width: 10%;
    }
    h2 {
        font-size: 2.75rem;
    }
    .modal-content .btn-close {
        height: 40px;
        width: 40px;
    }
    .modal-content2 .btn-close2 {
        height: 40px;
        width: 40px;
    }
    .properties-img, .collection1-img, .collection2-img, .collection3-img, .networking-img {
        height: 60vh;
    }
    .banner-p {
        margin-top: 23%;
    }
    .st0{
        fill:var(--zeipekkis-primary);
    }
    .intro-img {
        height: 70vh;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .intro-img {
        height: 100vh;
    }
    .arrowdown {
        width: 8%;
    }
    .banner-block {
        padding: 15% 0 8%;
    }

    .banner-p {
        font-size: 1.5rem;
        padding: 3% 4% 0;
    }
    .btn2 {
        margin-left: 4% !important;
    }
    #logo {
        width: 90%;
    }
    .scrolled #logo {
        width: 70%;
    }
    .main-p {
        margin-top: 20%;
        text-align: left !important;
    }
    .modaltitle {
        font-size: 2.5rem;
    }
    .modal-content .btn-close {
        height: 50px;
        width: 50px;
    }
    .modal-content {
        padding: 5%; 
    }
    
    .modal-content {
        max-width: 70%;
    }
    .properties-img, .collection1-img, .collection2-img, .collection3-img, .networking-img {
        height: 70vh;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #logo {
        width: 90%;
    }
    .scrolled #logo {
        width: 70%;
    }
    .intro-img {
        height: 60vh;
    }
    .arrowdown {
        width: 5%;
    }

    .banner-block {
        padding: 10% 0 8%;
    }

    .banner-p {
        font-size: 1.4rem;
        padding: 3% 4% 0;
    }
    .title-p {
        padding: 3% 4% 0;
    }
    .btn {
        margin-left: 4%;
    }
    .btn2 {
        margin-left: 4% !important;
    }
    .text-center {
        text-align: left !important;
    }
    .main-p {
        margin-top: 10%;
    }
    .modaltitle {
        font-size: 2.75rem;
    }
    .modal-content {
        max-width: 60%;
    }
    .modal-content {
        padding: 3%; 
    }
    .hierarchy-col {
        display: none;
    }
    .hierarchy-lg {
        display: unset !important;
    }
    .intro, .networking-div, .properties-div, .collection-div, .contact-div {
        padding-top: 8%;
    }
    .maintop {
        margin-top: 5%;
    }
    .maintop2 {
        margin-top: 2%;
    }
    .banner-p{
        margin-top: 12%;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .intro-img {
        height: 75vh;
    }
    .banner-block {
        padding: 10% 0 6%;
    }

    .banner-p {
        font-size: 1.5rem;
        padding: 3% 4% 0;
    }
    .title-p{
        padding: 3% 4% 0;
    }
    .btn {
        margin-left: 4%;
    }
    .btn2 {
        margin-left: 4% !important;
    }
    .text-center {
        text-align: left !important;
    }
    .main-p {
        margin-top: 10%;
    }
    .modal-container {
        top: 25%;
    }
    .modal-container2, .modal-container {
        top: 26%;
    }
    .banner-p {
        margin-top: 9%;
}
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .intro-img {
        height: 90vh;
    }
    .btn-outline-secondary,
    .btn-outline-light,
    .btn-outline-primary{
        padding: 1.5% 3.5%;
    }
 
    h2 {
        font-size: 3.5rem;
    }

    h3 {
        font-size: 2.5rem;
    }

    .banner-block {
        padding: 10% 0 2%;
    }

    .banner-p {
        font-size: 1.75rem;
        padding: 3% 4% 0;
    }
    .title-p{
        padding: 3% 4% 0;
    }
    .btn {
        margin-left: 4%;
    }
    .text-center {
        text-align: left !important;
    }
    .banner-p{
        margin-top: 4%;
    }
    
}