.vision {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 50px;

    padding: var(--info-box-padding);
    padding-right: 225px;
    padding-left: 225px;
    padding-top: 0;
}

#visionHeading {
    grid-column: 1 / span 3;
}

.visionHeading > h3 {
    font-size: var(--big-font) !important;
    font-family: Acumin-Black;
}


.visionSquare > h4 {
    font-family: Acumin-Regular;
}




.visionSquare {
    display: flex;
    flex-direction: column; /* Ensures text below is stacked */
}

.visionHeading {
    display: flex;
    align-items: center; /* Vertically aligns the image and heading */
    gap: 8px; /* Adds space between the image and the heading */
    margin-bottom: 8px; /* Adds space between heading and normal text */
}

.visionHeading img {
    height: 50px; /* Adjust the size of the image */
    width: auto;
    margin: 0 20px 20px 0 !important;

}

.visionSquare h4 {
    margin: 0; /* Optional: Removes default margin for consistent spacing */
}






/* Extra Small Devices (Phones, up to 480px) */
@media only screen and (max-width: 480px) {
    .vision {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 50px;
        padding: 150px 30px !important;
    }

    #visionHeading {
        grid-column: 1 / span 1;
        margin-bottom: 75px !important;
    }

    .visionSquare > h3 {
        font-size: var(--small-font) !important;
    }

    #visionHeading > h2 {
        font-size: var(--small-font) !important;
    }    

    .visionSquare > h4 {
        font-size: var(--very-small-font) !important;
        margin-bottom: 50px;
    }

    .visionHeading > h3 {
        font-size: var(--medium-font) !important;
    }
}

  
/* Small Devices (Portrait Tablets and Small Phones, up to 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .vision {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 50px;
        padding: 150px 100px !important;
    }

    #visionHeading {
        grid-column: 1 / span 1;
        margin-bottom: 75px !important;
    }

    #visionHeading > h2 {
        font-size: var(--small-font) !important;
    }    

    .visionSquare > h4 {
        font-size: var(--very-small-font) !important;
        margin-bottom: 50px;
    }

    .visionHeading > h3 {
        font-size: var(--medium-font) !important;
    }


}


/* Medium Devices (Tablets in Landscape, 768px to 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .vision {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 50px;
    }

    #visionHeading {
        grid-column: 1 / span 1;
        margin-bottom: 75px !important;
    }

    #visionHeading > h2 {
        font-size: var(--medium-font) !important;
    }    

    .visionSquare > h4 {
        font-size: var(--small-font) !important;
        margin-bottom: 50px;
    }
}   


/* Large Devices (Desktops, 1024px to 1200px) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    .vision {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr 1fr !important;
        gap: 50px;
    }

    #visionHeading {
        grid-column: 1 / span 2;
    }

    #visionHeading > h2 {
        font-size: var(--medium-font) !important;
    }    

    .visionSquare > h4 {
        font-size: var(--small-font) !important;
    }
}

/* Extra Large Devices (Large Desktops, 1200px to 1600px) */
@media only screen and (min-width: 1201px) and (max-width: 1600px) {
    .vision {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr 1fr !important;
        gap: 50px;
    }

    #visionHeading {
        grid-column: 1 / span 2;
    }  

    #visionHeading > h2 {
        font-size: var(--medium-font) !important;
    }    

    .visionSquare > h4 {
        font-size: var(--small-font) !important;
    }
}
  

/* Ultra Large Devices (Very Large Screens, 1600px and up) */
@media only screen and (min-width: 1601px) {
    .vision {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 50px;
    }

    #visionHeading > h2 {
        font-size: var(--medium-font) !important;
    }    

    .visionSquare > h4 {
        font-size: var(--small-font) !important;
    }

}