@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');


*,::before,::after{margin: 0; box-sizing: border-box;}
a{ text-decoration: none;}
img{ vertical-align: bottom;}
label{ display: inline-block;}
button{ cursor: pointer;}
iframe{ border: none;}
html{ scroll-behavior: smooth;}

body{ 
    font-family: 'El Messiri', sans-serif;
}
body p{ font-family: 'Noto Sans JP', sans-serif;}

.container{
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
    /* border: 1px solid red; */
}

.row{
    display: flex;
    flex-flow: row wrap;
    margin: 0 -15px;
    /* border: 3px solid rgb(128, 128, 128); */
}

.row [class^="col"]{ flex: 1 0 auto; padding: 0 15px;}

.row .col-1{flex-basis: 8.33%; max-width: 8.33%;}    
.row .col-2{flex-basis: 16.66%; max-width: 16.66%;}   
.row .col-3{flex-basis: 25%; max-width: 25%;}
.row .col-4{flex-basis: 33.33%; max-width: 33.33%;} 
.row .col-5{flex-basis: 41.66%; max-width: 41.66%;}
.row .col-6{flex-basis: 50%; max-width: 50%;}
.row .col-7{flex-basis: 58.33%; max-width: 58.33%;}
.row .col-8{flex-basis: 66.66%; max-width: 66.66%;}
.row .col-9{flex-basis: 75%; max-width: 75%;}
.row .col-10{flex-basis: 83.33%; max-width: 83.33%;}
.row .col-11{flex-basis: 91.11%; max-width: 91.11%;}
.row .col-12{flex-basis: 100%; max-width: 100%;}


/* Wrap-1 */
.wrap-1{box-shadow: 0 0 7px rgba(0,0,0,.1); position: sticky; top: 0px; z-index: 500; background: #fff; }
.wrap-1 .col-2 img{height: 5rem; width: 9.4rem;}

.wrap-1 .navtop ul{list-style: none; padding: 0;}
.wrap-1 .navtop > ul{ display: flex; justify-content: center;  align-items: center; position: relative; z-index: 1; height: 5rem;}
.wrap-1 .navtop > ul > li{margin-left: 2rem; padding: 2rem 0;}
.wrap-1 .navtop ul li a{font-weight: bold; color: #141414;}

/* Part -2 */
.wrap-1 .navtop > ul > li > ul{
    display: none;
    margin-top: 1.8rem;
    /* width: 15rem; */
    position: absolute;
    /* padding: 1.5rem; */
    box-shadow: 0 0 7px rgba(0,0,0,.1);
    padding-bottom: 1rem;
    background: #fff;
}
.wrap-1 .navtop > ul > li:hover > ul{
    display: block;
    border-top: 3px solid #990090;;
}
.wrap-1 .navtop > ul > li > ul li{ padding: 0px 20px; width: 15rem;  margin-top: 10px;}
.wrap-1 .navtop > ul > li > ul li a{ display: block; padding: 10px;}
.wrap-1 .navtop > ul > li > ul li a:hover{ background: rgb(230, 229, 229); transition: 1s all ease;}

/* Part 3 */
.wrap-1 .navtop > ul > li > ul li{
    display: block;
    position: relative;
}
.wrap-1 .navtop > ul > li > ul > li > ul{
    display: none;
    position: absolute;
    left: 100%;
    top: -2px;
    border-top: 3px solid #990090;
    background: #fff;
}
.wrap-1 .navtop > ul > li > ul > li > ul li{
     width: 100%; padding: 10px; margin-bottom: 12px; /* border: 1px solid red; */ margin-top: -1rem;
}
.wrap-1 .navtop > ul > li > ul > li > ul li a{ padding: 0.4rem 5px; /* border: 1px solid yellow; */}
.wrap-1 .navtop > ul > li > ul > li:hover ul{
    display: block;
    width: 15rem;
    position: absolute;
    padding: 1.5rem;
    box-shadow: 0 0 7px rgba(0,0,0,.1);
}
/* .wrap-1 .navtop .bx i{ display: block;} */
/* .wrap-1 .navtop .bx{ display: flex; justify-content: space-between; border: 1px solid black;} */





.wrap-1 .button_sec{ height: 5rem; display: flex; align-items: center; justify-content: center;}
.wrap-1 .col-2 .button{ line-height: 1rem; background-color: #990090; color: #fff; padding: 13px 20px 12px; border-radius: 5px; max-width: 100%;}

/* DropArraw */
.wrap-1 .col-8 .arrow{border: solid #141414; border-width: 0 2px 2px 0; display: inline-block; padding: 2.5px; margin-left: 6px;}
.wrap-1 .col-8 .down { transform: rotate(45deg);-webkit-transform: rotate(45deg);}


/* Responsive Nav */
.wrap-1 .col-2 i{font-size: 2rem; display: none; color: #990090;}

.wrap-1 .navbar{
    border-top: 3px solid #990090; display: none; background: #fff; position: absolute; box-shadow: 0 2px 5px rgba(0,0,0,.1); z-index: 3; padding: 1.5rem 2.5rem;}
.navbar.active{ display: block; top: 5rem; left: 3rem; right: 3rem; }
.navbar > ul{ list-style: none; padding: 0;}
.navbar li{ margin-top: 0.5rem;}
/* .navbar a:hover ul li{ background: rgb(230, 229, 229);} */
.navbar ul li a{ color: #141414; font-weight: 700; font-size: 14px; display: block; padding: 0.5rem;}
.navbar ul li a:hover{ background: rgb(230, 229, 229);}
.navbar ul li > ul{ list-style: none;}





/* Wrap-2 */
.wrap-2{ padding: 6rem 0;}
.wrap-2 .col-6 h1{font-weight: 700;font-size: 35px; margin-top: 3rem;}
.wrap-2 .col-6 p{ padding: 1rem 0 2rem 0; line-height: 1.8rem; font-weight: 500;}
.btn{ color: #FFFFFF; padding: 0.8rem 1.2rem; border-width: 0px; border-radius: 5px; font-size: 17px; font-weight: 700; background-color: #990090;}

/* Wrap-3 */
.wrap-3{ background: url(../img/Wrap-3_bg.svg) no-repeat center center/cover; background-color: #000; padding: 5rem 0;}
.wrap-3 .col-4{ color: #fff;}
.wrap-3 .col-4 .box{ padding-left: 10%;}
.wrap-3 .col-4 .title{ display: flex; }
.wrap-3 .col-4 .title h2{ margin-left: 1rem;}
.wrap-3 .col-4 .detail{ width: 18rem; margin-top: 2rem; line-height: 1.8rem;}
.wrap-3 .col-4 .end{ width: 20rem;}

/* Wrap-4 */
.wrap-4{ background: url(../img/Wrap-4_bg.svg) no-repeat center center/cover; padding: 6rem 0; }
.com.col-12{ text-align: center;}
.com.col-12 h4{color: #DCA200; font-family: 'Noto Sans JP', sans-serif; font-weight: bold; font-size: 1.1rem;}
.com.col-12 .heading{ display: flex;justify-content: center; align-items: center; margin: 1rem 0; color: #990090; font-size: 18px;}

.wrap-4 .col-3 .icon_box{ text-align: center; margin-top: 2rem;}
.wrap-4 .col-3 .icon_box img{ height: auto;}
.wrap-4 .col-3 .icon_box h2{ font-size: 1.6rem; margin-top: 1rem;}
.wrap-4 .col-3 .icon_box p{ margin-top: 0.4rem; font-weight: 600;}

.wrap-4 .col-6 .img_box{ text-align: center;}
.wrap-4 .col-6 .img_box img{ width: 25rem;}

/* Wrap-5 */
.wrap-5{ background: url(../img/Wrap-5_bg.svg)no-repeat center center/cover; padding: 6rem 0;}

.wrap-5 .col-6 img{ width: 35rem;}
.wrap-5 .col-6 h1{ color: #990090; font-size: 2.2rem;}
.wrap-5 .col-6 p{ font-weight: 600; margin-bottom: 5rem; line-height: 2rem;}

/* Wrap-6 */
.wrap-6{ padding: 5rem 0;}
.wrap-6 .row{ background: url(../img/Wrap-6_bg.jpg); padding: 3.5rem 2.5rem; width: auto; border-radius: 1rem; align-items: center;}
.wrap-6 .row h2{font-weight: 700; font-size: 35px; color: #FFFFFF;line-height: 1.4em; text-align: left;}
.wrap-6 .row p{ color: #fff; font-size: 1rem; margin-top: 0.5rem;}

.wrap-6 .col-3 a{ display: inline-block; color:#50336D; background: #fff; padding: 0.8rem; border-radius: 5px; width: auto; letter-spacing: 1px; font-weight: 800;}

/* Wrap-7 */
.wrap-7{ background: url(../img/Wrap-7_bg.jpg)no-repeat center center/cover; padding: 6rem 0;}
/* Share common code with wrap-4 */
.wrap-7 .col-12 p{ font-weight: bold; line-height: 3rem; margin-bottom: 2rem;}

/* .wrap-7 .col-4{ border: 1px solid black;} */
/* common .contain in wrap-7 and wrap-10 */
.contain .box{ border-radius: 10px; overflow: hidden; height: 400px; box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.17);}
.contain .box .img_box{ text-align: center; overflow: hidden; height: 21rem;}
.contain .box .img_box img{ width: 380px;} 
.contain .box h3{font-weight: 700; font-size: 22px; color: #990090; line-height: 1.4em; text-align: center; padding: 1rem; background: #fff;}

.wrap-7 .col-12 .img_card{ justify-content: center; margin-top: 2rem;}
.wrap-7 .button{ text-align: center; margin-top: 4rem;}

/* Wrap-8 */
.wrap-8{ background: #000; padding: 6rem 0; color: #fff; font-family: 'Cinzel', serif; line-height: 1em; font-weight: 500; font-size: 10px;}
.wrap-8 .col-12 h1{ font-size: 1.7rem;}
.wrap-8 .col-12 p{ margin-top: 3rem; font-size: 0.9rem; line-height: 1.5rem; font-weight: 300;}
.explore_btn{margin-top: 5rem; text-align: center; }
.explore_btn a{color: #50336D; border-width: 0px;
 border-radius: 5px; letter-spacing: 2px; font-size: 19px; font-weight: 700; background-color: #FFFFFF; font-family: 'El Messiri',Helvetica,Arial,Lucida,sans-serif; padding: 0.8rem; margin-top: 2rem;}
.explore_btn a:hover{box-shadow: 0px 2px 18px 0px #fff;}

/* Wrap-9 */
.wrap-9{ padding: 5rem 0;}
.wrap-9 .row{  background-image: linear-gradient(180deg,#dbbe6f 0%,#993b8f 100%),url(../img/Wrap-6_bg.jpg); padding: 3.5rem 2.5rem; width: auto; border-radius: 1rem; align-items: center;}
.wrap-9 .col-7 h1{ color: #fff; font-size: 2.1rem;}
.wrap-9 .col-7 p{ color: #fff; font-size: 16px}
.wrap-9 .explore_btn{ margin-top: 0; letter-spacing: 1px; text-transform: uppercase;}
.wrap-9 .explore_btn a{ padding: 0.rem 3rem;}

/* Wrap-10 */
/* .wrap-10{ padding: 5rem 0;} */
.wrap-10 .col-4 .box{ text-align: center; height: 500px;}
.wrap-10 .col-4 .detail{ padding: 0rem 1rem;}
.wrap-10 .col-4 .detail h4{ color: #dca200; font-size: 1rem;}
.wrap-10 .col-4 .detail h2{ font-weight: bold;}
.wrap-10 .col-4 .detail .date{ font-size: 14px; font-weight: bolder; margin-top: 0.5rem;}
.wrap-10 .col-4 .detail .info{ font-size: 15px; font-weight: 500; margin-top: 1rem;}

.wrap-10 .col-12{text-align: center; padding: 2.5rem 0;}
.wrap-10 .col-12 .video{ margin-top: 5rem;}

/* Wrap-11 */
.wrap-11{ padding: 5rem 0; background: #141414;}
.wrap-11 .col-4 .exp img{ width: 13rem;}
.wrap-11 .col-4 .exp p{ color: #fff; margin-top: 1.5rem; font-weight: 200; font-size: 15px; line-height: 1.5rem;}
.wrap-11 .terms1 h2{ color: #DCA200; font-size: 1.8rem;}
.wrap-11 .terms1 ul{ list-style: none; padding: 0;}
.wrap-11 .terms1 ul li{ margin-top: 1rem;}
.wrap-11 .terms1 ul li a{ color: #fff; font-size: 1.1rem; font-weight: 200;}
.wrap-11 .col-2 .terms2{ margin-top: 3.8rem;}
.wrap-11 .col-4 p{ color: #fff; margin-top: 1rem; font-size: 1rem; line-height: 1.8rem;}
.wrap-11 .col-4 p i{ font-size: 2rem; vertical-align: middle; margin-right: 1rem; color: #DCA200;}

/* Wrap-12 */
.wrap-12{ background: #990090; padding: 10px 0;}
.wrap-12 .col-6 p{ color: #fff; font-size: 15px;}
.wrap-12 .col-6 .icons{ text-align: end;}
.wrap-12 .col-6 .icons i{ margin: 0px 10px; font-size: 1.3rem; color: #fff;} 



/* Responsive Layout */
@media screen and (max-width:1200px){
    .row .col-l-10{flex-basis: 83.33%; max-width: 83.33%;}
    .row .col-l-12{flex-basis: 100%; max-width: 100%;}

/* Wrap-1 */
    .wrap-1 .col-8{ display: none;}
    .wrap-1 .col-2 .button{ display: none;}
    .wrap-1 .col-2 i{ display: block;}

/* Wrap-2 */
    .wrap-2 .col-6 img{ width: 25rem; margin-top: 2rem;}

/* Wrap-3 */
.wrap-3 .col-4 .box{ padding-left: 0;}

/* Wrap-6 */
.wrap-6 .row{ padding:2.8rem;}

}

@media screen and (max-width:1000px){
    /* Wrap-6 */
    .wrap-6 .row{ padding:2.5rem;}
}

@media screen and (max-width:980px){
    .row .col-lp-12{flex-basis: 100%; max-width: 100%;}
    .row .col-lp-5{flex-basis: 41.66%; max-width: 41.66%;}
    .row .col-lp-7{flex-basis: 58.33%; max-width: 58.33%;}
    .row .col-lp-6{flex-basis: 50%; max-width: 50%;}

/* Wrap-1 */
    .wrap-1{position: static; overflow: hidden; z-index: 1000;}

/* Wrap-2 */
    .wrap-2 .col-6{ text-align: center;}
    .wrap-2 .col-6 h1{ margin-top: 0rem;}
    .wrap-2 .col-6 img{ width: 35rem; margin-top: 2rem;}

/* Wrap-3 */
    .wrap-3 .col-4{ padding: 0rem 4rem;}
    .wrap-3 .col-4 .detail{ width: 100%;}
    .wrap-3 .box{ margin-top: 3rem;}

/* Wrap-4 */
    .wrap-4{ height: 100%;}
    .wrap-4 .col-6 .img_box img{ margin-top: 2rem;}

/* Wrap-5 */
    .wrap-5 .col-6{ text-align: center;}
    .wrap-5 .col-6 img{ margin-bottom: 2rem;}

/* Wrap-6 */
    .wrap-6 .row p{ margin-bottom: 1rem;}

/* Wrap-7 */
    .wrap-7 .col-4{ margin-top: 1rem;}

/* Wrap-9 */
    .wrap-9 .row{ text-align: center;}
    .wrap-9 .col-7 p{ margin-bottom: 2rem;}

/* Wrap-10 */
    .wrap-10 .col-4{ margin-top: 1rem;}

/* Wrap-11 */
    .wrap-11 .col-4 .exp p{ margin-bottom: 2rem;}
    .wrap-11 .col-2 .terms2{margin-top: 2rem; margin-bottom: 2rem;}

/* Wrap-12 */
.wrap-12 .col-6 .icons{ text-align: start; margin-top: 1.5rem;}
.wrap-12 .col-6 .icons i{ margin-left: 0rem;}
}

@media screen and (max-width:767px){
    .row .col-p-6{flex-basis: 50%; max-width: 50%;}

    /* Wrap-2 */
    .wrap-2 .col-6 img{ width: 28rem; }

    /* Wrap-5 */
    .wrap-5 .col-6 img{ width: 28rem;}

    /* Wrap-6 */
    .wrap-6 .row{ padding:2.5rem;}

    /* Responsive Nav */
    /* .navbar.active{
        left: 3rem;
    } */
}

@media screen and (max-width:580px){
    /* Wrap-6 */
    .wrap-6 .row{background: #593e75;}
    .wrap-6 .row .col-pp-12{flex-basis: 100%; max-width: 100%; text-align: center;}
    .wrap-6 .row .btn_box{ margin-bottom: 1rem;}

    /* Wrap-10 */
    .wrap-10 .col-12 .video iframe{ width: 25rem;}
}

@media screen and (max-width:460px){
    /* Wrap-2 */
    .wrap-2 .col-6 img{ width: 15rem; }

    /* Wrap-4 */
    .wrap-4 .col-6 .img_box img{ width: 12rem;}

    /* Wrap-5 */
    .wrap-5 .col-6 img{ width: 15rem;}

    /* Wrap-8 */
    .wrap-8 .col-12 h1{ line-height: 2rem;}

    /* Wrap-10 */
    .wrap-10 .col-4 .box{height: 550px;}
    .wrap-10 .col-12 .video iframe{ width: 15rem;}

    /* Responsive Nav */
    /* .navbar.active{
        left: 2rem;
    } */

}




/* Note .contain{ wrap-7 or wrap-10 me share ho rahe hai}; */