@media ( min-width : 1200px) 
    {
    .container 
    {
        width: 1170px;
    }
 }
@media ( min-width : 100px) 
{
    .social
    {
        
    }
}
a:hover
{
    text-decoration: none !important;
    color: #fff;
}

a.year1:hover {
  background-color: #0056b3 !important;
  text-decoration:none;
}

a.year2:hover {
  background-color: #1a682c !important;
  text-decoration:none;
}

a.year3:hover {
  background-color: #cc610a !important;
  text-decoration:none;
}
a:active{
    text-decoration:none !important;
}
ul 
{
    margin-bottom: 0;
    padding-left: 0;
}
li
{
    list-style: none;
}
h3, h4
{
    margin-top: 0;
}
body
{
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px;
    line-height: 30px;
}
p
{
    margin: 0;
}
.text-center 
{
    text-align: center !important;
}
/* ====================full_wrapper====================== */
.online_ryt, .social ul li a, .social ul li:hover a, .bt-cs .bt-inner .bt-title, .bt-cs .bt-inner:hover .bt-title, .inner_menu li a, .inner_menu li:hover a, 
.contact-info .event-social li a, .contact-info .event-social li a:hover
{
    transition: all 0.5s ease-in 0s;
}
.plan-content-box, .member_S_links_block a i.fab, .jmm-timer, .jmm-subtitle, .single_info_block i.fas, .single_info_block h4, .single_info_block i.far, .footer_box_block h4, 
.footer_box_block p, .ftbot, .foot_facility h3, .foot_act h3, .foot_facility ul li a, .foot_act ul li a, .foot_contact h3, .foot_contact li i:before, .foot_contact p, .foot_contact p a, 
.title h1, .inner_menu h3, .welcome p
{
    color: #fff !important;
}
.icons_wrapper .icons, .contacts, .inner_menu, .inner_content .col-sm-6
{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 7px;
}
.text-center 
{
    text-align: center;
}
/* ====================icons_wrapper====================== */
.icons_wrapper
{
    background: #28303B;
    padding: 10px 0;
}
.social ul li a
{
    color: #7f8997;
}
.social ul li
{
    display: inline-block;
}
.social ul li a
{
    padding-left: 10px;
}
/* ====================logo_wrapper====================== */
.logo_wrapper
{
    padding: 10px 0;
    background: #F3F3F5;
}
.logo img
{
    width: 80%;
}
.top_info_block
{
    padding: 10px 0;
}
.top_info_block ul li 
{
    display: inline-block;
    position: relative;
}
.top_info_block li i 
{
    color: #555555;
    font-size: 28px;
    height: 50px;
    left: 0;
    line-height: 50px;
    margin-top: -25px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 50px;
}
.top_info_block p 
{
    margin-right: 15px;
    padding-left: 50px;
    text-align: left;
    font-size: 12px;
}
.top_info_block li 
{
    border-right: 1px solid #cfcfd0;
}
.top_info_block li:last-child 
{
    border: medium none;
}
.top_info_block p span 
{
    color: #a29db1;
    display: block;
    font-size: 12px;
}
/* ====================menus_wrapper====================== */
.menus_wrapper
{
    position: relative;
    z-index: 999;background: #0C1F38;
}
.menus_wrapper .container
{
    background: #0C1F38;
}
.menus_wrapper .menu
{
    border: 1px solid #071527;
}
a.custom_btn_block 
{
    background:#f6bb18 none repeat scroll 0 0;
    border: 0 none;
    color:#333333;
    font-weight: 700;
    padding-right: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 20px;
    margin-top: 10px !important;
}
a.custom_btn_block:hover
{
    background:#f6bb18 none repeat scroll 0 0 !important;
}
a.custom_btn_block::before 
{
    background:#0c1f38 none repeat scroll 0 0;
    content: "";
    height: 113%;
    left: 0px;
    position: absolute;
    top: 0px;
    transform: skewX(-30deg);
    width: 27px;
}
.apply
{
    padding-top: 8px;
}
/* ====================slide_wrapper ====================== */
.slide_wrapper 
{
    
    position: relative;
}
/* ====================vision_wrapper ====================== */
.vision_wrapper
{
    position: relative;
   
}
.single_top_block 
{
    background: #0c1f38;
    color:#ffffff;
    min-height: 180px;
    padding: 0 40px 25px;
}
.single_top_block .icon_box_block 
{
    width: 139px;
    height: 139px;
    margin: 0 auto;
    display: block;
    background: #0c1f38;
    border-radius: 50%;
    position: relative;
    top: -10px;
}
.icon_box_block i
{
    display: inline-block;
    line-height: 92px;
}
.icon_box_block i:before
{
    font-size: 33px !important;
}
.color
{
    color: #daa106 !important;
}
.single_text_block 
{
    margin-top: -88px;
    position: relative;
}
.single_top_block h2 
{
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0 15px;
    margin-top: 0 !important;
}
/* ====================about_wrapper====================== */
.about_wrapper
{
    position: relative;
    padding-top: 50px;
}
.abt_home, .act_home h2, .news .hd h2
{
    text-align: center;
}
.about_wrapper::before 
{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 160px;
    width: 100%;
    background: #daa105;
}
.abt_home h2, .act_home h2, .fac_home h2, .news .hd h2
{
    font-size: 40px;
    font-weight: 700;
    margin-top: 0;
    font-family: 'Poppins', sans-serif;
    color: #0c1f38;
    text-transform: capitalize;
}
.abt_home img
{
    display: inline;
    margin-top: 5%;
}
/* ====================activities_wrapper====================== */
.activities_wrapper
{
    padding: 80px 0;
}
.b-line 
{
    position: relative;
    width: 60px;
    height: 3px;
    background: #0c1f38;
    display: block;
    margin: 0 auto;
}
.single_plan_block 
{
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #feb20d;
}
.mb-30, .act_home 
{
    margin-bottom: 30px;
}
.plan-content-box 
{
    background: #00305b none repeat scroll 0 0;
    padding: 30px;
    width: 61%;
    position: relative;
    z-index: 9;
}
.plan-content-box h3 
{
    margin-bottom: 35px;
    position: relative;
}
.more_btn_block, .readmore a
{
    color: #feb20e;
    font-weight: bold;
    display: inline-block;
    margin-top: 30px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.more_btn_block:hover, .readmore:hover a
{
    color: #23527c;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.plan-content-box h3::after 
{
    background: #feb20d none repeat scroll 0 0;
    bottom: -15px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 45px;
}
.single_plan_block::after, .single_plan_block-img::after 
{
    background-position: right top;
    content: "";
    height: 100%;
    right: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 39%;
    z-index: -1;
}
.block_bg1::after 
{
    background-image: url('../images/about/f1.jpg') !important;
    background-size: cover;
}
.block_bg2::after 
{
    background-image: url('../images/about/f2.jpg') !important;
    background-size: cover;
}
.block_bg3::after 
{
    background-image: url('../images/about/f3.jpg') !important;
    background-size: cover;
}
.block_bg4::after 
{
    background-image: url('../images/about/f4.jpg') !important;
    background-size: cover;
}
/* ====================facilities_wrapper====================== */
.facilities_wrapper
{
    background: #F7F7F7;
    padding: 100px 0;
}
.mt-0 
{
    margin-top: 0px !important;
}
.courses-block 
{
    background: #fff;
    margin-top: 50px;
}
.img-scale figure 
{
    overflow: hidden;
}
.courses-content_block 
{
    padding: 10px 20px 15px;
}
.courses-content_block h3
{
    font-family: 'Poppins', sans-serif;
    margin-top: 10px;
    font-weight: 600;
    font-size: 24px;
}
.item-title a
{
    color: #333;
}
.courses-content_block P 
{
    color: #444;
}
.img-scale:hover img 
{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -moz-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.img-scale img 
{
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    width: 100%;
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -moz-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    -o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
/* ====================manage_wrapper====================== */
.manage_wrapper
{
    padding: 100px 0;
}
.single_member_block 
{
    margin-top: 40px;
}
.member_S_links_block 
{
    background: #0c1f38 none repeat scroll 0 0;
    display: inline-block;
    margin-top: -34px;
    padding: 0 10px;
    position: absolute;
}
.member_S_links_block a i.fab 
{
    display: inline-block;
    padding: 10px;
    transition: .3s;
}
.author_block 
{
    color: #222222;
    margin-left: 25px;
    margin-top: 25px;
}
.author_block > span 
{
    color: #777777;
    display: block;
    font-size: 75%;
    font-weight: normal;
    margin-top: 10px;
    padding-bottom: 10px;
}
.single_member_block > p 
{
    color: #777777;
    margin-left: 25px;
}
/* ====================counter_wrapper====================== */
.counter_wrapper 
{
    background-image: url('../images/bg_1.jpg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding: 150px 0;
    position: relative;
}
.counter_wrapper:before, .footmenus_wrapper:before
{
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    background-color: rgba(0,33,71,0.9);
}
.jmm-counter.default .jm-count 
{
    float: left !important;
    padding-right: 10px;
}
.jmm-counter.default .jm-count :after 
{
    content: '';
    width: 2px;
    height: 64px;
    background: #daa106;
    position: absolute;
    top: 17px;
    right: 0;
}
.jmm-timer
{
    font-size: 65px;
    -webkit-box-flex: 1;
    -moz-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 1.2;
    font-weight: 600;
    padding-right: 8px;
    position: relative;
}
.jmm-subtitle 
{
    font-size: 18px;
    padding-top: 15px;
    padding-left: 15px;
    -webkit-box-flex: 2;
    -moz-flex: 2;
    -webkit-flex: 2;
    flex: 2;
    text-transform: uppercase;
    text-align: left;
}
.jmm-counter.default .jmm-subtitle 
{
    margin-top: 0px !important;
}
/* ====================news_wrapper====================== */
.news_wrapper
{
    padding: 100px 0;
}
.news .hd h2 span
{
    color: #daa106;
}
/* ====================feelfree_wrapper====================== */
.feelfree_wrapper
{
    background: #DAA106;
    padding: 30px 0;
}
.feel h2 
{
    text-transform: uppercase;
    font-size: 31px;
    letter-spacing: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    display: block;
    padding-bottom: 10px;
}
.feel_contact 
{
    max-width: 160px;
    width: 100%;
    margin-top: 10px;
}
.feel_contact:hover 
{
    color: #daa106;
    text-decoration: none;
    background: #0c1f38 !important;
}
.feel_contact  
{
    font-size: 14px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    line-height: 41px;
    border: 2px solid #0c1f38;
    padding: 0 22px;
    border-radius: 30px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #0c1f38;
    height: 44px;
    text-align: center;
    margin-top: 15px;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
/* ====================contactft_wrapper====================== */
.contactft_wrapper
{
    background: #0C1F38;
    padding: 50px 0;
}
.single_info_block 
{
    position: relative;
}
.single_info_block i.fas, .single_info_block i.far
{
    font-size: 28px;
    height: 80px;
    line-height: 80px;
    margin-top: -40px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 50px;
}
.single_info_block > h4 
{
    margin-left: 55px;
    font-size: 15px;
    line-height: 23px;
}
.single_info_block h4 span 
{
    display: block;
    font-size: 80%;
    font-weight: normal;
}
/* ====================footmenus_wrapper====================== */
.footmenus_wrapper
{
    background-image: url('../images/footer__bg-block.jpg') !important;
    background-position: top center;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding: 80px 0 30px;
    position: relative;
}
.footer_box_block p 
{
    line-height: 24px;
    text-align: justify;
}
.footer
{
    border-top: 1px solid #fff;
    padding-top: 20px;
    margin-top: 40px;
}
.footer img
{
    width: 35%;
}
.ftbot
{
    padding-top: 20px;
    text-align: right;
}
.ftbot a
{
    color: #DAA106;
}
.foot_facility ul li a, .foot_act ul li a
{
    border-bottom: 1px dashed #0C1F38;
    position: relative;
}
.foot_facility ul li a:after, .foot_act ul li a:after 
{
    content: "\f105";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 12px;
}
.foot_contact li i.fas,  .foot_contact li i.far
{
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    width: 20px;
}
.foot_contact p 
{
    margin-left: 25px;
    margin-top: 10px;
}
/* ====================breadcrumb_wrapper====================== */
.breadcrumb_wrapper
{
    background: url('../images/bg_1.jpg') 0 36% no-repeat;
    background-size: auto;
    -webkit-background-size: cover;
    background-size: cover;
    height: 350px;
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}
.breadcrumb_wrapper:before 
{
    background-color: rgba(0, 0, 0, 0.69);
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
}
.title 
{
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding-top: 50px;
}
.title h1 
{
    font-size: 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}
.title h1:before 
{
    content: attr(data-title);
    font-size: 61px;
    margin-top: 0;
    position: absolute;
    top: 80px;
    left: 13px;
    color: rgba(6, 60, 54, 0.08);
    z-index: 0;
}
.breadcrumb
{
    background: none !important;
}
.breadcrumb ul 
{
    text-align: center;
    font-size: 40px;
}
.breadcrumb ul li
{
    color: #F6BB18 !important;
    z-index: 999;
    position: absolute;
}
.breadcrumb > li + li::before 
{
    content: " " !important;
}
.breadcrumb ul li a span, .page-header h1
{
    display:none !important;
}
.page-header
{
    border: none !important;
    padding: none;
}
/* ====================inner_wrapper====================== */
.inner_wrapper
{
    padding: 100px 0;
}
.inner_menu
{
    background: #F0F0F0;
}
.inner_menu h3
{
    background: #0C1F38;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 0 !important;
}
.inner_menu li a
{
    color: #0C1F38;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
}
.inner_menu li:hover a
{
    background: #0C1F38 !important;
    color: #F6BB18;
}
.black_bg
{
    background: #0C1F38;
}
.black_bg
{
    padding: 20px;
}
.hdr h4
{
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 40px;
}
.black_hdr h4 
{
    color: #000;
}
.black_bg p
{
    color: #eee;
}
.content_new 
{
    padding-left: 20px;
}
ul.sigFreeClassic li.sigFreeThumb
{
    margin: 15px 14px 1px 0 !important;
}
.breadcrumb>li 
{
     display: flex !important; 
}
/* ====================ctt_wrapper====================== */
.l-left 
{
    margin: 0;
}
.headeing  h2 
{
    font-size: 40px;
    font-weight: 800;
    margin-top: 0;
    font-family: 'Poppins', sans-serif;
    color: 
    #0c1f38;
    text-transform: capitalize;
}
.form-horizontal .control-label 
{
    display: none;
}
.form-horizontal .controls 
{
    margin-left: 0px !important;
}
input[type="text"], input[type="email"] 
{
    height: 45px !important;
}
.help-block 
{
    margin-top: 15px !important;
}
input[type="text"], input[type="email"], .input-80 
{
    padding-left: 15px;
}
#inputMessage
{
    padding-top: 7px;
}
input[type="text"], input[type="email"], .input-80 
{
    display: block;
    margin-bottom: 32px;
    width: 100%;
    font-size: 14px;
    padding: 0 15px;
    border: 1px solid #e5e5e5;
    color:#878787;
    background:transparent;
    -webkit-appearance: none;
    border-radius: 0;
}
.controls .btn:hover 
{
    background: none;
    color: #daa106;
    text-decoration: none;
}
.controls .btn
{
    font-size: 14px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    line-height: 41px;
    border: 2px solid #daa106;
    padding: 0 22px;
    border-radius: 30px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #daa106;
    height: 44px;
    text-align: center;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
/* ====================ctt_map====================== */
.ctt_map
{
    margin-top: 75px;
}
.contact-info 
{
    margin: 0px;
}
.contact-info .info 
{
    padding: 0px;
    margin-bottom: 20px;
}
.contact-info .info li 
{
    list-style: none;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    padding: 15px 0px;
}
.contact-info .info li .icon 
{
    float: left;
    margin-right: 15px;
    font-size: 30px;
    color: #65ac4c;
    line-height: 1;
}
.contact-info .info li .content 
{
    display: table;
}
.contact-info .info li .content p 
{
    margin: 0px;
    color: #696969;
    font-size: 14px;
    font-weight: 500;
}
.contact-info .event-social 
{
    padding: 0px;
}
.contact-info .event-social li 
{
    margin-right: 5px;
}
.event-social li 
{
    list-style: none;
    display: inline-block;
    margin-right: 7px;
    margin-bottom: 5px;
}
.contact-info .event-social li a 
{
    height: 40px;
    width: 40px;
    line-height: 2;
}
.event-social li a 
{
    color: #fff;
    font-size: 22px;
    background-color:#3b5998;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
}
.event-social li:nth-child(2) a 
{
    background-color: #55acee;
}
.event-social li:nth-child(3) a 
{
    background-color: #FF0084;
}
.event-social li:nth-child(4) a 
{
    background-color: #F26798;
}
.event-social li:nth-child(5) a 
{
    background-color: #CB2027;
}
.event-social li:nth-child(6) a 
{
    background-color: #dc4e41;
}
.event-social li a i
{
    padding-left: 6px;
}
.contact-info .event-social li a:hover
{
    background: #F6BB18 !important;
}
/* ====================whatsapp====================== */
.nw_hdr h4
{
    font-family: 'Poppins', sans-serif;
    border-left: 8px solid red;
    padding-left: 25px;
}
.content_new
{
    padding-top: 30px;
}
.content_new p
{
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #000;
    letter-spacing: 1px;
}
.content_new .dots
{
    line-height: 40px;
    font-weight: bold;
}
.content_new .dots:before
{
    left: 0;
    top: 2px;
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    font-weight: 600;
}
.content_new .dots:before
{
    content: "\f05b";
    color: #17b933;
}
.inner_content img
{
    float: right;
        border: 1px solid #ffebeb;
}
@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
}






.tc
{
    margin-top: 0 !important;
    padding: 15px;
}
table { 
    width: 810px; 
    border-collapse: collapse; 
    margin:50px auto;
    }

/* Zebra striping */
tr:nth-of-type(odd) { 
    background: #eee; 
    }

th { 
    background: #3498db; 
    color: white; 
    font-weight: bold; 
    }

td, th { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: center; 
    font-size: 18px;
    }

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    table { 
        width: 100%; 
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { border: 1px solid #ccc; }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);

        color: #000;
        font-weight: bold;
    }

}
/* ====================marquee_wrapper====================== */
.Marquee_hd {
    background: #daa106;
    color: #000;
    padding: 5px 24px;
    text-decoration: none;
}

.Marquee_hd {
    animation: blinker 1s linear infinite;
}
@keyframes blinker{
50% {
    opacity: .7;
}
}
.ticker-container {
    overflow: hidden;
    white-space: nowrap;
    background: #000;
    color: #fff;
    padding: 5px 0;
}

.ticker-wrapper {
    display: inline-block;
    animation: ticker 30s linear infinite;
}
.ticker {
    display: inline-block;
}
@keyframes ticker{
0% {
    transform: translateX(150%);
}

100% {
    transform: translateX(-100%);
}
}



.flow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1100px;
        margin: auto;
        flex-wrap: wrap;
        gap: 25px;
        position: relative;
    }

    /* connecting line */
    .flow::before {
        content: "";
        position: absolute;
        top: 50px;
        left: 5%;
        right: 5%;
        height: 3px;
        background: linear-gradient(to right, #3498db, #8e44ad);
        z-index: 0;
    }

    .step {
        flex: 1;
        min-width: 230px;
        background: #ffffff;
        border-radius: 15px;
        padding: 0;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        position: relative;
        z-index: 1;
        transition: 0.3s;
        overflow: hidden;
    }

    .step:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    }

    /* top gradient bar */
    .header {
        padding: 15px;
        color: white;
        font-weight: bold;
        font-size: 16px;
    }

    .kinder { background: linear-gradient(45deg, #42a5f5, #1e88e5); }
    .middle { background: linear-gradient(45deg, #66bb6a, #43a047); }
    .secondary { background: linear-gradient(45deg,#0c1f38,#0c1f38); }
    .senior { background: linear-gradient(45deg, #a5353c, #a5353c); }

    .circle {
        width: 45px;
        height: 45px;
        background: white;
        border: 3px solid #3498db;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin: 15px auto;
        display:none;
    }

    .icon {
        font-size: 22px;
    }

    .content {
        padding: 0 20px 20px;
    }

    .content p {
        font-size: 14px;
        color: #555;
        margin: 6px 0;
        letter-spacing:0;
    }

    .tag {
        display: inline-block;
        margin-top: 10px;
        padding: 5px 12px;
        font-size: 12px;
        border-radius: 12px;
        background: #eef4ff;
        color: #2c3e50;
    }

    @media (max-width: 768px) {
        .flow {
            flex-direction: column;
        }

        .flow::before {
            display: none;
        }
    }