:root {
    /* Global Colors xxx*/
    --background-color: #ffffff;
    --default-color: #212529;
    --heading-color: #4e81b3;
    --accent-color: #9e1e1e;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    --small-color: rgba(90, 89, 89, 0.62);
    --softtext-color: rgba(224, 230, 237, 0.52);
    --theme-color: #252b42;
    /* Navi colors */
    --nav-color: #285d9e;
    --nav-hover-color: #e84545;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #3a3939;
    --nav-dropdown-hover-color: #e84545;
    --dark-color: #23272b;

    /* Smooth scroll */
    scroll-behavior: smooth;
    /*background-color: var(--accent-color);*/
}

/*  setting theme defaults */

/* Light-dark themes - defaults */
body[data-bs-theme='dark'] {
    background-color: #343a40;
    color: #fff;

    .navbar,h1,h2, section *{
        background-color: #343a40;
        color: #fff;
    }
    a:hover {
        color: #3587d8;
    }
    .logotext,.moto{
        color: #ffda6a;
    }
    .moto{
        margin-left: 30px;
    }
    .sitetools * {
        background-color: #343a40;
        color: #fff;
    }
    .footerfigure{
        background-color: rgba(198, 217, 241, 0.52);
    }

}
body[data-bs-theme='light'] {
    background-color: var(--background-color);
    color: #000;
    .logotext{
        color: black;
    }
    .moto{
        color: var(--accent-color);
        margin-left: 30px;
    }
    .sitetools * {
        background-color: var(--background-color);
        color: #000;
    }
    .footerfigure{
        background-color: #eaedf8;
    }
}

/*h1,h2{*/
/*    font-weight: bold;*/
/*}*/
h3{
    color:var(--heading-color);
    padding: 0px;
    margin:0px;
}

#brands * {
    background-color: var(--accent-color);
}
.accented{
    color: var(--accent-color);
}

/*  END setting theme defaults */

.headerfigure{
    /*text-align: center;*/
    margin: 0px;
    padding: 0px;
}
.bi-broadcast-pin{
    font-size: x-large;
}
.bi-reception-4, .bi-broadcast-pin{
    font-size: x-large;
    color: var(--accent-color);
    font-style: normal;
    font-weight: lighter;
}
.logotext{
    font-size: 1.5rem;
    font-family: "Big Shoulders Inline Display", sans-serif;
    font-optical-sizing: auto;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    white-space: nowrap;
}
.moto{
    font-size: 0.8em;
    color: var(--accent-color);
    font-style: italic;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
}

#navbarmenubar {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /*z-index: 1000; !* Ensures the navbar stays on top of other content *!*/
}


/*.navbar{*/
/*    background-color: transparent;*/
/*    transition: background-color 0.5s ease;*/
/*}*/
/*.nav-link, .dropdown-item{*/
/*    font-weight: bold;*/
/*}*/
.nav-link:hover,.dropdown-item:hover{
    color:var(--accent-color);
}
.switchtheme {
    /*display: inline-block;*/
    display: flex;
    margin-right: 10px; /* Example: 10px margin between elements */
}
#homecontain{
    margin-top: 0px;
}

/*######################*/
/*#### Footer ####*/
/*######################*/
footer{
    background-color: var(--theme-color);
    color: var(--softtext-color);
}
footer a{
    color:var(--softtext-color);
}
.footerfigure{
    padding: 10px;
    border-radius: 10px;
    /*width:100%;*/
    width: auto;
    text-align: center;
}
.copyright{
    background-color:white;
    color: var(--theme-color);
    font-size: small;
}
footer h5{
    color:white;
}
/*######################*/
/*#### Welcome page ####*/
/*######################*/
#homecont{
    position: relative;
    height: 300px;
    text-align: center;
}
#welcomeimage {
    position: relative;
}
#welcometext {
    position: absolute;
    top: 20%;
    opacity: 0; /* Initial opacity is 0 for fade-in effect */
    animation: fadeIn 2s forwards; /* Animation name, duration, easing function */
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
div [class^="col-"]{
    padding-left:5px;
    padding-right:5px;
}
.card{
    transition:0.3s;
    cursor:pointer;
    height:350px;
    width: 100%;
}
.card img,#meshsvg{
    height: 150px;
    /*width: 220px;*/
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 5px;
}
#cardssection{
    padding-bottom: 100px;
    padding-top: 0;
    margin-top: 20px;
}

#meshsvg path{
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 0.3;
}
#meshsvg:hover{
    fill: #ffda6a;
}

.card-title{
    /*font-size:15px;*/
    font-weight: bold;
    transition:1s;
    cursor:pointer;
    padding: 5px;
}
.card-title i{
    /*font-size:15px;*/
    transition:1s;
    cursor:pointer;
    color:#ffa710
}
.card-block p,h5{
    padding-left: 10px;
    padding-right: 10px;
}
.card-title i:hover{
    transform: scale(1.25) rotate(100deg);
    color:var(--accent-color);
}
.card:hover{
    transform: scale(1.05);
    box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}
.card-text{
    height:80px;
}
.card::before, .card::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale3d(0, 0, 1);
    transition: transform .3s ease-out 0s;
    background: rgba(255, 255, 255, 0.1);
    content: '';
    pointer-events: none;
}
.card::before {
    transform-origin: left top;
}
.card::after {
    transform-origin: right bottom;
}
.card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after {
    transform: scale3d(1, 1, 1);
}
.readmore{
    background-color: var(--accent-color) !important;
    margin-bottom: 10px;
    margin-right: 10px;
    color: whitesmoke;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* adding the cards breakpoints */
/* Default for extra small devices (col-12) */
.mycards {
    width: 100%;
    display: flex;
}

@media (min-width: 350px) {
    .mycards {
        width: 100%;
        max-width: 300px;
    }
    .dirantennatable{
        max-width:100%;
        flex: 1 1 100%;
    }
    .videnvelop{
        width: 95%;
    }
}

@media (min-width: 676px) {
    .mycards {
        width: 70%;
        max-width: 300px;
    }
    .dirantennatable{
        max-width:50%;
        flex: 1 1 50%;
    }
    .videnvelop{
        width: 80%;
    }
}

@media (min-width: 900px) {
    .mycards {
        width: 50%;
        max-width: 300px;
    }
    .dirantennatable{
        max-width:30%;
        flex: 1 1 30%;
    }
    .videnvelop{
        width: 60%;
    }
}

@media (min-width: 1200px) {
    .mycards {
        width: 30%;
        max-width: 300px;
    }
    .dirantennatable{
        max-width:30%;
        flex: 1 1 30%;
    }
    .videnvelop{
        width: 50%;
    }
}

@media (min-width: 1400px) {
    .mycards {
        width: %;
        max-width: 300px;
    }
    .dirantennatable{
        max-width:20%;
        flex: 1 1 20%;
    }
    .videnvelop{
        width: 45%;
    }
}

@media (min-width: 1600px) {
    .mycards {
        width: 40%;
        max-width: 300px;
    }
    .dirantennatable{
        max-width:20%;
        flex: 1 1 20%;
    }
    .videnvelop{
        width: 35%;
    }
}

/* END adding the cards breakpoints */


/*#### Testing template  ####*/
/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------
.featured-services .service-item {
    background-color: var(--surface-color);
    box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    transition: all 0.3s ease-in-out;
    height: 100%;
    position: relative;
    z-index: 1;
}
.featured-services .service-item:before {
    content: "";
    position: absolute;
    background: var(--accent-color);
    inset: 100% 0 0 0;
    transition: all 0.3s;
    z-index: -1;
}

.featured-services .service-item .icon {
    margin-bottom: 10px;
}

.featured-services .service-item .icon i {
    color: var(--accent-color);
    font-size: 36px;
    transition: ease-in-out 0.3s;
}

.featured-services .service-item h4 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 20px;
}

.featured-services .service-item h4 a {
    color: var(--heading-color);
    transition: ease-in-out 0.3s;
}

.featured-services .service-item p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
    transition: ease-in-out 0.3s;
}

.featured-services .service-item:hover h4 a,
.featured-services .service-item:hover .icon i,
.featured-services .service-item:hover p {
    color: var(--contrast-color);
}

.featured-services .service-item:hover:before {
    background: var(--accent-color);
    inset: 0;
    border-radius: 0px;
}
*/
/*#### END Testing template  ####*/

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,.section {
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    /*border-style: dashed;*/
    /*border-width: 3px;*/
    /*border-color: #0b5ed7;*/
}
section *,h1,h2,h3,h4 {
    font-family: "Play", system-ui;
}


p{
    margin: 0;
    padding: 0;
}

#featuressection .d-flex div,.titlesidelines{
    width: 100px;
}

#propasection{
    padding-top: 100px;
}

#propasection .d-flex div{
    width: 100px;
}


/*#### Brands slider  ####*/
#brands{
    height:150px;
    padding: 0px;
    background-color: var(--accent-color);
    color:var(--softtext-color);
    margin-top: 0px;
}

#sliderwrap{
    height: 100px;
}
#slidesubwrap{
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
#sliderwrap img{
    height: 50px;
    margin-left: 10px;
    margin-right: 10px;
}
#sliderwrap #slidesubwrap div{
    justify-content: center;
    text-align: center;
}
/*#### END Brands slider  ####*/

#featuresrow img,#featuresrow row img{
    border-radius: 10px;
}
#featuresrow{
    margin-bottom: 0;
}

.card-bg{
    padding: 10px;
}
.card-body{
    padding-right: 70px;
    align-items: start;
    vertical-align: top;
    padding-top: 0px;
    /*border-style: solid;*/
    /*border-width: 1px;*/
    height: 100%;
}
small{
    color:var(--small-color);
    font-style: italic;
    margin: 0;
    padding: 0;
}
#probarow div{
    padding:10px;
}

#propatablecont{
    margin-left: 20px;
    margin-right: 20px;
}
#propatablecont table thead th {
    background-color: var(--accent-color);
    color: #e9ecef ;
}

#propatablecont table tr td{
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
#probacontainer img{
    border-radius: 15px;
}
.rounded-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}
hr{
    border-style: solid;
    border-color: black;
    border-width: 1px;
}
#intro span,#specs span,#proscons span,#channels span{
    border-bottom: var(--small-color);
    border-style: solid;
    border-width: 0 0 2px 0;
}

.maintitles{
    border-bottom: var(--small-color);
    border-style: solid;
    border-width: 0 0 2px 0;
}
.subtitles{
    font-size: 1.5em;
    font-weight: bold;
}

#channels table tr td{
    vertical-align: top;
    word-wrap: break-word;
    padding-right: 20px;
    padding-left: 20px;
}
#channels table thead tr td{
    background-color: var(--accent-color);
    color: white;
}
#channels #channelsrow img{
    border-radius: 15px;
    width:100%;
    max-width: 500px;
}
#intro .row img,#wifimesh img {
    border-radius: 20px;
    margin: 10px;
}
.bulletpoints{
    color:var(--accent-color);
    font-weight: bold;
}

#introlora .row img{
    border-radius: 10px;
    width:100%;
    max-width: 250px;
    /*min-width: 200px;*/
}
#introlorawan .row img{
    border-radius: 10px;
    /*width:100%;*/
    /*max-width: 250px;*/
}

#wtenvelope{
    padding: 5px;
    background-color: var(--accent-color);
    border-radius: 15px;
    width: auto;
}
.noteblock {
    border-left: 5px solid var(--accent-color);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px; /* Optional: Adds some padding inside the div */
    /*margin-left: 50px;*/
    width:fit-content;
}

/* Image floating to-right*/
.content-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    padding: 20px;
}
.content-container img {
    max-width: 500px;
    width: 100%; /* Ensures responsiveness */
    height: auto; /* Maintains aspect ratio */
    margin: 0 0 1em 1em; /* Space between the image and the text */
    float: right;
}

/* Media Query for small screens */
@media (max-width: 768px) {
    .content-container img {
        float: none;
        margin: 1em auto;
        display: block;
    }
}
ul{
    margin: 0px 0px 0px 30px;
    padding: 0;
}

#featurescontainer{
    /*background-size: cover; !* Cover the entire div with the image *!*/
    /*background-position: center; !* Center the image within the div *!*/
    text-align: left;
    padding: 0px 50px 0px 50px;
    margin: 0;
    margin:0;
    /*filter: brightness(100%); !* Increase brightness by 20% *!*/
}

.sitetools *{
    font-family: "Play", system-ui;
}
.sitetools img{
    border-radius: 10px;
}
.sitetools input,.sitetools select {
    border-style: solid;
    border-width: 2px;
    border-color: var(--small-color);
    border-radius: 0;
}

/* Remove the spinner controls in Webkit browsers (Chrome, Safari, Edge) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove the spinner controls in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.videosection{
    text-align: center;
    justify-content: center;
    align-content: center;
}
.videnvelop{
    text-align: center;
    /*width: 90%;*/
    margin: 0 auto;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0 auto;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* tests */
/*section{*/
/*    border-style: dashed;*/
/*    border-width: 3px;*/
/*    border-color: #0b5ed7;*/
/*}*/
/*section div{*/
/*    border-style: dashed;*/
/*    border-width: 3px;*/
/*    border-color: #fd2e23;*/
/*    justify-content: center;*/
/*}*/
/*section div div{*/
/*    border-style: dashed;*/
/*    border-width: 3px;*/
/*    border-color: #ffd500;*/
/*}*/
/*section div div div{*/
/*    border-style: dashed;*/
/*    border-width: 3px;*/
/*    border-color: #af8989;*/
/*}*/
/* END tests */