@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body,
html {
  height: 100%;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a {
  text-decoration: none;
}

.blue-txt {
  color: #017dcb;
}
.center {
  text-align: center;
}

.bold {
  font-weight: 600;
}

.m-b {
  margin-bottom: 16px;
}
.fourthplace.fourthplace-new  { margin-top:20px; }
.fourthplace {
	width: 76%;
	border-radius: 4px;
	background: #0c96e8;
	justify-items: center;
	display: grid;
	/* margin: 36px; */
	color: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 28px;
	font-weight: 800;
}
.btnfour  { 
	border: none;
	padding: 16px;
	color: #fff;
	
	font-weight: 600;
	font-size: 20px;
	animation: pulse 1.5s infinite;

background: #0c96e8;

}
.btn.btn-free {
	
	border: none;
	padding: 16px;
	color: #fff;
	border-radius: 20px;
	font-weight: 600;
	font-size: 20px;
	animation: pulse 1.5s infinite;

background: #0B96E7;
background: linear-gradient(0deg, rgba(11, 150, 231, 1) 0%, rgba(2, 233, 154, 1) 100%);
}
.organizeclass { padding-bottom: 7%;}
.offertext-cross {
  text-decoration: line-through;
  color: #b3b3b3; font-size:20px;
}
.marquee-container {
  position: sticky;
  top: 0;padding-top: 10px; text-align: center; 
  z-index: 10; background-color: #1675bf;
}
.marquee-text {
  font-size: 38px;
  color: #1675bf;
  /* font-weight: 600; */
  /* text-align: center; */
  background-color: #1675bf;
  letter-spacing: 1px;
  padding: 8px;
  position: sticky;
  top: 0;margin-top: -2px;
  z-index: 10;        text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
/*Hero section*/
#root {
  font-family: "Roboto", sans-serif;
}

body {
  margin: 0;
  line-height: inherit;
}
.add-top {
  position: relative;
  top: 45px;
}
.hero-banner {
  background-image: url(../image/Slider.png);
  /* height: calc(100vh - 216px); */
  /* Center and scale the image nicely */

  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-banner.hero-banner-inner   {
	
	  background-image: url(../image/banner-inner.jpg);
  /* height: calc(100vh - 216px); */
  /* Center and scale the image nicely */

  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-text h1 {
  font-size: 56px;
  color: white;
  text-shadow:2px 4px #000;
  margin: 20px 0;
  font-weight: 800;
}

.hero-text h2 {
  font-size: 24px;
  font-weight: 400;
  margin: 20px 0;
  color: white;
}

.slider-content {
  display: grid;
  grid-template-rows: 14% 60% 20%;
  padding: 24px;
  justify-items: center;
  height: inherit;
}

.logo1 {
  background-image: url(../image/World-unity-run-Logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 110px;
  height: auto;
}

.hero-text {
  text-align: center;
  padding-top: 14px;
}
.marquee-text span {
	  font-size: 30px;
    vertical-align: middle;
    opacity: 0.7;
}
.footer-link a:hover  { color: #f66e14;}
.logo2 {
  background-image: url(../image/Rp-mission-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 210px;
  height: auto;
}

.banner-subtitle span {
  background: white;
  padding: 8px;
  border-radius: 50px;
  margin-right: 10px;
  color: #f66e14;
  margin-bottom: 12px;
}

.banner-subtitle {
  margin: 26px 0;
  display: grid;
}

.banner-reg-btn {
  background: #f66e14;
  border: none;
  padding: 16px 24px;
  color: white;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
}


.award {
  /* background-image: url(../image/prize-section.png);
  height: calc(100vh - 750px);

  /* Center and scale the image nicely */
  /* background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
  background-color: #033d61;
}

.price-container img {
  padding: 16px;
  width: 100%;
}
.price-container {
	justify-items: center;
	display: grid;
	margin: 36px 36px 5px 36px;
}
.award-title {
  text-align: center;
}

.award-title h1 {
  font-size: 48px;
  color: #f66e14;
  animation: slideIn 0.1s linear;
  font-weight: 800;
}

.award-title h2 {
  font-size: 28px;
  color: #017dcb;
}

.event-container {
  align-self: anchor-center;
}

.event-text-content {
  text-align: center;
  justify-items: anchor-center;
}

.event-text-content h1 {
  color: #f66e14;
  font-size: 48px;
  margin-bottom: 8px;
}

.event-content {
  display: grid;
  column-gap: 2%;
  background: linear-gradient(45deg, #b8e8f1, #acedf8, #f6f9fa, #acedf8);
  background-size: 300% 300%;
  animation: gradientAnimation 5s ease infinite;
  padding: 16px 16px 0;
  /* align-items: center; */
}

.event-img-left,
.event-img-right {
  text-align: center;
}

.event-img-left img {
  width: 50%;
}

.event-img-right img {
  width: 45%;
}

.event-group-text1 {
  display: grid;
  justify-content: center;
}

.event-group-text2 {
  display: grid;
  justify-content: center;
}

.start-location,
.end-location {
  text-align: left;
}

.start-location p:first-child,
.end-location p:first-child {
  font-size: 12px !important;
}

.event-detail {
  display: flex;
  align-items: center;
  column-gap: 4px;
  border: 1px solid lightseagreen;
  padding: 8px;
  border-radius: 8px;
  height: 32px;
  margin: 3px;
}

.event-detail img {
  height: 100%;
}

.event-detail p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.important-conten h1,
.participant-content h1,
.participant-content > h1 > p {
  text-align: center;
}

.important-conten h1 {
  color: #f66e14;
  font-size: 50px;
}

.important-text1,
.important-text2 {
  display: grid;
  align-items: center;
  width: 80%;
  column-gap: 24px;
  margin-top: 16px;
}

.important-text1 p,
.important-text2 p {
  margin: 0;
}

.important-text1 img,
.important-text2 img {
  width: 100%;
}

.benefits {
  background: white;
  padding: 16px;
  border-radius: 20px;
  width: 200px;
  text-align: center;
  align-content: center;
  margin: 8px;
}
.benefits:hover {
  background: lightcyan;
  top: -8px;
  position: relative;
}

.benefits p {
  margin-bottom: 0;
}

.participant-content,
.important-conten,
.award,
.footer {
  display: grid;
  justify-items: center;
  padding: 26px 0;
}

.listofbenefits {
  display: grid;
  column-gap: 38px;
}

.participant-content {
  background-image: url(../image/participant-benefits-background.png);
  /* Center and scale the image nicely */
  background-attachment: fixed;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.sticky-content {
 /* display: flex;
  column-gap: 20px;
  align-items: center;*/
  font-size: 20px;
  font-weight: 600;
}
.benefits-reg-btn,
.sticky-btn {
  background: #f66e14;
  border: none;
  padding: 16px;
  color: white;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  animation: pulse 1.5s infinite;
}
.sticky-btn:hover {
  background: rgb(209, 12, 12);
}
.benefits-reg-btn {
  background: #017dcb;
  padding: 16px 38px;
}
.benefits-reg-btn:hover {
  background: #033d61;
}

.participant-footer {
  display: grid;
  grid-auto-flow: row;
  row-gap: 16px;
  padding: 28px;
}
.sticky {
  background: aliceblue;
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  padding: 24px;
  bottom: 0;
  position: sticky;
}

.sticky p {
  margin: 0;
}

.footer {
  background: black;
  color: white;
  padding: 24px;
}

.cta-content {
  text-align: center;
}
.cta-content img {
  width: 90%;
}

.footer-link {
  margin-bottom: 8px;
  text-align: center;
}

.footer-link a {
  color: white;
}

.social-media {
  display: flex;
  column-gap: 26px;
  align-items: center;
  margin-top: 32px;
  justify-content: center;
}

/*inner css*/
.hero-banner-inner .hero-text h1 {
	color: #faf226;
}
@media (min-width: 320px) {
  .hero-banner {
    height: calc(100vh - -264px);
  }
}
@media (min-width: 460px) {
  .award {
    /* height: calc(100vh - 858px); */
  }
}

@media (min-width: 600px) {
  .sticky-content {
    font-size: 24px;
    column-gap: 15px;
  }
  .listofbenefits {
    grid-template-columns: repeat(2, 1fr);
  }

  .event-group-text1 {
    grid-template-columns: repeat(2, 1fr);
  }

  .event-group-text2 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 900px) {
  .cta-content img {
    width: 70%;
  }
  .price-container {
    grid-auto-flow: column;
    align-items: end;
    column-gap: 32px;
  }
  .hero-text h2 {
    color: black;
  }

  .hero-banner {
    background-position: center;
    height: calc(100vh - 216px);
  }

  .event-detail p {
    white-space: nowrap;
  }

  .important-text1,
  .important-text2 {
    grid-auto-flow: column;
  }

  .banner-subtitle {
    display: flex;
    justify-content: center;
  }

  .event-img-right {
    display: grid;
    align-items: end;
    justify-items: center;
  }

  .event-img-left img {
    width: 100%; padding-top: 31%;
  }

  .event-img-right img {
    width: 85%;
  }

  .event-content {
    grid-template-columns: 24% 48% 22%;
    padding: 36px 36px 0;
  }

  .award-title h1 {
    font-size: 56px;
  }

  .award-title h2 {
    font-size: 40px;
  }

  .slider-content {
    grid-template-columns: 20% 60% 20%;
  }

  .participant-content,
  .important-conten,
  .award,
  .footer {
    justify-: center;
    padding: 64px 0;
  }

  .listofbenefits {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 30px;
  }

  .event-group-text1 {
    grid-template-columns: repeat(4, 1fr);
  }

  .event-group-text2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .award {
    /* height: calc(100vh - 290px); */
  }
}

@media (min-width: 1600px) {
  body,
  html {
    font-size: 24px;
    line-height: 1.4 !important;
  }

  .slider-content {
    grid-template-columns: 11% 78% 11%;
    padding-top: 64px;
  }

  .banner-reg-btn {
    font-size: 24px;
  }

  .hero-banner {
    height: calc(100vh - 340px);
  }

  .hero-text h1 {
    font-size: 86px;
    margin: 30px 0;
  }

  .hero-text h2 {
    font-size: 34px;
    margin: 36px 0;
    color: black; font-style: italic; text-shadow:1px 1px #fff;
  }

  .banner-subtitle span {
    font-size: 22px;
    margin-bottom: 32px;
  }

  .award-title h1 {
    font-size: 70px;
    margin-bottom: 20px;
  }

  .award-title h2 {
    font-size: 50px;
  }

  .event-text-content h1 {
    font-size: 70px;
    margin-bottom: 16px;
  }

  .event-detail p {
    font-size: 22px;
  }

  .start-location p:first-child,
  .end-location p:first-child {
    font-size: 16px !important;
  }

  .event-detail {
    height: 42px;
    margin: 6px;
  }

  .important-conten h1 {
    font-size: 70px;
    margin-bottom: 24px;
  }

  .important-text1,
  .important-text2 {
    width: 70%;
  }

  .participant-content h1 {
    font-size: 70px;
  }

  .benefits-reg-btn,
  .sticky-btn {
    font-size: 30px;
  }

  .participant-para {
    font-size: 32px;
  }
  /* inner*/
   .hero-banner-inner .slider-content {
	padding-top: 24px;
}

  .hero-banner-inner.hero-banner {
	height: auto;
}
 .hero-banner-inner .slider-content {
	grid-template-columns: 16% 67% 11%;
}
}


/* Participation Form - Updated Design */
.participation-form-container {
  background-color: #f8f9fa;
  padding: 40px 0;
}

.participation-form-container .card {
  border-radius: 8px;
  overflow: hidden;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Card Header with Back Button */
.participation-form-container .card-header {
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 16px;
  background-color: #ff9600 !important;
  border-bottom: none;
}

.participation-form-container .back-btn {
  color: #f66e14 !important; /* Orange color */
  font-size: 0.85rem;
  padding: 0;
  margin: 0;
}

.participation-form-container .back-btn:hover {
  color: #e05d00 !important; /* Darker orange on hover */
}

.participation-form-container .card-body {
  padding: 20px;
  background-color: #def5fb;
}

#root .participation-form-container .card-title {
  color: #000 !important;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 16px;
  text-transform: capitalize;
}
.registerlabel label {
	font-size: 15px;
	line-height: 1.7;
	border: 1px dashed #000;
	border-radius: 10px;
	padding: 10px 20px;
}

#root .participation-form-container .btn-primary.btn-blue, #root .participation-form-container .btn-primary.btn-blue:hover  { background-color:#313131 !important; }
#root .participation-form-container .btn-primary.btn-red, #root .participation-form-container .btn-primary.btn-red:hover  { background-color:#e71560 !important;width: 100%; height: 55px} 
#root.additionals .participation-form-container .btn-primary.btn-blue, #root.additionals .participation-form-container .btn-primary.btn-blue:hover  { background-color:#313131 !important; }
#root.additionals .participation-form-container .btn-primary.btn-red, #root.additionals .participation-form-container .btn-primary.btn-red:hover  { background-color:#e71560 !important;width:auto; height: 55px} 
.  { }

.participation-form-container .event-badge {
  background-color:transparent;
  padding: 4px 0px;
  border-radius: 4px;
  display: block;
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 0.9rem;
}
.backs-btn  { padding-bottom:30px;}

/* Form Elements */
.participation-form-container .form-control {
	padding: 11px 12px;
	border-radius: 8px;
	border: 1px solid #ced4da;
	font-size: 0.85rem;
	height: 55px;
}

.participation-form-container .form-control::placeholder {
  color: #6c757d;
  opacity: 0.7;
}

.participation-form-container .form-control:focus {
  border-color: #017dcb;
  box-shadow: 0 0 0 0.2rem rgba(1, 125, 203, 0.15);
}

/* Date Picker Customization */
.participation-form-container .datepicker {
  background-color: white;
}

/* Radio and Checkbox Styles */
.participation-form-container .form-check {
  margin-bottom: 8px;
  min-height: auto;
}

.participation-form-container .form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.15em;
  margin-right: 0.5em;
}

.participation-form-container .form-check-input:checked {
  background-color: #017dcb;
  border-color: #017dcb;
}

.participation-form-container .form-check-label {
  font-size: 0.85rem;
  font-weight: 400;
}

/* T-shirt size section */
.participation-form-container .tshirt-size-section {
  border-top: 1px solid #eee;
  padding-top: 20px;
  margin-top: 20px;
}

.participation-form-container .tshirt-size-section .row {
  margin-left: -8px;
  margin-right: -8px;
}

.participation-form-container .tshirt-size-section .col-4 {
  padding-left: 8px;
  padding-right: 8px;
}

/* Navigation buttons */
.participation-form-container .border-top {
  border-color: #eee !important;
}

.participation-form-container .btn-primary {
  background-color: #017dcb;
  border-color: #017dcb;
  padding: 6px 16px;
  font-weight: 500;
  border-radius: 4px;
  font-size: 0.85rem;
}

.participation-form-container .btn-primary:hover {
  background-color: #0167a3;
  border-color: #0167a3;
}
.visible-xs { display:none !important;}
/* Responsive adjustments */
@media (max-width: 768px) {
	.fourthplace {
	width: 65%;
	border-radius: 4px;
	background: #0c96e8;
	justify-items: center;
	display: grid;
	/* margin: 36px; */
	color: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 28px;
	font-weight: 800;
	padding-left: 30px;
	padding-right: 30px;
}
	.marquee-container {
	position: sticky;
	top: 0;
	padding-top: 5px;
	text-align: center;
	z-index: 10;
	background-color: #1675bf;
}
	.btn.btn-free {
	border: none;
	padding: 16px;
	color: #fff;
	border-radius: 19px;
	font-weight: 600;
	font-size: 9px;
	animation: pulse 1.5s infinite;
	background: #0B96E7;
	background: linear-gradient(0deg, rgba(11, 150, 231, 1) 0%, rgba(2, 233, 154, 1) 100%);
}
	.additionals .hero-banner, .registers .hero-banner{
	height: calc(33vh - -33px);
}
	.sticky {
	background: aliceblue;
	display: grid;
	grid-auto-flow: column;
	justify-content: space-between;
	padding: 10px;
	bottom: 0;
	position: sticky;
}
	.participant-para span { display:block; }
	.hero-text h2 {
	font-size: 26px;
	font-weight: 400;
	margin: 20px 0;
	color: white;
	font-style: italic;
}
.hero-banner {
    position: relative; /* Required for overlay positioning */
    background-image: url(../image/banner-mobile.jpg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    /* Ensure text is above overlay */
    z-index: 1;
   
}

/* Dark overlay to improve text readability */
.hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
    z-index: -1; /* Places overlay behind content */
}
	.logo2 {
  background-image: url(../image/logo-mob.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 210px;
  height: auto;
}
	.sticky-content {
	font-size: 16px;
	font-weight: 600;
	padding-top: 0px;
}
	.hero-banner {
	height: calc(80vh - -26px);
}
	.event-group-text1 {
	display: block;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
.event-group-text2  { 
display: block;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
} 
	.event-detail {
	display: flex;
	align-items: center;
	column-gap: 4px;
	border: 1px solid lightseagreen;
	padding: 8px 8px;
	border-radius: 8px;
	height: 32px;
	margin: 10px 3px;
}
	.visible-xs { display:block !important;}
	.hidden-xs  {display:none !important;}
	
	.additionals .hero-text h1, .registers .hero-text h1 {
		padding-top: 0%;
}
	.additionals .slider-content, .registers .slider-content {
	 display: grid; 
	grid-template-rows: 23% 9% 18%;
	padding: 24px;
	justify-items: center;
	height: inherit;
}
	.slider-content {
	display: grid;
	grid-template-rows: 10% 10% 10%;
	padding: 24px;
	justify-items: center;
	height: inherit;
}
  .participation-form-container {
    padding: 20px 0;
  }
  
  .participation-form-container .card-body {
    padding: 16px;
  }
  
  .participation-form-container .form-check {
    margin-bottom: 6px;
  }
  
  .participation-form-container .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Back Button Styles */
.back-btn-header {
  color: #f66e14 !important; /* Orange color */
  font-size: 0.85rem;
}

.back-btn-header:hover {
  color: #e05d00 !important; /* Darker orange on hover */
}

.back-btn-footer {
  color: #6c757d;
  font-size: 0.85rem;
}

.back-btn-footer:hover {
  color: #017dcb;
}

/* Date Picker Styles */
.datepicker {
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 30px;
}

/* Form Placeholder Styles */
.form-control::placeholder {
  color: #6c757d;
  opacity: 0.7;
}

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

/*
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
  animation-fill-mode: backwards;
}*/

/* Glow In 
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}

@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}

.delay-1 {
  animation-delay: 0.6s;
}*/

.animate {
  opacity: 0;
  transition: all 1.2s ease-out;
}
.animate.fade-up {
  transform: translate3d(0, 200px, 0);
}
.animate.fade-down {
  transform: translate3d(0, -200px, 0);
}
.animate.fade-right {
  transform: translate3d(200px, 0, 0);
}
.animate.fade-left {
  transform: translate3d(-200px, 0, 0);
}
.animate.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
#verified   { margin-left:auto; margin-right:auto;}
.otps { font-size:13px;  } 
.otp { color:#ff5200; }
.resend-otp p { color:#ff5200;}
.modal-open .modal-content   { padding-bottom: 40px;}

.modal-dialog.modal-dialog-centered .modal-header .btn-close {
	border: 2px solid #000;
	border-radius: 100px;
	color: #000;
	width: 12px;
	height: 12px;
	padding: 18px;
}
.otps h5  { padding-bottom:20px; }
.modal-dialog.modal-dialog-centered  .otp-input  { border: 1px solid #ff5200;}
.dash {
	padding-top: 11px; color:#ff5200;
	font-size: 19px;
	padding-left: 5px;
	padding-right: 5px;
}


.carousel-wrapper {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 5px 0;
}

.carousel {
display: flex;
animation: slide 30s linear infinite;

}

.carousel:hover {
animation-play-state: paused;
}

.carousel-item {
flex: 0 0 auto;

margin: 0 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;

padding: 15px;

transition: transform 0.3s, box-shadow 0.3s;
}

.carousel-item:hover {
transform: translateY(-5px) scale(1.05);


}

.carousel-item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;

}

.controls {
display: flex;
justify-content: center;
margin-top: 25px;
gap: 15px;
}

.control-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
font-size: 1.5rem;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
}

.control-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@media (max-width: 576px) {


.carousel-item {
width: 150px;
height: 110px;
margin: 0 15px;
}

.control-btn {
width: 35px;
height: 35px;
font-size: 1rem;
}
}

.logo-counter {
text-align: center;
margin-top: 15px;
font-size: 1.1rem;
opacity: 0.9;
}