@charset "UTF-8";
/* 
-----------------
Author : Rifat Bhuiya
Author E-mail : hello.rifatbhuiya@gmail.com
Version : 01.00
-----------------

-----------------
Table of Content
-----------------
0. Common CSS Start
1. Header CSS Start
2. Banner CSS Start
3. Services CSS Start
4. Activity Counter CSS Start
5. BTT CSS Start
6. Footer CSS Start
7. Page Indication CSS Start
8. About Us CSS Start
9. Blog CSS Start
10. Contact Us CSS Start
11. Service Page CSS Start
*/

:root {
    --primary_color: #090c7c;
    --yellow_color: #fccf5c;
    --white_color: #ffffff;
    --off_white_color: #f5f5f5;
    --mega_menu_color: #ebebf1;
    --linkedin_blue: #0762C8;
    --footer_color: #020316;
    --black_color: #000000;
    --gray_color: #d9e2e6;
    --text_color: #121213;
    --h1: 48px;
    --h2: 40px;
    --h3: 33px;
    --h4: 28px;
    --h5: 23px;
    --h6: 19px;
    --lg: 19px;
    --bs: 16px;
    --sm: 14px;
    --serif: 'Roboto Serif', serif;
    --sans-serif: 'Montserrat', sans-serif;
    --transition: all linear .3s;
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 25px;
    --radius-round: 50%;
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
ol,
li,
span,
address {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

a {
    display: inline-block;
    text-decoration: none;
}

img,
svg {
    vertical-align: middle;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}

.section-gap {
    padding: 64px 0;
}

.section-heading h3 {
    position: relative;
    top: 0;
    left: 0;
    font-family: var(--serif);
    font-weight: 700;
    color: var(--primary_color);
    padding-left: 16px;
}

.section-heading h3::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    height: 100%;
    width: 8px;
    border: 1px solid var(--primary_color);
    background-color: var(--yellow_color);
    border-radius: var(--lg);
    -webkit-border-radius: var(--lg);
    -moz-border-radius: var(--lg);
    -ms-border-radius: var(--lg);
    -o-border-radius: var(--lg);
}

.content-gap {
    margin-top: 40px;
}

.content-img img {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .3);
    border-radius: var(--radius-md);
    -webkit-border-radius: var(--radius-md);
    -moz-border-radius: var(--radius-md);
    -ms-border-radius: var(--radius-md);
    -o-border-radius: var(--radius-md);
}

body {
    font-size: var(--bs);
    font-weight: 400;
    font-family: var(--sans-serif);
    color: var(--text_color);
    background-color: var(--white_color);
    scroll-behavior: smooth;
}

.bg-off-white {
    background-color: var(--off_white_color);
}

.action-btn {
    padding: 12px 64px;
    font-weight: 600;
    font-family: var(--sans-serif);
    color: var(--black_color);
    border: 2px solid var(--black_color);
    border-radius: var(--radius-md);
    -webkit-border-radius: var(--radius-md);
    -moz-border-radius: var(--radius-md);
    -ms-border-radius: var(--radius-md);
    -o-border-radius: var(--radius-md);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.action-btn:hover {
    color: var(--white_color);
    background-color: var(--black_color);
}

.move-on-hover {
    overflow: hidden;
    transform-origin: 50% 0;
    transform: perspective(999px) rotateX(0deg) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.move-on-hover:hover {
    transform: perspective(999px) rotateX(7deg) translate3d(0, -4px, 5px);
}
/* Common CSS End */

.header-top {
    padding: 2px 0;
    background-color: var(--yellow_color);
}

.header-top .left ol a {
    font-weight: 600;
    font-size: var(--sm);
    color: var(--text_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.header-top .left ol a:hover span {
    text-decoration: underline;
    color: var(--black_color);
}

.header-top .left ol a i {
    font-size: var(--bs);
}

.header-top .working-hour {
    font-size: var(--sm);
    font-weight: 600;
    color: var(--text_color);
}

.header-top .right ol a {
    color: var(--text_color);
    font-size: 20px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.header-top .right ol a:hover {
    opacity: .8;
}

.menubar {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .150);
}

.menubar .navbar {
    padding: 4px 0;
    background-color: var(--white_color) !important;
}

.menubar .navbar-brand img {
    width: 240px;
}

.menubar .navigation li {
    margin-left: 16px;
}

.menubar .navigation a {
    font: 700 var(--bs)/1.5 var(--sans-serif);
    color: var(--primary_color);
    position: relative;
    top: 0;
    left: 0;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.menubar .navigation a::after {
    position: absolute;
    content: '';
    height: 1px;
    width: 0;
    background-color: var(--primary_color);
    bottom: 4px;
    left: 8px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.menubar .navigation a::before {
    position: absolute;
    content: '';
    height: 1px;
    width: 0;
    background-color: var(--primary_color);
    bottom: 0;
    left: 8px;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.menubar .navigation a:hover::after,
.menubar .navigation a.active::after {
    width: calc(100% - 40px);
}

.menubar .navigation a:hover::before,
.menubar .navigation a.active::before {
    width: calc(100% - 30px);
}

.menubar .mega_menu {
    position: relative;
    top: 0;
    left: 0;
}

.menubar .mega_menu .fa-plus {
    display: none;
}

.menubar .mega_menu_content {
    position: absolute;
    top: 40px;
    right: -340px;
    width: 800px;
    padding: 16px 12px;
    background-color: var(--mega_menu_color);
    border-radius: var(--radius-md);
    -webkit-border-radius: var(--radius-md);
    -moz-border-radius: var(--radius-md);
    -ms-border-radius: var(--radius-md);
    -o-border-radius: var(--radius-md);
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .150);
    display: none;
    animation: mega_menu .3s linear 1;
    -webkit-animation: mega_menu .3s linear 1;
    z-index: 50;
}

@keyframes mega_menu {
    0% {
        transform: translateY(8px);
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        -ms-transform: translateY(8px);
        -o-transform: translateY(8px);
    }
    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}

.menubar .mega_menu:hover .mega_menu_content {
    display: block;
}

.menubar .mega_menu .nav-link i {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.menubar .mega_menu:hover .nav-link i {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.menubar .mega_menu_content::after {
    position: absolute;
    content: '';
    top: -8px;
    left: 50%;
    height: 16px;
    width: 16px;
    background-color: var(--mega_menu_color);
    transform: translateX(-50%) rotate(45deg);
    -webkit-transform: translateX(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) rotate(45deg);
    -o-transform: translateX(-50%) rotate(45deg);
    box-shadow: -1px -1px 1px 0 rgba(0, 0, 0, .1);
}

.menubar .mega_menu_content li {
    margin-bottom: 12px;
    list-style-position: inside;
    list-style-type: square;
}

.menubar .mega_menu_content li:last-child {
    margin-bottom: 0;
}

.menubar .mega_menu_content li a {
    font-weight: 500;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.menubar .mega_menu_content li a.active,
.menubar .mega_menu_content li a:hover {
    text-decoration: underline;
    opacity: .9;
}

.menubar .mega_menu_content a::after,
.menubar .mega_menu_content a::before {
    display: none;
}

.menubar .scrolled {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .150);
    opacity: .95;
    animation: scrolled-anim 0.5s linear;
    -webkit-animation: scrolled-anim 0.5s linear;
}
  
@keyframes scrolled-anim {
    0% {
      top: -32px;
    }
    100% {
      top: 0;
    }
}
/* Header CSS End */

.banner-content {
    height: 640px;
    color: var(--white_color);
    position: relative;
    top: 0;
    left: 0;
    background-attachment: fixed;
    clip-path: polygon(50% 0%, 100% 0, 100% 92%, 30% 100%, 30% 100%, 0 92%, 0 0);
    z-index: 1;
}

.banner-content::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(9, 13, 124, 0.7);
    z-index: -1;
}

.banner-content h1 {
    font-weight: 700;
    line-height: 1.2;
}

.banner-content p {
    margin: 12px 0 24px;
    font-size: var(--lg);
}

.banner-content .action-btn {
    color: var(--white_color);
    border: 2px solid var(--white_color);
}

.banner-content .action-btn:hover {
    color: var(--primary_color);
    background-color: var(--white_color);
}

.banner-slide .slick-dots {
    position: absolute;
    top: 50%;
    right: 40px;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.banner-slide .slick-dots li {
    margin: 4px 0;
    height: 16px;
    width: 16px;
    background-color: transparent;
    border: 2px solid var(--white_color);
    cursor: pointer;
    border-radius: var(--radius-round);
    -webkit-border-radius: var(--radius-round);
    -moz-border-radius: var(--radius-round);
    -ms-border-radius: var(--radius-round);
    -o-border-radius: var(--radius-round);
}

.banner-slide .slick-dots li button {
    border: none;
    color: transparent;
    height: 12px;
    width: 12px;
    background-color: var(--white_color);
    opacity: 0;
    border-radius: var(--radius-round);
    -webkit-border-radius: var(--radius-round);
    -moz-border-radius: var(--radius-round);
    -ms-border-radius: var(--radius-round);
    -o-border-radius: var(--radius-round);
}

.banner-slide .slick-dots li.slick-active button {
    opacity: 1;
}

.slider-img img {
    position: relative;
    top: 0;
    left: 0;
    border-radius: var(--radius-lg);
    -webkit-border-radius: var(--radius-lg);
    -moz-border-radius: var(--radius-lg);
    -ms-border-radius: var(--radius-lg);
    -o-border-radius: var(--radius-lg);
}
/* Banner CSS End */

.services a {
    width: 100%;
}

.service-content {
    margin-top: 20px;
    text-align: center;
    padding: 20px 16px;
    background-color: var(--off_white_color);
    border-radius: var(--radius-sm);
    -webkit-border-radius: var(--radius-sm);
    -moz-border-radius: var(--radius-sm);
    -ms-border-radius: var(--radius-sm);
    -o-border-radius: var(--radius-sm);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .150);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.service-content:hover {
    background-color: var(--yellow_color);
}

.service-content .img {
    margin-bottom: 16px;
}

.service-content .img img {
    padding: 4px;
    border: 1px solid rgba(9, 13, 124, 0.2);
    background-color: var(--white_color);
    border-radius: var(--radius-sm);
    -webkit-border-radius: var(--radius-sm);
    -moz-border-radius: var(--radius-sm);
    -ms-border-radius: var(--radius-sm);
    -o-border-radius: var(--radius-sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.service-content:hover .img img {
    border: 1px solid rgba(9, 13, 124, 0.5);
}

.service-content h5 {
    font-weight: 500;
    color: var(--primary_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.service-content h5:hover {
    text-decoration: underline;
}
/* Services CSS End */

.activity-banner {
    padding: 80px 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.activity-banner::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(9, 13, 124, 0.7);
    z-index: -1;
}

.activity-content {
    text-align: center;
    color: var(--white_color);
}

.activity-content .img {
    margin-bottom: 8px;
}

.activity-content .img img {
    width: 60px;
}

.activity-content .digit {
    font-size: 50px;
    font-weight: 500;
}

.activity-content h4 {
    margin-top: 8px;
    font-weight: 300;
}
/* Activity Counter CSS End */

.page-action {
    padding: 24px 0;
    background-color: rgba(252, 207, 92, 0.9);
}

.page-action h5 {
    margin-top: 4px;
}
/* Page Action CSS End */

.btt {
    position: fixed;
    bottom: 32px;
    right: 24px;
    z-index: 33;
}
  
.btt i {
    height: 44px;
    width: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 20px;
    color: var(--white_color);
    background-color: var(--primary_color);
    border-radius: var(--radius-round);
    -webkit-border-radius: var(--radius-round);
    -moz-border-radius: var(--radius-round);
    -ms-border-radius: var(--radius-round);
    -o-border-radius: var(--radius-round);
    cursor: pointer;
    animation: back_to_top linear 0.8s 3;
    -webkit-animation: back_to_top linear 0.8s 3;
}
  
.btt i:hover {
    opacity: 0.8;
}
  
@keyframes back_to_top {
    0% {
      transform: scale(0.4);
      -webkit-transform: scale(0.4);
      -moz-transform: scale(0.4);
      -ms-transform: scale(0.4);
      -o-transform: scale(0.4);
    }
  
    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
    }
}
/* BTT CSS End */

.page-footer {
    color: var(--off_white_color);
    padding: 56px 0;
    background-color: var(--footer_color);
    --gray_color: #a3afb4;
}

.page-footer .footer-content h4 {
    margin-bottom: 16px;
}

.page-footer .footer-content ol li {
    margin-bottom: 12px;
}

.page-footer .footer-content ol li:last-child {
    margin-bottom: 0;
}

.page-footer .footer-content ol a {
    color: var(--gray_color);
    font-size: var(--sm);
}

.page-footer .footer-content ol address {
    font-style: italic;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.page-footer .footer-content ol address:hover {
    text-decoration: underline;
}

.footer-content.services ul li {
    margin-bottom: 8px;
}

.footer-content.services ul li:last-child {
    margin-bottom: 0;
}

.footer-content.services ul a {
    font-size: var(--sm);
    color: var(--gray_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.footer-content.services ul a:hover {
    text-decoration: underline;
}

.footer-content .social a {
    font-size: 32px;
    color: var(--gray_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.footer-content .social a:hover {
    color: var(--off_white_color);
}

.footer-content .details {
    margin-top: 8px;
}

.footer-content .details a {
    color: var(--gray_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.footer-content .details a:hover {
    text-decoration: underline;
}

.copyright {
    padding: 12px 0;
    background-color: var(--gray_color);
}

.copyright span {
    font-size: var(--sm);
    font-weight: 500;
}
/* Footer CSS End */

.page-indication {
    padding: 40px 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    color: var(--off_white_color);
}

.page-indication::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(9, 13, 124, 0.5);
    z-index: -1;
}

.page-indication i {
    font-size: 22px;
    color: var(--white_color);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.page-indication i:hover {
    color: var(--yellow_color);
}

.page-indication span {
    font-weight: 500;
}
/* Page Indication CSS End */

.about-content h2 {
    font-weight: 300;
    color: var(--black_color);
    font-family: var(--serif);
}

.about-content h6 {
    font-weight: 600;
    color: var(--primary_color);
}

.about-content p {
    margin-top: 16px;
}

.about-content p b {
    font-weight: 600;
}

.about-action {
    margin-top: 16px;
}

.about-action a {
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 22px;
    color: var(--white_color);
    background-color: var(--linkedin_blue);
    border-radius: var(--radius-sm);
    -webkit-border-radius: var(--radius-sm);
    -moz-border-radius: var(--radius-sm);
    -ms-border-radius: var(--radius-sm);
    -o-border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.about-action a:hover {
    color: var(--linkedin_blue);
    background-color: var(--white_color);
}
/* About Us CSS End */

.blog {
    margin: 20px 0 40px;
}

.blog-card {
    margin-top: 20px;
}

.blog-card-header img {
    height: 180px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .150);
    border-radius: var(--radius-md);
    -webkit-border-radius: var(--radius-md);
    -moz-border-radius: var(--radius-md);
    -ms-border-radius: var(--radius-md);
    -o-border-radius: var(--radius-md);
}

.blog-card-body h6 {
    color: var(--black_color);
}

.blog-card-body p {
    line-height: 1.2;
    margin: 8px 0;
    font-size: var(--sm);
}

.blog-card-footer a {
    padding: 8px 0;
    font-weight: 500;
    font-size: var(--sm);
    width: 100%;
    color: var(--black_color);
    border: 1px solid rgba(9, 13, 124, 0.150);
    background-color: var(--off_white_color);
    border-radius: var(--radius-sm);
    -webkit-border-radius: var(--radius-sm);
    -moz-border-radius: var(--radius-sm);
    -ms-border-radius: var(--radius-sm);
    -o-border-radius: var(--radius-sm);
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
}

.blog-card-footer a:hover {
    background-color: var(--white_color);
    border: 1px solid rgba(9, 13, 124, 0.3);
}

.blog-card-footer a i {
    font-size: var(--sm);
}
/* Blog CSS End */

.contact-content h2 {
    color: var(--black_color);
    margin-bottom: 4px;
}
/* Contact CSS End */

.service-page-content {
    --h1: 32px;
    --h2: 29px;
    --h3: 26px;
    --h4: 23px;
    --h5: 20px;
    --h6: 18px;

    --black_color: #111111;

    color: var(--black_color);
}

.service-page-content h1,
.service-page-content h2,
.service-page-content h3,
.service-page-content h4,
.service-page-content h5,
.service-page-content h6 {
    color: var(--black_color);
    font-weight: 500;
}

.service-page-content ol,
.service-page-content ul {
    padding-left: 20px;
}

.service-page-content li {
    margin: 4px 0;
    list-style-position: inside;
}

.service-page-content p b,
.service-page-content li b {
    font-weight: 600;
}

.service-page-content ol li {
    list-style-type: square;
}

.service-page-content ul li {
    list-style-type: disc;
}

.service-page-content p {
    line-height: 1.3;
}
/* Service Page CSS End */