html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden!important;
}

body {
  margin: 0px;
  padding: 0px;
  background: var(--navy);
vertical-align: middle;
  overflow-x: hidden!important;
  font-family:"Unb_pro_regular";

}

* {
  box-sizing: border-box;
}

.container-fluid {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

@font-face {
  font-family:"Unb_pro_regular";
  src:url("../webfonts/UnBOffice.woff");
}



@font-face {
  font-family:"Unb_pro_bold";
  src:url("../webfonts/UnBOffice-Bold.woff");
}


:root {
  --blue: #48a6dd;
  --navy: #091835;
  --lightblue:rgba(72, 166, 221, .1);
  --white_gray: #a1aed4;
  --heading_family: "Unb_pro_bold";
  --text_family: "Unb_pro_regular";
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading_family);
  margin: 0;
  padding: 0;
}

p {
  font-family: var(--text_family);
  margin: 0;
  padding: 0;
}

.dropdown-menu.show{
  background: var(--navy);
}
.dropdown-item:focus, .dropdown-item:hover{
  background: transparent;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color:transparent;}
    .nav-link:focus, .nav-link:hover {
    color: var(--blue);
}



.hero-section{
  width:100%;
  padding-bottom:0rem;
  padding:0px;
  height:auto;
  margin:0px;
  background:var(--navy);
}
.main_logo{
  width:20rem;
}
.logo_text{
  font-size: 2.2rem;
  margin-left: .4rem;
  color:var(--blue);
  letter-spacing: .1rem;
}
.container-fluid{
  margin:0px;padding:0px;
}

.navbar{
  height: auto;
  padding:2rem 0;
  background: var(--navy);
}
.navbar.sticky_navigation {
  background:white; 
  padding:1rem 0rem;
  box-sizing: border-box;
}
.sticky_navigation {
  margin-top:0rem!important;  
  width: 100%;
  z-index: 999;
  -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.09);
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
.sticky_navigation .navbar {
  margin-top: 0px!important;
  padding:auto 1rem!important;
}
.mto0{
  margin-top:0px!important;
}

@-webkit-keyframes fadeInDown {
  0%{
    opacity: 0;
    -webkit-transform: translateY(-20px);
   }
    100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    }
}    
 
      
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
body{
  overflow-x: hidden!important;
}
.formarginleft{
  margin-left:20rem;
}
.navbar-nav li{
  padding:0rem 1rem;
}
.navbar-nav li a{
  font-size:1.8rem;
  color:white;
  font-family:var(--text_family);
  vertical-align: middle;
  text-transform: capitalize;


}
.navbar-nav li a.active{
  color:var(--blue)!important;
  font-weight: bold;
}
.navbar-nav li a:hover{
  color:var(--blue);
}
.navbar-toggler i{
  color:var(--blue)!important;
  font-size:2.4rem;
}
.fa-times{
  display: none;
}
.navbar-toggler:focus{
  outline:none;
}

.menu_btn a{
  padding:0rem;
  line-height: 4rem;
  color:white!important;
  padding:0rem 1rem!important;
}

.menu_btn{
  background: linear-gradient(270deg, var(--blue) 0.35%, var(--navy) 176.82%), var(--blue)!important;
  /*border-radius: .5rem!important;*
  height: 4rem;
  /*line-height: 5rem;*/
  line-height: 2rem;
  margin-top:-.5rem;
  margin-left:1rem;
  border-radius:.5rem;
  color:white!important;
}
.menu_btn a:hover{
  color:white!important;
} 
.menu_btn:hover{
  background:var(--blue)!important;
} 
.navbar-toggler i{
  color:var(--red);
}     
.hero_contents{
  height: auto;
  margin-top:14rem;
  padding:0rem 0rem;
  padding-bottom: 5rem;
}
.gold-text{
  color:var(--red);
}
.blue_text{
  color:var(--blue);
}
.hero_title{
  font-size:10.6rem;
  color:black;  text-transform: capitalize;
  line-height: 10rem;
  margin-top: 0rem;
  background: linear-gradient(to right, #48a6dd, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


}
.hero_desc_2{
  margin:1.5rem 0rem;
  font-size:2.7rem;
  color:white;
  font-weight: 500;
  line-height: 3rem;
  font-family:var(--text_family);
  display: block;
  margin:3rem 0;
}


.my_3{
  margin:2rem 0;
}

.forflex{
  display: flex;
  align-items: center;
}

.get_app_btn{
  display: none;
}

/*newsletter */
.newsletter_section{
  width:60%;
  position: relative;
}
.newsletter_section input[type="email"]{
  width:75%;
  background: transparent;
  background-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2) !important;
   border:.1rem solid var(--blue);
   height: 5.5rem;
    transition: all 300ms;
    box-sizing: border-box;
    border-radius: 0.6rem;
    padding-left:1rem;
    font-size: 2.2rem;
    color:white;

}
.newsletter_section input::placeholder{
  color:white;
  font-weight:600;
}

.newsletter_section input[type="submit"]{
  width:22%;
  margin-left:2%;
  background: linear-gradient(270deg, var(--blue) 0.35%, var(--navy) 176.82%), var(--blue)!important;
    border: none;
    display: inline-block;
    font-size: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.6rem;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-weight: 600;
   border:.1rem solid var(--blue);
   height: 5.5rem;
   text-transform:capitalize;
}
.small_dots{
     position: absolute;
content: "";
top: calc(50% - 0.5rem);
left: -2.6rem;
width: 1rem;
height: 1rem;
background-color: #9CF5F5;
border-radius: 50%;
animation: pulse-blue 2s infinite;
/*    animation: float-animation 2s infinite;*/

}

.newsletter_section input[type="submit"]:hover{
  background: var(--navy)!important;
}

@keyframes pulse-blue {
   0% {
    box-shadow: 0 0 0 0 rgba(156, 245, 245, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(156, 245, 245, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(156, 245, 245, 0);
  }
}


/*maquee section*/
.py_5{
  padding:7rem 0;
}
.logos_slider img{
  max-height:10rem;
  display: inline-block;
}

.client_logos_section ul li{
  list-style: none;
  display: inline-block;
  margin:0 3rem;

}
.client_logos_section ul li img{
  height: 5rem;
}
.sec_main_heading{
  font-size: 7.5rem;
  color:white;
}
.news_letter_heading{
   font-size: 4.5rem;
  color:white;
}
.brand_shades{
  font-size:7.5rem;
  color:black;  text-transform: capitalize;
  margin-top: 0rem;
  background: linear-gradient(to right, #00a1ff, #3b657e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cd_no{
  color:var(--blue);
  font-size: 5rem;
  letter-spacing: .1rem;
  text-align: center;
}
.cd_desc{
  font-size: 2.2rem;
  text-align: center;
  color:white;
  text-transform: uppercase;
  margin-top:.5rem;
}

.text_box{
  margin-top:3rem;
  background:var(--blue); linear-gradient(to right, #48a6dd, #091835);
  padding:4rem;
  box-sizing: border-box;
  border-radius: 1rem;
}
.text_box p{
  font-size: 3.2rem;
  text-align: center;
  color:white;
/*  text-shadow: .1rem .1rem .1rem black;*/
/*  letter-spacing: .1rem;*/
}
.feature_icon{
  width:7rem;
  height: 7rem;
  padding: 1.2rem;
  background: var(--blue);
  border-radius: 100%;
  margin-bottom: 2rem;
  margin:0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature_icon i{
  font-size: 3rem;
  color:white;
}
.feature_icon svg{
  fill:white!important;
}
.feature_card{
  text-align: center;
  padding:3rem;
  box-sizing: border-box;
  margin-bottom:2rem;
  transition: background-color 0.5s ease;
}
.featurec_card_title{
  margin:1rem;
  font-size: 2.4rem;
  color:var(--blue);
  text-transform: capitalize;
}
.feature_card_desc{
  font-size:2rem;
  color:white;
  opacity: .9;
}

.feature_card:hover{
  background: var(--blue);
  animation: 1s;
  border-radius: 1rem;
}
.feature_card:hover .feature_icon{
  background: var(--navy);
  transition: background-color 0.6s ease;

}
.feature_card:hover .featurec_card_title{
  color:white;
}

/* Webkit-based browsers (Chrome, Safari, Opera) */
::-webkit-scrollbar {
  width:.6rem;
}

::-webkit-scrollbar-track {
  background-color: #091835;
}

::-webkit-scrollbar-thumb {
  background-color: #48a6dd;
}

/* Firefox */
/* The color properties for Firefox are not widely supported yet, but you can still use them */
/* You can remove or comment out these styles if you don't want to target Firefox specifically */
* {
  scrollbar-color: #48a6dd #091835;
  scrollbar-width: thin;
}


.stars_date{display: flex;
  align-items: center;
  justify-content: space-between;
}

.testi_card{
  width:40rem;
  background:var(--lightblue);
  padding:2rem;
  border-radius: 1rem;
  height:25rem;
}

.five_stars{
  color: orange;
  font-size: 2rem;
}
.rating_date{
  font-size: 1.7rem;
  color:white;
}
.client_review,.location{
   font-size: 1.6rem;
  color:white;
}

.client_name{
  font-size: 1.9rem;
  color:white;
  margin-top: 3rem;
}

.slick-slide {
  margin: 0 10px; /* Adjust the margin value to add desired space between slides */
}

.slick-dots {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 -.5rem;
  padding: 0;
}

.slick-dots li button {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color:  var(--blue);
  border-color: var(--blue);
  border: none;
  cursor: pointer;
  padding:.8rem;
}

.slick-dots li.slick-active button {
  background-color: white;
}

.slick-dots li button:focus {
  outline: none;
}

.slick-dots:before {
  content: "";
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: transparent; /* Set the background color of the strip below dots */
  bottom: -5px;
  left: 0;
}
.slick-dots li button:before{
  background: transparent;
}


footer{
  background: var(--navy);
  padding-top: 5rem;
}



.footerlogo{
  max-width:15rem;
}
.footerheading{
  font-size:2rem;
  color:var(--blue);

}
.fotlink ul{
  padding-left:0px;
  margin-top:20px;
}

.fotlink ul li{
  list-style: none;
}
.fotlink ul li a{
  line-height:35px;
  color:white;
  text-decoration: none;
  font-size:1.6rem;
}
.fotlink ul li a:hover{
  color: var(--blue);
}
.foot-p{
  font-size:1.6rem;


}
.lifafa{
  font-size:1.5rem;
  color:white;
}
.ff-link{
  font-size:1.5rem;
  color:white;
  padding-left:5px;
  text-decoration: none;
}
.ff-link:hover{
  color:var(--blue)!important;
  text-decoration: none!important;
}
/*footer{
  font-size:1.6rem;
  color:white;
  border-top:.1rem solid gray;
}*/
.veryfooter a{
  /*margin:0px 10px;*/
  color:lightgray;
}
.veryfooter a:last-child{
  margin:0px 10px;
  margin-right:0px;
}
.ff-link:hover{
  color:white;
  text-decoration: underline;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pLinks{
  color:white;
  font-size: 1.6rem;
  text-decoration: none;
}
.pLinks:hover{
  color:var(--blue);
}

.footer_spacer{
  padding:0 2rem;
  color:white;
  font-size: 1.6rem;
}

.copyright_text{
  color:white;
  font-size: 1.6rem;
}
.copyright_text a{
  color:var(--blue);
  text-decoration: none;
}
.gen_p{
  font-size: 1.6rem;
  color:white;
  padding-right: 2rem;
}
.footerLogo{
  max-width: 20rem;
}



.partner-logo-wrap{
  padding: 50px 0;
}
.partners-slider-logo img{
  margin: auto;
  max-width: 13rem;
}
.partners-slider-logo .slick-slide {
  margin-left:30px;
}
.partners-slider-logo .slick-list {
  margin-left:-30px;
}
@media (min-width:991px){
    .partners-slider-logo .slick-slide {
  margin-left:50px;
}
.partners-slider-logo .slick-list {
  margin-left:-50px;
}
.partners-slider-logo .slick-track{
  display: flex;
  align-items: center!important;
}
}

/*pricing page*/
.spliter{
  margin-top:8rem;
}

.breadcrumb_heading{
  font-size: 5rem;
  color:white;
  padding:4rem;
  text-align: center;
  color:var(--blue);
}


.mt-69{
  margin-top:6.9rem;
}
.pricing .card{
  background: #FFFFFF;
  box-shadow: 0px 4px 30px rgba(88, 121, 135, 0.25);
  border:none;
  border-radius: 1rem;
}

.pkg-name{
  text-align: center;
  font-size:2.3rem;
  color:var(--darkblue);
  /*font-family:;*/
  margin:2rem 0rem ;
}
.pkg-pricing{
  border-top:2px  dashed #F0F0F0;
  border-bottom:2px  dashed #F0F0F0;
  
  padding:1rem 0rem;
  text-align: center;
}
.dollr-sign{
  font-size:1.9rem;
  color:var(--blue);
  font-weight: bold;
}
.big-pric{
  font-size:2.6rem;
  color:var(--darkblue);
}

.pkg-features{
  padding:2.5rem 4rem;
}
.pkg-features ul{
  padding-left:0px;
}
.pkg-features ul li{
  list-style: none;
  margin-bottom: 1.1rem;
  display:flex;
  align-items: center;
}
.icco{
  background:var(--blue);
  color:white;
  width:18px;
  height: 18px;
  border-radius:100%;
  text-align: center;
  line-height: 18px;
  display: inline-block;

}
.pri-des{
  color:#676767;
  font-size:1.6rem;
  margin-left:.9rem;
}
.pricing-buttn{
  width:187px;
  height: 45px;
  color:white;
  background:var(--blue);
  display: block;
  text-align: center;
  line-height: 45px;
  font-size:1.6rem;
  letter-spacing:.1rem;
  margin:0 auto;
  margin-top: 4rem;
  text-decoration: none;
  border-radius: 5px;
}
.pricing-buttn:hover{
  background: var(--navy);
  text-decoration: none;
  color:white;
}


  .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
  }


  .accordion-button:not(.collapsed) {
    color:white;
    background-color: var(--blue);
  background: linear-gradient(270deg, var(--blue) 0.35%, var(--navy) 176.82%), var(--blue)!important;

    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    font-size: 1.8rem;
}
  .accordion-button {
    color:white;
    background-color: var(--blue);
  background: linear-gradient(270deg, var(--blue) 0.35%, var(--navy) 176.82%), var(--blue)!important;

    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    font-size: 1.8rem;
}
.faq_section .accordion-item{
  margin-bottom: 1rem;
}

.faq_section .accordion-body{
  background: #f2f2f2;
  font-size: 1.7rem;
}

.faq_section .collapsed:after {
    content: "\f107";
    color: white;
}
.faq_section .card-header:after {
    font-family: 'FontAwesome';
    content: "\f106";
    float: right;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0px;
    padding-top: 1px;
    padding-bottom: -10px!important;
    cursor: pointer;
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
}




.faq_section .accordian{
}
.faq_section .accordian .card{
  margin-bottom:1.1rem;
}
.faq_section .card-header:after{
    font-family:'FontAwesome';
    content:"\f106";
    padding-right:1rem;
    margin:0px;
    cursor: pointer;
    color:white;
    font-size:1.8rem;
    font-weight: bold;
   
  }
  .faq_section .collapsed:after{
    content:"\f107";
    color:white;
  }
  .faq_section .accordian .card{
    background: none;
    border:none;
    margin-bottom:1.1rem!important;
  }
  .faq_section .card-header{
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: whtie!important;

    cursor: pointer;

  }
  .accordian .card-body{
    text-align: left;
    background: #f2f2f2;

  }
  #content_p p{
    font-size: 1.7rem;
    color:black;
    padding-left:1rem;
  }
.card-header{
  background: var(--lightblue)!important;
  padding:0;
  margin:0;
  line-height: 4rem;

}
  .card-header a{
    font-size:2rem;
    color:white;
    text-decoration: none;
    padding-left: 1rem;
    padding-top: .5rem;
  }



/*blog page*/

.blogcard{
  background: var(--lightblue);
  border-radius: 2rem;
  padding:1rem;
  border-radius: .5rem;
}
.blogcard img{
  width:100%
}
.bloger-name{
  color:#353956;
  font-size: 1.8rem;
;
}
.blog-date{
  color:#353956;
  font-size:1.6rem;
  line-height: 2.6rem;
}
.blog-title, .blog-link{
  font-weight: 600;
font-size: 2rem;
line-height: 2.9rem;
margin:0px;
padding:0px;
margin-top: 2.0rem;
text-decoration:none;
color: var(--blue);
}
.blog-desc{
  margin-top:1.4rem;
  font-size:1.6rem;
  line-height: 1.9rem;
  color:white;
  opacity: .7;
  height: 6rem;
  overflow:hidden;
}
.detail_btn{
  width:15rem; 
  height: 4.5rem;
  font-size: 2rem;
  text-decoration: none;
  text-align: center;
  line-height: 4.5rem;
  border-radius: .5rem;
  color:white;
  background: linear-gradient(270deg, var(--blue) 0.35%, var(--navy) 176.82%), var(--blue)!important;
  display: block;
  letter-spacing: .1px;
}
.detail_btn:hover{
  background:var(--navy)!important;
  color:white;

  text-decoration: none;
}

/*integration page start*/
.integration_section{
}
.integration_card{
  background:rgba(72, 166, 221, .1);
  border-radius: .5rem;
  padding:3rem;

}
.forpadding{

}
.integrate_logo_name{
  display: flex;
  align-items: center;
}

.integrate_icon{
  width:5.6rem;
  margin-right: 2rem;
}
.integrat_app_name{
  font-size: 2.5rem;
  color:white;
}

a{
  text-decoration: none;
}
.integration_desc{
  color: #c2c3c5;
  font-size: 1.7rem;
  margin:2rem 0;
}

.integration_card:hover .fa-arrow-right {
  animation: arrow-animation 0.5s ease-in-out;
}

@keyframes arrow-animation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}


.integrate_btn{
  font-size: 1.7rem;
  color:white;
  padding:0;
  line-height: 1rem;
  padding-top:0!important;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.integrate_btn i{
  margin-left: 1rem;
}
.integrate_btn:hover{
  color:var(--blue);
}


.case_study_main_card{
   background:rgba(72, 166, 221, .1);
   height: 30rem;
   border-radius: .5rem;
   border-bottom: .5rem solid var(--blue);
   position: relative;
   overflow: hidden;
}

.case_study_main_contents{
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;

  padding:3rem 2rem;
  box-sizing: border-box;
}

.case_study_logo{
  height: 8rem;
}

.case_study_logo{
  max-width: 20rem;
  display: block;
  margin:0 auto;
}

.case_study_main_contents hr{
  display: flex;
  width:100%;
  border:.1rem solid #f2f2f2;

}

.case_study_little_desc{
 max-height: 18rem;
  color: #c2c3c5;
  font-size: 1.7rem;
  margin-top: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;

  max-height: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/*.case_study_button{

  position: absolute;
  bottom: 10px;
  left: 10px;
  width: calc(100% - 20px);
  text-align: center;
}
*/
.case_study_btn{
  font-size: 1.7rem;
  color:white;
  padding:0;
  padding-top:0!important;
  font-weight: bold;
  width:13rem;
  height: 4rem;
  border:.1rem solid white;
  display: block;
  margin:0 auto;
  text-align: center;
  line-height: 4rem;
  border-radius: .4rem;
}

.case_study_btn:hover{
  color:white;
  background: var(--blue);
}


.case_study_main_contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

.case_study_main_contents.hide {
  opacity: 0;
}

.case_study_button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.case_study_button.show {
  opacity: 1;
  display: flex;
  align-items: center;
}

.case_study_btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  position: absolute;
  top:50%;
  left:50%;
    transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;


}

.blog_post_desc_main_section{
  margin-top:10rem;
  
}

.blog_post_desc_main_section main{
  padding:2rem ;
  border-radius: 2rem;
  background: var(--lightblue);
}
.blog_post_heading{
  font-size:2.6rem;
  color:white;
  text-transform: capitalize;
}
.blog_post_img{
  margin:1rem 0;
}
.blog_post_author_date{

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin:.5rem 0;
}

.post_date{
  font-size: 1.6rem;
  color:white;
}

.main_p, .blogp_des{
  font-size:1.7rem;
  color:white;
  line-height: 2.3rem;
  opacity: .8;
}
.blog_post_heading_two{
  font-size: 2rem;
  color: white;
  margin:2rem 0;
}
.blog_post_list li{
 font-size:1.7rem;
  color:white;
  line-height: 2.3rem;
  opacity: .8;
  margin-bottom: 1rem;
}
.blog_post_list li b{
  color:var(--blue);
}
.blog_post_desc_main_section summary{
    list-style: none; /* Remove the default list-style (bullet/circle) */

  font-size:1.7rem;
  color:white;
  line-height: 2.3rem;
  opacity: .8;
}
.recent_post_title {
  display: inline-block;
  position: relative;
  font-size:2rem;
  color:white;
}

.recent_post_title::before {
  display: inline-block;
    content: "";
    border-top: 0.3rem solid var(--blue);
    width: 4rem;
    margin: 0rem 1rem 0rem 0rem;
    transform: translateY(-0.4rem);
}
.recent_list{
  width:100%;
  padding:0rem;
  margin-top: 2rem;
}
.recent_list li{
  list-style: none;
  margin-bottom: 1rem;
}
.recent_list li a{
  display: flex;
  align-items: center;
  background: var(--lightblue);
  padding:.5rem;
  border-radius: .5rem;
}
.recent_list li a:hover{
  background: var(--blue);
}
.recent_list li a img{
  width:8rem;
  margin-right: 1rem;
}
.recent_post_blog_title{
  color:white;
  font-size: 1.6rem;
}