/*@charset "utf-8";
/*..............embedded fonts..............*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
/*=====font-family: "Outfit", serif;=====*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
/*======font-family: "Cormorant Garamond", serif;======*/

/*..............custom fonts..............*/



/*..............common styles..............*/
body { margin: 0; padding: 0; font-family: "Outfit", serif; font-size: clamp(1rem, 0.977rem + 0.123vw, 1.125rem) /*18px To 16px*/; font-weight: 400; color:#555555; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { margin:0 0 25px; padding:0; color: #3E3E3E; font-family: "Cormorant Garamond", serif; line-height: 1; font-weight: 700; }
h1{ font-size: clamp(2.25rem, 1.856rem + 2.099vw, 4.375rem); /*70px To 36px*/}
h2{ font-size: clamp(1.875rem, 1.644rem + 1.235vw, 3.125rem); /*50px To 30px*/}
h3{ font-size: clamp(1.5rem, 1.431rem + 0.37vw, 1.875rem); /*30px To 24px*/}
h4{ font-size: clamp(1.125rem, 1.056rem + 0.37vw, 1.5rem); /*24px To 18px*/}
h5{ font-size: clamp(1rem, 0.954rem + 0.247vw, 1.25rem); /*20px To 16px*/}
h6{ font-size: clamp(1rem, 0.977rem + 0.123vw, 1.125rem); /*18px To 16px*/}
p{ margin:0 0 25px; line-height: 1.3;}
p:last-child{margin-bottom: 0;}
img{ max-width: 100%;}
a, img{ border:0; text-decoration: none; outline: none;}
a, a:link, a:visited, a:focus, a:hover { color: #2E3192; outline: none; text-decoration: none; transition:all 0.3s ease 0s;}
a:hover{ text-decoration:none;}
ul{padding-left: 0;}
li{list-style: none;}


input, textarea, select{ font-family: "Outfit", serif; font-weight: 400; outline: none; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
input[type="submit"]{font-family: "Outfit", serif; font-weight: 700; transition:all 0.3s ease 0s; outline: none;}
select { appearance: none; -webkit-appearance: none; height: 60px !important; padding-right: 40px !important; background-image: url(../images/select-arw.png); background-repeat: no-repeat; background-position: 96% center;  }
input:not([type="submit"]) {height: 60px !important;}
input[type="checkbox"] {height: 20px !important; width: 20px !important;}

/* --- for placeholder color --- */

.form-control::-moz-placeholder{color:#7B7979;opacity:1;}
.form-control:-ms-input-placeholder{color:#7B7979;}
.form-control::-webkit-input-placeholder{color:#7B7979;}

/* --- for placeholder color --- */
input.form-control,
textarea.form-control {border: 1px solid #C3CAD4 !important; box-shadow: none !important; color: #000; background-color: #fff;}
textarea.form-control{height: 120px !important;}
select{ -moz-appearance: none; -webkit-appearance: none;}
select.form-select {
    background-image: url('../images/down-arrow.svg');
    height: 60px !important;
}
/* --- common background color --- */

.dark-blue-bg{background-color: #002768;}
.white-bg{background-color: #fff;}
/* --- common background color --- */


/* --- Button Styles --- */

.btn { transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; border: 2px solid #BD0B31; display: inline-block; vertical-align: middle; background: #BD0B31; color: #fff !important; padding: 18px 36px; font-size: clamp(1rem, 0.977rem + 0.123vw, 1.125rem) /*18px To 16px*/; line-height: 1; text-transform: capitalize; border-radius: 10px; font-weight: 700; border-radius: 5px; font-family: "Outfit", serif; min-width: 200px;}
.btn:hover {border: 2px solid #BD0B31; background: transparent; color: #BD0B31 !important; transition: all 0.4s ease;-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; box-shadow: 0 12px 10px #0000001f; }

.btn.dark-btn{background-color: #002768; color: #fff !important; border: 2px solid #002768;}
.btn.dark-btn:hover{background-color: transparent; color: #002768 !important;}

.btn.dark-border-btn { border: 2px solid #002768; background: transparent; color: #002768 !important;}
.btn.dark-border-btn:hover{background-color: #002768 !important; color: #fff !important;}



/* --- Button Styles --- */

/*row with equal height column*/
.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
/*row with equal height column*/

/* --- checkbox and radio button Styles --- */

.builder_radiobox ul li label{ font-weight: normal;}
.builder_radiobox ul li input[type="radio"]{ opacity: 0;}
.builder_radiobox ul li input[type="radio"]:empty ~ label{ position:relative; float:left; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; padding: 0 0 0 22px;}
.builder_radiobox ul li input[type="radio"]:empty ~ label:before{ position:absolute; display:block; top:2px; bottom:0; left:0; content:""; width:16px; height:16px; background:url(../images/radiobutton.png) left top no-repeat;}
.builder_radiobox ul li input[type="radio"]:checked ~ label:before{ background:url(../images/radiobutton.png) left bottom no-repeat;}

/* --- checkbox and radio button Styles --- */

.common-padd { padding-top: 150px; padding-bottom: 150px; }
.position-relative { position: relative; z-index: 100; }
.form-control, .form-select { height: 60px !important; padding: 12px 15px; border-radius: 10px; border: 1px solid #C3CAD4; }
.form-select { color: #757575; }
select.form-select.select-black { color: #000; }

.center-heading-sec {text-align: center; max-width: 1117px; margin: 0 auto; margin-bottom: 40px; }
.center-heading-sec h2 span {font-weight: 300; }

.image-box img{width: 100%;height: 100%;object-fit: cover;}

/*..............common styles..............*/


/*-----scroll-bar-design----------*/

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

/* Track */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #002768; background-color: #00266842;}
 
/* Handle */
::-webkit-scrollbar-thumb {background: #BD0B31; border-radius: 10px; }


/*-----scroll-bar-design----------*/

/*for header css*/
header.main-header.header-with-bg {background-color: #3B3B3C; background: rgb(59,59,60);background: linear-gradient(180deg, rgba(59,59,60,1) 0%, rgba(59,59,60,1) 65%, rgba(59,59,60,1) 100%);}
header.main-header.header-with-bg.fixed{background: rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.5) 100%);}
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.main-header .container-fluid { max-width: 1820px; }


.main-menu ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center;}
/* .main-menu ul li { list-style: none; font-size: 20px; font-weight: 400; text-transform: capitalize;} */
.main-menu ul li:not(:last-child) { margin-right: 60px;}
.main-header.fixed .desktop-header-logo .logo {
    max-width: 155px; padding: 20px; box-shadow: none; }
.main-menu ul li a:hover::before, 
.main-menu ul li.menu-item-has-children a { content: ""; width: 100%;-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }
.main-menu ul li ul.sub-menu li a::before,
.main-menu ul li.menu-item-has-children ul.sub-menu li a::before { background-color: #000;}

.main-menu ul li.talk-btn a { background: #D95B2E; color: #fff !important; padding: 14px 35px !important; line-height: 1; font-size: 16px; text-transform: uppercase; border-radius: 30px; }
.main-menu ul li a { cursor: pointer; display: block; color: #002768; position: relative; font-weight: 700; letter-spacing: 1px; text-transform: capitalize; font-family: "Outfit", serif; font-size: clamp(1rem, 0.977rem + 0.123vw, 1.125rem); }
.main-menu ul li a:hover {color: #BD0B31;}
.main-menu ul li.current_page_item a { color: #BD0B31; }
.main-menu li:hover ul.sub-menu {opacity: 1; visibility: unset; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }
.main-menu ul.sub-menu {position: absolute; width: 250px; display: block; background-color: #fff; margin-top: 4px; padding: 6px 20px; border-radius: 10px; box-shadow: 0 15px 12px #0000005e; opacity: 0; visibility: hidden; overflow: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }
.main-menu ul.sub-menu li {margin: 0 !important; padding: 0; }
.main-menu ul.sub-menu li a {color: #000; }
header .user-sec ul {margin: 0; }
header .user-sec ul li {list-style: none; }


.nav_btn { color: #fff; font-size: 22px; text-align: right; display: none; }
.nav_close { display: none; color: #fff; }
.for-mobile { display: none; }
.for-desktop { display: block; }
header.main-header .manu-part {display: flex; align-items: center; width: 100%; }
header.main-header .main-menu { display: flex; align-items: center; width: 100%; justify-content: space-between;}
header.main-header .main-menu .left-menu, header.main-header .main-menu .right-menu { width: 40%; }
header.main-header .main-menu .right-menu { display: flex; align-items: center; justify-content: end; }
header.main-header .main-menu .desktop-header-logo { width: 20%; text-align: center; position: relative; display: flex; justify-content: center; align-items: center; }

.main-header { z-index: 999; left: 0; right: 0; top: 0; position: fixed; background: transparent; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }
.main-header.fixed { box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); transition: all 0.4s; -ms-transition: all 0.4s; -webkit-transition: all 0.4s; background: #fff; padding: 5px 0;}
/* .main-menu ul li a::before{content: ""; width: 0%; height: 2px; background-color: #ED1C24; position: absolute; bottom: 7px; border-radius: 10px;-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;} */
.main-header .desktop-header-logo .logo { max-width: 220px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; padding: 50px 20px; background-color: #fff; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
/* .main-header.fixed .logo { top: -32px; } */


/*==========mobile menu=========*/
.main-header .hdr-rt {display: flex; justify-content: flex-end; align-items: center; width: 100%; }
.main-header .user-sec {display: none;}
.menu-has-children.menu-has-children-open span img {transform: rotate(180deg);-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.menu-has-children span img {transform: rotate(0deg);-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}

.mobile-menu-container ul.sub-menu {height: 0; overflow: hidden; opacity: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.mobile-menu-container ul.sub-menu.sub-menu-open {height: 250px; opacity: 1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}

/* ~~~~~~~~~~ hamburger menu styling ~~~~~~~~~~ */
.hamburger-nav{ display: none; vertical-align: top; width: 22px; height: 20px; position: relative; margin: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; cursor: pointer; margin: 10px 0 10px 0;}
.hamburger-nav span{ display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.hamburger-nav span:nth-child(1){ top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.hamburger-nav span:nth-child(2){ top: 7px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; width: 60%;left: 0;right: 0;margin: 0 auto;}
.hamburger-nav span:nth-child(3){ top: 14px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}


/*when turns close icon*/
.mobile-menu-open .hamburger-nav span:nth-child(1){ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -1px; left: 3px;}
.mobile-menu-open .hamburger-nav span:nth-child(2){ width: 0%; opacity: 0;}
.mobile-menu-open .hamburger-nav span:nth-child(3){ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 15px; left: 3px;}
/*when turns close icon*/
/* ~~~~~~~~~~ hamburger menu styling ~~~~~~~~~~ */


/* ~~~~~~~~~~ mobile menu styling ~~~~~~~~~~ */
.mobile-menu-container{ position: fixed; z-index: 1; top: -100vh; right: 0; left: 0; background: #000; height: 100vh; opacity: 0;  -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out; display: none;     z-index: -1;}
.mobile-menu-open .mobile-menu-container{ top: 0; transform: translateY(0); opacity: 1;}
.mobile-menu-container .inner-container{ padding-top: 130px; height: 100vh; overflow-y: auto; position: relative;}
.mobile-menu {  max-width: 100%; padding-left: 25px; padding-right: 25px; padding-top: 20px; margin: 0 auto; text-align: center;}
.mobile-menu ul{ margin: 0; padding: 0; list-style: none;}
.mobile-menu ul li{ display: block; margin: 10px 0;}
.mobile-menu ul li a{ display: block; font-size: 30px; color: #fff; padding: 4px 0;}
/*.mobile-menu ul > li.active > a:before{    content: ""; position: absolute;  left: 0; right: 0; bottom: -5px; background: #e3982d; height: 4px; width: auto; transition-property: left,right; transition-duration: .3s; transition-timing-function: ease-out;}*/
.mobile-menu ul li.menu-item-has-children > a{padding-right: 15px;}
.mobile-menu ul li.menu-item-has-children > a:after {content: ""; position: absolute; right: 5px; top: 47%;  box-sizing: border-box;  height: 8px; width: 8px; border-style: solid; border-color: #292939; border-width: 0px 2px 2px 0px; transform: rotate(45deg) translateY(-47%); transition: border-width 150ms ease-in-out;}



/* ===== mobile menu animation ===== */
.mobile-menu ul li{opacity: 0;-webkit-transform: translateX(-150px);transform: translateX(-150px);-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;transition: transform 0.4s, opacity 0.4s;}
.mobile-menu-open .mobile-menu ul li {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
.mobile-menu-open .mobile-menu ul li:nth-child(1) {-webkit-transition-delay: 0.16s;transition-delay: 0.16s;}
.mobile-menu-open .mobile-menu ul li:nth-child(2) {-webkit-transition-delay: 0.24s;transition-delay: 0.24s;}
.mobile-menu-open .mobile-menu ul li:nth-child(3) {-webkit-transition-delay: 0.32s;transition-delay: 0.32s;}
.mobile-menu-open .mobile-menu ul li:nth-child(4) {-webkit-transition-delay: 0.40s;transition-delay: 0.40s;}
.mobile-menu-open .mobile-menu ul li:nth-child(5) {-webkit-transition-delay: 0.48s;transition-delay: 0.48s;}
.mobile-menu-open .mobile-menu ul li:nth-child(6) {-webkit-transition-delay: 0.54s;transition-delay: 0.54s;}
/* ===== mobile menu animation ===== */
.mobile-menu-open .mobile-menu ul li.btn { margin: 0 auto;  padding: 5px 5px;  max-width: 150px;}
.mobile-menu-open .mobile-menu ul li.btn a{color: #fff;}


/*=========mobile menu===========*/


/*for header css*/

/*=====home page====*/
.img-box {overflow: hidden;}
.img-box img{width: 100%; height: 100%; object-fit: cover;}

.common-heading { margin-bottom: 50px; position: relative;}
.common-heading p { color: #BD0B31; text-transform: uppercase; letter-spacing: 5px; font-weight: 500; margin-bottom: 15px; }
.common-heading h2 { margin-bottom: 15px; text-transform: capitalize; }
.common-heading h4 { font-size: clamp(2rem, 1.444rem + 2.963vw, 5rem); text-transform: uppercase; color: #fff; opacity: 0.3; font-family: "Outfit", serif; letter-spacing: 24px; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 100%; z-index: -1;}
.common-heading span { color: #000; }

.common-heading.common-heading-white p { color: #fff; }
.common-heading.common-heading-white h2 { color: #fff; }
.common-heading.common-heading-white span { color: #fff; }

.button-center {margin-top: 50px;}

.banner-main { position: relative; overflow: hidden;}
.banner-slider-main-sec{ background-size: cover; background-position: center center; background-repeat: no-repeat;}
.banner-slider-main-sec::after { content: ''; position: absolute; background-color: #fff; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; }
.banner-box-wrapper { position: relative; z-index: 1; min-height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.left-partical-img { position: absolute; bottom: 0; left: 3%; }
.red-box-img { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); max-width: 722px; height: 488px; position: absolute; right: -50px; bottom: 0; z-index: 2; overflow: hidden; }
.red-box-img:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #bd0b31ad; mix-blend-mode: color; }
.blue-box-img { clip-path: polygon(100% 0, 0% 100%, 100% 100%); max-width: 500px; height: 660px; position: absolute; right: 0; bottom: 0; z-index: 1; overflow: hidden; }
.blue-box-img:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #155eabd9; mix-blend-mode: color; }
.banner-content { max-width: 800px; margin: auto; position: relative; z-index: 11; }
.banner-content p{font-weight: 500; color: #777777; }
.button-group { margin-top: 50px; }
.banner-main .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: #002768; }
.banner-main .swiper-pagination { bottom: 70px; }
.button-group .btn:first-child { margin-right: 15px; }

.inner-banner .banner-box-wrapper { min-height: 53vh; }
.inner-banner .red-box-img { max-width: 394px; height: 263px; right: 200px; }
.inner-banner .blue-box-img { max-width: 750px; height: 500px; right: -14%; clip-path: polygon(48% 0, 55% 0, 100% 100%, 0 100%); }
.inner-banner .banner-content { max-width: 605px; margin: unset; margin-top: 10%; }

.slider-marque { padding: 18px 0; background: #BD0B31; }
.slider-marque p{ color: #fff; font-size: clamp(1rem, 0.954rem + 0.247vw, 1.25rem);}
.slider-marque .swiper-slide {padding: 0 20px;}
.slider-marque .swiper-slide::after { position: absolute; content: ''; right: 0; width: 2px; height: 100%; background: #fff; top: 0; }


.political-match-sec { position: relative; overflow: hidden; }
.top-corner-partical { position: absolute; top: 0; left: 0; }
.political-match-main-box { background: #FCF3F4; border-radius: 25px; overflow: hidden; padding: 40px 60px; position: relative; z-index: 12; border-bottom: 5px solid #BD0B31; }
.double_range_slider_box { margin-top: 50px; }
.double_range_slider { width: 100%; height: 10px; position: relative; background-color: #fff; border-radius: 20px; }
.range_track { height: 100%; position: absolute; border-radius: 20px; background-color: #BD0B31; } 
.minvalue { position: absolute; color: #555555; bottom: -15px; transform: translate(0, -100%); left: 0; font-weight: 600; font-size: clamp(1.125rem, 1.056rem + 0.37vw, 1.5rem); transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); will-change: left, transform; -webkit-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
.maxvalue { position: absolute; color: #555555; bottom: 52px; transform: translate(0, -100%); right: 0; font-weight: 600; font-size: clamp(1.125rem, 1.056rem + 0.37vw, 1.5rem); transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); will-change: left, transform; -webkit-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
input[type="range"] { position: absolute; width: 100%; height: 5px; background: none; pointer-events: none; -webkit-appearance: none; -moz-appearance: none; top: 50%; transform: translateY(-50%); }
input::-webkit-slider-thumb { height: 24px; width: 24px; border-radius: 50%; background-color: #002768; pointer-events: auto; -webkit-appearance: none; cursor: pointer; margin-bottom: 1px; }
input::-moz-range-thumb { height: 24px; width: 24px; border-radius: 50%; background-color: #002768; pointer-events: auto; -moz-appearance: none; cursor: pointer; margin-top: 30%; }
.match-box { display: flex ; justify-content: space-between; margin-top: 20px; }
.match-box .tooltip-text { border: transparent; background: transparent; padding: 0; color: #555555; font-weight: 500; font-size: clamp(0.875rem, 0.829rem + 0.247vw, 1.125rem); }
.political-match-rench-box ul li { width: 47%; }
.political-match-rench-box ul { display: flex ; gap: 50px; flex-wrap: wrap; justify-content: space-between; }

input.voter-data::-webkit-slider-thumb { background-color: rgb(255 94 35); }
input.voter-data::-moz-range-thumb { background-color: rgb(255 94 35); }

input.voter-data-same::-webkit-slider-thumb { background-color: rgb(6, 255, 64); }
input.voter-data-same::-moz-range-thumb { background-color:  rgb(6, 255, 64);  }

.campaign-main-img { border-radius: 25px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); height: 555px; }
.campaign-details { background: #F3F3F3; height: 100%; border-radius: 10px; padding: 50px 40px; border: 1px solid #DDDDDD; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }
.campaign-profile { display: flex ; align-items: center; margin-bottom: 20px;}
.campaign-profile-img { width: 80px; height: 80px; border-radius: 100px; overflow: hidden; margin-right: 15px; }
.campaign-profile h4 { margin-bottom: 0; width: calc(100% - 80px); font-family: "Outfit", serif; font-weight: 600; color: #555555; }
.details-box { padding: 20px; background-color: #496492; border-radius: 10px; margin-bottom: 25px;}
.details-box ul li span { width: 50%; display: inline-block; color: #fff; }
.details-box ul li span:last-child { width: calc(100% - 35%); font-weight: 700; }
.details-box ul li { display: flex ; }
.details-box ul li:not(:last-child) { margin-bottom: 12px;}
.campaign-details .btn { width: 100%; box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.35); }

.campaign-sec { position: relative; overflow: hidden; }
.flag-partical { position: absolute; z-index: -1; right: 0; top: 0; }


.organizational-campaign-sec { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; overflow: hidden;}
.organizational-campaign-sec::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(270deg, rgba(0, 39, 104, 0) 0%, #002768 98.3%); }
.organizational-campaign-sec .common-heading h2 { font-size: clamp(1.875rem, 1.528rem + 1.852vw, 3.75rem); }
.common-sub-text p { color: #fff; }
.flag-left { position: absolute; z-index: 1; top: 20%; }
.top-right-corner { position: absolute; right: 0; top: 0; }
.organizational-campaign-box { background-color: #00000052; padding: 20px; border-radius: 10px; backdrop-filter: blur(15px); height: 100%; }
.campaign-icon { width: 50px; height: 50px; background: #fff; display: flex ; justify-content: center; align-items: center; border-radius: 100px; margin-bottom: 15px; }
.organizational-campaign-box h4, .organizational-campaign-box p { color: #fff; }
.organizational-campaign-box h4 {margin-bottom: 10px; font-family: "Outfit", serif;}
.organizational-campaign-box-heading {margin-bottom: 50px;}

.main-header .desktop-header-logo .logo a img { max-height: 175px;}

.trust-success-sec { position: relative; overflow: hidden; }
.back-partical-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* .scroll-box { max-width: 800px; margin: auto; margin-bottom: 170px; } */



/* .contant-box {
    background: #f0f0f0;
} */

.scroll-text { position: relative; width: 100%; height: 400px; overflow: hidden; margin-bottom: 170px; }
.scroll-text ul { list-style: none; margin: 0; padding: 0; position: relative; }
.scroll-text ul li { display: flex ; align-items: center; justify-content: center; max-width: 800px; text-align: center; margin: auto; margin-bottom: 40px; }
.scroll-text::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 38%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8183648459383753) 0%, rgba(255, 255, 255, 0.1516981792717087) 100%); }
.scroll-text::before { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 38%; z-index: 1; background: linear-gradient(0deg, rgba(255, 255, 255, 0.8183648459383753) 0%, rgba(255, 255, 255, 0.1516981792717087) 100%); }




.from-box .from-box-img { width: 308px; height: 345px; border-radius: 25px; overflow: hidden; }
.from-box {border-radius: 25px; overflow: hidden; display: flex ; align-items: center; }
.from-text { width: calc(100% - 308px); padding: 40px 30px; }
.red-box { background-color: #CD002C;}
.green-box {background-color: #29BD0B;}
.from-text h2, .from-text ul li { color: #fff; }
.from-text ul li { font-weight: 500; padding-left: 27px; position: relative; }
.from-text ul li::after { width: 20px; height: 20px; position: absolute; left: 0; top: 4px; content: ""; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.from-box.red-box ul li::after { background-image: url('../images/cross-white.svg');}
.from-box.green-box ul li::after { background-image: url('../images/tick-white.svg');}
.from-text ul li:not(:last-child) { margin-bottom: 15px; }

.subscription-sec { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; overflow: hidden; }
.subscription-sec:after { content: ''; position: absolute; background-color: #BD0B31; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.9; }
.subscription-sec .common-heading { max-width: 890px; margin: auto; margin-bottom: 50px; }
.subscription-sec::before { content: ''; position: absolute; background-color: #ffffff; bottom: 0; left: 0; width: 100%; height: 54%; opacity: 1; z-index: 1; background-repeat: no-repeat; background-position: top left; background-size: contain; background-image: url('../images/top-left-corner.png');}

.pricing-card { background-color: #F3F3F3; border-radius: 10px; overflow: hidden; height: 100%; transition: 0.3s ease-in-out all; -webkit-transition: 0.3s ease-in-out all; -moz-transition: 0.3s ease-in-out all; -ms-transition: 0.3s ease-in-out all; -o-transition: 0.3s ease-in-out all; }
.pricing-card:hover { box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); background-color: #fff; }
.pricing-heading { padding: 22px; background-color: #002768; }
.pricing-heading h3 { font-size: clamp(1.5rem, 1.315rem + 0.988vw, 2.5rem); margin-bottom: 0; color: #fff; }
.pricing-details { padding: 30px 30px 40px; }
.details-main p { font-weight: 700; font-size: clamp(1rem, 0.954rem + 0.247vw, 1.25rem); text-transform: capitalize; color: #000; margin-bottom: 10px; }
.details-main span { font-size: clamp(1rem, 0.977rem + 0.123vw, 1.125rem); color: #000; }
.main-price { font-size: clamp(2.375rem, 2.12rem + 1.358vw, 3.75rem); font-weight: 600; color: #002768; padding: 40px 0 30px; display: block; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; margin: 30px 0; }
.main-price span{color: #000000; font-size: clamp(1.5rem, 1.431rem + 0.37vw, 1.875rem); padding-left: 30px; font-weight: 500; }
.pricing-features h3 { margin-bottom: 10px; }
.pricing-features ul li { font-weight: 500; padding-left: 27px; position: relative; }
.pricing-features ul li:not(:last-child) { margin-bottom: 15px; }
.pricing-features ul li::after { width: 20px; height: 20px; position: absolute; left: 0; top: 4px; content: ""; background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url('../images/black-tick.svg');}
.pricing-features ul { margin-bottom: 30px; }
.pricing-features a {width: 100%;}

.contact-us-sec .common-heading h4 { color: #777777; opacity: 0.1; }
.form-box-wrapper {padding: 0 50px;}
.contact-form-main { background-color: #DDDDDD; position: relative; padding: 50px 0; overflow: hidden;}
.right-partical-bottom { position: absolute; right: 0; bottom: 0; }


footer.footer-sec { background-color: #002768; }
footer.footer-sec .footer-wrapper .logo-box { background: #fff; height: 100%; padding: 20px; width: 200px; position: absolute; display: flex ; justify-content: center; align-items: center; left: 0; top: 0; }
footer.footer-sec .footer-wrapper { display: flex ; justify-content: space-between; align-items: center;position: relative; overflow: hidden; }
footer.footer-sec .footer-wrapper .footer-link { text-align: right; width: 100%; padding: 80px 0; }
footer.footer-sec .footer-wrapper .footer-link ul { display: flex ; justify-content: end; margin-bottom: 20px; }
footer.footer-sec .footer-wrapper .footer-link ul li:not(:last-child){}
footer.footer-sec .footer-wrapper .footer-link ul li:not(:last-child) { padding-right: 15px; margin-right: 15px; position: relative; }
footer.footer-sec .footer-wrapper .footer-link ul li a, footer.footer-sec .footer-wrapper .footer-link p {color: #fff; text-transform: uppercase; letter-spacing: 8px; }
footer.footer-sec .footer-wrapper .footer-link ul li:not(:last-child)::after { content: ""; position: absolute; right: 0; background-color: #fff; height: 80%; width: 1.5px; top: 50%; transform: translateY(-50%); }





.political-match-wrapper .political-match-main-box { padding: 70px; }
.political-match-wrapper .political-match-main-box .common-heading { max-width: 728px; margin: auto; }
.political-match-wrapper .political-match-main-box .common-heading span { text-transform: capitalize; color: #777777; }
.why-voter-match-img { border-radius: 25px; overflow: hidden; height: 455px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15);}
.voter-match-text-box p { font-weight: 700; color: #000; font-size: clamp(1rem, 0.954rem + 0.247vw, 1.25rem); }
.voter-match-text-box span { text-transform: capitalize; }
.voter-match-text-box { padding-left: 40px; }

.topic-box-wrapper { border-radius: 20px; padding: 50px 40px; position: relative; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; height: 100%;}
.topic-box-wrapper::after { content: ''; position: absolute; left: 0; right: 0; width: 100%; height: 100%; top: 0; }
.engagement-box::after { background: linear-gradient(180deg, rgba(189, 11, 49, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%); }
.analytics-box:after{background: rgba(255, 255, 255, 0.9); }
.engagement-box h2, .engagement-box p, .engagement-box ul li { color: #fff; }
.analytics-box h2, .analytics-box ul li { color: #000; }
.text-wrapper-main h2 {margin-bottom: 50px;}
.text-wrapper-main p {font-weight: 400; text-transform: capitalize;}
.text-wrapper-main ul {margin-bottom: 30px;}
.text-wrapper-main ul li { padding-left: 38px; position: relative; font-size: clamp(1.125rem, 1.079rem + 0.247vw, 1.375rem); font-weight: 700; text-transform: capitalize;}
.text-wrapper-main ul li:not(:last-child) {margin-bottom: 15px; }
.text-wrapper-main ul li::after { width: 30px; height: 30px; position: absolute; left: 0; top: 4px; content: ""; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.engagement-box .text-wrapper-main ul li::after { background-image: url('../images/white-tick-bg.svg'); }
.analytics-box .text-wrapper-main ul li::after { background-image: url('../images/red-tick.svg'); }


.transform-sec {position: relative; overflow: hidden; background-color: #F2F2F2;}
.transform-sec .flag-partical { z-index: 1; top: unset; bottom: 0; }
.transform-box { padding: 20px 30px; border-radius: 25px; overflow: hidden; }
.transform-box p, .transform-box ul li { font-size: clamp(1.125rem, 1.079rem + 0.247vw, 1.375rem); font-weight: 700; margin-bottom: 10px; }
.transform-red p { color: #FF0037;}
.transform-green P{color: #2CBE0E;}
.transform-box ul li { color: #000;}
.transform-red { background-color: #FCF3F4; border-bottom: 5px solid #FF0037; margin-bottom: 30px;}
.transform-green { background-color: #F4FFF2; border-bottom: 5px solid #2CBE0E; }
.transform-box li { padding-left: 27px; position: relative; font-size: clamp(1.125rem, 1.079rem + 0.247vw, 1.375rem); font-weight: 700; text-transform: capitalize; }
.transform-box ul li::after { width: 20px; height: 20px; position: absolute; left: 0; top: 4px; content: ""; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.transform-red ul li::after{background-image: url('../images/red-cross.svg'); }
.transform-green ul li::after{background-image: url('../images/green-tick.svg'); }
.transform-img-box { height: 650px; border-radius: 20px; overflow: hidden; margin-left: 30px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); }


.feature-img { height: 455px; border-radius: 20px; overflow: hidden; }
.feature-list ul {margin-bottom: 50px;}
.feature-list ul li { font-size: clamp(1.125rem, 1.079rem + 0.247vw, 1.375rem); font-weight: 700; color: #000; text-transform: capitalize;}
.feature-list ul li:not(:last-child) {margin-bottom: 20px;}
.feature-list ul li span { padding-right: 15px; }

.matter-sec { position: relative; overflow: hidden; background-color: #012768; }
.matter-text-box .common-heading h2 { color: #fff; }
.matter-text-box ul li { font-size: clamp(1.125rem, 1.079rem + 0.247vw, 1.375rem); font-weight: 700; color: #fff; text-transform: capitalize;}
.matter-text-box ul li:not(:last-child) {margin-bottom: 20px;}
.matter-text-box ul li span { padding-right: 15px; }
.matter-img { height: 455px; overflow: hidden; border-radius: 20px; border: 5px solid #fff; }
.matter-sec::after { content: ''; position: absolute; width: 32%; right: 0; bottom: 0; background: #BD0B31; height: 100%; }
.white-bg-partical { position: absolute; bottom: 0; right: 0; z-index: 11; }
.top-right-flag { position: absolute; right: 0; z-index: 11; top: 0; }

.real-result-sec { position: relative; overflow: hidden; }
.result-box { background: #F3F3F3; text-align: center; padding: 50px 30px 30px; border-radius: 10px; border: 1px solid #DDDDDD; position: relative; }
.result-box span { width: 60px; height: 60px; background: #BD0B31; display: flex ; justify-content: center; align-items: center; border-radius: 100px; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); }
.result-box p { font-size: clamp(1.125rem, 1.056rem + 0.37vw, 1.5rem); font-weight: 700; color: #000; }
.real-result-sec .row .col-lg-4 { margin-top: 60px; }


.statement-sec{position: relative; overflow: hidden;}
.statement-sec::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #c00b29cb; }
.statement-sec .transform-box { padding: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; }
.statement-sec .transform-box ul li { color: #fff; padding-left: 40px;}
.statement-sec .transform-box  ul li::after { background-image: url('../images/white-tick-bg.svg'); width: 30px; height: 30px; }
.statement-text-box p { color: #fff; }
.statement-text-box { padding-left: 60px; }
.statement-wrapper .row:nth-child(even) { flex-direction: row-reverse; padding-top: 100px; }

.single-rench-wrap.public-poll-form-sec ul li label {font-size: clamp(1.125rem, 1.067rem + 0.256vw, 1.375rem);}
.single-rench-wrap.public-poll-form-sec ul li .value-name p {font-size: clamp(0.875rem, 0.846rem + 0.128vw, 1rem);}
.single-rench-wrap.public-poll-form-sec ul li .range-slider .thumb {font-size: clamp(0.875rem, 0.846rem + 0.128vw, 1rem);}
.common-heading.political-match-heading h2 {font-size: clamp(2rem, 1.885rem + 0.513vw, 2.5rem);}
/*Media Query css*/

@media only screen and ( min-width:1700px ) {
    /* .container { max-width: 1620px;} */
  
}

@media only screen and ( min-width:1921px ) {

body{max-width: 1920px!important; margin: 0 auto;}
header { max-width: 1920px; margin: 0 auto; }

}

/* @media only screen and ( min-width:1700px ) {
    .container { max-width: 1630px !important;}

} */
@media only screen and ( max-width:1699px ) {
    /* .how-to-work-sec .boat-partical { right: 42%;} */
  
}

@media only screen and ( max-width:1441px ) {
   
}

@media only screen and ( max-width:1399px ) {

}

@media only screen and ( max-width:1280px ) {
    
}


@media only screen and ( max-width:1199px ) {
    header.main-header .main-menu { display: none; }
    .for-mobile { display: block; }
    
	/*  ===========mobile nav==========  */
    .main-header .user-sec {margin-left: 10px;display: flex;align-items: center; }

    .hamburger-nav{ display: inline-block; margin-left: 20px; }
    .mobile-menu ul li a.btn { display: inline-block; padding: 15px 20px;}
    .mobile-menu-container{display: block;background-color: #fff;}    
    .hamburger-nav span{background: #BD0B31;}
    .header-section .right-panel{    -ms-flex-pack: end!important; justify-content: flex-end!important; }
    .mobile-menu-logo{max-width: 50px; margin: 0 auto; text-align: center; display: none;}
    .mobile-menu ul li { padding: 0; }
    .mobile-menu ul li a { font-size: 32px; color: #000;  text-align: center;  font-weight: 800; text-transform: uppercase;} 
    .mobile-menu ul li a:hover{color: #B4975A;}
    .mobile-menu ul li ul.sub-menu li {  margin: 11px 0;}  
    .mobile_menu_btn{margin-top: 30px;}
    .mobile_menu_btn a.btn.plbig{padding-left: 50px;}
    .contact_icon { width: 41px; height: 41px; top: 5px; left: 4px; font-size: 20px; }
    .mobile_menu_btn a.plbig{margin-right: 15px;}
    .common-padd-xl-top { padding-top: 140px; padding-bottom: 60px; }
    header.main-header .main-menu { display: none; }
    .for-mobile { display: block; }
    .main-header .hdr-rt{justify-content: space-between;}
    .only-mobile.for-mobile { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .only-mobile.for-mobile .logo { width: 130px; margin-bottom: -88px; position: relative; top: inherit; }
    .main-header.fixed .only-mobile.for-mobile .logo { margin-bottom: -75px; }

    /*  ===========mobile nav==========  */
	
}

@media only screen and ( max-width: 991px ) {
    
}


@media only screen and ( max-width: 767px ) {
    

}
@media only screen and ( max-width: 575px ) {
    
}
@media only screen and ( max-width: 480px ) {
  

}

@media only screen and ( max-width: 360px ) {
   
}

/*Media Query css*/





/* ---------------------------------------------------------------------------
   Match-breakdown slider: label alignment + legend
   Appended last so it wins over the rules above without needing !important.
   --------------------------------------------------------------------------- */

/* Single source of truth for the thumb size. custom_votersection.js reads this
   custom property to work out where a thumb's centre actually sits, so the
   value labels track it exactly. Change it here and the labels follow. */
.double_range_slider { --vm-thumb-size: 24px; }
.double_range_slider input[type="range"]::-webkit-slider-thumb {
    width: var(--vm-thumb-size); height: var(--vm-thumb-size);
}
.double_range_slider input[type="range"]::-moz-range-thumb {
    width: var(--vm-thumb-size); height: var(--vm-thumb-size);
}

/* Both value labels sit on one baseline above the track. Previously .minvalue
   was pinned at bottom:-15px and .maxvalue at bottom:52px, so the two numbers
   on a single slider rendered at different heights. `right: auto` lets the
   inline `left` the script sets take effect on .maxvalue, which was right:0. */
.double_range_slider .minvalue,
.double_range_slider .maxvalue {
    bottom: calc(var(--vm-thumb-size) / 2 + 10px);
    top: auto;
    right: auto;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* Legend */
.match-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 40px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.match-legend-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 24px;
}
.match-legend-title {
    width: 100%;
    text-align: center;
    margin: 0 0 2px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
    font-size: 0.75rem;
}
.match-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
    font-size: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
    line-height: 1.3;
}
.match-legend-dot {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
}
.match-legend-bar {
    flex: 0 0 auto;
    width: 26px;
    height: 8px;
    border-radius: 20px;
    display: inline-block;
}

/* Stack the two legend groups on narrow screens. */
@media only screen and (max-width: 767px) {
    .match-legend { flex-direction: column; gap: 18px; margin-top: 40px; }
    .match-legend-group { gap: 8px 18px; }
}

/* ---------------------------------------------------------------------------
   Footer on phone widths. The desktop footer floats a 200px white logo box
   over the left edge and right-aligns wide letter-spaced links; under 768px
   the links slid beneath the logo box and the copyright clipped off-screen.
   Stack it instead: logo band on top, centred links below, tighter tracking.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    footer.footer-sec .footer-wrapper { display: block; }
    footer.footer-sec .footer-wrapper .logo-box { position: static; width: 100%; height: auto; padding: 16px; }
    footer.footer-sec .footer-wrapper .logo-box img { max-width: 140px; }
    footer.footer-sec .footer-wrapper .footer-link { text-align: center; padding: 26px 12px 22px; }
    footer.footer-sec .footer-wrapper .footer-link ul { justify-content: center; flex-wrap: wrap; }
    footer.footer-sec .footer-wrapper .footer-link ul li a,
    footer.footer-sec .footer-wrapper .footer-link p { letter-spacing: 2px; font-size: 13px; }
}

/* ---------------------------------------------------------------
   F-11 forced-ranking question ("which issue will most influence
   your vote?"). Sits between the Likert sliders and the
   Calculate Compatibility button on the public poll form.
   Colors are inherited from the campaign's font color via inline
   styles on the labels, so this only handles layout + chrome.
   --------------------------------------------------------------- */
.deciding-issue-block {
    margin-top: 45px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.deciding-issue-label {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: center;
}

.deciding-issue-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.deciding-issue-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    font-size: 15px;
    line-height: 1.2;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.deciding-issue-option:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
}

.deciding-issue-option input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #e63946;
    cursor: pointer;
}

.deciding-issue-option:has(input[type="radio"]:checked) {
    background: rgba(255, 255, 255, 0.2);
    border-color: #e63946;
}

.deciding-issue-option input[type="radio"]:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Hidden until the voter tries to continue without answering. */
.deciding-issue-error {
    display: none;
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #ffb3ba;
}

.deciding-issue-block.has-error .deciding-issue-error {
    display: block;
}

.deciding-issue-block.has-error .deciding-issue-option {
    border-color: rgba(255, 179, 186, 0.85);
}

@media (max-width: 767px) {
    .deciding-issue-block {
        margin-top: 32px;
        padding-top: 24px;
    }

    .deciding-issue-label {
        font-size: 17px;
        margin-bottom: 16px;
    }

    .deciding-issue-options {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .deciding-issue-option {
        justify-content: flex-start;
        padding: 12px 16px;
    }
}

/* F-11 recap on the voter's results page. */
.deciding-issue-recap {
    margin: 34px auto 0;
    padding: 20px 24px;
    max-width: 560px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
}

.deciding-issue-recap-label {
    margin: 0 0 6px;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.82;
}

.deciding-issue-recap-value {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .deciding-issue-recap {
        padding: 16px 18px;
    }

    .deciding-issue-recap-value {
        font-size: 19px;
    }
}