/* *********************************** HTML Based Code ******************************* */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
--primary:#0A0572;
--success:#00FA9A;
--green:#3BFF00;
--warning:#FAF000;
--danger:#F405EA;
--info:#B5EBFC;
--dark:#25275F;

--light:#F6F6F6;
--muted:#DBDBDB;
--black:#000000;
--white:#fff;

--font1:"Roboto", sans-serif;
--radius:35px;
--radius_sm:24px;
}

body{ position: relative; margin:0; padding:0; width:100%; height:100%; scroll-behavior: smooth; overflow-x:hidden; font-family: var(--font1); font-weight: 200; font-style: normal; font-size: 1rem !important; line-height:150%; background: var(--primary); background: linear-gradient(180deg,rgba(10, 5, 114, 1) 0%, rgba(10, 5, 114, 1) 50%, rgba(3, 3, 25, 1) 100%); color: var(--white); }

a, .animate, button, .btn{ transition:.5s ease all; text-decoration:none; cursor: pointer;}
a:hover{color: var(--success);}

input, select, textarea{ box-shadow: none; outline: none;}

ul{ margin:0; padding:0; list-style:none; }
h1, h2, h3, h4, h5, h6{ font-weight: 400 !important; font-family:var(--font1); margin: 0; }
h1{ font-size: 2.5rem;}
h2{ font-size: 1.75rem;}
h3{ font-size: 1.5rem;}
h4{ font-size: 1.25rem;}
h5{ font-size: 1rem;}
h6{ font-size: 0.875rem;}

p{ margin: 0 0 20px; font-size: 1.125rem; font-weight: 200; line-height: 150%; }

.text-white{ color: var(--white) !important;}
.text-danger{ color: var(--danger) !important;}
.text-warning{ color: var(--warning) !important;}
.text-success{ color: var(--success) !important;}
.text-info{ color: var(--info) !important;}
.fw-bold{ font-weight: 600 !important;}

.text-sm { font-size: 80%;}
.text-lg { font-size: 80%;}

.btn{ padding: 10px 35px;font-size: .8rem; border-radius: var(--radius); font-weight: 500; opacity: 1 !important; }
.btn.btn-link{padding: 7px 0; text-decoration: none;}
.btn.btn-sm{padding: 8px 30px; font-size: .8rem;}
.btn-block{ width: 100%;}
/* .btn:hover, button:hover{ transform: translateY(-5px);} */

.btn-primary{background-color: var(--primary); border-color: var(--primary);}
.btn-primary:hover{ color: var(--primary); background-color: var(--white); border-color: var(--primary);}

.btn-success{background-color: var(--success) !important; border-color: var(--success) !important; color: var(--primary) !important;}
.btn-success:hover{ color: var(--success) !important; background-color: transparent !important; border-color: var(--success) !important;}

.btn-danger{background-color: var(--danger) !important; border-color: var(--danger) !important; color: var(--primary) !important;}
.btn-danger:hover{ color: var(--danger) !important; background-color: var(--primary) !important; border-color: var(--danger) !important;}

.btn-warning{background-color: var(--warning) !important; border-color: var(--warning) !important; color: var(--primary) !important;}
.btn-warning:hover{ color: var(--warning) !important; background-color: var(--primary) !important; border-color: var(--warning) !important;}

.btn-info{background-color: var(--info) !important; border-color: var(--info) !important; color: var(--primary) !important;}
.btn-info:hover{ color: var(--info) !important; background-color: var(--primary) !important; border-color: var(--info) !important;}

.btn-light{background-color: var(--white) !important; border-color: var(--white) !important; color: var(--primary) !important;}
.btn-light:hover{ color: var(--light) !important; background-color: transparent !important; border-color: var(--light) !important;}

.btn-outline-secondary{background-color: transparent !important; border-color: var(--primary) !important; color: var(--primary) !important;}
.btn-outline-secondary:hover{ background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important;}

.white path{ fill: var(--white);} 
.success path{ fill: var(--success);} 
.danger path{ fill: var(--danger);} 
.warning path{ fill: var(--warning);} 
.info path{ fill: var(--info);}

.green.img-svg path{ fill: var(--success);}
.green.img-svg.strock path{ fill: transparent; stroke: var(--success);}
.warning.img-svg.strock path{ fill: transparent; stroke: var(--warning);}
.danger.img-svg.strock path{ fill: transparent; stroke: var(--danger);}
.success.img-svg.strock path{ fill: transparent; stroke: var(--success);}
.info.img-svg.strock path{ fill: transparent; stroke: var(--info);}

.stick_top{ position:sticky; top:0px; left:auto }

.line_2{display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.line_3{display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.line_4{display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.line_2{ -webkit-line-clamp: 2;}
.line_3{ -webkit-line-clamp: 3;}
.line_4{ -webkit-line-clamp: 4;}

.curstom-badge { border-radius: var(--radius); padding: 16px 24px; font-weight: 400;}
.curstom-badge.success { border:1px solid var(--success) !important; color: var(--success) !important;}
.curstom-badge.danger { border:1px solid var(--danger) !important; color: var(--danger) !important;}
.curstom-badge.warning { border:1px solid var(--warning) !important; color: var(--warning) !important;}
.curstom-badge.info { border:1px solid var(--info) !important; color: var(--info) !important;}

body .swiper-pagination{ text-align: left;}
body .swiper-pagination-bullet{ background-color: var(--white) !important; width: 10px; height: 10px; opacity: 1; cursor: pointer;}
body .swiper-pagination-bullet:hover, body .swiper-pagination-bullet-active{ background-color: var(--danger) !important;}


/* Custome Banner */

/* Animation */
.direct_contact{animation: gradient-animation 18s ease infinite;}
@keyframes gradient-animation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
/* Animation */

/* System Design */
.bd-example-border-utils { border: 1px solid var(--muted); display: inline-block; width: 5rem; height: 5rem; margin: .25rem;}

/* Top Menu */
.top_menu{ position: fixed; top: 0; left: 0; z-index: 2; width: 100%;}
.top_menu, .top_menu a{ color: var(--white); display: inline-block;}
.top_menu a.active{color: rgba(255,255,255,.5) !important;}
.custome_menu_btn{ position:absolute; right: 20px; height: 20px;}
.custome_menu_btn .img-svg{ width: 24px; height: auto;}

.mega_menu{ position: fixed; left: 0; top: 0; z-index: 1030; width: 100vw; height: 100vh; background-color: var(--primary); display: none;}
.close_menu img{ width: 26px; height: auto; display: block; }
.mega_menu-cnt{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%;}
.close_menu{position: absolute; right: 25px; top: 70px; z-index: 1;}
.mega_menu ul li a{ font-size: 2rem; color: var(--white); display: block; line-height: 150%; padding: 10px 0;}
.mega_menu ul li a:hover{ color: var(--success); }
.logo_list a{ width: 72px; height: auto; }
.logo_list a .img-svg{ width: 100%; height: auto; display: block;}
.top_menu .navbar-nav .nav-link.active, .top_menu .navbar-nav .nav-link.show, .top_menu .nav-link:focus, .top_menu .nav-link:hover, .current_page_item  .nav-link{ color: var(--success) !important;}
.top_menu.menufixed-top{background-color: var(--primary); border-bottom: 1px solid rgba(255, 255, 255, .1); margin-top: 0;}
.top_menu.menufixed-top .navbar-brand .img-svg {width: 40px; height: auto;}
/* Top Menu */

/* Header */
.banner_section{ position: relative; width: 100%; height: 100vh; color: var(--white); background-position: center top; background-size: cover; background-repeat: no-repeat; /*padding: 250px 0 100px;*/}
.banner_section::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--primary); opacity: .7; z-index: 0;}
.banner-image{ width: 100%; position: relative;}
.banner-content{ position: relative; z-index: 1;top: 50%; transform: translateY(-50%);}
.banner_section h1{ margin-bottom: 20px;}
.banner_section p{ font-size: 1.75rem; font-weight: 300; margin-bottom: 30px; color: var(--white);}

.video_section{ position: relative; margin-left: auto; max-width: 440px; width: 100%; display: inline-block; aspect-ratio: 1/1.7; border-radius: var(--radius); overflow: hidden; }
.video_section .video_trigger{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 25%; height: auto; background: none; border: none; cursor: pointer; padding: 0; z-index: 1; }
.video_section > img, .video_section video{ height: 100%; width: auto; min-width: 100%; margin: auto;}
.video_section .video_trigger img{ width: 100%; height: auto; display: block; }

/* .content-section{ margin-bottom: 100px;}
.content-section:last-child{ margin-bottom: 0;} */
.content-section.gutter{ padding: 50vh 0 25vh;}
.sticky-image-box {position: sticky; top: 0; height: 100vh; display: flex; align-items: center;justify-content: center;}
.img-display { max-height: 90vh; position: absolute; opacity: 0; transition: opacity 0.4s ease;}
.img-display.active { opacity: 1; position: relative;}
.inner_page{ padding-top: 100px;}

/* Projects */
.project_container{ position: relative; overflow: hidden; border-radius: var(--radius); overflow: hidden; padding: 30px; transition: .5s all ease;} 
.p_heading_cnt h2, .p_heading_cnt p{ margin-left: 30px;}
.project_container:hover{ background-color: var(--dark);}
.project_container a, .blog_container a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} 
.project_container--img, .blog_container--img, .blo--img{ overflow: hidden; border-radius: var(--radius); aspect-ratio: 1/.65;} 
.blog--banner{ overflow: hidden; border-radius: var(--radius); aspect-ratio: 1/.5;} 
.project_container--img, .blog_container--img, .blog--banner{margin-bottom: 30px;} 
.project_container--img img, .blog_container--img img, .blog--banner img, .blo--img img{ width: 100%; object-fit: cover; min-height: 100%;} 
.project_container--cnt h3, .blog_container--cnt h3{ font-size: 1.75rem; margin-bottom: 30px; transition: .5s all ease;} 
.project_container--cnt p, .blog_container--cnt p{ font-size: 18px; }
.project_container--cnt h3, .blog_container--cnt h3, .project_container--cnt p, .blog_container--cnt p{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.blog_container:hover h3, .project_container:hover h3{ color: var(--success);}
.blog_container{ position: relative;}
.blog__detl *{ color: var(--black);}

/* Projects */

/* Subscribe */
.subscribe_section, .team_msg{ background-color: var(--dark); border-radius: var(--radius);}
.team_msg{ padding: 30px 15px;}
.subscribe_section{ padding: 100px 50px;}
.subscribe_section input::placeholder{ color: rgba(255,5,234, .25) !important;}
.subscribe_section input{ border-radius:  var(--radius)  !important; margin-right: 20px;}
.subscribe_section button{border-radius:  var(--radius)  !important;}

 /* footer */
 .footer{ padding: 120px 0; font-weight: 300;}
 .footer, .footer a{color: var(--white);}
 .footer a:hover{color: var(--success) !important;}

 .contact-links{background-color: var(--dark); padding: 50px; border-radius: var(--radius); overflow: hidden; margin-right: 50px;}
 .contact_section, .contact_section a{color: var(--white);}
 .contact_section a:hover{color: var(--success) !important;}
 .contact_section h3{ font-weight: 500;}

 .our_value, .our_members{ margin:0 0 60px 0;}
 .our_members.blank .team_member_photo{ background-color: var(--success); }
 .our_value h3{ margin-bottom: 30px; min-height: 120px;}
 .team_member_photo{ aspect-ratio: 6/5; border-radius: var(--radius); margin-bottom: 30px; overflow: hidden;}
 .team_member_profile h3{ font-size: 1.5rem; font-weight: 300 !important; margin-bottom: 5px;}
 .team_member_profile h3 a{color: var(--success) !important}
 .team_member_profile p{ font-size: 1.125rem;}
 .mission_img, .team_msg-img { border-radius: var(--radius); overflow: hidden;aspect-ratio: 1/1.0804;}
 .about-banner{ border-radius: var(--radius); overflow: hidden;} 
 .about-banner img, .team_msg-img img{ width: 100%; object-fit: cover; min-height: 100%;}
 .mission_img img{ width: 100%;}

 .tech_cnt{ margin-bottom: 50px;}
 .tech_cnt h3{ color: var(--success); font-weight: 400; font-size: 3rem;}

 .subscribe_section ._form{ padding: 0 !important;}
 .subscribe_section ._clear, .subscribe_section ._form-label{ display: none !important;}
 .subscribe_section ._form-content{ display: flex; gap: 30px;}
 .subscribe_section ._form ._button-wrapper{width: 150px !important;}
 .subscribe_section ._form_element input { padding: 24px 16px !important; border-radius: 28px !important; text-align: center !important; width: 100%;}
 body  #subscribe_section form._form._inline-form ._button-wrapper ._submit{ padding: 16px 50px !important; border-radius: 28px !important; min-width: 150px !important; margin: 0 !important; font-size: 1.1rem !important; font-weight: 600 !important; height: 70px;border: 1px solid transparent !important;}
 body  #subscribe_section form._form._inline-form ._button-wrapper ._submit:hover{    color: var(--success) !important;
    background-color: transparent !important;  border-color: var(--success) !important;}
#subscribe_section ._form-branding{ display: flex; align-items: center; gap: 10px; top: 20px !important;  position: relative; margin-bottom: 20px;}
#subscribe_section ._form-branding ._marketing-by{font-size:1.125rem !important; line-height: normal !important;}
#subscribe_section ._form-branding ._logo{ width: 150px !important; background-size: 150px auto !important; height: 18px !important; margin-top: 8px !important}