/*!
Theme Name: golf
Author: Alex Knysh
Version: 1.0.0
Requires PHP: 7.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: golf
*/


/* 1. Реєструємо змінну для кута (щоб браузер міг її анімувати) */
@property --angle {
  syntax: '<angle>';
  initial-value: 208.52deg; /* Ваш початковий кут */
  inherits: false;
}
.banner {
  margin: 7.2rem 0 3rem;
  padding: 0.8rem;
  border-radius: 1rem;
  overflow: hidden;
/*   background-image: linear-gradient(208.52deg, #FEAB01 12.99%, #FE0182 32.58%, #9747FF 57.18%, #4685FF 79.5%, #00D0FE 100.46%); */
	
	background-image: linear-gradient(
    var(--angle), 
    #FEAB01 12.99%, 
    #FE0182 32.58%, 
    #9747FF 57.18%, 
    #4685FF 79.5%, 
    #00D0FE 100.46%
  );
	animation: rotateGradient 6s linear infinite;
}
@keyframes rotateGradient {
  to {
    --angle: 568.52deg;
  }
}

.banner__wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 3rem 0;
  padding: 6rem 7rem 6rem 8rem;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #10101F;
  z-index: 1;
}
@media (max-width: 1100px) {
	.banner__wrapper {
		flex-direction: column;
		padding: 6rem;
	}
}
@media (max-width: 768px) {
	.banner__wrapper {
		padding: 4rem 2rem;
	}
}
.banner__wrapper:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(84.65deg, rgba(23, 0, 52, 0.8) 30.91%, rgba(68, 0, 154, 0.8) 98.86%);
  z-index: -1;
}
.banner__block:first-child {
  width: 60%;
  max-width: 54.6rem;
}
@media (max-width: 1100px) {
	.banner__block:first-child {
		width: 100%;
	}
}
.banner__block:last-child {
  width: 40%;
}
@media (max-width: 1100px) {
	.banner__block:last-child {
		width: 100%;
	}
}
.banner__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1.3;
  color: #FFBD31;
  text-transform: uppercase;
  text-align: center;
}
@media (max-width: 1100px) {
	.banner__title {
		font-size: 2.6rem;
	}
}
.banner__title:before,
.banner__title:after {
  content: '';
  display: block;
  width: 2.8rem;
  height: 2.8rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.banner__title:before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6043 0.331348C13.6567 -0.110449 14.2978 -0.110449 14.3503 0.331348L14.79 4.03763C15.3579 8.82343 19.1311 12.5967 23.9169 13.1645L27.6232 13.6043C28.065 13.6568 28.065 14.2978 27.6232 14.3503L23.9169 14.7901C19.1311 15.3579 15.3579 19.1312 14.79 23.9169L14.3503 27.6232C14.2978 28.0651 13.6567 28.0651 13.6043 27.6232L13.1645 23.9169C12.5967 19.1312 8.82342 15.3579 4.03762 14.7901L0.331347 14.3503C-0.110449 14.2978 -0.110449 13.6568 0.331347 13.6043L4.03762 13.1645C8.82342 12.5967 12.5967 8.82343 13.1645 4.03763L13.6043 0.331348Z' fill='url(%23paint0_linear_5952_2734)'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear_5952_2734' x1='19.8061' y1='1.177' x2='3.97438' y2='30.3109' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FEAB01'/%3e%3cstop offset='0.223958' stop-color='%23FE0182'/%3e%3cstop offset='0.505208' stop-color='%239747FF'/%3e%3cstop offset='0.760417' stop-color='%234685FF'/%3e%3cstop offset='1' stop-color='%2300D0FE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e ");
}
.banner__title:after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6043 0.331348C13.6567 -0.110449 14.2978 -0.110449 14.3503 0.331348L14.79 4.03763C15.3579 8.82343 19.1311 12.5967 23.9169 13.1645L27.6232 13.6043C28.065 13.6568 28.065 14.2978 27.6232 14.3503L23.9169 14.7901C19.1311 15.3579 15.3579 19.1312 14.79 23.9169L14.3503 27.6232C14.2978 28.0651 13.6567 28.0651 13.6043 27.6232L13.1645 23.9169C12.5967 19.1312 8.82342 15.3579 4.03762 14.7901L0.331347 14.3503C-0.110449 14.2978 -0.110449 13.6568 0.331347 13.6043L4.03762 13.1645C8.82342 12.5967 12.5967 8.82343 13.1645 4.03763L13.6043 0.331348Z' fill='url(%23paint0_linear_5952_2737)'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear_5952_2737' x1='21.5449' y1='11.4773' x2='3.35302' y2='-0.159379' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FEAB01'/%3e%3cstop offset='0.223958' stop-color='%23FE0182'/%3e%3cstop offset='0.463645' stop-color='%239747FF'/%3e%3cstop offset='0.760417' stop-color='%234685FF'/%3e%3cstop offset='1' stop-color='%2300D0FE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e ");
}
.banner__text {
  margin-top: 1.6rem;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.5;
  color: #FFFFFF;
}
@media (max-width: 1100px) {
	.banner__text {
		text-align: center;
	}
}
@media (max-width: 768px) {
	.banner__text {
		font-size: 1.6rem;
	}
}
.banner__img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
}
@media (max-width: 1100px) {
	.banner__img img {
		margin-right: auto;
	}
}