@media screen and (max-width: 1199px) {
	.intro h1 {
		font-size: 50px;
	}

	.intro h2 {
		font-size: 34px;
	}

	.intro h3 {
		font-size: 28px;
	}
}

@media screen and (max-width: 768px) {
	.container {
		width: auto;
	}

	header nav ul {
		position: absolute;
		display: flex;
		flex-direction: column;
		padding: 35px 25px;
		top: -1240%;
		left: 0;
		width: 100%;
		height: auto;
		background-color: #181818;
		transition: 0.5s all linear;
	}

    header aside:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; 
    }
	header.active {
		background-color: #181818;
	}

	.buttonmain {
        font-weight: bold;
        margin: -12px 0 50px 0;
        padding: 10px 65px; 
        background: #f2f740; 
        white-space: nowrap;
        border-radius: 32px;
        text-decoration: none;
        align-self: center;
        transition: 0.5s all linear;
        text-align: center;
        animation: pulsate 2s infinite alternate ease-in-out;
    }

	header.active ul {
		top: 100%;
	}

	header nav ul li {
		margin: 0 0 20px 0;
		font-size: 25px;
		line-height: 35px;
	}

	header nav ul li:last-child {
		margin: 0;
	}

	header aside:first-child {
		padding: 39px;
		width: 80%;
		justify-content: flex-start;
	}

    header aside:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; 
    }

header.active nav .burger {
		background: url('../img/close.svg') center / cover no-repeat;
	}

	header .burger {
        display: block;
        width: 20px;
        height: 40px;
        background: url('../img/burger.svg') center / contain no-repeat;
        transition: 0.5s all linear;
        margin-top: 0;
    }

     header aside:last-child .button.registration {
        margin-right: 10px; 
        transition: 0.5s all linear;
    }

	.intro h1 {
		font-size: 40px;
		line-height: 1.2;
	}

	.intro h1 span {
		font-size: 60px;
	}

	.intro h2 {
		font-size: 30px;
	}

	.intro h3 {
		font-size: 20px;
	}

	.content h2, .content-title {
		font-size: 30px;
		line-height: 1.2;
	}

	.content h3 {
		font-size: 22px;
	}

	.container .row {
		margin: 0 auto;
		width: 90%;
	}

	footer .logo {
		margin: 0 0 20px 0;
		display: block;
		height: 45px;
		width: auto;
		align-self: center;
	}

	.content img {
		margin: 20px 0px 20px 0;
		width: 100%;
		height: 100% !important;
	}

	footer .logo,
	footer .logo p {
		height: 30px;
	}
}

@media screen and (max-width: 600px) {
	header aside:first-child {
		padding: 21px;
	}

	.intro {
		padding: 40px 0 40px 0;
	}

	.intro h1 {
		margin: 0 0 21px 0;
		font-size: 22px;
	}

	.intro h1 span {
		font-size: 48px;
	}

	.intro h2 {
		font-size: 20px;
	}

	.intro p,
	.intro ul,
	.intro ol {
		margin: 0 0 21px 0;
		font-size: 14px;
		line-height: 21px;
	}



	.intro .button span {
		font-size: 14px;
		line-height: 21px;
	}

	header nav ul li {
		font-size: 12px;
		line-height: 170.02%;
	}

	.content {
		padding: 53px 0 250px 0;
	}

	.content h2,
	.content-title {
		font-size: 24px;
	}

	.content h3 {
		font-size: 19px;
	}

	.content p,
	.content td,
	.content ol li,
	.content ul li {
		font-size: 12px;
		line-height: 170.02%;
	}

	.container .row {
		width: 100%;
	}

	footer .logo {
		margin: 0 0 20px 0;
	}

	footer .logo,
	footer .logo p {
		height: 15px;
	}

	footer ul li {
		font-size: 10px;
		line-height: 170.02%;
	}

	table {
		overflow: auto;
	}
}

.content-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 60px 0;
  }
  
  .content-container .image-container img {
	max-width: 400px;
	height: auto;
	border-radius: 10px;
  }
  
 
  @media screen and (min-width: 768px) {
	.content-container {
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  text-align: left;
      margin: 0px 0 0 0;
	}
  
	.content-container .image-container {
	  flex: 1;
	  margin-right: 20px; /* Space between image and text */
	}
  
	.content-container .text-container {
	  flex: 2;
	}
  
	.content-container .text-container h1 {
	  font-size: 36px;
	  margin-bottom: 20px;
	}
  
	.content-container .text-container p {
	  font-size: 14px;
	  margin-bottom: 20px;
	}
  
	.content-container .text-container .button {
	  font-size: 16px;
	}
  }
  
  /* Mobile layout */
  @media screen and (max-width: 768px) {
	.content-container {
	  flex-direction: column;
	  align-items: center;
	  text-align: center;
      margin: 0px 0 0 0;
	}

    .buttonmain {
        font-weight: bold;
        margin: -12px 0 50px 0;
        padding: 10px 65px; 
        background: #f2f740; 
        white-space: nowrap;
        border-radius: 32px;
        text-decoration: none;
        align-self: center;
        transition: 0.5s all linear;
        text-align: center;
        animation: pulsate 2s infinite alternate ease-in-out;
    }

    @keyframes pulsate {
        0% {
            transform: scale(1);
            background: #f2f740;
            
        }
        100% {
            transform: scale(1.15);
            background: #e1f732;
           
        }
    }
  
	.content-container .image-container {
	  width: 100%;
	  margin-bottom: 20px;
	}
  
	.content-container .image-container img {
	  width: 100%;
	  max-width: 300px; /* Fixed size for the image */
	  height: auto;
	}
  
	.content-container .text-container {
	  width: 100%;
	  padding: 0 20px;
	}
  
	.content-container .text-container h1 {
	  font-size: 24px;
	  margin-bottom: 15px;
	}
  
	.content-container .text-container p {
	  font-size: 14px;
	  margin-bottom: 20px;
	}
  }