@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&display=swap');
/*
font-family: "Maven Pro", sans-serif;
*/

:root {
    --primary: #03143F;
    --secondary: #0161CF;
    --white: #FFFFFF;
    --black: #000000;
    --gray:#7F7F7F;
}

body{ padding:0; margin:0; font-size:16px; color:var(--gray); font-family: "Maven Pro", sans-serif;}
a, button{outline:none !important; text-decoration:none; box-shadow:none; transition:all .4s ease-in-out;}
a:hover, a:focus, select:focus, button:focus,.btn:focus,btn.focus { outline:none; text-decoration:none; box-shadow:none;}
* { margin:0; padding:0;}
img { border:none; vertical-align:middle; max-width:100%; height:auto;}
li{ list-style:none;}
h1, h2, h3, h4, h5, h6{ outline:none !important;}
input, select, textarea, button{ outline:none !important; box-shadow:none;}
input, textarea, select{ /*-moz-appearance: none; -webkit-appearance: none;*/ box-shadow:none !important;}

.container{ width:90%; max-width: 1410px; margin:0 auto; padding:0;}

.btns{ margin: 0; padding: 9px 30px; display: inline-flex; font-size: 16px; font-weight: 600; color: var(--secondary); border: 1px solid var(--primary); border-radius: 25px; position: relative;}
.btns span{ position: absolute; top: 50%; right: -25px; transform: translate(0, -50%) rotate(-45deg); height: 35px; width: 35px; min-width: 35px; display: flex; align-items: center; justify-content: center; background: var(--secondary); border: 1px solid var(--secondary); border-radius: 35px; transition:all .4s ease-in-out;}
.btns span img{ transition:all .4s ease-in-out;}
.btns:hover{ color: var(--white); background: var(--secondary); border-color: var(--secondary);}
.btns:hover span{ background: transparent; border-color: var(--primary); right: -35px; transform: translate(0, -50%) rotate(0);}
.btns:hover span img{ filter: brightness(0);}

.global_title{ margin: 0 0 35px; padding: 0; font-size: 50px; font-weight: 700; color: var(--primary); letter-spacing: 1px;}
.global_title small{ display: block; font-size: 24px; color: var(--secondary);}

p{ margin: 0 0 30px; padding: 0; font-size: 18px; line-height: 30px; letter-spacing: 1px;}

/*--------------------
	GLOBAL END HERE
--------------------*/

/*===================
 		HEADER
 ===================*/
.header_sec{ width: 100%; padding: 12px 0; margin: 0; position: relative; z-index: 9999; top: 0; transition: all .4s ease-in-out;}
.header_sec .navbar{ margin:0; padding:0;}
.header_sec .navbar-brand{ margin: 0; padding: 0;}
.header_sec .navbar-light .navbar-nav .nav-item{ margin: 0 0 0 50px; display: flex; align-items: center; gap: 5px;}
.header_sec .navbar-light .navbar-nav .nav-link{ margin: 0; padding: 10px 0; font-weight: 500; font-size: 17px; color: var(--black); position: relative; display: inline-block;}
.header_sec .navbar-light .navbar-nav .nav-link:before{ content: ""; width: 0; height: 2px; background: var(--secondary); position: absolute; bottom: 0; left: 0; right: 0; margin: auto; transition: all .4s ease-in-out;}
.header_sec .navbar-light .navbar-nav .nav-link:focus, header .navbar-light .navbar-nav .nav-link:hover{ color: var(--secondary);}
.header_sec .navbar-light .navbar-nav .nav-link.active, header .navbar-light .navbar-nav .show > .nav-link{ color: var(--secondary);}
.header_sec .navbar-light .navbar-nav .nav-link:not(.active):focus:before, .header_sec .navbar-light .navbar-nav .nav-link:not(.active):hover:before, .head_bottom .navbar-light .navbar-nav .dropdown:hover > .nav-link:not(.active):before{ width: 100%;}

.nav-btns{ margin: 0 35px 0 50px; padding: 0;}
.nav-btns .contact_btn{ margin: 0; padding: 9px 30px; display: inline-flex; font-size: 16px; font-weight: 600; color: var(--secondary); border: 1px solid var(--primary); border-radius: 25px; position: relative;}
.nav-btns .contact_btn span{ position: absolute; top: 50%; right: -25px; transform: translate(0, -50%) rotate(-45deg); height: 35px; width: 35px; min-width: 35px; display: flex; align-items: center; justify-content: center; background: var(--secondary); border: 1px solid var(--secondary); border-radius: 35px; transition:all .4s ease-in-out;}
.nav-btns .contact_btn span img{ transition:all .4s ease-in-out;}
.nav-btns .contact_btn:hover{ color: var(--white); background: var(--secondary); border-color: var(--secondary);}
.nav-btns .contact_btn:hover span{ background: transparent; border-color: var(--primary); right: -35px; transform: translate(0, -50%) rotate(0);}
.nav-btns .contact_btn:hover span img{ filter: brightness(0);}

/* HEADER STICKY */
.header_sec.sticky{ padding:10px 0; position:fixed; background: rgba(255, 255, 255, 0.8); box-shadow: -2px 3px 90px -20px rgba(0,0,0,.25); z-index:999 !important; animation:slide-down 0.4s; inset: 1; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}


@keyframes slide-down{
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0);
    }
}
/* STICKY END */

/*-----------------
	HEADER END
-----------------*/


/*===================
 		FOOTER
===================*/
.footer_sec{ margin: 0; padding: 60px 0 0; background: #03143F;}
.footer_sec figure{ margin: 0; padding: 0;}
.footer_sec figure img{ filter: brightness(0) invert(1);}
.contact_item{ margin: 0; padding: 0; display: flex; align-items: center; gap: 20px;}
.contact_item i{ margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--white); height: 50px; width: 50px; min-width: 50px; border-radius: 50px; color: var(--primary); font-size: 24px;}
.contact_item .detail{ margin: 0; padding: 0; font-size: 18px; color: var(--white); font-weight: 600;}
.contact_item small{ display: block; font-size: 18px; font-weight: 400;}
.contact_item small a{ color: var(--white);}
.contact_item small a:hover{ color: var(--secondary);}
.contact_item i.fa-envelope{ font-size: 20px;}
.copyright{ margin: 50px 0 0 0; padding: 30px 0; border-top: 1px solid rgba(127, 127, 127, 0.2);}
.social_icon{ margin: 0; padding: 0; display: flex; gap: 15px;}
.social_icon li{ margin: 0; padding: 0;}
.social_icon li a{ display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 40px; min-width: 40px; border-radius: 40px; background: var(--white); color: var(--primary); font-size: 18px;}
.social_icon li a i{ transition:all .4s ease-in-out;}
.social_icon li a:hover{ background: var(--secondary); color: var(--white);}
.social_icon li a:hover i{ animation: grow 1s linear infinite;}
.copyright p{ margin: 0; font-size: 17px; line-height: normal; color: var(--white); letter-spacing: normal;}
.copyright p strong{ font-weight: 500;}

@keyframes grow{
    0%{ transform: translateY(0px);}
    50%{ transform: translateY(-5px);}
    100%{ transform: translateY(0px);}
}

/* Return To Top */
#return-to-top { position:fixed; bottom: 30px; right: 10px; background: var(--primary); width:38px; height:38px; font-size:25px; line-height:34px; color:#fff; display: block; border-radius:50%; text-decoration: none; text-align: center; display: none; transition: all 0.3s ease; z-index:9999;}
#return-to-top:hover { background: var(--secondary); color:var(--white); line-height:30px;}

/*---------------
	FOOTER END
----------------*/


/*=================================
 		SECTION START HERE
=================================*/
.hero_sec{ margin: 0; padding: 0; position: relative;}
.hero_sec figure{ margin: 0; padding: 0; position: relative;}
.hero_sec figure::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, .0));}
.hero_sec figure img{ width: 100%;}
.hero_cap{ width: 100%; position: absolute; bottom: 110px; left: 0;}
.hero_cap h1{ margin: 0; padding: 0; color: var(--white); font-size: 60px; font-weight: 700;}

.hero_sec .item img{ width:100%;}
.hero_sec .owl-nav button{ width:auto; height:auto; font-size:0 !important; display: flex; align-items: center; justify-content: center; border-radius: 50px; position: absolute; top: 50%; transform: translate(0, -50%); color: var(--secondary) !important; z-index:555; transition:all .6s ease-in-out; height: 50px; width: 50px; min-width: 50px; background: var(--white); border: none;}
.hero_sec .owl-nav button.owl-prev{ left: 50px;}
.hero_sec .owl-nav button.owl-prev:after{ content: "\f104"; font-family: 'FontAwesome'; font-size: 32px;}
.hero_sec .owl-nav button.owl-next{ right: 50px;}
.hero_sec .owl-nav button.owl-next:after{ content: "\f105"; font-family: 'FontAwesome'; font-size: 32px;}
.hero_sec .owl-nav button:hover{ color: var(--black) !important;}
.hero_sec .owl-nav button:hover .thumb-prev{ opacity: 1;}
.hero_sec .owl-nav button:hover .thumb-next{ opacity: 1;}

.hero_sec .thumb-next, .thumb-prev{ position: absolute; z-index: 99; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; left: -15px; cursor: pointer; transition: .3s; border-radius: 50%; border: none; opacity: 0; transition:all .4s ease-in-out;}
.hero_sec .thumb-next{ left: auto; right: -15px;}
.hero_sec .feedback-slider-thumb img{ width:100%;height:100%;overflow:hidden;object-fit: cover; border-radius: 50%;}
.hero_sec .feedback-slider-thumb:hover{ opacity:1}

/* About */
.about_sec{ margin: 0; padding: 120px 0;}
.about_sec .detail{ margin: 0; padding: 0 60px 0 0;}
.counter_info{ margin: 0 0 40px; padding: 0; display: flex; gap: 140px;}
.counter_info .about_count{ margin: 0; padding: 0; font-size: 30px; font-weight: 500; color: var(--primary); display: flex; align-items: center; gap: 10px; position: relative;}
.counter_info .about_count + .about_count::before{ content: ""; position: absolute; top: 50%; left: -70px; transform: translate(0, -50%); background: rgba(0, 0, 0, 0.2); height: 60%; width: 1px;}
.counter_info .about_count span{ color: var(--primary); font-size: 80px; min-width: 90px;}
.counter_info .about_count.inn span{ min-width: 153px;}
.counter_info .about_count small{ color: var(--gray); font-size: 18px; display: inline-block;}
.about_sec figure{ margin: 0; padding: 0; border-radius: 20px;}
.about_sec figure img{ width: 100%; border-radius: 20px;}

/* Traction */
.traction_sec{ margin: 0; padding: 0 0 80px;}
.sidebar_list{ margin: 0; padding: 60px 0 60px 60px; background: var(--primary); border-radius: 30px; height: 100%; position: relative;}
.sidebar_list::before{ content: ""; position: absolute; top: 0; right: -30px; background: #F5F5F5; width: 200px; height: 100%; border-radius: 30px 0 0 30px; transition:all .4s ease-in-out;}
.sidebar_list .nav-tabs{ flex-direction: column; border: none;}
.sidebar_list .nav-link{ margin: 0 0 25px; padding: 12px 20px; border: none; background: none; color: var(--white); font-size: 26px; font-weight: 500; border-radius: 30px; text-align: left; max-width: 270px;}
.sidebar_list .nav-tabs .nav-link.active{ padding-right: 60px; background: var(--secondary); color: var(--white); border-radius: 30px; max-width: 100%; width: 100%; position: relative; z-index: 2;}
.sidebar_list .nav-tabs .nav-link.active::before{ content: ""; position: absolute; top: 50%; transform: translate(0, -50%); right: 10px; background-color: var(--white); height: 44px; width: 44px; min-width: 44px; border-radius: 40px; background-image: url(../images/btn_arrow_right_black.svg); background-repeat: no-repeat; background-position: center center;}

.traction_sec .tab-content{ height: 100%; background: #F5F5F5; border-radius: 0 30px 30px 0;}
.traction_sec .tab-pane{ height: 100%; transition:all .2s ease-in-out;}
.traction_block{ margin: 0; padding: 50px 50px 50px 30px; position: relative; height: 100%; transition:all .4s ease-in-out;}
.traction_block h3{ margin: 0 0 30px; padding: 0; font-size: 40px; font-weight: 600; color: var(--primary);}
.list_info{ margin: 0; padding: 0;}
.list_info li{ margin: 0 0 18px; padding: 0 0 0 25px; font-size: 20px; font-weight: 500; color: var(--black); position: relative; letter-spacing: 1px;}
.list_info li::before{ content: ""; position: absolute; top: 9px; left: 0; background: var(--primary); height: 10px; width: 10px; min-width: 10px; border-radius: 10px;}

/* Revenue */
.revenue_sec{ margin: 0; padding: 260px 0 0; background: url(../images/why_bg.jpg) center center no-repeat; background-size: cover; border-radius: 20px;}
.revenue_info{ margin: 0; padding: 60px 40px; border-radius: 20px 20px 0 0; max-width: 760px; position: relative; z-index: 2; background: var(--white);}

.revenue_info .accordion-item{ border: none; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0;}
.revenue_info .accordion-button{ padding: 0 25px 0 0; display: flex; gap: 20px; border: none; box-shadow: none; position: relative; width: 100%; font-size: 23px; font-weight: 500; color: var(--primary);}
.revenue_info .accordion-button:not(.collapsed){ background: none; color: var(--secondary);}
.revenue_info .accordion-button::after{ content: ""; position: absolute; top: 50%; right: 0; background: url(../images/collapse_arrow.svg) center center no-repeat; background-size: 100% 100%; height: 32px; width: 32px; transform: translate(0, -50%) rotate(-45deg);}
.revenue_info .accordion-button:not(.collapsed)::after{ transform: translate(0, -50%) rotate(0deg); background: url(../images/collapse_arrow_blue.svg) center center no-repeat;}
.revenue_info .accordion-body{ padding: 10px 0 0;}
.revenue_info figure{ margin: 0; padding: 0; width: 40px; min-width: 40px; height: 40px;}
.revenue_info p{ margin: 0;}

/* Problems */
.problems_sec{ margin: 0; padding: 80px 0;}
.problems_block{ margin: 0; padding: 35px; background: rgba(65,161,239,0.08); border-radius: 20px; display: flex; height: calc(100% - 145px); flex-direction: column; justify-content: space-between;}
.problems_block h3{ margin: 0 0 15px; padding: 0; font-size: 25px; font-weight: 500; color: var(--primary); letter-spacing: 1px;}
.problems_block p{ margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid rgba(0,0,0,0.1);}
.problems_block p:nth-child(4){ border: none; margin-bottom: 40px;}
.problems_block figure{ margin: 0; padding: 0; overflow: hidden; border-radius: 15px;}
.problems_block figure img{ width: 100%; border-radius: 15px; transition:all .4s ease-in-out;}
.problems_block:hover figure img{ transform: scale(1.1); border-radius: 15px;}
.problems_block p:nth-child(4){ margin-bottom: 0;}

/*========================
 		About Page
========================*/
.inner_banner{ margin: 0; padding: 0; position: relative;}
.inner_banner figure{ margin: 0; padding: 0; position: relative;}
.inner_banner figure::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, .0));}
.inner_banner figure img{ width: 100%; height: 400px; object-fit: cover;}
.inner_banner .inner_cap{ margin: 0; padding: 0; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 100%;}
.inner_banner h1{ margin: 0; padding: 0; font-size: 60px; color: var(--white); font-weight: 700;}

/* Feasibility */
.feasibility_sec{ margin: 0; padding: 120px 0;}
.feasibility_sec .about_counter{ margin: 75px 0 0 0; padding: 20px 0 0 0; display: flex; justify-content: space-between; border-top: 1px solid rgba(0, 0, 0, 0.2);}
.feasibility_sec .about_count{ margin: 0; padding: 0; font-size: 30px; font-weight: 500; color: var(--secondary);}
.feasibility_sec .about_count span{ font-size: 80px; min-width: 102px; display: inline-block;}
.feasibility_sec .about_count.inn span{ min-width: 155px;}
.feasibility_sec .about_count small{ color: var(--gray); font-size: 18px; display: block;}
.feasibility_sec h3{ margin: 0 0 30px; padding: 0; font-size: 22px; line-height: 34px; font-weight: 500; color: var(--primary);}
.feasibility_sec .detail{ margin: 0; padding: 0 0 0 50px;}
.point_box{ margin: 0; padding: 0;}
.point_box h4{ margin: 0 0 15px; padding: 0; font-size: 23px; font-weight: 500; color: var(--secondary);}
.point_box p{ margin: 0;}

/* Vision */
.vision_sec{ margin: 0; padding: 80px 0; background: #F5F5F5;}
.vision_block{ margin: 0; padding: 25px; background: #fff; transition: all .4s ease-in-out; height: 100%; border-bottom: 3px solid var(--secondary); box-shadow: 2px 8px 14px rgba(1, 95, 201, .1); border-radius: 15px;}
.vision_block figure{ margin: 0 0 20px; padding: 0; min-height: 50px;}
.vision_block figure img{ transition:all .4s ease-in-out;}
.vision_block h3{ margin: 0 0 15px; padding: 0; font-size: 25px; font-weight: 500; color: var(--primary); transition:all .4s ease-in-out;}
.vision_block p{ margin: 0; transition:all .4s ease-in-out;}
.vision_list{ margin: 0; padding: 0;}
.vision_list li{ margin: 0 0 5px; padding: 0 0 0 15px; font-size: 18px; letter-spacing: 1px; transition:all .4s ease-in-out; position: relative;}
.vision_list li::before{ content: ""; position: absolute; top: 10px; left: 0; height: 8px; width: 8px; border-radius: 10px; background: var(--gray); transition:all .4s ease-in-out;}

/* Video Modal */
.video_modal .modal-dialog{ width: 90%; max-width: 840px; border-radius: 15px;}
.video_modal .modal-content{ border: none; border: none; background: none; box-shadow: 0 0 70px rgba(0,0,0,0.8);}
.video_modal .modal-body{ padding: 0;}
.video_modal .modal-body .btn-close{ width: 26px; height: 26px; border-radius: 50%; background-color: var(--white); position: absolute; top:-13px; right:-13px; opacity: 1;background-size: 12px;}
.video_modal .modal-body iframe{ width: 100%; float: left;}

/* Target */
.target_sec{ margin: 0; padding: 120px 0;}
.target_sec figure{ margin: 0 0 20px; padding: 0; border-radius: 10px;}
.target_sec figure img{ width: 100%; border-radius: 10px;}

/* Team */
.team_sec{ margin: 0; padding: 0 0 120px;}
.team_sec figure{ margin: 0 0 20px; padding: 0; border-radius: 10px;}
.team_sec figure img{ width: 100%; border-radius: 10px;}
.team_info{ margin: 0; padding: 0;}
.team_info h3{ margin: 0; padding: 0; font-size: 22px; color: var(--primary); font-weight: 500;}
.team_info span{ margin: 0; padding: 0; display: inline-block; font-size: 18px;}

/*========================
 		Service Page
========================*/
.service_sec{ margin: 0; padding: 120px 0;}
.service_block{ margin: 0 0 120px; padding: 0;}
.service_block .detail{ margin: 0; padding: 0; max-width: 600px;}
.service_block .flex-row-reverse .detail{ padding-left: 50px;}
.service_block i{ margin: 0 0 25px; padding: 0; height: 80px; width: 80px; min-width: 80px; border-radius: 80px; background: #F5F5F5; display: flex; align-items: center; justify-content: center;}
.service_block h2{ margin: 0 0 25px; padding: 0; font-size: 40px; font-weight: 500; color: var(--primary);}
.service_block p{ margin: 0;}
.service_block figure{ margin: 0 0 25px 0; padding: 0; border-radius: 15px;}
.service_block figure img{ width: 100%; border-radius: 15px;}
.service_block:last-child{ margin: 0;}

/* Contact */
.contact_sec{ margin: 0; padding: 120px 0;}
.contact_logo{ margin: 0 0 30px; padding: 0; position: relative; display: inline-block;}
.contact_logo figure{ margin: 0; padding: 0;}
.contact_logo figure img{ transition:all .4s ease-in-out; animation: rotate 6s linear infinite;}
.contact_logo i{ margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: skel 2s linear infinite;}
.conatct_block{ margin: 0; padding: 0; max-width: 570px;}
.conatct_block .input-group{ margin: 0 0 20px; padding: 0;}
.conatct_block .input-group span{ margin: 0; padding: 0; position: absolute; top: 13px; left: 0; z-index: 9; color: var(--secondary);}
.conatct_block .form-control{ margin: 0 !important; padding: 0 0 0 35px; font-size: 16px; height: 50px; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; color: var(--primary);}
.conatct_block .form-control::placeholder{ color: var(--primary); opacity: 1;}
.conatct_block textarea.form-control{ height: 120px; resize: none; padding-top: 12px;}
.conatct_block .form-control:focus{ border-color: var(--secondary);}
.conatct_block .btns{ background: none;}
.conatct_block .btns:hover{ background: var(--secondary);}
.contact_sec h2{ margin: 0 0 40px; padding: 0; font-size: 50px; font-weight: 700; color: var(--primary); letter-spacing: 1px;}
.contact_sec h2 span{ display: block; margin-left: 15%;}
.contact_info{ margin: 0 0 30px; padding: 0;}
.contact_info li{ margin: 0 0 10px; padding: 0; font-size: 18px; font-weight: 500; color: var(--black); display: flex; gap: 10px; align-items: center;}
.contact_info li i{ min-width: 20px;}
.contact_info li a{ color: var(--black); display: flex; gap: 10px; align-items: center;}
.contact_info li a:hover{ color: var(--secondary);}

@keyframes rotate{
    0%{ transform: rotate(0);}
    100%{ transform: rotate(360deg);}
}
@keyframes skel{
    0%{ transform: translate(-50%, -50%) scale(1);}
    50%{ transform: translate(-50%, -50%) scale(0.5);}
    100%{ transform: translate(-50%, -50%) scale(1);}
}