html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}


body{

    font-family: PingFangSC-light, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Heiti SC", 冬青黑, "Microsoft YaHei", 微软正黑体, "Microsoft JhengHei", 微软雅黑, 宋体, STHeiti, "LiHei Pro", 华文黑体, "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    overflow-x: hidden;
}


/*General style*/


a {
    text-decoration: none;
    color: #1b46ce;
    outline: none;
}

a:hover,
a:focus {
    color: #164eff;
    font-weight: bold;
    text-decoration: none;
}

h1 {
    font-size: 2.4rem;
    margin: 0 0 20px;
    font-weight: bold;
}

h1,
h3,
h4 {
    color: #020202;
    font-weight: bold;
}

h5 {
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: bold;
    color: #020202;
    padding: 1.2rem;
    text-align: justify;
}

p { font-size:18px; }

ul,
ol {
    color: #013e66;
}

p {
    color: #020202;
    text-align: justify;
}

section {
    margin: 0;
    padding: 2em 0em;
}

.no-padding {
    padding: 0px;
}

.desktop-view {
    display: block;
}

.mobile-view {
    display: none;
}

.header-logo {
    width: 320px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 50px;
}


.hide {
    opacity: 0;

}

.show {
    opacity: 1;

}


/* Top right */

#topbar {
    position: absolute;
    top: 2rem;
    right: 50px;
    white-space: nowrap;
    z-index: 100000;
}

#topbar .fa-2x {
    font-size: 1.3em;
}

.social-icons {
    width: 40px;
    margin-left: .5em;
    background: #ec6d17;
    padding: .5em 0 .5em .1em;
    color: #ffffff;
    float: left;
    text-align: center;
    border-radius: 100px;
    line-height: 1.5em;
}

.red-book img{
    width: 100%;
    margin:0 auto;
    text-align: center;
    border-radius: 100px;
    line-height: unset !important;
}


.social-icons-main {
    margin-left: -3px;
}

.lang-btn {
    background-color: #db4b2f;
    border-radius: 50px;
    color: #ffecdf;
    height: 40px;
    width: 40px;
    margin-right: 5px;
    padding: 0px 8px;
    font-size: 1em;
}

.btn.lang-btn:hover {
    background-color: #048ea5;
    color: #ffecdf;
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);

}

/* End of Top right */


/* Sections Background */

.container.first-section-bg {

       --bs-gutter-x: 0rem;

}

.container.second-section-bg {

       --bs-gutter-x: 0rem;
       padding: 0;

}


.first-section-bg {
    background-image: url("https://microfilm.zaobao.com/preview/assets/img/first-section-bg.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    max-width: 100%;
    margin: 0;
    padding-bottom: 0;
    display: block;
}


.second-section-bg {
    background-image: url("https://microfilm.zaobao.com/preview/assets/img/second-section-bg.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    max-width: 100%;
    margin: 0;
    padding-bottom: 0;
    display: block;
}

/* End of Sections Background */


/* Navigation Menu */

        .navbar-toggle-btn {
            position: fixed;
            top: 2rem;
            left: 50px;
            background-color: rgba(27, 70, 206, 0.9);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 1050;
            color: #ffffff !important;
        }

        .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
            color: #ffffff;
            background-color: #c04545;
        }

        .offcanvas {
            background-color: rgba(33, 43, 53);
        }

        .offcanvas-header {
            border-bottom: 0px solid #dee2e6;
        }

        .offcanvas-body .nav-link {
            font-size: 1.2rem;
            font-weight: 500;
            color: #ebc378;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            transition: background-color 0.2s, color 0.2s;
        }
        
        .offcanvas-body .nav-link:hover {
            background-color: #ebc378;
            color: rgba(33, 43, 53);
        }

        .offcanvas-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1040;
            width: 100vw;
            height: 100vh;
            background-color: transparent !important;

        }

        .offcanvas.hiding, .offcanvas.show, .offcanvas.showing {
            visibility: visible;
            z-index: 10000;
        }

        .offcanvas.offcanvas-start {
            top: 0;
            left: 0;
            width: auto;
            border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
            transform: translateX(-100%);
        }

        .btn-close {
            --bs-btn-close-color: #ffffff !important;
        }

/* End of Navigation Menu */

/* Key Visual */


.key-visual {
    width: 100vw;  /* Sets width to 100% of the viewport width */
    height: auto;  
    padding: 0;
    object-fit: cover; /* Ensures the image covers the entire area, cropping if necessary */
    object-position: center;
    display: block;
}


.Right_Bar_1, .Right_Bar_5, .Left_Bar_8, .Left_Bar_4 {
    position: relative; 
    animation: moveUpDown 3s infinite alternate;

}


@keyframes moveUpDown {
  0% {
    transform: translateY(0); /* Start at original position */
    opacity: .5;
  }
  100% {
    transform: translateY(-50px); /* Move up by 50px */
    opacity: 1;
  }
}


.Right_Bar_1:hover, .Right_Bar_5:hover, .Left_Bar_8:hover, .Left_Bar_4:hover  {
  animation-play-state: paused;
}


.Left_Bar_3, .Left_Bar_6, .Right_Bar_8, .Right_Bar_3 {
    position: relative; 
    animation: moveUpDown2 5s infinite alternate;

}


@keyframes moveUpDown2 {
  0% {
    transform: translateY(0); /* Start at original position */
    opacity: .3;
  }
  100% {
    transform: translateY(-50px); /* Move up by 50px */
    opacity: 1;
  }
}


.Left_Bar_3:hover, .Left_Bar_6:hover, .Right_Bar_8:hover, .Right_Bar_3:hover  {
  animation-play-state: paused;
}


/* End of Key Visual */


/* 关于比赛 Info Section */

.about-microfilm {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.about-rows {

}

.about-pills-tab-container {

}

.about-pills-tab {
    margin: 0 auto;
    background: #213269;
    border-radius: 300px;
    padding: 5px;
    font-size: 18px;
}

.nav-pills .nav-link {
   
}

.nav-link:focus, .nav-link:hover {
    color: #e78024;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: #c04545;
    border-radius: 100px;
    font-weight: bold;
    padding: 8px 35px;
    margin: 0 15px 0 15px;
}

.nav-link {
    display: block;
    padding: 5px;
    color: #ffffff;
    text-decoration: none;
    background:0;
    border: 0;
    margin: 0 15px 0 15px;
    padding:8px 30px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.about-pills-tab-container {

    margin: 0 1rem 2rem 1rem;
    line-height: 1.8rem;
}

.about-pills-tab-container2 {

    margin: 0 auto;
    line-height: 1.8rem;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 3rem;
    border-radius: 50px;
    display: flex;
    text-align: center;
}


.about-pills-tab-container2 img {
    margin: 0 auto;
    width:40%;
    vertical-align: middle;
}


.org-logo img {
    margin: 0 auto;
    width: 15%;
}

.organisers-socials{
    display: flex;
    align-items: flex-end;
    position: relative;
    justify-content: center; /* Centers items horizontally */
    text-align: center;
}


.social-icons2 {
    width: 60px;
    margin-right: 1.5em;
    background: #28b3b9;
    padding: .5em 0 .5em .1em;
    color: #ffffff;
    float: left;
    text-align: center;
    border-radius: 100px;
    line-height: 1.5em;
 
}

.organisers-socials-bottom {
    position: absolute;
    bottom: -65px;
}


.about-pills-tab-container3 {

    margin: 0 auto;
    line-height: 1.8rem;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 1.5rem;
    border-radius: 50px;
    text-align: center;
    margin-bottom: 2rem;
}


.about-pills-tab-container3 img {
    margin: 0 auto;
    width:25%;
    vertical-align: middle;

}

.about-pills-tab-container3 p{

    font-size: 1em;
    margin-bottom: -5px;
}


.reduced-line-height{

}


/* End of 关于比赛 Info Section */



/* 赛程赛制 Info Section */


.competition-details{

    margin: 0 auto;
    margin-top:7rem;
    padding-bottom: 5rem;
    background-color: rgba(255, 228, 228, .7);
    color:#020202;
    border-top-right-radius: 50rem;
    border-top-left-radius: 50rem;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-bottom-color: #667ab8;

}

.competition-details2 h5{
    padding: 0px;
    font-size: 1.2rem;
    margin-bottom: .2rem;

}

.competition-details2 ul{
    padding-left: .9rem;
    font-size: 18px;
    color: #020202;
    text-align: justify;
}


.competition-details2 p{
    padding-left: 0rem;

}


.competition-details-container {

    margin: 0 auto;
    padding-top: 5rem;

}


p.details-info {
    margin: 0 auto;
    width: 60%;

}

.steps-to-join {
    display: block;
    margin: 0 auto;
    width: 60%;

}

.steps-to-join p {
    margin-bottom: 0;

}


.competition-details3 {
    background-color: #fec69e;
    margin-left: 3.5rem;
    border-radius: 20px;
}


.about-pills-tab2 {
    margin: 0 auto;
    border-radius: 300px;
    padding: 5px;
    font-size: 18px;
    margin-top: -1.5rem;
}


.details-pills-tab-container {

    padding: 0 3rem 2rem 3rem;
    margin-top: -1.5rem;

}


.details-pills-tab-container ul {

    list-style: none;
    text-align: left;

}

.details-pills-tab-container li {

    margin-bottom: 1rem;

}


.nav-pills2 .nav-link2 {

    color: #ffffff !important;
    background-color: #667ab8;
    border-style: solid;
    border-width: 4px;
    border-color:#667ab8;
    border-radius: 100px;
   
}

.nav-link2:focus, .nav-link2:hover {
    color: #e78024;
}

.nav-pills2 .nav-link2.active, .nav-pills2 .show>.nav-link2 {
    
    background-color: #213269;
    border-style: solid;
    border-width: 4px;
    border-color:#ff801a;
    border-radius: 100px;
    font-weight: bold;
    padding: 8px 35px;
    margin: 0 15px 0 15px;
}

.nav-link2 {
    display: block;
    padding: 5px;
    text-decoration: none;
    background:0;
    border: 0;
    margin: 0 15px 0 15px;
    padding:8px 30px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}


/* End of 赛程赛制 Info Section */


/* 我要报名 Info Section */


.registration-details{

    margin: 0 auto;
    margin-top:0rem;
    padding-top: 7rem;
    padding-bottom: 5rem;
    background-color: rgba(255, 228, 228, .7);
    color:#020202;
    border-bottom-right-radius: 50rem;
    border-bottom-left-radius: 50rem;

}

.registration-details-container {

    margin: 0 auto;
    padding-top: 5rem;
    padding-bottom: 7rem;

}


.about-pills-tab3 {
    margin: 0 auto;
    background: #213269;
    border-radius: 300px;
    padding: 5px;
    font-size: 18px;
    margin-top:-8.5rem;
}


.steps-to-join2 {

    display: block;
    margin: 0 auto;
    width: 62%;


}

p.registration-details-info {
    margin: 0 auto;
    width: 65%;

}


.registration-details-container2 {

    margin: 0 auto;
    width: 60%;
    padding-top: 5rem;
    padding-bottom: 7rem;

}


.registration-details-container2 ul{

    text-align: left;
    color: #020202;
    padding-left: 2rem;

}

.steps-to-join3 {

    display: block;
    margin: 0 auto;
    width: 55%;


}

/* End of 我要报名 Info Section */


/* 奖项奖品 Info Section */


.award-details ul{
    list-style: none;
    font-size: 18px;
    padding-left: 0;
    line-height: 35px;
    color: #020202;
}

.award-details{

    text-align: center;

}

.price-cat-box {
    background-color: rgba(255, 233, 218, .7);
    padding: 1rem 2.5rem;
    margin-bottom: 4rem;
    border-radius: 0 40px 40px 40px;
    position: relative;
    z-index: 5;

}

.price-cat{
    padding: 1rem;
    background-color: #5793c5;
    color: #fff;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    border-radius: 0;
    font-size: 1.2rem;
    margin-top: -2.5rem;
}

.price-cat-box p {
    line-height: 28px;
    text-align: left;
}

.prizes-text {
    position: relative;
    z-index: 100;
}

.prizes-text a{}


.content-wrapper {
  position: relative; /* Allows positioning of background-animation */
  overflow: hidden; /* Hides the image when it moves out of view */
}

.background-animation {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 200%; /* Make it wider than the container to allow for movement */
  height: 100%;
  background-image: url('https://microfilm.zaobao.com/preview/assets/img/sound-wave-bg.png'); 
  opacity: 0.1;
  background-size: cover;
  animation: slideBackground 100s linear infinite; /* Adjust duration and timing */
}

@keyframes slideBackground {
  0% {
    transform: translateX(0); /* Start at the right (or original position) */
  }
  100% {
    transform: translateX(-50%); /* Move to the left, half its width */
  }
}


.award-details2{

    background-color: rgba(220, 255, 254, .8);
    margin-left: 3.5rem;
    border-radius: 20px;
    position: relative;
    z-index: 5;
    padding-bottom: 1rem;

}


.price-cat2{
    padding: 1rem;
    background-color: #57c5c1;
    color: #fff;
    text-align: center;
    width: 55%;
    margin: 0 auto;
    border-radius: 0;
    font-size: 1.2rem;
    margin-top: -1.5rem;
    align-content: left;
}


.awards-judging-criteria-container {

    margin: 0 auto;
    padding-top: 5rem;
    margin-bottom: 5rem;

}


.carousel-control-next-icon, .carousel-control-prev-icon {
    height: 75px;
    width: 75px;
    background-color: rgba(221, 104, 90, 0.9);
    background-size: 70%, 70%;
    border-radius: 50%;
    position: relative;
    z-index: 1000;
}

.price-cat-box2 {
    background-color: rgba(255, 233, 218, .7);
    padding: 1rem;
    padding-bottom: 2rem;
    margin-bottom: 4rem;
    border-radius: 0 40px 40px 40px;
    position: relative;
    z-index: 5;

}

.price-cat-box2 p{
    margin: 0 auto;
    width: 90%;

}

h5.smaller-size{
    font-size: 18px;
}

.award-details3 {

    background-color: rgba(220, 255, 254, .8);
    margin-left: 3.5rem;
    border-radius: 40px;
    position: relative;
    z-index: 5;
    padding: 0 4rem 1rem 4rem;

}

.award-details3 ul{

    color: #020202;
}

.price-cat-box3 {
    background-color: rgba(255, 233, 218, .7);
    padding: 0 4rem 4rem 4rem;
    margin-bottom: 4rem;
    border-radius: 0 40px 40px 40px;
    position: relative;
    z-index: 5;

}




.price-cat3{
    padding: 1rem;
    background-color: #5793c5;
    color: #fff;
    text-align: center;
    width: 65%;
    margin: 0 auto;
    border-radius: 0;
    font-size: 1.2rem;
    margin-top: -2.5rem;
}

.carousel {
    position: relative;
    z-index: 100;
}

.align-auto{
    width: 90%;
    margin: 0 auto;
}

.align-auto ul{
    margin-left: 1.5rem;

}

/* End of 奖项奖品 Info Section */

/* 评审阵容 Info Section */

        .circle-group-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #555;
        }

        .circle-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            margin: 2rem;
        }

        .circle-icon.active {
            background-color: #5793c5; /* Active color */
            box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
            transform: scale(1.1);
        }

        .content-panel {
            background-color: #d5ecff;
            border-radius: 20px;
            padding: 2.5rem;
            height: 100%;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .judges-content img {

            width: 45%;
            margin: 0 auto;
            margin-top: -5rem;

        }

        .content-panel-bg{
            background-color: #5793c5;
            width: 100%;
            margin: 0 auto;
            border-radius: 300px;
            margin-bottom: 2rem;
            margin-top: -2.5rem;
            position: relative;
            z-index: 40;
        
        }

        .content-panel-title {
            font-size: 25px;
            font-weight: 700;
            color: #ffffff;
            margin-top: .5rem;
            margin-bottom: 0.1rem;
        }
        
        .content-panel-subtitle {
            font-size: 18px;
            font-weight: 500;
            color: #ffffff;
            margin-bottom: .5rem;
        }



/* End of 评审阵容 Info Section */



/* 分享会 Info Section */

.tab-btn {
            background-color: #495057;
            color: #ced4da;
            border: none;
            border-radius: 2rem;
            padding: 1rem 1.5rem;
            margin: 0.5rem;
            flex-grow: 1;
            font-size: 1rem;
            font-weight: 600;
            transition: background-color 0.3s, color 0.3s, transform 0.2s;
            white-space: nowrap;
        }

        .tab-btn:hover {
            background-color: #6c757d;
            color: #fff;
            transform: translateY(-3px);
        }

        .tab-btn.active {
            background-color: #007bff;
            color: #fff;
            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
            transform: scale(1.05);
        }
        
        .content-card {
            background-color: #495057;
            color: #f8f9fa;
            border-radius: 1.5rem;
            padding: 2rem;
            margin-top: 2rem;
        }

        .speaker-image {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: #6c757d;
            margin-right: 1.5rem;
            flex-shrink: 0;
        }

        .speaker-info h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .speaker-info p.title {
            font-size: 1rem;
            font-weight: 500;
            color: #ced4da;
        }


/* End of 分享会 Info Section */



/* 初学者贴士 Info Section */

.progress-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2rem;
            position: relative;
        }

        .progress-line {
            position: absolute;
            height: 4px;
            width: 20%;
            background-color: #667ab8;
            z-index: 0;
        }
        
        .progress-step {
            position: relative;
            z-index: 1;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #667ab8;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: 700;
            transition: background-color 0.3s, color 0.3s;
            cursor: pointer;
            margin: 0 1rem;

        }

        .progress-step.active {
            background-color: #213269;
            border-style: solid;
            border-width: 4px;
            border-color: #ff801a;
            border-radius: 100px;
            width: 50px;
            height: 50px;
            padding: 1.6rem;
            color: #fff;
        }

        .content-panel2 {
            background-color: rgba(221, 229, 255, .5);
            border-radius: 1.5rem;
            padding: 20px;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);

        }

        .content-panel2 ol, ul{
            color: #020202;
            font-size: 18px;
        }

        .content-panel2 h2 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .content-image-container {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
        }

        .content-image {
            max-width: 100%;
            height: auto;
            border-radius: 0.75rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }


        .beginner-tips {
        margin: 0 auto;
        width: 56%;
        }

/* End of 初学者贴士 Info Section */



/* Mobile social icons */


.social-icons3 {
    margin-left: .8em;
    background: #ec6d17;
    padding: .4em .7em .5em 1em;
    color: #ffffff;
    text-align: center;
    border-radius: 100px;
    line-height: 1.5em;
}



/* End of Mobile social icons */


footer {
    font-size: 16px;
    color: #f3d3af;
    margin-top: 4rem;
    padding: 3rem;
    background-color: rgba(255, 255, 255, .4);
}


.copyright {
    margin-top: 0px;
    font-size: .9em;
    padding: 22px 0px;
    background-color: #213269;
    color: #ffede0;
    margin-top: 0px;
    padding-top: 19px;
    z-index: 1003;
}

.copyright p {
    margin-bottom: 0;
}



/* Terms */


.subpage-main2 {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2em;
}

.subpage-main2 p {
    margin-bottom: 0.26em;
    font-size: 1.1rem;
}

h3.terms-main-header {
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 1.5rem;
}

p.terms-para-bottom {
    margin-bottom: .5rem;
}

p.terms-para-top {
    margin-top: -.5rem;
}

ol {
    text-align: left;
}

ol.upper-alpha {
    list-style: upper-alpha;
    text-align: left;
    color: #020202;
}

.bottom-margin {
    margin-bottom: 2.5rem;
}

.top-margin {
    margin-top: .8rem;
}

.top-margin2 {
    margin-top: 1.8rem;
}

.top-margin3 {
    margin-top: 1.2rem;
}

.left-indent {
    padding-left: 3rem;
}

.terms-list li {
    margin-bottom: .8rem;
}

.lower-alpha {
    list-style: lower-alpha;
}

.lower-roman {
    list-style: lower-roman;
}

h3.terms-middle-header {

    color: #2748b2;;
    font-size: 1.4rem;
    margin-left: -1.5rem;
}

h5.terms-format {
    font-size: 1.1rem;
    color: #212b35;
    text-align: center;
}

p.latest-version {
    font-size: .9rem;
    margin-top: -1.2rem;
}

.detail-box {
    background-color: rgb(217 248 255 / 0.65);
    padding: 2.5rem;
    border-radius: 20px;
    margin-bottom: 2em;
    font-size: 1.1rem;
    color: #020202;
}

.detail-box li {color: #020202;}

ul.specs {font-size: 1.1rem;}

/* End of Terms */


/* FAQ */


.accordion-item {
    color: #212b35;
    background: rgb(255, 213, 184);
    border: 0px;
    margin-bottom: 20px;
}


.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: #ffdfd9;
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: transparent;
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: #212b35;
    --bs-accordion-active-bg: #77dded;
}



.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius);
    font-weight: bold;
    font-size: 1.1rem;
}


button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
    cursor: pointer;
    font-weight: bold;
}


.accordion-body {
    padding: 2em;
}

.accordion-body p {
    margin-bottom: 0px;
}



/* End of FAQ */


/* Responsive */


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



}


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

.competition-details{

    margin: 0 auto;
    margin-top:7rem;
    background-color: rgba(255, 228, 228, .7);
    color:#020202;
    border-top-right-radius: 30rem;
    border-top-left-radius: 30rem;

}

}


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

.key-visual {
    width: 120vw;  /* Sets width to 100% of the viewport width */
    height: auto;  
    padding: 0;
    object-fit: cover; /* Ensures the image covers the entire area, cropping if necessary */
    object-position: center;
    display: block;
    position: relative; /* The image needs a positioning context */
    left: 50%; /* Moves the image 50% from the left side of the screen */
    transform: translateX(-48%); 

}

.about-pills-tab-container2 img {
    margin: 0 auto;
    width:40%;
    vertical-align: middle;
}

.org-logo img {
    margin: 0 auto;
    width: 16%;
}

.steps-to-join2 {
    display: block;
    margin: 0 auto;
    width: 70%;
}

.judges-content img {
    width: 55%;
    margin: 0 auto;
    margin-top: -5rem;
}

.beginner-tips {
        margin: 0 auto;
        width: 56%;
        }


        .progress-line {
            position: absolute;
            height: 4px;
            width: 20%;
            background-color: #667ab8;
            z-index: 0;
        }


}


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

p.details-info {
    margin: 0 auto;
    width: 50%;

}




}


@media screen and (max-width: 1200px) {
.about-pills-tab-container2 img {
    margin: 0 auto;
    width:60%;
    vertical-align: middle;
}


.org-logo img {
    margin: 0 auto;
    width: 22%;
}


.competition-details{

    margin: 0 auto;
    margin-top:7rem;
    background-color: rgba(255, 228, 228, .7);
    color:#020202;
    border-top-right-radius: 30rem;
    border-top-left-radius: 30rem;

}


p.details-info {
    margin: 0 auto;
    width: 80%;

}


.steps-to-join {
    display: block;
    margin: 0 auto;
    width: 80%;

}

.competition-details3 {
    background-color: #fec69e;
    margin-left: 0rem;
    border-radius: 20px;
    margin-top:3rem;
}

.steps-to-join2 {
    display: block;
    margin: 0 auto;    
    width: 80%

    
}

.progress-line {
            position: absolute;
            height: 4px;
            width: 30%;
            background-color: #667ab8;
            z-index: 0;
        }


.registration-details-container {
    margin: 0 auto;
    padding-top: 5rem;
    padding-bottom: 4rem;
}


.steps-to-join3 {

    display: block;
    margin: 0 auto;
    width: 80%;


}


.award-details2 {
    background-color: rgba(220, 255, 254, .8);
    margin-left: 0rem;
    border-radius: 20px;
    position: relative;
    /* z-index: 5; */
    padding-bottom: 1rem;
}

.award-details3 {
    background-color: rgba(220, 255, 254, .8);
    margin-left: 0rem;
    border-radius: 20px;
    position: relative;
    z-index: 5;
    padding: 0 4rem 1rem 4rem;
}

.price-cat-box4 {
    background-color: rgba(255, 233, 218, .7);
    padding: 0 4rem 1rem 4rem;
    border-radius: 0 150px 150px 150px;
    position: relative;
    z-index: 5;
    margin-bottom: 4rem;
}

.judges-content img {
    width: 60%;
    margin: 0 auto;
    margin-top: -5rem;
}

.content-panel-bg{
            background-color: #5793c5;
            width: 100%;
            margin: 0 auto;
            border-radius: 300px;
            margin-bottom: 2rem;
            margin-top: -2.5rem;
            position: relative;
            z-index: 40;
        
        }

}


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

p.details-info {
    margin: 0 auto;
    width: 50%;

}


.steps-to-join {
    display: block;
    margin: 0 auto;
    width: 60%;

}

.judges-content img {
    width: 60%;
    margin: 0 auto;
    margin-top: -5rem;
}

.judges-content img {
    width: 70%;
    margin: 0 auto;
    margin-top: -5rem;
}

.beginner-tips {
        margin: 0 auto;
        width: 80%;
        }

}

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

.desktop-view {display: none;}

.mobile-view {display: block;}

.key-visual {
    width: 150vw;  /* Sets width to 100% of the viewport width */
    height: auto; 
    padding: 0px;
    object-fit: cover; /* Ensures the image covers the entire area, cropping if necessary */
    object-position: center;
    display: block;
    position: relative; /* The image needs a positioning context */
    left: 50%; /* Moves the image 50% from the left side of the screen */
    transform: translateX(-49%); 
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    padding: auto;
    margin: auto;
}

.about-pills-tab-container {
    margin: 0 1rem 2rem 1rem;
    line-height: 1.8rem;
    text-align: center;
}

.about-rows {
    padding-left: 2rem;
    padding-right: 2rem;
}

.competition-details{

    margin-top:4rem;
}

.registration-details-container2 {

    margin: 0 auto;
    width: 90%;
    padding-top: 5rem;
    padding-bottom: 7rem;

}

.judges-content img {
    width: 70%;
    margin: 0 auto;
    margin-top: -5rem;
}

.red-book img{
    width: 55px;
    margin:0 auto;
    text-align: center;
    border-radius: 100px;
    line-height: unset !important;
}

.social-icons4 {
    margin-left: .8em;
    background: #ec6d17;
    padding: .4em .6em .5em .6em;
    color: #ffffff;
    text-align: center;
    border-radius: 100px;
    line-height: 1.5em;
}


}


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

}


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

.key-visual {
    width: 220vw;  /* Sets width to 100% of the viewport width */
    height: auto; 
    padding: 0px;
    object-fit: cover; /* Ensures the image covers the entire area, cropping if necessary */
    object-position: center;
    display: block;
    position: relative; /* The image needs a positioning context */
    left: 50%; /* Moves the image 50% from the left side of the screen */
    transform: translateX(-47%); 
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    padding: auto;
    margin: auto;
}

.nav-link {
    display: block;
    padding: 5px;
    color: #ffffff;
    text-decoration: none;
    background:0;
    border: 0;
    margin: 0 auto;
    padding:8px 30px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.about-pills-tab-container2 img {
    margin: 0 auto;
    width:80%;
    vertical-align: middle;
}


.about-pills-tab3 {
    margin: 0 auto;
    background: #213269;
    border-radius: 300px;
    padding: 5px;
    font-size: 18px;
    margin-top:-11rem;
}


.org-logo img {
    margin: 0 auto;
    width: 30%;
}


.details-pills-tab-container {
    padding: 0 .5rem 2rem .5rem;
    margin-top: -1.5rem;
}


p.details-info {
    margin: 0 auto;
    width: 80%;

}

p.registration-details-info {
    margin: 0 auto;
    width: 80%;
}


.steps-to-join {
    display: block;
    margin: 0 auto;
    width: 80%;

}


.steps-to-join2 {
    display: block;
    margin: 0 auto;    
    width: 80%

    
}

.circle-icon-container {
    margin: 0 auto;
    margin-bottom: 5rem;
    margin-right: -5rem;

}

.content-panel-bg{
            background-color: #5793c5;
            width: 70%;
            margin: 0 auto;
            border-radius: 300px;
            margin-bottom: 2rem;
            margin-top: -2.5rem;
            position: relative;
            z-index: 40;
        
        }


        .beginner-tips {
        margin: 0 auto;
        width: 100%;
        }

        .progress-line {
            position: absolute;
            height: 4px;
            width: 45%;
            background-color: #667ab8;
            z-index: 0;
        }



}

@media (max-width: 767.98px) {
            .circle-icon {
                width: 50px;
                height: 50px;
            }

            .header h1 {
                font-size: 2rem;
            }
            .panel-container {
                padding: 1rem;
            }
}


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

.about-pills-tab-container2 img {
    margin: 0 auto;
    width:100%;
    vertical-align: middle;
}


.org-logo img {
    margin: 0 auto;
    width: 45%;
}

.progress-line {
            position: absolute;
            height: 4px;
            width: 50%;
            background-color: #667ab8;
            z-index: 0;
        }

}

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

   .social-icons2 {
    width: 60px;
    height: 60px;
    margin-right: .8em;
    background: #28b3b9;
    padding: .5em 0.1em .5em 0.4em;
    color: #ffffff;
    float: none;
    text-align: center;
    border-radius: 100px;
    line-height: 1.5em;
}


}


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

   #topbar { right:20px; }

   .content-panel-bg{
            background-color: #5793c5;
            width: 100%;
            margin: 0 auto;
            border-radius: 300px;
            margin-bottom: 2rem;
            margin-top: -2.5rem;
            position: relative;
            z-index: 40;
        
        }

        .steps-to-join2 {

    display: block;
    margin: 0 auto;
    width: 90%;


}

.details-pills-tab-container {
    padding: 0 1rem 2rem 1rem;
    margin-top: -1.5rem;
}

.progress-line {
            position: absolute;
            height: 4px;
            width: 70%;
            background-color: #667ab8;
            z-index: 0;
        }



}


/* End of Responsive */




/* Galaxy Fold */

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

    .header-logo {
        width: 55%;
    }

    .page-header {
        padding-bottom: 1em;
    }

    .subpage-para-content {
        padding: 1em;
    }

    .org-logo {
        width: 100%;
    }



    h3.date-header {
        font-size: 1.2em;
        margin-bottom: 1.5rem;
    }

    img.org-comm {
        width: 80%;
        margin: 0 auto;
        float: none;
    }

    .left-indent {
        padding-left: 0rem;
    }

    .workshop-btn {
        margin-top: 0rem;
    }

    .workshop-btn2 {
        margin-top: 0rem;
    }

}

/* End of Galaxy Fold */