* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   background-color: black;
   color: #f2f2f2;
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-style: normal;
 }

 .container {
   margin: 0 auto;
   max-width: 1200px;
 }

 #call-to-action {
   background-color: #7386F9;
   background-image: url(/assets/images/nikola-jokic.png);
   background-repeat: no-repeat;
   background-position: right bottom;
   height: 540px;
   border-radius: 2rem;
   margin: 20px 0px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }

 .cta-btn {
   color: white;
   text-decoration: none;
   font-size: 1rem;
   padding: 14px 32px;
   border: none;
   border-radius: 16px;
   cursor: crosshair;
   transition: background-color 0.2s;
   display: inline-block;
   justify-content: center;
   margin-right: 5px;

 }

 .cta-btn :hover {
   background-color: #005fa3;
 }

 .background-black-for-icons {
   background-color: black;
 }

 .backgorund-blue-for-icons {
   background-color: blue;
 }



 nav ul {
   list-style-type: none;
   background-color: #333333;
   overflow: hidden;
 }

 nav ul li {
   float: left;
 }

 nav ul li a {
   padding: 30px 15px;
   display: block;
   color: white;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
 }

 nav ul li a:hover {
   background-color: black;
 }

 .active-link {
   background-color: chocolate;
 }

 .card {
   background-color: white;
   /* height: 300;*/
   border-radius: 0px;
   color: black;
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   width: 100%;
   min-width: 160px;

 }

 #cards-row {
   display: flex;
   justify-content: flex-start;
   gap: 1rem;
   background-color: black;
 }

 .card-title {
   font-size: 1.2rem;
   font-weight: bold;
   margin-bottom: 10px;
   color: black;
 }

 .card p {
   font-size: 1rem;
   margin-bottom: 20px;
 }

 .card-btn {
   margin: 10px 12px 12px 12px;
   padding: 16px 0;
   background-color: #f20505;
   border: none;
   color: #fff;
   border-radius: 8px;
   cursor: pointer;
   width: calc(100% - 24px);
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: 900;
 }

 .card-content {
   padding: 10px 12px 0px 12px;
   flex: 1;
 }


 @media (max-width:767px) {
   #cards-row {
     flex-direction: column;
     gap: 0.75rem;


   }

   .card {
     min-width: unset;
   }

 }