:root{
  --navi_blue:#023564;
  --dark_blue:#00529a;
  --bright_blue:#026ece;
  --light_gray:#f5f5f5;
  --ligt_blue:#e0eaf2;
  --high-light:#ec971f;
  --tin-blue:#37c1ff;
  --main-blue:#01529A;
  --new-blue:#1059a9;
  --new-light-blue:#00aeef;
}

.new-light-blue{
  color:var(--new-light-blue);
}

.new-blue{
  color:var(--new-blue);
}

.light_gray{
  background-color: var(--light_gray);
}

.dark_blue{
  background-color: var(--dark_blue);
}

.nave-blue{
  background-color: var(--navi_blue);
}

.white{
  background-color: #fff !important;
}


.center-text{
  text-align: center;
  padding-top: 1%;
  padding-bottom: 2%;
  
}

.border{
  border:solid 1px #e1f6ff;
  border-radius: 5px;
  padding: 5%;
}

.post-container{
  gap: 20px;
}

.post-col{
  width: 299px;
  height: 194px;
}
.more-link::after {
  content: '\2192'; 
  margin-left: 5px; 
}

#more-btn:hover{
 
  background-color: #01529a12;
 
}
#more-btn a:hover{
  color: #01529A !important;
  opacity: 100% !important;
  text-decoration: none;
  font-weight: 500;
  
}

#more-btn{
  background-color: #fff;
  padding: 5px;
  border:none;
  border-radius: 5px;
  padding: 5px 10px;
  margin-left: auto;
    margin-right: 0px;
    display: block;
    width: fit-content;

}
#more-btn a{
  font-size: 13px;
  color: #01529A;
  text-decoration: none;
  font-weight: 500;
  
}

.heading{
 display:flex;
 gap:20px;
 align-items: center;
}

.set-icon{
  width: 31px;
  height: auto;
}

html {
scroll-behavior: smooth;
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto';
  display: flex;
  flex-direction: column; 
  min-height: 100vh; 
  overflow-x: hidden;
}

main{

overflow: hidden;
}

.page-content{
  overflow: hidden;
  width: 100vw;
}

/*nav{
overflow: hidden;
}*/

/*Nav drop down*/

.custom-dropdown {
  float: left;
  overflow: hidden;
}


.custom-dropdown .dropbtn {
  font-size: 13px !important;
    font-weight: 400;
    color: var(--main-blue);
    text-decoration: underline;
  border: none;
  outline: none;
  padding: 8px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}


.custom-dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
}


.custom-dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


.custom-dropdown-content a:hover {
  background-color: #ddd;
}


.custom-dropdown:hover .custom-dropdown-content {
  display: block;
}

/*-------End--------*/

ul .dropdown{
    
    margin-bottom: 0px;
}

section{
width: 100%;

}

#mobile-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar-toggler-icon {
  margin-bottom: 5px;
  
}

.navbar-toggler-icon span{
margin-bottom: 5px;
color: var(--navi_blue);
}

.navbar-toggler-text{
font-size: 14px !important;
color: var(--navi_blue);
}

.nav-link{
font-size: 13px !important;
font-weight: 400;
color: var(--main-blue);
text-decoration: underline;
}



/* .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: -5px; 
  width: 100%;
}

.col {
  box-sizing: border-box;
  width: calc(33.33% - 10px); 
  margin-bottom: 20px;
  padding: 0; 
}

.col48 {
  box-sizing: border-box;
  width: calc(48.33% - 10px);
  margin-bottom: 20px;
  padding: 23px 10px;

}*/

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
}

.col-g:nth-child(1) {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.col-g:nth-child(2) {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.col-g:nth-child(3) {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}


/* Media query for smaller screens 
@media screen and (max-width: 768px) {
  .col {
    width: calc(50% - 10px); 
  }
}*/

/* Media query for even smaller screens 
@media screen and (max-width: 480px) {
  .col {
    width: 100%; 
  }
}*/


h1{
 
  font-weight: 600 !important;
  font-size: 59px !important;
  letter-spacing: -0.03px;
  line-height: 4rem;
  color: #FFFFFF;
  opacity: 1;
}

h3{
  
  font-weight: 500;
  line-height: 30px;
  font-size: 25px !important;
 
}
.fw-bold {
  font-weight: 500!important;
}

h4{
  
  color: #FFDB18;
  font-size: 16px;
  font-weight: 400;
}

p{
  
  font-size: 1rem;
  font-weight: 400;
  line-height: 27px;
  margin-top: 22px;
}

sup{
  top: 0.2em
}



/* Navbar styles */

.logo img {
  width:137px;
  height: 32px;
  object-fit: contain;
}

.menu {
  list-style: none;
}

.menu li {
  display: inline-block;
  margin-left: 20px;
  
}

.menu li:first-child {
  margin-left: 0;
}

#account-nav {
  text-transform: uppercase;
  text-decoration: none !important;
  
}

.menu li a {
  color: #01529A;
  text-decoration: underline;
  font: normal normal normal 14px/28px Roboto;
  letter-spacing: 0.01px;
  color: #01529A;
}


.header-padding{
  padding: 0 7rem;
}



/* Hero Banner styles */

/*.hero-patterns{
background-image:url(/./assets/images/banner/Mask\ Group\ 73.svg);

}*/

.hero {
  width: 100vw; /* Full width of the viewport */
  height: 600px;
  background-image: url(/./assets/images/banner/Power_Web_Banner\ _3-1425x855.png) ,radial-gradient(circle, rgba(251,251,251,1) 15%, rgba(216,239,248,1) 54%);
  /*background-image: url('hero-image.jpg'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  
}

/* Hero content layout 
.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 20px;
  max-width: 1320px;
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  
  
}*/

.hero-content .left-column{
  padding: 15.5% 0;
}

.content{
  padding: 2% 2%;
 }

.content h3{
  font-size: 24px !important;
  letter-spacing: 0.01px;
  line-height: 30px;
}

.content p{
  text-align: left;
  font: normal normal normal 15px/21px Roboto;
  letter-spacing: 0px;
}

/* Style for left column (adjust as needed) */
.left-column {
  padding: 15.5%;
}


.left-column p{
  text-align: left;
  font: normal normal normal 15px/24px Roboto;
  letter-spacing: 0px;
  color: #FFFFFF;
}

/*-------------------Hero Banner-----------------------------*/

/* .hero-circle {
position: relative;
background-image: url('/./assets/images/banner/Circular assets002.png');
background-size: cover;
background-repeat: no-repeat;
background-position: right center;
overflow: visible; 
}


@media screen and (max-width: 768px) {
.hero-circle {
  background-size: contain; 
  background-position: center; 
}
}*/


/*.hero-circle::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%; 
background-image: url('/./assets/images/banner/Circular assets002.png'); 
background-repeat: no-repeat;
background-position: right center;
z-index: 1; 
transform-origin: center; 
transform: translateX(10%) rotate(60deg); 
}*/









/* Grid layout for sections
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
  padding: 0px;
  max-width: 100%;
  margin: 0 auto;
}
 */

/*main {
  flex: 1; 
  width: 100vw; 
  display: grid;
  grid-template-columns: 1fr; 
  gap: 0px;
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden; 
  box-sizing: border-box;
}*/

.section-lg{
  padding: 20px 139px;
  /*margin-bottom: 20px;*/

}

.section {
  background-color: #f0f0f0;
  /*padding: 20px;
  margin-bottom: 20px;*/
  /* Additional styles for individual sections (optional) */
}

.section-title{
  font-size: 24px;
  letter-spacing: 0.01px;
  color: #000000CB;
}

/* Style for the search container */
.search-container {
  position: relative;
  width: fit-content; /* Adjust width as needed */
  margin: auto;
}

/* Style for the input field */
.search-container input[type="search"] {
  padding: 5%;
  width: 554px;
}

/* Style for the submit button */
.search-container button[type="submit"] {
  position: absolute;
  top: 26%;
  right: 0;
  transform: translateY(-95.97%);
  border: none;
  background: none;
  cursor: pointer;
}

#search-section{
padding: 3.5rem 0;
}

#seach-field{
  
  height: 46px;
  border: soild 1px var(--light_gray);
  border-radius: 4px 4px 0px 0px;
}

.search-icon img{
  width: 19px;
  position: absolute;
  right: 5px; /* Adjust the distance from the right */
  cursor: pointer;
}

.main-btn{
  text-align: center;
  font: normal normal normal 13px/18px Roboto;
  letter-spacing: 1.25px;
  color: #FFFFFF;
  width: max-content;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 16px;
  margin: 10px auto;
  border:solid 1px var(--dark_blue);
  border-radius: 5px;
  background-color: var(--dark_blue);
  -webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.btn-center{
  display: block;
}

.main-btn:hover{
  background-color: #165b97;
  border-color: #165b97;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.108),0 17px 50px 0 rgba(0, 0, 0, 0.105);
  transform: translateY(-0.25em);
}


.search-container p{
  text-align: center;
  margin-top: 3.5%;
  font: normal normal normal 15px/21px Roboto;
  letter-spacing: 0px;
  color: #000000CB;
}


.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px; /* Adjust margin as needed */
}

/* Style for the button row container */
.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1%;
  margin-bottom: 1.5%;
}

/* CSS for normal-sized buttons */
.button {
max-width: 197px;
font-size: 15px;
font-weight: 400;
margin: 5px;
padding: 8px  8px;
border: 1px solid #ccc;

cursor: pointer;
/* Flex property to adjust width based on content */
flex: 1;
background-color: var(--bright_blue);
color: #fff;
letter-spacing: 0px;
border: none;
border-radius: 60px;
cursor: pointer;
transition: background-color 0.3s ease;
}


.button:hover{
  background-color: var(--dark_blue);
  border-color: var(--dark_blue);
}

/* Media query for responsiveness */
@media screen and (max-width: 768px) {
  .button {
    flex: 0 0 40%; /* Adjust width for smaller screens */
  }
}

.no-click:hover{
  cursor: default !important;
}

.btn-block{  
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  text-align:left;
  padding: 5px;
  background-color: #ffffff;
  border: solid 1px #ffffff !important;
  border-radius: 5px;
}

.btn-block img {  
display: inline-block;
margin-right: 5px;    
vertical-align: middle;
padding-right: 5px;

}

.btn-block-text{
  font-weight: 500;
}




/* Define a custom class for the text */
.custom-text {
white-space: wrap; /* Prevents text from wrapping initially */
overflow: hidden; /* Hide overflow */
/*text-overflow:;  Show ellipsis for the overflowed text */
text-align: left;
margin-left: 13px;
}

.x-p-3{
height: 6rem!important;
padding: 1rem !important;
}



/*---Mobile App Section---*/

#mobile-app {
  
  background-color: #fff;
}

/* Style for the two-column container */
.two-column-container {
  display: flex;
  flex-wrap: wrap;
}

/* Style for each column */
.column {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  /* Additional styles for columns (width, etc.) */
}

.col-x{
  max-width: 14.2rem;
}

.col-x2 {
  max-width: 13.9rem;
}

#phone-display {
      min-width:428px;
      height: auto;
      object-fit: cover;
      
      
  }

  /* Style for the inner container */
.inner-container {
  display: flex;
  gap: 20px;
}

/* Style for each inner column */
.inner-column {
  flex: 1;
  display: flex;
  justify-content: center; 
  align-items: center; 
  flex-direction: column;
  padding: 10px;
}

/* Style for options container */
.options-container {
  
  letter-spacing: 0px;
  color: #000000CB;
  text-transform: capitalize;
  height:100%;
  min-height: 69px;
  /*
  width: 212px;
  
  margin-bottom: 10%;
  */
  padding: 5% 1%;
  border: solid 1px #e0eaf2;
  border-radius: 3px;
}

/* Style for icon*/ 
.options-container .w20-x img {
  width: 50px;
  max-height: 50px;
  object-fit: contain;
}

/* Style for text */
.options-container span {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  overflow: hidden; /* fix for Firefox */
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}






/* Style for the online-bank section */
.laptop-inner{
  max-width: 1612px;
  margin: auto;
  background: rgb(251,251,251);
background: radial-gradient(circle, rgba(251,251,251,1) 15%, rgba(216,239,248,1) 54%);
  border-radius: 10px;
  padding: 2rem 5rem;
  background-position-y: 23%;
  background-repeat: no-repeat;
}


/*#online-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
}
*/



/* Style for each column */
.online-column {
  flex: 0 0 calc(33.33% - 20px); /* Adjust width and margin */
  margin: 10px; /* Adjust margin as needed */
  box-sizing: border-box;
}

.image-containers img {
  max-width: 100%;
  display: block;
  margin: auto;
}

.image-containers img:not(.active) {
  display: none;
}

.video-container video {
  max-width: 90%;
  display: block;
  margin: auto;
}

.video-container video:not(.active) {
  display: none;
}




.tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.tab-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.tab-btn {
  font-size: 12px;
  padding: 8px 16px;
  /*margin-right: 10px; */
  background-color: #fff;
  color: #026ecf;
  border: 1px solid #fff;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-box-shadow: 0px 10px 17px -3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 10px 17px -3px rgba(0,0,0,0.15);
box-shadow: 0px 10px 17px -3px rgba(0,0,0,0.15);
}

.tab-btn-left{
  border-radius: 5px 0px 0px 5px;
}

.tab-btn-right{
  border-radius: 0px 5px 5px 0px;
}


.tab-btn.active {
  background-color: #026ecf;
  color: #fff;
  border-color: #fff;
  padding-left:2.8%;
}


.tab-btn.active::before {
  content: '' ; 
  display: inline-block;
 width: 12px; 
 height: 12px; 
 background-image: url('/./assets/images/Icons/check\ mark.png'); /* Replace with your image URL */
background-repeat: no-repeat;
background-size: cover;
margin: 0 8px; 

  
}

/*.tab-btn:hover {
  background-color: #f5f5f5;
} */



#ncb-assist{
  
  margin-top: 6%;
  padding-top: 6%;
  z-index: 2;
  position: relative;
}


#phone-display-39{
  width: 470px;
  height: 600px;
  display: block;
  object-fit: contain;
  
}

#half-shape {
  /*width: -webkit-fill-available;*/
  max-height: 735px !important;
  padding: 21.5rem;
 /* margin-left: -13%;*/
  position: absolute;
  background: rgb(251,251,251);
  background: radial-gradient(circle, rgba(251,251,251,1) 15%, rgba(216,239,248,1) 54%);
  background-position: center;
 
  background-repeat: no-repeat;
  background-size: cover;
}



.divider {
  height: 80px;
  border-left: 2px dashed #37c0ff5c;
  margin-bottom: 1px;
  box-shadow: none;
  border-radius: 0px;
  margin: 0 50%;
}

 
.v-tab {
  margin-top: 14%;
 /* display: flex;
  height: 453px;
  margin-top: 8.5%;*/
}


.v-tab .v-tab_tab-head {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px;
  width: var(--tab-head-width);
}

.v-tab .v-tab_tab-head li {
  margin: auto;
  cursor: unset !important;
  padding: 5%;
  height: 48px;
  width: 48px;
  line-height: 48px;
  text-align:center;
  color: #37c1ff;
  border-bottom: 0px;
  overflow: hidden;
  position: relative;
  border-radius:60px;
  background-color: #fff;
  box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.13);
-webkit-box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.13);
-moz-box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.13);
}

/*.v-tab .v-tab_tab-head li:hover {
  background-image: url(/./assets/images/Icons/Group\ 162594@2x.png);
  background-color: var(--tin-blue);
  color: #fff;
}

.v-tab .v-tab_tab-head li.active {
  
  background-color:  var(--tin-blue);
  color: #fff;
  display: block;
}*/

#vtab1{
  margin-top: -3rem;
}

#vtab2{
  margin-top: 4rem;

}

#vtab3{
  margin-top: 4rem;
}

#vtab4{
  margin-top: 4rem;
}




.v-tab .v-tab_container {
  float: left;
  width: var(--tab-container-width);
  min-height: 132px;
}

.v-tab .v-tab_content {
 
  padding: 11px 11px;
  margin-left: 14%;
  width: 302px;
  height: 67px;
  border: solid 2px #f3f6fa;
  border-radius: 5px;
  background-color: #fff;
  
}

.v-tab .v-tab_content > :first-child {
  margin-top: 0;
}

.v-tab-text-block{
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
}

.v-tab .v-tab_content h4{
  color:#000;
  margin-top: auto;
  margin-bottom: auto;
}

.v-tab .v-tab_content h3{
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  margin: auto;
}

.tab-icons{
  background-image: url(/./assets/images/Icons/Component\ 183\ –\ 21@2x.png);
  box-shadow:none;
  background-repeat: no-repeat;
  background-size: contain;
  
}
.tab-icons.active{
  background-image: url(/./assets/images/Icons/Component\ 183\ –\ 21@2x.png);
  box-shadow:none;
  background-repeat: no-repeat;
  background-size: cover;
}

#update-your-information{
  background: url(/./assets/images/banner/Group\ 162597.png);
  padding: 5%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}



.break-sections{
  max-height: 320px !important;
}


.reduce-size {
  width: 476px;
  height: auto;
}


/*-----------Manage Card Online--------------------*/

/* Style for the phone container */
.phone-container {
position: relative;
width: 100%; /* Adjust the width as needed */
max-width: 650px; /* Maximum width for the image */
margin: auto;
overflow: hidden;
padding-bottom: 80.25%; /* Aspect ratio for responsive height */
}

/* Image inside the phone container */
.phone-container img {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Maintain aspect ratio without distortion */
}


#handphone{
  margin-bottom: 0px;
  background: url(/./assets/images/Phones/e4600e63-8459-40f6-8014-6a06139870c4.png);
  background-repeat: no-repeat;
  width: 429px;
  height: 347px;
  background-size: contain;
  background-position-y: 46px;
  background-position-x: -7px;
  display: block;
  
}

.x-col-6-w{
width: 45.766667%;
}

/*--------------------Book Branch Visit-------------------------------*/

#book-appointment{
  background-color: var(--ligt_blue);
  padding: 28px;
}

/* #book-appointment .row{
  gap: 20px;
}*/

.box{
  padding: 27px 25px;
  border-radius: 5px;
}

#appointmet-cotainer{
  position: relative;
  z-index: 9;
}

.dropdown {
  position: relative;
  margin-bottom: 20px;
 
}

.dropdown-label {
  cursor: pointer;
  padding: 1px 10px;
  border: 1px solid #e1f6ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-label .icon img{
  width: 12px;
}

.dropdown-content {
  display: none;
  /*position: absolute;*/
  top: 92%;
  left: 0;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 8px 5px 0px rgb(0 0 0 / 8%);
  /*z-index: 99;
  position: absolute;*/
  padding: 10px;
  border: solid 1px #e1f6ff;
  border-top: none;
  border-radius: 5px;
}

.inner-dropdown{
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  padding: 2px 5px;
  border-radius: 5px;
}

.dropdown.active .dropdown-content {
  display: block;
  
  /*z-index: 99;
  position: relative;*/
}

.icon {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.dropdown.active .icon {
  transform: rotate(180deg);
}

/* Footer styles */
.footer {
  
  overflow: hidden;
  text-align: center;
  padding: 20px 0 0px 0;
  color:var(--new-blue);
  background: rgb(247,252,254);
  background: radial-gradient(circle, rgba(247,252,254,1) 15%, rgba(216,239,248,1) 54%);
}

.footer .section{
  background: url(/./assets/images/banner/Mask\ Group\ 74.svg);
  background-repeat: no-repeat;
  background-position-y:1% ;
}

.x-border1{
  border-right:solid 1px #fff; 
  padding: 3rem;
}

.x-border2{
  border-left:solid 1px #fff;
   padding: 3rem;

}

.x-section-sm{
   background-color: #f0f0f000;
   width: 960px;
   margin: auto;
  }

.x-row-2{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#copy-right{
  font-size: 12px !important;
  background-color: #D1D1D1;
  color:#000;
  overflow: hidden;
}
#copy-right a{
 text-decoration: none;
  color:#000;
}

#copy-right p{
  font-size: 12px !important;
  text-decoration: none;
   color:#000;
 }

/*#copy-right .section .row{
  max-width: 60%;
  margin: auto;
  align-items: center;
  gap: 26px;
  color:#000;
}*/

#copy-right .section .row a{
  color:#000;
  text-decoration: none;
}



* Define the initial state of the element */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Define the animated state when it's in view */
.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}



/* Style for the scroll to top button */
.scroll-btn {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
cursor: pointer;
z-index: 999;
}

.scroll-btn img {
width: 50px;
height: 50px;
}


.max-w{
max-width: 55%;
padding: 1.5rem 0;
margin: auto;
}

@media (max-width: 767.98px) {
.max-w{
  max-width: 95%;
  
}
}



@keyframes pulse {
0% {
  transform: scale(1);
}
50% {
  transform: scale(1.1);
}
100% {
  transform: scale(1);
}
}

/* Styles for the social media icons */
.social-icons {
display: flex;
flex-direction: row;
align-items: center;
width: fit-content;
margin: auto;
filter: invert(1) brightness(3);

}

/* Style for each social media icon */
.icon {
display: block;
width: 30px; /* Adjust icon size as needed */
height: 30px; /* Adjust icon size as needed */
margin-bottom: 10px; /* Adjust space between icons */
background-size: cover;
}

.icon:hover {
animation: pulse 1s infinite; /* Apply pulse animation on hover */
}

/* LinkedIn icon */
.linkedin {
background-image: url('/./assets/images/social-media/Group%2086518@2x.png'); 
}

/* Facebook icon */
.facebook {
background-image: url('/./assets/images/social-media/Facebook.svg'); 
}

/* Twitter icon */
.twitter {
background-image: url('/./assets/images/social-media/Twitter.svg');
}

/* YouTube icon */
.youtube {
background-image: url('/./assets/images/social-media/Instagram.svg');
}

/* Instagram icon */
.instagram {
background-image: url('/./assets/images/social-media/Group%2086519@2x.png'); 
}


.side-content {
display: flex;
align-items: center;
gap: 4px;
}

.image-container {
display: inline-block;
width: 50px;
height: 50px;
/*overflow: hidden;*/
display: flex;
align-items: center;
justify-content: center; 
border-radius: 5px;
}

.image-container img {
width: 50px;
height: 50px;
object-fit: contain;
display: block;
margin: auto;

}

.text-content {
max-width: 70%;
font-size: 13px;
font-weight: 500;
line-height: 16px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
word-break: break-word;
}

@media (max-width: 767px) {
.image-container {
  width: 45px; /* Adjust width for smaller screens */
  height: 45px !important; /* Adjust height for smaller screens */
 
  margin-left: 5px;
  margin-right: 5px;
}
.image-container img {
  width: 35px;
  height: 35px; 
}
.side-content {
  padding-right: 0.5rem!important;
  padding-left: 0.1rem!important;
  align-items: center; /* Adjust alignment for mobile screens */
 
}
.btn-block img {
  width: 35px;
  height: 35px; 
}
.w20-x img {
  width: 35px;
  height: 35px; 
}

}




/*
.side-blocks {
display: flex;
align-items: flex-start;
}

.side-content {
display: flex;
align-items: center;
}

.image-container {
display: inline-block;
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-size: cover;
margin-right: 8px;
}

.text-content {
flex: 1;
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media screen and (max-width: 768px) {
.side-blocks {
  flex-direction: column;
  align-items: flex-start;
}

.side-content {
  flex-direction: row;
}

.text-content {
  flex: unset;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  margin-top: 8px;
}
}*/
@media screen and (min-width: 768px) {
.m-x-c{
    background-color: #fff;
    width: 0px;
    margin: 0px;
    padding: 0px;
    visibility: hidden;
    /* height: 14px; */
}
}