di{border: 1px solid red;}
.test{border: 1px solid red;}

.font1{font-size: 22px;}
.font2{font-size: 18px;}
.font3{font-size: 16px;}
.font4{font-size: 14px;}
.font5{font-size: 12px;}
.font6{font-size: 10px;}
.font7{font-size: 8px;}
.font8{font-size: 6px;}
.font9{font-size: 4px;}
.font10{font-size: 2px;}

.Mineral-Red{color: #B45253}
.Ashenvale-Nights{color: #124170;}
.Grim-Reaper{color: #120c3b;}
.Sunken-Ship{color: #112228;}
.Firefly{color: #334443;}

.main-title-color{color: #002600; font-weight: bold;}
.main-title-font{font-size: 18px;}
.title-font{font-size: 18px;}

.sub-title-font{font-size: 15px;}
.sub-title-font2{font-size: 12px;}

.sub-title-color2{color: #300000}

.foot2-font{font-size: 12px;}
.proj-subtitle{color: #020109;}

.inbox-recom-pg{
    margin-top:80px;
    background-color: #e6f5f9;
    width: 100%;
    }

.recom-page{font-size: 16px;}

.proj-pg{
    background-color: #fffdfa;
    margin-bottom: 100px;
    margin-top: 80px;
}

.pix-photo-pg{
    margin-bottom: 100px;
    margin-top: 80px;
}
.pix-photo-full{
    font-style: italic;
    font-size: 14px;
    margin-left: 50px;}

.nav-temp{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    width: 100%;
    max-width: 1320px;
    height: 70px;}


.sub-title-color{color: #2A629A;}
.text-color{color: #071952}

.justify-text {text-align: justify;}

.recom-button{font-size: 8px;}


.no-wrap {white-space: nowrap;}
.no-text-decor{text-decoration: none;}

*{box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

.body {font-family: Aria, sans-serif;
     font-size: 15px;}


.base_bg{background-color: white}

.reg_login_bg{
    background-color: #D4FFFC;}


.bg_edit{position: sticky; top: 10vh; left: 90vw; font-size: 16px; text-decoration: none;}

.edit_cover{top: 100px; left: 900px; position: absolute;}

.forms{
    background-color: #BCD3EA;
    border: 1px solid #1C223B;
    width: 80%;
    }


.form-style{
margin-bottom: 10px;}


.login_status{
    position: absolute;
    top: 55vh;
    left: 30vw;
    font-size: 12px;
    color: white;
    background-color: black;
    padding-top:10px;
    padding-right:5px;
    padding-left: 5px;
    border-radius: 20px;
    }


.navigate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 1000;
    margin-left: 10px;
    padding: 0 50px;
    background-color: #0F1C1D;
    color: white;
}


.brand_logo{
    height: 70px;
    width: 70px;
    }

.brand_logo2{
    height: 68px;
    width: 68px;
    margin-left: 10px;
    }

.nav-element{
    height:30px;
}

.navigation-button{font-size: 12px;}


.prof_img_container{
    width: 250px;
    margin-left: 2vw;
    padding-top: 28vh;
}

.profile_img{
    height: 60%;
    width: 60%;
    background-color: #d3e7e7;
    margin-left: 40px;
    margin-bottom: 5px;
}

.profile_img_capt{
    text-align: center;
    color: #002E18;
    background-color: #ECF8FF;
    font-size: 11px;
    width: 90%;
}


.content {
    display: flex;
    margin-top: 5px;
    margin-bottom: 70px;
    }


.left-column {
   flex: 1;
}



.middle-column {
  flex: 2;
  background-color: #1F375D;
  margin: 0 10px;

    border: 2px solid #ADDFDE;
    border-radius: 20px;
    box-shadow: 0 4px 8px #25303C;
}


.right-column {
  flex: 2;
  background-color: #1F375D;
  margin: 0 10px;

    border: 2px solid #ADDFDE;
    border-radius: 20px;
    box-shadow: 0 4px 8px #25303C;
}

.scroll-hidden {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}


.left-col-section1{
    border: 2px solid #ADDFDE;
    border-radius: 20px;
    box-shadow: 0 4px 8px #25303C;
    padding: 10px;
    position: sticky;
    top: 75px;
    left: 0;
    margin-top: 10px;
    background-color: #F8FFFF;

}


.left-col-section2{
    border: 1px solid #EEF6F3;
    border-radius: 5px;
    padding: 10px;
    position: sticky;
    top: 350px;
    left: 0;
    margin-top: 15px;
    font-size: 12px;
}





.mid-col-sections{
    border: 3px solid #97D5E0;
    border-radius: 20px;
    background-color: #FEFEFE;
    margin:20px 10px;
    padding: 10px;
}


.mid-col-head{
    display: flex;
    justify-content: space-between;
}

.mid-col-head-start{
    display: flex;
    justify-content: flex-start;
}


.mid-col-inner{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    width: 100%;
}

.mid-col-create{
    margin-right: 25px;
    font-size: 12px;
}

.line-divider{
    background-color: #1F375D;
    height: 1px;
    margin-bottom: 20px;
}

.line-divider2{
    border: 2px solid black;
    }

.section-border{
    display: flex;
    border: 2px solid #ADDFDE;
    border-radius: 20px;
    padding: 40px;
    }



.section-logo{
    height:40px;
    width: 50px;
    padding: 5px;

}


.grid-section-border{
    border: 2px solid #1F375D;
    border-radius: 20px;
    background-color: #F9FFFF;
    margin:20px 10px;
    padding: 10px;
    height: auto;
    }

.right-col-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);


}
.right-col-head{
    display: flex;
    justify-content: space-between;
}


.a_grid{
    border:  2px solid #97D5E0;
    border-radius: 20px;
    margin:10px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.project-font-img{
    height:200px;
    width: 100%;
    padding: 5px;
    cursor: pointer;
}

.project-detail-img{
    height:500px;
    width: 900px;
    padding: 5px;
    cursor: pointer;
}


.project-tool{
    background-color: #F9F8F4;
    border:  1px solid #E0DEDF;
    border-radius: 10px;
    padding: 2px;
}


.right-col-section{
    border: 2px solid #E0DEDF;
    border-radius: 20px;
    background-color: #FEFEFE;
    margin:20px 10px;
    padding: 10px;
}






.right-col-border{
    border: 1px solid #E0DEDF;
    border-radius: 20px;
    padding: 20px;
    }


.gallery_grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 10px;
    background-color: #F0F7FF;
}


.recom_div{
    border: 1px solid #ADDFDE;
    margin-bottom: 10px;
    border-radius:10px;
    box-shadow: 0 4px 8px #25303C;
    padding: 10px;
}

.img_gallery_border{
    border: 2px solid #BFE4F2;
    box-shadow: 0 4px 8px #25303C;
    border-radius:10px;
}

.img_grid_view{
    height: 200px;
    width: 100%;
    border-radius: 5px;

    }


.img_captions{
font-size: 12px;
}

.media_full_view{
    height: calc(100vh - 120px);
    width: 100%;
    box-shadow: 4px 4px 8px #404040;
    margin-top: 10px;
    margin-bottom: 10px
    }


.buttons .btn-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: 0.3s;
}
.buttons .btn-link:hover {
  background-color: #2980b9;
  border: 2px dashed black;
}



.content-box {position: relative; margin-bottom: 1em; }

/* Collapsed: show only 4 lines with ellipsis (…) */
.collapsed-content {overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    -webkit-box-orient: vertical;}

/* Expanded: show everything */
.expanded-content {display: block;}
.toggle-btn {cursor: pointer; color: blue; text-decoration: underline; display: inline-block;}

 /* Control distance between the Text and See more link */
   .content {margin-bottom: 5px;}


.other_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 45px;
    z-index: 1000;
    background-color: black;
    color: white;
    border-top: 1px solid #555;
    padding: 0 20px;
    width: 100%;
    max-width: 1320px

}


.footer-logo{height:30px; width:30px;}

.index-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;      /* 🔥 This vertically centers children */
    background-color: #0F1C1D;
    color: white;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    z-index: 1000;
    margin-left: 10px;
    padding: 0 20px;
    font-size: 12px;
}



.footer-tem-logo{height:25px; width:25px;}


.dropbtn {
  display: none;
}
.dropbtn-style{height: 28px; font-size: 9px;}


/* Extra large (large desktops): ≥1396px */
@media only screen and (min-width: 1396px) {

}

/* L (L/D): 1200px – 1395px */
@media only screen and (max-width: 1395px) {
.other_footer { max-width: 1140px; height: 43px;}
.foot2-font{font-size: 11px;}
.nav-temp{max-width: 1140px;}
.navigate {max-width: 1350px; height: 65px;}

.brand_logo {height: 65px; width: 65px; }

.login_status{top: 45vh;}

.prof_img_container{width: 200px; margin-left: 2vw; padding-top: 21vh;}
.profile_img_capt{font-size: 10px; width: 100%;}

}

/* Large (laptops/desktops): 992px – 1199px */
@media only screen and (max-width: 1199px) {
    .right-col-grid{grid-template-columns: repeat(1, 1fr);}

    .footer_temp{font-size: 13px; }

    .project-detail-img{height: 500px; width: 750px;}

    .login_status{top: 45vh; left: 35vw; font-size: 10px;}

    .bg_edit{ font-size: 12px;}

    .gallery_grid{grid-template-columns: repeat(4, 1fr);}
    .edit_cover{left: 600px;}

    .brand_logo {height: 60px; width: 60px; }

    .main-title-font{font-size: 16px;}
    .title-font{font-size: 15px;}
    .sub-title-font{font-size: 14px;}
    .sub-title-font2{font-size: 11px;}

    .body {font-size: 14px; }

    .recom-button{font-size: 7px;}

    .other_footer { max-width: 960px; height: 43px;}
    .foot2-font{font-size: 10px;}
    .footer-tem-logo{height:20px; width:20px;}
    .nav-temp{max-width: 960px; height: 60px;}
    .brand_logo2{ height: 58px; width: 58px;}
    .navigate {max-width: 1170px; height: 60px;}

    .media_full_view{height: calc(90vh - 120px); margin-top: 60px; margin-bottom: 30px;}
    .recom-page{font-size: 15px;}

}



/* Medium (tablets): 768px – 991px */
@media only screen and (max-width: 991px) {
    .content {flex-direction: column;}
    .right-col-grid{grid-template-columns: repeat(2, 1fr);}


    .project-detail-img{height: 400px; width: 600px;}

    .login_status{top: 34vh; left: 45vw; font-size: 8px;}

    .gallery_grid{grid-template-columns: repeat(3, 1fr);}
    .edit_cover{left: 300px;}

    .left-col-section1,
    .left-col-section2 {
       position: static;   /* Turn off sticky */
       top: auto;
   }


    .brand_logo {height: 55px; width: 55px; }
    .navigation-button{font-size: 11px;}
    .body {font-size: 13px; }

    .recom-button{font-size: 6px;}

    .prof_img_container{width: 150px; margin-left: 2vw; padding-top: 15vh;}
    .profile_img_capt{font-size: 9px; width: 120%;}


    .other_footer { max-width: 720px; height: 40px;}
    .foot2-font{font-size: 8px;}
    .footer-tem-logo{height:18px; width:18px;}
    .nav-temp{max-width: 720px; height: 50px;}
    .brand_logo2{ height: 48px; width: 48px;}

    .pix-photo-full{font-size: 12px;}
    .media_full_view{height: calc(70vh - 120px); margin-top: 120px; margin-bottom: 60px;}

    .navigate{height: 55px;}
    .recom-page{font-size: 14px;}

    .title-font{font-size: 14px;}
    .sub-title-font{font-size: 13px;}
    .sub-title-font2{font-size: 10px;}

}


/* Small (large phones): 576px – 767px */
@media only screen and (max-width: 767px) {

.index-footer {font-size: 11px; height: 40px;}
.footer-logo {height: 20px; width: 20px;}

.login_status{top: 23vh; left: 60vw; font-size: 6px;}

.gallery_grid{grid-template-columns: repeat(2, 1fr);}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropbtn {
  display: inline-block;   /* ✅ override here */
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block; }

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1; }

  .project-detail-img{height: 300px; width: 480px;}


 .brand_logo {height: 50px; width: 50px; }
 .navigation-button{font-size: 10px; padding: 5px;}

 .main-title-font{font-size: 14px;}
 .title-font{font-size: 13px;}
  .sub-title-font{font-size: 12px;}


 .recom-button{font-size: 5px;}

 .prof_img_container{width: 120px; margin-left: 2vw; padding-top: 7vh;}
 .profile_img_capt{font-size: 6px; width: 110%;}
 .profile_img{margin-left: 30px;}

    .other_footer { max-width: 540px; height: 35px;}
    .nav-temp{max-width: 540px; height: 40px;}
    .brand_logo2{ height: 38px; width: 38px;}

    .pix-photo-full{font-size: 10px;}

    .media_full_view{height: calc(55vh - 120px); margin-top: 180px;}

     .navigate{height: 50px;}
     .recom-page{font-size: 13px;}

}


/* Extra small (phones): 361px - 575px */
@media only screen and (max-width: 575px) {
  .right-col-grid{grid-template-columns: repeat(1, 1fr);}
  .index-footer {font-size: 8px; height: 30px;}
   .footer-logo {height: 15px; width: 15px;}

    .project-detail-img{height: 270px; width: 420px;}
   .login_status{top: 22vh; left: 50vw; font-size: 5px;}
    .edit_cover{left: 250px;}


     .brand_logo {height: 45px; width: 45px; }

     .dropbtn-style{height: 26px; font-size: 8px;}
     .navigation-button{font-size: 8px; padding: 2px;}

     .body {font-size: 12px; }

      .prof_img_container{width: 110px; margin-left: 2vw; padding-top: 8vh;}
        .profile_img_capt{font-size: 6px; width: 107%;}


    .footer-tem-logo{height:16px; width:16px;}
    .media_full_view{height: calc(50vh - 120px); margin-top: 200px;}

    .navigate{height: 45px;}
    .recom-page{font-size: 12px;}
    .pub-page{font-size: 9px;}

    .title-font{font-size: 12px;}
    .sub-title-font{font-size: 11px;}
    .sub-title-font2{font-size: 9px;}
}


/* Extra-Extra small (handset): < 361px */
@media only screen and (max-width: 361px) {

 .index-footer {font-size: 5px;}
  .footer-tem-logo{height: 10px; width: 10px;}
 .footer-logo {height: 10px; width: 10px;  margin-left: 5px;}

}