@import url('https://fonts.googleapis.com/css2?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');
:root {
    --primary: #0003B7;
    --white: #FFFFFF;
    --black: #000000;
}

body { overflow-x: hidden;}
html{ scrollbar-width: thin; -ms-overflow-style: none; scrollbar-color: var(--primary) #7D7E81; scroll-behavior: smooth; overflow-x: hidden;}
body{ padding:0; margin:0; font-size:16px; color:var(--black); font-family: "Poppins", 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: 1440px; margin:0 auto; padding:0;}

.global_title{ margin: 0 0 15px; font-size: 50px; font-weight: 600; color: var(--black);}
.global_title.white{ color: var(--white);}
.global_title.center{ text-align: center;}
.global_title small{ display: block; font-size: 20px; font-weight: 400; text-transform: uppercase; color: var(--primary);}

.animate__delay-0-5s{ animation-delay: 0.5s;}
.animate__delay-1-5s{ animation-delay: 1.5s;}

p{ font-size: 16px; line-height: 26px; font-weight: 400;}

.btns{ box-sizing: border-box; margin: 0; padding: 10px; display: inline-flex; align-items: center; justify-content: center; text-align: center; border: none; transition: all .5s; background: var(--primary); color: var(--white); font-size: 14px; font-weight: 500; text-transform: uppercase; width: 204px; height: 52px; letter-spacing: 2.8px; position: relative; overflow: hidden;}
.btns:hover { cursor: pointer; background: var(--black);}
.btns::before { position: absolute; top: 0; left: 0; width: 100%; content: attr(data-text); transform: translate3d(0, 15px, 0); transition: all .4s ease-in-out; transition-timing-function: cubic-bezier(0.85, 0, 0.2, 1);}
.btns span { display: inline-block; opacity: 0; transform: translate3d(0, -10px, 0); transition: all .4s; transition-timing-function: cubic-bezier(0.85, 0, 0.2, 1);}
.btns:hover::before{ opacity: 0; transform: translate3d(0, 40px, 0);}
.btns:hover span { opacity: 1; transform: translate3d(0, 0, 0);}
.btns:hover span:nth-child(1) { transition-delay: 0.04s;}
.btns:hover span:nth-child(2) { transition-delay: 0.08s;}
.btns:hover span:nth-child(3) { transition-delay: 0.12s;}
.btns:hover span:nth-child(4) { transition-delay: 0.16s;}
.btns:hover span:nth-child(5) { transition-delay: 0.2s;}
.btns:hover span:nth-child(6) { transition-delay: 0.24s;}
.btns:hover span:nth-child(7) { transition-delay: 0.28s;}
.btns:hover span:nth-child(8) { transition-delay: 0.32s;}
.btns:hover span:nth-child(9) { transition-delay: 0.36s;}
.btns:hover span:nth-child(10) { transition-delay: 0.4s;}
.btns:hover span:nth-child(11) { transition-delay: 0.44s;}
.btns:hover span:nth-child(12) { transition-delay: 0.48s;}
.btns:hover span:nth-child(13) { transition-delay: 0.52s;}

/*===================
 		HEADER 
 ===================*/
header{ width: 100%; padding: 18px 0; margin:0; background: none; position: relative; top: 0; z-index:9999;}
header .navbar{ margin: 0; padding: 0; align-items: center; justify-content: space-between;}
header .navbar-brand{ margin:0; padding:0; width: 110px;}
header .navbar-brand img{ width: 100%;}
header .navbar-light .navbar-nav .nav-item{ margin: 0 35px 0 0;}
header .navbar-light .navbar-nav .nav-item:hover .nav-link{ color: var(--primary);}
header .navbar-light .navbar-nav .nav-link{ margin: 0; padding: 10px 0; font-weight: 500; font-size: 16px; color: var(--black); position: relative;}
header .navbar-light .navbar-nav .nav-link::before{ content: ""; position: absolute; bottom: 0; left: 0; background: var(--primary); width: 0; height: 2px; transition: all 0.4s ease-in-out;}
header .navbar-light .navbar-nav .nav-link:hover::before{ width: 100%;}
header .navbar-light .navbar-nav .nav-link.active::before{ width: 100%;}
header .navbar-light .navbar-nav .nav-link:focus, header .navbar-light .navbar-nav .nav-link:hover{ color: var(--primary);}
header .navbar-light .navbar-nav .nav-link.active, header .navbar-light .navbar-nav .show > .nav-link{ color: var(--primary);}

@keyframes growOut {
    0% {
       transform: scale(0)
   }
   80% {
       transform: scale(1.1)
   }
   100% {
       transform: scale(1)
   }
}

/* HEADER STICKY */
header.sticky{ padding: 7px 0; position:fixed; background: var(--white); box-shadow:0 5px 5px rgba(0,0,0,0.1); z-index:999 !important; animation:slide-down 0.4s;}
header.sticky .navbar-brand{ width: 90px;}
header.sticky .navbar{ align-items: center;}
header.sticky .navbar-light .navbar-collapse{ padding: 0;}

@keyframes slide-down{
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        transform: translateY(0);
    } 
}
.header_relative header{ position: relative;}
.header_relative header.sticky{ position:fixed;}

#preloader{ height: 100%; position: fixed; z-index: 99999; inset: 0px; justify-content: center; transition: opacity .4s; display: flex; align-items: center; width: 100%; margin: 0; padding: 0;}
#preloader .circle img{ width: 140px; height: auto; z-index: 1; position: relative;}
#preloader .circle{ position: absolute; width: 200px; height: 200px; background: var(--black); border-radius: 50%; box-shadow: #fff 0 0 0 100vw; transition: transform 1.6s; transform: inherit; margin: auto; justify-content: center; display: flex; align-items: center; margin: 0; padding: 0;}

/* ==========================
        Footer
========================== */
section{ background: var(--white);}
#viewport{ z-index: 2; position: relative;}
.footer_sec{ margin: 0; padding: 80px 0 0 0; background: #0C253D; position: sticky; bottom: 0; z-index: -1; width: 100%;}
.footer_sec figure{ margin: 0; width: 200px;}
.footer_sec h3{ margin: 0 0 20px; padding: 0; font-size: 20px; color: var(--white); text-transform: uppercase;}
.ftr_link{ margin: 0 0 40px; padding: 0;}
.ftr_link li{ margin: 0 0 10px; padding: 0; font-size: 18px; font-weight: 500; color: var(--white);}
.ftr_link li a{ padding: 0; color: var(--white); position: relative;}
.ftr_link li a:hover{ padding-left: 20px; color: rgba(255,255,255,0.6);}
.ftr_link li a::before{ content: ""; position: absolute; top: 12px; left: 0; width: 0; height: 2px; background: rgba(255,255,255,0.6); transition: all 0.4s ease-in-out;}
.ftr_link li a:hover::before{ width: 10px;}
.social_icon{ margin: 0; padding: 0; display: flex; gap: 10px;}
.social_icon li{ margin: 0; padding: 0;}
.social_icon li a{ margin: 0; padding: 10px; display: flex; align-items: center; justify-content: center; background: var(--white); border-radius: 50%; height: 40px; width: 40px;}
.social_icon li a img{ transition: all 0.4s ease-in-out;}
.social_icon li a:hover{ background: var(--primary);}
.social_icon li a:hover img{ filter: brightness(0) invert(1);}
.copyright{ margin: 0; padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); text-align: center;}
.copyright p{ margin: 0; padding: 0; color: var(--white);}
.copyright p strong{ font-weight: 700;}

/* Return To Top */
#return-to-top{ position: fixed; bottom: 10px; right: 15px; background: transparent; width: 49px; height: 49px; font-size: 18px; line-height: 49px; color: var(--primary); border-radius: 40px; text-decoration: none; text-align: center; transition: all 0.3s ease; z-index: 9999;}
#return-to-top span{ display: inline-block; transform: rotate(-90deg);}
#return-to-top:hover{ background: var(--primary); color: var(--white);}

/* ==========================
        Home Page
========================== */
/* Sticky Buttons */
.sticky_buttons{ margin: 0; display: flex; flex-direction: column; position: fixed; top: 50%; transform: translate(0, -50%); right: 15px; z-index: 9999; gap: 30px; transition:all .4s ease-in-out;}
.sticky_buttons ul{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: 17px;}
.sticky_buttons ul li a{ width: 44px; height: 44px; border-radius: 50px; background: green; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.sticky_buttons ul li a img{ transition:all .4s ease-in-out;}
.sticky_buttons ul li a:hover img{ animation: toBottomFromTop 0.4s linear alternate;}

@keyframes toBottomFromTop {
	49% {
		transform: translateY(100%);
	}
	50% {
		opacity: 0;
		transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}

/* Hero */
.hero_sec{ margin: 0; padding: 80px 0; position: relative;}
.hero_sec .bg{ position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
.hero_sec .container{ position: relative; z-index: 2;}
.hero_sec figure{ margin: 0; padding: 0;}
.hero_sec figure img{ animation: updown 4s linear infinite reverse both;}
.hero_sec .detail{ margin: 0; padding: 0 50px 0 0;}
.hero_sec p{ margin: 0 0 30px; color: var(--white);}

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

.about_sec{ margin: 0; padding: 80px 0 0;}
.about_sec figure{ margin: 0; padding: 0; width: 80%;}
.about_sec p{ margin: 0 0 35px; padding: 0;}

.service_area{ margin: 0; padding: 80px 0;}
.service__item{ margin: 0; padding: 0;}
.service__item_icon .stroke1{ animation: animate-stroke 8s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite;}
.service__item a{ margin: 0; padding: 0; display: flex; gap: 30px; align-items: center;}
.service__item figure{ margin: 0;}
.service__item h3{ margin: 0; padding: 0; font-size: 24px; font-weight: 700; text-transform: uppercase; color: var(--black);}
.service__item p{ padding: 0 0 0 110px;}
@keyframes animate-stroke{
	0%{
        stroke-dasharray: 2230px;
        stroke-dashoffset: 2230px;
	}
	1% {
    	stroke-dashoffset: 2230px;
	}
	100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 2230px;
	}
}

/* ==========================
        About Page
========================== */
.inner_banner{ margin: 0; padding: 80px 0; background: var(--primary); text-align: center;}
.inner_banner p{ margin: 0; padding: 0; color: var(--white);}

.vision_sec{ margin: 0; padding: 80px 0;}
.vision_sec .card{ margin: 0; padding: 30px 20px; height: 100%; border: 1px solid rgba(0,0,0,0.5); border-radius: 25px; transition: all 0.4s ease-in-out;}
.vision_sec .card:hover{ border-color: var(--primary);}
.vision_sec .card img{ transition: all 0.6s ease-in-out;}
.vision_sec .card:hover img{ transform: scale(1.1);}
.vision_sec .card-img-top{ margin: 0 auto; max-width: 70%; min-height: 205px; object-fit: cover;}
.vision_sec h2{ margin: 0 0 20px; padding: 0; font-size: 30px;}

.industies_sec{ margin: 0; padding: 0 0 80px;}
.industies_sec p{ text-align: center; margin-bottom: 50px;}
.industies_box{ padding: 10px; display: flex; align-items: center; gap: 15px; justify-content: center; width: 100%; border: 1px solid var(--black); border-radius: 20px; transition: all 0.4s ease-in-out;}
.industies_box img{ width: 80px; height: 80px;}
.industies_box:hover{ border-color: var(--primary); background: var(--primary);}
.industies_box h3{ margin: 0; padding: 0; font-size: 24px; font-weight: 500; transition: all 0.4s ease-in-out;}
.industies_box:hover h3{ color: var(--white);}

.contact-cta{ margin: 0; padding: 0 0 40px;}
.contact-cta .cta-buttons{ padding-top: 30px;}

/* ==========================
        Service Page
========================== */
.ftco-section{ padding: 80px 0;}
.ftco-section h2{ margin-bottom: 50px;}
.service-item{ margin: 0 0 30px; padding: 40px; background: #f9f9f9; border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); height: calc(100% - 30px); transition: all 0.4s ease-in-out;}
.service-item:hover{ box-shadow: 0 0 40px rgba(0,0,0,0.15);}
.service-item figure{ margin: 0 0 20px; padding: 0; width: 80px; height: 80px;}
.service-item figure img{ object-fit: cover;}
.service-item h3{ margin: 0 0 20px; padding: 0; font-size: 30px; font-weight: 500;}

/* program */
.program_sec{ margin: 0; padding: 0 0 80px;}
.program_sec h2{ margin-bottom: 40px;}
.technologies_item{ margin: 0 0 20px; background: var(--white); box-shadow: 0 0 20px rgba(0,0,0,0.1); padding: 20px; border-radius: 10px; transition: all 0.4s ease-in-out; text-align: center; height: calc(100% - 20px);}
.technologies_item:hover{ background: var(--white); box-shadow: 0 0 40px rgba(0,0,0,0.15);}
.technologies_item:hover figure{ transform: scale(1.1);}
.technologies_item figure{ margin: 0 auto 20px; padding: 0; max-width: 50px; min-height: 55px; transition: all 0.4s ease-in-out; display: flex; align-items: center;}
.technologies_item figure img{ transition: all 0.4s ease-in-out;}
.technologies_item h3{ margin: 0; padding: 0; font-size: 20px; font-weight: 500;}

/* ==========================
        Contact Page
========================== */
.contact_sec{ margin: 0; padding: 80px 0;}
.contact_sec h3{ margin: 0 0 30px; padding: 0; font-size: 30px; font-weight: 500;}
.contact_sec .form-group{ margin: 0 0 20px; padding: 0;}
.contact_sec label{ margin: 0 0 5px; padding: 0; font-size: 16px;}
.contact_sec .form-control{ margin: 0; padding: 0; font-size: 16px; padding: 10px 20px; height: 48px; border-radius: 10px; background: var(--white); border: 1px solid rgba(0,0,0,0.5);}
.contact_sec .form-control:focus{ border-color: var(--primary);}
.contact_sec textarea.form-control{ height: 120px; resize: none;}
.contact_dtl{ margin: 0; padding: 50px; background: var(--primary); border-radius: 50px; height: 100%;}
.contact_dtl h3{ color: var(--white);}
.social_dtl{ margin: 0; padding: 0;}
.social_dtl li{ margin: 0 0 20px; padding: 0; font-size: 16px; display: flex; align-items: center; gap: 15px;}
.social_dtl li a{ color: var(--white);}
.social_dtl li a:hover{ text-decoration: underline;}
.social_dtl li i{ margin: 0; padding: 9px; height: 40px; min-width: 40px; width: 40px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center;}

.yash_sec{ margin: 0; padding: 50px 0 0;}
.yash_sec .cta-buttons{ margin-top: 30px;}
.yash_sec .detail{ padding-bottom: 50px;}
.yash_sec .owner .niv{ margin-left: -60px;}
.yash_sec figure{ margin: 0;}

/* ==========================
        Blog Page
========================== */
.blog-sec{ margin: 0; padding: 80px 0;}
.blog_box{ margin: 0 0 30px; padding: 0; background: rgba(0, 3, 183, 0.1); height: calc(100% - 30px);}
.blog_box figure{ margin: 0; padding: 0; height: 300px; overflow: hidden;}
.blog_box figure img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.6s ease-in-out;}
.blog_box:hover figure img{ transform: scale(1.1);}
.blog_box .detail{ margin: 0; padding: 30px;}
.blog_box h3{ margin: 0 0 20px; padding: 0; font-size: 30px; font-weight: 500;}
.blog_box h3 a{ color: var(--black);}
.blog_box:hover h3 a{ color: var(--primary);}
.blog_box p{ margin: 0 0 20px;}

/* ==========================
        Team Page
========================== */
.team-sec{ margin: 0; padding: 80px 0;}
.team-sec figure{ margin: 0; padding: 0;}
.team-sec figure img{ width: 70%;}
.team-sec h2{ margin: 0; padding: 0; font-size: 40px; font-weight: 600; color: var(--primary);}
.team-sec span{ margin: 0 0 30px; padding: 0; font-size: 40px; font-weight: 600; color: var(--black); display: block;}

.our-team{ margin: 0; padding: 0 0 80px;}
.our-team h2{ margin-bottom: 30px;}
.team_box{ margin: 0 0 30px; padding: 0; text-align: center;}
.team_box figure{ margin: 0 auto 20px; padding: 30px 0 0 0; text-align: center; height: 200px; width: 200px; border-radius: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid var(--primary);}
.team_box figure img{ object-fit: cover;}
.team_box h3{ margin: 0; padding: 0; text-align: center;}

/* ==========================
        Careers Page
========================== */
.career_sec{ padding: 80px 0;}
.career_sec .title_career{ padding: 0; margin: 0; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap;}
.job-card{ margin: 0; padding: 0; height: 100%;}
.job-card .card-body{ padding: 30px;}
.job-card .card-body h5{ margin: 0 0 10px 0; font-size: 24px; color: var(--primary);}
.job-card .btns{ width: 114px;}
.filter_btn{ margin: 0;}
.filter_btn button{ transition: all 0.4s ease-in-out;}
.filter_btn button:hover{ background: var(--primary); color: var(--white); border-color: var(--primary);}

.apply_modal{ margin: 0; z-index: 999999;}
.apply_modal .modal-header{ margin: 0; padding: 30px;}
.apply_modal .modal-body{ margin: 0; padding: 30px;}
.apply_modal .form-control:focus{ border-color: var(--primary);}
.apply_modal .butns{ box-sizing: border-box; margin: 0; padding: 10px; display: inline-flex; align-items: center; justify-content: center; text-align: center; border: none; transition: all .5s; background: var(--primary); color: var(--white); font-size: 14px; font-weight: 500; text-transform: uppercase; width: 204px; height: 52px; letter-spacing: 2.8px; position: relative; overflow: hidden;}

/* ==========================
        Portfolio Page
========================== */
.portfolio_sec{ margin: 0; padding: 80px 0;}
.portfolio_sec figure{ margin: 0; padding: 0; border: 2px solid var(--primary);}
.portfolio_sec .portitem{ margin: 0 0 80px;}
.portfolio_sec .portitem figure{ overflow: hidden;}
.portfolio_sec .portitem figure img{ transition: all 0.4s ease-in-out;}
.portfolio_sec .portitem:hover figure img{ transform: scale(1.1);}
.portfolio_sec .visit_link{ margin: 0; padding: 0; font-size: 18px; color: var(--primary); font-weight: 500;}
.portfolio_sec .visit_link:hover{ color: var(--black);}
.modal-backdrop.show{ z-index: -1;}