*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
body{
    width: 100vw;
    padding: 0;
    height: 100vh;
}
.top-container{
    position: fixed;
    background-color: blue;
    width: 100%;
    top: 0;
    z-index: 5;
    height: 25%;
    box-shadow: 2px 2px blue ;
}
.brand-name {
    text-decoration: underline;
    margin: 0;
    color: blue !important;
}

.motto {
    display: block;
    font-size: 0.9rem;
    color: #555;
}
.links{
    background-color: blue ;
}
.links a{
    color: white;
}
.sidebar{
    position: fixed;
    left: 0;
    top: 26.5%;
    z-index: 3;
    height: 80%;
    background-color: blue;
    width: 20%;
    /*border: 3px blue solid;*/
}
.full-brand{
    color: white !important;
    text-align: center;
}
.main-menu{
    color: white !important;
    text-transform: uppercase;
    text-align: center;
    margin-top: 1em;
}
.sidebar .menu-items a{
    color: white !important;
}
.sidebar .menu-items .active{
    color: gold !important;
}
.content{
    margin-top: 10%;
    width: 100%;
    position: absolute;
}
.main-content{
    width: 100%;

}
.navbar-light {
    color:rgba(0, 136, 255, 0.868);
    background-color:white;  /* Blue */
}
.navbar-light .navbar-brand,
.navbar-light .nav-link,
.navbar-light .navbar-toggler-icon {
    color: #ffffff; /* White */
}
.nav-link {
    font-weight: 900 !important; /* Super bold */
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Optional: gives more presence */
}
.brand-name{
    font-weight: bold;
}
.navbar-light .navbar-nav .nav-link:hover {
    color: #ffd700; /* Gold */
}

.btn-primary {
    background-color: #ffd700; /* Gold */
    border-color: #ffd700;
}

.btn-primary:hover {
    background-color: #ffc107; /* Darker Gold */
    border-color: #ffc107;
}
.footer {
    background-color: blue; /* Blue */
    color: #ffffff; /* White */
    width: 100%;
}

.footer a {
    color: #ffd700; /* Gold */
}
.company-details{
    text-align: center;
    height: 100%;
}
.sidebar a:hover {
    color: #ffd700; /* Gold */
}
.content .row{
    width: 100%;
}
.same-height {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-img-top {
    height: 350px; /* Set a fixed height for images */
    object-fit: cover; /* Ensure images cover the container while maintaining aspect ratio */
}
.vh-100 {
   height: 100vh;
}
.services-scroll{
    overflow-x: scroll;
}
.carousel-item img {
   max-height: 70vh;
   object-fit: cover;
}
  /*.trapezoid {
    position: relative;
    overflow: hidden;
     Add the overflow hidden to prevent content from overflowing the container
  }
  .trapezoid-left, .trapezoid-right {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); Adjust the last value (90%) to control the slope
  }

  .trapezoid-middle {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 10%); Adjust the last value (10%) to control the slope
  }*/
  .trapezoid-image {
    width: 50%;
    height: 80%;
    background-color: #d4c2fc;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.trapezoid-text {
    width: 50%;
    margin: 0;
    height: 80%;
    background-color:red;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.trapezoid-text h5 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.trapezoid-text p {
    font-size: 1.2rem;
    width: 70%;
}
.carousel-control{
    opacity: 0.1;
    width: auto;
    padding: 0.3em;
}
.carousel-control:hover{
    opacity: 0.6;
}
/* Ensure that both trapezoids are side by side */
.d-flex {
    gap: 0;
}
@media screen and (max-width: 600px){
    .content{
        margin-top: 25%;
        width: 100%;
    }
}
@media screen and (max-width: 600px){
    .content{
        margin-top: 30%;
        width: 100%;
    }
}