.about-me { overflow: hidden; } .about_us--wrapper .navbar-brand { background: #E31112; } .about_us--wrapper .footer { position: relative; z-index: 0; } @media screen and (min-width: 1200px) { .about_us--wrapper .navbar_v1 .custom_navbrand { left: 50%; margin-right: 0; } } /* ================ Party Story ============ */ .party_story--wrapper { background: url('../../images/about-red-bg.jpg') no-repeat center 165px; } .party_story--wrapper .section-subtitle { font-family: var(--montserrat); font-weight: bold; color: #15213D; text-transform: capitalize; font-size: 1.6em; max-width: 327px; } .party_story--wrapper .section-subtitle1 { font-family: var(--poppins); font-weight: 900; color: #1267E5; font-size: 4.8em; margin: 0 0 1em; } .about-me .party_story--wrapper .section-subtitle1 { font-size: 1em; font-weight: 500; margin: 1em 0 5em; letter-spacing: 0.025em; display: inline-block; } .party_story--wrapper .section-title { font-family: var(--montserrat); font-weight: bold; color: #ffffff; text-transform: capitalize; font-size: 1.6em; margin: 1em 0 1.5em; max-width: 356px; } .party_story--wrapper .section-desc { font-family: var(--open-sans); font-size: 0.84em; color: #ffffff; max-width: 417px; } .story_teller--img { position: relative; margin: 0.5em 0; } .story_teller--img .play { position: absolute; top: 0; left: 0; border-radius: 50%; border: 12px solid #ffffff; box-shadow: 0px 30px 30px rgba(15, 16, 17, 0.2); -webkit-box-shadow: 0px 30px 30px rgba(15, 16, 17, 0.2); -moz-box-shadow: 0px 30px 30px rgba(15, 16, 17, 0.2); -ms-box-shadow: 0px 30px 30px rgba(15, 16, 17, 0.2); background: -moz-linear-gradient(116.71deg, #ff6c6c 4.02%, #bd230e 109.98%); background: -webkit-linear-gradient(116.71deg, #ff6c6c 4.02%, #bd230e 109.98%); background: linear-gradient(116.71deg, #ff6c6c 4.02%, #bd230e 109.98%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6c6c', endColorstr='#bd230e',GradientType=1 ); width: 70px; height: 70px; text-align: center; transition: all ease 0.4s; } .story_teller--img .play:hover { box-shadow: 0 0 30px 0 rgba(255, 108, 108, 0.3); } .story_teller--img .play img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .story_teller--img img { border-radius: 5px; } .story_teller--img:after { content: ''; position: absolute; bottom: 0; right: 0; background: url('../../images/abt-doted-graphics.svg') no-repeat right bottom; width: 185px; height: 166px; background-size: 70%; } .party_story--wrapper .top-section { padding-bottom: 2.5em; } .party_story--wrapper .bottom-section .section-title { max-width: 100%; color: #E31112; } .do_box--wrapper { background: #FFFFFF; box-shadow: 15px 20px 50px rgba(0, 0, 0, 0.07); border-radius: 15px; text-align: center; padding: 2.5em 2em 3em; margin: 1em 0; } .do_box--column .box-icon { background: #C7C5F6; border-radius: 15px; width: 68px; height: 68px; text-align: center; margin: auto; } .do_box--column .box-icon img { position: relative; top: 50%; transform: translateY(-50%); } .do_box--column:nth-child(2) .box-icon { background: #9CE8F9; } .do_box--column:nth-child(3) .box-icon { background: #FFE8B2; } .do_box--wrapper .box-title { font-family: var(--poppins); font-weight: 500; letter-spacing: 0.025em; color: #15213D; font-size: 0.84em; line-height: 1.6; margin: 1.5em 0; } .do_box--wrapper .box-desc { font-family: var(--open-sans); color: #787C8B; font-size: 0.84em; } @media screen and (min-width: 768px) { .party_story--wrapper .section-subtitle { margin-top: 2em; } .party_story--wrapper { background-position-y: 215px; margin-bottom: 7em; } .do_box--wrapper { height: 100%; } .party_story--wrapper .bottom-section .section-title { color: #ffffff; } .story_teller--img { padding-bottom: 2em; } .story_teller--img .play { top: 30%; left: -6%; } .party_story--wrapper .section-title { margin-top: 0; } } @media screen and (min-width: 1200px) { .party_story--wrapper { font-size: 120%; } .party_story--wrapper { background-position-y: 260px; } .story_teller--img:after { background-size: 100%; bottom: -40px; right: -35px; } .party_story--wrapper .top-section { padding-bottom: 4em; } .do_box--wrapper .box-title { margin-left: 2em; margin-right: 2em; } .story_teller--img { padding-bottom: 0em; } .story_teller--img .play { width: 100px; height: 100px; } } /* ================ Party Story ends ============ */ /* ================ leadership-campaigning ============ */ .campaigning_members--wrapper { padding: 1.4em 0 3em; } .section_title { font-family: var(--poppins); font-weight: bold; color: #15213D; font-size: 1.8em; text-align: center; text-transform: capitalize; max-width: 698px; margin: 1.2em auto 2em; } .leader-box { background: #1267E5 url(../../images/dotted-map.png) no-repeat left 52px; background-size: 40%; border-radius: 15px; padding: 2em 1.5em; margin: 1em 0; position: relative; overflow: hidden; } .leader-box .shadow-text { font-family: var(--montserrat); font-weight: 900; letter-spacing: -0.1em; text-transform: uppercase; color: #186DEC; font-size: 4.4em; line-height: 0.9; position: absolute; top: 0; right: -0.4em; z-index: 0; } .counter-column { border-top: 1px solid #498CF0; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center; display: flex; flex-direction: column; } .counter-column:first-child { border-top: 0; } .counter-num { font-family: var(--poppins); font-weight: bold; color: #ffffff; font-size: 2em; } .counter-text { font-family: var(--poppins); font-weight: 500; color: #ffffff; font-size: 1em; letter-spacing: 0.025em; } @media screen and (min-width: 768px) { .counter-column { padding-top: 0; padding-bottom: 0px; border-top: 0; border-left: 1px solid #498CF0; } .counter-column:first-child { border-left: 0; } } @media screen and (min-width: 1200px) { .leadership_campaign--wrapper { font-size: 170%; } .leader-box { margin-top: 0; } .counter-text { font-size: 0.6em; } } /* ================ leadership-campaigning ============ */ /* ================ -story-timeline ============ */ .store-timeline { position: relative; z-index: 2; } .store-timeline:before { content: ""; background: url('../../images/round-circle.png') no-repeat center center; position: absolute; max-width: 100%; width: 190rem; height: 60rem; margin: auto; left: 0; right: 0; top: 0; bottom: auto; z-index: -2; } .store-timeline .container { position: relative; } .store-timeline .container:before { content: ""; position: absolute; background: url('../../images/dotted-map.png') no-repeat top right; background-size: 100%; z-index: -1; top: 0; width: 100%; max-width: 100%; height: 20rem; left: 0; right: auto; } .store-timeline .container:after { content: ""; position: absolute; background: url('../../images/dotted-map.png') no-repeat bottom left; background-size: 100%; z-index: -1; top: auto; width: 100%; max-width: 100%; height: 20rem; left: 0; right: auto; bottom: 0; } .store-timeline__header { text-align: center; } .store-timeline__header--title { display: inline-block; position: relative; width: auto; } @media (min-width: 768px) { .store-timeline { padding-top: 100px; } .store-timeline:before { height: 37rem; } } @media (min-width: 992px) { .store-timeline { margin-bottom: 7rem; } .store-timeline:before { width: 190rem; height: 55rem; top: -10rem; bottom: 0; z-index: -2; } .store-timeline .container:before { height: 40rem; top: -7rem; background-size: 50%; } .store-timeline .container:after { height: 41rem; background-size: 50%; bottom: -7rem; left: -15rem; } } @media (min-width: 1200px) { .store-timeline { margin-top: 9rem; } } @media (min-width: 1680px) { .store-timeline .container:after { bottom: -7rem; left: -15rem; } } /* timeline */ .timeline { position: relative; } .timeline__item { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 2rem; } .timeline__item .timeline_year { display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: #e31112; border: 5px solid #f4f4f4; filter: drop-shadow(0px 20px 40px rgba(38, 5, 5, 0.2)); font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.2rem; color: #fff; margin-right: 1rem; } .timeline__item p { max-width: 60%; margin-bottom: 0; } @media (min-width: 768px) { .timeline { column-count: 2; position: relative; } .timeline__item .timeline_year { font-size: 15px; width: 4rem; height: 4rem; } .timeline:before { content: ""; background: url('../../images/timeline-bg.png') no-repeat top center; background-size: 96%; position: absolute; height: 160.8rem; width: 27rem; max-width: 100%; margin: auto; left: 14rem; top: -14rem; z-index: -1; margin-right: 5rem; } .timeline__item:nth-child(1), .timeline__item:nth-child(2), .timeline__item:nth-child(3) { flex-direction: row-reverse; text-align: right; } .timeline__item:nth-child(1) .timeline_year, .timeline__item:nth-child(2) .timeline_year, .timeline__item:nth-child(3) .timeline_year { margin-right: 0; margin-left: 1.5rem; } .timeline__item:nth-child(1) { margin-right: 3rem; margin-bottom: 4rem; } .timeline__item:nth-child(2) { margin-right: 6rem; margin-bottom: 4rem; } .timeline__item:nth-child(3) { margin-right: 6rem; margin-bottom: 5rem; } .timeline__item:nth-child(4) { margin-left: 7rem; margin-bottom: 4rem; } .timeline__item:nth-child(5) { margin-left: 1rem; margin-bottom: 5rem; } .timeline__item:nth-child(6) { margin-left: 3rem; } .timeline__item p { max-width: 65%; } } @media (min-width: 992px) { .timeline:before { width: 37rem; top: -10rem; left: 19rem; margin-right: 10rem; background-size: 90%; } .timeline__item { margin-bottom: 6rem; } .timeline__item .timeline_year { width: 108px; height: 108px; border: 7px solid #f4f4f4; font-size: 30px; } .timeline__item:nth-child(1) { margin-right: -5rem; margin-bottom: 6rem; } .timeline__item:nth-child(2) { margin-right: 6rem; margin-bottom: 7rem; } .timeline__item:nth-child(3) { margin-right: 6rem; margin-bottom: 8rem; } .timeline__item:nth-child(4) { margin-left: 17rem; margin-bottom: 7rem; } .timeline__item:nth-child(5) { margin-left: 6rem; margin-bottom: 7rem; } .timeline__item:nth-child(6) { margin-left: 4rem; } } @media (min-width: 1200px) { .timeline:before { width: 60rem; top: -300px; margin-right: 13rem; } .timeline__item .timeline_year { width: 9rem; height: 9rem; font-size: 2.4rem; } .timeline__item:nth-child(1) { margin-right: 4rem; margin-bottom: 8rem; } .timeline__item:nth-child(2) { margin-right: 12rem; margin-bottom: 10rem; } .timeline__item:nth-child(3) { margin-right: 12rem; margin-bottom: 14rem; } .timeline__item:nth-child(4) { margin-left: 21rem; margin-bottom: 10rem; } .timeline__item:nth-child(5) { margin-left: 5rem; margin-bottom: 12rem; } .timeline__item:nth-child(6) { margin-left: 4rem; } } @media (min-width: 1366px) { .timeline:before { left: 19rem; top: -20rem; width: 45rem; z-index: -1; } .timeline__item .timeline_year { width: 108px; height: 108px; border: 10px solid #f4f4f4; font-size: 30px; } .timeline__item:nth-child(1) { margin-right: 5rem; margin-bottom: 5rem; } .timeline__item:nth-child(2) { margin-right: 10rem; margin-bottom: 8rem; } .timeline__item:nth-child(3) { margin-right: 10rem; margin-bottom: 8rem; } .timeline__item:nth-child(4) { margin-left: 13rem; margin-bottom: 7rem; } .timeline__item:nth-child(5) { margin-left: 0rem; margin-bottom: 8rem; } .timeline__item:nth-child(6) { margin-left: 0rem; } .timeline__item p { max-width: 60%; } } /* ================ -story-timeline-ends ============ */ /* ================ -blue cta ============ */ .blue-box { padding: 1em 0; background: #1267E5 url('../../images/dotted-map.png') no-repeat center bottom; background-size: 50%; box-shadow: 15px 20px 50px rgba(0, 0, 0, 0.07); -webkit-box-shadow: 15px 20px 50px rgba(0, 0, 0, 0.07); -moz-box-shadow: 15px 20px 50px rgba(0, 0, 0, 0.07); -ms-box-shadow: 15px 20px 50px rgba(0, 0, 0, 0.07); border-radius: 15px; display: flex; flex-direction: column; align-items: center; } .blue-box__details { text-align: center; } .blue-cta__wrapper { position: relative; z-index: 3; } .action-title { font-family: var(--montserrat); font-weight: bold; color: #ffffff; font-size: 1.5em; } .action-desc { font-family: var(--open-sans); font-size: 1em; color: #ffffff; } .action-btn { font-family: var(--open-sans); font-weight: 800; color: #ffffff; font-size: 1.5em; transition: all 0.5s ease; } .action-btn:hover { color: #ffffff; opacity: 0.8; text-decoration: none; } @media screen and (min-width: 768px) { .blue-box { flex-direction: row; padding-left: 20em; padding-top: 1.8em; padding-bottom: 1.8em; position: relative; } .blue-box img { position: absolute; bottom: -1.2em; left: 3em; } } @media screen and (min-width: 1200px) { .blue-box { font-size: 170%; } .action-desc { font-size: 0.8em; } } /* ================ -blue cta ends ============ */