/* General Styles */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    background-image: url(../images/Be-Career-Ready.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header/Hero Section */
.hero-section {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.logo {
    text-align: left;
    margin-bottom: 50px;
}

.main-content {
    margin-bottom: 50px;
}
.brain-image {
    position: absolute;
    left: 0;    top: 120px;
}

.ai-image {
    position: absolute;
    right: -70px;
    top: -40px;
}
.text-content {
    text-align: center;
    padding-bottom: 60px;
}

.hero-section h1 {
    height: 150px;
    font-size: 4em;
    font-weight: 100;
    margin: 0;
    line-height: 1.1;
    padding-bottom: 40px;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.rocket-icon {
    width: 33px;
    height: 52px;
    rotate: none;
    transform: rotate(
22deg);
}

.text-content p {
    font-size: 1.5em;
}

p.bottom-text {
    font-size: 1.5em;
    width: 600px;
    text-align: center;
}
.hero-section .highlight {
    font-weight: 700;
}

.zoom-in-zoom-out {
  margin: 24px;
  animation: zoom-in-zoom-out 2s ease-out infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
.brain-graphic {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
}

.brain-image img {
    width: 230px;
}

.ai-image img {
    width: 600px;
    mix-blend-mode: screen;
    opacity: .7;
}
.joinTitle p {
    padding: 0;
    margin: 0;
}

.joinTitle h2 {
    padding: 0;
    margin: 0;
    font-size: 2.3em;
}
.cta-button {
    text-decoration: none;
    background-color: #6666cc;
    color: #fff;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1em;
    margin: 19px 0;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: rgb(178 86 227) 5px 4px 15px;
    display: inline-block;
}

.cta-button:hover {
    background-color: #4a148c;
}

.ai-graphic {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 300px;
    height: 300px;
    background-image: url('https://via.placeholder.com/300x300/6a1b9a/ffffff?text=AI+Brain+Graphic');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Expert Info Section */
.expert-info-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 20px 10px;
    position: relative;
    z-index: 10;
    gap: 40px;
    border: 1px solid #5d52f54a;
    border-radius: 20px;
}

.expert-card {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* text-align: center; */
}

.expert-details {
    display: flex;
    align-items: center;
}

.expert-details img {
    border-radius: 50%;
    margin-right: 15px;
}

.expert-details h3 {
    margin: 0;
    font-size: 1.6em;
    text-align: left;
}

.event-timing {
    display: flex;
    position: relative;
    gap: 20px;align-items: center;
}
.event-timing h3 {
    margin: 0;
    font-size: 1.5em;
    line-height: 1;
}


.time-box {
}

/* Key Takeaways Section */
.key-takeaways-section h2 {text-align: center;font-size: 2.3em;}

.takeaways-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
    border: 1px solid #e0dbdb;
    gap: 30px;
    border-radius: 20px;
    position: relative;
    z-index:2;
        background-color: #ffffff00;
    backdrop-filter: blur(15px);
}
.takeaway-item h3 {
    font-size: 1.5em;
    line-height: 1.3;
}
.takeaways-grid-container {
    position: relative;
}
.takeaways-grid-container::before{
    content: '';
    position: absolute;
    bottom: -220px;
    left: -90px;
    width: 280px;
    height: 370px;
    border-radius: 20px;
    opacity: .5;
    background: url('../images/lines.png');
    background-repeat: no-repeat;
    z-index: -1;
}


.takeaways-grid-container::after{
   content: '';
   position: absolute;
   bottom: -230px;
   top: -40px;
   right: -80px;
   width: 280px;
   height: 220px;
   border-radius: 20px;
   background: url(../images/lines.png);
   background-repeat: no-repeat;
   z-index: -1;
   opacity: .5;
   transform: rotate(193deg);
}
.takeaway-item {
    max-width: 310px;
    border-right: 1px solid #e0dbdb;
    padding-top: 20px;
    padding-right: 20px;
}

.icon-box {
    border-radius: 50%;
    padding: 15px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* How to Join Section */
.join-webinar-section {
    text-align: center;
    padding: 60px 0;
}

.steps-grid {
    display: flex;
    margin: 70px 0;
}

.step-item {
    padding: 12px 20px;
    align-items: center;
    border-radius: 40px 40px 40px 0px;
    position: relative;
    max-width: 295px;
    width: 100%;
    background: #99CCFF;
    background: linear-gradient(235deg,rgba(153, 204, 255, 1) 0%, rgba(153, 204, 255, 1) 50%, rgba(255, 204, 255, 1) 99%);
    display: flex;
    gap: 20px;
}

.step-number span {
    font-size: 2em;
    font-weight: 600;
    color: #6699ff;
    margin-bottom: 10px;
}

.step-item::after {
    content: '>';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    color: #ccc;
    display: none; /* Hide on mobile */
}

.step-item:last-child::after {
    display: none;
}

/* Speaker Section */
.speaker-section {
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin: 60px 0;
    flex-wrap: wrap;
    justify-content: left;
    width: 700px;
    margin: 0 auto;
}
.step-title b {
    font-size: 1em;
    line-height: 1.4;
    display: block;
}
.step-title p {
    font-size: .8em;
    margin: 0;
    line-height: 1.2;
    padding-top: 5px;
}
.step-title {
    text-align: left;
}
.speaker-photo {
    flex: 1;
    min-width: 300px;
    text-align: center;
}
.takeaways-grid .takeaway-item:last-child {
    border: none;
}
.takeaways-grid .takeaway-item:first-child {
    padding-left: 30px;
    padding-bottom: 40px;
}
.speaker-photo img {
    border-radius: 10px;
    height: auto;
    width: 100%;
}

.quoteMask{float:right;max-width:510px;max-height:710px;-webkit-clip-path:polygon(0 40px,20px 15px,calc(100% - 110px) 0,calc(100% - 50px) 15px,100% calc(100% - 100px),calc(100% - 50px) calc(100% - 70px),120px calc(100% - 50px),40px 100%,40px calc(100% - 55px),10px calc(100% - 125px));clip-path:polygon(0 40px,20px 15px,calc(100% - 110px) 0,calc(100% - 50px) 15px,100% calc(100% - 100px),calc(100% - 50px) calc(100% - 70px),120px calc(100% - 50px),40px 100%,40px calc(100% - 55px),10px calc(100% - 125px));-webkit-animation:quoteMove 4s steps(2) infinite forwards;animation:quoteMove 4s steps(2) infinite forwards}

@keyframes quoteMove{
    0%{-webkit-clip-path:polygon(0 40px,20px 15px,calc(100% - 110px) 0,calc(100% - 50px) 15px,100% calc(100% - 90px),calc(100% - 50px) calc(100% - 70px),120px calc(100% - 50px),40px 100%,40px calc(100% - 55px),40px calc(100% - 125px));clip-path:polygon(0 40px,20px 15px,calc(100% - 110px) 0,calc(100% - 50px) 15px,100% calc(100% - 90px),calc(100% - 50px) calc(100% - 70px),120px calc(100% - 50px),40px 100%,40px calc(100% - 55px),40px calc(100% - 125px))}
    33%{-webkit-clip-path:polygon(10px 30px,10px 0,calc(100% - 110px) 10px,calc(100% - 40px) 15px,100% calc(100% - 100px),calc(100% - 40px) calc(100% - 70px),130px calc(100% - 50px),50px 100%,30px calc(100% - 40px),30px calc(100% - 115px));clip-path:polygon(10px 30px,10px 0,calc(100% - 110px) 10px,calc(100% - 40px) 15px,100% calc(100% - 100px),calc(100% - 40px) calc(100% - 70px),130px calc(100% - 50px),50px 100%,30px calc(100% - 40px),30px calc(100% - 115px))}
    66%{-webkit-clip-path:polygon(5px 50px,30px 5px,calc(100% - 110px) 5px,calc(100% - 60px) 15px,100% calc(100% - 110px),calc(100% - 60px) calc(100% - 70px),110px calc(100% - 35px),30px 100%,50px calc(100% - 40px),35px calc(100% - 135px));clip-path:polygon(5px 50px,30px 5px,calc(100% - 110px) 5px,calc(100% - 60px) 15px,100% calc(100% - 110px),calc(100% - 60px) calc(100% - 70px),110px calc(100% - 35px),30px 100%,50px calc(100% - 40px),35px calc(100% - 135px))}}



.step-item.step1 {
    position: relative;
    left: -10px;
    bottom: 20px;
    transform: rotate(-6deg);
}
.step-number {
    font-size: .9em;
}
.step-item.step2 {
    position: relative;
    left: -14px;
    bottom: 26px;
    transform: rotate(
7deg);
}

.step-item.step3 {
    position: relative;
    left: -19px;
    transform: rotate(
-4deg);
}

.step-item.step4 {
    position: relative;
    left: -22px;
    transform: rotate(
10deg);
}
.step-item:hover {
    transition: .3s 
ease-in-out;
    transform: scale(1);
}
.speaker-bio {
    flex: 2;
    padding-left: 30px;
    border-left: 1px solid #f9e9f9;
    margin-left: 40px;
}

.speaker-bio h2 {
    font-size: 2.3em;
    margin-bottom: 0;
}

.founder-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.founder-info h4 {
    color: #ff00ff;
    margin: 0;
    padding: 0;
}
.founder-info p {
    margin: 0;
}
.main-content p {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.speaker-bio p {
    margin: 0;
    padding: 0;
    font-size: .8em;
}
.expert-details h3 {
    line-height: 1.1;
}
/* Footer */
footer {
    text-align: center;
    padding: 20px 0;
    font-size: 0.8em;
    color: #777;
}

@media (max-width: 768px) {
    body{background-image: url(../images/Be-Career-Ready_m.jpg);background-repeat: round;}
    .steps-grid {
        flex-direction: column;margin-bottom: 0;
        gap: 30px;
    }
    .step-item::after {
        display: none; /* Hide on mobile */
    }
    .expert-info-section {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .expert-details {
        justify-content: center;
    }
    .speaker-section {
        flex-direction: column-reverse;
        text-align: center;
        gap: 20px;
        width: auto;
        margin-bottom: 100px;
    }
    .speaker-bio {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }
    .step-item.step2 {
    left: 0;
    bottom: 39px;
    }
    .step-item.step3 {
    left: 0;
    top: -67px;
    }
    .step-item.step4 {
    left: 0;
    top: -96px;
    }
    .brain-graphic {
    flex-wrap: wrap;
}

.hero-section h1 {
    font-size: 2em;height: 90px;        padding-bottom: 0;
}

.takeaways-grid {gap: 0;}

.takeaway-item {
    border-bottom: 1px solid #e0dbdb;
    border-right: 0;
    padding-left: 20px;
}

.takeaways-grid .takeaway-item:first-child {
    /* padding-left: 0; */
}

.step-item {
    width: 100%;
    padding: 20px;
    height: 100px;
}

.container {
    padding: 0 20px;
}

.join-webinar-section {
    padding-bottom: 0;
}


.ai-image {
    order: 1;
    display: none;
}
.brain-image {
    display: none;
}
.main-content {
    
position: relative;
    
top: 100px;
}
p.bottom-text {
    width: auto;
        font-size: 1.2em;
        line-height: 1.3;
}
.ai-image img {
    mix-blend-mode: hard-light;
    width: 100%;
    opacity: .7;
    scale: 1.2;
}
.date-box {
    flex-wrap: wrap;
    display: flex;
    gap: 5px;
}

.line img {
    height: 25px;
}
.logo {
    margin-bottom: 0;
}
.event-timing h3 {
    font-size: 1.3em;
}
.event-timing {
    width: 100%;
    justify-content: space-around;
    gap: 0;
}
.time-box {
    display: flex
;
    gap: 10px;
}
.takeaways-grid-container::before{
    display: none;
}

.icon-box {
    padding-left: 0;
}
.takeaways-grid-container::after{
   display: none;
}
.step-title p {
    font-size: .8em;
}
.takeaway-item h3 {
    margin-bottom: 10px;
}

.takeaway-item {
    padding-bottom: 30px;
    padding-top: 30px;
}
section.key-takeaways-section {
    padding-top: 50px;
}

.speaker-bio h2 {
    margin-bottom: 20px;        margin-top: 0;
}
.expert-card {
    margin-left: -25px;        margin-top: 0;
}
.joinTitle h2 {
    line-height: 1.2;
}
.step-item.step1 {
    left: 0;
}
}