/* 
   Created on : Apr 13, 2025, 12:26:42 PM
   Author     : Md Nayan 
*/

/*---------------------------------color code-----------------------------*/
:root {
    --color_one: #01215F;
    --color_two: #fed710;
    --color_three: #0000ff;
    --color_four: #ffa500;
    --color_five: #800080;
    --color_six: #fffff;
    --color_seven: #7e878f;
    --color_eight: #ff1493;
    --color_nine: #00000;
    --color_ten: #ffff;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
a:hover,
a {
    text-decoration: none;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #F6F9FF;
}

.section_title h2 {
    font-size: 48px;
    font-weight: bold;
    color: var(--color_one);
    text-transform: uppercase;
    letter-spacing: 2.2px;
}



.section_bg_alter {
    background: #B6C5DE;
}






/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Page Title Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Page Title Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.innerclass .manu_area {
    position: relative;
}

.page_title {
    background-image: url("https://joysanyoga.autofyapps.com/fdrives/sid/joysanyoga/other/banner_s39497.png");
    padding: 28px;
    color: var(--colro_ten) !important;
}

.breadcrumb {
    background: transparent !important;
    display: -webkit-inline-box !important;

}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--color_ten) !important;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Page Title Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.page_title_section {
    background: var(--color_two);
    padding: 10px;
}

.page_title_section ul {
    margin-bottom: 0px;
}

.page_title_section ul li a {
    color: var(--color_ten);
}



.login_button .btn_primary {
    background: var(--color_one);
    color: var(--color_ten);
    font-weight: 600;
    border-radius: 0;
    margin: 0px 10px;
    width: 124px;
}

.socile_icon ul li {
    background: var(--color_ten);
    border-radius: 50%;
    padding: 6px 12px;
    margin: 3px;
    width: 36px;
    text-align: center;
}

.socile_icon ul li a {
    color: var(--color_one);
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Top Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.top_area {
    background-color: var(--color_one);
    color: #fff;
    padding: 5px;
}

.stare_icon i {
    color: #FECE11;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Logo Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.shop_card a i {
    font-size: 24px;
    color: var(--color_four);
}

.logo_img img {
    width: 60%;
}

.logo_area input {
    border: 1px solid #002262;
    border-radius: 10px;
}

.search_button {
    color: var(--color_ten);
    padding: 4px 11px;
    font-size: 17px;
    background: #002262;
    border-radius: 0px 10px 10px 0px;

}

.login_icon i {
    background: var(--color_one);
    color: var(--color_ten);
    padding: 10px;
    border-radius: 50%;
    font-size: 24px;
    width: 45px;
    text-align: center;
}

.image_logo {
    position: absolute;
    text-align: end;
    top: 26px;
    right: 12px;
    z-index: -99;
    height: 7px;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Menu Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.manu_area {
    background-color: #FECE11;
}

.manu_area .nav-item .nav-link {
    color: var(--color_one);
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
}

/* .navbar-nav .dropdown .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    display: block;
    position: absolute;
}


.navbar-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
} */



.dropdown-item:hover {
  background-color: var(--color_one);
  color: #fff;
  transition: all 0.3s ease;
}

.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
transition: all 0.3s ease;
}
@media screen and (min-width: 769px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
transition: all 0.3s ease;
  }

}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Banner Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.banner_area {
    position: relative;
    overflow: hidden;
    /* opacity: 50%; */
}

.carousel_caption {
    position: absolute;
    top: 29%;
    right: 50%;
    color: #fff;
}

.carousel_caption h1 {
    font-size: 71px;
    font-weight: bold;
}

.btn_primary {
    background: var(--color_one);
    color: var(--color_ten);
    font-weight: 600;
    border-radius: 5px;
    padding: 10px 50px;
}

.view_all:hover,
.btn_primary:hover {
    background: var(--color_two);
    color: var(--color_one);
}



/* home section  start  */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Health conecerns<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/


.health_card {
    background: #FFFFFF;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    padding: 10px;

}

.health_card:hover .icon_img {
    background: var(--color_ten);
}

.health_card:hover {
    background: var(--color_two);
    color: var(--color_ten);
}

.health_card .icon_img {
    background: #B6C5DE;
    border-radius: 50%;
    padding: 10px;
    color: var(--color_ten);
}

.health_card .title {
    font-size: 18px;
    font-weight: bold;
    color: var(--color_one) !important;
    padding: 16px 10px;
}



















/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.course_item Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.course_img img {
    border-radius: 50px 0px 0px 0px;
    height: 330px;
}

.course_text {
    background: var(--color_ten);
    padding: 30px;
    position: relative;
    top: -50px;
    border-radius: 50px 0px 50px 0px;
    color: #000;
}

.course_text strong,
.course_text .title {
    color: var(--color_one);
    font-weight: bold;
}

.course_text .title {
    font-size: 18px;
}

.course_item:hover .course_text .title,
.course_item:hover .course_text strong,
.course_item:hover .course_text {
    background: var(--color_one);
    color: var(--color_ten) !important;
}


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.footer_area Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

.subscribe {
    background: var(--color_two);
    padding: 10px;
}

.subscribe {
    color: #000;
}

.subscribe .footer_title {
    font-size: 45px;

}

.btn_all {
    background: var(--color_one);
    color: var(--color_ten);
    border-radius: 0px;
}

.btn_all:hover {
    color: var(--color_ten);

}

.footer_area input {
    border-radius: 0px;
}








.footer_area {
    background-image: url("../img/footer_area.png");
    background-size: cover;
    color: var(--color_ten);
    background-color: var(--color_two);
    padding: 251px 0px 32px;
}

.footer_area .subscribe {
    margin-top: 50px;
}

.contact_info {
    margin-top: 180px;

}






.footer_title {
    font-weight: bold;
    font-size: 24px;
}

.link_footer li {
    padding: 5px;
}

.link_footer li a {
    color: var(--color_ten);
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Top Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.info-box {
    background-color: #002b65;
    color: white;
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    height: 100%;
}

.info-box h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #00b794;
}

.info-box p {
    margin: 0;
    font-size: 16px;
}

.section-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.quote {
    font-style: italic;
    color: #555;
}

.highlight {
    color: #00b794;
}




/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Top Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Top Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* top section */


.link_color {
    color: #F9D703;
}


.gift_section {
    background-image: url("../img/Call\ to\ action.png");
    text-align: center;
    background-position: bottom;
    height: 380px;
    color: #fff;
    background-color: #b6c5de;
}

.gift_section h1 {
    font-weight: bold;

}

.gift_button .btn {
    background: #F9D703;
    padding: 10px 60px;
    font-weight: bold;
}

/* about section  */




.info_box {
    background-color: #002b65;
    color: white;
    border-radius: 10px;
    padding: 7px 15px;
    height: 100%;
}

.info-box {
    background-color: #002b65;
    color: white;
    border-radius: 10px;
    padding: 42px 7px;
    text-align: center;
    height: 100%;
}

.info-box h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #f2d94d;
}

.info_box h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #f2d94d;
}

.info-box p {
    margin: 0;
    font-size: 16px;
}

.section-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.quote {
    font-style: italic;
    color: #555;
}

.highlight {
    color: #00b794;
}

.info_incon i {
    background: #fff;
    padding: 20px;
    color: #002b65;
    font-size: 30px;
    border-radius: 50%;
}

.title_name h2 {
    font-size: 33px;
    font-weight: bold;
    color: #000;
    padding: 23px;
}


/* profile_area */
.profile {
    /* background-image: url(../img/Kushal\ Roy\ joy.png); */
    background-color: var(--color_one);

}

.highlight-banner {
    background: #FFD700;
    text-align: center;
    padding: 10px 10px;
    border-radius: 0 0 10px 10px;
}

.certificates {
    margin-top: 60px;
}

.social-icons a {
    color: #03245C;
    font-size: 1.3rem;
    margin: 0 3px;
}



/* instar  */


.view_all {
    background: #002b65;
    color: #fff;
    padding: 6px 40px;
    font-weight: bold;
}


/* courche */







/* testimonials */


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Gellary Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.teams_icon i,
.widget_bg1 i,
.our_clients i,
.our_gallery i {
    background: #fff;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    width: 33px;
    height: 34px;
    text-align: center;

}

.teams_icon i:hover,
.widget_bg1 i:hover,
.our_clients i:hover,
.our_gallery i:hover {
    background: var(--color_seven);
    color: #000;

}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Top Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

.client_img img {
    background: #fff;
    padding: 10px;
    width: 100%;
    height: 150px;
}


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Testimonials Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

.testimonials_card {
    /* border: 1px solid red; */
    padding: 10px 48px;
    background: #FFFFFF;
    border-radius: 100px 0px 50px;
}

.testimonials_card img {
    width: 59px;
    margin-bottom: 13px;
}

.testimonials_card p {
    font-size: 14px;
}

.testimonials_title {
    background: #002262;
    border-radius: 20px 0px;
    width: 200px;
    margin-left: 35px;
    margin-top: -12px;
    color: #fff;
    padding: 10px;
}

.testimonials_title:hover .des,
.testimonials_title:hover .name,
.testimonials_title:hover {
    background-color: var(--color_two);
    color: var(--color_one) !important;
}

.testimonials_title .test_img img {
    /* background: red; */
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.testimonials_title .name {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
}

.testimonials_title .des {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #FFFFFF;
    /* or 171% */



}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Course Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.course_img img {
    border-radius: 50px 0px;
}

.course_detils {
    position: relative;
    background: #FFFFFF;
    border-radius: 50px 0px;
    margin-top: -55px;
    padding: 24px;
}

.course_detils h2 a {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    /* line-height: 24px; */
    color: #002262;
}

.course_detils strong {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #002262;
}

.course_detils p {
    margin-bottom: 0px;
    font-size: 13px;
}

.courses_items .btn_course {
    background: #002262;
    color: #fff;
    font-weight: bold;
}

.courses_items .btn_course:hover {
    background: #f2d94d;
    color: #002262;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Instructors Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

.team_name {
    text-align: center;
    width: 287.78px;
    position: relative;
    margin-top: -47px;
    height: 60px;
    margin-left: 55px;
    width: 204px;
    padding: 9px;
    background: #FFF;
    border-radius: 20px 0px;
}

.team_name:hover h3,
.team_name:hover {
    background-color: var(--color_two);
    color: var(--color_one);

}


.team_name h3 {
    color: #002b65;
    font-size: 14px;
    font-weight: bold;
}

.team_name p {
    font-size: 12px;
}


.team_img img {
    border-radius: 20px 0px;
    /* height: 400px; */
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Profile Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.social-icons a i {
    background: var(--color_ten);
    padding: 10px;
    border-radius: 50%;
    width: 40px;
    color: var(--color_one);
    text-align: center;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Top Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.Shopping Area<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

.shoping_order {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> section <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* sidebar section  */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> section <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

.widget_bg1 {
    background-color: var(--color_two);
    border-radius: 10px;
    padding: 20px 20px 35px;
}

.widget_bg1 a {
    color: var(--color_one);
}


.widget_bg {
    background-color: #B6C5DE;
    border-radius: 10px;
    padding: 20px 20px 20px;
}

.sidevar .widget_bg1 h4,
.sidevar .widget_bg h4 {
    font-size: 14px;
    font-weight: 900;
    line-height: 23px;
    background-color: var(--color_one);
    color: var(--color_two);
    padding: 13.5px 15px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 20px;
}


.text_side p {
    margin-bottom: 0px !important;
    color: var(--color_one);
}

.sidevar .team_name {
    margin-left: 24px;
}

.sidebar_icon .icon i {
    background: #fff;
    color: var(--color_one);
    font-size: 35px;
    height: 63px;
    text-align: center;
    width: 63px;
    border-radius: 50%;
}

.sidebar_icon .title {
    margin-top: 10px;
}

.btn_sidebar a {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: #082b1d;
}

.btn_sidebar {
    background-color: var(--color_four);
    text-align: center;
    padding: 10px;
    border-radius: 0px 0px 10px 10px;

}

.dr_name h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: var(--color_one);
    margin-bottom: 4px;
    margin-top: 20px;
}

.dr_name p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #777;
}

.img img {
    border-radius: 10px 10px 0px 0px;
}

.btn_sub {
    color: var(--color_ten);
    background: #002262;
    border-radius: 10px;

}

.btn_sub:hover {
    background: var(--color_two);
    color: var(--color_one);
}



.m_auto {
    margin-top: 32px !important;
}



@media (max-width: 767.98px) {
    .logo_area .login_icon {
        right: 20px;
        top: -100px;
        position: absolute;
    }

    .m_auto {
        margin-top: 0px !important;
    }


    .certificates img {
        gap: 10px;
        display: grid !important;
        width: 30%;
    }
    .footer_area{
        padding: 0px;
    }
.subscribe .footer_title {
    font-size: 29px;
}

.info-box{
        background-color: #002b65;
        color: white;
        border-radius: 10px;
        padding: 14px 13px;
        text-align: justify;
        height: 90%;
        gap: 19px;
        display: flex;
}
.carousel_caption {
    position: absolute;
    top: 5%;
    right: 1%;
    width: 85%;
    color: #fff;
}
.carousel_caption p{
    font-size: 12px;
    margin-bottom: 1px;
}
.carousel_caption h1 {
    font-size: 18px;
    font-weight: bold;
}
.btn_primary {
    background: var(--color_one);
    color: var(--color_ten);
    font-weight: 600;
    border-radius: 5px;
    padding: 4px 15px;
}

}

































/* ##########################################################
   #                                                        #
   #              DEVELOPED BY: NAYAN                       #
   #              CONTACT: 01621-881846                     #
   #                                                        #
   ########################################################## */