/* ===== fotn family ===== */
@font-face {
   font-family: ubuntu;
   src: url(./aseets/fonts/Ubuntu/Ubuntu-Regular.ttf);
}

/* ===== webiste color ===== */
:root {
   --primary-color: #1363C6;
   --secondary-color: #15ACE1;
   --light-color: #F4F7FE;
   --dark-color: #14183E;
   --light-white: #dee2e6;

}

/* ======= navbar section ======= */
header {
   position: sticky !important;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1020;
   background-color: var(--primary-color) !important;
   transition: 0.5s !important;
}



.navbar-brand h1 {
   color: var(--light-color) !important;
   font-weight: 700 !important;
   font-family: ubuntu !important;
}

.navbar-brand h1 span {
   font-size: 50px !important;
}

.navbar-nav .nav-link {
   margin-right: 35px !important;
   padding: 0px !important;
   color: rgba(255, 255, 255, .7) !important;
   font-size: 16px !important;
   font-family: ubuntu !important;
}

.navbar_icons .fa-magnifying-glass {
   color: var(--light-color) !important;
}

/* ======= hero sectio ======= */
.hero_div {
   background-image: url(./aseets/imgaes/hero_banner.png) !important;
   background-position: center !important;
   background-size: cover !important;
   background-repeat: no-repeat !important;
   background-color: var(--primary-color) !important;

}

.hero_section {
   padding-top: 130px !important;
}

.hero_btn span {
   color: var(--light-color) !important;
   border: 1px solid var(--light-color) !important;
   border-radius: 30px !important;
   padding: 5px 18px !important;
   text-align: center !important;
   font-family: ubuntu !important;
}

.hero_heading {
   padding-top: 15px !important;
}

.hero_heading h1 {
   font-size: 4rem !important;
   color: var(--light-color) !important;
   font-family: ubuntu !important;
   font-weight: 700 !important;
}

.hero_paragraph {
   color: var(--light-color) !important;
   font-family: ubuntu !important;
   padding-top: 10px !important;
   font-weight: 400 !important;
   font-size: 17px !important;
}

.btn_section {
   padding-top: 20px !important;
}

.btn_section .button_1 {
   border-radius: 40px !important;
   padding: 20px 40px !important;
   background-color: var(--light-color) !important;
   color: var(--dark-color) !important;
   font-family: ubuntu !important;
}

.btn_section .button_2 {
   border: 1px solid var(--light-color) !important;
   border-radius: 40px !important;
   padding: 20px 40px !important;
   color: var(--light-color) !important;
   margin-left: 10px !important;
   font-family: ubuntu !important;
}

.hero_images img {
   margin-top: 55px !important;
   max-width: 100% !important;
   height: auto !important;
}

.navbar-toggler {
   box-shadow: var(--light-color) !important;
}

.navbar-toggler-icon {
   color: var(--light-color) !important;
}

/* ====== about section ======== */
.about_wrapper {
   padding-top: 5rem !important;
}

.about_images {
   position: relative;
   /* Parent element ko positioned karo */
}

.about_images::after {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url(./aseets/imgaes/bg-about-img.png) top left no-repeat !important;
   background-size: contain !important;
   /* z-index: 1 !important; */
}

.about_section_content {
   padding-top: 7rem !important;
   padding-left: 2rem !important;
}


.about_name_section span {
   border: 1px solid var(--light-white) !important;
   border-radius: 50rem !important;
   padding: 5px !important;
   padding-right: 1rem !important;
   padding-left: 1rem !important;
   color: var(--primary-color) !important;
   font-size: 1rem;

}

.about_heading {
   margin-top: 20px !important;

}

.about_heading h1 {
   font-family: ubuntu !important;
   line-height: 1.2 !important;
   color: #14183e !important;
   font-weight: 900 !important;
}

.about_parapragh {
   margin-top: 1rem !important;

}

.about_parapragh p {
   font-size: 17px !important;
}

.about_icon {
   margin-top: 10px !important;
}

.about_icon .fa-check {
   color: var(--primary-color) !important;
   font-weight: 700 !important;
   font-size: 15px !important;
}

.icon_name {
   margin-left: 8px !important;
}

.icon_name {
   font-size: 1rem !important;
   font-family: ubuntu !important;
   color: var(--dark-color) !important;
   font-weight: 500 !important;
}

.socail_media_icon {
   padding-top: 15px !important;
}

.btn {
   background-color: var(--primary-color) !important;
   font-size: 17px !important;
   font-weight: 500 !important;
}

.btn:hover {
   color: #fff !important;
   background-color: #1054a8 !important;
   border-color: #0f4f9e !important;
}

.fa-brands {
   margin: 5px !important;
   color: var(--primary-color) !important;
   border: 1px solid var(--primary-color) !important;
   padding: 10px 12px !important;
   border-radius: 100% !important;

}

.fa-brands:hover {
   background-color: var(--primary-color) !important;
   color: var(--light-white) !important;
}

/* ===== card section ======= */

.card_wrapper {
   background-color: #f4f7fe !important;
   margin-top: 100px !important;
   padding-bottom: 80px !important;
}

.card_section {
   padding-top: 350px !important;

}

.card_title span {
   border: 1px solid var(--light-white) !important;
   border-radius: 50rem !important;
   padding: 5px !important;
   padding-right: 1rem !important;
   padding-left: 1rem !important;
   color: var(--primary-color) !important;
   font-size: 1rem;
}

.card_sub_tittle {
   padding-top: 15px !important;
}

.card_sub_tittle h1 {
   font-family: ubuntu !important;
   color: #14183e !important;
   font-weight: 700 !important;
   /* font-size: 3rem !important; */
}

.card_paragraph {
   padding-top: 20px !important;
}

.card_paragraph p {
   font-size: 16px !important;
}

.card_btn {
   padding-top: 10px !important;
}

.card_section_1 {
   display: flex !important;
   justify-content: center !important;
}

.card {
   width: 360px !important;
   height: 400px !important;
   padding: 50px 30px !important;
   border: none !important;
   margin-top: 100px !important;

}

.card:hover {
   background-color: var(--primary-color) !important;
}

.card:hover .card-title,
.card:hover .card-text,
.card:hover .card_btn {
   color: var(--light-white) !important;
}

.card_item {
   margin-top: 120px !important;
   margin-left: 10px !important;
}

.card-item1 {
   margin-top: 0px !important;
}

.card-item3 {
   margin-top: 20px !important;
}

.card-body {
   /* padding-top: 50px !important; */
}

.card-body .fa-robot {
   width: 90px !important;
   height: 90px !important;
   border-radius: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   margin: 0 auto !important;
   background-color: #f4f7fe !important;
   font-size: 30px !important;
   color: var(--primary-color) !important;

}

.card-body .fa-graduation-cap {
   width: 90px !important;
   height: 90px !important;
   border-radius: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   margin: 0 auto !important;
   background-color: #f4f7fe !important;
   font-size: 30px !important;
   color: var(--primary-color) !important;
}

.card-body .fa-power-off {
   width: 90px !important;
   height: 90px !important;
   border-radius: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   margin: 0 auto !important;
   background-color: #f4f7fe !important;
   font-size: 30px !important;
   color: var(--primary-color) !important;
}

.card-body .fa-brain {
   width: 90px !important;
   height: 90px !important;
   border-radius: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   margin: 0 auto !important;
   background-color: #f4f7fe !important;
   font-size: 30px !important;
   color: var(--primary-color) !important;
}

.card-title {
   font-family: ubuntu !important;
   padding-top: 20px !important;
   letter-spacing: 1px !important;
}

.card-text {
   color: var(--dark-color) !important;
}

.card_btn {
   color: var(--primary-color) !important;
   text-decoration: none !important;

}

/* ===== feature section ===== */
.feature_wrapper {
   background-image: url(./aseets/imgaes/hero_banner.png) !important;
   background-size: cover !important;
   background-color: var(--primary-color) !important;
   padding: 10px !important;
}

.feature_section {
   padding-top: 100px !important;
}

.feature_section_heading span {
   border: 1px solid var(--light-color) !important;
   border-radius: 50rem !important;
   padding: 5px !important;
   padding-right: 1rem !important;
   padding-left: 1rem !important;
   color: var(--light-white) !important;
   font-size: 1rem;
   font-weight: 600 !important;
   cursor: pointer !important;
}

.feature_heading {
   padding-top: 20px !important;
}

.feature_heading h1 {
   color: var(--light-color) !important;
   font-weight: 900 !important;
   font-family: ubuntu !important;
}

.feature_sub_heading {
   padding-top: 10px !important;
}

.feature_sub_heading p {
   color: var(--light-color) !important;
   font-size: 18px !important;
}

.sub_title_icon {
   margin-top: 20px !important;

}

.feature_icon {
   margin-top: 20px !important;
}

.feature_icon .fa-check {
   color: var(--primary-color) !important;
   background-color: var(--light-color) !important;
   border-radius: 100% !important;
   padding: 8px !important;
   font-weight: 900 !important;
   font-size: 20px !important;
}

.feature_icon .icon_heading {
   color: var(--light-color) !important;
   margin-left: 10px !important;
   text-align: center !important;
   font-family: ubuntu !important;
}

.feature_user_counter {
   display: flex !important;
}

.feature_userr {
   display: flex !important;
   background-color: rgba(256, 256, 256, 0.1) !important;
   border-radius: 10px !important;
   width: 400px !important;
   margin-top: 30px !important;
}

.feature_userr {
   display: flex !important;
   background-color: rgba(256, 256, 256, 0.1) !important;
   border-radius: 10px !important;
   width: 400px !important;
   margin-top: 30px !important;
}

.feature_user2 {
   margin-left: 25px !important;
}

.feature_userr .fa-users {
   padding-top: 20px !important;
   color: var(--light-color) !important;
   font-size: 50px !important;
   margin-left: 15px !important;
   font-weight: bolder !important;
}

.feature_counter {
   margin-left: 20px !important;
   margin-top: 10px !important;
}

.feature_counter h2 {
   color: var(--light-color) !important;
   font-family: ubuntu !important;
   font-weight: 700 !important;
}

.feature_counter p {
   color: var(--light-color) !important;
   font-size: 18px !important;
}

.feature_userr .fa-check {
   padding-top: 20px !important;
   color: var(--light-color) !important;
   font-size: 50px !important;
   margin-left: 15px !important;
   font-weight: 700 !important;
}

.feature_images {
   padding-top: 150px !important;
   text-align: center !important;
}

.feature_images img {
   margin-left: 80px !important;
}

/* ===== images section ===== */

.images_wrapper {
   padding-top: 60px !important;
   text-align: center !important;
}

.images_btn span {
   border: 1px solid var(--light-white) !important;
   border-radius: 50rem !important;
   padding: 5px !important;
   padding-right: 1rem !important;
   padding-left: 1rem !important;
   color: var(--primary-color) !important;
   font-size: 1rem;
   cursor: pointer !important;

}

.images_heading {
   padding-top: 20px !important;
}

.images_heading h1 {
   font-family: ubuntu !important;
   font-size: 45px !important;
   font-weight: 700 !important;
}

.imgaes_card1 {
   background-image: url(./aseets/imgaes/card_img1.jpg) !important;
   background-position: center !important;
   background-size: cover !important;
   border-radius: 10px !important;
   height: 470px !important;
   cursor: pointer !important;
   transition: transform 0.3s ease-in-out;
   position: relative;
   overflow: hidden;
}


.imgaes_card1:hover {
   transform: scale(1.05) !important;

}

.imgaes_card2 {
   background-image: url(./aseets/imgaes/card_img2.jpg) !important;
   background-position: center !important;
   background-size: cover !important;
   border-radius: 10px !important;
   height: 470px !important;
   cursor: pointer !important;
   transition: transform 0.3s ease-in-out;
   position: relative;
   overflow: hidden;

}

.imgaes_card2:hover {
   transform: scale(1.05) !important;

}

.imgaes_card3 {
   background-image: url(./aseets/imgaes/card_img3.jpg) !important;
   background-position: center !important;
   background-size: cover !important;
   border-radius: 10px !important;
   height: 470px !important;
   cursor: pointer !important;
   transition: transform 0.3s ease-in-out;
   position: relative;
   overflow: hidden;

}

.imgaes_card3:hover {
   transform: scale(1.05) !important;

}

.images_sub_title {
   padding-top: 300px !important;
   text-align: left !important;
   margin-left: 20px !important;
}

.images_sub_title span {
   background-color: var(--dark-color) !important;
   opacity: 0.7 !important;
   border-radius: 50rem !important;
   padding: 3px !important;
   padding-right: 1rem !important;
   padding-left: 1rem !important;
   color: var(--light-white) !important;
   font-size: 1rem;
   cursor: pointer !important;
}

/* .images_card1::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(rgba(20, 24, 62, 0), var(--dark));
   border-radius: 10px;
} */

.images_sub_heading {
   text-align: left !important;
   margin-left: 20px !important;
   padding-top: 20px !important;
}

.images_sub_heading h5 {
   color: var(--dark-color) !important;
   font-family: ubuntu !important;
   font-weight: 900 !important;

}

.icon .fa-arrow-right {
   display: flex !important;
   justify-content: flex-start !important;
   justify-content: center !important;
   align-items: center !important;
   margin-left: 20px !important;
   background-color: var(--primary-color) !important;
   width: 40px !important;
   height: 40px !important;
   border-radius: 100% !important;
   color: var(--light-color) !important;
   font-size: 18px !important;
}

/* ===== frequently question answer ===== */
.frequently_answer_section {
   padding-top: 100px !important;
   text-align: center !important;
}

.popular_btn span {
   border: 1px solid var(--light-white) !important;
   border-radius: 50rem !important;
   padding: 3px !important;
   padding-right: 1rem !important;
   padding-left: 1rem !important;
   color: var(--primary-color) !important;
   opacity: 1 !important;
   font-size: 1rem;
   cursor: pointer !important;
}
.frequently_answer_heading {
   padding-top: 20px !important;
}
.frequently_answer_heading h1 {
   color: var(--dark-color) !important;
   font-weight: 900 !important;
   font-family: ubuntu !important;
}
.accordion-item {
   margin-top: 20px !important;
   border: none !important;
}

.accordion .accordion-body {
   /* padding: 15px 0 0 0; */
   text-align: left !important;
   padding-left: 0px !important;
   border: none !important;
}
.accordion .accordion-button {
   background: var(--light-color) !important;
   /* border-radius: 2px; */
   border-top-left-radius: 10px !important;
   border-top-right-radius: 10px !important;
   font-family: ubuntu !important;
   font-weight: 500 !important;
}
.accordion .accordion-button:not(.collapsed) {
   color: #FFFFFF;
   background: var(--primary-color) !important;
   box-shadow: none;
}
.accordion-body span {
   font-size: 17px !important;
   color: var(--dark-color) !important;
}
/* ===== client section ===== */
.card_sub_tittle1 {
   padding-top: 15px !important;
}
.card_sub_tittle1 h1 {
   font-family: ubuntu !important;
   color: #14183e !important;
   font-weight: 700 !important;
   font-size: 2.8rem !important;
}

@keyframes scroll-right-to-left {
   0% { transform: translateX(100%); }
  
 }