.agra{position: relative; background-color: #1e2b51; color: white; height: 440px;}
.agra *:focus{outline-color: #ffffff;}
.agra *:active:focus{outline-color: #ffffff;}
.agra .centeredContent{display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center;}
.agra h2{color: #fbb903; font-size: 80px; line-height: 80px; text-align: center; padding-bottom: 40px;}

.agraList{margin: 0px -4px; width: calc(100% + 8px);}
.agraList .swiper-slide{padding: 0px 4px;}
.agraList .swiper-slide a{display: flex; height: 88px; align-items: center; justify-content: center; text-align: center; font-size: 20px; line-height: 20px; background-color: #f1f1f1; color: #1e2b51;}
.agraList .swiper-slide a:hover, .agraList .swiper-slide a:focus{background-color: #fbb903;}

.agraList .swiper-button-next, .agraList .swiper-button-prev{color: #1e2b51; width: 48px; height: 100%; top: 0; margin-top: 0;}
.agraList .swiper-button-next:hover, .agraList .swiper-button-prev:hover{color: #fbb903;}
.agraList .swiper-button-next:after, .agraList .swiper-button-prev:after{content: '\e900'; font-family: 'icomoon' !important; font-size: 21px;}
.agraList .swiper-button-next.swiper-button-disabled, .agraList .swiper-button-prev.swiper-button-disabled{display: none !important;}

.agraList .swiper-button-prev{right: 0;}
.agraList .swiper-button-next{left: 0;}
.agraList .swiper-button-next:after{transform: rotate(180deg);}

.agraList_toggle{padding: 28px 0px 0px; text-align: center; display: none;}
.agraList_toggle a{display: inline-block; text-decoration: none; font-weight: 500; font-size: 18px; color: white; position: relative;}
.agraList_toggle a span:nth-child(2){display: none;}
.agraList_toggle a[aria-expanded="true"] span:nth-child(1){display: none;}
.agraList_toggle a[aria-expanded="true"] span:nth-child(2){display: inline;}
.agraList_toggle a:after{content: '\e900'; font-family: 'icomoon' !important; font-size: 0.7em; position: absolute; right: 100%; top: 3px; margin-right: 7px; transform: rotate(90deg);}
.agraList_toggle a[aria-expanded="true"]:after{transform: rotate(-90deg);}

/* swiper accessibility */
.agraList .swiper-slide[aria-hidden="true"]{display: block;}



@media screen and (max-width: 1400px) {
    .agra h2{font-size: 64px; line-height: 64px; padding-bottom: 28px;}    
}

@media screen and (max-width: 1024px) {
    .agra{height: 360px;}
    .agra h2{font-size: 54px; line-height: 54px;}
}

@media screen and (max-width: 800px) {
    .agra h2{font-size: 48px; line-height: 44px;}

    .agraList{margin: 0px -2.5px;}
    .agraList .swiper-slide{padding: 0px 2.5px;}
    .agraList .swiper-slide a{height: 88px; font-weight: 500; font-size: 16px; line-height: 20px;}
}

@media screen and (max-width: 670px) {
    .agra{height: auto; padding: 36px 0px 48px;}
    .agra .centeredContent{overflow: hidden;}
    .agra h2{font-size: 40px; line-height: 44px; padding-bottom: 18px;}
    .agraList .swiper-button-next, .agraList .swiper-button-prev{display: none;}

    .agraList .swiper-wrapper{flex-wrap: wrap; transform: none; box-sizing: border-box;}
    .agraList .swiper-slide{width: 33.33%; margin-top: 5px;}
    .agraList .swiper-slide:nth-child(n+7){display: none;}
    
    .agraList .swiper-container{transition: max-height 0.6s ease-in-out;}
    .agraList.active .swiper-slide:nth-child(n+7){display: block;}
    .agraList.shown .swiper-container{max-height: 10000px !important;}
    
    .agraList_toggle{display: block;}
}

@media screen and (max-width: 432px) {
    .agra h2{font-size: 30px; line-height: 36px; padding-bottom: 16px;}
    .agraList .swiper-slide a{height: 64px; font-size: 14px; line-height: 14px;}

}