* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

main {
    position: relative;
}


/*** Content Section ************************************/

/*** Side Bar Section ***********************************/
.contact-location {
    background-color: whitesmoke;
    padding: 10px;
}

.contact-locate-wrapper {
    width: 95%;
    margin: 0 auto;
    padding: 20px 0 20px 0;

    .locate {
        display: none;
    }
}

.product-form {
    padding: 10px;

    background-color: #ff9900;
    box-shadow: 5px 5px 10px #000;
}

.contact-location #top {
    width: 50px;
    height: 50px;
    
    display: flex;
    align-items: center;

    border-radius: 50%;
    background-color: #ff9900;
    box-shadow: 4px 4px 6px #000;
}

.prod-input {
    margin-top: 10px;
}


/*** MEDIA QUERIES **************************************/

@media (min-width: 426px) {
    /*** Hero Section ***********************************************/
    .hero-content {
        border: 1px solid transparent;
    }

    .inner-sample .title {
        font-size: 1.5rem;
    }

    .inner-sample .sub-title {
        font-size: 1rem;
    }

    .contact-locate-wrapper {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        height: min-content;

        .enquiry {
            
            .product-form {
                height: 100%;
            }
        }

        .locate {
            display: block;
            overflow: hidden;

            & iframe {
                height: 100%;
            }
        }
    }
}

@media (min-width: 768px) {

    .broadband {
        display: grid;
        gap: clamp(1.2rem, 2vw, 2rem);
        grid-template-columns: repeat(3, 1fr);

        .bis {
            position: relative;

            padding: clamp(15px, 1vw, 20px);
            border-radius: 20px;

            color: rgb(23, 23, 23);
            text-align: center;

            box-shadow: 0 0 10px var(--nttorange);
            overflow: hidden;
            z-index: 1;

            &::before {
                content: '';
                   position: absolute;
             top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--nttorange);
                opacity: .1;
                /* box-shadow: 0 0 15px 1px var(--nttblue) inset; */
                border-radius: 20px;
                z-index: -1;
            }

            &:hover {
                box-shadow: 0 0 10px var(--nttblue);
                cursor: default;
            }
        }

        .bis h3 {
            margin-bottom: 15px;
            font-size: clamp(16px, 2vw, 26px);
        }

        .bis p {
            margin-top: 10px;
            font-size: clamp(14px, 2vw, 18px);
        }
    }

    .inner-sample .title {
        font-size: 1.75rem;
    }

    .inner-sample .sub-title {
        font-size: 1.25rem;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}