/* General Styles */
body {
   font-family: "Plus Jakarta Sans", serif;
   font-optical-sizing: auto;
   line-height: 1.6;
   margin: 0;
   padding: 0;
   background: url("../img/cts-bg.png") no-repeat center center;
   background-size: cover;
   color: #fff;
   background-color: #000;
}

/* Container */
.container {
   max-width: 1200px;
   margin: 50px auto;
   padding: 20px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
}

/* Header */
.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   max-width: 1600px;
   margin: 0 auto;
}

.header img {
   width: 300px;
   height: auto;
   margin-left: 25px;
}

.header .center,
.header .right {
   flex: 1;
   text-align: center;
}
.header .right {
   text-align: right;
}

/* Headings */
h1 {
   font-size: 2.5rem;
   color: #fff;
   margin-bottom: 50px;
   text-align: center;
}

h2 {
   font-size: 1.8rem;
   color: #fff;
   margin-top: 30px;
   margin-bottom: 15px;
}

/* Paragraphs */
p {
   font-size: 1rem;
   color: #fff;
   margin-bottom: 15px;
}

/* Links */
a {
   color: #fff;
   text-decoration: none;
   border-bottom: 1px solid #fff;
   transition: color 0.3s ease;
}

a:hover {
   color: #fff;
   border-bottom: 1px dashed #fff;
}

/* Lists */
ul {
   list-style-type: none;
   padding: 0;
}

ul li {
   background-color: rgba(255, 255, 255, 0.1);
   margin-bottom: 10px;
   padding: 10px;
   border-radius: 4px;
   font-size: 0.95rem;
   color: #fff;
   padding-left: 26px;
}

ul li::before {
   content: "✓";
   color: #dee81a;
   font-weight: bold;
   display: inline-block;
   width: 1em;
   margin-left: -1em;
   margin-right: 10px;
   font-weight: 1.2em;
}

/* Horizontal Rule */
hr {
   border: 0;
   height: 1px;
   background: rgba(255, 255, 255, 0.2);
   margin: 30px 0;
}

/* Contact Section */
.contact {
   text-align: center;
   margin-top: 30px;
}

.contact a {
   font-size: 1.1rem;
   font-weight: bold;
   color: #1a73e8;
}

/* Responsive Design */
@media (max-width: 768px) {
   .container {
      margin: 20px;
      padding: 15px;
   }

   h1 {
      font-size: 2rem;
   }

   h2 {
      font-size: 1.5rem;
   }

   .header img {
      width: 300px; /* Adjust logo size for smaller screens */
   }
}
.button {
   background-color: transparent; /* Transparent background */
   color: white; /* White text */
   border: 1px solid white; /* White border */
   border-radius: 5px; /* Rounded corners */
   padding: 10px 20px; /* Padding for better spacing */
   font-size: 1rem; /* Font size */
   cursor: pointer; /* Pointer cursor on hover */
   transition: all 0.3s ease; /* Smooth transition for hover effects */
}
.button:hover {
   background-color: rgba(
      255,
      255,
      255,
      0.1
   ); /* Slight white background on hover */
   border-color: rgba(
      255,
      255,
      255,
      0.8
   ); /* Slightly lighter border on hover */
}

.button:active {
   background-color: rgba(
      255,
      255,
      255,
      0.2
   ); /* Darker white background on click */
   border-color: rgba(
      255,
      255,
      255,
      1
   ); /* Fully white border on click */
}