@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



body {

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    color: #2a3a41;

}



h1,

h2,

h3,

h4 {

    font-family: 'Poppins', sans-serif;

}





/* steps */

.thankyou_data {

    text-align: center;

    padding: 50px;

}



.thankyou_data h2 {

    font-size: 50px;

    font-weight: 700;

    color: #212121;

    margin-top: 100px;

}



.thankyou_data p {

    font-size: 18px;

    color: #212121;

    margin-bottom: 5%;

}



.thank_click:hover {

    color: white;

    text-decoration: none;

}



.thank_click {

    background: #ffaa00;

    padding: 9px;

    font-size: 13px;

    color: white;

    border-radius: 5px;

}



/* animation css */

.animate-me {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}



.in-view {

    opacity: 1;

    transform: translateY(0);

}



.animate-me-two {

    opacity: 0;

    transform: translateX(20px);

    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}



.in-view-two {

    opacity: 1;

    transform: translateX(0);

}



.animate-me-three {

    opacity: 0;

    transform: translateX(-20px);

    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}



.in-view-three {

    opacity: 1;

    transform: translateX(0);

}



/* animation css */



/* header */

.logo_img a img {

    width: 85%;

    margin-top: 20px;

}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

.head_menu {

    float: right;

    margin-top: 4px;

}



.nav-item.active a {

  background: none !important;

    transform: scale(1.3);

    color: #FFAA00 !important;

}





/* .head_menu li a span :hover {

    color: #FFAA00 !important; 

    border-radius: 5px; 

} */







.menuArea {

    padding: 20px 0px;

    background-color: #1E1E1E;

    position: fixed;

    z-index: 1000;

    top: 0;

    width: 100%;

    height: 100px; /* Add this if you know the height of the navbar */

}



.header_btn:hover {

    background: #FFAA00;

    color: white;

    border-color: #FFAA00;

}



.head_menu li a:hover{

    background: none !important;

    /* transform: scale(1.3); */

    /* color: #FFAA00  !important; */

}





/* ---------------------------------- Muhammad Haseeb ---------------------------------- */



.head_menu li a span {

    display: inline-block;

    color: white;

    font-weight: 500;

    padding: 5px 10px; 

    font-size: 15px; 

    transition: transform 0.3s ease; 

}





/* .head_menu li a span {

    color: white;

    font-weight: 500;

    padding: 10px 20px;

    font-size: 15px !important;

    transition: all 0.5s ease-out;

} */



.head_menu li a span:hover {

    transform: scale(1.1);

    color: #FFAA00 ;

    border-radius: 40%;

    

}



/* --------------------------------------------------------------------------------------------------------------------------------------- */





























































/* -------------------------------------------------------------------------------------------- */

.header_btn {

    background: transparent;

    border-radius: 50px;

    border-color: #FFAA00;

    font-size: 14px;

    color: #FFAA00;

    font-weight: 400;

    margin: 0% 0;

}



/* header */

/* Right side sliding navbar for web*/

.sidepanelweb {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 0;

    right: 0;

    background-color: #111;

    overflow-x: hidden;

    transition: 0.5s;

    padding-top: 60px;

}



.sidepanelweb a {

    padding: 10px 15px;

    text-decoration: none;

    font-size: 18px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.sidepanelweb a:hover {

    color: #f1f1f1;

}



.sidepanelweb .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

}



.openbtnweb {

    font-size: 25px;

    cursor: pointer;

    background-color: #1e1e1e;

    color: white;

    padding: 8px 15px;

    border: none;

}



/* Right side sliding navbar for web*/

/* Right side sliding navbar for Mob*/

.sidepanel {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 0;

    right: 0;

    background-color: #111;

    overflow-x: hidden;

    transition: 0.5s;

    padding-top: 60px;

}



.sidepanel a {

    padding: 10px 15px;

    text-decoration: none;

    font-size: 18px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.sidepanel a:hover {

    color: #f1f1f1;

}



.sidepanel .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

}



.openbtn {

    font-size: 25px;

    cursor: pointer;

    background-color: #1e1e1e;

    color: white;

    padding: 8px 15px;

    border: none;

}



/* Right side sliding navbar for Mob*/



.how_area_text {

    margin-left: -55px;

}



.main_banner {

    display: none;

}



.testi_slide {

    background-image: url(../images/Group2393.png);

    background-position: inherit;

    background-size: cover;

    background-repeat: no-repeat;

    padding: 130px 0px;

    display: revert !important;

    justify-content: revert !important;

}



.banner_slider_data h2 {

    color: transparent;

    font-size: 50px;

    text-align: right;

    padding-right: 10%;

}



.banner_slider_data p {

    color: transparent;

    font-size: 22px;

    text-align: right;

    padding-right: 10%;

}



.banner_slider {

    background: #1e1e1e;

}



.services_area {

    background: #1e1e1e;

    padding: 50px 0px 50px 0px;

}



.services_area_head h2 {

    text-align: center;

    color: white;

    margin-bottom: 5%;

}



.services_area_head h2 span {

    color: #ffaa00;

}



.services_box {

    border: 1px solid white;

    border-radius: 50px;

    padding: 30px 30px;

}



.services_box img {

    width: 16%;

    float: right;

}



.services_box h3 {

    color: white;

    font-size: 29px;

    font-weight: 500;

    margin-top: 0px;

    margin-bottom: 17px;

}



.services_box p {

    color: white;

    font-size: 13px;

    margin-bottom: 0px;

    line-height: 22px;

}



.services_box:hover {

    border: 1px solid #ffaa00;

    transition: transform .8s ease;

    transform: scale(1.12);

}



.services_box:hover img {

    filter: brightness(50);

}



.services_box:hover p {

    color: #ffaa00;

}



.services_box:hover h3 {

    color: #ffaa00;

}



.download_area_row {

    background-image: url(../images/Group2395.webp);

    background-position: inherit;

    background-size: cover;

    background-repeat: no-repeat;

    padding: 55px 80px 55px 10px;

    border-radius: 28px;

}



.download_area {

    background: #1e1e1e;

    padding: 50px 0px;

}



.download_area_data img {

    width: 25%;

}



.download_area_data h3 {

    color: #ffaa00;

    font-size: 50px;

    font-weight: 600;

}



.download_area_data p {

    font-size: 14px;

    line-height: 22px;

}



.download_btn {

    background: #ffaa00;

    color: white;

    border-color: #ffaa00;

    width: 28%;

    font-size: 15px;

    margin-top: 3%;

    margin-bottom: 0px;

}



.download_btn:hover {

    background: #ffaa00d9;

    color: white;

    border-color: #ffaa00d9;

}



.deter_box h3 {

    color: white;

    font-size: 25px;

    font-weight: 400;

    text-align: center;

    margin-top: 0px;

    margin-bottom: 17px;

}



.deter_box p {

    color: white;

    font-size: 13px;

    text-align: center;

    margin-bottom: 0px;

    line-height: 22px;

}



.deter_box img {

    width: 16%;

    margin: 0 auto;

    margin-bottom: 5%;

    transition:all 0.3s ease-out;

}



.deter_box img:hover{

    /* background: #FFAA00; */

    transform: scale(1.3);

}



/* ---------------- Muhammad Haseeb ---------------- */

.footer_box ul a li {

    color: white;

    list-style:none;

}



.footer_box ul a  {

    text-decoration: none   ;

}

.footer_box ul a li:hover{

    color: #e6b34d;

    /* border-bottom: 2px solid #ffaa00; */



}

.my:hover{  

    color: #d1bf9c;

    border-bottom: 2px solid #ffaa00;

}



/* ------------------------------------------------ */

.underlane {

    color: white !important;

    border-bottom: 2px solid #ffaa00;

}



.video_area img {

    width: 100%;

    margin: 0 auto;

}



.bookimg_area img {

    width: 100%;

    margin: 0 auto;

}



.bookimg_area h2 {

    text-align: center;

    color: white;

    margin-top: 0px;

}



.bookimg_area h2 span {

    color: #ffaa00;

}



.bookimg_area {

    background: #1e1e1e;

    padding: 50px 0px;

}



.how_area {

    background: #1e1e1e;

    padding: 50px 0px;

}



.how_area_head h2 {

    text-align: center;

    color: white;

    margin-bottom: 5%;

}



.last_line {

    position: relative;

}



.last_line hr {

    position: absolute;

    left: 0;

    top: 50%;

    margin-top: -1px;

    width: 72%;

    border: none;

    border-top: 1px solid #a6a6a6;

}



.last_line p {

    margin-left: 20px;

}



.how_area_head h2 span {

    color: #ffaa00;

}



.blog_area {

    background: #1e1e1e;

    padding: 0px 5px;

}



.blog_data img {

    width: 100%;

    margin: 0 auto;

}



.blog_text {

    background: white;

    padding: 17px;

    border-radius: 0px 0px 25px 25px;

}



.blog_text h4 {

    font-size: 20px;

    margin-top: 1px;

}



.blog_text p {

    font-size: 14px;

    line-height: 20px;

    margin-bottom: 15px;

    margin-top: -3px;

}



.blog_btn {

    background: transparent;

    border-color: transparent;

    color: #ffaa00;

    font-size: 16px;

    text-decoration: underline;

    padding-left: 0px;

}



.blog_btn:hover {

    background: transparent;

    text-decoration: underline;

    border-color: transparent;

    color: #1E1E1E;

}



.big_btn_area {

    background: #1e1e1e;

    padding: 50px 0px;

    text-align: center;

}



.big_btn:hover {

    background: #1e1e1e;

    color: white;

    border-color: #ffaa00;

}



.big_btn {

    background: #ffaa00;

    color: #1e1e1e;

    border-color: #ffaa00;

    width: 28%;

    font-size: 15px;

    margin-top: 3%;

    margin-bottom: 0px;

    font-size: 18px;

    font-weight: 500;

    width: 40%;

    border-radius: 15px;

    padding: 15px;

}



.big_btn span {

    font-size: 12px;

    font-weight: 400;

}



.footer_area {

    background: #1e1e1e;

    padding: 50px 0px 0px 0px;

}



.footer_area_data {

    display: flex;

    justify-content: space-between;

}



.footer_box ul {

    list-style: none;

    padding-left: 0px;

    color: white;

    font-size: 14px;

    margin-top: 25px;

    line-height: 36px;

}



.footer_box img {

    width: 70%;

    margin-top: 15px;

}



.footer_box h5 {

    color: white;

    font-size: 18px;

    margin-bottom: 15%;

    font-weight: 600;

}

.footer_box h5:hover{

    color: #FFAA00;

}



.footer_box ul li {

    font-weight: 400;

}



.footerlogo {

    margin-bottom: 12%;

}



.social {

    margin-top: 45% !important;

}



.last_line p {

    text-align: right;

    color: #a6a6a6;

    font-size: 15px;

    margin-top: 3%;

    margin-bottom: 2%;

}



.how_area_img {

    background: white;

    border-radius: 25px;

    padding: 20px 15px;

}



.how_area_img img {

    width: 50%;

    margin: 0 auto;

    object-fit: contain;

}



/* steps */

.how_area_data {

    display: flex;

}



.how_area_balls h4 {

    background: #FFFFFF;

    color: #1e1e1e;

    font-size: 40px;

    border-radius: 250px;

    height: 70px;

    width: 70px;

    padding: 15px 23px;

    cursor: pointer;

    text-align: center;

    position: relative;

}



.how_area_balls {

    position: relative;

}



.how_area_balls h4 {

    margin: 50px 10px;

    display: inline-block;

}



.how_area_balls h4:not(:last-child)::after {

    content: "";

    position: absolute;

    height: 100px;

    width: 1px;

    background-color: #fff;

    top: 70px;

    right: 35px;

}



.how_area_box h5 {

    font-size: 30px;

    color: white;

    font-weight: 400;

}



.how_area_box p {

    color: white;

    font-size: 13px;

    line-height: 19px;

}



.how_area_box_myy h5{

    font-size: 30px;

    margin-top: 74px;

    color: white;

    font-weight: 400;

}



.how_area_box_myy p{

    color: white;

    font-size: 13px;

    line-height: 19px;

}

#myyy{

    margin-top: 55px;

}



.how_area_box_my h5{

    font-size: 30px;

    color: white;

    font-weight: 400;

}

.how_area_box_my{

    margin-top: 50px;

}



.how_area_box_my p{

    color: white;

    font-size: 13px;

    line-height: 19px;

}





.how_area_box {

    margin-top: 82px;

}



.hidee_aboutt {

    display: none;

}



.numbers.active {

    background: #FFAA00 !important;

    cursor: pointer;

    transition: transform .8s ease;

    transform: scale(1.12);

}



.footerbtn {

    float: right;

}



.foot_social {

    float: right;

    width: 64% !important;

}



a.footerbtn button {

    font-size: 15px;

}



.mobile_menu {

    float: right;

    font-size: 27px;

}



.mobile_nav {

    float: left;

    padding-left: 30px;

}



.footer_box {

    width: -webkit-fill-available;

}



.about_banner img {

    width: 100%;

    margin: 0 auto;

    margin-top: 100px;

}



.about_text_area {

    background: #1e1e1e;

    padding: 50px 5px;

    color: white;

}



.about_vision_area {

    background: #1e1e1e;

    padding: 50px 5px;

    color: white;

}



.about_vision_area {

    background: #1e1e1e;

    padding: 50px 5px;

    color: white;

}



.about_text h2 {

    color: white;

    margin-bottom: 2%;

}



.about_text h2 span {

    color: #ffaa00;

}



.hand_data h2 {

    color: white;

    margin-bottom: 3%;

}



.hand_data h2 span {

    color: #ffaa00;

}



.about_text p {

    color: white;

    font-size: 13px;

    margin-bottom: 2%;

    line-height: 22px;

}



.aboutvision_text p {

    color: white;

    font-size: 13px;

    margin-bottom: 2%;

    line-height: 22px;

}



.aboutvision_text h2 {

    color: white;

    margin-bottom: 2%;

    margin-top: 10%;

}



.aboutvision_text h2 span {

    color: #ffaa00;

}



.aboutvision_img img {

    width: 100%;

    margin: 0 auto;

}



.fight_area {

    background: #1e1e1e;

    padding-top: 50px;

}



.continuously_moving {

    height: auto;

    animation: pulse 1s ease-in-out infinite;

}



div#mr_counter {

    display: flex;

    justify-content: space-between;

}



div#counter span {

    font-size: 50px;

    font-weight: 600;

    color: #111;

}



div#counter h5 {

    font-size: 18px;

    color: #111;

    margin-top: 0px;

    font-weight: 400;

}



.ex_counter {

    padding-top: 25px;

    background: #292929;

}



.hand_img img {

    width: 100%;

    position: absolute;

    top: -185px;

    margin: 0 auto;

}



.contact_form_area {

    background: #1e1e1e;

    padding: 50px 5px;

}



.contact_area {

    background: #1e1e1e;

    padding: 50px 5px;

}



.contact_data h4 {

    color: #ffaa00;

    font-size: 17px;

    font-weight: 400;

}



.contact_data p {

    color: white;

    font-size: 13px;

    line-height: 22px;

}



.contact_form h4 {

    color: #ffaa00;

    font-size: 23px;

    margin-bottom: 3%;

    font-weight: 400;

    text-align: center;

}



.contact_form {

    border: 1px solid #ffaa00;

    border-radius: 12px;

    padding: 15px 30px;

}



.contact_form input {

    border-color: #ccc;

    background: transparent;

    height: 42px;

    width: 100%;

    margin-bottom: 3%;

    padding: 15px;

    font-size: 12px;

    color: white;

    border-radius: 8px;

}



.contact_form textarea {

    border: 1px solid #767676 !important;

    background: transparent;

    width: 100%;

    margin-bottom: 3%;

    padding: 15px;

    font-size: 12px;

    resize: none;

    color: white;

    border-radius: 8px;

}



.sub_click_area {

    text-align: center;

    margin-bottom: -30px;

}



button.form_submission:hover {

    background: #ffaa00d6;

    color: white;

    border-color: #ffaa00d6;

}



button.form_submission {

    background: #ffaa00;

    color: black;

    border-color: #ffaa00;

    border: none;

    font-size: 15px;

    padding: 3px 24px;

    border-radius: 100px;

}



.our_service_area {

    background: #1e1e1e;

    padding: 50px 0px;

}



.our_service_text h2 {

    text-align: center;

    color: white;

    margin-bottom: 2%;

}



.our_service_text h2 span {

    color: #ffaa00;

}



.our_service_text p {

    color: white;

    text-align: center;

    font-size: 13px;

    margin-bottom: 2%;

    line-height: 22px;

}



.privacy_area {

    background: #1e1e1e;

    padding: 50px 0px;

    color: white;

    margin-top: 100px ;

}



.privacy_data h4 {

    margin-bottom: 6%;

    font-weight: 400;

}



.privacy_data p {

    color: white;

    font-size: 13px;

    margin-top: 5px;

    line-height: 22px;

}



.privacy_data h5 {

    color: white;

    font-size: 22px;

    font-weight: 400;

    margin-top: 0px;

    margin-bottom: 0px;

}



.faqs_btns {

    text-align: center;

    margin-top: 5%;

    margin-bottom: 6%;

}



.faqs_btns button {

    width: 11%;

    margin: 4px;

    background: transparent;

}



.user:hover {

    background: white !important;

    border-color: #ffaa00 !important;

    color: #ffaa00 !important;

}



.user {

    border-color: #ffaa00 !important;

    color: #ffaa00 !important;

}



.partner:hover {

    background: white !important;

    border-color: #ffaa00 !important;

    color: #ffaa00 !important;

}



.partner {

    border-color: white !important;

    color: white !important;

}



.services_box a {

    text-decoration: none;

}



.hide_diciplines {

    display: none;

}



.faqs_btns .active {

    background-color: #ffaa00 !important;

    color: white !important;

}







.whatsapp-icon {

    position: fixed;

    bottom: 20px;

    /* Adjust this value to change the distance from the bottom */

    right: 20px;

    background: transparent;

    /* Adjust this value to change the distance from the left */

    z-index: 1000;

    /* Ensure the icon appears above other elements */

}



.whatsapp-icon img {

    width: 70px;

    /* Adjust this value to change the size of the icon */

    height: auto;

    background: transparent;

    border-radius: 50%;

    /* Makes the icon round */

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

    /* Optional: Adds a shadow effect */

}





























.my_social a {

    width: 50px;

}



.my_social {

    display: flex;

    align-items: center;

    float: right;

}



.my_social {

    display: flex;

    justify-content: center;

}

.example-2 {

    list-style: none;

    display: flex;

    justify-content: center;

    align-items: center;

}

.example-2 .icon-content {

    margin: 0 2px;

    position: relative;

    padding: 0.4rem;

}

.example-2 .icon-content .tooltip {

    position: absolute;

    top: 100%;

    right: 110%;

    transform: translateY(200%);

    color: #fff;

    padding: 6px 10px;

    border-radius: 5px;

    opacity: 0;

    visibility: hidden;

    font-size: 14px;

    transition: all 0.3s ease;

}

.example-2 .icon-content:hover .tooltip {

    opacity: 1;

}

.example-2 .icon-content a {

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    color: #4d4d4d;

    background-color: #fff;

    transition: all 0.3s ease-in-out;

}

.example-2 .icon-content a svg {

    position: relative;

    z-index: 1;

    width: 25px;

    height: 25px;

}

.example-2 .icon-content a:hover {

    color: white;

}

.example-2 .icon-content a .filled {

    position: absolute;

    top: auto;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 0;

    background-color: #000;

    transition: all 0.3s ease-in-out;

}

.example-2 .icon-content a:hover .filled {

    height: 100%;

}

.example-2 .icon-content a[data-social="linkedin"] .filled,

.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {

    background-color: #0274b3;

}



.example-2 .icon-content a[data-social="facebook"] .filled,

.example-2 .icon-content a[data-social="facebook"] ~ .tooltip {

    /* background-color: #1877F2; */

    background: hsla(214, 40%, 45%, 1);



    background: linear-gradient(29deg, hsla(214, 40%, 45%, 1) 0%, hsla(210, 93%, 47%, 1) 100%);

    

    background: -moz-linear-gradient(29deg, hsla(214, 40%, 45%, 1) 0%, hsla(210, 93%, 47%, 1) 100%);

    

    background: -webkit-linear-gradient(29deg, hsla(214, 40%, 45%, 1) 0%, hsla(210, 93%, 47%, 1) 100%);

    

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#446B9F", endColorstr="#0979E8", GradientType=1 );

}

.example-2 .icon-content a[data-social="tiktok"] .filled,

.example-2 .icon-content a[data-social="tiktok"] ~ .tooltip {

    /* background-color: #FE2C55; */

    /* background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); */

    background: hsla(184, 75%, 55%, 1);



    background: linear-gradient(180deg, hsla(184, 75%, 55%, 1) 0%, hsla(334, 73%, 45%, 1) 100%);

    

    background: -moz-linear-gradient(180deg, hsla(184, 75%, 55%, 1) 0%, hsla(334, 73%, 45%, 1) 100%);

    

    background: -webkit-linear-gradient(180deg, hsla(184, 75%, 55%, 1) 0%, hsla(334, 73%, 45%, 1) 100%);

    

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#35D7E2", endColorstr="#C61F67", GradientType=1 );





}

.example-2 .icon-content a[data-social="X"] .filled,

.example-2 .icon-content a[data-social="X"] ~ .tooltip {

    background: hsla(0, 2%, 12%, 1);



background: linear-gradient(39deg, hsla(0, 2%, 12%, 1) 45%, hsla(0, 0%, 60%, 1) 100%);



background: -moz-linear-gradient(39deg, hsla(0, 2%, 12%, 1) 45%, hsla(0, 0%, 60%, 1) 100%);



background: -webkit-linear-gradient(39deg, hsla(0, 2%, 12%, 1) 45%, hsla(0, 0%, 60%, 1) 100%);



filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#201F1F", endColorstr="#9A9999", GradientType=1 );

}

.example-2 .icon-content a[data-social="instagram"] .filled,

.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {

    background: linear-gradient(

        45deg,

        #405de6,

        #5b51db,

        #b33ab4,

        #c135b4,

        #e1306c,

        #fd1f1f

    );

}