@font-face {
    font-family: "Montserrat";
    src: url('../fonts/Montserrat.woff2') format('woff2') tech('variations'), url('fonts/Montserrat.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

::-webkit-scrollbar { display: none; }

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat";
    font-weight: 400;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    padding: 1rem;
}

nav a {
    fill: #fff;
}

.sections-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.box {
    text-decoration: none;
    overflow: hidden; /* Ensure child content doesn't overflow */
}

.custom, .cables {
    height: 90vh;
}

.sections-container a section {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out; /* Added transition for smooth effect */
    display: flex;
    justify-content: center;
    align-items: center;
}

.sections-container a section p {
    font-size: 0;
    opacity: 0;
    font-weight: 600;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.sections-container a:hover section {
    transform: scale(1.1); /* Adjust the scale factor as needed */
}

.sections-container a:hover section p {
    font-size: 5rem;
    opacity: 1;
}

.customimg {
    background-image: url('img/space.jpg');
}

.cablesimg {
    background-image: url('img/cable.jpg');
}


footer {
    background-color: #222;
    color: #ccc;
    padding: .5rem;
    text-align: center;
}

footer a {
    color: inherit;
    text-decoration: inherit;
}

footer a:hover {
    text-decoration: underline;
}

.cable-section {
    /* Styling for the cable section */
    margin-bottom: 2rem;
}

.cable-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 800px; /* Keeps max width relative to the parent element */
    margin: auto; /* Centers the box */
    /* Add more styling as needed */
    margin-top: 2rem;
    border: solid;
    border-radius: 1rem;
    transition: transform 0.3s ease-in-out;
}

.cable-box:hover {
    transform: scale(1.05);
}

.cable-box:hover .cable-image {
    transform: scale(1.004);
}

.cable-box:nth-child(odd) {
    text-align: right;

    /* This will swap the image and text for every even box */
}

.cable-box:nth-child(even) {
    flex-direction: row-reverse;
    /* This will swap the image and text for every even box */
}

.cable-image.leftrad {
    border-bottom-left-radius: 0.7rem;
    border-top-left-radius: 0.7rem;

    /* This will swap the image and text for every even box */
}

.cable-image.rightrad {
    border-bottom-right-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
    /* This will swap the image and text for every even box */
}

.cable-description {
    margin: 1rem;
}

.cable-description h3 {
    font-size: 2rem;
}

.cable-image {
    width: 16rem; /* Equivalent to 100px; adjust as needed */
    aspect-ratio: 1 / 1 ;
    /* Add more styling as required */
}

@media (max-width: 800px) { /* 600px equivalent */
    .cable-box {
        flex-direction: column !important; /* Stack image and text on smaller screens */
        text-align: center !important; /* Center-align text for mobile */
    }
    .cable-image {
    width: 80%; /* Equivalent to 100px; adjust as needed */
    aspect-ratio: 1 / 1 ;
    /* Add more styling as required */
    }
}