body{
background-color: black;
margin: 0px;
overflow-x: hidden;
}
a{
text-decoration: none;
}

/* Header */
/* Header */
/* Header */

header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 100px 25px 20px;
gap: 30px;
}

.HeaderOne,.HeaderTwo{
display: flex;
}

.HeaderTwo{
gap: 40px;
align-items: center;
}

.HeaderText,.HeaderLogoText{
font-family: "Oswald", sans-serif;
font-weight: 700;
font-size: 1.35rem;
color: white;
margin: 0px;
}

.HeaderText{
cursor: pointer;
white-space: nowrap;
}

.HeaderText:hover{
color: red;
}

.HeaderText:active{
color: rgb(200, 0, 0);
}

.SpanLogoText{
color: red;
font-size: 1.2rem;
}

/* Main */
/* Main */
/* Main */

main{
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}

.MainContainerOne{
padding: 40px 0px 0px 30px;
}

.MainContainerTwo{
padding: 10px 177px 0px 0px;
}

.LionCageImg{
width: 500px;
max-width: 100%;
height: auto;
display: block;
}

.RightArrow{
width: 25px;
height: auto;
}

.MainTextWelcome{
font-family: "Oswald", sans-serif;
color: rgb(218, 0, 0);
font-size:1rem ;
margin: 0px;
}

.MainTextOne{
font-family: "Oswald", sans-serif;
font-weight: 700;
font-size: 5rem;
line-height: 75px;
color: white;
margin: 10px 0px 0px 0px;
}

.MainSpanOne{
color: red;
}

.MainTextTwo{
font-family: "Oswald", sans-serif;
font-weight: 500;
color: white;
font-size:1.8rem ;
margin: 20px 0px 0px 0px;
letter-spacing: 5px;
}

.MainTextThree{
font-family: "Inter", sans-serif;
font-weight: 500;
color: rgb(237, 237, 237);
font-size:1rem ;
margin: 10px 0px 0px 0px;
}

.TrialButton{
background-color: red;
color: white;
font-family: "Oswald", sans-serif;
font-weight: 600;
font-size: 1rem;
padding: 15px;
margin: 30px 0px 0px 0px;
border-radius: 5px;
border: none;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 0 6px 1px rgba(255, 100, 100, 0.4),  0 10px 12px rgba(255, 70, 70, 0.25);
}

.TrialButton:hover{
filter: brightness(80%);
}

.TrialButton:active{
filter:brightness(60%) ;
transform: translateY(3px);
}

/* Instagram */
/* Instagram */
/* Instagram */

.Instagram{
display: flex;
flex-direction: column;
}

.InstaContainerOne,.InstaContainerTwo{
display: flex;
}

.InstaContainerOne{
justify-content: center;
}

.FollowUs{
color: white;
font-family: "Oswald", sans-serif;
font-size: 2rem;
margin: 0px;
text-align: center;
}

.FollowUsSpan{
color: red;
}

.InstaContainerTwo{
justify-content: space-between;
align-items: center;
padding:20px 100px 40px 20px;
gap: 30px;
}

.BigInnerContainer{
display:flex;
gap: 8px;
flex-wrap: wrap;
}

.InnerContainer{
display: flex;
align-items: center;
gap: 8px;
}

.LocationIcon,.CoachIcon{
width: 30px;
height: auto;
flex-shrink: 0;
}

.LocationText,.CoachText{
margin: 0px;
color: white;
font-family: "Inter", sans-serif;
font-size: 1.3rem;
font-weight: 600;
}

.InstaButton{
display: flex;
align-items: center;
gap: 10px;
font-family: "Oswald", sans-serif;
font-weight: 600;
font-size: 1rem;
color: white;
background:
linear-gradient(black, black) padding-box, 
linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5) border-box;
border: 2px solid transparent;
border-radius: 6px;
padding: 12px 22px;
box-shadow: 0 0 15px rgba(214, 41, 118, 0.4), 0 0 25px rgba(79, 91, 213, 0.2);
}

.InstaButton:hover {
background: linear-gradient(
90deg,
#feda75,
#fa7e1e,
#d62976,
#962fbf,
#4f5bd5
)padding-box;
border: 2px solid transparent;
}

.InstaButton:active {
filter: brightness(60%);
transform: translateY(3px);
}

.InstaIconImg{
width: 25px;
height: auto;
}

.InstaContainerThree{
display:grid ;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;
padding: 0px 100px  0px 100px;
}

.InstaPost{
position: relative;
height: 350px;
border: solid 4px;
border-image: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5) 1;
overflow: hidden;
}

.PlayButton{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 3rem;
pointer-events: none;
}

.InstaPost:hover img{
background-color: rgba(255, 255, 255, 0.106);
filter: brightness(1.3);
}

.InstaContainerThree a{
display: block;
}

.InstaContainerThree a:active{
transform: translateY(3px);
}

.InstaPost:active{
transform: translateY(3px);
}

/* Footer */
/* Footer */
/* Footer */

footer{
display: flex;
padding: 35px;
border-top:solid 1px rgb(110, 110, 110) ;
margin: 25px 0px 0px 0px;
}

.FootSectionOne{
display: flex;
}

.FootSectionOne,.FootSectionTwo{
border-right:solid 1px rgb(110, 110, 110)  ;
}

.FootSectionOne{
align-items: center;
padding: 0px 30px 0px 0px;
}

.LionIcon{
width: 150px;
height: auto;
flex-shrink: 0;
}

.InstaIcon{
width: 30px;
height: auto;
}

.SectionOneText{
color: rgb(255, 255, 255);
font-family: "Inter", sans-serif;
font-size: 1.3rem;
font-weight: 500;
margin: 0px;
}

.FootSectionTwo{
padding: 10px 120px 0px 20px;
}

.QuickLinkText{
color: rgb(255, 255, 255);
font-family: "Inter", sans-serif;
font-size: 1.4rem;
font-weight: 600;
margin: 0px;
}

.SectionTwoText{
color: white;
font-family: "Inter", sans-serif;
font-size: 1rem;
font-weight: 500;
margin: 3px 0px 0px 0px;
}

.FootSectionThree{
padding: 10px 0px 0px 20px;
}

.ContactText{
color: white;
font-family: "Inter", sans-serif;
font-size: 1rem;
font-weight: 500;
margin: 3px 0px 0px 0px;
overflow-wrap: anywhere;
}

.ContactUsText{
color: white;
font-family: "Inter", sans-serif;
font-size: 1.4rem;
font-weight: 700;
margin: 0px 0px 0px 0px;
}

.MailImg,.PhoneImg,.LocImg{
width: 30px;
height: auto;
flex-shrink: 0;
}

.InnerSection{
display: flex;
align-items: center;
gap: 10px;
padding:10px 0px 0px 0px ;
}

/* Laptop */
/* Laptop */
/* Laptop */

@media(max-width: 1200px){

header{
padding: 25px 35px 25px 20px;
}

.HeaderTwo{
gap: 24px;
}

.MainContainerTwo{
padding: 10px 60px 0px 0px;
}

.LionCageImg{
width: 430px;
}

.MainTextOne{
font-size: 4.3rem;
line-height: 65px;
}

.MainTextTwo{
font-size: 1.5rem;
letter-spacing: 4px;
}

.InstaContainerTwo{
padding: 20px 40px 40px 20px;
}

.InstaContainerThree{
grid-template-columns: 1fr 1fr 1fr;
padding: 0px 40px;
gap: 22px;
}

.InstaPost{
height: 300px;
}

.FootSectionTwo{
padding: 10px 60px 0px 20px;
}

}

/* Tablet */
/* Tablet */
/* Tablet */

@media(max-width: 900px){

header{
flex-direction: column;
justify-content: center;
padding: 22px 20px;
gap: 18px;
}

.HeaderOne{
justify-content: center;
text-align: center;
}

.HeaderTwo{
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 14px 28px;
}

.HeaderText{
font-size: 1.1rem;
}

main{
flex-direction: column;
justify-content: center;
text-align: center;
gap: 15px;
padding: 35px 20px 25px 20px;
}

.MainContainerOne{
padding: 0px;
}

.MainContainerTwo{
padding: 0px;
display: flex;
justify-content: center;
width: 100%;
}

.LionCageImg{
width: min(500px, 75vw);
}

.MainTextOne{
font-size: clamp(3.5rem, 9vw, 5rem);
line-height: 0.95;
}

.MainTextTwo{
font-size: 1.4rem;
letter-spacing: 4px;
}

.InstaContainerTwo{
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 25px 35px 25px;
gap: 25px;
}

.BigInnerContainer{
justify-content: center;
gap: 14px 24px;
}

.LocationText,.CoachText{
font-size: 1.05rem;
}

.InstaContainerThree{
grid-template-columns: 1fr 1fr;
padding: 0px 25px;
gap: 18px;
}

.InstaPost{
height: auto;
aspect-ratio: 1 / 1;
}

footer{
flex-direction: column;
padding: 30px 25px;
gap: 0px;
}

.FootSectionOne,.FootSectionTwo{
border-right: none;
border-bottom: solid 1px rgb(110, 110, 110);
}

.FootSectionOne{
padding: 0px 0px 25px 0px;
}

.FootSectionTwo{
padding: 25px 0px;
}

.FootSectionThree{
padding: 25px 0px 0px 0px;
}

}

/* Mobile */
/* Mobile */
/* Mobile */

@media(max-width: 600px){

header{
padding: 20px 15px;
}

.HeaderLogoText{
font-size: 1.15rem;
}

.SpanLogoText{
font-size: 1rem;
}

.HeaderTwo{
gap: 10px 18px;
}

.HeaderText{
font-size: 0.95rem;
}

main{
padding: 30px 15px 20px 15px;
}

.MainTextWelcome{
font-size: 0.9rem;
}

.MainTextOne{
font-size: clamp(3rem, 16vw, 4rem);
line-height: 0.95;
}

.MainTextTwo{
font-size: 1.1rem;
letter-spacing: 3px;
}

.MainTextThree{
font-size: 0.95rem;
line-height: 1.5;
}

.TrialButton{
font-size: 0.95rem;
padding: 13px 15px;
margin-top: 24px;
}

.LionCageImg{
width: min(430px, 88vw);
}

.FollowUs{
font-size: 1.7rem;
padding: 0px 15px;
}

.InstaContainerTwo{
padding: 18px 15px 28px 15px;
}

.BigInnerContainer{
flex-direction: column;
align-items: center;
}

.InnerContainer{
justify-content: center;
text-align: center;
}

.LocationText,.CoachText{
font-size: 0.95rem;
}

.InstaContainerThree{
padding: 0px 15px;
gap: 12px;
}

footer{
padding: 25px 18px;
}

.FootSectionOne{
flex-direction: column;
align-items: flex-start;
gap: 15px;
}

.LionIcon{
width: 120px;
}

.SectionOneText{
font-size: 1rem;
line-height: 1.55;
}

.QuickLinkText,.ContactUsText{
font-size: 1.2rem;
}

.SectionTwoText,.ContactText{
font-size: 0.95rem;
}

}

/* Small Mobile */
/* Small Mobile */
/* Small Mobile */

@media(max-width: 400px){

.HeaderTwo{
gap: 9px 14px;
}

.HeaderText{
font-size: 0.88rem;
}

.MainTextOne{
font-size: 2.9rem;
}

.MainTextTwo{
font-size: 1rem;
letter-spacing: 2px;
}

.InstaContainerThree{
grid-template-columns: 1fr;
}

.InstaPost{
aspect-ratio: 4 / 3;
}

}