.banner-container{width:100%;margin-top:5%;display:flex;justify-content:center;align-items:center;overflow:hidden}.banner-image{width:100%;height:auto;max-width:100%;display:block}@media (max-width:768px){.banner-container{margin-top:10%}}@media (max-width:480px){.banner-container{margin-top:15%}}.navbar-container-pro{display:flex;justify-content:center;align-items:center;background-color:white;padding:10px 0;width:100%;position:sticky;margin-top:15%;z-index:100}.navbar-nav-pro{display:flex;list-style-type:none;padding:0;margin:0}.nav-item-pro{margin:0 20px}.nav-link-pro{text-decoration:none;font-size:2rem;color:black;font-weight:500;text-transform:capitalize;transition:color .5s ease-in-out,transform .3s ease-in-out}.nav-link-pro:hover{color:#3baadf}@media (max-width:768px){.navbar-nav-pro{flex-direction:column;align-items:center;margin-top:3%}.nav-link-pro{font-size:1.2rem}.nav-item-pro{margin:10px 0}}@media (max-width:480px){.navbar-container-pro{padding:5px 0}.navbar-nav-pro{flex-direction:column;align-items:center;margin-top:35%}.nav-link-pro{font-size:1rem}}.image-grid-container{display:flex;justify-content:center;padding:20px}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px}.image-item{position:relative;text-align:center;overflow:hidden;border-radius:10px}.image-item img{width:100%;height:auto;display:block;border-radius:10px;transition:transform .3s ease}.image-item:hover img{transform:scale(1.05)}.image-item p{position:absolute;bottom:0;left:0;width:100%;font-weight:600;color:white;font-size:2rem;padding:10px;margin:0;text-align:start;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.container{margin:0 auto;padding:100px 40px}.loading-text{color:gray}.error-text,.loading-text{text-align:center;font-size:1.2rem}.error-text{color:red}.projects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.project-card{position:relative;overflow:hidden;transition:transform .3s ease-in-out;cursor:pointer}.modal-container{position:relative;display:flex;align-items:center;justify-content:center}.modal-image{max-width:100%}.arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;color:#fff;background:rgba(0,0,0,.5);padding:10px 15px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.left-arrow{left:0}.right-arrow{right:0}.project-card:hover{transform:scale(1.05)}.project-image-container{width:100%;height:220px;overflow:hidden;position:relative}.project-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease-in-out}.project-title{font-size:16px;font-weight:700;text-align:left;color:#333;margin-top:10px}.project-category{font-size:14px;text-align:left;color:gray;margin-bottom:10px}.project-card:after,.project-card:before{content:"";position:absolute;width:100%;height:100%;background-color:rgba(43,23,75,.9);transform:scale(0);transition:transform .5s ease-in-out;z-index:2}.project-card:before{top:0;left:0;transform-origin:top left;clip-path:polygon(0 0,100% 0,0 100%)}.project-card:after{bottom:0;right:0;transform-origin:bottom right;clip-path:polygon(100% 100%,100% 0,0 100%)}.project-card .plus-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:1rem;font-weight:700;color:#3ba7db;z-index:3;opacity:0;transition:opacity .5s ease-in-out,transform .5s ease-in-out}.project-card:hover:after,.project-card:hover:before{transform:scale(1)}.project-card:hover .project-image{transform:scale(1.1)}.project-card:hover .plus-icon{transform:translate(-50%,-50%) scale(1);opacity:1}.custom-modal .modal-dialog{width:100vw!important;height:100vh!important}.modal-image{width:100%;height:auto;border-radius:5px}.blur-background{filter:blur(8px);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.blur-background:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);z-index:10}@media (max-width:1024px){.projects-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.projects-grid{grid-template-columns:repeat(1,1fr)}}@media (max-width:1024px){.image-grid{grid-template-columns:repeat(2,1fr)}.image-item p{font-size:1.5rem;padding:8px}}@media (max-width:600px){.image-grid{grid-template-columns:repeat(1,1fr)}.image-item p{font-size:1.2rem;padding:6px}}