@charset "utf-8";
/* CSS Document */

/******* Fonts Face CSS Start **********/
/********* Fonts Face CSS End **********/

/* color pallate  */
:root {
    --primary-color : #8F083F;
    --secondary-color: #F7E4EA;
    --light-color: #ffffff;
}


/******* Common Element CSS Start ******/
*							{ margin: 0px; padding: 0px;}
body						{ font-family: Calibri; font-size:16px; line-height: 20px; }
.clear						{ clear:both;}
img							{ border: 0px;}
ul,ol						{ list-style: none; padding: 0; margin: 0px  }
a							{ text-decoration: none; outline: none; color: #fff; transition-duration: 0.4s; }
a:focus, a:active,a:visited	{ outline: none; border: 0px; transition-duration: 0.4s; }
.form-check-input:focus { box-shadow: none;}
h1							{}
h2							{  }
h3							{ font-size: 21px; line-height: 31px; font-weight: 700; word-wrap: break-word; }
h4							{}
.h3-big                     { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700;}
p							{}
.custom-container           { width: 95%; margin: 0 auto; }
.common-padding             { padding: 10px 25px; }
.dark-grey                  { background-color: #dadada; }
.light-grey                 { background-color: #f1f1f1; }
button                      {  font-size: 22px; line-height: 25px; }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #000; opacity: 1; /* Firefox */ }
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #000; }
  
::-ms-input-placeholder { /* Microsoft Edge */ color: #000; }
/******* Common Element CSS End *********/

.box-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; overflow: hidden; }
.box-image { position: absolute;  opacity: 0.05; }
.box-image > .layer  { aspect-ratio: 1; border-radius: 50%; width: 110px; overflow: hidden; }
.box-image .xl-image { width: 200px;} 
.box-image img { max-width: 100%;}
.left-top { top: 0%; left: 0%;} 
.right-bottom { top: 77%; right: 5%; transform: translateX(50%);} 


/******* Home page Banner section CSS Start *******/
.banner-wrap                    { min-height: 100vh; padding-block: 30px; background-color: #fffcfc; position: relative; }
.banner-wrap .container         { z-index: 2; position: relative;}
.banner-header                  { margin-bottom: 30px; padding: 30px 12px 30px; border-radius: 15px; background-color: var(--primary-color); }
.banner-header h2.custom-container { margin: 0 auto 30px; color: var(--light-color); }
/* .banner-slider                  { width: 95%; margin: 0px auto; } */
/* .banner-slider .slick-list      { max-width: 95%; } */

.banner-slider .slick-slide>div { margin-inline: 12px; }
.slick-slide.slick-current>div { margin-left: 0; }
.banner-slider img              { max-height: 100%; max-width: 100%; width: auto !important; height: auto !important;  vertical-align: middle; padding-right: 15px; }
button.slick-prev.slick-arrow,button.slick-prev.slick-arrow:before   { display: none !important ; }

button.custom-slick-prev.slick-arrow   { position: absolute; right: 100%; top: 50%; bottom: initial; margin: auto 0; border: none; height: 100%; transform: translateY(-50%) scaleX(-1); width: 40px; text-align: center; background: transparent; color: var(--light-color); overflow: hidden; }
button.slick-next.slick-arrow   { position: absolute; left: 100%; top: 50%; bottom: initial; margin: auto 0; border: none; height: 100%; transform: translateY(-50%); width: 40px; text-align: center; background: transparent; color: var(--light-color);  overflow: hidden; }

.banner-body                    { display: flex; flex-direction: column; overflow: hidden;}
.banner-body .tab-content       { flex-grow: 1; }
.banner-links                   { padding: 12px; background: var(--primary-color); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04); border: none; border-radius: 15px 15px 0px 0px; }
.banner-links ul                { max-width: 95% !important; margin: 0 auto; justify-content: space-between; }
.banner-links ul.nav > li       { 
    /* flex-basis: 25%; */
  }

/* .banner-links                   { background: #DADADA; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04); border: none; border-radius: 15px 15px 0px 0px; } */
.banner-links ul.nav > li > button      { margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; text-transform: uppercase; font-size: 18px; line-height: 26px; font-weight: 700; color: #000000;  outline: none; }
.banner-links ul.nav > li > button img  { margin-right: 6px; width: 20px; height: auto; filter: brightness(0) invert(1); }
.banner-wrap .nav-tabs .nav-link.active,.banner-wrap  .nav-tabs .nav-item.show .nav-link { border:none; background-color: unset; opacity: 1; transition-duration: 0.5s; outline: none }
.banner-wrap .nav-tabs .nav-link:focus,.banner-wrap .nav-tabs .nav-link:visited { border: none; outline: none; }
.banner-wrap .nav-tabs .nav-link { border: transparent; color: var(--light-color); text-transform: capitalize; }
.banner-wrap .nav-tabs .nav-link.active,.banner-wrap .nav-tabs .nav-link:hover  { border-bottom: 2px solid var(--light-color); color: var(--light-color); }
/******* Banner section CSS End *********/


/* Pagination  */
.pagination-box                 { padding: 10px 0px; }
.pagination-box li              { display: inline-flex; }
.pagination-box li              { margin-right: 10px;  }
.pagination-box li:not(:first-child) img { margin-right: 10px; filter: brightness(0) invert(1); }
.pagination-box li a            { display: inline-block; color: var(--light-color);  transition-duration: 0.4s; }
.pagination-box li a:hover,.pagination-box li a.active      { color: var( --secondary-color); transition-duration: 0.4s; }
.pagination-box li a.active span                            { text-decoration: underline; }
.pagination-box li:nth-child(3) { margin-right: 10px !important; }


/* home tab css starts */
.search-wrap                    { background: var(--light-color); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04); border-radius: 5px; }
.search-wrap button             { outline: none; border: none; background-color: transparent; font-size: 16px; line-height: 18px; }
.search-wrap button img         { width: 20px; }
.tab-content                    { min-height: 685px; background-color: var(--secondary-color); padding: 15px 12px; }
.search-wrap input              { margin-left: 6px; width: calc(100% - 31px); background: transparent; border: none; outline: none; }
.search-wrap input::placeholder { opacity: 0.5; }
.search-wrap input > div        { color: #000; }
.tab-content .list-wrap         { margin-top: 30px; }
.list-wrap li                   { margin-bottom: 15px; background: var(--light-color); border: 0.3px solid var(--primary-color); border-radius: 5px;  transition-duration: 0.4s; }
.list-wrap li a,
.list-wrap li .wrap-block       { display: flex; color: #000; justify-content: space-between; align-items: center; }
.list-wrap li a img             { width: 10px; }
.list-wrap li:hover             { background: rgba(251, 233, 239, 0.3); }
.list-wrap.no-hover li:hover    { background: var(--light-color); transition-duration: 0s; }

.graphic-wrap    { margin-bottom: 15px; background: var(--light-color); border: 0.3px solid var(--primary-color); border-radius: 5px;  transition-duration: 0.4s; }

.content-wrap    { background: var(--light-color); padding: 15px; border: 0.3px solid grey; border-radius: 5px; }

/* trial tool css starts */
.age-wrap h3:first-of-type      { color: var(--primary-color);}
.age-wrap form                  { padding: 0px 0px 0px 25px; justify-content: space-between; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04); border-radius: 5px;  }
.age-wrap input                 { margin-left: 0px; font-size: 20px; line-height: 35px; width: 75%; background: transparent; border: none; outline: none; }
.age-wrap input::placeholder    { opacity: 0.5;}
.age-wrap button,
.common-btn                     { color: #fff; transition-duration: 0.5s; padding: 15px 25px; background: var(--primary-color); border-radius: 5px; font-size: 18px; line-height: 20px; border: 1px solid var(--primary-color); }
.age-wrap button:hover,
.common-btn:hover               { background: var(--secondary-color); color: var(--primary-color);box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-color: var(--primary-color); }
.trial-tool .form-check-input:checked[type=radio],.trial-tool .form-check-input[type=radio] { border-color: var(--secondary-color); border-radius: 50%;padding: 10px; }
.trial-tool .form-check-input:checked[type=radio]    { background-color: var(--primary-color); }
.trial-tool .form-check-input[type=radio]            { background-color: #f0e8e8;  border: 1px solid var(--primary-color); cursor: pointer; position: relative;}
.no-border .list-wrap li:first-child                    { border: none; padding: 6px; pointer-events: none ; }
.no-border .list-wrap li:first-child h3                 { margin: 0; font-weight: 500; }

/* first-line css starts */
.user-input-data ul li                  { margin-bottom: 0px; } 
.user-input-data ul li.dark-grey        { border: 1px solid #dadada; }
.first-line-list li                     { border-radius: 0;}
.first-line-list li:hover               { background: white;}
.first-line-list li:hover a             { color: var(--primary-color);}

/* guidline css starts */
.guidline-page .list-wrap li.active     { font-weight: 700; }



/* score-result  */
.score-board { margin-bottom: 24px; background: var(--light-color); border-radius: 18px; padding: 8px 14px; display: flex; align-items: center; gap: 16px; }
.score-board p:first-of-type,.score-detail p:first-of-type { margin: 0; }
.score-board p { font-size: 20px; line-height: 28px; color: var(--primary-color);}
.score-detail { position: relative; margin-bottom: 18px; display: flex; align-items: center; gap: 16px; }
.score-detail::after { position: absolute; content: ''; width: 100%; height: 2px; border-radius: 4px; background: var(--primary-color); left: 0; bottom: -4px; }
.score-detail-des { flex-direction: column; align-items: unset; gap: 10px;}

/* Eduction module css starts */
.edu-list li                            { border-radius: 4px; }
.edu-list.list-wrap li a                { justify-content: flex-start; align-items: unset; }
.edu-list.list-wrap li a .edu-details   { margin-left: 25px; display: flex; flex-direction: column; justify-content: space-between; }
.edu-list.list-wrap li a img            { max-width: 160px; min-width: 150px; width: auto; }
.edu-list.list-wrap li a p              { margin-bottom: 0px; } 
.edu-list.list-wrap .edu-title          { max-width: 100%; }
.edu-list.list-wrap .edu-detail         { font-weight: 400; }
.edu-list.list-wrap .edu-title , .graphic-title { font-weight: 700;    }
.video-box                              { padding: 35px 50px;  }
.graphic-title                            { margin-top: 15px; font-size: 22px; }

.option .form-check-input:checked[type=checkbox],.option .form-check-input[type=checkbox] { border-radius: 4px;padding: 10px; }
.option .form-check-input:checked[type=checkbox]    { background-color: var(--primary-color); }
.option .form-check-input[type=checkbox]            { background-color: #f0e8e8;  border: 1px solid var(--primary-color); cursor: pointer;}

/* media queries start */
@media(min-width:1024px) and (max-width:1199px){
    .custom-container { width: 90%; } 
}

@media(min-width:1200px) and (max-width:1399px){
    .custom-container { width: 90%; } 
}

@media (min-width: 576px) and (max-width: 767px) {
    .h3-big                                     { font-size: 20px; line-height: 28px; }
    button.slick-next.slick-arrow               { left: 98%;}
    button.custom-slick-prev.slick-arrow        { right: 98%;}
    .age-wrap input                             { width: 65%;}
    .age-wrap button, .common-btn               { padding: 12px 20px;}
    .country-content                            { min-width: unset; flex-grow: 1;}
    /* contact-page  */
    .contact-block>div:nth-child(n+2)           { margin-top: 20px;} 

    .score-board p, .score-detail p             { font-size: 18px; line-height: 26px;}
}
@media (max-width: 575px) {
    .h3-big                                     { font-size: 20px; line-height: 28px; }
    button.slick-next.slick-arrow               { left: 95%;}
    button.custom-slick-prev.slick-arrow        { right: 97%;}
    .age-wrap form                              { flex-direction: column; gap: 8px; background: transparent !important; padding: 0; box-shadow: none; }
    .age-wrap input                             { width: 100%; background: white; padding: 8px 12px; border-radius: 8px; }
    .age-wrap button                            { padding: 10px 16px; width: fit-content; }
    .country-content                            { min-width: unset; flex-grow: 1;}
    .country-content .jcf-select                { width: unset;}
    /* contact-page  */
    .contact-block>div:nth-child(n+2)           { margin-top: 20px;}
    .common-input                               { width: 100%; }    

    .score-board p, .score-detail p             { font-size: 16px; line-height: 24px;}
 }