@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,1000&display=swap');


body{
	line-height: 1.5;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
}

html{
	font-size: 62.5%;
  --header1: calc(5rem + 1.5vw);
  --header1-smaller:calc(3.8rem + 1.5vw);
  --header1-smaller2:calc(3.1rem + 1.5vw);
  --header1-smaller3:calc(2.8rem + 1.5vw);
  --header2: calc(3.2rem + 1vw);
  --header3: calc(3rem + 1vw);
  --header4: calc(2.4rem + 1vw);
  --header5: calc(2rem + 1vw);
  --header6: calc(5rem +1vw);
  --text: calc(0.7rem + 1vw);
  --buttons: calc(0.6rem + 0.5vw);
  --smalltext: calc(0.3rem + 1vw);
  --bullets:calc(0.2rem + 1vw);
  --big: calc(6rem + 1vw);

	/* colors--------- */ 
    --white:#FFFFFF;
    --burgundy:#630B1A;
    --red: #FF001A;
    --gray:#21282C;
	--lightgray:#f1f1f1;
    --pink:#E5A6E8;
    --yellow: #E0FF2D;
    --green:  #0A6C3B;
    --blue:#00324D;
	--purple: #2A0024;
   	scroll-behavior: smooth;
	}

h1{
	font-weight: 1000;
	color:  var(--white);
	font-size: var(--header1);
	font-style: italic;
	line-height: 0.8;
	text-align: left;	
	text-transform: uppercase;
}



h2{
	font-size:calc(2.8rem + 1vw);
	text-transform: uppercase;
	font-weight: 1000;
	font-style: italic;
	line-height: 1;
	color: var(--burgundy);
}

h3{font-size:3.5rem;
  line-height: 1;
  color: var(--gray);
	}
  
h4{font-size:3rem;
  line-height: 1.1;
	}

h5{
	font-size:calc(1rem + 1vw);
	font-weight: 500;
	color: var(--gray);
	line-height: 1.3;
	}
h6{
	font-size: var(--bullets);
	color: var(--white);
	font-weight: 500;
	}


body.hidden-scrolling{
	overflow-y: hidden;
	}

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

.container{
	max-width: 90%;
	width: 100%;
	margin:auto;
	}

ul{
	list-style: none;
	margin:0;
	padding:0;
	}

li,
button,
label,
input,
a,
p {
	text-decoration: none;
}


/*-------------------------------------header*/
.header{
	position:fixed;
	width: 100%;
	left:0;
	top:0;
	z-index: 99;
	background-color:var(--burgundy);
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.header-main{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0rem;
	border-radius: 5px;
	}

.header .logo{
	justify-content: center;
	align-items: center;
	width: 6rem;
	height: 6rem;
	}

.lang{
	display: flex;
	gap: 1rem;
}

.lang a{
	background-color: var(--red);
	color: var(--white);
	padding: .3rem .8rem;
	font-size: 1.5rem;
}

.header .nav-menu{
	padding: 0rem 0rem;
	
}

.red-bg-store{
	background-color: var(--red);
	padding: 0rem 1rem;
}
/*--- main links property*/
.header .menu > .menu-item{
	display: inline-block;
	margin-left: 30px;
	position: relative;	
}

/*--- main links color*/
.header .menu > .menu-item > a{
	display: block;
	padding: 12px 0;
	font-size: 14px;
	color: white;
	text-transform: uppercase;
	font-weight: 600;
	transition: all 0.2s ease;
}
.header .menu > .menu-item > a .plus{
	display: inline-block;
	height: 12px;
	width: 12px;
	position: relative;
	margin-left:5px; 
	pointer-events: none;
}

/*--- plus sign color and thickness*/
.header .menu > .menu-item > a .plus:before,
.header .menu > .menu-item > a .plus:after{
	content:'';
	position: absolute;
	box-sizing: border-box;
	left: 50%;
	top:50%;
	background-color: red;
	height: 2px;
	width: 100%;
	transform: translate(-50%,-50%);
	transition: all 0.2s ease;
}

/*--- plus sign color hover*/
.header .menu > .menu-item:hover > a .plus:before,
.header .menu > .menu-item:hover > a .plus:after{
   background-color: red;
}

/*---hover plus sign*/
.header .menu > .menu-item > a .plus:after{
   transform: translate(-50%,-50%) rotate(-90deg);	
}
/*---hover color submenu*/
.header .menu > .menu-item > .sub-menu > .menu-item > a:hover,
.header .menu > .menu-item:hover > a{
	color: var(--white);
}


/*-----------color submenus desktop*/
.header .menu > .menu-item > .sub-menu{
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	width: 220px;
	position: absolute;
	left:0;
	top:100%;
	background-color: var(--burgundy);
	padding: 0px 0px;
	transform: translateY(10px);
	/*transition: all 0.2s ease;*/
	opacity:0;
	visibility: hidden;
}


/*-----------color submenus cortinilla*/	
.header .menu > .menu-item > .sub-menu > .menu-item{
	display: block;
}

.header .menu > .menu-item > .sub-menu > .menu-item :hover{
	background-color: var(--red);
}

.header .menu > .menu-item > .sub-menu > .menu-item > a{
	display: block;
	padding: 10px 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: #ffffff;
	transition: all 0.2s ease;
	text-transform: none;
}
.header .open-nav-menu{
	height: 34px;
	width: 40px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.header .open-nav-menu span{
	display: block;
	height: 3px;
	width: 24px;
/*----------------line color----*/	
	background-color: white;
	position: relative;
}
.header .open-nav-menu span:before,
.header .open-nav-menu span:after{
	content: '';
	position: absolute;
	left:0;
	width: 100%;
	height: 100%;
	background-color: white;
	box-sizing: border-box;
}
.header .open-nav-menu span:before{
	top:-7px;
}
.header .open-nav-menu span:after{
	top:7px;
}
.header .close-nav-menu{
	height: 40px;
	width: 40px;
	background-color:var(--red);
	margin:0 0 15px 15px;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
}
.header .close-nav-menu img{
	width: 16px;
}

/*----------------- mobile links color*/
.header .menu-overlay{
	position: fixed;
	z-index: 999;
	background-color: rgba(0,0,0,0.8);
	left:0;
	top:0;
	height: 100%;
	width: 100%;
	visibility: hidden;
	opacity:0;
	transition: all 0.2s ease;
	}

.disabled-link {
	pointer-events: none;
	opacity: 0.3;
  	}

.extraBot{
	padding:  0rem 0rem 15rem 0rem;
}

/*------------hover rule submenus position on desktop */
@media screen and (min-width: 992px){
	.header .menu > .menu-item-has-children:hover > .sub-menu{
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	 }
	 .header .menu > .menu-item-has-children:hover > a .plus:after{
		transform: translate(-50%,-50%) rotate(0deg);		
	 }

}

/*--------------------------------------HOME HERO SECTION grid---*/

/* ---------------------GRID ---------*/

.new-lay{
	display: grid;
	margin-top: 7rem;
	height: 65vh;
    width: 100%;
	min-height: 60vh;
	grid-template-columns: 19.5% 0.5% 80%;
	grid-template-rows: 1fr;
}

.box1, .box1-2{
	writing-mode: vertical-lr;
    transform: rotate(180deg);
	grid-column: 1/2;
	grid-row: 1/3;
	background-color: var(--red);
	
	}

.box1 h1{
padding:2rem;
display: flex;
flex-wrap: wrap-reverse;
}

.box1-2 h1{
font-size: var(--header1-smaller);
padding:2rem;
display: flex;
flex-wrap: wrap-reverse;
	}

.box2{
	grid-column: 3/4;
	grid-row: 1/3;
	}

.new-lay img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	}


/*---------------- Style .text-image-----*/
.text-image{
 	max-width: 90%;
 	margin: 10rem auto;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 5rem;
	}

.text-content{
	display: flex;
	flex-direction: column;
	flex: 1 1 60rem;
	gap: 3rem;
	}


.text-content a{
	margin-top: 2rem;
}


.image-content{
	display: flex;
	flex: 1 1 40rem;	
	align-items: center;
	justify-content: center;
}

.image-content img{
	width: 80%;
	max-width: 500px;
	padding: 2rem;
}

/*---------------- shortStyle .text-image-----*/

.resources{
	max-width: 90%;
	margin: 10rem auto;
	display: flex;
	flex-wrap: wrap;
	gap: 4rem;

   }

.resources-content{
   display: flex;
   flex-direction: column;
   flex: 1 1 50rem;
   gap: 3rem;

}

.resources-content h3{
	font-style: italic;
	font-size:calc(2rem + 1vw);
	text-transform: uppercase;
}





.image-resources{
	display: flex;
	flex: 1 1 30rem;	
	align-items:center;
	justify-content: center;
	
}

.image-resources img{
	width: 100%;
	max-width: 35rem;
}


/*---------------- Style .text-only-----*/
.text-only{
	max-width: 90%;
	margin: 10rem auto;
	display:flex ;
	flex-direction: column;
	gap: 3rem;
	}


/*--------------------------------------TC about*/
.generic-content{
	max-width: 90%;
	background-color: white;
	gap:3rem;
	padding: 15rem 0rem;
	display: flex;
	flex-direction:column;	
}


.generic-content img{
	justify-content: center;
	align-items: center;	
	}


/* -----Buttons ----*/

.downloads{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	background-color: var(--red);
	color:white;
	font-size: var(--buttons);
	text-transform: uppercase;
	line-height: 1.1;
	padding: 2rem;
	gap: 5rem;
	max-width:35rem;
}



.downloads-mail{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
	background-color: var(--red);
	color:white;
	padding: 2rem;
	text-transform: uppercase;		
	}
	


.downloads img, .downloads-mail img , .downloads-resources img{
	max-width: 2rem;
	}

/*-------------------------------------- cards-------*/

.content-cards{
	gap:3rem;
	max-width: 90%;
	display: flex;
	justify-content:center;
	align-items: center;
	flex-direction:column;
	margin: 10rem auto;
	text-align: center;
	}
	
.card{
	display: flex;
	flex-wrap: wrap;
	}

.cards{
	flex:1 1 30rem ;
	margin: 2rem 1rem;
	padding-bottom: 3rem;
	text-align: center;
	background-color: var(--white);
	border: 2px solid var(--red);
	}

.cards h4{
	color: var(--burgundy) ;
	background-color: var(--red);
	font-style: italic;
	font-size: calc(3rem + 0.5vw);
	padding: 1.5rem 0rem;
	}

.cards h5{
	padding: 2rem 2rem 0rem 2rem;
	color: var(--burgundy);
	font-style: italic;
	font-weight: bold;
}

.cards p{
	color: var(--gray);
	font-size: calc(1.5rem + 0.5vw);
	padding: 1rem 2rem 0rem 2rem;
	line-height: 1.1;
	}

.frase{
	text-transform: uppercase;
	font-style: italic;
	text-align: center;
	margin-top: 1rem;
	font-size: var(--header5);
	}

.cards1, .cards2, .cards3 {
	flex:1 1 30rem ;
	margin: 2rem 1rem;
	padding-bottom: 3rem;
	text-align: center;
	background-color: var(--white);
}

.cards1{
	border: 2px solid rgba(224,255,45,1);
}
.cards2{
	border: 2px solid rgba(99,11,26,1);
}
.cards3{
	border: 2px solid rgba(255,0,26,1);
}

.cards1 h4{
	color: var(--green) ;
	background-color: var(--yellow);
	font-style: italic;
	font-size: calc(3rem + 0.5vw);
	padding: 1.5rem 0rem;
}

.cards2 h4{
	color: var(--white) ;
	background-color: var(--burgundy);
	font-style: italic;
	font-size: calc(3rem + 0.5vw);
	padding: 1.5rem 0rem;
}

.cards3 h4{
	color: var(--white) ;
	background-color: var(--red);
	font-style: italic;
	font-size: calc(3rem + 0.5vw);
	padding: 1.5rem 0rem;
}
.cards1 h5, .cards2 h5, .cards3 h5{
	padding: 2rem 2rem 0rem 2rem;
	color: var(--burgundy);
	font-style: italic;
	font-weight: bold;
	}
	
.cards1 p, .cards2 p, .cards3 p{
	color: var(--gray);
	font-size: calc(1.5rem + 0.5vw);
	padding: 1rem 2rem 0rem 2rem;
	line-height: 1.1;
	}

/*----------------------------------------------- Logo Page ----------*/
.logo-title-color{color: var(--burgundy); font-size: var(--header1-smaller);}
.logo-title-bg{background-color: var(--red);}

.image-content .img-tc-logo{
	padding: 7rem;
	border: 1px solid rgba(33, 40, 44,0.1);
}


.black-white-logos{
	width: 90%;
	margin: 7rem auto 15rem auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;

}

.black-white-logos img{
	padding: 2rem;
	width: 50%;
}
.black-logo{
	flex: 1 1 30rem;
	height: 20rem;
	border: 1px solid rgba(33, 40, 44,0.1);
}

.white-logo{
	flex: 1 1 30rem;
	height: 20rem;
	background-color:black;
}

.horizontal-logos{
	width: 90%;
	margin: 7rem auto 15rem auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.horizontal-logos img{
	padding: 2rem;
	height: 9rem;
}

.horizontal-color-logo{
	flex: 1 1 20rem;
	border: 1px solid rgba(33, 40, 44,0.1);
}

.horizontal-black-logo{
	flex: 1 1 20rem;
	border: 1px solid rgba(33, 40, 44,0.1);
}

.horizontal-color-reverse-logo{
	flex: 1 1 20rem;
	background-color: var(--burgundy);
}
.horizontal-white-logo{
	flex: 1 1 20rem;
	background-color: black;
}
/*------------------------------------------------- Colors Page ---------*/

.colors-title-color{color: var(--yellow); font-size: var(--header1-smaller);}
.colors-title-bg{background-color: var(--green);}
   
/* ----------------------Section Colours2 ----------------------*/

.sectionColours {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 15rem auto;
  }

.sectionColours .colors-content{
	display: flex;
	flex-direction: column;
	gap: 3rem;
	justify-content: flex-start;
	align-items: flex-start;

  }
  
  .colors{
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 1;
	justify-content: center;
	
  }


  /* --------colors list -----*/


.color-title{
	color: var(--gray);
	font-style: italic;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	font-size: 3rem;
	margin: 1.5rem 0rem;
	line-height: 1.1;
}

.colors-primary{
	flex-grow: 1;
}
.small-color-text {
	text-transform:none;
 } 


.group-colors{
	max-width: 90%;
	margin: auto;
	display: flex;
	flex-wrap:wrap;
	gap: 1rem;
	justify-content: center;
	
}

.red, .white, .burgundy, .yellow, .green, .pink, .blue{
	flex: 1 1 22rem;
	width: auto;
	padding: 2rem;
	text-transform: uppercase;
}

.red {
	background-color: #FF001A;
	color: var(--white);
	text-transform: uppercase;
  }
 
 
  .white {
	background-color: #FFFFFF;
	color: #21282C;
	border: 1px solid rgba(33, 40, 44,0.1);
  }
  
  .burgundy {
	background-color: #630B1A;
	color: var(--pink);
  }


  .yellow { 
	background-color: #E0FF2D;
	color: var(--green);
  }
 
 
  .green {
	background-color: #0A6C3B;
	color:var(--yellow);
  }
  
  .pink {
	background-color: #E5A6E8;
	color:var(--burgundy);
  }
  
  .blue {
	background-color: #00324D;
	color: var(--white);
  }
 
  .burgundy h4, .yellow h4, .green h4, .pink h4, .blue h4, .white h4, .red h4 {
	line-height: 1;
	font-style: italic;
	font-size: 2rem;
	margin-bottom: 1.5rem;
  }
  .burgundy p,.yellow p, .green p, .pink p, .blue p, .white p, .red p{
	font-size: 1.3rem;
  }
  
  .burgundy h3, .yellow h3, .green h3, .pink h3, .blue h3, .white h3, .red h3 {
	line-height: 0.8;
	font-style: italic;
	margin-bottom: 0.2rem;
  }


.colors-bg{
	display: flex;	
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;	
}

.color-log-backgrounds{
	width: 90%;
	margin: auto;
	display: flex;	
	flex-wrap: wrap;
	justify-content: center;
}

.colors-bg img{
	width: 100%;
	height: 20rem;
}

.logo-purple15 ,.logo-purple30 ,.logo-purple45 ,.logo-purple60 ,.logo-purple75 ,.logo-purple90{
	padding: 2rem;
	flex: 1 1 15rem;
}

.logo-red{background-color: var(--red);}
.logo-white {background-color: var(--white);border: 1px solid rgba(33, 40, 44,0.1);}
.logo-burgundy {background-color: var(--burgundy);}
.logo-yellow{background-color: var(--yellow);}
.logo-green{background-color: var(--green);}
.logo-pink{background-color: var(--pink);}
.logo-blue{background-color: var(--blue);}
.logo-black{background-color: black;}
.logo-grey{background-color: rgba(33, 40, 44, 0.5);}
.logo-other{background-color: var(--white);border: 1px solid rgba(33, 40, 44,0.1);}


.logo-purple15{background-color:#FFD3FF;}
.logo-purple30{background-color:#FBA1E9;}
.logo-purple45{background-color:#E459CC;}
.logo-purple60{background-color:#88397A;}
.logo-purple75{background-color:#66175B;}
.logo-purple90{background-color:#2A0024;}


 /*------------------------------------------------- Typhography Page ---------*/
/*------------------------------*/
.typo-title-color{color: var(--burgundy); font-size: var(--header1-smaller);}
.typo-title-bg{background-color: var(--yellow);}
   


/*------------------------------------------------- Graphic Elements Page ---------*/
.graphics-title-color{color: var(--yellow); font-size: var(--header1-smaller);}
.graphics-title-bg{background-color: var(--burgundy);}

.icons-section{
	max-width: 90%;
	margin: 15rem auto;
	display:flex ;
	flex-direction: column;
}

.icons{
	max-width: 90%;
	display: flex;	
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;
	gap: 1rem;	
}

.icons img{
	width: 15rem;
	max-width: 15rem;
	padding:1.5rem;
	object-fit: cover;
	
 }


/*------------------------------------------------- Graphic Elements Page ---------*/
.graphics-title-visual{color: var(--yellow); font-size: var(--header1-smaller2);}
.graphics-title-bg{background-color: var(--burgundy);}


/*------------------------------------------------- Brand Architectures Page ---------*/
.icons-title-color{color: var(--yellow); font-size: var(--header1-smaller2);}
.icons-title-bg{background-color: var(--green);}


.chart1{
	margin: 10rem auto;
	max-width: 90%;
	display: flex;
	flex-direction: column;
	gap: 5rem;

}

.firstpart{
	display: flex;
	gap: 3rem;
	flex-direction: column;
	border: 1px solid rgba(33, 40, 44, 0.3);
	padding: 3rem 0rem;
}

.chart1 h2{
	text-align: center;
	color: var(--red);
}

.brandArchtc-logo{
	max-width: 17rem;
	margin: auto;
	align-items: center;
	justify-content: center;
}


.programs{
	margin: auto;
	width: 95%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	
}

.programs img{
	margin: 2rem 0rem;
	width: 95%;
	max-width: 31rem;
	object-fit:contain; 
}

.programs2{
	margin: 2rem auto 5rem auto;
	width: 95%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 2.5rem;
}

.programs2 img{
	margin-top: 2rem;
	width: 100%;
	max-width: 45rem;
	object-fit:contain; 
}

.vl{
  border-left: 0.2rem solid  rgba(33, 40, 44, 0.2);
  height: 4rem;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

.hl{
	width: 98%;
	height: 0.3rem;
	border-top: 0.2rem solid  rgba(33, 40, 44, 0.2);
  }
  

  /*-----------Tennis-logos-brand-------*/
.tennis-logos {
	margin: 10rem auto;
	width: 90%;
	display: flex;
	flex-direction: column;
	gap: 7rem;
  }
  
  .text-logos {
	display: flex;
	flex-direction: column;
	gap: 5rem;
  }
  
  .text-logos h3 {
	color: var(--gray);
	font-style: regular;
	font-size: calc(1.3rem + 1vw);
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
  }
  
  .stade-logos {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	gap: 4rem;
  }
  
  .stade-logos img {
	width: 90%;
	height: auto;
	-o-object-fit: scale-down;
	   object-fit: scale-down;
  }
  
  .stade-logos a, .province-logos a {
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .province-logos a {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 15rem;
  }
  
  .province-logos {
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
  }
  
  .province-logos img {
	width: 80%;
  }
  


/*------------------------------------------------- Photos Page ---------*/
.photo-title-color{color: var(--white); font-size: var(--header1-smaller2);}
.photo-title-bg{background-color: var(--red);}
   

/* Main Gallery */
.gallery {
	display: grid;
	max-width: 90%;
	margin: 15rem auto;
	margin: 0rem auto 15rem auto;
	min-height: 40rem;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, 450px);
	column-gap:0.5rem;
	row-gap: 0.5rem;
 }

  .gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

  .gallery1 {
	grid-column: 1/2;
	grid-row: 1/2;
  }
  .gallery2 {
	grid-column: 2/4;
	grid-row: 1/2;
  }

  .gallery3 {
	grid-column: 4/5;
	grid-row: 1/2;
  }
  .gallery4 {
	grid-column: 5/6;
	grid-row: 1/2;
  }

  .gallery5 {
	grid-column: 1/2;
	grid-row: 2/3;
  }

  .gallery6 {
	grid-column: 2/3;
	grid-row: 2/3;
  }

  .gallery7{
	grid-column: 3/4;
	grid-row: 2/3;
  }

  .gallery8{
	grid-column: 4/5;
	grid-row: 2/3;
  }

  .gallery9{
	grid-column: 5/6;
	grid-row: 2/3;
  }

  .text-content-info{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	}


  .galleries {
	display: grid;
	max-width: 70%;
	margin: 7rem auto 0rem auto;
	min-height: 30rem;
	grid-template-columns: repeat(4, 1fr);
	column-gap:0.5rem;
	row-gap: 0.5rem;
	
 }

  .galleries img {
	width: 100%;
	object-fit: cover;
  }

 
.treatment-images{
	width: 90%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-shrink: 10rem;
	flex-grow: 10rem;
	padding: 0rem 0rem 15rem 0rem;

}

.treatment-images img{
	width: 100%;
	max-width: 40rem;
	object-fit:contain; 	
} 

.example-images{
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-shrink: 10rem;
	flex-grow: 10rem;
	background-color: var(--blue);
	padding: 15rem 0rem;

}

.example-images img{
	width: 95%;
	max-width: 30rem;
	object-fit:contain; 	
}
/*------------------------------------------------- Inspiration Page ---------*/
.inspiration-title-color{color: var(--pink); font-size: var(--header1-smaller);}
.inspiration-title-bg{background-color: var(--burgundy);}

.inspiration-images{
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-shrink: 10rem;
	flex-grow: 10rem;
	background-color: var(--white);
	padding: 0rem 0rem 10rem 0rem;

}

.inspiration-images img{
	width: 95%;
	max-width: 30rem;
	object-fit:contain; 
	border: 1px solid gray;	
}

/*------------------------------------------------- Templates Page ---------*/

.templates-title-color{color: var(--pink); font-size: var(--header1-smaller);}
.templates-title-bg{background-color: var(--burgundy);}



.download-content{
	background-color: white;
	max-width: 90%;
 	margin: 10rem auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}



.content-links{
	display: flex;
	flex-direction: column;
	background-color: red;
}

.content-links a {
color: white;
text-decoration: none;

}


/*------------------------------------------------- Templates Page dropdown ---------*/

.accordion {
	background-color:var(--white);
	cursor: pointer;
	padding: 1.5rem 3rem;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: calc(0.5rem + 1vw);
	transition: 0.1s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid rgba(0, 0, 0, 0.05);
	gap: 2rem;
  }
  
  .accordion2 {
	background-color:var(--white);
	cursor: pointer;
	padding: 1.5rem 3rem;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: calc(0.5rem + 1vw);
	transition: 0.1s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid rgba(000, 050, 077, 0.05);
	gap: 2rem;
  }
  
  .accordion2 p{
	color: var(--blue);
	font-size: calc(1.4rem + 1vw);
	font-style: italic;
	font-weight: bolder;
	text-transform: uppercase;
	letter-spacing: -0.5px;
  }

  .accordion p{
	color: var(--burgundy);
	font-size: calc(1.4rem + 1vw);
	font-style: italic;
	font-weight: bolder;
	text-transform: uppercase;
	letter-spacing: -0.5px;
  }

  .active, .accordion:hover {
	background-color: rgba(0,0,0,0.04);
	opacity: 1;
  }
  
  .active, .accordion2:hover {
	background-color: rgba(0,0,0,0.04);
	opacity: 1;
  }
  
  .active .icon-img{
	transform: rotate(180deg);
	transition: 0.4s;
  }


 
.icon-img{
	width:calc(1.3rem + 0.8vw);
}

.panel{
	display: none;
	overflow: hidden;
	background-color: var(--red);
  }

.panel2{
	display: none;
	overflow: hidden;
	background-color: var(--yellow);
	
  }

.mis-links , mis-links2 {
	display: flex;
	flex-direction: column;
}

.mis-links a{
	color: white;
	font-size: calc(0.8em + 0.6vw);
	font-weight: 500;
	text-transform: uppercase;
	background-color: var(--burgundy);
	padding: 1.5rem 3rem;
	margin-left: 1rem;
	border-bottom: 1px solid rgba(255,255,255,0.3);
}

.mis-links2 a{
	color: var(--yellow);
	font-size: calc(0.8rem + 0.6vw);
	font-weight: 500;
	text-transform: uppercase;
	background-color: var(--blue);
	padding: 1.5rem 3rem;
	margin-left: 1rem;
	border-bottom: 1px solid rgba(255,255,255,0.3);
}


.lay{
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
}

.mis-links a:hover{	
	background-color: rgba(099, 011, 026, 0);
}

.mis-links2 a:hover{	
	background-color: rgba(2, 21, 34, 0.99);
}

/*------------------------------------------------- Federation Page ---------*/

.federation-title-color{color: var(--white); font-size: var(--header1-smaller);}
.federation-title-bg{background-color: var(--red);}

/*------------------------------------------------- OBN Page ---------*/

.nbo-title-color{color: var(--yellow); font-size: var(--header1);}
.nbo-title-bg{background-color: var(--blue);}


/*------------------------------------------------- video Page ---------*/

.video-title-color{color: var(--yellow); font-size: var(--header1-smaller);}
.video-title-bg{background-color: var(--green);}

.twoTemplates{
	margin:auto;
	width: 95%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

.info-templ{
	max-width: 60rem;
	flex: 1 1 50rem;

}

.info-templ p{
	color: var(--burgundy);
	font-style: italic;
	font-weight: bolder;
	line-height: 1.1;
	font-size: calc(1.3rem + 1vw);
	margin-top: 2rem;
}
.info-templ img{
	width: 100%;
	margin-top: 2rem;
	object-fit: scale-down;
	object-position: center;
}

/*---------------------------------------------- Coming soon----*/
/*------------------------------*/

.hero-section-soon{
	width: 100%;
	margin-top: 6rem;
	display: block;
	min-height: 90vh;
	background: radial-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), 
		url('../img/soon.webp');
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
	display:flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	
}

.hero-section-soon h2{
	color: var(--white);
	text-align: center;
	padding: 1rem 0rem;
	background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(224,255,45,0.013064600840336116) 0%, rgba(255,000,026,1) 30%, rgba(255,000,026,1) 70%, rgba(224,255,45,0) 100%);
}

.hero-section-soon h3{
	color: var(--white);
	text-align: center;
	padding: 3rem 0rem;
	font-weight: normal;
	font-size: 2rem;
	text-shadow: 0px -2px 6px #000000;
	
}



/*---------------------------- Footer----*/

footer {
    background: var(--gray);
    
 }
    
.container-footer{
	color: white;
    width: 100%;
	max-width: 90%;
    padding: 10rem 0rem;
    gap: 50px;
    display: flex;
    flex-direction: column;
	margin: 0 auto;
}	


 /* ----------------------------first block (contact Us & Names)*/
.button-people{
      display: flex;
	  justify-content: space-between;
      gap: 3rem;
	  flex-wrap: wrap;
}
    
.names{
	display: flex;
	flex-direction: column;		
	justify-content:space-between;
	align-items: flex-start;
	gap: 3rem;

}

.names p{
    text-align: left;
	font-size: 2rem;
	font-weight: normal;
    line-height: 1.5; 
	  
 }
    
 .top-foot{
 	display: flex;
 	flex-direction: row;
 	align-items: flex-end;
 	flex-wrap: wrap;
 	gap: 5rem;
 }

.contact-btn{
	display: flex;
	flex-direction:column;
	gap: 3rem;
	flex: 1 1 50rem;
}

.address{
	display: flex;
	flex-direction: row;
	flex: 1 1 50rem;
}

.address h6{
	padding: 0rem 2rem;	
}

/* ----------------------------white line between the blocks */
    
    .footer-line{
      width: 100%;
      height: .1rem;
      background-color:var(--white);
    }

	.gray-line{
	  width: 100%;
      height: 0.1rem;
      background-color:var(--gray);
	  opacity: 0.2;
	}
    
    /* ----------------------------Second block (TC logo & SOME)*/
	.block-log-some{
		display: flex;
		justify-content: space-between;
		gap: 3rem;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: flex-end;
    }
    
    .follow-some{
      display: flex;
      align-items: left;
      flex-direction: column;
	  gap: 3rem;
	  flex: 1 1 35rem;
    }
    
    .logo-info {
      display: flex;
      gap: 2rem;
	  align-items: center;
	  justify-content: flex-end;
	  flex: 1 1 35rem;
    }
    
    
    .follow-some h4, .container-footer h4{
	  text-align: left;
      font-size: 2rem;
	  font-weight: normal;
      line-height: 1.2; 
	 
     }

	 .logo-info img{
		max-width:8rem;
	  }

	 .logo-info h4 {
	  text-align: left;
      font-size: 1.5rem;
	  font-weight: normal;
      line-height: 1.2; 
     }

    
    .follow-some img{
      max-width: 7rem;
	  object-fit:scale-down; 
	  width:100%;
	  height:100%;
    }
    
 
    .follow-some ul{
      display: flex;
      gap: 1.3rem;
    }
    




/*---------------------------- Mobile Styles--*/

.middle-image img {
	object-fit: cover;
	width:100%;
	height:100%;
	margin-bottom: -5px;
  }


.middle-image-small{
	width: 90%;
	margin: auto;
  }

.middle-image-small img {
	object-fit: cover;
	width:100%;
	height:100%;
	margin-bottom: -5px;
  }

  .template-image-small{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 95%;
	margin: auto;
  }

  .logos-image{
	width: 80%;
	margin: 0rem auto 15rem auto;
 } 
 
 .logos-image img {
	object-fit: cover;
	width:100%;
	height:100%;
	margin-bottom: -5px;
  }


.cont-template{
	margin: 7rem 4rem 0rem 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex: 1 0 20rem;
}

.cont-template h5{
	max-width: 40rem;
	text-align: center;
}

  .template-image-small img {
	object-fit: cover;
	margin-top: 3rem;
	max-width: 25rem;
	border: 1px solid gray;
  }
/*---------------------------- Mobile Styles--*/	

@media screen and (max-width: 991px){

	html{
	
		--buttons: calc(0.9rem + 0.5vw);
  	}

	.header .menu-overlay.active{
	visibility: visible;
	opacity: 1;
	}

	.header .nav-menu{
		position: fixed;
		right: -280px;
		visibility: hidden;
		width: 280px;
		height: 100%;
		top:0;
		overflow-y: auto;
		background-color: var(--burgundy);
		z-index: 1000;
		padding: 15px 0;
		transition: all 0.5s ease;
	}
	.header .nav-menu.open{
		visibility: visible;
		right: 0px;
	}
	.header .menu > .menu-item{
		display: block;
		margin:0;
		
	}
	.header .menu > .menu-item-has-children > a{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header .menu > .menu-item > a{
		color: #ffffff;
		padding: 12px 15px;
		border-bottom: 1px solid white;
		border-bottom: 1px solid var(--red);	
	}
	.header .menu > .menu-item:first-child > a{
	    border-top: 1px solid #8f2727;	
	
	}
	.header .menu > .menu-item > a .plus:before, 
	.header .menu > .menu-item > a .plus:after{
		background-color: #ffffff;
	}
	.header .menu > .menu-item-has-children.active > a .plus:after{
        transform: translate(-50%,-50%) rotate(0deg);
	}
	.header .menu > .menu-item > .sub-menu{
		width: 100%;
		position: relative;
		opacity: 1;
		visibility: visible;
		border:none;
		background-color: transparent;
		box-shadow: none;
		transform: translateY(0px);
		padding: 0px;
		left: auto;
		top:auto;
		max-height: 0;
		overflow: hidden;
	}
	.header .menu > .menu-item > .sub-menu > .menu-item > a{
		padding: 12px 45px;
		color: #ffffff;
	}
	.header .close-nav-menu,
	.header .open-nav-menu{
		display: flex;
	}


	.text-image, .text-only, .content-cards, .resources, .download-content, .tennis-logos{
		margin: 10rem auto;
	}
	

.example-images{
	padding: 10rem 0rem;

}

	.names{
		flex-direction: column;		
	}
 
	 /*---------------------------- Photos Page ---*/	
	.gallery {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		grid-template-rows: repeat(auto-fit, minmax(20rem, 12rem));
	}
	

	.galleries {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}
	

	.cont-template{
		margin: 4rem 2rem 0rem 2rem;
		
	}
	
	.follow-some{
		align-items: center;
		justify-items: center;
	}
	
	.logo-info {
		justify-content: center;
	}
	  
	  
}


@media screen and (max-width: 500px) {



	.header .logo{
		justify-content: center;
		align-items: center;
		width: 5rem;
		height: 5rem;
	}
	
	.logo-info img{
		max-width:5rem;
	  }
	
	.logo-info h4 {
		font-size: 1rem;
	}
	

	.home-section img{
		width: 7rem;
		height: 7rem;
		margin: 2rem auto;	
	}
	
	  .logo-info {
		justify-content: center;
	   
	  }
	  .button-people , .block-log-some{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
	  }

	
	.lang a{
		padding: .3rem .6rem;
		font-size: 1.2rem;
	}
	
/*------------footer-------------*/

/* ----------------------------first block (contact Us & Names)*/


.container-footer{
    padding: 6rem 0rem;

}	


.names p{
  text-align: center;
  font-size: 1.2rem;	
}
  

.contact-btn{
  align-items: center;
}


.address h6{
  font-size: 0.8rem;
  text-align: center;	
}

/*-------gfghjgh---------*/

.block-log-some{
	align-items: center;
	justify-items: center;
}

.follow-some{
	align-items: center;
	justify-items: center;
}

.logo-info {
	justify-content: center;
}
  


/* -----------------------------------new layout-mobile */

	  
	.new-lay{
		display: grid;
		margin-top: 6rem;
		height: 45vh;
		width: 100%;
		min-height: 40vh;
		grid-template-columns: 19.5% 0.5% 80%;
		grid-template-rows: 1fr;
	}
	
	.box1, .box1-2{
		writing-mode: vertical-lr;
		transform: rotate(180deg);
		grid-column: 1/2;
		grid-row: 1/3;
		background-color: var(--red);
	}
	
	.box1 h1{
	 padding: 2rem 0.5rem 0rem 0.5rem;
	}
	
	.box1-2 h1{
		padding: 2rem 0.5rem 0rem 0.5rem;
	   }
	   

	.box2{
		grid-column: 3/4;
		grid-row: 1/3;
	}
	
	
	.text-image, .text-only, .content-cards, .tennis-logos {
		margin: 7rem auto;
	   }
	
	   .resources {
		margin: 5rem auto;
	   }
	

	h1{
	font-size: 3rem;
	}
		 
	.image-content img{
		width: 90%;
		padding: 1rem;
			
	}

	.example-images{
		padding: 7rem 0rem;
	
	}

	

/*---------------------------- logo Page ---*/
.logo-title-color{color: var(--burgundy); font-size: 3rem;}
.logo-title-bg{background-color: var(--red);}
		
/*---------------------------- colors Page ---*/	
.colors-title-color{color: var(--yellow); font-size: 3rem;}
.colors-title-bg{background-color: var(--green); }

.black-white-logos{
margin: 4rem auto 7rem auto;
}

.horizontal-logos{
	margin: 4rem auto 7rem auto;
}	



/*---------------------------- typo Page ---*/

.typo-title-color{color: var(--burgundy); font-size: 3rem;}
.typo-title-bg{background-color: var(--yellow);}
 /*---------------------------- Graphics Page ---*/	  
.graphics-title-color{color: var(--yellow);font-size: 3rem;}
.graphics-title-bg{background-color: var(--burgundy);}
   
/*------------------------------ Icons Page ---------*/
.icons-title-color{color: var(--yellow); font-size: 3rem;}
.icons-title-bg{background-color: var(--green);}
	 

.icons-section{
	max-width: 90%;
	margin: 7rem auto;
}


.icons{
	max-width: 100%;
	
}

 .icons img{
	width: 10rem;
	max-width: 10rem;
	padding: 1rem;
	
}
.logos-image{
	width: 90%;
	margin: 0rem auto 7rem auto;
 } 
 


 /*---------------------------- Photos Page ---*/	  
 .photo-title-color{color: var(--white); font-size: 3rem;}
 .photo-title-bg{background-color: var(--red);}


 .gallery img{
    grid-row: auto;
    grid-column: auto;
  }
 
.gallery, .galleries{
	margin: 4rem auto 0rem auto;
}

.treatment-images{
	padding: 0rem 0rem 7rem 0rem;

}

.extraBot{
	padding:  0rem 0rem 7rem 0rem;
}


.graphics-title-visual{color: var(--yellow); font-size: 3rem;}

/*---------------------------- inspiration Page ---*/
.inspiration-title-color{color: var(--pink); font-size: 3rem;}
.inspiration-title-bg{background-color: var(--burgundy);}

.inspiration-images{
	padding: 0rem 0rem 7rem 0rem;

}

.template-image-small{
	margin: 0;
  }


.cont-template{
	margin: 4rem 0rem;

}

/*---------------------------- federation Page ---*/
.federation-title-color{color: var(--white); font-size: 3rem;}
.federation-title-bg{background-color: var(--red);}

/*---------------------------- NBO Page ---*/
.nbo-title-color{color: var(--yellow); font-size: var(--header1);}
.nbo-title-bg{background-color: var(--blue);}

/*------------------------------------------------- OBN Page ---------*/

.video-title-color{color: var(--yellow); font-size: 3rem;}
.video-title-bg{background-color: var(--green);}


.programs2, .chart1{
	margin: 4rem auto;	
	
}	

/*-------------------------------------------------templates Page ---------*/

.templates-title-color{color: var(--pink); font-size: 3rem;}
.templates-title-bg{ background-color: var(--burgundy);}

.download-content{
	margin: 4rem auto;
}


}