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

 body {
     font-family: 'Arial', sans-serif;
     /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
     background: linear-gradient(135deg, #ff6b6b, #feca57);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
 }

 .container {
     max-width: 400px;
     width: 100%;
     background: rgba(255, 255, 255, 0.95);
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     backdrop-filter: blur(10px);
 }

 /* image */
 .image {
     border-radius: 50%;
     width: 100px;
     height: 100px;
     justify-content: center;
     display: inline;
 }

 .header {
     /* background: linear-gradient(135deg, #ff6b6b, #feca57); */
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     padding: 30px 30px;
     text-align: center;
     color: white;
 }

 .header h1 {
     font-size: 2.2em;
     font-weight: bold;
     margin-bottom: 10px;
     margin-top: 10px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .header p {
     font-size: 15px;
     opacity: 0.9;
     text-shadow: 8px 8px 5px rgba(0, 0, 0, 0.3);
     text-align: left;
 }

 /* title-logo */
 .title-logo {
   display: flex;
     justify-content: center;
     /* horizontal center */
     align-items: center; 
     margin-bottom: 15px;
     margin-top: 10px;
 }
.title-logo img {
    width: 130px;
}
 .logoFb {
   display: flex;
     justify-content: center;
     align-items: center; 
     margin-bottom: 5px;
     
 }
.logoFb img {
    width: 180px;
}

 .content {
     display: grid;
     /* grid-Row: 2; */
     grid-template-columns: 1fr 1fr;
     grid-column: 2 / 3;
     gap: 10px;
 }

 .links {
     padding: 10px 25px;
 }

 .link-item {
     display: block;
     margin-bottom: 5px;
     text-decoration: none;

 }

 .link-btnSingle {
     align-items: center;
     display: flex;
     padding: 7px 4px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border-radius: 10px;
     font-size: 1.1em;
     font-weight: 500;
     transition: all 0.3s ease;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
     border: none;
     width: 100%;
     text-align: center;
 }
 .link-btn {
     align-items: center;
     padding: 7px 4px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border-radius: 10px;
     font-size: 1.1em;
     font-weight: 500;
     transition: all 0.3s ease;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
     border: none;
     width: 100%;
     text-align: center;
 }
 .link-btn2 {
     align-items: center;
     padding: 7px 4px;
     background: linear-gradient(135deg, #764ba2 0%,  #667eea 100%);
     color: white;
     border-radius: 10px;
     font-size: 1.1em;
     font-weight: 500;
     transition: all 0.3s ease;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
     border: none;
     width: 100%;
     text-align: center;
 }

 .link-btn2:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
     background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
 }
 .link-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
     background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
 }
 .link-btnSingle:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
     background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
 }

 .parent {
     display: flex;
     justify-content: center;
     /* horizontal center */
     align-items: center;
     /* vertical center */
 }

 .Logo {
     width: 36px;
     border-radius: 50%;
     margin-right: 10px;
 }
 .p{
    font-size: 17px;
 }

 .link-icon {
     width: 24px;
     height: 24px;
     margin-right: 5px;
     filter: brightness(0) invert(1);
 }

 .footer {
     text-align: center;
     padding: 25px 30px;
     background: #f8f9ff;
     color: #666;
     font-size: 0.9em;
 }

 .social-links {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-top: 15px;
 }

 .social-links a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: #667eea;
     color: white;
     border-radius: 50%;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .social-links a:hover {
     background: #764ba2;
     transform: scale(1.1);
 }

 @media (max-width: 767px) {
     .header h1 {
         font-size: 1.8em;
     }

     .container {
         margin: 10px;
     }

     .link-btn {
     align-items: center;
     padding: 7px 4px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border-radius: 10px;
     font-size: 1.1em;
     font-weight: 500;
     transition: all 0.3s ease;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
     border: none;
     width: 100%;
     text-align: center;
 }
 .Logo {
     width: 30px;
     border-radius: 50%;
     margin-right: 10px;
 }
 .p{
    font-size: 15px;
 }

 }