@import 'colors.css';
@import 'forms.css';
@font-face {font-family: Poppins;src: url('../fonts/Poppins.ttf');}
@font-face {font-family: Cairo;src: url('../fonts/Cairo.ttf');}
@font-face {font-family: Segoe Ui;src: url('../fonts/SegoeUI.ttf');}
@font-face {font-family: Alro;src: url('../fonts/Alro.ttf');}
@font-face {font-family: Raleway;src: url('../fonts/Raleway.ttf');}

html,body {padding:0;margin:0;}
* {box-sizing: border-box;font-family: 'Poppins', 'Cairo', sans-serif;}
* ::-webkit-scrollbar-track{background-color:rgba(175,200,217,0.26)}
* ::-webkit-scrollbar{background-color:transparent;width:10px;height: 12px;}
* ::-webkit-scrollbar-thumb{border-inline:2px solid transparent;border-block:3px solid transparent;border-radius:12px;background-clip:content-box;background-color:rgba(var(--bs-success-rgb),0.5);}
* ::-webkit-scrollbar-thumb:hover{background-color:var(--bs-success);}

/* Font Class */
.ff-segoe-ui, .ff-segoe-ui * {box-sizing: border-box;font-family: 'Segoe Ui', 'Cairo', sans-serif;}
.ff-alro, .ff-alro * {box-sizing: border-box;font-family: 'Alro', 'Cairo', sans-serif;}
.ff-raleway, .ff-raleway * {box-sizing: border-box;font-family: 'Raleway', 'Cairo', sans-serif;}

.no-scrollbar ::-webkit-scrollbar {display:none;}

/* GLOBAL */
a {color:currentColor;text-decoration:none;}
a:hover {color: var(--bs-success);}
/* a {color: var(--dash-primary);} */
/* a:hover {color: var(--dash-secondary);} */
img {display: block;}

.cursor-pointer {cursor:pointer;}

/* GENERAL */
body {width:100%;min-height:100vh;font-size: 16px;line-height: 1.5;overflow-x: hidden;background:url('../images/bg.png') no-repeat center top fixed;background-size: cover;color:#FFF;}
/* .homepage-bg {position:absolute;width: 100vw;height:56.25vw;min-height:100vh;background:url('../images/homepage-bg.png') no-repeat center top;background-size:auto 100%;top:0;left:0;z-index: -1;} */
/* main {position: relative;width: 100%;margin-top:22vw;} */
main {position:relative;width: 100vw;}
.event-logo {width: 100%;display: flex;flex-flow: column;align-items: center;justify-content: center;}
.event-logo img {max-width: 90vw;}
.page-logo {max-height: 33.33334vh;}
.event-details {position: relative;width: 100%;display:flex;align-items: flex-end;justify-content:space-between;flex-flow: wrap;padding: 2vw 4vw;}
.event-details-heading {width: fit-content;font-size: 2rem;padding-inline-end: 5vw;border-bottom:2px solid #FFF;}
.event-block {width: 250px;max-width: 30vw;}
.event-block img {width: 100%;height: auto;}
.registration-btn {position: relative;width: 100%;display:flex;align-items: center;justify-content:center;flex-flow: wrap;padding-block: 4vw 2vw;gap:0.5rem}
.registration-btn img {max-height: 60px;}
.registration-btn img:hover {scale: 1.1;}

/* NAVBAR START */
.navbar {position: relative;display: flex;height: 100px;line-height: 70px;padding-block: 15px;justify-content: space-between;align-items: center;margin-inline: auto;padding-inline: 4vw;}
.navbar-brand {margin-inline-end:1rem;}
.navbar-brand img {height: 70px;}
.navbar-collapse {flex-flow: wrap;align-items: center;justify-content: flex-end;line-height: 1;padding: 0;}
.nav-item {padding-inline: 0.5rem;border-inline-end: 2px solid #FFF;line-height: 1.2rem;}
.nav-item:last-child {padding-inline-end: 0;border-inline-end: 0;}
.nav-link {color: var(--bs-white) !important;padding:0;}
.nav-link:hover,.nav-link.active {color: var(--bs-white) !important;}
/* NAVBAR END */

/* CONTENT */
.content {position: relative;display:flex;flex-flow: column;width: 100%;min-height: 50vh;justify-content: start;align-items: center;padding: 1.5rem 4vw;}
.main-content {position:relative;width:100%;/*padding:1.5rem;*/}
.content-box {position:relative;background:#FFF;color:var(--bs-dark);width:100%;padding:1.5rem;border-radius:0.5rem;}


/* AGENDA */
.agenda-nav-tabs {display: flex;flex-flow: wrap;justify-content: center;padding-bottom: 1rem;gap: 1rem;}
.agenda-tab {color: var(--bs-primary) !important;border-radius: 0 !important;padding: 0.75rem 1rem !important;font-size: 1.2rem !important;line-height: 1.5 !important;border: 2px dashed !important;}
.agenda-tab.active {background-color: var(--bs-primary) !important;color:var(--bs-white) !important;border-color: var(--bs-primary) !important;border-style: solid !important;}
.agenda-tab:hover {background-color: var(--bs-warning) !important;color: var(--bs-primary) !important;border-color: var(--bs-warning-hover) !important;border-style: solid !important;}

.agenda-header {position: relative;display: grid;align-items: center;grid-template-columns: 12% 52% 24% 12%;background: var(--agenda-header);color:var(--bs-white);font-weight:bold;border-radius: 0.5rem;}
.agenda-header-item {padding:0.5rem;}
.agenda-event-time {min-width: 150px;text-align: center;}
.agenda-event-speakers {min-width: 300px;display: flex;flex-flow: column;}
.agenda-event-speaker-name {font-weight: bold;margin: 0;}
.agenda-event-speaker-title {font-size: small;font-weight: lighter;margin: 0;}
.agenda-event-hall {min-width: 150px;}

.agenda-block {position: relative;display: flex;flex-flow: column;color: var(--bs-primary);gap:0.5rem;padding-block: 0.5rem;line-height: 1.2;}

.agenda-block-heading {position: relative;width: 100%;display: flex;flex-flow: wrap; justify-content: space-between;background: var(--agenda-primary);color: var(--bs-white);padding: 0.5rem 1rem;border-radius: 0.5rem;font-size: 1.1rem;gap:0.5rem}

.agenda-session {position: relative;width: 100%;display: flex;justify-content: space-between;background: var(--agenda-secondary);color: var(--bs-white);border-radius: 0.5rem;padding: 0.5rem;}

.session-moderators {display: flex;flex-flow: wrap;align-items: center;gap: 0.5rem;font-size: 0.9rem;}
.session-moderators-item {display: flex;flex-flow: wrap;gap: 0.25rem;}
.moderator-name::after {content: ",";}
.moderator-name:last-child::after {display:none;}

.agenda-event {position: relative;width: 100%;display: grid;grid-auto-flow: column;grid-template-columns: 12% 88%;align-items:start;border:1px dashed;border-radius: 0.5rem;background: var(--bs-light);}
.agenda-event[class*='bg-'] {border: 0;}
.agenda-event-item {padding:0.5rem;}
.agenda-event-details {position: relative;width: 100%;display: grid;grid-template-columns: 59% 27% 13%;padding: 0;}

.agenda-header.workshops {grid-template-columns: 58% 30% 12%;background: var(--bs-primary);font-weight: normal;}
.workshops .agenda-block-heading {background: var(--agenda-secondary);}
.workshops .agenda-event {grid-template-columns: 100%;}
.workshops .agenda-event:nth-child(odd) {background: var(--bs-muted);}

.agenda-btn {display: flex;flex-flow: wrap;gap: 10px;align-items: center;justify-content: center;padding-block: 1rem 0.5rem;}
.agenda-btn img {max-height: 50px;max-width: 100%;}
.agenda-btn img:hover {scale: 1.05;}

/*SPONSORS IMAGES*/
.sponsors-block {position: relative;display: flex;flex-flow: column;align-items: center;justify-content: center;}
.sponsors-item {position: relative;width: 100%;display: flex;flex-flow: wrap;align-items: center;justify-content: center;padding: 1rem 0.5rem;border-bottom: 2px solid rgb(75 75 75 / 15%);gap: 1rem;}
.sponsor-image {display: flex;align-items: center;justify-content: center;padding: 20px;border: 1px solid #ddd;border-radius: 0.5rem;gap: 1rem;max-height: 240px;}
.sponsors-lvl-2 .sponsor-image {width: calc(33.33334% - 0.66667rem);padding: 15px;height: 180px;}
.sponsors-lvl-3 .sponsor-image {width: calc(25% - 0.75rem);height: 140px;padding: 10px;}
.sponsors-lvl-4 .sponsor-image {width: calc(20% - 0.8rem);height: 100px;border: 1px solid #ddd;}
.sponsor-image img {width:auto;max-width: 95%; max-height: 200px;}
.sponsors-lvl-2 .sponsor-image img {max-height: 150px;}
.sponsors-lvl-3 .sponsor-image img {max-height: 120px;}
.sponsors-lvl-4 .sponsor-image img {max-height: 80px;}

/* SIGN UP FORM */
/* #signUpForm { max-width: 960px; } */
#signUpForm .form-header {gap: 5px;text-align: center;font-size: .9em;}
#signUpForm .form-header .stepIndicator {position: relative;flex: 1;padding-bottom: 30px;}
#signUpForm .form-header .stepIndicator.active {font-weight: 600;color: #0886c9;}
#signUpForm .form-header .stepIndicator.finish {font-weight: 600;color: #1c4586;}
#signUpForm .form-header .stepIndicator::before {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);z-index: 9;width: 20px;height: 20px;background-color: #a9d9f1;border-radius: 50%;border: 3px solid #ecf5f4;}
#signUpForm .form-header .stepIndicator.active::before {background-color: #0886c9;border: 3px solid #a9d9f1;}
#signUpForm .form-header .stepIndicator.finish::before {background-color: #1c4586;border: 3px solid #8fb2e9;}
#signUpForm .form-header .stepIndicator::after {content: "";position: absolute;left: 50%;bottom: 8px;width: 100%;height: 3px;background-color: #f3f3f3;}
#signUpForm .form-header .stepIndicator.active::after {background-color: #a9d9f1;}
#signUpForm .form-header .stepIndicator.finish::after {background-color: #1c4586;}
#signUpForm .form-header .stepIndicator:last-child:after {display: none;}
#signUpForm .invalid {border-color:#ffaba5;}
#signUpForm .step {display: none;}
#signUpForm .oneColumn {width:fit-content;max-width:100%;}
#signUpForm .workshops {width:fit-content;max-width:100%;}
#signUpForm .form-footer{overflow:auto;gap: 20px;}
#signUpForm .form-footer button{background-color: #1b498a;border: 1px solid #1b498a !important;color: #ffffff;border: none;padding: 13px 30px;font-size: 1em;cursor: pointer;border-radius: 5px;flex: 1;margin-top: 5px;}
#signUpForm .form-footer button:hover {opacity: 0.9;}
#signUpForm .form-footer #prevBtn {background-color: #fff;color: #1b498a;}

.loginForm {max-width: 640px;}

/* FOOTER */
.footer-icons {width: 100vw;display: flex;align-items: center;justify-content: center;}
.footer-bar {width: 100vw;display: flex;align-items: center;justify-content: center;}
.footer-icons img, .footer-bar img {width: 50%; height: auto;}

/* RESPONSIVE */
@media screen and (max-width: 991px) {
  body {background:url('/assets/images/bg_mini.png') no-repeat center bottom fixed;background-size: cover;}
  .container {max-width: 100%;padding-inline: 1rem;}
  .navbar {padding-inline: 2.5vw;}
  .navbar-brand img {height: 60px;}
  .navbar-toggler {position: absolute;right: 0.5rem;z-index:999;border: 0;}
  .navbar-toggler i {color:#FFF;font-size: 2rem;}
  .navbar-toggler:focus {outline:0;border:0;box-shadow:none;}
  .navbar-collapse {position: fixed;background: linear-gradient(45deg, rgba(var(--bs-primary-rgb),0.8), #1c316d);top: 0;left: 0;width:100%;height: 100vh;overflow-y: auto;padding:0;line-height: 1;padding-top: 80px;z-index:99;}
  .navbar-collapse .nav-item {padding:0 !important;border:0 !important;}
  .navbar-collapse .nav-link.active, .navbar-collapse .nav-link:hover {border:0 !important;}
  .navbar-collapse .nav-link {padding: 0.75rem 1.5rem !important;}
  .navbar-collapse .nav-link.active {position:relative;background: var(--bs-white);color: var(--bs-primary-hover) !important;}
  .navbar-collapse .nav-link:hover {background: var(--bs-primary-hover);color: var(--bs-white) !important;}
  .navbar-collapse .nav-item:first-child .nav-link {margin-top:0.5rem;}
  .navbar-collapse .nav-item:first-child .nav-link.active {margin-top:0;}
  .navbar-collapse .btn {margin:0 !important;}
  .content, .event-details {padding-inline: 2.5vw;}
  .agenda-nav-tabs {flex-flow: column;}
  .agenda-tab {padding: 0.75rem 1rem !important;line-height: 1.2 !important;}
  .agenda-header {display: none;}
  .agenda-event {grid-template-columns: 150px auto;border-width: 2px;}
  .agenda-event-details {grid-auto-flow: row;grid-template-columns: auto;padding: 0.5rem;gap:0.5rem;}
  .agenda-event-details .agenda-event-item {padding: 0;}
  .agenda-event-speakers {flex-flow: wrap;}
  .agenda-event-speakers::before {content:"🎙️" !important;margin-inline-start: -0.25rem;}
  .agenda-event-speaker-details {position:relative;display: flex;}
  .agenda-event-speaker-details::after {position:relative;content:"-";padding-inline: 0.25rem;}
  .agenda-event-speaker-details:last-child::after {display: none;}
  .agenda-event-speaker-name {font-weight: bold;margin: 0;}
  .agenda-event-speaker-title {display: none;}
  .footer-icons img, .footer-bar img {width: 100%; height: auto;}

  .sponsors-block {gap: 1rem;}
  .sponsors-item {border: 0;padding: 0;gap: 1rem;}
  .sponsor-image {width: 100%;height: fit-content;padding:0.5rem 1rem;border-radius: 0.5rem;border: 1px solid #ddd;}
  .sponsor-image img {max-height: 6.5rem !important;}
  .sponsors-lvl-2 .sponsor-image {width: 100%; height: 6rem;}
  .sponsors-lvl-3 .sponsor-image {width: calc(50% - 0.5rem); height: 5.5rem; }
  .sponsors-lvl-4 .sponsor-image {width: calc(33.33334% - 0.66667rem); height: 5rem; }
  .sponsors-lvl-2 .sponsor-image img {max-height: 5rem !important;}
  .sponsors-lvl-3 .sponsor-image img {max-height: 4.5rem !important;}
  .sponsors-lvl-4 .sponsor-image img {max-height: 4rem !important;}
}

@media screen and (max-width: 767px) {
  .event-details {flex-flow: column;gap:2rem;align-items:flex-start;}
  .registration-btn {flex-flow: column;gap:1rem;padding-block:2rem 1rem;}
  .registration-btn img {max-height:50px;}
  .event-block {width: 100%;max-width:initial;display: flex;justify-content: flex-end;}
  .event-block img {max-width: 40vw;}
 /* .footer-icons {margin-bottom: 3vw;} */

  .sponsors-block {gap: 0.5rem;}
  .sponsors-item {border: 0;padding: 0;gap: 0.5rem;}
  .sponsor-image {padding:0.5rem 1rem;border-radius: 0.5rem;border: 1px solid #ddd;}
  .sponsor-image img {max-height: 5rem !important;}
  .sponsors-lvl-2 .sponsor-image {width: 100%; height: 5.5rem;}
  .sponsors-lvl-3 .sponsor-image {width: calc(50% - 0.25rem); height: 4.5rem;}
  .sponsors-lvl-4 .sponsor-image {width: calc(50% - 0.25rem); height: 4.5rem;}
  .sponsors-lvl-2 .sponsor-image img {max-height: 4.5rem !important;}
  .sponsors-lvl-3 .sponsor-image img {max-height: 3.5rem !important;}
  .sponsors-lvl-4 .sponsor-image img {max-height: 3.5rem !important;}

  .agenda-btn {flex-flow: column;align-items:center;text-align:center;justify-content:center;}
.agenda-btn img {max-width:90%}.agenda-btn * {width:fit-content}
}

@media screen and (max-width: 400px) {
  .agenda-event {display: flex;flex-flow: column;width: 100%;font-size: 0.9rem;padding-block: 0.25rem;}
  .agenda-event-item {text-align: start !important;padding-block: 0.25rem;}
  .agenda-event-time {width: 100%;text-align: start;padding: 0.25rem;}
  .agenda-event-time::before {content:"🕒" !important;}
  .agenda-event-details {display: flex;flex-flow: column;padding: 0.25rem;}
}