/* A: UCWDev urielscatrut
   CSS Index for Workwell Nexus  */

html {
    scroll-behavior: smooth;
}

/* the styles for the body */
body {
    font-family: 'Helvetica', 'sans-serif' ;
    margin: 0;
    padding: 0;
    background-color: #739BD0; /* f7e98e fef4b9 icyBlue:739BD0 */
    color: #050402;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* the styles for the top bar */ 
.topBar {
    background-color: black;
    color: #ffffdb;
    padding: 0.625em 0;
    height: 6.25em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}
.topBar div {
    flex: 1;
    text-align: center;
    transition: transform 0.3s ease;
}
.topBar .workwellLogo img {
    height: 5em;
    transition: transform 0.2s ease;
}
.topBar .workwellLogo img:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
}

/* centered links */
.navbarLinks {
    flex: 1; 
    text-align: right; 
}

.navbarLinks a {
    text-decoration: none;
    color: azure;
    margin: 0 0.5em; 
    padding-left: 0.3125em;
    font-size: 1.125em;
}

.navbarLinks a:hover {
    color: #cbdaee;
}

/* the styles for the fade-in effect */
.fade-in {
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}
.fade-in.visible {
    opacity: 1;
}

/* the styles for the main chunk */
.mainContainer {
    text-align: justify;
    padding: 3.125em;
    padding-left: 0;
    max-width: 100%;
    margin-left: 18%;
    margin-top: 2%;
    flex: 1;
}
.mainContainer:after {
    content:'';
    background-image: url('img/consult.png');
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 44.8em;
    z-index:-1;
    opacity: 0.4;
}
/* the styles for the intro */
.topBlock {
    max-width: 100%;
    margin-top: 11.25em;
    margin-bottom: 3.125em;
    margin-left: 0;
    color: #666;
}
.topBlock h2 {
    color: #110E07;
    text-align: left;
    font-size: 3.2em;
    min-width: 100%;
}
.topBlock h4 {
    color: #110E07;
    text-align: left;
    font-size: 1.875em;
    min-width: 100%;
}
.topBlock h2, .topBlock h4 {
    margin-left: 0;
    margin-right: auto; 
}
.word-container {
    height: 1.155em; 
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    min-width: 6.5em;
    color: #002f63;
}
.changing-word {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease-in-out;
    white-space: nowrap;
}
.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #002f63; 
    text-align: center;
    text-decoration: none;
    border: 2px solid #002f63; 
    border-radius: 5px;
    background-color: transparent; 
    transition: all 0.3s ease;
}
.button:hover {
    color: #fff;
    background-color: #002f63; 
    border-color: #002f63; 
    text-decoration: none;
}
.buttonLight {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.025em;
    font-weight: bold;
    color: #cbdaee; 
    text-align: center;
    text-decoration: none;
    border: 2px solid #cbdaee;
    border-radius: 5px;
    background-color: transparent; 
    transition: all 0.3s ease;
    margin-top: 5%;
}
.buttonLight:hover {
    color: #002f63; 
    background-color: #cbdaee; 
    border-color: #002f63; 
    text-decoration: none; 
}
.arrow img {
    width: 3.125em;
    height: 3.125em;
    margin-top: 4%;
    transition: transform 0.3s;
}

/* the styles for the philosophy text section */
#philo {
    margin-top: 5%;
    margin-bottom: 8%;
}
.philoContainer {
    width: 75%;
    margin: auto;
    padding: 1.25em;
    text-align: center;
}
.philoContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.philoContent img {
    max-width: 34.375em;
    height: auto;
    margin-top: 4%;
    border-radius: 0.625em;
    box-shadow: 0 0.25em 0.5em black;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.philoContent img:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5em 1em black;
}
#philoHeaderMBL {
    display: none;
}
.philoHeader {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 5%;
    color: black;
}
#philoImgMBL {
    display: none;
}
.philoTxt {
    flex: 1;
    padding-left: 3.125em;
    padding-right: 5%;
    text-align: left;
    font-size: 1.4375rem;
    line-height: 1.3;
}
.philoTxt h1 {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 5%;
    text-align: center;
}
.philoTxt a {
    flex: 1;
    text-align: left;
    font-size: 0.8em;
}

/* the styles for the timeline services */
.talentContainer {
    text-align: center;
    padding: 2em;
    position: relative;
    height: 450px;
    background-color: black;
}

/* the styles for banner popups */
#popupBanner {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    display: none;
}
#popupBanner img {
    width: auto;
    height: 100vh;
    object-fit: cover;
    border: 5px solid white;
    opacity: 1;
    pointer-events: auto;
}
.close-btn {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 30px;
    color: white;
    cursor: pointer;
    z-index: 1001;
    padding: 10px;
    border-radius: 50%;
    pointer-events: auto;
}
#peekBanner {
    position: fixed;
    top: 40%;
    left: 0;
    width: 10%;
    height: auto;
    background-color: #cbdaee;
    border-radius: 0 5px 5px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    padding: 5px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#peekBanner:hover {
    transform: scale(1.105);
}
#peekBanner img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.bannerText {
    font-size: 18px;
    margin-top: 2%;
    color: black;
    font-weight: 600;
}
.faded {
    opacity: 0.9;
}

.talentContH1 {
    font-size: 2.5em;
    margin: 0.5em 0;
    color: #cbdaee;
    padding-top: 1%;
}
.talentContH2 {
    font-size: 1.5em;
    margin: 0.5em 0 2.5em;
    color: #cbdaee;
}
.timelineContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: calc(100% - 100px);
    margin: auto;
}
.timelineService {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 2px solid #cbdaee;
    box-shadow: 0 4px 8px #002f63;
    position: relative;
    margin: 0 25px; 
    text-decoration: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.timelineService::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -60px; 
    width: 60px;
    height: 2px;
    background-color: #cbdaee;
    transform: translateY(-50%);
    z-index: 0;
}
.timelineService:last-child::after {
    content: none; 
}
.timelineService:nth-child(1) {
    background-image: url('img/coaching.png');
}
.timelineService:nth-child(2) {
    background-image: url('img/DISC.png');
}
.timelineService:nth-child(3) {
    background-image: url('img/training2.png');
}
.timelineService:nth-child(4) {
    background-image: url('img/loriSpeak.jpg');
}
.timelineService:nth-child(5) {
    background-image: url('img/membership.png');
}
.timeServTXT {
    font-size: 1.5em;
    font-weight: bold;
    color: #cbdaee;
    text-shadow: 0.05em 0 #002f63, 0 0.05em #002f63, -0.05em 0 #002f63, 0 -0.05em #002f63, -0.05em -0.05em #002f63, -0.05em 0.05em #002f63, 0.05em -0.05em #002f63, 0.05em 0.05em #002f63;
    text-align: center;
    position: absolute;
}
.timelineService a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none; 
}
.timelineService:hover {
    transform: scale(1.105);
}

/* the styles for the mission section */
.missionContainer {
    max-width: 100%;
    margin-top: 7.8125em;
    margin-bottom: 1.25em;
}
.missionContainer h1 {
    text-align: center;
    color: black;
    font-size: 2.5em;
}
.missionContainer p {
    text-align: center;
    margin-top: 6%;
    margin-left: 10%;
    max-width: 80%;
    color: #050402;
    font-size: 1.125em;
}
.missionGallery {
    padding: 1.25em;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    border-radius: 0.9375em;
    margin: 2% 0 2% 0;
}
.missionBlock {
    text-align: center;
    background-color: #cbdaee;
    padding: 0.625em 0.125em 0.125em 0.3125em;
    transition: transform 0.3s;
}
.missionBlock:hover {
    transform: scale(1.05);
}
.missionBlock img {
    width: 12.5em;
    height: 12.5em;
    transition: transform 0.3s;
}
.missionBlock img:hover {
    transform: scale(1.1);
}
.missionBlock p {
    width: 37.5em;
    font-size: 1.25em;
}
.missionBlockEye {
    text-align: center;
    background-color: #F8F8BA;
    padding: 0.625em 0.125em 0.125em 0.3125em;
    transition: transform 0.3s;
}
.missionBlockEye:hover {
    transform: scale(1.05);
}
.missionBlockEye img {
    width: 14.375em;
    height: 12.5em;
    transition: transform 0.3s;
}
.missionBlockEye img:hover {
    transform: scale(1.1);
}
.missionBlockEye p {
    width: 37.5em;
    font-size: 1.25em;
}


/* the styles for the services gallery */
.serviceContainer {
    background-color: black;
    padding-top: 6.25em;
    padding-bottom: 3.125em;
}
.serviceContainer h1 {
    text-align: center;
    color: #cbdaee;
    font-size: 3.5em;
    /*
    background: linear-gradient(yellow, white, yellow);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    */
}
#solutions {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
.solutions {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    padding: 1.25em;
}
.servPort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
}
.servePort a {
    width: 50%;
    max-width: 100%;
}
.servPort img {
    width: 100%;
    height: 31.25em;
    object-fit: cover;
    border-radius: 0.9375em;
    box-shadow: 0 0.125em 0.1875em #cbdaee;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.servPort img:hover {
    transform: scale(1.05);
    box-shadow: 0 0.1875em 0.25em #cbdaee;
}
.servPort h3 {
    color: #cbdaee;
    font-size: 1.5625em;
}
.servPort p {
    color: #cbdaee;
    font-size: 1.25em;
}
.servPort .description {
    width: 50%;
    padding: 0.625em;
    text-align: center;
}
.description p {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#coach2 {
    display: none;
}
#DISC3 {
    display: none;
}
#train2 {
    display: none;
}
#speak2 {
    display: none;
}
#team2 {
    display: none;
}
.servPort:nth-child(even) {
    flex-direction: row-reverse;
}
.servPort.show {
    transform: translateY(0);
    opacity: 1;
}
.servPort.hide {
    transform: translateY(1.25em);
    opacity: 0;
}

/* detailed services container */
.detServCont {
    max-width: 95%;
    background-color: #cbdaee;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    border: 0.125em solid black;
    padding: 0.625em;
    border-radius: 0.5em;
    flex-direction: column;
    align-items: center;
    margin-top: 3%;
    margin-left: auto;
    margin-right: auto;
}
.detServTitle {
    text-align: center;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    font-size: 1.875em;
    font-weight: bold;
}
.detServWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.detServImg {
    flex: 1;
    margin: 0.625em;
    border-radius: 0.9375em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.detServImg img {
    max-width: 90%;
    height: 18.75em;
    border-radius: 0.9375em;
    box-shadow: 0 0.25em 0.3125em black;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.detServImg img:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5em 0.625em black;
}
.detServ {
    flex: 1;
    margin: 0.625em;
    border-radius: 0.5em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.detServ img {
    max-width: 100%;
    height: 31.25em;
}
.detServ:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#coaching {
    padding-top: 4.0625em;
}
#consulting {
    padding-top: 4.0625em;
}
#training {
    padding-top: 4.0625em;
}
#speaking {
    padding-top: 4.0625em;
}

/* the styles for the connect w/us section */
#connect {
    margin-top: 5%;
    margin-bottom: 8%;
}
.CWUContainer {
    width: 75%;
    margin: auto;
    padding: 1.25em;
    text-align: center;
}
.CWUContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.CWUContent img {
    max-width: 34.375em;
    height: auto;
    margin-top: 4%;
    border-radius: 0.625em;
    box-shadow: 0 0.25em 0.5em black;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.CWUContent img:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5em 1em black;
}
#CWUHeaderMBL {
    display: none;
}
.CWUHeader {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 5%;
    color: black;
}
.CWUTxt {
    flex: 1;
    padding-left: 3.125em;
    text-align: left;
    font-size: 1.4375rem;
    line-height: 1.3;
}
.CWUTxt h1 {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 5%;
    text-align: center;
}
.CWUTxt a {
    flex: 1;
    text-align: left;
    font-size: 0.78em;
}
#mailE {
    font-size: 1.4375rem;
    line-height: 1.3;
    color: #002f63;
}

/* the styles for the about */
#about {
    margin-bottom: 5%;
    padding-top: 3%;
    padding-bottom: 30%;
    background-color: black;
    height: auto;
}

/* index about overlay */
.IABcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 80%;
    margin-left: 20%;
    margin-right: auto;
    height: 300px;
}
.IABtextDiv {
    background-color: #cbdaee;
    margin-top: 25em;
    padding: 20px;
    width: 28%;
    z-index: 1;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    right: -30px;
    font-size: 1.105em;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.IABtextDiv:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5em 1em black;
}
.IABimgDiv {
    width: 50%;
    position: relative;
    z-index: 0;
}
.IABimgDiv img {
    width: 60%;
    height: auto;
    border-radius: 15px;
    margin-top: 27.5em;
    display: block;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.IABimgDiv img:hover {
    transform: scale(1.05);
    box-shadow: 0 0.25em 0.8em #cbdaee;
}

.abContainer {
    width: 78%;
    margin: auto;
    padding: 1.25em;
    text-align: center;
    padding-top: 6.25em;
}
.abHeader {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 0;
    color: #cbdaee;
}
.abImg {
    display: flex;
    justify-content: space-between;
    margin: 1.25em 0;
    max-width: 100%;
}
.abImg img {
    height: 18.75em;
    width: auto;
    border-radius: 0.5625em;
    box-shadow: 0 0.0625em 0.125em #cbdaee;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.abImg img:hover {
    transform: scale(1.05);
    box-shadow: 0 0.125em 0.1875em #cbdaee;
}
figure {
    display: inline-block;
    margin: 0px;
}
figure img {
    vertical-align: top;
}
figure figcaption {
    color: #cbdaee;
    font-style: italic;
    padding-top: 25px;
    padding-left: 15%;
}
.abTxt {
    text-align: center;
    font-size: 1.4375em;
    color: #cbdaee;
    line-height: 1.3;
    padding-bottom: 80px;
}

.abOwnContainer {
    width: 75%;
    margin: auto;
    padding: 3.125em;
    text-align: center;
    background-color: #cbdaee;
    border-radius: 0.9375em;
    margin-bottom: 3.125em;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.abOwnContainer:hover {
    transform: scale(1.05);
}
.abOwnContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.abOwnContent img {
    width: 18.75em;
    height: auto;
    border-radius: 0.625em;
    box-shadow: 0 0.25em 0.5em black;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.abOwnContent img:hover {
    transform: scale(1.10);
    box-shadow: 0 0.5em 1em black;
}
.abOwnTxt {
    flex: 1;
    padding-left: 3.125em;
    padding-right: 3.125em;
    text-align: center;
    font-size: 1.4375em;
    line-height: 1.3;
}
.abOwnTxt h1 {
    font-size: 2.188rem;
    font-weight: bold;
    margin-bottom: 2%;
}
.abOwnTxt p {
    font-size: 1.1875rem;
}

/* the styles for the reviews */
.revContainer {
    text-align: center;
    padding: 3.125em;
    padding-top: 0;
    max-width: 100%;
    margin: auto;
    margin-top: 0;
    flex: 1;
}
.revHeader {
    font-size: 5em;
    font-weight: bold;
    margin-top: 2%;
    margin-bottom: 2%;
    color: black;
}
.reviewImg {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0px 0.3125em;
}
.reviewImg img{
    width: 30%;
    height: auto;
    border-radius: 0.625em;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.reviewImg img:hover {
    transform: scale(1.05);
}
.reviewSection {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.reviewContainer {
    display: flex;
    transition: transform 0.3s ease-in-out;
    margin-top: 3%;
    height: 18.75em;
}
.review {
    min-width: 100%;
    box-sizing: border-box;
    padding: 1.25em;
    background-color: black;
    border-radius: 0.9375em;
}
.reviewTitle {
    font-size: 1.75em;
    font-weight: bold;
    margin-top: 3.125rem;
    margin-bottom: 0.625rem;
    color: #cbdaee;
}
.reviewStars {
    color: #f39c12;
    margin-bottom: 1.5625rem;
    font-size: 2.5rem;
}
.reviewText {
    font-size: 1.4375rem;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    color: #cbdaee;
}
.reviewNavButtons {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 60%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 1;
}
.revNavButton {
    background-color: black;
    color: white;
    border: none;
    padding: 0.625em;
    cursor: pointer;
    font-size: 1.875rem;
}
.revNavButton:hover {
    transform: scale(1.25);
    box-shadow: 0 0.5em 1em black;
}

/* the styles for the footer */
.footer {
    background-color: black;
    color: azure;
    padding: 1.25em 0;
}
.footerContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 75em;
    margin: 0 auto;
    padding: 0 1.25em;
}
.footerColumn {
    flex: 1;
    min-width: 12.5em;
    margin: 0.625em 0;
    align-items: center;
    text-align: center;
}
.footerColumn img {
    height: 9.375em;
    align-items: center;
}
.footerColumn h3 {
    border-bottom: 0.0625em solid #555;
    padding-bottom: 0.625em;
    margin-bottom: 0.625em;
    text-align: center;
}
.footerColumn p {
    font-size: 1.125em;
}
.footerColumn ul {
    list-style: none;
    padding: 0;
    text-align: center;
}
.footerColumn ul li {
    margin: 0.3125em 0;
}
.footerColumn ul li a {
    color: azure;
    text-decoration: none;
}
.footerColumn ul li a:hover {
    text-decoration: underline;
}
.footerColumn .footerButton {
    display: inline-block;
    padding: 0.625em 1.5625em;
    margin: 0.25em 0 0.625em 0;
    font-size: 1.5625em;
    color: black;
    background-color: #cbdaee;
    outline-style: solid;
    outline-color: #beac85;
    border: 0.3125em #DFCAA0;
    border-radius: 0.625em;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.footerColumn .footerButton:hover {
    background-color: #ece4d0;
    color: black;
    transform: scale(1.05);
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
}
.ucwFooter {
    display: flex;
    align-items: right;
    margin: 0.3125em;
    margin-top: 2.8125em;
    margin-left: 44%;
}
.ucwFooter img {
    height: 7.5em;
}

@media (max-width: 896px) {
    .topBar {
        height: 9.55em;
        display: inline-block;
        align-items: center;
    }
    .topBar .workwellLogo img {
        height: 7.5em;
        padding-bottom: 2%;
    }
    .navbarLinks {
        flex: 1; 
        text-align: right;
    }

    /* main */
    .mainContainer {
        max-width: 90%;
        padding: 1.25em;
        margin-left: 0;
    }
    .mainContainer:after {
        background-image: url('img/mission.png');
        height: 75em;
        z-index:-1;
        opacity: 0.3;
    }
    .button {
        margin-top: 0.9375em;
    }
    .topBlock {
        max-width: 90%;
        padding: 1.25em;
    }
    .topBlock:after {
        height: auto;
        z-index:-1;
        opacity: 0.3;
    }
    .topBlock h2 {
        text-align: left;
        font-size: 2em;
        width: 100%;
    }
    .topBlock h4 {
        text-align: left;
        font-size: 1.275em;
        min-width: 100%;
    }

    /* peeking banner*/
    #peekBanner {
        top: 40%;
        width: 20%;
        height: auto;
    }
    .bannerText {
        font-size: 12px;
        margin-top: 4%;
    }

    /* talent strategy experience */
    .talentContH1 {
        font-size: 1.8em;
        margin: 0.5em 0;
        color: #cbdaee;
        padding-top: 1%;
    }
    .talentContH2 {
        font-size: 1.275em;
        margin: 10% 0 25%;
        color: #cbdaee;
    }

    /* philo section */
    .philoContainer {
        width: 90%;
        margin: auto;
        padding: 1.25em;
        text-align: center;
    }
    .philoHeader {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 7%;
        padding-top: 7.5rem;
    }
    #philoHeaderDSK {
        display: none;
    }
    #philoHeaderMBL {
        display: contents;
    }
    .philoContent {
        display: inline-block;
        align-items: center;
        justify-content: space-between;
    }
    .philoContent img {
        max-width: 21.875em;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    #philoImgDSK {
        display: none;
    }
    #philoImgMBL {
        display: block;
        margin-top: 6%;
    }
    .philoTxt {
        flex: 1;
        text-align: center;
        padding-left: 0;
        min-width: 100%;
    }
    .philoTxt h1 {
        font-size: 2rem;
    }

    /* the styles for the timeline services */
    .talentContainer {
        text-align: center;
        padding: 2em;
        position: relative;
        height: 1380px;
        background-color: black;
    }
    .talentContH1 {
        font-size: 2em;
        margin: 0.5em 0;
        color: #cbdaee;
        padding-top: 1%;
    }
    .talentContH2 {
        font-size: 1.25em;
        margin: 1em 0 1em;
        color: #cbdaee;
    }
    .timelineContainer {
        display: inline-block;
        justify-content: center;
        align-items: center;
        position: relative;
        width: calc(100% - 100px);
        margin: auto;
    }
    .timelineService {
        width: 200px;
        height: 200px;
        display: inline-block;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        border-radius: 50%;
        border: 2px solid #cbdaee;
        box-shadow: 0 4px 8px #002f63;
        position: relative;
        margin: 10px 0; 
        text-decoration: none;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .timelineService::after {
        display: none;
    }
    .timeServTXT {
        font-size: 1.65em;
        font-weight: bold;
        color: #cbdaee;
        text-shadow: 0.05em 0 #002f63, 0 0.05em #002f63, -0.05em 0 #002f63, 0 -0.05em #002f63, -0.05em -0.05em #002f63, -0.05em 0.05em #002f63, 0.05em -0.05em #002f63, 0.05em 0.05em #002f63;
        text-align: center;
        position: absolute;
    }
    .timelineService a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }
    .timelineService:hover {
        transform: scale(1.105);
    }

    /* mission statement */
    .missionContainer {
        margin-top: 1.875em;
    }
    .missionContainer h1 {
        font-size: 2em;
    }
    .missionBlock img {
        width: 11.25em;
        height: 11.25em;
    }
    .missionBlock p {
        width: 90%;
    }
    .missionBlockEye img {
        width: 12.8125em;
        height: 11.25em;
    } 
    .missionBlockEye p {
        width: 90%;
    }

    /* services */
    #services {
        padding-top: 10%;
    }
    #solutions {
        width: 80%;
        margin-left: 6%;
        margin-right: 0%;
    }
    .serviceContainer {
        padding-top: 8.125em;        
    }
    .serviceContainer h1 {
        font-size: 2em;       
    }
    .servePort a {
        min-width: 55%;
    }
    .servPort img {
        min-width: 100%;
        height: 15.625em;
    }
    .servPort .description {
        width: 50%;
        padding: 1.25em;
        text-align: center;
        font-size: 0.88em;
    }
    #coach1 {
        display: none;
    }
    #coach2 {
        display: contents;
    }
    #DISC1 {
        display: none;
    }
    #DISC2 {
        display: none;
    }
    #DISC3 {
        display: contents;
    }
    #train1 {
        display: none;
    }
    #train2 {
        display: contents;
    }
    #speak1 {
        display: none;
    }
    #speak2 {
        display: contents;
    }
    #team1 {
        display: none;
    }
    #team2 {
        display: contents;
    }
    .servePort h3 {
        font-size: 0.9375em;
        padding-right: 3.125em;
    }
    .servePort p {
        font-size: 0.625em;
        padding-left: 1.25em;
    }
    /* detailed services */
    .detServCont {
        max-width: 95%;
        display: inline-block;
        border: none;
        padding: 0.625em;
        border-radius: 0.5em;
        flex-direction: column;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }
    .detServWrap {
        display: inline-block;
        justify-content: space-between;
        width: 100%;
    }
    .detServImg {
        flex: 1;
        margin: 0.625em;
        border-radius: 0.5em;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .detServImg img {
        height: auto;
        margin-bottom: 3%;
    }
    .detServ {
        flex: 1;
        margin: 0.625em;
        border: 1px solid black;
        border-radius: 0.5em;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .detServ img{
        min-width: 95%;
        height: 28.125em;
    }
    #coaching {
        padding-top: 30%;
    }
    #consulting {
        padding-top: 30%;
    }
    #training {
        padding-top: 30%;
    }
    #speaking {
        padding-top: 30%;
    }

    /* connect w/us section */
    .CWUContainer {
        width: 90%;
        margin: auto;
        padding: 1.25em;
        text-align: center;
    }
    .CWUHeader {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 7%;
        padding-top: 7.5rem;
    }
    #CWUHeaderDSK {
        display: none;
    }
    #CWUHeaderMBL {
        display: contents;
    }
    .CWUContent {
        display: inline-block;
        align-items: center;
        justify-content: space-between;
    }
    .CWUContent img {
        max-width: 21.875em;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .CWUTxt {
        flex: 1;
        text-align: center;
        padding-left: 0;
        min-width: 100%;
    }
    .CWUTxt h1 {
        font-size: 2rem;
    }

    /* about */
    #about {
        margin-bottom: 8%;
        padding-top: 10%;
        padding-bottom: 8%;
    }
    .IABcontainer {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 90%;
        margin-left: 0;
        margin-right: auto;
        height: auto;
    }
    .IABtextDiv {
        background-color: #cbdaee;
        margin-top: 2em;
        padding: 20px;
        width: 70%;
        z-index: 1;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        right: -30px; 
        font-size: 0.35em;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .IABimgDiv {
        width: 99%;
        position: relative;
        z-index: 0;
    }
    .IABimgDiv img {
        width: 99%;
        height: auto;
        border-radius: 15px;
        margin-top: 0.94em;
        display: block;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .abContainer {
        width: 80%;
        margin: auto;
        padding: 1.25em;
        text-align: center;
    }
    .abHeader {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0;
        padding-top: 7.5rem;
    }
    .abImg {
        display: inline-block;
        justify-content: space-between;
        margin: 1.25em 0;
    }
    .abImg img {
        max-width: 18.75em;
        height: auto;
    }
    figure figcaption {
        text-align: center;
        padding-left: 20px;
        padding-top: 15px;
    }
    .abTxt {
        text-align: center;
    }
    #ab1 {
        display: none;
    }
    #ab3 {
        display: none;
    }
    /* owner about */
    .abOwnContainer {
        width: 80%;
        margin: auto;
        padding: 1.25em;
        text-align: center;
        margin-bottom: 10%;
    }
    .abOwnContent {
        display: inline-block;
        align-items: center;
        justify-content: space-between;
    }
    .abOwnContent img {
        max-width: 21.875em;
        height: auto;
    }
    .abOwnTxt {
        flex: 1;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    .abOwnTxt h1 {
        font-size: 2rem;
    }

    /* reviews */
    .revContainer {
        max-width: 90%;
        padding: 1.25em;
    }
    .revHeader {
        font-size: 4rem;
        padding-bottom: 3%;
    }
    .reviewImg img{
        width: 100%;
        margin-bottom: 5%;
    }
    .reviewContainer {
        height: auto;
    }
    .reviewNavButtons {
        top: 50%;
    }
    .reviewNavButton {
        padding: 0.10em;
    }
    .reviewText {
        font-size: 1.2rem;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        color: #cbdaee;
    }
    
    /* footer */
    .footerContainer {
        flex-direction: column;
        align-items: center;
    }
    .footerColumn {
        max-width: 100%;
    }
    .footerColumn img {
        height: 10em;
        width: 99%;
    }
    .ucwFooter {
        margin-top: 3.125em;
        margin-left: 27%;
    }
    .ucwFooter img{
        height: 6.25em;
    }
}