/* Sasen Business & Agency HTML Template */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header / Style Two / Style Three / Style Four / Style Five / Style Six
5. Main Slider
6. Services Section
7. Chart Section
8. Default Section
9. Counter Section
10. Project Section
11. Call To Action Section / Style Two
12. Price Section
13. Testimonial Section / Style Two
14. Map Section
15. Newslatter Section
16. About Section / Style Two
17. Chart Section
18. Plans Section
19. Fullwidth Section
20. Team Section
21. Clients Section
22. Project Section
23. Pricing Tab Section
24. Page Title
25. Blogs Section
26. Error Section
27. Faq's Section
28. Pricing Section / Style Two / Style Three
29. Project Masonry
30. Project FullWidth / Style Two / Style Three / Style Four
31. Team Section / Style Two / Style Three / Style Four
32. Contact Map
33. Contact Info
34. Contact Form

**********************************************/


/*** 

====================================================================
	Reset
====================================================================

 ***/
* {
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
}

/*** 

====================================================================
  Global Settings
====================================================================

 ***/


 :root{
	--theme-color: #1C8AF3;
	--primary-color: #ffffff;
	--text-color: rgba(106, 106, 106, 1);
	--title-color: rgba(17, 17, 17, 1);
	--white-color: #FFFFFF;
	--text-font: 'Montserrat', sans-serif;
	--title-font: 'Montserrat', sans-serif;
}

.color-logo{
	color: #1C8AF3 !important;
}

body {
	font-size:15px;
	color:#777777;
	line-height:1.8em;
	font-weight:400;
	background:var(--white-color);
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-family: var(--title-font);
}

a{
	text-decoration:none;
	cursor:pointer;
	color: #111111;
}

a:hover,a:focus,a:visited{
	text-decoration:none;
	outline:none;
}

h1,h2,h3,h4,h5,h6 {
	position:relative;
	font-weight:normal;
	margin:0px;
	background:none;
	line-height:1.6em;
	font-family: var(--title-font);
}

input,button,select,textarea{
	font-family: var(--title-font);
}

::-ms-input-placeholder { /* Edge 12-18 */
	color: #6A6A6A;
}
  
::placeholder {
	color: #6A6A6A;
}
.theme_color{
	color:#111111;
}
p{
	position:relative;
	line-height:1.8em;
}
.auto-container{
	position:static;
	max-width:1290px;
	padding:0px 15px;
	margin:0 auto;
}
.medium-container{
	position: relative;
    max-width: 850px;
	padding:0px 15px;
    margin: 0 auto;
}
.login-container{
	position: relative;
    max-width: 510px;
	padding:0px 15px;
    margin: 0 auto;
}

.page-wrapper{
	position:relative;
	margin:0 auto;
	width:100%;
	min-width:300px;
	overflow: hidden;
}

.grey-bg{
	background-color:#f8fcff;
}

ul,li{
	list-style:none;
	padding:0px;
	margin:0px;	
}

.link-box.client_btn {
    text-align: left;
    margin-top: 45px;
}

.theme-btn{
	display:inline-block;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
    background: var(--theme-color);
	color: white !important;
	border: none !important;
}

.theme-btn.three {
    padding: 14px 30px;
}

.theme-btn.four {
    padding: 9px 30px;
	margin-top: 10px;
}

.centered{
	text-align:center;	
}

.theme-btn.four.btn-bg-color {
    background: var(--theme-color);
    border: none;
	color: var(--white-color);
}

/*List Style One*/

.list-style-one{
	position:relative;
	margin:0px 0px;
}

.list-style-one li{
	position:relative;
	padding-left:30px;
	margin-bottom:8px;
	color:#000000;
	font-size:15px;
	font-weight:400;
}

.list-style-one li:before{
	position:absolute;
	content:'\f00c';
	left:0px;
	top:0px;
	color: var(--title-color);
	font-size: 14px;
	font-weight: 300;
	font-family: 'FontAwesome';
}

.list-style-one li.cross:before{
	position:absolute;
	content:'\f00d';
	left:0px;
	top:0px;
	color:#e21e1e;
	font-size:16px;
	font-weight:300;
	font-family: 'FontAwesome';
}

/*Btn Style One*/

.btn-style-one{
	position:relative;
	line-height:24px;
	color:#222222;
	font-size:15px;
	font-weight:600;
	background:none;
	display:inline-block;
	padding:12px 40px 12px;
	border:2px solid #e7e7e7;
	border-radius:50px;
	text-transform:uppercase;
}

.btn-style-one:hover{
	opacity:0.70;
	color:var(--white-color);
	border-color:#03c7d9;
	background-color:#03c7d9;
}

/*Btn Style Two*/

.btn-style-two{
	position:relative;
	line-height:24px;
	color:var(--white-color);
	font-size:15px;
	font-weight:500;
	background:#03c7d9;
	display:inline-block;
	padding:13px 40px 13px;
	border-radius:50px;
	text-transform:uppercase;
}

.btn-style-two:hover{
	background:#ff4052;
	color:var(--white-color);
}

/*Btn Style Three*/

.btn-style-three{
	position:relative;
	line-height:24px;
	color:var(--white-color);
	font-size:14px;
	font-weight:500;
	background:none;
	border-radius:50px;
	letter-spacing:1px;
	display:inline-block;
	padding:11px 38px 11px;
	text-transform:uppercase;
	border:2px solid var(--white-color);
}

.btn-style-three:hover{
	background:#03c7d9;
	color:var(--white-color);
	border-color:#03c7d9;
}

/*Btn Style Four*/

.btn-style-four{
	position:relative;
	line-height:24px;
	color:#03c7d9;
	font-size:13px;
	font-weight:500;
	background:none;
	display:inline-block;
	padding:11px 34px 11px;
	border:2px solid #03c7d9;
	border-radius:50px;
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
}

.btn-style-four:hover{
	color:var(--white-color);
	background-color:#03c7d9;
}


/* Preloader */

.handle-preloader {
	align-items: center;
	-webkit-align-items: center;
	display: flex;
	display: -ms-flexbox;
	height: 100%;
	justify-content: center;
	-webkit-justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9999999;
	background: #1C8AF3;
  }
  
  .preloader-close{
	position: fixed;
	z-index: 99999999;
	font-size: 14px;
	background: #fff;
	color: #1C8AF3;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	right: 30px;
	top: 30px;
	font-weight: 400;
  }
  
  .handle-preloader .animation-preloader {
	position: absolute;
	z-index: 100;
  }
  
  .handle-preloader .animation-preloader .spinner{
	animation: spinner 1s infinite linear;
	border-radius: 50%;
	height: 150px;
	margin: 0 auto 45px auto;
	width: 150px;
  }
  
  .handle-preloader .animation-preloader .txt-loading {
	text-align: center;
	user-select: none;
  }
  
  .handle-preloader .animation-preloader .txt-loading .letters-loading:before{
	animation: letters-loading 4s infinite;
	content: attr(data-text-preloader);
	left: 0;
	opacity: 0;
	top:0;
	position: absolute;
  }
  
  .handle-preloader .animation-preloader .txt-loading .letters-loading{
	font-family: var(--title-font);
	font-weight: 500;
	letter-spacing: 15px;
	display: inline-block;
	position: relative;
	font-size: 70px;
	line-height: 70px;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.30);
  }
  
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {animation-delay: 0.2s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {animation-delay: 0.4s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {animation-delay: 0.6s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {animation-delay: 0.8s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s;}
  .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s;}
  .handle-preloader .loader-section {
	background-color: var(--white-color);
	height: 100%;
	position: fixed;
	top: 0;
	width: calc(50% + 1px);
  }
  
  .preloader .loaded .animation-preloader {
	opacity: 0;
	transition: 0.3s ease-out;
  }
  
  .handle-preloader .animation-preloader .txt-loading .letters-loading:before{
	color: var(--white-color);
  }
  
  .handle-preloader .animation-preloader .spinner{
	border: 3px solid var(--white-color);
	border-top-color: rgba(255, 255, 255, 0.5); 
  }
  
  /* Animación del preloader */
  @keyframes spinner {
	to {
	  transform: rotateZ(360deg);
	}
  }
  @keyframes letters-loading {
	0%,
	75%,
	100% {
	  opacity: 0;
	  transform: rotateY(-90deg);
	}
  
	25%,
	50% {
	  opacity: 1;
	  transform: rotateY(0deg);
	}
  }
  
  @media screen and (max-width: 767px) {
	.handle-preloader .animation-preloader .spinner {
	  height: 8em;
	  width: 8em;
	}
  }
  @media screen and (max-width: 500px) {
	.handle-preloader .animation-preloader .spinner {
	  height: 7em;
	  width: 7em;
	}
	.handle-preloader .animation-preloader .txt-loading .letters-loading {font-size: 40px; letter-spacing: 10px;}
  }


.preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999; background-color:var(--white-color); background-position:center center; background-repeat:no-repeat; background-image:url(../images/icons/preloader.svg);}

img{
	display:inline-block;
	max-width:100%;
	height:auto;	
}


.float-bob-y {
    animation-name: float-bob-y;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: float-bob-y;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob-y;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob-y;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
  }
  
  .float-bob-x{
    animation-name: float-bob-x;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: float-bob-x;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: float-bob-x;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob-x;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob-x;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
  }

  @-webkit-keyframes ripple {
    70% {
      -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }
    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }
  @keyframes ripple {
    70% {
      -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }
    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }



:root {
	--progress-bar-width: 100px;
	--progress-bar-height: 100px;
	--font-size: 30px;
}
.circular-progress {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner-circle {
	position: absolute;
	width: calc(var(--progress-bar-width) - 30px);
	height: calc(var(--progress-bar-height) - 30px);
	border-radius: 50%;
	background-color: lightgrey;
}
  
.percentage {
    position: absolute;
    right: 155px;
    top: 34px;
    font-size: var(--font-size);
    color: rgba(30, 27, 57, 1) !important;
    line-height: 40px;
    font-weight: 700;
	font-family: "Outfit";
}
.progress-two .percentage {
    position: relative;
    right: 0px;
    top: 0px;
    font-size: 20px;
    color: rgba(30, 27, 57, 1) !important;
    line-height: 40px;
    font-weight: 600;
    font-family: "Outfit";
}


/*** 

====================================================================
	Social Icon One
====================================================================

***/

.social-icon-one{
	position:relative;
}

.social-icon-one .share{
	color:#222222;
	font-size:16px;
	font-weight:700;
}

.social-icon-one li{
	position:relative;
	margin-left:12px;
	display:inline-block;
}

.social-icon-one li a{
	position:relative;
	font-size:18px;
	color:#333333;
	display:inline-block;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.social-icon-one li a:hover{
	color:#03c7d9;
}



/*** 

====================================================================
	Scroll To Top style
====================================================================

***/

.scroll-to-top{
	position:fixed;
	bottom:15px;
	right:15px;
	width:50px;
	height:50px;
	color:var(--white-color);
	font-size:13px;
	text-transform:uppercase;
	line-height:50px;
	text-align:center;
	z-index:100;
	cursor:pointer;
	background: linear-gradient(270deg, #1C8AF3 0%, #1C8AF3 100%);
	display:none;
	border-radius:3px;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	transition:all 500ms ease;		
}

.scroll-to-top::before{
	position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    content: '';
    z-index: -1;
	background: var(--title-color);
    /* background: linear-gradient(270deg, #1C8AF3 0%, #1C8AF3 100%); */
	color: var(--white-color);
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
}
.scroll-to-top:hover:before{
	width: 100%;
}
.scroll-to-top:hover i{
	color: var(--white-color);
}

/* .scroll-to-top:hover{
	color:var(--white-color);
	background: var(--title-color);
} */

.centred{
	text-align: center;
}

.subtitle {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: var(--title-color);
    font-family: var(--text-font);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.heading_title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 600;
    font-family: var(--title-font);
    color: var(--title-color);
    margin-bottom: 35px;
}


.heading_title::after {
    content: '';
    display: block;
    width: 70px;
    height: 5px; /* Puedes ajustar la altura si lo deseas */
    background-color: #1C8AF3 !important;
    margin-top: 10px; /* Espacio entre el texto y la línea */
    /* Centrar horizontalmente debajo del texto */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}



/* ----------Contact Info------------- */
.social-contact-section {
    position: relative;
    padding-top: 160px;
    z-index: 1;
}
.contact-section {
    position: relative;
    margin: 120px 0px 150px 0px;
    z-index: 1;
}
.link-box .btn-large.contact-us {
    display: block;
}
.contact-info{
	position:relative;
	z-index: 1;
}
.contact-info .info-block{
	position:relative;
	display:block;
	margin-bottom:30px;
	border-radius: 10px;
}
.contact-info .info-block .inner-box{
	position:relative;
	display:block;
	padding: 54px 0px 54px 122px;
	line-height:24px;
	font-size:14px;
	color:#707070;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 30px 100px rgba(0, 0, 0, 0.05);
	border-radius: 10px;
}
.contact-info .info-block .inner-box h4{
	font-weight: 500;
	text-transform:capitalize;
	margin-bottom:10px;
	font-size: 20px;
	line-height: 22px;
	color: rgba(0, 0, 0, 1);
}
.contact-info .info-block .inner-box .icon-box{
	position:absolute;
	left: 40px;
	top: 55px;
	text-align:center;
	width:60px;
	height:60px;
	line-height:64px;
	background:rgba(248, 241, 255, 1);
	font-size: 25px;
	border-radius:50%;
}
.contact-info .info-block .inner-box .icon-box span {
    background: linear-gradient(180deg, #BE37FF 0%, #6A2FFF 61.11%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 500ms ease;
}

.contact-info .info-block .inner-box .text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
	margin-bottom: 0px;
	color: rgba(0, 0, 0, 1);
}
.contact-shape-image {
    position: relative;
}
.contact-shape-image img {
    position: absolute;
    display: inline-block;
    top: -154px;
    left: 28%;
    z-index: -2;
}


/* -----------Login Page Css-------------------- */
.login-section {
    position: relative;
    margin: 150px 0px;
}
.login-section .form-container .form {
    margin-bottom: 0px;
}
.form-container {
    display: flex;
    flex-direction: column;
}
.login-section .close-icon {
    position: absolute;
    top: 32px;
    right: 50px;
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
}
.form-container .form {
    background-color: #fff;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.form-container .form h2 {
	margin-bottom: 20px;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
    color: var(--title-color);
}
.form-container .form .input-group {
    margin-bottom: 15px;
	display: block;
}
.form-container .form .input-group label {
	display: block;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
	font-family: var(--text-font);
    color: var(--title-color);
}
.form-container .form .input-group input {
    width: 100%;
    padding: 10px 27px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 145px;
	margin-bottom: 10px;
}
.form-container .form button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 3px;
    background: linear-gradient(90deg, #1C8AF3 0%, #1C8AF3 100%);
    color: #fff;
	border-radius: 145px;
    cursor: pointer;
}
.form-container .form button:hover {
    background-color: #0056b3;
}
.form-container .form span.psw {
    position: relative;
    display: block;
    text-align: right;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
	margin-bottom: 30px;
	background: linear-gradient(270deg, #1C8AF3 0%, #1C8AF3 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
.form-container .form .small-xl .text-muted {
    font-family: var(--text-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--title-color);
}
.form-container .form .small-xl a {
    font-family: var(--text-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    background: linear-gradient(270deg, #1C8AF3 0%, #1C8AF3 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.form-container .form .small-xl {
    margin-top: 30px;
}
.form-container .form p{
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	font-family: var(--text-font);
	color: rgba(110, 110, 110, 1);
	margin-bottom: 20px;
}
.form-container .form .login-part:before{
	position: absolute;
	content: "";
	top: 10px;
	left: 0px;
	height: 1px;
	width: 170px;
	background-color: rgba(229, 229, 229, 1);
}
.form-container .form .login-part:after{
	position: absolute;
	content: "";
	top: 10px;
	right: 0px;
	height: 1px;
	width: 170px;
	background-color: rgba(229, 229, 229, 1);
}
.google-link ul {
    display: flex;
    justify-content: center;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: var(--title-color);
	width: 100%;
    padding: 10px 27px;
    border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 145px;
	margin-bottom: 30px;
}
.google-link ul li{
	margin-right: 10px;
}
.facebook-link ul {
    display: flex;
    justify-content: center;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: var(--title-color);
	width: 100%;
    padding: 10px 27px;
    border: 1px solid rgba(229, 229, 229, 1);
	border-radius: 145px;
}
.facebook-link ul li{
	margin-right: 10px;
}
.signup-section {
    position: relative;
    margin: 150px 0px;
}
.signup-section .form-container .form{
	margin-bottom: 0;
}
.signup-section .close-icon {
    position: absolute;
    top: 32px;
    right: 50px;
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
}

.owl-carousel {
	-ms-touch-action: none;
	touch-action: none;
}


.circle-celeste {
    width: 150px; /* ajusta el ancho y alto según tus necesidades */
    height: 150px;
    background-color: #ADD8E6; /* celeste */
    border-radius: 50%; /* para hacer un círculo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-celeste img {
    max-width: 100%;
    max-height: 100%;
    display: block; /* Asegura que la imagen sea un elemento de bloque */
    margin: auto; /* Centra la imagen dentro del div */
}

.whatsapp-float {
	position: fixed;
	bottom: 40px;
	right: 5%;
	z-index: 1000;
  }
  
  .whatsapp-icon {
	margin-top: 16px;
  }

.brand-announcement-banner {
    position: fixed; /* Fix the banner at the top of the viewport */
    top: 0; /* Align it to the top */
    left: 0; /* Align it to the left */
    right: 0; /* Align it to the right */
    background-color: #007bff; /* Blue background color */
    color: #ffffff; /* White text color */
    padding: 20px 0;
    margin-bottom: 20px; /* Optional: space below the banner */
    z-index: 1000; /* Ensure it stays above other content */
    border-radius: 0 0 5px 5px; /* Rounded bottom corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.brand-announcement-banner h2 {
    margin: 0;
    font-size: 24px;
}

.brand-announcement-banner a {
    color: #ffffff; /* White link color */
    text-decoration: underline; /* Underline for links */
}

.brand-announcement-banner .btn {
    margin-top: 10px;
    background-color: #28a745; /* Green button color */
    color: #ffffff; /* White button text */
    border: none; /* No border */
    padding: 10px 20px; /* Button padding */
    border-radius: 5px; /* Rounded button corners */
}

.brand-announcement-banner .btn:hover {
    background-color: #218838; /* Darker green on hover */
}

.more-info-section {
    background-color: #e9ecef; /* Slightly darker background for the info section */
    padding: 20px;
    border-radius: 5px;
    margin-top: 80px; /* Add margin to avoid overlap with the fixed banner */
}