body {
   margin: 0;
   font-family: 'Segoe UI', sans-serif;
   background: #f2f4f8;
   color: #1d1345;
 }

 .container {
   max-width: 1100px;
   margin: 40px auto;
   background: #fff;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
   border-radius: 12px;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
   animation: fadeIn 1s ease;
 }

 .image-section {
   flex: 1 1 400px;
 }

 .image-section img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .details-section {
   flex: 1 1 600px;
   padding: 30px;
 }

 .details-section h1 {
   font-size: 32px;
   margin-bottom: 15px;
 }

 .details-section p {
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 20px;
 }

 .info-box {
   margin-bottom: 15px;
   font-size: 16px;
 }

 .info-box i {
   color: #1d1345;
   margin-right: 8px;
 }

 .enroll-btn {
   display: inline-block;
   padding: 12px 25px;
   background-color: #1d1345;
   color: #fff;
   border-radius: 25px;
   text-decoration: none;
   font-size: 16px;
   transition: background-color 0.3s ease;
   margin-right: 10px;
   cursor: pointer;
   border: none;
 }

 .enroll-btn:hover {
   background-color: #3c2c8f;
 }

 .add-cart-btn {
   cursor: pointer;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @media (max-width: 768px) {
   .container {
     flex-direction: column;
     margin-left: 15px;
     margin-right: 15px;
   }
 }

 @media (max-width: 400px) {
   .container {
     flex-direction: column;
     margin-left: 15px;
     margin-right: 15px;
   }

  
   .enroll-btn {
     float: left;
     width: 48%;
     margin-right: 4%;
     
     font-size: 0.95rem;
     box-sizing: border-box;
   }

   .enroll-btn:last-child {
     margin-right: 0;
   }

   /* Clear float */
   .enroll-btn::after {
     content: "";
     display: table;
     clear: both;
   }


 }

 @media (max-width: 375px) {
   .container {
     flex-direction: column;
     margin-left: 15px;
     margin-right: 15px;
   }

  
   .enroll-btn {
     float: left;
     width: 48%;
     margin-right: 4%;
     font-size: 0.95rem;
     box-sizing: border-box;
   }

   .enroll-btn:last-child {
     margin-right: 0;
   }

   /* Clear float */
   .enroll-btn::after {
     content: "";
     display: table;
     clear: both;
   }


 }

 /* Toast styling */
 #toast {
   visibility: hidden;
   min-width: 250px;
   margin-left: -125px;
   background-color: #333;
   color: #fff;
   text-align: center;
   border-radius: 4px;
   padding: 16px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   bottom: 30px;
   font-size: 17px;
 }

 #toast.show {
   visibility: visible;
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }

 @keyframes fadein {
   from {
     bottom: 0;
     opacity: 0;
   }

   to {
     bottom: 30px;
     opacity: 1;
   }
 }

 @keyframes fadeout {
   from {
     bottom: 30px;
     opacity: 1;
   }

   to {
     bottom: 0;
     opacity: 0;
   }
 }