/* DETAILS

==================================================

	Theme Name: Political Candidate Website

==================================================

*/

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{

    /* ~-~-~-~-~ common transition ~-~-~-~-~ */

    --transition-common: all 0.8s ease 0s;

    /* ~-~-~-~-~ common transition ~-~-~-~-~ */

    /* ~-~-~-~-~ colors ~-~-~-~-~ */

    --color-primary: #B31942;
    --color-white: #FFFFFF;
    --color-navy: #0A3161;
    --color-deep-navy: #081C35;
    --color-gray: #555555;
    --color-light-gray: #EEEEEE;
    --color-black-primary: #000000;

    /* ~-~-~-~-~ colors ~-~-~-~-~ */

    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */

    --ff-base: "Montserrat", sans-serif;
    --ff-awesome: "Font Awesome 7 Free ";
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;

    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

    --f-size-XXXL: 60px; 
    --f-size-XXL: 60px;  
    --f-size-XL: 24px;
    --f-size-L: 20px;  
    --f-size-M: 18px;   
    --f-size-S: 16px; 

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

    /* ~-~-~-~-~ other adjustments ~-~-~-~-~ */

    --margin-title: 0 0 30px 0;
    --margin-paragraph: 0 0 30px 0;

    --border-radius-image: 20px;

    --padding-height: 100px;

    --gap-24:24px;
    --gap-60:60px;

    /* ~-~-~-~-~ other adjustments ~-~-~-~-~ */

    /* ~-~-~-~-~ form adjustments ~-~-~-~-~ */

    --form-height: 64px;
    --form-font-color: var(--color-gray);
    --form-placeholder-color: var(--color-gray);
    --form-border-radious: 10px;
    --form-holder-bg: var(--color-white);

    /* ~-~-~-~-~ form adjustments ~-~-~-~-~ */

}

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

    :root{
        --f-size-XXXL: 50px;    
        --f-size-XXL: 50px; 
   }
}

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

    :root{
        /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

        --f-size-XXXL: 45px;    
        --f-size-XXL: 45px;      
        --f-size-XL: 20px;       
        --f-size-L: 18px;
        --f-size-M: 16px;      

        /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

        --gap-60:40px;

        --padding-height: 80px;
   }
}

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

    :root{
    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

    --f-size-XXXL: 35px;    
    --f-size-XXL: 35px;      
    --f-size-XL: 18px;       
    --f-size-L: 16px;
    --f-size-M: 15px;      
    --f-size-S: 15px;    

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

    --border-radius-image: 15px;

    --gap-60:30px;

    --margin-title: 0 0 20px 0;
    --margin-paragraph: 0 0 20px 0;

    --padding-height: 60px;

    --form-height: 50px;
   }
}

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

    :root{
        --f-size-XXXL: 28px;    
        --f-size-XXL: 28px; 
        --f-size-XL: 16px;
        --f-size-M: 14px;

        --padding-height: 40px;
   }
}

/* ~-~-~-~-~-~-~-~-~-~ global font settings start ~-~-~-~-~-~-~-~-~-~ */

html { scroll-behavior:  smooth;}

body.menu-open { overflow: hidden; }
body{ font-family: var(--ff-base); font-weight: var(--fw-regular); font-size: var(--f-size-M); color: var(--color-gray); overflow-x: hidden; line-height: 1.3; transition: var(--transition-common); scroll-behavior: smooth; }
body,p{ margin: 0;}

p:not(:last-child){ margin: var(--margin-paragraph);}
p strong {font-weight: var(--fw-semi-bold);}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{ font-family: var(--ff-base); font-weight: var(--fw-medium); color: var(--color-navy); line-height: 1.1; margin: var(--margin-title);}
h1,.h1{ font-size: var(--f-size-XXXL);}
h2,.h2{ font-size: var(--f-size-XXL);}
h3,.h3{ font-size: var(--f-size-XL);}
h4,.h4{ font-size: var(--f-size-L);}
h5,.h5{ font-size: var(--f-size-M);}
h6,.h6{ font-size: var(--f-size-S);}



/* ~-~-~-~-~-~-~-~-~-~ global adjustments start ~-~-~-~-~-~-~-~-~-~ */

img{ max-width: 100%;}

a, img{ border: none; text-decoration: none; outline: none;}
a, a:link, a:visited, a:focus, a:hover{ outline: none; text-decoration: none; transition: var(--transition-common);}

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

.padding-common{ padding-top: var(--padding-height); padding-bottom: var(--padding-height);}
.padding-top-common{ padding-top: var(--padding-height);}
.padding-bottom-common{ padding-bottom: var(--padding-height);}

.padding-small {padding: 80px 0;}
.padding-small-top {padding-top: 80px;}
.padding-small-bottom {padding-bottom: 80px;}

strong {font-weight: var(--fw-bold);}

/* ==##==##== utility classes ==##==##== */

.decorated-title{ display: inline-flex; font-family: var(--ff-accent-regular); font-weight: var(--fw-semi-bold); font-size: var(--f-size-M); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.15rem; position: relative; padding-bottom: 3px; isolation: isolate; margin-bottom: 15px;}
.decorated-title::before{ content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 95%; background: rgb(237,28,36); background: linear-gradient(0deg, rgba(237,28,36,0.12) 0%, rgba(237,28,36,0) 100%);}

.overlay-content{ position: relative; z-index: 3;}

.arrow{ display: inline-flex; justify-content: center; align-items: center; width: 45px; height: 45px; background: var(--color-accent); transition: var(--transition-common);}

.arrow::before{ content: ""; background: url(../images/right-arrow.svg) top left no-repeat; background-size: 100%; width: 20px; height: 20px;}

.fade-bg{ background: var(--color-quaternary);}

.background-cover { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }

.responsive-image-wrapper { position: relative; overflow: hidden; padding-bottom: 100%; }
.responsive-image-wrapper img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-image);}

.mb-24{ margin-bottom: var(--gap-24);}
.mb-60{ margin-bottom: var(--gap-60);}

/* ==##==##== utility classes ==##==##== */

/* ==##==##== content width adjustments ==##==##== */

.margin-lr-auto{ margin-left: auto; margin-right: auto;}

.max-width__1176{ max-width: 1176px;}

/* ==##==##== content width adjustments ==##==##== */

/* ==##==##== loop space adjustments ==##==##== */

.row-gap_24 .item{ margin-bottom: 24px;}

/* ==##==##== loop space adjustments ==##==##== */

/* ==##==##== button settings ==##==##== */

.button__primary{ display: inline-flex; justify-content: center; font-weight: var(--fw-semi-bold); line-height: 1; font-size: var(--f-size-M); color: var(--color-white); padding: 20px 40px; background: var(--color-primary); border: 1px solid transparent; border-radius: 30px; text-align: center; }
.button__primary:hover{ background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary);}

.button__white { background: transparent; color: var(--color-white); border-color: var(--color-white);}
.button__white:hover {background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary);}

.button__primary__border { background: transparent; color: var(--color-primary); border-color: var(--color-primary);}
.button__primary__border:hover {background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary);}

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

    .button__primary, .header-button a{ padding: 11px 25px;}

    .mb-5{ margin-bottom: 25px !important;}

}

/* ==##==##== button settings ==##==##== */

/* ==##==##== form control settings ==##==##== */

.form-group { margin-bottom: 30px;}

.form-control { background-color: var(--color-white); height: var(--form-height); border: none; border-radius: var(--form-border-radious); color: var(--form-font-color); font-family: var(--ff-base); font-size: var(--f-size-M); padding-right: 20px; padding-left: 20px; border: 1px solid transparent; }

select.form-control { background-image: url(../images/accord-dropdown.svg); background-position: right 10px center; background-size: 9px; background-repeat: no-repeat; height: var(--form-height); cursor: pointer;}

textarea.form-control{ height: 210px; padding-top: 20px; resize: none;}

.form-control::-moz-placeholder { color: var(--form-placeholder-color); opacity: 1; font-weight: 400;}
.form-control:-ms-input-placeholder { color: var(--form-placeholder-color); font-weight: 400;}
.form-control::-webkit-input-placeholder { color: var(--form-placeholder-color); font-weight: 400;}
.form-control:focus {box-shadow: none; border: 1px solid var(--color-gray);}

.input-search { outline: none; height: 60px; border: 1px solid var(--color-navy); border-radius: 30px; padding-left: 30px; padding-right: 30px; background: url(../images/search.svg) no-repeat center right 30px; color: var(--color-gray); }

.input-search.has-text { background: none; }

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

/* Firefox */

input[type=number] {

  -moz-appearance: textfield;

}

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

    .form-group { margin-bottom: 20px; }

}

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

    textarea.form-control { height: 130px; padding-top: 12px;}

}

/* ==##==##== form control settings ==##==##== */

.bg-light-grey {background: var(--color-light-gray);}

/* ~-~-~-~-~-~-~-~-~-~ header adjustments start ~-~-~-~-~-~-~-~-~-~ */


/* ~~hamburger menu start~~ */

.hamburger-nav { display: none; vertical-align: top; width: 28px; height: 26px; position: relative; margin: 0 0 0 15px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; margin-top: 0; z-index: 9;}
.hamburger-nav span { display: block; position: absolute; height: 2px; width: 100%; background: var(--color-white); 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: 2px; -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: 10px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.hamburger-nav span:nth-child(3) { top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.hamburger-nav-close { vertical-align: top; width: 30px; height: 24px; position: relative; margin: 0 0 0 15px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; margin-top: 0; z-index: 9;}
.hamburger-nav-close span { display: block; position: absolute; height: 2px; width: 100%; background: var(--color-white); 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-close span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 10px; left: 3px;}
.hamburger-nav-close span:nth-child(2) { width: 0%; opacity: 0;}
.hamburger-nav-close span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 10px; left: 2px;}

/* ~~hamburger menu end~~ */


.main-header{ position: fixed; top: 0; right: 0; left: 0; z-index: 999; padding: 50px 0; transition: var(--transition-common);}

.header-logo a{ display: block;}
.header-logo a img{ display: block; width: auto; height: 80px;}
.header-logo, .header-button { width: 20%; }

.header-menu { width: 60%; }

.header-button{ text-align: right; }

.desktop-menu ul{ align-items: center; justify-content: center;}
.desktop-menu ul li:not(:last-child){ margin-right: 30px;}
.desktop-menu ul li:not(.header-button) a{ display: block; font-size: var(--f-size-M); color: var(--color-white); position: relative;}
.desktop-menu ul li a:hover{ color: #3895c2;}
.header-menu ul li.current-menu-item a {font-weight: var(--fw-bold);}

/* sub-menu start */

.main-header .menu-item-has-children { position: relative; }
.main-header .menu-item-has-children .sub-menu { background: var(--color-white); width: 440px; border-radius: 0 0 var(--border-radius-image) var(--border-radius-image); position: absolute; top: 100px; opacity: 0; visibility: hidden; overflow: hidden; transition: var(--transition-common); }
.main-header .menu-item-has-children .sub-menu li{ margin: 0;}
.main-header .menu-item-has-children .sub-menu li a{ display: block; margin: 0; padding: 10px 20px; color: var(--color-black) !important; font-weight: var(--fw-semi-bold);}
.main-header .menu-item-has-children .sub-menu a:hover { background: #EFF9F9; color: var(--color-teal) !important; }
.main-header .menu-item-has-children:hover .sub-menu { transform: translateY(10px); opacity: 1; visibility: visible; }
.main-header .menu-item-has-children>a { padding-right: 20px !important; }
.main-header .menu-item-has-children>a::before { position: absolute; content: ''; border: solid var(--color-black); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg) translateY(-50%); -webkit-transform: rotate(45deg) translateY(-50%); right: 5px; top: 49%; transition: var(--transition-common); }

.desktop-menu ul li a:hover::before{ border-color: var(--color-accent);}

/* sub-menu end */

/* Mobile Menu */

.mobile-menu { display: none; background: var(--color-navy); width: 100vw; height: 100vh; position: fixed; top: 0; right: -100vw; overflow: hidden; z-index: 999; transition: var(--transition-common); }
.mobile-menu .top-row { padding: 20px; }
.mobile-menubar { height: calc(100vh - 120px); padding: 20px 0; overflow: auto; }
.mobile-menu .mobile-menubar 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; padding: 0 20px; font-size: 22px;}
.mobile-menu .mobile-menubar li a{ color: var(--color-white);}
.mobile-menu .mobile-menubar li:not(.header-button) a{ display: inline-block; padding: 10px 0;}
.mobile-menu .mobile-menubar li .sub-arrow { display: flex; align-items: center; justify-content: end; width: 33px; height: 33px; position: absolute; z-index: 1; top: 10px; right: 20px; color: #fff; }
.mobile-menu .mobile-menubar li li{ padding: 0;}

.menu-open .mobile-menu { right: 0; }
.menu-open .mobile-menu .mobile-menubar li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); position: relative;}
.menu-open .mobile-menu .mobile-menubar li:nth-child(2) { transition-delay: 0.24s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(3) { transition-delay: 0.32s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(4) { transition-delay: 0.40s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(5) { transition-delay: 0.48s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(6) { transition-delay: 0.56s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(7) { transition-delay: 0.57s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(8) { transition-delay: 0.58s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(9) { transition-delay: 0.59s; }

.mobile-menu .mobile-menubar li.button__primary {display: none;}

/* ~~ header sticky start ~~ */

@keyframes slide-down {

    0% {

        opacity: 0;

        transform: translateY(-100%);

    }



    100% {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ~~ header sticky start ~~ */

@keyframes slide-down {

	0% {

		opacity: 0;

		transform: translateY(-100%);

	}



	100% {

		opacity: 1;

		transform: translateY(0);

	}

}

/* menu extra */

.main-nav { display: flex; align-items: center; justify-content: center; position: relative; }

.visible-menu { display: flex; white-space: nowrap; overflow: hidden; padding: 0; margin: 0; list-style: none; }
.visible-menu > li { flex-shrink: 0;display: none; }
.visible-menu > li:nth-child(-n+5) { display: inline-block; } 

/* Hide more menu initially */ 
.more-menu { position: relative; display: none; margin-left: 10px; }

.more-toggle { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--color-white); }

.header-menu .desktop-menu .hidden-menu { display: none; position: absolute; right: 0; top: 100%; background: #fff; min-width: 230px; border-radius: 8px; list-style: none; box-shadow: 0 10px 25px rgba(0,0,0,0.1); height: 0; visibility: hidden; }
.header-menu .desktop-menu .hidden-menu li { display: block; margin-right: 0; }
.header-menu .desktop-menu .hidden-menu li a {color: var(--color-black-primary); padding: 15px; font-size: var(--f-size-S); font-weight: var(--fw-medium);}
.header-menu .desktop-menu .hidden-menu li:first-child a {border-radius: 8px 8px 0 0;}
.header-menu .desktop-menu .hidden-menu li:last-child a {border-radius: 0 0 8px 8px;}
.header-menu .desktop-menu .hidden-menu li:hover {background: var(--color-deep-navy);}
.header-menu .desktop-menu .hidden-menu li:hover a {color: var(--color-white);}
.header-menu .desktop-menu .hidden-menu.show { display: block; height: auto; visibility: visible; }

/* Menu Extra */

.header-sticky .main-header {background: var(--color-navy); padding: 15px 0;}
.header-sticky .header-logo a img { height: 60px; }
.header-sticky .desktop-menu ul li a:hover {color: var(--color-white);}

.single-post, .page-id-279, .page-id-2, .page-id-282, .error404 { padding-top: 130px; }

.single-post .main-header, .page-id-279 .main-header, .page-id-2 .main-header, .page-id-282 .main-header, .error404 .main-header { background: var(--color-navy); padding: 25px 0; }
.single-post.header-sticky .main-header, .page-id-279.header-sticky .main-header, .page-id-282.header-sticky .main-header {padding: 15px 0;}

/* ~~ header sticky end ~~ */

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

    .desktop-menu ul li:not(:last-child) { margin-right: 20px; }

}

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

    .main-header {padding: 30px 0;}

}

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

    .single-post, .page-id-279, .page-id-2, .page-id-282, .error404 { padding-top: 90px; }

    .main-header .header-inner-wrap {justify-content: flex-start !important;}
    .main-header .header-inner-wrap .header-menu { display: none; }
    .main-header, .single-post .main-header, .page-id-279 .main-header, .page-id-282 .main-header, .error404 .main-header { padding: 15px 0; }

    .desktop-menu { display: none; }

    .hamburger-nav { display: block; }

    .header-logo, .header-button { width: auto; }
    .header-logo a img { height: 60px; }

    .header-button { margin-left: auto; }

    .mobile-menu { display: block; }
    .mobile-menu .logo-wrap a{ display: inline-block; height: 70px;}
    .mobile-menu .logo-wrap a img { display: block; width: auto; height: 100%; filter: brightness(0) invert(1); }
    .mobile-menu .sub-menu { display: none; width: calc(100% - 20px); margin-left: auto; }
    .mobile-menu .sub-menu li{ padding: 0;}
    .mobile-menu .header-button{ margin-top: 15px;}
    
    .mobile-menu .mobile-menubar li.button__primary { display: inline-flex; margin: 10px 20px 0; padding: 15px 30px; font-size: 16px; }
    .mobile-menu .mobile-menubar li.button__primary a {padding: 0;}

}

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

    .mobile-menu .top-row { padding: 20px 15px; }

}

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

    .single-post, .page-id-279, .page-id-2, .page-id-282, .error404 { padding-top: 80px; }

    .header-logo a img { height: 50px; }

    .header-sticky .header-logo a img { height: 40px; }

    .mobile-menu .mobile-menubar li { font-size: 18px; }

    .header-button a { padding: 10px 18px; font-size: 12px; }

    .hamburger-nav {margin: 0 0 0 10px;}

}

/* ~~ header sticky end ~~ */

/* ~-~-~-~-~-~-~-~-~-~ global adjustments  end ~-~-~-~-~-~-~-~-~-~ */

/* ~-~-~-~-~-~-~-~-~-~~-~-~-~-~-~-~-~-~-~~-~-~-~-~-~-~-~-~-~~-~-~ */

/* HOME PAGE START HERE ********************/

/* HOME PAGE START HERE ********************/



.slick-arrow { width: 56px; height: 56px; background: var(--color-rose-tan); border: 2px solid transparent; display: flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 1; z-index: 1; top: inherit; bottom: 0; transform: none; }
.slick-arrow::before { content: ''; background-repeat: no-repeat; width: 13px; height: 23px; background-size: 13px 23px; filter: brightness(0) invert(1); opacity: 1; }
.slick-arrow:hover, .slick-arrow:focus { border: 2px solid var(--color-rose-tan); background: transparent; }
.slick-arrow:hover::before, .slick-arrow:focus:before {filter: none;}

.slick-prev.slick-arrow { left: 0; }
.slick-prev.slick-arrow::before {background-image: url(../images/prev-icon.svg);}
.slick-next.slick-arrow { right: 0; left: 76px; }
.slick-next.slick-arrow::before {background-image: url(../images/next-icon.svg);}

/* MODAL DESIGN START HERE********************/

.modal-header { border: 0; padding: 20px 20px 0 0; }

.btn-close { width: 56px; height: 56px; opacity: 1; background-color: var(--color-rose-tan); background-image: url(../images/modal-close.svg); padding: 0 !important; margin: 0 0 0 auto !important; border-radius: 50%; box-shadow: none; }

.btn-close:focus { box-shadow: none; }

/* MODAL DESIGN END HERE********************/

.hero-banner { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: flex-end; }
.hero-banner::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: var(--color-deep-navy); opacity: 0.8; z-index: 0; }

.blur-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.banner-character-mobile { display: none; }

.mobile-btm-part { width: 100%; }

.inner-banner::after {content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: var(--color-deep-navy); opacity: 0.8; z-index: 0; }
.hero-bnr-wrap {background-size: cover; width: 100%; min-height: 100vh;}
.hero-bnr-wrap img.blur-bg { width: 100%; height: 100vh; object-fit: cover; }

.candidate-wrapper { text-align: left; position: relative; z-index: 1; }
.candidate-img { height: 80vh; width: auto; object-fit: contain; object-position: bottom; }

.hero-container .hero-text-box { position: relative; padding-top: 100px; width: 100%; max-width: 85%; z-index: 1; }
.hero-container .hero-text-box h1 {color: var(--color-white); font-weight: var(--fw-bold);}
.hero-container .hero-text-box p {color: var(--color-white); margin: 0 0 60px;}

.page-down { position: absolute; right: 100px; bottom: 100px; width: 153px; height: 153px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.page-down::after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/scroll-down-circle.svg) no-repeat center/contain; animation: slowSpin 20s linear infinite; transform-origin: center; will-change: transform; width: 153px; height: 153px; border-radius: 50%; display: block; }

/* Circle rotation */

@keyframes slowSpin {

  from { transform: rotate(0deg); }

  to   { transform: rotate(360deg); }

}


.inner-banner { min-height: 720px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; display: flex; flex-direction: column; justify-content: center; }
.inner-banner::after {opacity: 0.6;}
.inner-banner-type-2 { justify-content: flex-end; min-height: auto; }

.right-banner-img { position: relative; z-index: 1; margin-top: 130px; }

.banner-content {position: relative; z-index: 1; margin-top: 50px;}
.banner-content h1 {color: var(--color-white); font-weight: var(--fw-bold);}
.banner-content h1:last-child {margin-bottom: 0;}

.sec-ttl-content span {color: var(--color-primary); font-weight: var(--fw-bold); margin: 0 0 10px; display: block;}
.sec-ttl-content h2:last-child {margin: 0;}

.issue-matter-sec {position: relative;}
.issue-matter-sec::before {content: ""; position: absolute; top: 0;right: 0; bottom: 0; left: 0; background: var(--color-black-primary); opacity: 66%;}
.issue-matter-sec .sec-ttl-content, .issue-matter-sec .issue-matter-types {position: relative; z-index: 1;}

.sec-ttl-content.white span, .sec-ttl-content.white h2, .sec-ttl-content.white p {color: var(--color-white);}

.issue-matter-types { width: 100%; max-width: 646px; margin-left: auto; }
.issue-matter-types ul li:not(:last-child) { margin-bottom: 30px; }
.issue-matter-types ul li { border: 1px solid var(--color-primary); background: var(--color-navy); border-radius: 36px; display: flex; width: 100%; height: 70px; }
.issue-matter-types ul li h3 {color: var(--color-white); font-weight: var(--fw-medium); margin: auto 0; padding: 0 30px; line-height: 1.1; }
.issue-matter-types ul li span { width: 70px; display: flex; flex: 0 0 70px; aspect-ratio: 1 / 1; background: var(--color-primary); align-items: center; justify-content: center; border-radius: 50%; }
.issue-matter-types ul li:nth-child(even) { max-width: 85%;}

.judicial-sec .issue-matter-types { max-width: 100%; }
.judicial-sec .issue-matter-types ul li:nth-child(even) { max-width: 100%; }
.judicial-sec .issue-matter-types ul li h3 {font-size: var(--f-size-L);}

.take-action-sec .responsive-image-wrapper, .left-responsive-img.responsive-image-wrapper { padding-bottom: 75%;}
.take-action-sec .sec-ttl-content, .left-border-content.sec-ttl-content { width: 100%; max-width: 820px; margin-left: auto; border-left: 0.5px solid var(--color-navy); padding-left: 35px;} 

.campaign-sec .sec-ttl-content { width: 100%; max-width: 1328px; margin-left: auto; margin-right: auto; }
.campaign-sec .sec-ttl-content h2 {width: 100%; max-width: 785px; margin-left: auto; margin-right: auto;}

.campaign-card { border: 1px solid var(--color-navy); border-radius: var(--border-radius-image); padding: 20px; transition: var(--transition-common); display: block; height: 100%; }
.campaign-card-img { position: relative; padding-bottom: 60%; margin: 0 0 20px; }
.campaign-card-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-image); }
.campaign-card span, .tags-wrap span{ padding: 6px 15px; border-radius: 17px; background: var(--color-navy); color: var(--color-white); font-weight: var(--fw-regular); margin: 0; }
.campaign-card .campaign-card-img span { color: var(--color-navy); background: var(--color-white); position: absolute; top: 10px; left: 10px; z-index: 1; }

.campaign-card-content h3{ margin: 0 0 10px; font-weight: var(--fw-semi-bold); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.campaign-card-content p {margin: 0 0 20px; color: var(--color-gray);display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

.campaign-card:hover {background: #D4E7FF;}

.tags-wrap { display: flex; flex-wrap: wrap; gap: 10px; }

.sec-button-wrap { margin-top: 36px;}

.media-card {display: block; position: relative; transition: var(--transition-common);}
.media-card .responsive-image-wrapper { padding-bottom: 90%; }
.media-card .responsive-image-wrapper::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--border-radius-image); background: var(--color-deep-navy); opacity: 0; }
.media-card:hover .responsive-image-wrapper::after {opacity: 88%;}
.media-card:hover .media-button {opacity: 1;}
.media-card .media-button { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; opacity: 0; }

.form-right-image img { object-fit: cover; border-radius: var(--border-radius-image); width: 100%; }

.filter-search-wrapper {padding-bottom: 30px;}
.filter-search-wrapper form {width: 100%; max-width: 636px; margin: 0 auto; display: flex; align-items: center;}
.filter-search-wrapper form .input-search {width: 100%;}
.filter-search-wrapper form button {margin-left: 10px;}

.pagination { justify-content: center; margin-top: 36px; }

.page-numbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; color: var(--color-black-primary); line-height: 1; }
.page-numbers li:not(:last-child) { margin-right: 30px; }
.page-numbers.current { width: 40px; height: 40px; background: #F1F5FF; display: flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; }

.single-post .single-content-section .container { max-width: 960px; margin: 0 auto; }
.single-post h1 { font-size: 40px; }
.single-post h2 { font-size: 35px; }

.single-content-section .sec-ttl-content, .single-content-section .sec-ttl-content h2 { color: var(--color-black-primary); }

.cms-main { position: relative; padding: 23% 25px 5% 25px; }
.cms-main::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(8, 28, 53, 0) 0%, #081C35 81.45%); border-radius: 30px; opacity: 60%; }
.cms-main-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
.cms-main-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 25px; }

.inner-content-wrap {position: relative; z-index: 1;}
.inner-content-wrap span {padding: 6px 15px; border-radius: 17px; color: var(--color-navy); background: var(--color-white); display: inline-flex; margin: 0 0 20px; }
.inner-content-wrap h1 { color: var(--color-white); }
.inner-content-wrap ul { display: flex; align-items: center; }
.inner-content-wrap ul li { display: flex; align-items: center; color: var(--color-white); font-weight: var(--fw-medium); line-height: 1; }
.inner-content-wrap ul li:not(:last-child) { margin-right: 50px; padding-right: 50px; border-right: 1px solid var(--color-white); }
.inner-content-wrap ul li img { margin-right: 10px; height: 25px; }

.community-conversation-sec:nth-child(even) .row, .zigzag-content-sec:nth-child(even) .row { flex-direction: row-reverse; }
.community-conversation-sec:not(:nth-child(even)) .row .left-border-content.sec-ttl-content, .zigzag-content-sec:nth-child(even) .row .left-border-content.sec-ttl-content{ margin-left: 0; padding-left: 0; padding-right: 35px; border-left: 0; border-right: 0.5px solid var(--color-navy); }

/* FAQ */

.faq-wrap .accordion-item { margin-bottom: 16px; border: 1px solid #DCDCDC; border-radius: 16px; overflow: hidden; padding: 32px; }
.faq-wrap .accordion-item .accordion-header .accordion-button { background: transparent; padding: 0; box-shadow: none; font-size: inherit; font-weight: var(--fw-medium); color: var(--color-navy); }
.faq-wrap .accordion-item .accordion-header .accordion-button:not(.collapsed) { border-bottom: 1px solid rgba(26, 41, 53, 0.2); margin-bottom: 24px; padding-bottom: 24px; color: var(--color-navy);}
.faq-wrap .accordion-item .accordion-header .accordion-button::after {background-image: url(../images/accordion-arrow.svg); width: 21px; height: 12px; background-size: contain;}
.faq-wrap .accordion-body { padding: 0; color: var(--color-gray); }

@media only screen and (max-width: 767px){
    .faq-wrap .accordion-item { padding: 18px; border-radius: 12px; }
    .faq-wrap .accordion-item .accordion-header .accordion-button:not(.collapsed) { margin-bottom: 15px; padding-bottom: 15px; }
    .faq-wrap .accordion-item .accordion-header .accordion-button::after { width: 15px; height: 10px; }
}

/* FAQ */

footer {background: #000E20;}
footer h5 { color: var(--color-white); font-weight: var(--fw-bold); margin: 0 0 20px; }

.ftr-top { padding: 50px 0; border-bottom: 2px solid rgb(255 255 255 / 50%); }
.ftr-top .col-lg-4:last-child {display: flex; justify-content: flex-end;}

.ftr-logo { width: 235px; }
.ftr-logo a { display: block; }

.ftr-social { padding-top: 40px; }
.ftr-social ul { display: flex; gap: 13px; }
.ftr-social ul li a { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-white); border-radius: 50%; }
.ftr-social ul li a:hover {background: var(--color-white); color: var(--color-primary); }

.ftr-menu ul li:not(:last-child) {margin-bottom: 20px;}
.ftr-menu ul li a {color: var(--color-white); word-break: break-all;}
.ftr-menu ul li a:hover, .ftr-btm ul li a:hover {color: var(--color-primary);}

.ftr-menu ul.menu { display: flex; flex-wrap: wrap; }
.ftr-menu ul.menu li { width: 50%; padding-right: 8px; }

.ftr-btm { padding: 20px 0; display: flex; justify-content: center; flex-wrap: wrap; font-size: 14px; }
.ftr-btm > p {margin-bottom: 0; margin-right: 50px;}
.ftr-btm ul {display: flex;}
.ftr-btm ul li:not(:last-child) {margin-right: 15px;padding-right: 15px; border-right: 1px solid;}
.ftr-btm ul li a {color: var(--color-white); line-height: 1;}

.shrt-note { width: 100%; text-align: center; }
.shrt-note p { margin: 10px 0 0; }

.wpcf7-not-valid { border-color: #dc3232; }
.wpcf7-not-valid-tip { display: none; }

.wpcf7-response-output { text-align: center; font-size: 14px; padding-top: 5px; padding-bottom: 5px; }

.error-page-content h1 { font-size: 5.5rem; margin: 0 0 30px; font-weight: var(--fw-semi-bold); }

.grecaptcha-badge { z-index: 1; }




button.sbi_load_btn { display: inline-flex !important; justify-content: center !important; font-weight: var(--fw-semi-bold); line-height: 1 !important; font-size: var(--f-size-M) !important; color: var(--color-white) !important; padding: 16px 40px !important; background: var(--color-primary) !important; border: 1px solid transparent !important; border-radius: 30px !important; text-align: center; } 
button.sbi_load_btn:hover { background: var(--color-white) !important; color: var(--color-primary) !important; border: 1px solid var(--color-primary) !important; box-shadow: none !important; }
button.sbi_load_btn span.sbi_btn_text { color: var(--color-white); font-weight: var(--fw-semi-bold); margin: 0; }
button.sbi_load_btn:hover span.sbi_btn_text { color: var(--color-primary) !important; }

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

    .container {max-width: 1602px;}

}

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

    .hero-container .hero-text-box { padding-top: 60px;}
    .hero-container .hero-text-box p {margin: 0 0 40px;}

    .page-down { right: 50px; bottom: 50px; }

    .inner-banner:not(.inner-banner-type-2) { min-height: 470px;}

}

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

    .cms-main { padding: 23% 15px 5% 15px; }

}

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

    .button__primary {padding: 15px 30px;}

    .take-action-sec .sec-ttl-content, .left-border-content.sec-ttl-content { padding-left: 20px; }
    
    .community-conversation-sec:not(:nth-child(odd)) .row .left-border-content.sec-ttl-content { padding-right: 20px;}

    .issue-matter-types ul li {height: 60px;}
    .issue-matter-types ul li span { width: 60px; flex: 0 0 60px; }

    .filter-search-wrapper form { max-width: 500px; }

    .input-search {height: 48px; padding-left: 20px; padding-right: 20px; background-position: center right 20px; background-size: 18px;}

    .error-page-content h1 { font-size: 4rem;}

}

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

    .padding-small {padding: 60px 0;}
    .padding-small-top {padding-top: 60px;}
    .padding-small-bottom {padding-bottom: 60px;}

    .hero-bnr-wrap { min-height: 75vh; }
    .hero-bnr-wrap img.blur-bg {height: 75vh;}

    .page-down { right: 30px; bottom: 30px; width: 120px; height: 120px; }
    .page-down::after {width: 120px; height: 120px;}

    .right-banner-img { margin-top: 90px; }

    .about-sec .sec-ttl-content { text-align: center; margin: 0 0 30px; }

    .issue-matter-types ul li h3 {padding: 0 20px;}

    .campaign-card { padding: 15px; }

    .inner-content-wrap ul li:not(:last-child) { margin-right: 20px; padding-right: 20px;}

    .cms-main-img img, .cms-main::after {border-radius: 20px;}

}

@media only screen and (max-width: 1199px) and (min-width: 992px){

   .candidate-wrapper img {max-width: 82vh;}

}

@media only screen and (max-width:1199px) and (max-height: 1366px) {
    .hero-banner { min-height: 60vh; }
    .candidate-wrapper img { max-width: 45vh; height: 44vh;}
}

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

    .hero-banner {flex-direction: column; align-items: center; min-height: auto; }

    .banner-character-mobile { display: block; position: relative; z-index: 1; padding-top: 83px; }
    .candidate-img { height: 50vh; }

    .candidate-wrapper { display: none; }

    .hero-container .hero-text-box {  max-width: 695px; margin: 0 auto; padding: 40px 0 60px; }
    .hero-container .hero-text-box p { margin: 0 0 20px; }

    .mobile-btm-part { background-color: var(--color-navy); position: relative; z-index: 1; }

    .inner-banner:not(.inner-banner-type-2) { min-height: 400px; }
    .inner-banner-type-2 .row { flex-direction: column-reverse; }
    .inner-banner-type-2::before {content: "";position: absolute;background: var(--color-deep-navy);bottom: 0;left: 0;right: 0;height: 120px;}
    .inner-banner-type-2 .banner-content { padding: 15px 0; height: 120px; margin-top: 0; display: flex; align-items: center; justify-content: center; text-align: center; }

    .page-down { right: 40px; bottom: 20px; width: 80px; height: 80px; }
    .page-down::after {width: 80px; height: 80px;}
    .page-down img {height: 30px;}

    .about-sec .col-lg-12 { order: 2; }
    .about-sec .col-lg-6:last-child { order: 3; }
    .about-sec .sec-ttl-content { text-align: left; margin: 30px 0 20px; }

    .issue-matter-types { max-width: none; padding-top: 30px; }

    .take-action-sec .sec-ttl-content, .left-border-content.sec-ttl-content {margin-top: 30px; padding-left: 12px; }

    .community-conversation-sec .row, .community-conversation-sec:nth-child(even) .row { flex-direction: column-reverse; }
    .community-conversation-sec:not(:nth-child(even)) .row .left-border-content.sec-ttl-content, .zigzag-content-sec:nth-child(even) .row .left-border-content.sec-ttl-content {padding-right: 0; padding-left: 12px; border-right: 0; border-left: 0.5px solid var(--color-navy);}

    .sec-button-wrap, .pagination { margin-top: 16px; }

    .volunteer-form-sec .row.align-items-center { flex-direction: column-reverse; }

    .form-right-image { margin: 0 auto 30px; }

    .cms-main { padding: 20% 15px 4%; }

    .inner-content-wrap span { margin: 0 0 12px; }
    .inner-content-wrap ul li img {height: 16px;}

    .single-post .single-content-section .container {max-width: 720px;}
    .single-post h1 { font-size: 35px; }
    .single-post h2 { font-size: 30px; }

    .ftr-top { padding: 40px 0; }
    .ftr-top .col-lg-4:last-child {justify-content: flex-start;}
    .ftr-social { padding-top: 30px; }
    .ftr-menu { padding-top: 20px; }

    .ftr-btm > p { margin-right: 20px; }
    .ftr-btm ul li:not(:last-child) { margin-right: 5px; padding-right: 5px; }

    .error-page-content h1 { font-size: 3.5rem;}

}

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

    .padding-small {padding: 40px 0;}
    .padding-small-top {padding-top: 40px;}
    .padding-small-bottom {padding-bottom: 40px;}

    .container {width: 90%;}

    .inner-banner:not(.inner-banner-type-2) { min-height: 300px; }

    .right-banner-img { margin-top: 80px; }

    .issue-matter-types ul li h3 { padding: 0 10px; line-height: 1.2; }

    .input-search { height: 50px; padding-left: 20px; padding-right: 20px; background-position: center right 20px; background-size: 18px; }

    .cms-main { padding: 45% 12px 20px; }
    .cms-main-img img, .cms-main::after { border-radius: 12px; }

    .inner-content-wrap ul { flex-direction: column; align-items: flex-start; }
    .inner-content-wrap ul li:not(:last-child) { border: 0; margin: 0 0 10px 0; padding: 0; }

    .filter-search-wrapper form { flex-direction: column; }
    .filter-search-wrapper form button { margin: 10px 0 0 0; }

    .hero-container .hero-text-box {max-width: 90%;}

    .single-post h1 { font-size: 24px; }
    .single-post h2 { font-size: 24px; }

    .ftr-menu ul.menu {flex-direction: column;}
    .ftr-menu ul.menu li {width: 100%; padding-right: 0;}
    .ftr-menu ul.menu li:last-child {padding-bottom: 0;}
    .ftr-menu ul li:not(:last-child) { margin-bottom: 15px; }

    .ftr-btm {flex-direction: column;}
    .ftr-btm > p { margin-right: 0; margin-bottom: 10px; }
    .ftr-btm ul li:not(:last-child) { margin-right: 8px; padding-right: 8px; }

    .shrt-note {text-align: left;}

    .error-page-content h1 { font-size: 2.2rem; margin: 0 0 20px; }

}