:root {
    --blue-purple-gradient: linear-gradient(-45deg, #375ca0, #f7cac9, #db94aa, #6271ba);
}
* {
  box-sizing: border-box;
}
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: var(--blue-purple-gradient);
    overflow-x: hidden;
    max-width: 100%;
    transition: 0.5s ease;
}

.navbar {
    background: rgba(55, 92, 160, 0.65);
    backdrop-filter: blur(12px) saturate(150%) brightness(150%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.navbar-brand{
    font-family: 'Rubik';
}
#home {
  padding-top: 75px;
}
.image1{
    display: block;
    width: 100%;
    max-width: 100%; 
    height: auto;
      margin-top: 0; 
}
.image2{
    display: block;
    margin: 20px auto;
    max-width: 70%;
    height: auto;
}
.card {
    background: rgba(105, 123, 196, 0.25);
    backdrop-filter: blur(12px) saturate(150%) brightness(150%);
    border: 2px none rgba(105, 123, 196, 0.50);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}
.card-body{
    color: rgba(35, 48, 102, 0.85);
    justify-content: center;
}
.inner-card {
    background: transparent !important;
    border: none !important; 
    box-shadow: 0 8px 25px rgba(35, 48, 102, 0.30); 
}
.inner-card p{
    word-break: break-word;
    text-align: justify;
    padding: 4px;
}
.overview-text{
    color:rgb(0, 18, 89);
}
.overview-title{
    color:rgb(0, 18, 89);
    font-family: 'Rubik';
}
.description-overview{
    word-break: break-word;
    text-align: justify;
    color:black
}
.specs-text{
    color:rgb(0, 18, 89);
}
.features-text{
    color:rgb(0, 18, 89);
}

.features-details{
    word-break: break-word;
    text-align: justify;
    color:rgb(0, 18, 89);
    font-size: 20px;
    margin:50px;
    padding-top: 45px;
    padding-left: 45px;
}

@media (max-width: 768px) {
    .image1{
        width: 100%;
        max-width: 100%;
    }
    .image2 {
        max-width: 40%;
    }
    .features-details{
        word-break: break-word;
        text-align: justify;
        color:rgb(0, 18, 89);
        padding-top: 15px;
        padding: 10px 15px;
        font-size: 15px;
        margin: 10px;
    }
    #features .col-md-7{
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    #features .col-md-5{
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}