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

.table > tbody > tr > td {
     vertical-align: middle;
    
}
.bg-lightyellow {background-color:#ffffe7}
.spacingDiv {height:80px;}
.btn {font-size:.85em!important}    
    
:target:before {
  content: '';
  display: block;
  height: 5rem;
  margin-top: -100px;
}
    
.btn-disabled {background-color:#eee!important; color:#999}
    
    

/* ================= HERO ================= */


.hero-section h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.3;
    color:#fff;
}

.hero-section span {
    color: #ffd966;
}

.hero-logo {
    max-width: 340px;
}

/* ================= DEFAULT (DESKTOP) ================= */
.hero-mobile {
    display: none;
}

/* ================= MOBILE & TABLET ================= */
@media (max-width: 768px) {

    .hero-desktop {
        display: none;
    }

    .hero-mobile {
        display: block;
    }

    .hero-mobile img {
        width: 100%;
        height: auto;
    }
}
    
/* ================= SECTIONS ================= */
.section-ypfc {
    /*background: #f8f9fa;*/
    background: url("../pics/yp-bg-ypfc.jpg");
    background-size: cover;
    padding: 60px 0;
}

.section-ypfc-benefit{
    background: url("../pics/yp-bg-ypfc-benefit.jpg");
    background-size: cover;
    padding: 60px 0;
}

    
.section-ypfc-worldclass {
background: url("../pics/yp-bg-world-class-accountancy.jpg");
background-size: cover;
padding: 60px 0;
}
    
.section-testimonails{
padding: 60px 0;
}
    
.section-prizes{
background-color:#e4e8ed;
padding: 60px 0;
}
    
.section-register{
background-color:#e4e8ed;
padding: 60px 0;
}
    
.section-faq{
padding: 60px 0;
}

.icon-text-item {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

.icon-col {
    display: table-cell;
    width: 80px;              /* SAME width for all icons */
    vertical-align: top;
}

.icon-col img {
    max-width: 60px;
}

.text-col {
    display: table-cell;
    padding-left: 15px;
    vertical-align: top;
}

.text-col h4 {
    margin-top: 0;
    font-weight: bold;
}

.section-gradient {
    background: linear-gradient(90deg, #dff3f5, #e6e1ff);
    padding: 70px 0;
}

    
.section-grey {
    background-color:#e4e8ed
}

.section-title {
    font-weight: 700;
}

.section-subtitle {
    max-width: 700px;
    margin: 15px auto 0;
    color: #666;
}

/* ================= LIST ================= */
.custom-list {
    padding-left: 30px;
}

.custom-list li {
    margin-bottom: 5px;
}

/* ================= BENEFITS ================= */
.benefit-box {
    background: #fff;
    border-radius: 10px;
    padding: 30px 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* ================= PACKAGES ================= */
.package-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    background-color:#fff;
}

.package-card h3 {
    color: #6a3fb4;
    font-weight: 700;
}

.package-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.package-card ul li {
    margin-bottom: 8px;
}

.package-card.featured {
    border: 2px solid #6a3fb4;
    box-shadow: 0 10px 30px rgba(106,63,180,0.2);
}
    
/* ================= PATHWAY ================= */
.pathway-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    height: 100%;
}

.pathway-item h5 {
    font-weight: 700;
    color: #0d6efd;
}

/* ================= INTRO ================= */
.intro-text {
    max-width: 900px;
    margin: 0 auto 15px;
    color: #555;
}

/* ================= TESTIMONIALS ================= */
.video-card {
    background: #000;
    color: #fff;
    border-radius: 12px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* ================= PRIZE WINNERS ================= */
.winner-card {
    background: #e9f5fb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    font-weight: 600;
}

/* ================= REGISTER ================= */
.register-box {
    background: #d8ecf8;
    border-radius: 12px;
    padding: 30px;
    height: 100%;
}

.register-box h5 {
    font-weight: 700;
    margin-bottom: 15px;
}
    
    
    
.icon-circle {
background-color: #03afe9; 
color: #fff;
width: 80px;
height: 80px;
border-radius: 50%;
display: inline-flex; 
align-items: center;
justify-content: center;
font-size: 32px;
}
    
    
#courses-btn {
color: #ffffff;
font-size: 24px;
font-weight: 700;
padding: 15px 40px;
text-shadow: none; 
border-radius: 50px; 
border: none; 
background: linear-gradient(to right, #4dc4d9, #9c67cf);
box-shadow: none; 
transition: background 0.3s ease; /* Smooth transition for hover */
}

#courses-btn:hover,
#courses-btn:focus,
#courses-btn:active,
.btn-custom:active:focus {
background: linear-gradient(to right, #3aa3b6, #8b55c1);
color: #ffffff; 
outline: none !important; 
}
    
.btn-purple {
color: #ffffff;
background-color: #382b49;
border-color: #382b49; 
}

.btn-purple:hover,
.btn-purple:focus {
color: #ffffff;
background-color: #4b3d5d;
border-color: #4b3d5d;
}


.btn-purple:active,
.btn-purple.active {
color: #ffffff;
background-color: #2e233a; 
border-color: #2e233a;
}
    
.panel-heading {
  padding: 10px;
}
.panel-title a {
  display: block;
  padding: 2px;
  text-align: left;
  position: relative;
  font-weight: bold;
  text-decoration: none;
}
.panel-title a:after {
  content: "\f107"; /* FontAwesome chevron-down */
  font-family: FontAwesome;
  position: absolute;
  right: 15px;
  transition: transform 0.3s;
}
.panel-title a[aria-expanded="true"]:after {
  transform: rotate(180deg);
}
    
.panel-body {text-align: left}


.floating-btn {
position: fixed;
right: 10px; /* Distance from the right edge */
z-index: 1000; /* Ensure it stays above other content */
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.floating-btn:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
text-decoration: none; /* Remove underline on hover for links */
opacity: 0.9;
}

/* 2. WhatsApp Button Specific Styling */
#whatsapp-btn {
background-color: #25D366; /* WhatsApp Green */
color: white;
bottom: 80px; /* Positioned 80px from the bottom */
}

/* 3. Back to Top Button Specific Styling (Placeholder) */
#back-to-top-btn {
background-color: #0087cd; /* Example color */
color: white;
bottom: 20px; /* Positioned 20px from the bottom (lower than WhatsApp) */
display: none; /* Hide by default and show with JavaScript */
}