/*===============================================================================
   TEMPLATE      : 
   PROJECT       : 
   VERSION       : 
   DEVELOPER     : SUJIT DAS
   DESCRIPTION   :
   RELEASE DATE  : 
   LICENSE       : 
   WEBSITE       : 
==================================================================== ©  ======*/
:root {
   --black: #000;
   --active: #dbeafe;
   --color: #f97316;
   --shadow: #f8fafc;
   --color-text: #fff;
   --some-one: rgb(100 116 139);
   --hover-color: #ea580c;
   --color-primary: #1e40af;
   --color-bg-tertiary: #0f172a;
}



/* =================== 01. VARIABLES OR GLOBAL =================== */
html, body {
   height: 100%;
   margin: 0;
}

body {
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
}

a {
   text-decoration: none;
   margin: 0px;
}

h1 {
   margin: 0px;
}

h3 {
   margin: 0px;
}

h6 {
   margin: 0px;
}

p {
   font-size: 16px;
   margin: 0px;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--active);
}

::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, var(--color-primary), var(--active));
   border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(180deg, var(--color-primary), var(--active));
}

.animate-on-scroll {
  --animate-duration: 2s;
}



/* =================== 02. HEADER =================== */
.navbar_brand {
   display: flex;
   justify-content: space-between;
   text-decoration: none;
}

.navbar_brand img {
   width: 40px;
   height: 40px;
}

.navbar_brand p {
   margin-left: 10px;
   margin-bottom: 0px;
   line-height: 1.2;
}

.navbar_brand p strong {
   font-size: 18px;
   color: var(--color-text);
}

.navbar_brand p span {
   font-size: 16px;
   color: var(--active);
}

.bg_light {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 9;
   background: transparent;
}

.nav-item {
   margin: 0px 15px;
}

.navbar-nav .nav-link.active {
   color: var(--color-text) !important;
}

.nav-link {
   font-size: 16px;
   color: var(--color-text) !important;
}

.phone_call {
   font-size: 16px;
   color: var(--active);
   font-weight: 600;
   text-decoration: none;
   margin-right: 30px;
}

.phone_call i {
   margin-right: 15px;
}

.btn_primary {
   font-weight: 600;
   padding: 5px 15px;
   color: var(--color-text);
   border-radius: 20px;
   background-color: var(--color);
   transition: all 900ms ease-in-out;
}

.btn_primary:hover {
   color: var(--color-text);
   background-color: var(--hover-color);
}

.custom_sticky {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 57px;
   z-index: 999;
   padding: 15px 20px;
   transition: all 0.3s ease;
   background: transparent;
}



/* =================== 03. BANNER =================== */
.bg_banner{
   background: 
       linear-gradient(
           rgba(30,64,175,0.7), 
           rgba(15,23,42,0.7)    
       ),
       url('../img/jpg/photo-1497366216548-37526070297c.jpg'); 
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: 100vh;
}

.banner_text {
   width: 600px;
    margin-top: 150px;
}

.banner_text h1 {
   font-size: 56px;
   font-weight: 800;
   margin-top: 30px;
   color: var(--color-text);
   margin-bottom: 0px;
}

.banner_text h1 span {
   color: var(--color);
}

.banner_text p {
   font-size: 22px;
   color: var(--active);
   margin-top: 30px;
   margin-bottom: 0px;
}

.trusted {
   display: flex;
   width: 350px;
   padding: 5px 15px;
   justify-content: space-between;
   align-items: center;
   border: 1px solid var(--active);
   border-radius: 20px;
   background: transparent;
}

.trusted i {
   margin-top: 0;
   position: relative;
}

.trusted p {
   font-size: 16px;
   font-weight: 600;
   color: var(--color-text);
   margin: 0;
}

@keyframes pulse-animation {
   0% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0.8;
   }
   70% {
      transform: translate(-50%, -50%) scale(3);
      opacity: 0;
    }
   100% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;
   }
}

.pulse-dot {
   position: relative;
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--color);
   flex: 0 0 auto;
}

.pulse-dot:before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   background: var(--color-text);
   border-radius: 50%;
   opacity: 0.5;
   transform: translate(-50%, -50%) scale(1);
   animation: pulse-animation 1.5s infinite ease-out;
}

.cta_buttons {
   display: flex;
   gap: 20px;
   margin-top: 30px;
   flex-wrap: wrap;
}

.cta_buttons a {
   font-size: 16px;
   font-weight: 600;
   padding: 12px 30px;
   text-decoration: none;
   border-radius: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   background-color: var(--color); 
   color: var(--color-text);
   transition: background-color 0.4s ease; 
   border: none;
   border: 1px solid var(--color);
}

.cta_buttons a:hover {
   background-color: var(--hover-color);
}

.cta_buttons a:last-child {
   background-color: var(--color-text);
   border: 1px solid var(--color-text);
   color: var(--black);
}

.cta_buttons a:last-child:hover {
   background-color: transparent;
   border: 1px solid var(--active);
   color: var(--color-text);
}

.cta_buttons a i {
   display: inline-block; 
   margin-left: 10px;
   font-weight: 300; 
   transition: transform 0.4s ease; 
}

.cta_buttons a:hover i {
   transform: translateX(5px);
}

.counters {
   display: flex;
   gap: 50px;
   margin-top: 30px;
   flex-wrap: wrap;
}

.counter_item {
   text-align: center;
}

.counter_item i {
   color: var(--color-text);
   font-size: 18px;
   margin-left: 10px;
}

.counter_item .counter {
   font-size: 36px;
   font-weight: 700;
   color: var(--color);
}

.counter_item p {
   font-size: 18px;
   margin-top: 5px;
   color: var(--color-text);
}



/* =================== 04. OUR SERVICE =================== */
.title {
   text-align: center;
   margin-top: 120px;
}

.title h6 {
   font-size: 16px;
   text-transform: uppercase;
   color: var(--color);
   margin-bottom: 0px;
}

.title h1 {
   font-size: 46px;
   font-weight: 800;
   margin-top: 15px;
   margin-bottom: 0px;
}

.title p {
   font-size: 18px;
   color: var(--some-one);
   margin-top: 15px;
   margin-bottom: 30px;
}

.service_card {
   width: 100%;
   padding: 30px;
   margin-top: 30px;
   border-radius: 15px;
   border: 1px solid var(--active);
   transition: all 0.9s ease-in-out;
}

.service_card:hover {
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   background: linear-gradient(135deg, var(--active), var(--color-text));
   transform: translateY(-5px);
}

.service_card i {
   font-size: 32px;
   padding: 12px 15px;
   border-radius: 10px;
   color: var(--color-primary);
   background-color: var(--active);
   transition: all 900ms ease-in-out;
}

.service_card h3 {
   font-size: 22px;
   margin-top: 30px;
}

.service_card p {
   font-size: 16px;
   margin: 30px 0px;
   color: var(--some-one);
}

.service_card a {
   display: flex;
   color: var(--color-primary);
   transition: all 900ms ease-in-out;
}

.service_card a i {
   font-size: 16px;
   padding: 0px;
   margin: 6px 0px 0px 10px;
   background: transparent;
   transition: all 900ms ease-in-out;
}

.service_card:hover i {
   color: var(--color-text);
   background-color: var(--color-primary);
}

.service_card:hover a {
   color: var(--color);
}

.service_card:hover a i {
  color: var(--color);
  transform: translateX(5px);
  background: transparent;
}



/* =================== 05. ABOUT US =================== */
.about_bg {
   position: relative;
   width: 100%;
   margin-top: 120px;
   padding: 100px 0px;
   z-index: 9;
   background-color: var(--shadow);
}

.about_pic {
   position: relative;
}

.about_pic img {
   width: 90%;
   height: 450px;
   border-radius: 15px;
}

.about_count {
   position: absolute;
   bottom: -30px;
   right: 25px;
   padding: 15px;
   border-radius: 15px;
   color: var(--color-text);
   background-color: var(--color);
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.about_count h1{
   font-size: 36px;
   font-weight: 800;
   display: flex;
   align-items: center;
   gap: 5px;
}

.about_count i{
   font-size: 20px;
   margin-top: 5px;
}

.about_count p {
   font-size: 16px;
}

.about_description h6 {
   font-size: 16px;
   color: var(--color);
   text-transform: uppercase;
}

.about_description h1 {
   font-size: 32px;
   font-weight: 700;
   margin-top: 30px;
}

.about_description p {
   font-size: 18px;
   margin-top: 30px;
   text-align: justify;
   color: var(--some-one);
}

.about_description ul {
   margin-top: 30px;
   padding: 0px;
}

.about_description ul li {
   list-style-type: none;
   margin-top: 15px;
   font-weight: 600;
}

.about_description ul li i {
   margin-right: 10px;
   color: var(--color-primary);
}

.circul_color {
   position: absolute;
   overflow: hidden;
   top: -100px;
   left: -70px;
   width: 200px;
   height: 200px;
   z-index: 8;
   opacity: .1;
   border-radius: 200px;
   background-color: var(--color);
}

.circul_color::after {
   content: '';
   position: absolute;
   top: 100px;
   left: 0px;
   width: 200px;
   height: 200px;
   background-color: var(--shadow);
}



/* =================== 06. ABOUT US =================== */
.project_card {
   position: relative;
   overflow: hidden;
   border-radius: 15px;
   margin-top: 25px;
}

.project_card img {
   width: 100%;
   height: 350px;
   object-fit: cover;
   border-radius: 15px;
   transition: 0.4s;
}

.project_card:hover img{
   transform: scale(1.05);
}

.project_des {
   position: absolute;
   left: 0;
   bottom: 0;
   padding: 30px;
   width: 100%;
   color: #fff;
   background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.project_des button {
   border: none;
   border-radius: 15px;
   padding: 4px 16px;
   font-size: 14px;
   color: #fff;
   background-color: var(--color);
}

.project_des h3 {
   font-size: 24px;
   margin-top: 12px;
   font-weight: 600;
}

.project_des p {
   font-size: 15px;
   margin-top: 5px;
   opacity: 0.9;
}

.project_btn{
    text-align: center;
    margin-top: 30px;
}

.project_btn a{
   font-size: 16px;
   font-weight: 600;
   padding: 7px 25px;
   text-decoration: none;
   border-radius: 50px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--color-bg-tertiary);
   border: 1px solid var(--color-bg-tertiary);
   transition: all 0.4s ease;
}

.project_btn a i{
   margin-top: 3px;
   transition: transform 0.3s ease;
}

.project_btn a:hover{
   color: var(--color-primary);
   border: 1px solid var(--color-primary);
}

.project_btn a:hover i{
    transform: translateX(5px);
}




/* =================== 07. TESTIMONIAL =================== */
.testimonial_bg {
   position: relative;
   width: 100%;
   margin-top: 120px;
   padding: 100px 0px;
   z-index: 9;
   background: linear-gradient(45deg, var(--color-primary), var(--color-bg-tertiary));
}

.testimonial_title {
   text-align: center;
}

.testimonial_title h6 {
   font-size: 16px;
   text-transform: uppercase;
   color: var(--color);
   margin-bottom: 0px;
}

.testimonial_title h1 {
   font-size: 46px;
   color: var(--color-text);
   font-weight: 800;
   margin-top: 15px;
   margin-bottom: 0px;
}

.testimonial_card {
   width: 100%;
   padding: 30px;
   margin-top: 50px;
   border-radius: 15px;
   border: 1px solid var(--some-one);
   background-color: #3553b4;
   transition: all 900ms ease-in-out;
}

.testimonial_card:hover{
   transform: translateY(-10px);
   background-color: #405cba;
   box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.testimonial_card i {
   font-size: 32px;
   color: var(--color);
}

.testimonial_card p {
   font-size: 14px;
   margin-top: 15px;
   color: var(--shadow);
}

.testimonial_card ul {
   padding: 0px;
   margin-top: 15px;
}

.testimonial_card ul li {
   list-style-type: none;
   float: left;
   margin-right: 10px;
}

.testimonial_card ul li i {
   font-size: 16px;
   color: var(--color);
}

.testmonial_company_info {
   margin-top: 15px;
}

.testmonial_company_info h4 {
   font-size: 16px;
   margin-bottom: 0px;
   color: var(--color-text);
}

.testmonial_company_info span {
   font-size: 14px;
   color: var(--active);
   margin-top: 5px;
}



/* =================== 08. BLOG =================== */
.blog_card {
   width: 100%;
   border-radius: 15px;
   margin-top: 50px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0,0,0,0.15);
   transition: all 900ms ease-in-out;
}

.blog_card img {
   border-radius: 15px 15px 0px 0px;
   width: 100%;
   transition: all 900ms ease-in-out;
}

.blog_card:hover {
   box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.blog_card:hover img {
   transform: scale(1.05); 
}

.post_meta {
   padding: 15px;
}

.post_meta ul {
   display: flex;
   padding: 0px;
}

.post_meta ul li {
   display: flex;
   font-size: 14px;
   list-style-type: none;
   margin-right: 30px;
}

.post_meta ul li i {
   color: var(--color);
   margin-top: 4px;
   margin-right: 10px;
}

.post_meta ul li p {
   color: var(--some-one);
   font-size: 14px;
}

.post_meta button {
   border: none;
   font-size: 14px;
   padding: 4px 15px;
   border-radius: 15px;
   color: var(--color-primary);
   background-color: var(--active);
}

.post_meta h6 {
   color: var(--black);
   font-size: 18px;
   margin-top: 15px;
}

.post_meta_des {
   font-size: 14px;
   margin-top: 15px;
   color: var(--some-one);
}




/* =================== 09. SOLUTIONS =================== */
.solution_bg {
   width: 100%;
   padding: 50px 30px;
   margin-top: 120px;
   text-align: center;
   border-radius: 15px;
   background-color: var(--color-primary);
}

.solution_bg h1 {
   font-size: 46px;
   font-weight: 800;
   color: var(--color-text);
}

.solution_bg p {
   font-size: 18px;
   margin-top: 30px;
   color: var(--active);
}

.solution_btn {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 30px;
}



/* =================== 09. CONTACT US =================== */
.contact_bg {
   margin-top: 120px;
   padding: 100px 0px;
   z-index: 9;
   background-color: var(--shadow);
}

.blog_title {
   text-align: center;
}

.blog_title h6 {
   font-size: 16px;
   text-transform: uppercase;
   color: var(--color);
   margin-bottom: 0px;
}

.blog_title h1 {
   font-size: 46px;
   font-weight: 800;
   margin-top: 15px;
   margin-bottom: 0px;
}

.blog_title h1 {
   font-size: 46px;
   font-weight: 800;
   margin-top: 15px;
   margin-bottom: 0px;
}

.contact_item {
   display: flex;
   margin-top: 30px;
   padding: 15px;
   border-radius: 10px;
   gap: 15px;
   background-color: var(--color-text);
   box-shadow: 0 1px 7px rgba(0,0,0,0.10);
}

.contact_item i {
   padding: 15px;
   border-radius: 7px;
   font-size: 16px;
   color: var(--color-primary);
   background-color: var(--active);
}

.contact_info h6 {
   color: var(--some-one);
}

.contact_info p {
   font-weight: 600;
   margin-top: 5px;
}

.google_map {
   margin-top: 30px;
}

.google_map iframe {
   width: 100%;
   height: 265px;
   border-radius: 15px;
   box-shadow: 0 1px 7px rgba(0,0,0,0.10);
}

.contact_fied {
   width: 100%;
   margin-top: 30px;
   padding: 30px;
   border-radius: 15px;
   background-color: var(--color-text);
   box-shadow: 0 1px 7px rgba(0,0,0,0.10);
}

.custome_fild label {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 0px;
}

.custome_fild label sup {
   color: var(--color);
}

.custome_fild input {
   width: 100%;
   height: 40px;
   padding: 5px 10px;
   margin-top: 10px;
   border-radius: 5px;
   margin-bottom: 30px;
   border: 1px solid var(--some-one);
}

.custome_fild input:focus {
   outline: none;
   border: 1px solid var(--black);
}

.custome_fild textarea {
   width: 100%;
   height: 200px;
   padding: 5px 10px;
   margin-top: 10px;
   border-radius: 5px;
   margin-bottom: 30px;
   border: 1px solid var(--some-one);
}

.custome_fild textarea:focus {
   outline: none;
   border: 1px solid var(--black);
}

.contact_fied form button {
   width: 100%;
   font-weight: 600;
   color: var(--color-text);
   padding: 15px;
   border-radius: 5px;
   border: none;
   background-color: var(--color-primary);
   transition: all 900ms ease-in-out;
}

.contact_fied form button i {
   margin-right: 15px;
}

.contact_fied form button:hover {
   background-color: var(--color-bg-tertiary);
}



/* =================== 10. FOOTER =================== */
.footer_bg {
   width: 100%;
   padding: 50px 0px;
   background-color: var(--color-bg-tertiary);
}
.footer_company_info a {
   display: flex;
   text-decoration: none;
   margin-bottom: 30px;
}

.footer_company_info a img {
   width: 40px;
   height: 40px;
}

.footer_company_info a p {
   margin-left: 10px;
   margin-bottom: 0;
   line-height: 1.2;
}

.footer_company_info a p strong {
   font-size: 18px;
   color: var(--color-text);
}

.footer_company_info a p span {
   font-size: 16px;
   color: var(--active);
}

.footer_company_info > span {
   display: block;
   margin-top: 10px;
   color: var(--some-one);
   line-height: 1.6;
}

.footer_company_info ul {
   display: flex;
   gap: 15px;
   padding: 0;
   margin-top: 30px;
}

.footer_company_info ul li {
   list-style: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   line-height: 40px;
   text-align: center;
   background-color: var(--black);
   box-shadow: 0 1px 7px var(--shadow);
   transition: all 900ms ease-in-out;
}

.footer_company_info ul li a {
   color: var(--active);
   display: block;
}

.footer_company_info ul li:hover {
   background-color: var(--color-primary);
}

.quick h3 {
   font-size: 22px;
   color: var(--color-text);
   margin-bottom: 0px;
}

.quick ul {
   padding: 0px;
}

.quick ul li {
   list-style-type: none;
   margin-top: 15px;
}

.quick ul li a {
   font-size: 14px;
   color: var(--some-one);
   transition: all 900ms ease-in-out;
}

.quick ul li a i {
   color: var(--color-bg-tertiary);
   margin-right: 10px;
   transform: rotate(-45deg);
   transition: all 900ms ease-in-out;
}

.quick ul li:hover a {
   color: var(--color-text);
}

.quick ul li:hover a i {
   color: var(--color-text);
}

.quick_contact h3 {
   font-size: 22px;
   color: var(--color-text);
   margin-bottom: 0px;
}

.quick_contact ul {
   padding: 0px;
}

.quick_contact ul li {
   display: flex;
   cursor: pointer;
   color: var(--some-one);
   list-style-type: none;
   margin-top: 15px;
}

.quick_contact ul li i {
   color: var(--color);
   margin-top: 4px;
   margin-right: 15px;
}



/* =================== 11. COPY RIGHT =================== */
.copyright_bg {
   padding: 20px 0px 5px 0px;
   background-color: var(--color-bg-tertiary);
   border-top: 1px solid var(--some-one);
}

.copy_info p {
   font-size: 16px;
   color: var(--some-one);
}

.copy_privacy ul {
   padding: 0;
   float: right;
}

.copy_privacy ul li {
   float: left;
   margin-left: 30px;
   list-style-type: none;
}

.copy_privacy ul li a {
   font-size: 16px;
   color: var(--some-one);
}



/* =================== 12. INNER BANNER =================== */
.inner_banner_bg {
   padding: 120px 0px 70px 0px;
   margin-bottom: 120px;
   background: linear-gradient(90deg, var(--color-bg-tertiary) 0%, var(--color-primary) 50%, var(--color-bg-tertiary) 100%);
}

.about_section {
   text-align: center;
}

.about_section h1 {
   font-size: 42px;
   font-weight: 800;
   margin-bottom: 0px;
   color: var(--color-text);
}

.about_section p {
   font-size: 18px;
   margin-top: 15px;
   color: var(--active);
}



/* =================== 13. OUR STORY =================== */
.story_pic img {
   width: 100%;
   height: 504px;
   border-radius: 15px;
}

.story_inc {
   width: 100%;
   padding: 20px;
   margin-top: 30px;
   border-radius: 15px;
   background-color: var(--shadow);
}

.story_inc h1 {
   font-size: 22px;
   margin-bottom: 0px;
   margin-top: 0px;
   text-align: center;
   color: var(--color-primary);
}

.story_inc p {
   font-size: 16px;
   margin-top: 5px;
   color: var(--black);
   text-align: center;
}



/* =================== 14. OUR VALUES =================== */
.values_bg {
   width: 100%;
   margin-top: 120px;
   padding: 100px 0px;
   background: var(--shadow);
}

.values_title {
   text-align: center;
}

.values_title h6 {
   font-size: 16px;
   text-transform: uppercase;
   color: var(--color);
   margin-bottom: 0px;
}

.values_title h1 {
   font-size: 46px;
   color: var(--black);
   font-weight: 800;
   margin-top: 15px;
   margin-bottom: 50px;
}

.values_card {
   width: 100%;
   padding: 30px;
   text-align: center;
   border-radius: 15px;
   background-color: var(--color-text);
   transition: all 900ms ease-in-out;
}

.values_card:hover {
   box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.values_card i {
   width: 60px;
   height: 60px;
   line-height: 60px;
   text-align: center;
   font-size: 36px;
   color: var(--color-primary);
   border-radius: 10px;
   background-color: var(--active);
}

.values_card h3 {
   font-size: 18px;
   margin-top: 15px;
}

.values_card p {
   font-size: 14px;
   margin-top: 15px;
   color: var(--some-one);
}



/* =================== 15. SERVICE =================== */
.service_card_header {
   margin-bottom: 120px;
}

.service_cart span {
   font-size: 36px;
   width: 60px;
   height: 60px;
   line-height: 60px;
   text-align: center;
   color: var(--color-primary);
   background-color: var(--active);
   border-radius: 10px;
}

.service_cart h3 {
   font-size: 26px;
   margin-top: 30px;
}

.service_cart p {
   margin-top: 30px;
}

.service_cart a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   color: #fff;
   padding: 8px 20px;
   margin-top: 30px;
   border-radius: 30px;
   background: var(--color-primary);
   text-decoration: none;
   transition: 0.3s ease;
}

.service_cart a i {
   font-size: 14px;
   color: var(--color-text);
   margin-top: 4px;
   transition: 0.3s ease;
}

.service_cart a:hover {
   background: var(--color-bg-tertiary);
}

.service_cart a:hover i {
   transform: translateX(5px);
}

.service_icon {
   width: 95%;
   height: 260px;
   line-height: 300px;
   text-align: center;
   border-radius: 15px;
   color: var(--color-primary);
   box-shadow: 0 5px 10px rgba(0,0,0,0.1);
   background: linear-gradient(135deg, var(--active), var(--color-text));
}

.service_icon i {
   font-size: 76px;
}



/* =================== 16. PORTFOLIO =================== */
 .isotope_section {
   margin-bottom: 120px;
}

.filter-btns {
   text-align: center;
   margin-bottom: 50px;
}

.filter-btns button {
   padding: 7px 25px;
   margin: 5px;
   border: none;
   background: var(--shadow);
   color: var(--some-one);
   cursor: pointer;
   border-radius: 30px;
   transition: 0.3s;
}

.filter-btns button.active,
.filter-btns button:hover {
   color: var(--color-text);
   background: var(--color-primary);
}

.grid-item {
   background: var(--color-text);
   border-radius: 15px;
   transition: all 900ms ease-in-out;
   margin: 10px;
   width: 31.75%;
   padding: 0px;
   box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}
.portfolio_img {
   position: relative;
   overflow: hidden;
   border-radius: 15px 15px 0px 0px;
}

.portfolio_img img {
   width: 100%;
   height: 300px;
   display: block;
   transition: all 900ms ease-in-out;
}

.design_info {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   padding: 30px;
   background: linear-gradient( to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.6), transparent );
   color: var(--color-text);
   opacity: 0;
   transform: translateY(30px);
   transition: all 900ms ease-in-out;
}

.design_info h6 {
   color: var(--color);
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 5px;
   letter-spacing: 1px;
}

.design_info p {
   font-size: 14px;
   margin: 0;
}

.portfolio_card:hover .design_info {
   opacity: 1;
   transform: translateY(0);
}

.portfolio_card:hover img {
    transform: scale(1.1);
}

.portfolio_company {
   padding: 30px;
}

.portfolio_company h3 {
   font-size: 16px;
}

.portfolio_company p {
   font-size: 14px;
   margin-top: 5px;
   color: var(--some-one);
}



/* =================== 17. BLOG BANNER =================== */
.heading_blog {
   width: 800px;
   display: table;
   margin: auto;
}

.heading_blog a {
   font-size: 16px;
   color: var(--active);
}

.heading_blog a i {
   margin-right: 10px;
}

.heading_blog h1 {
   font-size: 42px;
   font-weight: 800;
   margin-top: 15px;
   color: var(--color-text);
}

.heading_blog p {
   font-size: 18px;
   margin-top: 15px;
   color: var(--active);
}

.post_meta_blog {
  margin-top: 30px;
}

.post_meta_blog ul {
   display: flex;
   padding: 0px;
}

.post_meta_blog ul li {
   display: flex;
   font-size: 14px;
   list-style-type: none;
   margin-right: 30px;
}

.post_meta_blog ul li i {
   color: var(--active);
   margin-right: 10px;
   margin-top: 3px;
}

.post_meta_blog ul li p {
   font-size: 14px;
   margin-top: 0px;
   color: var(--active);
}

.blog_description {
   width: 800px;
   display: table;
   margin: auto;
   margin-bottom: 120px;
}

.blog_description img {
   width: 100%;
   border-radius: 15px;
}

.blog_description p {
   font-size: 16px;
   margin-top: 30px;
}