@media (prefers-reduced-motion: no-preference) {:root {scroll-behavior: smooth; } }
:root{--primary:#423592;--secondary:#FFA655;--bodytext:#313844;}
html{font-size:62.5%;}
body{font-family: 'Poppins', sans-serif; color:#313844; font-size:1.6rem; background: #fff; line-height: 1.7;}
img{ max-width:100%;}
button:focus{ outline:none}
a {-webkit-transition: all .24s ease-in-out; transition: all .24s ease-in-out; color: var(--bodytext); text-decoration: none;}
a:hover{color: var(--primary);}
a,a:hover,a:focus{ text-decoration:none; outline:none; box-shadow:none}
p{ margin-bottom: 2rem; line-height: 1.75;}
h1,h2,h3,h4,h5,h6{font-family: "Noticia Text", serif; font-weight:400; margin-bottom: 2rem; color: #000000; line-height: 1.3;}
h1{ font-size: 4rem;}
h2{ font-size: 3.6rem;}
h3{ font-size: 3.2rem;}
h4{ font-size: 2.8rem;}
h5{ font-size: 2.4rem;}
h6{ font-size: 1.8rem;}

.table td{padding: 1rem;}
.circlar_table thead td{ background: var(--secondary); font-weight: 500;}
.circlar_table td i{ font-size: 2rem; margin-left: 1rem;}

.section_space_top{ margin-top: 10rem;}

.header{ position: absolute; width: 100%; z-index: 9; padding:1rem 0;}
.main-menu li a{ color: #fff; font-size: 1.8rem; margin: 0 1.5rem;}
.main-menu li a.active, .main-menu li a:hover{ color: var(--secondary) !important;}

.custom_btn{font-size: 1.8rem; padding: 1rem 3rem; color: #fff; background: var(--secondary); border-radius: 3rem; font-weight: 500;}
.custom_btn:hover{ background: #000; color: #fff;}
.form-select{ font-size: 1.4rem; padding: .5rem 2.5rem .5rem 1.5rem;}
.form-control{font-size: 1.6rem; padding: .8rem 1.5rem; border-radius:0; background: #f2f2f2;}

.hero{ background: url(../images/hero-img.png) no-repeat; background-attachment: fixed; background-size: cover; background-position: center center; position: relative;}
.hero::before{ background: rgba(66,53,146,.8); position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: "";}
.hero_caption{ display: flex; flex-direction: column; justify-content: center; position: relative; color: #fff; max-width: 900px; margin: 0 auto; align-items: center; text-align: center; padding: 24rem 0;}
.hero_caption h1{ color: #fff; font-weight: 700; text-transform: uppercase; font-size: 7.2rem;line-height: 1.1; margin: 0;}
.hero_caption p{ font-size: 2.4rem; color: #fff; margin: 3rem 0;}

.content_box{ background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.2); padding: 4rem 8rem 2rem; text-align: center; margin-top: -12rem; position: relative;}
.content_box h2{ font-weight: 700; font-size: 2.8rem;}

.section_title{ font-size: 4.2rem; font-weight: 400; position: relative; padding: 0 0 .5rem;}
.section_title::after{ content: ""; background: var(--secondary); height: 2px; width: 135px; position: absolute; left: 0; bottom: 0;}
.event_list{ margin:5rem 7rem 0 0;}
.event_item { display: flex; align-items: center; margin: 0 0 6rem;}
.event_item:last-child{ margin: 0;}
.event_img{ margin: 0 3rem 0 0;}
.event_desc{ flex: 1;}
.event_item h5{font-family: 'Poppins', sans-serif; color: var(--primary); font-weight: 500; font-size: 2.1rem; margin: 0 0 1rem;}
.event_item a{ color: var(--primary);}
.event_item a:hover{ color: var(--secondary);}
.event_item p{ margin: 0 0 1rem;}
.event_info{ display: flex;}
.event_info div{ margin: 0 2rem 0 0;}
.event_info i{ margin-right: .5rem;}
.event_sec_img{ margin: 5rem 0 0 0;}
.linear_bg{ position: relative; background:url(../images/linedbg.png) no-repeat; background-size: cover; background-position: center; background-attachment: fixed; padding:10rem 0;}
.linear_bg::after{ position: absolute; left: 0; top: 0; content: ""; background:linear-gradient(90deg, #FF7A00 0%, #FFA655 100%); width: 100%; height: 100%; opacity: .5; }
.member_title, .affiliated h2{ color: #fff; position: relative; max-width:800px; margin: 0 auto; z-index: 9; text-align: center; padding: 0 0 1rem;}
.member_title::after, .affiliated h2::after{ position: absolute; left: 0; bottom: 0; width: 250px; height: 2px; background: #fff; content: ""; right: 0; margin: auto;}
.affiliated h2::after{ width: 150px;}
.member_div { position: relative; z-index: 9; border-radius: 1rem; margin: 5rem auto 0 ; background: #fff; padding: 2rem; max-width: 1080px; max-height: 760px; overflow: auto;}
.member_div table th, .member_div table td{ padding: 1rem; vertical-align: middle;}
.president_msg{ max-width: 1080px; margin: 0 auto;}

.affiliated{ background: var(--primary); position: relative; padding: 8rem 0; overflow: hidden;}
.leftbg{position: absolute; left: 0; top: 0;}
.rightbg{ position: absolute; right: 0; top: 0;}
.Affiliated_div{ display: flex; max-width: 1080px; margin:5rem auto 0 auto; justify-content: center; align-items: center;}
.Affiliated_logo{background: #fff; border-radius: 1rem; padding:2rem; text-align: center; }
.gallery_list{ display: grid;   grid-gap: 10px;   grid-template-columns: repeat(3, 1fr);}
.gallery_list img{ width: 100%;}

.footer{ background: #EAEAEB; padding: 3rem 0; font-size: 1.4rem; text-align: center;}
.footer ul{ margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: center;}
.footer ul li{ margin: 0 2rem; padding: 0 .5rem; font-size: 1.4rem;}
.footer ul li a:hover{ color: var(--secondary);}
.social_div{ display: flex; align-items: center; justify-content: center; margin:1rem 0;}
.social_div a{ margin: 0 1.5rem; font-size: 2rem;}
.social_div a:hover{ color: var(--secondary);}
.swiper-wrapper{ justify-content: center;}
.logo-slider{ margin: 6rem 0 0 0;}

.navbar-toggler{ border: none !important;}
.navbar-toggler i{ color: #fff; font-size: 2.4rem;}
.text-bg-dark{ background: var(--primary) !important;}
.btn-close {
    --bs-btn-close-opacity: 1;
    width: 3em;
    height: 3em;   
    background: transparent var(--bs-btn-close-bg) center/2rem auto no-repeat;   
}
.navbar-toggler:focus{ box-shadow: none;}



.inner_hero{ height: 300px; overflow: hidden; position: relative; background: url(../images/female-athlete.jpg) no-repeat; background-position: center; background-size: cover;}
.inner_page_title {
    color: #fff;
    font-size: 5.2rem;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(60% - 40px);
    z-index: 9;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.inner_hero::after{ content: ""; background: rgba(66,53,146,.7); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.contact-div i{ background: var(--primary); color: #fff; width: 3rem; height: 3rem; border-radius: 2rem; display: flex; align-items: center; justify-content: center; padding: 1rem; margin: 0 1rem 0 0;}
.contact-div{ display: flex;}
@media(max-width:1399px){
    .event_list{ margin-right: 0;}
}
@media(max-width:1199px){
    html{font-size: 60%;}
    .event_info{ flex-direction: column;}
    .swiper-wrapper{ justify-content: initial;}
}
@media(max-width:991px){
    .container{ width: 96%; max-width: 100%;}
    .hero_caption h1{ font-size: 5rem;}
    p{ line-height: 1.5;}
    .event_sec_img{ display: none;}
    .contact-info{ margin-top: 2rem;}
    .section_space_top{ margin-top: 5rem;}
}
@media(max-width:767px){
      html{font-size:55%;}  
      .gallery_list{ margin: 5rem 0 0 0;}
      .leftbg, .rightbg{ display: none;}
      .content_box{ padding: 2rem;}
      .section_space_top {margin-top:5rem;}
      .event_list{ margin-top: 3rem;}
      .event_item{ margin: 0 0 3rem;}
      .linear_bg, .affiliated{ padding: 5rem 0;}
      .gallery_list{grid-gap:5px}
      .header{ padding: 1.5rem 0;}
      .navbar-brand img{ max-height: 50px;}
      .hero_caption{ padding: 14rem 0 20rem;}
      .hero_caption p{ font-size: 2rem;}
     
      .inner_page_title{ font-size: 4.8rem;}
      .inner_hero{ height: 200px;}
}
@media(max-width:575px){
.event_item{ flex-direction: column; align-items: flex-start;}
.event_img{ margin: 0 0 1.5rem 0;}
.hero_caption h1{ font-size: 4rem;}
}