/*

Abdul Haseeb Q.
twistyBRAT 鬼 ];)
a.haseeb199@gmail.com
https://probdone.com

Yo! Just a devious boring typical guy skilled Front End Development | Web Development & Design | HTML & CSS | SASS | Bootstrap | JavaScript | WordPress Development | Googling | Tech Enthusiast | Learning Enthusiast &  likes Anime + Manga + Comics + Gaming + Weird things and a lot of Music 🙀👽

https://www.facebook.com/twistyBRATVA
https://www.linkedin.com/in/abdul-haseeb-qamar
https://www.instagram.com/abdul_haseeb_qamar

*/

/*

 ____  ____  ____  ____  ____  ____  ____  ____
||P ||||r ||||o ||||b ||||d ||||o ||||n ||||e ||
||__||||__||||__||||__||||__||||__||||__||||__||
|/__\||/__\||/__\||/__\||/__\||/__\||/__\||/__\|


 ______   ______   ______   ______   _____    ______   ______   ______
| |  | \ | |  | \ / |  | \ | |  | \ | | \ \  / |  | \ | |  \ \ | |
| |__|_/ | |__| | | |  | | | |--| < | |  | | | |  | | | |  | | | |----
|_|      |_|  \_\ \_|__|_/ |_|__|_/ |_|_/_/  \_|__|_/ |_|  |_| |_|____


.------..------..------..------..------..------..------..------.
|P.--. ||R.--. ||O.--. ||B.--. ||D.--. ||O.--. ||N.--. ||E.--. |
| :/\: || :(): || :/\: || :(): || :/\: || :/\: || :(): || (\/) |
| (__) || ()() || :\/: || ()() || (__) || :\/: || ()() || :\/: |
| '--'P|| '--'R|| '--'O|| '--'B|| '--'D|| '--'O|| '--'N|| '--'E|
`------'`------'`------'`------'`------'`------'`------'`------'

 ______                 _          _
(_____ \               | |        | |
 _____) )  ____   ___  | | _    _ | |  ___   ____    ____
|  ____/  / ___) / _ \ | || \  / || | / _ \ |  _ \  / _  )
| |      | |    | |_| || |_) )( (_| || |_| || | | |( (/ /
|_|      |_|     \___/ |____/  \____| \___/ |_| |_| \____)

*/



* {
    margin: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease-in-out all;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
}

body,
p {
    font-family: "Inter", sans-serif;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #808080;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #000;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #DC0B10;
}

/* Handle on focus or active */
::-webkit-scrollbar-thumb:focus,
::-webkit-scrollbar-thumb:active {
    background: #022c6d;
}

.d-none {
    display: none;
}

.text-center {
    text-align: center;
}

.outline-secondary {
    padding: 16px 32px;
    border-radius: 80px;
    border: 2px solid #dc0b10;
    color: #dc0b10;
    font-size: 16px;
    font-weight: 700;
}

.outline-secondary:hover {
    background: #25559f;
    border: 2px solid #25559f;
}

.primary-button {
    padding: 16px 32px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 80px;
    background: #25559f;
    border: 2px solid #25559f;
}

.primary-button:hover {
    border: 2px solid #dc0b10;
    background-color: transparent;
    color: #dc0b10;
}

.primary-outline {
    padding: 20px 40px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 80px;
    border: 2px solid #fff;
    background: #dc0b10;
    box-shadow: 0px 4px 5.9px 0px rgba(0, 0, 0, 0.5) inset;
}

.primary-outline:hover {
    background: #022c6d;
    color: #fff;
}

.primary-gradient {
    padding: 20px 40px;
    border-radius: 80px;
    font-size: 16px;
    font-weight: 700;
    background: var(--gradient,
            linear-gradient(180deg, #022c6d 0%, #6ba5ff 126.43%));
    box-shadow: 0px 4px 5.9px 0px rgba(0, 0, 0, 0.5) inset;
    border: 0;
    transition: 0.3s all ease-out;
}

.primary-gradient:hover {
    background: var(--gradient,
            linear-gradient(180deg, #dc0b10 0%, #dc0b10 126.43%));
    box-shadow: 0px 4px 5.9px 0px rgba(0, 0, 0, 0.5) inset;
    border: 0;
    transition: 0.3s all ease-in;
}

.secondary {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 80px;
    background: #dc0b10;
}

.primary-color {
    color: #25559f;
}

.secondary-color {
    color: #dc0b10;
}

.primary-bg {
    background-color: #25559f;
}

.secondary-bg {
    background-color: #dc0b10;
}

.text-color {
    color: #232323;
}

.grey-color {
    color: #808080;
}

.black-color {
    color: #232323;
}

.white-color {
    color: #fff;
}

.grey-bg {
    background-color: #808080;
}

.black-bg {
    background-color: #232323;
}

.white-bg {
    background-color: #fff;
}

.transparent-bg {
    background-color: transparent;
}

.transparent-color {
    color: transparent;
}

.pt-120 {
    padding-top: 120px;
}

.pt-95 {
    padding-top: 95px;
}

.pb-95 {
    padding-bottom: 95px;
}

.pt-52 {
    padding-top: 52px;
}

.pb-52 {
    padding-bottom: 52px;
}

.pb-120 {
    padding-bottom: 120px;
}

.pb-60 {
    padding-bottom: 60px;
}

.ptb-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.pt-120 {
    padding-top: 120px;
}

.pb-120 {
    padding-bottom: 120px;
}

.ptb-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.ptb-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

.ptb-55 {
    padding: 55px 35px 55px 35px;
}

.pt-40 {
    padding-top: 40px;
}

.pb-40 {
    padding-bottom: 40px;
}

.font-48 {
    font-size: 38px;
    margin-right: -80px;
}

.font-36 {
    font-size: 36px;
}

.neg--ml--onefifty {
    margin-left: -150px;
}

.bg-none {
    background: none !important;
}

.top-bar .navbar {
    z-index: 999;
    position: relative;
}

.top-bar {
    background: #dc0b10;
    padding: 25px 0;
    text-align: center;
}

.top-bar span {
    color: #fff;
    font-size: 15px;
    font-family: "Inter", sans-serif;
}

.main-header img {
    width: 60%;
}

.mobile--menu {}

.navbar-expand-lg .navbar-nav {
    gap: 40px;
}

.main-header .navbar-brand {
    margin: 0;
    width: 20%;
}

.navbar-expand-lg .navbar-collapse {
    gap: 20px;
}

.main-header .nav-link {
    font-size: 18px;
    font-weight: 400;
    color: #232323;
}

.navbar-nav .nav-item .nav-link {
    color: #232323;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    border-bottom: 2px solid transparent;
    padding: 0;
    line-height: 1.8em;
    transition: 0.3s ease-in-out all;
}

.loginModal .modal-header {
    background: #25559F;
    color: #ffffff;
    font-weight: 600;
}

.loginModal .modal-header .close {
    border: 0;
    line-height: 30px;
    font-weight: 300;
    color: #fff !important;
    font-size: 26px;
}

.signUpModal .modal-header {
    background: #25559F;
    color: #ffffff;
    font-weight: 600;
}

.signUpModal .modal-header .close {
    border: 0;
    line-height: 30px;
    font-weight: 300;
    color: #fff !important;
    font-size: 26px;
}

.navbar-nav .nav-item:hover .nav-link {
    color: #25559F;
    border-bottom: 2px solid #DC0B10;
    transition: 0.3s ease-in-out all;
}

.mobile--menu {
    display: none;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    background-color: #343a40;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 50px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: #fff;
}

.sidenav .navbar-brand {
    width: 300px;
}

.sidenav .navbar-brand img {
    width: 100%;
}

.sidenav .navbar-nav .nav-item {
    margin-top: 15px;
}

.sidenav .navbar-nav .nav-item .nav-link {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    border-bottom: 0;
    line-height: 1.8em;
    transition: 0.3s ease-in-out all;
    background: transparent;
    padding: 15px 8px 15px 32px;
}

.sidenav .navbar-nav .nav-item .nav-link.active,
.sidenav .navbar-nav .nav-item .nav-link:hover {
    background-color: #dc0b10;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}

.mobile--menu .main-header .navbar-brand {
    margin: 0;
    width: 30%;
}

.mobile--menu .container.main-header {
    max-width: 1000px;
    padding-left: 30px;
    padding-right: 30px;
}

.mobile--menu--toggle {
    padding: 10px 15px;
    border-radius: 10px;
    border: 2px solid #000;
    color: #000;
    font-size: 14px;
    font-weight: 700;
}

.mobile--menu .primary-button,
.mobile--menu .outline-secondary {
    padding: 10px 15px;
    font-size: 18px;
    margin: 15px 32px;
    border-radius: 10px;
    color: #fff;
}

.mobile--menu .outline-secondary {
    border-color: #fff;
}

.mobile--menu #navbarTogglerDemo03 {
    display: flex;
    gap: 15px;
}

.mobile--menu .main-header img {
    width: 80%;
}


.main.hero-banner-bg {
    background: url("/public/images/home-bg.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 45px;
    margin: auto;
    text-align: center;
    position: relative;
}

.main.hero-banner-bg h1 {
    font-size: 64px;
    margin: auto;
    width: 620px;
    font-weight: 300;
    line-height: 83.264px;
    color: #fff;
    padding-bottom: 50px;
    z-index: 1;
    position: relative;
}

.main.hero-banner-bg h1,
.main.hero-banner-bg h4 {
    z-index: 1;
    position: relative;
}

.main.hero-banner-bg .remocan {
    display: flex;
    justify-content: center;
    gap: 150px;
}

.main.hero-banner-bg .remocan img {
    width: 150px;
}

.main.hero-banner-bg .remocan h2 {
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    padding-top: 50px;
}

.remocan .democrat {
    cursor: pointer;
    transform: scale(1);
    transition: 0.3s ease-in-out all;
    z-index: 1;
}

.remocan .democrat:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in-out all;
}

.main.hero-banner-bg .remocan .democrat h3 {
    color: #fff;
    padding-top: 20px;
    font-size: 32px;
    font-weight: 700;
}

.biden--img {
    position: absolute;
    bottom: 0;
    left: 0;
}

.biden--img:before {
    content: "";
    width: 444px;
    height: 677px;
    background: url("/public/images/man-1.png");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    display: block;
}

.trump--img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.trump--img:before {
    content: "";
    width: 600px;
    height: 657px;
    background: url("/public/images/man2.png");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    display: block;
}

.hero-banner-bg h4 {
    font-size: 36px;
    line-height: 66.224px;
    margin-top: 15px;
}


.main.hero-banner-bg .cta--btn {
    margin-top: 30px;
}

.cta--block {
    margin-top: 50px;
}

.candidates--2 {
    padding-bottom: 55px;
}

.pe--inner {
    border-radius: 10px;
    background: #ffffff;
    background-blend-mode: normal, multiply;
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
    /* min-height: 300px; */
    margin: auto;
    position: relative;
}

.pe--inner:before {
    content: "";
    background: url("/public/images/american--flag.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    width: 207px;
    height: 215px;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
}

.candidates--2--block {
    display: grid;
    grid-template-columns: 14% 14% 14% 14% 14% 14% 14%;
    /* gap: 12px; */
    gap: 5px;
    margin-top: -8vh;
    z-index: 9;
    position: relative;
    margin-bottom: 30px;
}

.candidates--2--block img {
    width: 100%;
}

.candidates--2--block .img--block {
    /* cursor: pointer; */
    transition: 0.3s ease-in-out all;
}

/*.candidates--2--block .img--block:hover {*/
/*  transform: translateY(-10px);*/
/*  transition: 0.3s ease-in-out all;*/
/*}*/

.candidates--block {
    background: url("/public/images/candidate-bg.png");
    background-position: top right;
    background-size: 100%;
    background-repeat: no-repeat;
}

.about--block {
    display: grid;
    grid-template-columns: 45% 55%;
}

.about--block .img--block {
    background: url("/public/images/white--house.png");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    /* min-height: 646px; */
}

.pe--inner {
    display: grid;
    grid-template-columns: 33% 67%;
    padding: 0;
    overflow: hidden;
}

.pe--inner .img--block {
    background: url("/public/images/mount-rushmore.png");
    background-position: top left;
    background-size: 400px 490px;
    background-repeat: no-repeat;
    /* min-height: 511px; */
}

/* DEMOCRATS SECTION START*/
.democrat--block {
    padding-bottom: 6%;
}

.democrat--block .democrat {
    font-size: 40px;
    font-weight: 700;
}

.democrat--block .image-boxes.democrat-boxes .democrat-box {
    text-align: center;
    padding: 0 15px;
}

.image-boxes.democrat-boxes .democrat-box .democrat-box-img {
    /* width: 200px; */
    padding-bottom: 15px;
    cursor: pointer;
    transform: scale(1);
    transition: 0.3s ease-in-out all;
    min-height: 200px;
}

.image-boxes.democrat-boxes .democrat-box .democrat-box-img .democrat-box-img-wrapper {
    position: relative;
}

.image-boxes.democrat-boxes .democrat-box .democrat-box-img .democrat-box-img-wrapper .pbd--img--effect--hover {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.image-boxes.democrat-boxes .democrat-box .democrat-box-img .democrat-box-img-wrapper .pbd--img--effect--hover--back {
    opacity: 0;
    transition: opacity 0.6s ease-out;
    transform: translateX(-50%) scale(0.6);
}

.image-boxes.democrat-boxes .democrat-box .democrat-box-img .democrat-box-img-wrapper:hover .pbd--img--effect--hover--back {
    opacity: 0;
    transition: opacity 0.6s ease-in;
}

.image-boxes.democrat-boxes .democrat-box .democrat-box-img:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in-out all;
}

.image-boxes.democrat-boxes .democrat-box img {
    width: 100%;
}

.democrat--block .image-boxes.democrat-boxes .democrat-box h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 34px;
}

.democrat--block .democrat-boxes {
    display: grid;
    grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
    padding-top: 30px;
}

/* DEMOCRATS SECTION END*/

/* REPUBLICANS SECTION START*/
.republic--block {
    padding-bottom: 6%;
}

.republic--block .republic {
    font-size: 40px;
    font-weight: 700;
}

.republic--block .image-boxes.republic-boxes .republic-box {
    text-align: center;
    padding: 0 15px;
}

.republic--block .image-boxes.republic-boxes .republic-box .republic-box-img {
    /* width: 200px; */
    padding-bottom: 15px;
    cursor: pointer;
    transform: scale(1);
    transition: 0.3s ease-in-out all;
    min-height: 200px;
}

.image-boxes.republic-boxes .republic-box .republic-box-img .democrat-box-img-wrapper {
    position: relative;
}

.image-boxes.republic-boxes .republic-box .republic-box-img .democrat-box-img-wrapper .pbd--img--effect--hover {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.image-boxes.republic-boxes .republic-box .republic-box-img .democrat-box-img-wrapper .pbd--img--effect--hover--back {
    opacity: 0;
    transition: opacity 0.6s ease-out;
    transform: translateX(-50%) scale(0.6);
}

.image-boxes.republic-boxes .republic-box .republic-box-img .democrat-box-img-wrapper:hover .pbd--img--effect--hover--back {
    opacity: 0;
    transition: opacity 0.6s ease-in;
}

.image-boxes.republic-boxes .republic-box .republic-box-img:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in-out all;
}

.image-boxes.republic-boxes .republic-box .republic-box-img img {
    width: 100%;
}

.republic--block .image-boxes.republic-boxes .republic-box h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 34px;
}

.republic--block .republic-boxes {
    display: grid;
    grid-template-columns: 17% 17% 17% 17% 17% 15%;
    padding-top: 30px;
}

/* REPUBLICANS SECTION END*/

/* THIRD PARTY SECTION START*/
.independent--block .independent {
    font-size: 40px;
    font-weight: 700;
}

.independent--block .image-boxes.independent-boxes .independent-box {
    text-align: center;
    padding: 0 15px;
}

.independent--block .image-boxes.independent-boxes .independent-box .independent-box-img {
    /* width: 200px; */
    padding-bottom: 15px;
    cursor: pointer;
    transform: scale(1);
    transition: 0.3s ease-in-out all;
}

.independent--block .image-boxes.independent-boxes .independent-box .independent-box-img:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in-out all;
}

.image-boxes.independent-boxes .independent-box img {
    width: 100%;
}

.independent--block .image-boxes.independent-boxes .independent-box h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 34px;
}

.independent--block .independent-boxes {
    display: grid;
    grid-template-columns: 17% 17% 17% 17% 17% 15%;
    padding-top: 30px;
}

/* THIRD PARTY SECTION END*/

.about--block .about--block-heading {
    font-size: 36px;
    line-height: 46.836px;
    font-weight: 300;
}

.about--block .about-p {
    font-size: 16px;
    line-height: 30.4px;
    width: 497px;
    text-align: justify;
}

.presidential--election--block .pb-40 {
    font-size: 48px;
    line-height: 62.448px;
}

.presidential--election--block .right--block.content--block {
    padding: 20px 50px;
    text-align: left;
}

.presidential--election .content--block .presidential--election-heading {
    font-size: 40px;
    line-height: 52.04px;
    text-align: left;
    width: 620px;
    font-weight: 300;
}

.presidential--election--block .right--block.content--block .presidential--election-para {
    font-size: 16px;
    line-height: 30.4px;
    text-align: left;
    width: 527px;
    color: #232323;
}

.presidential--election-button {
    color: #fff;
}

footer {
    padding-top: 100px;
    /* padding-bottom: 50px; */
}

.mobile--footer {
    display: none;
}

footer .footer-inner .logo--block {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

footer .footer-inner {
    display: grid;
    grid-template-columns: auto auto 35%;
    gap: 30px;
    justify-content: space-between;
    padding-bottom: 41px;
}

footer .footer-inner .logo--block img {
    width: 200px;
}


footer .footer-inner .navigation--block.title,
footer .footer-inner .newsletter--block.title {
    display: flex;
    align-items: end;
}

footer .footer-inner .logo--block .footer-logo-bottom i {
    font-size: 22px;
    background: #DC0B10;
    border-radius: 500%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-out all;
    cursor: pointer;
}

.footer-inner .logo--block .footer-logo-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-inner .logo--block .footer-logo-bottom .footer-phone,
.footer-inner .logo--block .footer-logo-bottom .footer-email {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-inner .logo--block .footer-logo-bottom .footer-phone span,
.footer-inner .logo--block .footer-logo-bottom .footer-email span {
    color: #FFF;
    font-family: Inter;
    font-size: 18px;
    font-weight: 400;
}

footer .footer-inner .logo--block .footer-logo-bottom .footer-phone {
    color: #fff;
}

footer .footer-inner .logo--block .footer-logo-bottom .footer-email {
    color: #fff;
}

footer .footer-inner .logo--block .social-icons {
    color: #fff;
    display: flex;
    /* gap: 22px; */
    gap: 5px;
}

footer .footer-inner .logo--block .social-icons i {
    font-size: 22px;
    background: transparent;
    border-radius: 500%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-out all;
    cursor: pointer;
}

footer .footer-inner .logo--block .social-icons i:hover {
    background: #DC0B10;
    transition: 0.3s ease-out all;
}

footer .footer-inner .footer-content--block {
    font-size: 24px;
}

footer .footer-inner .content--block p {
    font-size: 16px;
    line-height: 30.4px;
    padding-top: 10px;
}

footer .footer-inner .content--block {
    padding-top: 30px;
}

/* footer .footer-inner .navigation--block {
  padding-top: 30px;
  padding-left: 20px;
} */

/* footer .footer-inner .newsletter--block {
  padding-top: 30px;
} */

footer .footer-inner .navigation--block .footer-menu li {
    padding: 15px 0;
    color: #fff;
}

footer .footer-inner .navigation--block .footer-menu li a {
    color: #FFF;
    font-family: Inter;
    font-size: 18px;
    font-weight: 400;
    transition: 0.3s ease-out all;
}

footer .footer-inner .navigation--block .footer-menu li:hover a {
    font-weight: 700;
    transition: 0.3s ease-in all;
}

footer .footer-inner .newsletter--block .search-form input[type="email"] {
    padding: 15px 15px 15px 19px;
    border-radius: 250px;
    border: none;
    width: 100%;
    color: #232323;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
}

footer .footer-inner .newsletter--block .search-form input::placeholder {
    color: #232323;
    opacity: 0.3;
}

footer .footer-inner .newsletter--block .search-form {
    /* display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 10px; */

    display: grid;
    grid-template-columns: 100%;
    gap: 28px;
    padding-top: 10px;
    justify-content: start;
    align-items: center;
    justify-items: start;

}

footer .footer-inner .newsletter--block .search-form .form-button {
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 32px;
    border: 2px solid #dc0b10;
}

.icon--boxes {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    gap: 30px;
}

.icon--boxes .img--block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.icon--boxes .img--block img {
    width: 100%;
}

.icon--boxes .icon--box--1,
.icon--boxes .icon--box--2,
.icon--boxes .icon--box--3 {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 20px;
}

.icon--boxes .icon--box--1 h4,
.icon--boxes .icon--box--2 h4,
.icon--boxes .icon--box--3 h4 {
    color: #FFF;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 33.112px;
}

.icon--boxes .icon--box--1 p,
.icon--boxes .icon--box--2 p,
.icon--boxes .icon--box--3 p {
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 29.433px;
    margin: 0;
}

/* Multiple POPUP CSS */

.multiple-paragraphs {
    display: inline-block;
    text-decoration: none;
}

.multiple-paragraphs-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    pointer-events: none;
}

.multiple-paragraphs-popup:target {
    opacity: 1;
    pointer-events: auto;
}

.close {
    padding: 0;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 10px;
    width: 35px;
    text-decoration: none;
    background: none;

    border: 0;
    font-weight: 300;
    color: #fff;
    font-size: 26px;
}

 .close:hover {
    color: #DC0B10;
}

 .cookie-setting-popup-header .close:hover {
    color: #fff;
}

.multiple--popup .multiple--popup-banner {
    background: url('/public/images/popup-banner.png');
    width: 100%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Primaries and Caucuses POPUP CSS */

.multiple-paragraphs {
    display: inline-block;
    text-decoration: none;
}

.Primaries-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    pointer-events: none;
}

.Primaries-popup:target {
    opacity: 1;
    pointer-events: auto;
}

#multipleParagraphs .modal-header,
#primaryParagraphs .modal-header,
#nationalParagraphs .modal-header,
#generalParagraphs .modal-header {
    background: url('/public/images/popup-banner.png');
    width: 100%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    align-items: start;
}

.Primaries--popup .Primaries--popup-para,
.general--popup .general--popup-para,
.national--popup .national--popup-para,
.multiple--popup .multiple--popup-para {
    /* padding: 0 0 15px 0px; */
}

.Primaries--popup ul,
.general-popup ul,
.national-popup ul,
.multiple-paragraphs-popup ul {
    list-style: disc;
    padding-left: 2rem;
}

.Primaries--popup li,
.general-popup li,
.national-popup li,
.multiple-paragraphs-popup li {
    color: #232323;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30.4px;
}

.Primaries--popup li::marker,
.general-popup li::marker,
.national-popup li::marker,
.multiple-paragraphs-popup li::marker {
    color: #25559F;
    font-size: 24px;
}

/* National Conventions POPUP CSS */

.multiple-paragraphs {
    display: inline-block;
    text-decoration: none;
}

.national-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    pointer-events: none;
}

.national-popup:target {
    opacity: 1;
    pointer-events: auto;
}

.national--popup .national--popup-banner {
    background: url('/public/images/popup-banner.png');
    width: 100%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* General Election POPUP CSS */

.multiple-paragraphs {
    display: inline-block;
    text-decoration: none;
}

.general-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    pointer-events: none;
}

.general-popup:target {
    opacity: 1;
    pointer-events: auto;
}


.general--popup .general--popup-banner {
    background: url('/public/images/popup-banner.png');
    width: 100%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.Primaries--popup-paragraphs,
.national--popup-paragraphs,
.general--popup-paragraphs,
.multiple--popup-paragraphs {
    padding: 15px;
    min-height: 150px;
    max-height: 300px;
    overflow-y: scroll;
}

.Primaries-popup>div,
.national-popup>div,
.general-popup>div,
.multiple-paragraphs-popup>div {
    width: 800px;
    position: relative;
    margin: 5% auto;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.Primaries--popup-paragraphs::-webkit-scrollbar,
.national--popup-paragraphs::-webkit-scrollbar,
.general--popup-paragraphs::-webkit-scrollbar,
.multiple--popup-paragraphs::-webkit-scrollbar {
    width: 5px;
}

.Primaries--popup-paragraphs::-webkit-scrollbar-track,
.national--popup-paragraphs::-webkit-scrollbar-track,
.general--popup-paragraphs::-webkit-scrollbar-track,
.multiple--popup-paragraphs::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.Primaries--popup-paragraphs::-webkit-scrollbar-thumb,
.national--popup-paragraphs::-webkit-scrollbar-thumb,
.general--popup-paragraphs::-webkit-scrollbar-thumb,
.multiple--popup-paragraphs::-webkit-scrollbar-thumb {
    background: #888;
}

.Primaries--popup-paragraphs::-webkit-scrollbar-thumb:hover,
.national--popup-paragraphs::-webkit-scrollbar-thumb:hover,
.general--popup-paragraphs::-webkit-scrollbar-thumb:hover,
.multiple--popup-paragraphs::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.login-wrapper {
    padding: 50px 0px;
}

.login-wrapper .card {
    /* border-radius: 0 !important; */
    /* border-left: 4px solid #25559f; */
    border-color: #dc0b10;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.login-wrapper .form-control {
    border-radius: 0;
    margin-top: 7px;
}

.result--next {
    padding: 14px 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 80px;
    background: #25559f;
    border: 2px solid #25559f;
    margin-top: 20px;
    display: inline-block;
}

.result--next:hover {
    color: #25559F;
    background: transparent;
    border: 2px solid #25559f;
    cursor:pointer;
}

.result--next--oppo {
    padding: 16px 32px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 80px;
    background: #DC0B10;
    border: 2px solid #DC0B10;
    margin-top: 20px;
    display: inline-block;
}

.result--next--oppo:hover {
    color: #DC0B10;
    background: transparent;
    border: 2px solid #DC0B10;
}

.btn-vote {
    padding: 16px 32px;
    border-radius: 80px;
    border: 2px solid #dc0b10;
    font-size: 16px;
    font-weight: 700;
    margin-left: 15px;
    background-color: #dc0b10;
    color: white;
}

.btn-vote:hover {
    border-color: #dc0b10;
    color: #dc0b10;
}

#voteModal .modal-header {
    text-align: center;
    display: block;
    text-transform: uppercase;
}

#voteModal .modal-header h5 {
    font-weight: bold;
    font-size: 25px;
}

.disclaimer-wrapper {
    text-align: center;
    padding: 0px 50px;
}

.disclaimer-wrapper p:first-child {
    font-size: 18px;
}

.login-wrapper input[type=text],
.login-wrapper input[type=password],
.login-wrapper input[type=number],
.login-wrapper input[type=email],
.login-wrapper select,
.login-wrapper textarea {
    padding: 15px ;
    border-radius: 5px !important;
    width: 100%;
    color: #232323;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    background: #f1f1f1;
    border: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.footer--copyright {
    padding: 25px 0;
    border-top: 1px solid rgb(216, 216, 216, 0.3);

    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 28.88px;
    text-align: center;
}

#multipleParagraphs .multiple-popup {
    max-width: 1000px;
}




#multipleParagraphs .multiple-popup ul {
    list-style: disc;
    padding: 10px;
}

#multipleParagraphs .multiple-popup .Primaries--popup-para, .national--popup-para {
    padding: 0 0 20px 0;
}



#primaryParagraphs .multiple-popup {
    max-width: 1000px;
}




#primaryParagraphs .multiple-popup ul {
    list-style: none;
    padding: 10px;
}

#primaryParagraphs .multiple-popup .Primaries--popup-para, .national--popup-para {
    padding: 0 0 20px 0;
}


#nationalParagraphs .multiple-popup {
    max-width: 1000px;
}




#nationalParagraphs .multiple-popup ul {
    list-style: none;
    padding: 10px;
}

#nationalParagraphs .multiple-popup .Primaries--popup-para, .national--popup-para {
    padding: 0 0 20px 0;
}



#generalParagraphs .multiple-popup {
    max-width: 1000px;
}




#generalParagraphs .multiple-popup ul {
    list-style: none;
    padding: 10px;
}

#generalParagraphs .multiple-popup .Primaries--popup-para, .national--popup-para {
    padding: 0 0 20px 0;
}

.email-verify-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: white;
}

.email-verify-box p {
    margin: 0;
}

section.top-bar.secondary-bg.email-verify {
    position: absolute;
    left: 0;
    right: 0;
    padding: 11px 0px;
    position: fixed;
    z-index: 11;
}

.email-verify-box button {
    color: white;
}


.cookie-warning {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    padding: 24px 30px;
    border-radius: 4px;
    color: #fff;
    z-index: 100;
    background: linear-gradient(0deg, #022c6d 0%, #25559f 100%);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    position: fixed;
    bottom: 30px;
    left: 30px;

    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.cookie-title {
    font-size: 20px;
    margin-bottom: 12px;
}

.cookie-title span {
    font-size: 40px;
}

.cookie-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    line-height: 1.8em;
    font-family: inherit;
    overflow-y: scroll;
    height: 150px;
}

.cookie-warning a {
    color: rgba(255, 255, 255, 0.8);
}

.cookie-btn-wrapper {
    display: flex;
    margin-bottom: 0.8rem;
}

.cookie-btn {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 16px 24px;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #fff;
    font-family: inherit;
    transition: 0.15s ease;
}

.cookie-btn:hover {
    color: #111;
    background-color: rgba(255, 255, 255, 0.8);
}

.notice--register {
    padding: 15px 30px;
    border: 2px solid #dc0b10;
    border-radius: 15px;
    background: rgb(220 11 16 / 5%);
    font-size: 12px;
}

/* Popup Text */
/* republic */
.republic-box {
    position: relative;
    display: inline-block;
}

.republic-box-img {
    position: relative;
    display: block;
}

.republic-box-img img {
    max-width: 100%;
    height: auto;
}

.republic-box:hover .popup-text {
    visibility: visible;
    opacity: 1;
}

/* independent */
.independent-box {
    position: relative;
    display: inline-block;
}

.independent-box-img {
    position: relative;
    display: block;
}

.independent-box-img img {
    max-width: 100%;
    height: auto;
}

.independent-box:hover .popup-text {
    visibility: visible;
    opacity: 1;
}

/* democrat */
.democrat-box {
    position: relative;
    display: inline-block;
}

.democrat-box-img {
    position: relative;
    display: block;
}

.democrat-box-img img {
    max-width: 100%;
    height: auto;
}

.popup-text {
    visibility: hidden;
    font-size:14px;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: -25%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.democrat-box:hover .popup-text {
    visibility: visible;
    opacity: 1;
}
.vote--sec--heading--one {
    padding-top: 80px;
}

.register-below-btn p {
    font-size: 12px;
    margin: 0;
}
.necessary-popup {
    padding:0 !important;
}
.cookie-setting-popup-header {
    background: #dc0b10;
    color: #fff;
}
.form-switch .form-check-input {
    width: 2.4em !important;
    height: 1.3em !important;
}
.login-wrapper .login-card {
    margin-bottom: 50px;
}
.not-interested-btn{
    padding: 24px 25px;
    border-radius: 80px;
    border: 2px solid #dc0b10;
    font-size: 16px;
    font-weight: 700;
    background-color: #dc0b10;
    margin-top:20px;
    color: white;
}
.not-interested-btn:hover{
    color: #dc0b10;
    border: 2px solid #dc0b10;
    background-color: #fff;
}
#order-place {
    margin-top: 30px;
}


.disclaimer-wrapper .scenerio-result-four-btns {
    display: grid;
    grid-template-columns: 45% 45%;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.home-first-banner-para {
    padding-top: 50px;
    font-size: 24px;
    font-weight: 500;
}

.home-second-banner-para {
    padding-top: 50px;
    font-size: 24px;
    font-weight: 500;
}
.confirm-vote .confirm-vote-sms {
    font-size: 16px;
}

.confirm-vote .confirm-vote-sms strong {
    text-transform: capitalize;
}

.underline-btn {
    text-decoration: underline;
}
.toss--up--map--div--block {
    padding-top: 60px;
}
.list-style .nav-item {
    list-style: none;
}
.disclaimer-wrapper .scenerio-result-four-btns .rectangle-txt {
    border: 2px solid #fff;
    padding: 2px 10px;
    line-height: 40px;
}

.disclaimer-wrapper .scenerio-result-four-btns .rectangle-txt:hover {
    border: 2px solid #25559F;
    padding: 2px 10px;
    line-height: 40px;
}
.republic--block .image-boxes.republic-boxes .republic-box .dropout-list::after {
    position: absolute;
    content: "DROPPED OUT";
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    transform: translate(-50%, -50%) rotate(-45deg);
    top: 40%;
    width: 100%;
}

.pbd_footer--bottom {
    display: grid;
    grid-template-columns: 50% 50%;
}

.pbd_policy--pages {
    display: flex;
    flex-direction: row;
    list-style: none;
    justify-content: end;
    gap: 15px;
}
.pbd_copyright--footer {
    text-align: start;
}
.pbd_company--info--block {
  padding: 30px 0;
  display: grid;
  grid-template-columns: 100%;
  row-gap: 15px;
}
.pbd_company--info--icon--block {
  display: flex;
  column-gap: 15px;
  align-items: baseline;
}
.pbd_company--info--icon--block i {
  font-size: 22px;
  background: #DC0B10;
  color: #fff;
  border-radius: 500%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-out all;
  cursor: pointer;
}
.pbd_company--info--icon--block span {
  font-family: Inter;
  font-size: 18px;
  font-weight: 400;
}