body{
    background-color: #F9FAFB;
    color: #001E60;
}
.p-logo{
    color: #0053E2;
}
.p-footer{
    background-color: #001E60;
    color: white;
}
.p-welcome-section{
    background: #0053E2;
    color: white;
    background-image: url(./images/welcome-bg.png);
    background-repeat: no-repeat;
    background-position: top right;
}
.circle-icon-btn {
  background-color: #e5e7eb;         
  border: none;
  border-radius: 50%;
  padding: 6px;                      
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #4b5563;                    
  transition: background-color 0.2s ease, color 0.2s ease;
}

.circle-icon-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

.circle-icon-btn:hover {
  background-color: #0d6efd;          
  color: #ffffff;                   
}

.circle-icon-btn:focus {
  outline: none;
}
.circle-icon-btn img {
  width: 24px;
  height: 24px;
}
.circle-icon-btn:hover img{
 filter: invert(1)                   
}

.p-card{
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 30px;
}
.p-link-card {
  text-decoration: none;   
  color: inherit;         
  display: block;         
}

.p-link-card h4,
.p-link-card p {
  color: inherit;         
  margin: 0;
}

.p-link-card:hover {
  text-decoration: none;
}

.p-card .p-card-top{
    display: flex;
    margin-bottom: 24px;
}
.p-card .p-card-content h4, .p-card .p-card-content p{
    color: inherit;
    text-decoration: none;
}

.p-card .p-card-btn{
    background-color: #E0EAFB;         
    border: none;
    border-radius: 6px;
    padding: 6px;                      
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #4b5563;                    
    transition: background-color 0.2s ease, color 0.2s ease;
}
.p-card:hover .p-card-btn{
    background-color: #0053E2;

}
.p-card:hover .p-card-btn img{
    filter: brightness(0) invert(1);
    
}
.p-card.keka-card .p-card-icon{
    background-color: #DBFFEE;
    border-radius: 10px;
    padding: 10px;
}
.p-card.keka-card:hover{
    background-color: #F7FFFB;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
}

.p-card.sharepoint-card .p-card-icon{
    background-color: #E6F1FF;
    border-radius: 10px;
    padding: 10px;
}
.p-card.sharepoint-card:hover{
    background-color: #F9FCFF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
}

.p-card.helpdesk-card .p-card-icon{
    background-color: #F2E5FF;
    border-radius: 10px;
    padding: 10px;
}
.p-card.helpdesk-card:hover{
    background-color: #FCF9FF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
}

.p-card.outlook-card .p-card-icon{
    background-color: #FFF4E6;
    border-radius: 10px;
    padding: 10px;
}
.p-card.outlook-card:hover{
    background-color: #FFFBF6;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
}

.p-right-model-box .offcanvas-header{
    border-bottom: 1px solid #e1e1e1;
}
.p-contact-card{
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 16px 24px;
}
.p-contact-card .p-contact-icon{
    background-color: #E6F1FF;
    border-radius: 6px;
    padding: 8px 10px;
}
.p-right-model-box {
    min-width: 560px;
}
.p-right-model-box .offcanvas-header{
    padding: 16px 30px;
}
.p-right-model-box .offcanvas-body{
    padding: 16px 30px;
}



@media (max-width:991px) {
    .p-welcome-section{
       background-size: 30%;
       background-position: bottom right; 
    }
}
@media (max-width:600px) {
    .p-right-model-box{
       min-width: auto;
    }
}