/*
Theme Name: Ventor Baptist Church
Author: Steven B. Uniacke
*/


/* Universal Styles */
body, h1, h2, h3, p { margin: 0; padding: 0; }
a { text-decoration: none; color: #0082e6; }
a:hover { text-decoration: underline; }

* {padding: 0; margin: 0; box-sizing: border-box; text-decoration: none;}
html { scroll-behavior: smooth;}
body {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; text-align: justify; margin: 0; padding: 0;}
main {padding: 15px;}

@font-face {
    font-family: Montserrat-font;
    src: url(font/Montserrat-ExtraBold.ttf);
}
@font-face {
    font-family: Cabin-font;
    src: url(font/Cabin-VariableFont_wdth\,wght.ttf);
}

h1 {font-size: 3em; text-align: center;}
.wcs {font-weight: bold; font-size: large; font-style: italic; text-align: center;}
.cross {position: relative; margin: auto; font-size: 10rem; text-align: center;}
.centre {text-align: center;}
.no-bullets {list-style-type: none; padding: 10px;}

.red {color: #ff0000;}

/** Navigation **/
.mob-menu {position: absolute; right: 0; top: 0; width: 80px; height: 80px; padding: 0; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all .5s ease-in-out;}
.mob-menu-burger {width: 40px; height: 5px; background: #ffffff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255, 101, 47, .2); transition: all .5s ease-in-out;}
.mob-menu-burger::before, .mob-menu-burger::after {content: ''; position: absolute; width: 40px; height: 5px; background: #ffffff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255, 101, 47, .2); transition: all .5s ease-in-out;}
.mob-menu-burger::before {transform: translateY(-15px);}
.mob-menu-burger::after {transform: translateY(15px);}
.mob-menu.open .mob-menu-burger { transform: translateX(50px); background: transparent; box-shadow: none;}
.mob-menu.open .mob-menu-burger::before {transform: rotate(45deg) translate(-35px -35px);}
.mob-menu.open .mob-menu-burger::after {transform:rotate(-45deg) translate(-35px -35px);}

nav {background: #0082e6; height: 80px; width: 100%;}
label.logo {color: #ffffff; font-size: 35px; line-height: 80px; padding: 0 15px 0 100px; font-weight: bold; transition: .5s}
label.logo a {color: #ffffff;}
.img-logo {position: absolute; top: 15px; left: 10px;}
nav ul {float: right; margin-right: 20px;}
nav ul li {display: inline-block; line-height: 80px; margin: 0 5px; list-style: none; transition: .5s}
nav ul li a {color: #ffffff; font-size: 17px; padding: 7px 13px; border-radius: 3px; text-transform: uppercase; text-decoration: none;}
nav ul li a:hover { background: #1b9bff; transition: .3s;}
a.active, a.hover {background: #1b9bff; transition: .5s;}
.checkbtn {font-size: 30px; color: white; float: right; line-height: 80px; margin-right: 40px; cursor: pointer; display: none;}
#check {display: none;}

@media (max-width: 1376px) {label.logo{font-size: 29px; padding-left: 95px;} nav ul li a {font-size: 16px;}}
@media (max-width: 1023px) {.checkbtn {display: block;} nav ul {position: absolute; z-index: 9999; width: 100%; height:auto; background: #2c3e50; top: 80px; left: -100%; text-align: center; transition: all .5s;} nav ul li {display: block; margin: 50px 0; line-height: 30px;} nav ul li a {font-size: 20px;} a:hover, a:active {background: none; color: #0082e6;} #check:checked ~ ul {left: 0;}}


/** Aside Navigation **/
aside {float: right; background-color: #eeeeee; padding: 15px; margin: 30px; border: 5px solid black; border-radius: 25px;}
aside ul {list-style-type: none;}
aside ul li {padding: 10px;}
aside ul li a {color: #000000;}
aside ul li a:hover {color: #0082e6;}
aside ul hr {border-top: 1px dashed #000000}
.list-title {font-size: 20px; text-transform: uppercase;}


/** Home **/
.index-container {width: 75%; margin: auto; background: #eee; border-radius: 25px; border: #000000 dashed 1px; transition: 0.5s ease; padding: 15px;}
.index-quote-container {padding: 0 15px; transition: 0.5 ease;}
/* .index-quote-start-span {font-size: 150px; line-height: 0.7em; opacity: 0.2; transition: 0.5 ease;} */
/* .index-quote-end-span {font-size: 150px; opacity: 0.2; float: right;} */
/* .index-quote-container p {padding: 0px 15px 15px 45px; margin-top: -80px; font-size: 26px; font-style: italic; transition: 0.5 ease;} */

.index-upcoming-events h2 {
  padding: 5px;
  color: #ffffff;
  background-color: #0082e6;
}
.index-upcoming-events img {
  float: left;
  margin: 5px;
}

.img-church {max-width: 600px; width: 75%; margin: auto; display: block;}
.img-column {float: left;width: 50%;padding: 5px;}
.img-row::after {content: "";clear: both;display: table;}
.img-row p {text-align: center;}


#ct{max-width: 370px; border: 2px solid #0082e6; margin: 25px auto; text-align: center; position: relative; color: #000000; padding: 15px;}
.index-quote-container span{
  background:#eee;
  color:#0082e6;
  padding:0 10px;
  font-size:22px;
  position:relative; 
  top:-28px;
}
.corner{height:30px;
  width:30px;
  border-radius:50%;
  border:2px solid #fff;
  transform:rotate(-45deg);  
  position:absolute;
  background:#eee;
}

#left_top{
  top:-16px;
  left:-16px;
  border-color:transparent transparent #0082e6 transparent;
}
#right_top{
  top:-16px;
  right:-16px;
  border-color:transparent transparent transparent #0082e6;
}
#left_bottom{
  bottom:-16px;
  left:-16px;
  border-color:transparent #0082e6 transparent transparent ;
}
#right_bottom{
  bottom:-16px;
  right:-16px;
  border-color:#0082e6 transparent transparent transparent;
}
.index-quote-container p{margin-top: -15px; font-size:20px}


.bible-verse-day {position: relative; width: 75%; margin: auto; border: 3px solid #0082e6; border-radius: 25px; padding: 15px;}
.bible-verse-day p {font-size: larger;}

@media (max-width: 514px) {.index-quote-end-span {margin-top: 75px;}}
@media (min-width: 515px) and (max-width: 663px) {.index-quote-end-span {margin-top: 50px;}}
@media (max-width: 850px) {.index-container, .bible-verse-day {width: 100%;}}
/* @media (max-width: 1001px) {.index-quote-end-span {margin-top: 50px;}} */
@media (max-width: 1003px) {.index-quote-container {margin: 15px -15px 0px;} /*.index-quote-container p {padding-left: 45px; margin-top: -80px}*/}


/** About **/
.about-us-container {width: 75%; margin: auto; background: #eee; border-radius: 25px; border: #000000 dashed 1px; transition: 0.5s ease;}
.about-info {padding: 15px; text-align: justify;}

.ministers-welcome {padding: 15px; text-align: justify;}

.our-beliefs {padding: 15px; text-align: justify;}
.our-beliefs ul, .our-beliefs ol {padding-left: 20px;}
.our-beliefs ol li {padding: 5px 0 10px 0;}

.meet-the-team {padding: 15px; text-align: justify;}

.church-policies {padding: 15px; text-align: justify;}

.history {padding: 15px; text-align: justify;}

.mission-support {padding: 15px; text-align: justify;}

.community-initiatives {padding: 15px; text-align: justify;}

.become-a-member {padding: 15px; text-align: justify;}
.become-a-member ul {padding-left: 20px;}

.coming-soon {
  background: #f5f5f5;
  padding: 15px;
  border-left: 5px solid #0082e6;
  font-size: 18px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 850px) {.about-us-container {width: 100%;}}

/** Become A Member **/
.become-a-member-container {width: 75%; margin: auto; background: #eee; border-radius: 25px; border: #000000 dashed 1px; transition: 0.5 ease; padding: 15px; text-align: justify;}
.become-a-member-container ul, .become-a-member-container ol {padding-left: 20px;}
.download-btn {
  display: inline-block;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: white;
  background-color: #0082e6;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease-in-out, transform 0.2s;
  margin-top: 15px;
}

.download-btn:hover {
  background-color: #005bb5;
  transform: scale(1.05);
}

@media (max-width: 850px) {.become-a-member-container {width: 100%;}}

/** Worship Resources */
.worship-resources-container {width: 75%; margin: auto; background: #eee; border-radius: 25px; border: #000000 dashed 1px; transition: 0.5 ease; padding: 15px; text-align: justify;}
.worship-resources-container ul {padding-left: 20px;}
.wrc-wrapper {background: #fff; padding: 20px 30px; box-shadow: 0px 0px 10px rgba(0,0,0,0.25); text-align: center;}
.wrc-wrapper .wrc-btns {display: flex; margin: 30px 0 20px 0}
.wrc-btns a {position: relative; margin: 0 20px; height: 60px; width: 200px; display: block; line-height: 60px; border-radius: 30px; text-decoration: none; color: #fff; font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.wrc-btns a:first-child {background: linear-gradient(-90deg, #f5ce62, #e85a19);}
.wrc-btns a:last-child {background: linear-gradient(90deg, #0162c8, #55e7fc);}
.wrc-btns a > span {position: absolute; background: #fff; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; animation: ripples 0.6s linear infinite;}
@keyframes ripples {
  0% {width: 0px; height: 0px; opacity: 0.5;}
  100% {width: 500px; height: 500px; opacity: 0;}
}

/** Services **/
/* .hall-hire-form {position: relative; width: 750px; background: #eeeeee; padding: 15px; margin: auto; border: #000000 1px solid; border-radius: 15px;} */

.services-container {width: 75%; margin: auto; background: #eee; border-radius: 25px; border: #000000 dashed 1px; transition: 0.5s ease; padding: 25px;}
.services-container h2 {text-align: center;}
.services-container a img {display: block; margin: auto; max-width: 100%;}

::selection {color: #fff;background: #0D6EFD;}
.hall-hire-form-wrapper {margin: auto; width: 715px; background: #fff; border-radius: 5px; box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.1);}
.hall-hire-form-wrapper header {font-size: 22px; font-weight: 600; padding: 20px 30px; border-bottom: 1px solid #ccc; text-align: center;}
.hall-hire-form-wrapper form {margin: 35px 30px; padding-bottom: 5px;}
.hall-hire-form-wrapper form.disabled {pointer-events: none; opacity: 0.7;}
form .dbl-field {display: flex; margin-bottom: 25px; justify-content: space-between;}
.dbl-field .field {height: 50px; display: flex; position: relative; width: calc(100% / 2 - 13px);}
.hall-hire-form-wrapper form i {position: absolute; top: 50%; left: 18px; color: #ccc; font-size: 17px; pointer-events: none; transform: translateY(-50%);}
form .field input,form .message textarea{width: 100%; height: 100%; outline: none; padding: 0 18px 0 48px; font-size: 18px; border-radius: 5px; border: 1px solid #ccc; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
.field input::placeholder,.message textarea::placeholder {color: #ccc;}
.field input:focus,.message textarea:focus {padding-left: 47px; border: 2px solid #0082e6;}
.field input:focus ~ i, .message textarea:focus ~ i {color: #0082e6;}
form .message {position: relative;}
form .message i {top: 30px; font-size: 20px;}
form .message textarea {min-height: 130px; max-height: 230px; max-width: 100%; min-width: 100%; padding: 15px 20px 0 48px;}
form .message textarea::-webkit-scrollbar {width: 0px;}
.message textarea:focus {padding-top: 14px;}
form .button-area {margin: 25px 0; display: flex; align-items: center;}
.button-area button {color: #fff; border: none; outline: none; font-size: 18px; cursor: pointer; border-radius: 5px; padding: 13px 25px; background: #0082e6; transition: 0.3s ease; margin: auto;}
.button-area button:hover {background: #025ce3;}
.button-area span {font-size: 17px; margin-left: 30px; display: none;}

@media (max-width: 800px) {.hall-hire-form-wrapper {width: 100%;} .hall-hire-form-wrapper form {margin: 35px 20px;} form .dbl-field{flex-direction: column; margin-bottom: 0px;} form .dbl-field .field{width: 100%; height: 45px; margin-bottom: 20px;} form .message textarea{resize: none;} form .button-area{margin-top: 20px; flex-direction: column;} .button-area button{width: 100%; padding: 11px 0; font-size: 16px;} .button-area span{margin: 20px 0 0; text-align: center;}}
@media (max-width: 1100px) {.services-container {width: 100%;}}


/** Events **/
.responsiveCal {position: relative; padding-bottom: 100%; height: 0; overflow: hidden;}
/* .responsiveCal {position: absolute; top: 200px; left: 0; height: 80vh; width: 100%;} */
.responsiveCal iframe {position: absolute; top: 0; left: 12.5%; width: 75%; height: 100%; border: #000000 dashed 1px; border-radius: 25px; padding: 10px;}

.events-container h2 {text-align: center;}
.events-container a img {display: block; margin: auto; max-width: 100%;}


.previous-events {
  /*position: absolute; top: calc(80vh + 250px); left: 12.5%; */
  text-align: center; width: 75%; margin: auto; background: #eee; border-radius: 25px; border: #000000 dashed 1px; transition: 0.5s ease; padding: 25px;}
.youtube-iframe {position: relative; overflow: hidden; max-width: 560px; margin: auto;}
/* .youtube-iframe iframe, .youtube-iframe object, .youtube-iframe embed {position: absolute; top: 0; left: 0; width: 75%; height: 75%;} */

@media (max-width: 1250px) {.responsiveCal iframe {left: 0; width: 100%;} .previous-events {left: 0; width: 100%;}}

/** Links **/
.links-container {width: 75%; margin: auto; background: #eee; border-radius: 25px; border: #000000 dashed 1px; transition: 0.5s ease; padding: 25px;}
.links-container h2 {text-align: center;}
.links-container a img {display: block; margin: auto; max-width: 100%;}

code {border: 1px solid #000000; background-color: #eee; padding: 12px; margin: 16px; display: block; max-width:1200px;}
.code {border: 1px solid #000000; background-color: #eee; padding: 12px; margin: 16px; display: block; max-width:1200px;}
.foodbank-bullets {padding: 15px 15px 15px 30px;}
.foodbank-bullets li {padding: 5px 5px;}

@media (max-width: 850px) {.links-container {width: 100%;}}


/** Contact **/
.contact-container {width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; border: solid black 1px;}
.contact-container p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.contact-container a {
  color: #0082e6;
  text-decoration: none;
  font-weight: bold;
}

.contact-container a:hover {
  text-decoration: underline;
}

.col-md-12 {position: relative; width: 100%; padding-right: 15px; padding-left: 15px; height: 650px; background-color: #e2e8ee;}
.google-map {position: absolute; top: 0; right: 0; height: 650px; width: 400px;}
.google-map-canvas {overflow: hidden; background: none !important; height: 650px; width: 400px;}

.contact-info {width: 64%; height:650px;}
.contact-info a {color: #4d4d4d;}
.contact-top-left-info {width: 50%; height: 50%; text-align: center; padding: 30px; float: left;}
.contact-top-right-info {width: 50%; height: 50%; text-align: center; padding: 30px; float: right;}
.contact-bottom-right-info {width: 50%; height: 50%; text-align: center; padding: 30px; float: right;}
.contact-bottom-left-info {width: 50%; height: 50%; text-align: center; padding: 30px; float: left;}
.icon {font-size: 22px; color: #fff; align-items: center !important;}
.font-awesome {width: 60px; height: 60px; border-radius: 50%; background: #1b9bff; margin: 0 auto; margin-bottom: 20px; justify-content: center; padding-top: 18px;}
.font-awesome-offcentre {width: 60px; height: 60px; border-radius: 50%; background: #1b9bff; margin: 0 auto; margin-bottom: 20px; justify-content: center; padding-top: 18px; padding-right: 5px;}
.font-awesome-facebook {width: 60px; height: 60px; border-radius: 50%; background: #1b9bff; margin: 0 auto; margin-bottom: 20px; justify-content: center; padding-top: 18px; padding-right: 3px;}
.font-awesome a, .font-awesome-facebook a, .font-awesome-offcentre a {color: #ffffff;}
.email-small {position: absolute; top: 32%; left: 37%;}

.contact-top-mobile-info {position: absolute; top: 0; left: 0; width: 100%; text-align: center; padding: 30px;}
.contact-second-mobile-info {position: relative; top: 25%; left: 0; width: 100%; text-align: center; padding: 30px;}
.contact-third-mobile-info {position: relative; top: 50%; left: 0; width: 100%; text-align: center; padding: 30px;}
.contact-bottom-mobile-info {position: relative; top: 75%; left: 0; width: 100%; text-align: center; padding: 30px;}
.icon-mobile {font-size: 22px; color: #fff; align-items: center !important;}
.google-map-mobile {position:absolute; top: 200px; left: 0; margin: auto; height: 100%; width: 100%;}
.google-map-canvas-mobile {overflow: hidden; background: none !important; height: 425px; width: 100%;}

@media (min-width: 576px) {.contact-container {max-width: 540px;}}
@media (min-width: 768px) {.contact-container {max-width: 720px;} .col-md-12 {flex: 0 0 100%; max-width: 100%;}}
@media (min-width: 992px) {.contact-container {max-width: 960px;} .contact-info-mobile {visibility: hidden;} }
@media (min-width: 1200px) {.contact-container {max-width: 1140px;} .email-large{visibility: visible;} .email-small{visibility: hidden;}}
@media (max-width: 992px) {.contact-info {visibility: hidden;} .email-large {visibility: hidden;} .email-small{visibility: hidden;} .col-md-12 {height: auto;} .contact-info-mobile {height: auto;}}
@media (min-width: 992px) and (max-width: 1200px) {.email-small {visibility: visible;} .email-large{visibility: hidden;}}
@media (max-width: 500px) {h1 {font-size: 2em;} label.logo {font-size: 5vw;}}

.contact-us-container {display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; justify-content: space-between !important;}
#email-placeholder, #phone-placeholder {display: none;}
#email-placeholder a, #phone-placeholder a {
  display: inline-block; /* Ensures proper block behavior */
  white-space: normal; /* Allows text wrapping */
  max-width: 100%; /* Prevents overflow */
  text-overflow: ellipsis;
  font-size: 14px;
}
.contact-second-mobile-info p {
  overflow: hidden;
  text-overflow: ellipsis; /* Optional: Show "..." for very long text */
  white-space: normal;
  word-break: break-word;
}

.hidden {display: none;}
.protected-link {
  background-color: #0082e6;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s, transform 0.1s;
}

.protected-link:hover {
  background-color: #005bb5;
}

.protected-link:active {
  transform: scale(0.98);
}


/** 404 Error **/

.notfound-container {height: 500px; position: relative; text-align: center;}
.notfound-inside {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.notfound-inside h1 {font-size: 450px; display: flex; align-items: center; justify-content: center; position: relative; gap: 0px;}
.text-first-4, .text-last-4 {font-family: 'Montserrat-font'; font-size: inherit; text-shadow: 4px 0px 0px #ffffff; position: relative; }
.text-top-0,
.text-bottom-0 {
  font-family: 'Montserrat-font';
  position: absolute;
  font-size: inherit;
  font-weight: bold;
  /* left: 240px; */
  z-index: 1;
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.text-top-0 {
  transform: rotate(180deg) translate(-1px, -0.5px);
  z-index: 1;
}
.text-bottom-0 {
  z-index: 2;
}

.text-top-0::before,
.text-bottom-0::before {
  content: attr(data-text); /* Copies text from the HTML */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(20deg, #1c87c9 50%, transparent 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-top-0::before {
  z-index: 3;
}

.text-bottom-0::before {
  z-index: 0; 
}

.cross-404 {font-size: 550px; position: relative; transform: rotate(15deg); display: flex; align-items: center; justify-content: center; z-index: 1;}
.notfound-inside h3 {font-size: 36px; font-weight: 700; text-transform: uppercase; color: #1a1a1a; letter-spacing: 3px; -webkit-text-stroke: #ffffff 1px;}
.notfound-container h2 {font-family: 'Cabin-font', sans-serif; font-size: 28px; text-transform: uppercase; font-weight: 400; text-align: center; position: relative; margin-top: 20px;}
.return-home {display: inline-block; margin-top: 30px; padding: 14px 25px; background-color: #0082e6; color: white; text-decoration: none; font-size: 20px; border-radius: 8px; transition: 0.3s ease-in-out; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);}
.return-home:hover {background-color: #005bb5; transform: scale(1.05);}
@media (max-width: 850px) { .notfound-inside h1 {font-size: 150px;} .cross-404 {font-size: 250px;} .notfound-container h2 {font-size: 22px; margin-top: 15px;}}
@media (max-width: 600px) { .notfound-inside h1 {font-size: 120px;} .cross-404 { font-size: 200px; } }


/*** Slideshow ***/

.slideshow-container {position: relative; max-width: 500px; height: 500px; margin: auto; overflow: hidden;}
.slides {width: 100%; height: 500px; opacity: 0; transition: opacity 1s ease-in-out; position: absolute; top: 0; left: 0; z-index: 0; transform: scale(1);}
.slides.active {opacity: 1; z-index: 2; transform: scale(1);}
.slides img {width: 100%; height: 100%; object-fit: cover; transition: 1s ease-in-out; transform: scale(1);}
.fade {animation-name: fade; animation-duration: 1.5s;}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
.prev, .next {cursor: pointer; position: absolute; top: 50%; width: 40px; height: 40px; padding: 10px; margin-top: -20px; color: white; font-weight: bold; font-size: 24px; transition: 0.3s ease; border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10;}
.prev {left: 10px}
.next {right: 10px}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.9);}
.dots-container {position: absolute; bottom: 15px; width: 100%; text-align: center; z-index: 10;}
.dot {cursor: pointer; height: 12px; width: 12px; margin: 5px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.3s ease; transform: 0.3s ease;}
.active, .dot:hover {background-color: #717171; transform: scale(1.2);}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0, 0.9);
  text-align: center;
  transition: opacity 0.3s ease-in-out;
}

.modal-content {
  margin: auto;
  display: block;
  width: 90%;
  max-width: 800px;
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 15px;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
}

.close:hover {
  background: rgba(255, 0, 0, 0.7);
  transform: scale(1.1);
  font-size: 38.5px;
  text-decoration: none;
  cursor: pointer;
}

.slideshow-container:hover .slides {
  animation-play-state: paused;
}