body, p {
  font-family: "Roboto", sans-serif;
  font-weight: 200;
  font-style: normal;
}
h1, h2, h3 {
  font-family: "Roboto", sans-serif;
  color:#3e3d6e;
  font-weight: 700;
  font-style: normal;
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

.container {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width */
}

.brand-logo {
    max-width:115px;
}
.alert {
margin-top: 20px;
}
.alert-info {
    margin-top: 10px;
}
.nav-link-btn {
  background-color: #e72125;
  border-radius: 10px;
  color: white !important;
  font-weight: 400;
  padding: 8px;
}
.card-header img {
  max-width: 40%;
}
.btn-primary {
  background-color: #3e3d6e !important;
  border:none !important;
}
.btn-secondary {
    background-color: #e72125 !important;
    border:none !important;
}
.text-primary {
  color: #3e3d6e !important;
}
.text-secondary {
    color: #e72125 !important;
}
.login-card {
    border: 1px solid rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 0px 0px 20px #0000002e;
}
.knack-box {
    padding:3%;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow: 0px 0px 20px #0000002e;
    border-top: 10px solid #3e3d6e;
    margin-bottom: 60px;
    margin-top:20px;
}
.knack-box-label {
  position: relative;
  top: -50px;
  left: -50px;
}
@media only screen and (max-width: 600px) {
  .knack-box-label {
  position: relative;
  left: -16px;
}
.knack-box-label h4 {
    font-size:0.7em !important
}
.knack-details {
  width: 90% !important;
}
.knack-box-subtitle {
  font-size: 0.7em;
}
}

.circle-logo img {
  display: inline-block;
  float: left;
  border-radius: 60px;
  background-color: white;
  border: 7px solid #3e3d6e;
  padding: 7px;
  max-width: 78px;
  overflow: visible;
  Height:75px;
}

.knack-details {
  color: white;
  background-color: #3e3d6e;
  font-size: 1.5em;
  width: 50%;
  border-radius: 35px;
  height: 75px;
  line-height:1;
  font-weight: 400;
  padding: 10px;
  padding-left: 85px;
}
.knack-box-subtitle {
  font-size: small;
  margin-top: -30px;
}
.knack-footer {
color:#737373 !important;
}

.knack-box-header img {
  max-width: 115px;
}
.knack-box-content .btn {
  padding: 2% 5% 2% 5%;
  font-size: larger;
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
       max-width: 95%;
    }

}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 95%;
    }
}
@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 95%;
        
    }
}
@media (max-width: 968px) {
    body {
        font-size:1.5em;
        
    }
    .knack-box-subtitle {
  display:none;
}
}



    

#knacks .container {
  padding: 2%;
}

.file-upload-wrapper {
border: 2px dashed #ddd;
border-radius: 10px;
background-color: #f8f8f8;
text-align: center;
padding: 40px;
cursor: pointer;
position: relative;
}
.file-upload-wrapper:hover {
background-color: #e8e8e8;
}
.file-upload-wrapper input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.file-upload-icon {
width: 50px;
height: 50px;
margin-bottom: 20px;
}
.file-upload-text {
font-size: 16px;
color: #666;
}
.file-count {
 font-size: 16px;
color: #333;
font-weight:800;
margin-bottom: 10px;
}
#fileCount {
    font-size: 1.1em;
    color: #df17a4;
    font-weight: 500;
    margin-top: 10px;
}