/* confusion matrix*/
.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
}

.image-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.image-item {
    flex-basis: 600px;
    text-align: center;
}

.image-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #fafa35;
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.img-score {
    font-size: 20px;
    color: #55ff00;
    margin-bottom: 2px;
    margin-top: 12px;
}

.image-description {
    line-height: 1.6;
    color: #ffffff;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-grid {
        gap: 20px;
    }
    
    .image-item {
        flex-basis: 100%;
    }
}

/* sql results*/
.table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.table th, .table td {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    text-align: left;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Prediction */
.prediction-section {
    text-align: center; 
}

.prediction-section h2 {
    font-weight: bold;
    color: #fafa35;
}


.prediction-section h3 {
    color: #000000;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.predict_text {
    background-color: #FFA500;
    color: #000000;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 15px auto;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,main,nav,output,ruby,section,summary,time,mark,audio,video{
    margin: 0;
    padding:0;border:0;-webkit-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}nav ol,nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}button,input[type=submit]{cursor:pointer}h1{font-size:42px;font-weight:lighter}h2{font-size:26px;font-weight:lighter}h3{font-size:20px;font-weight:lighter}p{font-size:15px;font-weight:lighter;color:#909090}a{font-size:20px;text-decoration:none}html,body{width:100%;height:100%}
    
    body{
        background-color:#fff;
        color:#424242;
        margin-top: 95px;
    }
        
        .contact{width:100%;min-height:500px;padding:50px 0;background-color:#ecf0f1;text-align:left}.contact__inner{max-width:1024px;margin:0 auto}.contact__inner:after{content:'';display:table;clear:both}.contact__title{font-size:28px;font-weight:400;margin-bottom:10px;text-transform:capitalize;text-align:center}.contact__descr{font-size:14px;font-weight:400;margin-bottom:55px;text-align:center}.contact__form{display:block;float:left;max-width:465px;margin:0 15px 0 40px}.contact__form:after{content:'';display:table;clear:both}.contact__form-input{display:inline-block;width:220px;height:45px;margin-bottom:20px;padding-left:12px;border:2px solid #bec3c7;font-style:italic;color:#999}.contact__form-input:first-of-type{margin-right:20px}.contact__form-tarea{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:465px;height:155px;margin-bottom:25px;padding:20px 0 0 12px;border:2px solid #bec3c7;font-style:italic;color:#999;resize:none}.contact__form-submit{display:block;float:right;width:115px;height:35px;text-align:center;background-color:#1bbc9b;font-size:15px;color:#fff;text-transform:uppercase;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}.contact__form-submit:hover{background-color:#158f76}.contact__card{display:inline-block;width:230px;height:150px}.contact__card-title{margin-bottom:20px;font-size:14px;line-height:.5;text-transform:uppercase}.contact__card-item{position:relative;font-size:14px;line-height:24px}.contact__card-item:before{display:block;position:absolute;top:0;left:0;font-family:FontAwesome}.contact__card-item.place{padding-left:15px;margin-bottom:15px}.contact__card-item.place:before{content:"\f041"}.contact__card-item.tel{padding-left:17px;margin-bottom:10px}.contact__card-item.tel:before{content:"\f098"}.contact__card-item.fax:before{content:"\f02f"}.contact__card-item.email{display:inline-block;padding-left:20px;font-size:14px;line-height:24px;color:#444}.contact__card-item.email:before{content:"\f003"}.contact__card-item.email:hover{text-decoration:underline}
        
        .page-header{
            width:100%;
            min-height:95px;
            background-color:#fff;
            z-index: 10000;

            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999; /* keep it above everything */
            background-color: #fff; /* make sure it’s not transparent */
            min-height: 95px; /* or whatever the actual header height is */
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
            
            .page-header:after{content:'';display:table;clear:both}.page-header.is-fixed{position:fixed;top:0;left:0;z-index:999;-webkit-box-shadow:0 2px 4px 0 #424242;box-shadow:0 2px 4px 0 #424242}
        .page-header__inner{
            margin:0 auto
        }

        .page-header__inner:after{content:'';display:table;clear:both}
        
        .page-header__logo{float:left;height:50px;margin:25px 0 0 40px;padding:5px 0 0 65px}
        
        .page-header__logo h1{
            font-size:20px;
            font-weight:500;
            display: block !important; 
        }
        
        .page-header__logo span{font-size:14px;text-transform:capitalize}.page-header__nav{float:right;margin:30px 55px 0 0;background-color:#fff}.page-header__nav li{display:inline-block;margin-left:5px}
    
        .page-header__nav-link{
            transition: all 0.3s ease;
        display:inline-block;
        font-size: 16px;
        text-transform:uppercase;
        padding:10px;-webkit-transition:background-color .2s;-o-transition:background-color .2s;transition:background-color .2s;color:#424242}
        
        
        .page-header__nav-link:hover,.page-header__nav-link{background-color:#1bbc9b;color:#fff}.page-footer{width:100%;min-height:85px;padding-bottom:30px;background-color:#2d3e50}.page-footer__inner{max-width:1024px;margin:0 auto}.page-footer__inner:after{content:'';display:table;clear:both}.page-footer__copyright{display:inline-block;margin:35px 0 0 45px;font-size:14px;color:#fff}.page-footer__gotop{display:block;float:right;width:45px;height:45px;margin:20px 45px 0 0;font-size:0;text-align:center;overflow:hidden;background-color:#1bbc9b;color:transparent;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}.page-footer__gotop:hover{background-color:#158f76}.page-footer__gotop:before{font-size:20px;line-height:45px;font-family:FontAwesome;content:"\f077";color:#fff}.portfolio{width:100%;min-height:680px;padding-top:50px;background-color:#fff;text-align:center}

.page-header {
    position: fixed;
}
.portfolio__inner{align-items: center; margin-left: 25%; margin-bottom: 60px}

.portfolio__inner:after{content:'';display:table;clear:both}.portfolio__title{font-size:28px;font-weight:400;margin-bottom:10px}.portfolio__descr{font-size:14px;font-weight:400;margin-bottom:40px}.portfolio__filter li{display:inline-block;margin:0 10px;cursor:pointer}.portfolio__filter-btn{display:inline-block;font-size:14px;text-transform:uppercase;padding:10px;color:#fff;background-color:#1bbc9b;-webkit-transition:background-color .2s;-o-transition:background-color .2s;transition:background-color .2s}.portfolio__filter-btn:hover,.portfolio__filter-btn.is-selected{background-color:#158f76}.portfolio__content{margin:45px auto 60px}.portfolio__item{position:relative;display:inline-block;width:180px;height:180px;margin:0 30px 35px;-webkit-border-radius:50%;border-radius:50%;overflow:hidden}.portfolio__item.is-hidden{display:none}.portfolio__item-img{display:inline-block;height:100%;margin:0 auto}.portfolio__item-caption{visibility:hidden;position:absolute;width:100%;height:100%;top:0;padding-top:35px;background-color:#1bbc9b;background-color:rgba(27,188,155,.8);-webkit-border-radius:50%;border-radius:50%;color:#fff;opacity:0;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}.portfolio__item:hover .portfolio__item-caption{opacity:1;visibility:visible}.portfolio__item-title{display:block;font-size:18px;margin-bottom:10px}.portfolio__item-title:before{content:"\f002";-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:40px;height:40px;-webkit-border-radius:50%;border-radius:50%;margin:0 auto 20px;padding-top:10px;background-color:#ccc;background-color:rgba(0,0,0,.5);font-family:FontAwesome;text-align:center}.portfolio__item-cat{display:block;font-size:15px}

.promo{
    width:100%;
    background:#323232 center 0 no-repeat;
    padding-bottom: 2px;
    background-attachment:fixed;
    text-align:center;
    color:#fff}

.promo__inner{max-width:1024px;margin:0 auto}.promo__inner:after{content:'';display:table;clear:both}

.promo__title{
    font-size:40px;
    text-transform:capitalize;
    padding-top: 120px;
    padding-bottom: 30px;
}

.promo__title span{font-weight:700}.promo__descr{max-width:580px;font-size:18px;line-height:1.1;color:#fff}

.dashboard_title{
    font-size: 30px;
}

.section{
    margin-bottom: 100px
}

.promo__btn{
    display: block;
    width:200px;
    margin:0 auto 45px;
    margin-top: 20px;
    padding:5px;background-color:#1bbc9b;
    font-size:15px;color:#fff;text-transform:uppercase;-webkit-transition:all .5s;
    -o-transition:all .5s;transition:all .5s;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}
    
    .promo__btn:hover{background-color:#b0ad0c}.promo__go-next{display:block;width:40px;height:40px;margin:0 auto;background-color:#fff;-webkit-border-radius:50%;border-radius:50%;font-size:0;color:#323232;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;-o-transition:transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}.promo__go-next:before{font-size:30px;line-height:40px;font-family:FontAwesome;content:"\f078"}.promo__go-next:hover{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
.team__inner{max-width:1024px;margin:0 auto}
.team__inner:after{content:'';display:table;clear:both}

.team__descr{font-size:14px;font-weight:400;margin-bottom:45px;color:#fff}.team__member{display:inline-block;position:relative;width:220px;margin:0 30px 30px;background-color:#fff}.team__member img{width:100%}.team__member-info{display:block;width:100%;height:190px;padding:15px 10px}.team__member-name{margin-bottom:5px;font-size:18px}.team__member-role{display:block;margin-bottom:20px;font-size:13px;font-style:italic;text-transform:capitalize}.team__member-descr{text-align:left;line-height:1.3}.team__member-soc{display:block;position:absolute;width:180px;height:50px;top:95px;left:50%;margin-left:-90px;background-color:#16a086;background-color:rgba(22,160,134,.8);white-space:nowrap;overflow:hidden;opacity:0;visibility:hidden;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}.team__member:hover .team__member-soc{opacity:1;visibility:visible}.team__member-soc li{display:inline-block}.team__member-icon{display:block;width:45px;height:50px;margin-left:-3px;color:#fff;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;font-size:0}.team__member-icon:hover{color:#c1c1c1}.team__member-icon:before{display:block;font-family:FontAwesome;font-size:30px;line-height:50px}.team__member-icon.fb:before{content:"\f09a"}.team__member-icon.tw:before{content:"\f099"}.team__member-icon.gplus:before{content:"\f0d5"}.team__member-icon.db:before{content:"\f17d"}@media screen and (max-width:1000px){.portfolio__item{width:170px;height:170px;margin:0 1.5% 35px}.team__member{width:190px;margin:0 20px 30px}}@media screen and (max-width:800px){.contact__form{max-width:50%;margin:0 2% 0 8%}.contact__form-input{width:100%}.contact__form-tarea{width:100%}.contact__card{width:40%}
.page-header__logo{margin:25px 0 0 10px}

.page-header__nav{margin:30px 10px 0 0}
.portfolio__item{width:190px;height:190px;margin:0 5% 35px}.team__member{width:180px;margin:0 10px 30px}}@media screen and (max-width:640px){.contact{padding:50px 10px}.contact__form{float:none;max-width:90%;margin:0 auto 50px}.contact__card{display:block;width:230px;margin:20px auto}.contact__card-title{text-align:center}.page-header__logo h1{display:none}.page-header__logo span{display:none}.page-header__nav li{margin-left:0}.portfolio{padding:50px 10px}.portfolio__filter li{margin:0 5px}.team{padding:55px 10px}.team__member{display:block;width:260px;margin:0 auto 30px}.team__member-info{height:auto}.team__member-descr{display:none}.team__member-soc{width:260px;top:220px;margin-left:-130px}}@media screen and (max-width:480px){.contact__form-submit{float:none;margin:0 auto}.page-header{min-height:50px}.page-header__inner{text-align:center}.page-header__logo{float:none;position:relative;display:inline-block;margin:20px auto 10px;text-align:left}.page-header__logo h1{display:block}.page-header__logo span{display:inline-block}.page-header__nav{float:none;margin:10px auto;padding-top:20px;text-align:center;border-top:1px solid #eee}.page-header__nav li{margin-left:0}.page-footer{padding:0 10px 30px;text-align:center}.page-footer__copyright{margin:35px auto 0}.page-footer__gotop{float:none;width:100%;margin:20px auto 0}.portfolio__filter li{display:block}}

/* Form */
.team{width:100%;background-color:#16a086; padding-top: 20px; padding-bottom: 40px}

.team__title{
    font-size:33px;
    font-weight:700;
    color:#FFD700;
    text-transform:capitalize;
    text-align: center;
    margin-bottom: 20px;
}

.subheading {
    font-family:'Times New Roman', Times, serif;
    text-transform: none;
    font-weight:200;
    color: white;
}

.team__title2{
    font-size:35px;
    font-weight:400;
    color:white;
    text-transform:capitalize;
    text-align: center;
    padding: 50px;
}

.team__title2 > h3 {
    padding-bottom: 20px
}

.team__title > h3 {
    padding-left: 300px;
    padding-right: 300px;

}

#logistic_container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 10px;
}
.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}
.form-container h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    color: #555;
}
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
.form-group input[type="submit"] {
    background-color: #28a745;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
}
.form-group input[type="submit"]:hover {
    background-color: #218838;
}

.predict_text {
    text-align: center;
}
/* Dashboard */
.dashboard__title {
    font-size: 60px;
}

.dashboard_title1 {
    font-size: 30px;
    padding: 30px;
    text-decoration: underline;
}

/* SQL */
.sql_containter {
    text-align: center;
}

.sql_title {
    background-color: rgb(89, 160, 124);
    padding: 20px;
    color: white
}
pre {
    font-size: 14px; /* Adjust this value to make the font smaller */
    line-height: 1.4; /* Adjust line spacing if needed */
    width: 10%
}
table.csv-table {
    margin-top: 20px;
    border-collapse: collapse;
    width: 100%;
}
table.csv-table th, table.csv-table td {
    border: 1px solid #ddd;
    padding: 8px;
}
table.csv-table th {
    background-color: #f4f4f4;
}
.content-wrapper {
    display: flex;
}

.sql2 {
    padding: 40px;
    width: 1500px;
    text-align: center
}

/*Footer*/
.footer{
    position: relative;
    align-items: center;
    text-align: center;
    margin: 30px;
}

.footer > p{
    position: absolute;
}

.footer > div > p {
    color: black;
}

/* Tablet Responsive Design (768px and below) */
@media screen and (max-width: 768px) {
    .page-header__nav {
        padding: 0 10px;
    }
    
    .page-header__nav-link {
        font-size: 14px;
        padding: 8px;
    }
    
    .promo__title {
        font-size: 32px;
        padding-top: 100px;
    }
    
    .team__title {
        font-size: 28px;
    }
    
    .team__title > h3 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .portfolio__inner {
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .image-grid {
        gap: 20px;
    }
    
    .image-item {
        flex-basis: 90%;
    }
    
    .sql2 {
        padding: 20px;
        width: 100%;
    }
    
    .content-wrapper {
        flex-direction: column;
    }
    
    .dashboard__title {
        font-size: 40px;
    }
}

/* Mobile Responsive Design (480px and below) */
@media screen and (max-width: 480px) {
    .page-header {
        position: relative;
        min-height: auto;
        padding: 10px 0;
    }
    
    .page-header__nav {
        float: none;
        margin: 10px 0;
        text-align: center;
    }
    
    .page-header__nav li {
        display: block;
        margin: 5px 0;
    }
    
    .page-header__nav-link {
        display: block;
        padding: 10px;
    }
    
    .promo__title {
        font-size: 24px;
        padding-top: 60px;
        padding-bottom: 20px;
    }
    
    .team__title {
        font-size: 24px;
    }
    
    .subheading {
        font-size: 16px;
        padding: 0 15px;
    }
    
    #logistic_container {
        padding: 0 15px;
    }
    
    .form-container {
        width: 100%;
    }
    
    .image-item {
        flex-basis: 100%;
    }
    
    .image-title {
        font-size: 20px;
    }
    
    .image-description {
        font-size: 16px;
    }
    
    .portfolio__inner {
        margin: 0 15px;
    }
    
    .sql2 {
        padding: 15px;
    }
    
    .sql_title {
        font-size: 24px;
    }
    
    pre {
        font-size: 12px;
        width: 100%;
        overflow-x: auto;
    }
    
    .dashboard__title {
        font-size: 32px;
    }
    
    .dashboard_title1 {
        font-size: 24px;
        padding: 20px;
    }
}

/* Additional fixes for very small screens */
@media screen and (max-width: 450px) {
    .promo__title {
        font-size: 20px;
        padding-top: 20px;
    }
    
    .form-container {
        padding: 10px;
    }
    
    .form-group input {
        padding: 8px;
    }

    body {
        margin-top: 0px;
    }
}

/*tablet */
@media screen and (max-width: 768px) {
    body {
        padding-top: 0;
    }
}

/* desktop */
@media (min-width: 1030px) {
    
    body {
      margin-top: 100px; 
    }
  
    
    .promo__title {
      padding-top: 40px; 
    }
  }