@charset "utf-8";
/* CSS Document */

/* CSS Document © 2025 Envinto */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


::-moz-selection{ background:#7b7d7f; color:var(--primary); text-shadow:none;}
::selection { background:#7b7d7f; color:var(--primary); text-shadow:none;}
*,
*:before, *:after{-webkit-box-sizing:  border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 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, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, textarea, input { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; outline:none; font-family:"Outfit", sans-serif;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {color:#000000; background: #ffffff; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow:hidden; overflow-y: scroll;}
:root {overflow: hidden; overflow-y: scroll; --primary: #EE2A68; --secondary:#000000; --global: #ffffff; --parallax-translate: 0px; --slide-w: clamp(260px, 68vw); overflow: hidden; overflow-y: scroll;}
body::-webkit-scrollbar { display: none; }
a { text-decoration:none; transition:all 0.25s ease-out 0s; outline: none; box-shadow: none;}
a:hover{text-decoration: none;}
h1, h2, h3 , h4, h5, h6, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{font-family: "Outfit", sans-serif;}
p, p span { font-family:"Outfit", sans-serif; font-weight: 300;}
img { border:0px;}
ol, ul, li{ 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;}
* {-webkit-appearance: none;}
::-webkit-input-placeholder {
  color:var(--primary-color);
}
::-moz-placeholder { 
  color:var(--primary-color);
}
:-ms-input-placeholder {
  color:var(--primary-color);
}
:-moz-placeholder {
  color:var(--primary-color);
}

section, header, footer {width: 100%; float: left;}

img{max-width: 100%; display: block;}

strong{font-weight: bold;}

.container{width: 94%; max-width: 1320px; margin: 0 auto;}

.menu-open { overflow: hidden;}


/* ----------login-wrapp------------- */
.login-wrapp { height: 100vh; overflow: hidden; padding: 10px;}
.login-wrapp .login-row { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; height: 100%;}
.login-wrapp .login-col1 { width: 48%; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center;}
.login-wrapp .login-col2 { width: 48%; height: 100%;  position: relative;}
.login-wrapp .login-col2 .img { width: 100%; height: 100%;}
.login-wrapp .login-col2 .img img { width: 100%; height: 100%; object-fit: cover; object-position: bottom;  border-radius: 10px;}
.login-wrapp .login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(29px); padding: 30px; text-align: center; width: 90%; max-width: 350px;}
.login-wrapp .login-col1 .logo { width: 300px; margin: 0 0 20px;}
.login-wrapp .login-col1 p { font-size: 20px; font-weight: 500;}
.login-wrapp .login-box h3 { font-size: 32px; color: var(--global); font-weight: 500; margin: 0 0 10px;}
.login-wrapp .login-box p { font-size: 16px; color: var(--global);  margin: 0 0 20px;}
.login-wrapp .input-group { width: 100%; margin: 0 0 10px; position: relative;}
.login-wrapp .input-group:last-child { margin: 0 0 0;}
.login-wrapp .input-group input {  width: 100%; height: 52px;padding: 15px; background: none; border: 1px solid var(--global); color: var(--global); border-radius: 10px; margin: 0 0 10px; font-size: 16px;}
.login-wrapp .input-group.checkbox-group input { width: 0;  height: 0; padding: 0 0 0; opacity: 0;}
.login-wrapp .input-group.checkbox-group label { font-size: 16px; color: var(--global); padding-left: 20px; position: relative; cursor: pointer;}
.login-wrapp .input-group.checkbox-group label:after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--global); left: 0; border-radius: 3px; top: 4px;}
.login-wrapp .input-group.checkbox-group label:before { content: ""; position: absolute; width: 8px; height: 8px; background: var(--global); border-radius: 2px; left: 2.84px; top: 7px; opacity: 0;  transition: all .25s ease-in-out;}
.login-wrapp .input-group.checkbox-group input[type="checkbox"]:checked + label:before { opacity: 1;}
.login-wrapp .input-group button { padding: 10px 28px 12px; background: var(--secondary); border: 1px solid var(--secondary); color: var(--global); font-family: "Outfit", sans-serif; font-size: 16px; border-radius: 8px; margin: 15px 0 0; transition: all .25s ease-in-out; cursor: pointer;}
.login-wrapp .input-group button:hover { color: var(--secondary); background: none;}
.login-wrapp .input-group .show-password {position: absolute; width: 20px; height: 20px; right: 15px; top: 16px;}
.login-wrapp .input-group .hide-password { position: absolute; width: 100%; height: 100%;top: 0; left: 0; transition: all .25s ease-in-out; opacity: 0;}
.login-wrapp .input-group .show-password img { width: 100%; height: 100%; transition: all .25s ease-in-out;}

/* ----------dashboard-wrapp--------------- */
.dashboard-wrapp { background: #d3d3d3; padding: 15px; height: 100vh; padding-left: 245px; overflow-y: auto;}
.dashboard-wrapp .side-bar { width: 215px; background: var(--global); padding: 20px; border-radius: 10px;  height: calc(100vh - 30px); position: fixed; top: 15px; left: 15px; display: flex; flex-wrap: wrap; flex-direction: column;}
.dashboard-wrapp .side-bar .logo { width: 100%;  margin: 0 0 50px;}
.dashboard-wrapp .side-bar .side-bar-menu { width: 100%;}
.dashboard-wrapp .side-bar .side-bar-menu ul { width: 100%;}
.dashboard-wrapp .side-bar .side-bar-menu ul li {font-size: 16px;color: var(--secondary);font-weight: 500; margin: 0 0 5px;}
.dashboard-wrapp .side-bar .side-bar-menu ul li a { display: flex; width: 100%; align-items: center; color: var(--secondary); padding: 12px; border-radius: 6px;}
.dashboard-wrapp .side-bar .side-bar-menu ul li a .icon { width: 25px; position: relative; margin: 0 10px 0 0;}
.dashboard-wrapp .side-bar .side-bar-menu ul li a .icon img { width: 100%; height: 100%; transition: all .25s ease-in-out;}
.dashboard-wrapp .side-bar .side-bar-menu ul li a .icon .hover-icon { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: all .25s ease-in-out;}
.dashboard-wrapp .side-bar .side-bar-menu ul li a:hover { background: #b5b3ff3b; color: #7371B5;}
.dashboard-wrapp .side-bar .side-bar-menu ul li a:hover .icon > img {  opacity: 0;}
.dashboard-wrapp .side-bar .side-bar-menu ul li a:hover .icon .hover-icon { opacity: 1;}
.dashboard-wrapp .side-bar .side-bar-menu ul li.active a { background: #b5b3ff3b; color: #7371B5;}
.dashboard-wrapp .side-bar .side-bar-menu ul li.active a .icon > img {  opacity: 0;}
.dashboard-wrapp .side-bar .side-bar-menu ul li.active a .icon .hover-icon { opacity: 1;}
.dashboard-wrapp .side-bar .logut-btn { margin: auto 0 0;  padding: 10px 0 0; border-top: 1px solid #b0b0b0;}
.dashboard-wrapp .side-bar .logut-btn a { display: flex;  width: 100%;  align-items: center; color: #e80101; padding: 12px; border-radius: 6px;}
.dashboard-wrapp .side-bar .logut-btn a .icon { width: 25px; margin: 0 10px 0 0;}



/* ------------header------------- */
.header { width: 100%; background: var(--global); padding: 15px; display: flex; flex-wrap: wrap; border-radius: 10px; justify-content: space-between; align-items: center; margin: 0 0 15px;}
.header h2 {font-size: 20px; font-weight: 500;}
.header .header-right { width: auto; display: flex; flex-wrap: wrap; align-items: center;}
.header .instruct-btn { width: auto; display: inline-block; background: #7371B5; color: var(--global); padding: 10px 20px; border-radius: 4px; font-size: 16px; border: 1px solid #7371B5; margin: 0 10px 0 0;}
.header .instruct-btn:hover { color: #7371B5; background: none;}
.header .profile { width: auto;}
.header .profile a { width: auto;  display: flex; flex-wrap: wrap; align-items: center; color: var(--secondary);}
.header .profile a .img { width: 30px; height: 30px; margin: 0 0 0 10px;}
.header .profile a .img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.header .profile a:hover { color: #7371B5;}



.detail-wrapp {width: 100%; background: var(--global); border-radius: 10px;}
.detail-wrapp .table-header { padding: 15px; margin: 0 0 15px;}
.detail-wrapp .table-header .text-fields { width: 100%; display: flex; flex-wrap: wrap;}
.detail-wrapp .table-header .text-fields .text-field { width: fit-content;  margin: 0 15px 0 0;}
.detail-wrapp .table-header .text-fields .text-field select { width: 180px; padding: 10px; color: #7371B5; border: 1px solid #7371B5; border-radius: 6px; font-family: "Outfit", sans-serif; font-size: 16px;}
.detail-wrapp .table-header .text-fields .text-field input { width: 180px;  padding: 10px; color: #7371B5; border: 1px solid #7371B5; border-radius: 6px; font-family: "Outfit", sans-serif; font-size: 16px;}
.detail-wrapp .table-outer { width: 100%; overflow-x: auto; padding: 0 0 15px;}
.detail-wrapp .table-outer table { width: 100%; text-align: center; font-size: 14px;}
.detail-wrapp .table-outer table thead { background: #7371B5;}
.detail-wrapp .table-outer table thead th { padding: 10px; color: var(--global);}
.detail-wrapp .table-outer table td {  padding: 10px;}
.detail-wrapp .table-outer table td .time {  color: #8a8a8a;}
.detail-wrapp .table-outer table td .complete { padding: 4px 10px; display: inline-block; background: #04cb00;  border-radius: 20px;}
.detail-wrapp .table-outer table td .progress {  width: 100%; display: block; height: 8px; background: #d7d7d7; border-radius: 14px;}
.detail-wrapp .table-outer table td .progress .progress-bar { width: 50%; display: block; height: 100%; background: #7371b5; border-radius: 14px;}

.dashboard-wrapp .summary-cards { width: 100%; display: flex; flex-wrap: wrap; margin: 0 0 15px;}
.dashboard-wrapp .summary-cards .card { width: 23.5%; margin: 0 2% 0 0; background: var(--global); padding: 30px; border-radius: 10px;  text-align: center;}
.dashboard-wrapp .summary-cards .card:nth-child(4n) { margin-right: 0;}
.dashboard-wrapp .summary-cards .card h3 { font-size: 34px; font-weight: 500;  margin: 0 0 10px;}
.dashboard-wrapp .summary-cards .card  p {  font-size: 16px; line-height: 1.56;}
.progress-wrapp { width: 100%;  display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 15px;}
.progress-wrapp .detail-wrapp {  width: 71%;}
.detail-wrapp h3 {  font-size: 20px; font-weight: 500; padding: 15px;}
.detail-wrapp .table-outer table td .pending { padding: 4px 10px; display: inline-block; background: #ffa818; border-radius: 20px;}
.detail-wrapp .table-outer table td .in-progress { padding: 4px 10px; display: inline-block; background: #dddb00;  border-radius: 20px;}
.detail-wrapp .table-outer table td .late { padding: 4px 10px; display: inline-block; background: #ff3636;  border-radius: 20px;}
.activity-wrapp { width: 27%;  background: var(--global); padding: 15px; border-radius: 10px;}
.activity-wrapp h3 {  font-size: 20px; font-weight: 500; margin: 0 0 10px;}
.activity-wrapp ul { width: 100%;}
.activity-wrapp ul li { font-size: 14px; line-height: 1.56; padding-left: 10px; position: relative;}
.activity-wrapp ul li:before { content: "\2022"; position: absolute; left: 0; font-size: 19px; top: -3px;}

.detail-wrapp .table-outer table td .btn-edit {display: inline-block; color: #7371B5;}
.detail-wrapp .table-outer table td .btn-edit:hover { color: var(--secondary);}
.detail-wrapp .table-outer table td .btn-delete {  display: inline-block; color: #ff3636;}
.detail-wrapp .table-outer table td .btn-delete:hover { color: var(--secondary);}

.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0;width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
.modal .modal-content { background: var(--global); width: 90%; max-width: 700px; margin: 8% auto; padding: 25px; border-radius: 8px;position: relative;}
.modal .modal-content h2 { font-size: 20px; font-weight: 500; margin: 0 0 12px;}
.modal .modal-content .form-group { width: 100%; margin: 0 0 15px;}
.modal .modal-content .form-group label { font-size: 14px; margin: 0 0 5px;display: block;}
.modal .modal-content .form-group select { width: 100%; padding: 10px; color: #7371B5; border: 1px solid #7371B5; border-radius: 6px; font-family: "Outfit", sans-serif; font-size: 16px; cursor: pointer; outline: none;}
.modal .modal-content .taskRow { border: 1px solid #7371B5; padding: 10px; margin-bottom: 10px; border-radius: 6px; background: #fafafa;}
.taskRow .task-fields { display: flex; gap: 10px;}
.taskRow .task-fields input, select { flex: 1;}
.modal .modal-content .taskRow select {width: 100%; padding: 10px; color: #7371B5; border: 1px solid #7371B5; border-radius: 6px; font-family: "Outfit", sans-serif; font-size: 16px; cursor: pointer; outline: none;}
.taskRow .task-fields  input[type="date"] { width: 110px;}
.taskRow .task-fields .removeTask { background: #ff6961; border: none; color: #fff; padding: 6px 10px; cursor: pointer;  border-radius: 4px;}
.modal .modal-content .btn-add-task { width: auto; display: inline-block; background: none; color: #7371B5; padding: 10px 20px; border-radius: 4px; font-size: 16px; border: 1px solid #7371B5; margin: 0 10px 0 0; font-family: "Outfit", sans-serif; transition: all .25s ease-in-out;}
.modal .modal-content .submit-task { width: auto; display: inline-block; background: #7371B5; color: var(--global); padding: 10px 20px; border-radius: 4px; font-size: 16px; border: 1px solid #7371B5; margin: 0 10px 0 0; font-family: "Outfit", sans-serif;  transition: all .25s ease-in-out;}
.modal .modal-content .btn-add-task:hover { background: #7371B5; color: var(--global);}
.modal .modal-content .submit-task:hover { background: none; color: #7371B5;}


.team-section { background: none;}
.team-section .team-grid { width: 100%;display: flex; flex-wrap: wrap;}
.team-section .team-grid .team-card { width: 32%; margin: 0 2% 20px 0; background: var(--global); padding: 15px; border-radius: 10px;}
.team-section .team-grid .team-card .team-img { width: 80px; margin: 0 0 15px;}
.team-section .team-grid .team-card .team-img img { aspect-ratio: 1 /1;  object-fit: cover; border-radius: 50%;}
.team-section .team-grid .team-card h3 { padding: 0 0 0; margin: 0 0 6px; font-size: 18px;}
.team-section .team-grid .team-card p {  font-size: 16px; margin: 0 0 5px;}
.team-section .team-grid .team-card ul { font-size: 16px; line-height: 1.56; margin: 0 0 15px;}
.team-section .team-grid .team-card:nth-child(3n) { margin-right: 0;}
.team-section .team-grid .team-card .team-actions { width: 100%;}
.team-section .team-grid .team-card .team-actions .edit-btn { width: auto; display: inline-block;  background: none; color: #7371B5; padding: 10px 20px; border-radius: 4px; font-size: 16px;  border: 1px solid #7371B5; margin: 0 10px 0 0; font-family: "Outfit", sans-serif; transition: all .25s ease-in-out;}
.team-section .team-grid .team-card .team-actions .delete-btn { width: auto; display: inline-block; background: #7371B5; color: var(--global); padding: 10px 20px; border-radius: 4px;  font-size: 16px; border: 1px solid #7371B5;  margin: 0 10px 0 0; font-family: "Outfit", sans-serif; transition: all .25s ease-in-out;}
.team-section .team-grid .team-card .team-actions .edit-btn:hover { background: #7371B5; color: var(--global);}
.team-section .team-grid .team-card .team-actions .delete-btn:hover { background: none; color: #7371B5;}



.analytics-page { background: none;  padding: 0 0 0;}
.analytics-page .chart-row { width: 100%; display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between; margin: 0 0 15px;}

.analytics-page  .project-progress { background: var(--global); padding: 20px; border-radius: 10px;}
.analytics-page h3 { padding: 0 0 0; margin: 0 0 15px;}
.analytics-page .project-progress .progress-item { width: 100%; margin: 0 0 15px;}
.analytics-page .project-progress .progress-item span { font-size: 16px; font-weight: 600;}
.analytics-page .project-progress .progress-bar { background: #ddd; height: 8px; border-radius: 5px; margin: 5px 0; width: 100%;}
.analytics-page .project-progress .progress-bar > div { height: 8px; background: #7371B5; border-radius: 5px;}
.analytics-page .project-progress .progress-item small { font-size: 14px;}

.analytics-page .chart-box { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.07); width: 100%;}
.analytics-page .chart-row .chart-box { width: 49%;}



.task-inner { width: 100%; max-width: inherit; background: none;  padding: 0 0 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.task-inner .task-info-box { width: 49%; background: #fff; padding: 20px; border-radius: 10px; margin-bottom: 15px;}
.task-inner .task-updates { width: 49%; background: #fff; padding: 20px; border-radius: 10px;  margin-bottom: 15px;}
.task-inner .task-updates .task-update-box { width: 100%; margin: 0 0 20px;}
.task-inner .task-updates h3 { padding: 0 0 0; margin: 0 0 15px;}
.task-inner .task-updates select { width: 100%; border: 1px solid #7371B5; color: #7371B5; font-family: "Outfit", sans-serif; font-size: 16px; padding: 15px; cursor: pointer; outline: none; border-radius: 6px;}
.task-inner .task-updates textarea { width: 100%; border: 1px solid #7371B5; color: #7371B5; font-family: "Outfit", sans-serif; font-size: 16px; padding: 15px; resize: none;border-radius: 6px; margin: 0 0 15px;}
.task-inner .task-updates .submit-comment { background: #7371B5; color: var(--global); font-size: 16px; font-family: 'Outfit'; padding: 10px 20px;  border: 1px solid #7371B5; transition: all .25s ease-in-out; border-radius: 6px; cursor: pointer;}
.task-inner .task-updates .submit-comment:hover { color: #7371B5; background: none;}
.task-inner .comment-list { width: 100%; padding: 20px; background: var(--global); border-radius: 10px; margin: 0 0;}
.task-inner .comment-list h3 {  padding: 0 0 0;  margin: 0 0 20px;}
.task-inner .comment-list .comment-item { padding: 0  0 0;  margin: 0 0 20px;}
.task-inner .task-info-box .task-row {  font-size: 15px; margin: 0 0 15px;}
.status-badge.completed {  background: #2ecc71;  padding: 3px 10px 4px;  border-radius: 20px;  font-size: 13px;  color: #fff;}
.task-inner .progress {  background: #ddd;  height: 8px;  border-radius: 5px;  width: 100px;  display: inline-block; margin-left: 10px;}
.task-inner .progress .progress-bar {  background: #7371B5;  height: 8px;  border-radius: 5px;}
.task-inner .comment-list p {  font-size: 16px;  margin: 0 0 5px;}