body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #fff;
}

header {
    background-color: rgb(12, 3, 55);
    color: white;
    padding: 10px 20px;
    text-align: center;
}

.main {
    display: flex;
    justify-content: space-between; /* Aligns children (sections) to each side */
    padding: 20px;
}

.program-info {
    width: 70%;
    padding: 20px;
}

.program-info h2, .program-info h3 {
    color: #333;
}

.program-info ul {
    list-style: none;
    padding: 0;
}

.program-info li {
    padding: 5px 0;
}

.program-info button {
    padding: 10px 20px;
    background-color: #f48024;
    color: white;
    border: none;
    cursor: pointer;
}

.program-info button:hover {
    background-color: #c65300;
}

.application-form {
    width: 30%;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.application-form h3 {
    color: #f48024;
}

.application-form form {
    display: flex;
    flex-direction: column;
}

.application-form input, .application-form select {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
}
/*Second Section */

.program-details {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.detail {
    flex: 1;
    padding: 10px;
    text-align: center;
}

.icon {
    font-size: 24px;
    color: #f48024; /* Orange color similar to the icons in the screenshot */
}

h4 {
    margin-top: 5px;
    color: #333;
}

p {
    color: #666;
    font-size: 14px;
}
/*Scroll section */ 
.specializations {
            padding: 20px;
            max-width: 100%;
            overflow: hidden;
        }
        .specializations h2 {
            text-align: left;
            font-size: 24px;
            color: #333;
            position: relative;
        }
        .specializations h2::after {
            content: '';
            display: block;
            width: 50px;
            height: 2px;
            background-color: #066f7b;
            margin-top: 5px;
        }
        .scroll-container {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            white-space: nowrap;
            animation: scroll 20s linear infinite;
        }
        .specialization-card {
            display: inline-block;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
          
            margin:20px auto;
            padding: 20px;
            text-align: center;
            width: 200px;
            flex: 0 0 auto;
            transition: background-color 0.7s ease, color 0.72s ease;
        }
        .specialization-card ul{margin-left:10px;}
        .specialization-card img {
            height: 150px;
            margin-bottom: 10px;
        }
        .specialization-card h3 {
            font-size: 18px;
            color: #333;
        }
        .scroll-buttons {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
        }
        .scroll-buttons button {
            background-color: #ff7f0e;
            border: none;
            color: white;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
        }
        .specialization-card:hover {
            background-color: #ff7f0e;
            color: white;
        }
        .scroll-buttons button:hover {
            background-color: #e67609;
        }
/*         
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        } */

        /* next section-why */
        .reasons-section {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .reasons-section h2 {
            text-align: center;
            font-size: 28px;
            color: #333;
            position: relative;
        }
        .reasons-section h2::after {
            content: '';
            display: block;
            width: 80px;
            height: 2px;
            background-color: #ff7f0e;
            margin: 10px auto 20px;
        }
        .reasons {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .reason {
            flex: 1 1 calc(50% - 20px);
            margin: 10px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
        }
        .reason img {
            max-width: 100px;
            margin-right: 20px;
        }
        .reason h3 {
            font-size: 20px;
            color: #333;
            margin: 0;
        }
        .reason p {
            color: #666;
            margin: 5px 0 0;
        }
        .reason-number {
            font-size: 50px;
            color: #ff7f0e;
            margin-right: 20px;
        }
        /*Support Section */
        .support-section {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            background-color: #f1eee2; /* Adjust the background color as needed */
        }
        
        .support-item {
            width: 23%; /* Adjust based on container size */
            text-align: center;
            padding: 10px;
        }
        
        .support-item img {
            width: 150px; /* Adjust the size as needed */
            margin-bottom: 10px;
        }
        
        .support-item h3 {
            margin-bottom: 5px;
            font-size: 16px;
            color: #333; /* Adjust the color as needed */
        }
        
        .support-item p {
            font-size: 14px;
            color: #666; /* Adjust the color as needed */
        }
        
        @media (max-width: 768px) {
            .reason {
                flex: 1 1 100%;
            }
        }