/* Reset */

*,*::before,*::after{
	box-sizing:border-box;
    font-size: 10px;
    font-family: "Noto Serif", serif;
}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,
header,footer,aside,nav,article,figure,figcaption{
	margin:0;
	padding:0;
    scroll-behavior: smooth;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:400;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:400;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
}
a:active,a:focus{
	outline:none;
} 
/* Variables */

:root{
  
    /* Reset 1rem = 10px */
    font-size:10px;
    
    /* Basic colors */
    --white:#ffffff;
    --black:#000000;
    /* Project colors */
    --yellow:hsl(57,88%,58%);
    --blue:hsl(220,88%,58%);
    /* Layout variables */
    --content-width:90rem;
    --content-padding:5rem;
    --header-height:10rem;
    --keyvisual-height:60rem;
    /*font size*/
    --small-size:1.2rem;
    --medium-size:2rem;
    --big-size:2.5rem;
    /*font  family*/
    
  }
/* Globals */ 
body{
    background-color: #141414;
}

  
/* Specifics */
/* main menu style */
.contact_form p{
    font-size: var(--medium-size);
    text-align: center;
    color: white;
    padding-top: 2rem;
}
.main_menu ul li a{
    font-style: none;
    text-decoration: none;
    color: white;
    font-size: var(--big-size);
}

.main_menu ul  li{
    padding: .5rem;
}
.main_menu ul{
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.main_menu{
    width: 100%;
    padding: 1.5rem;
    position: sticky;
    top: 0;
    background-color: #141414;
    z-index: 1000;

}
.current_active{
    border-bottom: .2rem solid white;
}
.main_home_page_container h1{
    font-size: var(--big-size);
    color: white;
    text-align: center;

}
.main_home_page_container{
    padding: 2.5rem;
    position: relative;
}

.hr_flags div{
    height: .2rem;
    width:  25%;
    background-color: white;
    text-align: center;
    align-items: center;
    margin:0  auto ;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5rem;
}
.hr_flags{
    align-items: center;
}

.hr_flags div:first-child{
    background-color: green;
    width: 30%!important;
}
.hr_flags div:last-child{
    width: 20%!important;
    background-color: red;
}

.name_section{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}
.left-image p strong{
    font-size: 2rem;
    font-weight: bold;
    text-decoration: underline;
}


.left-image p{
    color: white;
    font-size: var(--medium-size);
    width: 50%;
    text-overflow: clip;
    word-wrap: normal;

}
.left-image {
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    align-items: center;
    height: 100%;
}
#img_1 {
    background-image: url('../img/img_1.jpg');
}
#img_2 {
    background-image: url('../img/img_2.jpg');
}
#img_3 {
    background-image: url('../img/img_3.jpg');
}
#section_2_res{
    display: none;
}
.left-image div{

    width: 45%;
    height: 65vh;
    border-radius: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* From Uiverse.io by 0800Gonza */ 
.card {
    width: 100%;
    height: fit-content;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 25px;
    gap: 20px;
  }
  .banner_social_networks{
    text-align: center;
  }
  .card{
    text-align: center;
    align-items: center;

  }
  /* for all social containers*/
  .socialContainer {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgb(44, 44, 44);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition-duration: 1s;
  }
  /* instagram*/
  .containerOne:hover {
    background-color: #d62976;
    transition-duration: 0.3s;
  }
  /* twitter*/
  .containerTwo:hover {
    background-color: #00acee;
    transition-duration: 0.3s;
  }
  /* linkdin*/
  .containerThree:hover {
    background-color: #0072b1;
    transition-duration: 0.3s;
  }
  /* Whatsapp*/
  .containerFour:hover {
    background-color: #9e1b1b;
    transition-duration: 0.3s;
  }
  
  .socialContainer:active {
    transform: scale(0.9);
    transition-duration: 0.3s;
  }
  
  .socialSvg {
    width: 17px;
  }
  
  .socialSvg path {
    fill: rgb(255, 255, 255);
  }
  
  .socialContainer:hover .socialSvg {
    animation: slide-in-top 0.3s both;
  }
  
  .events table {
    width: 100%;
    text-align: center;
    color: white;

    padding: .5rem;
    border-collapse: collapse;
   
  }
  .events table tr td  p{
    font-size: var(--small-size)!important;

  }
  .events table tr td {
    width: 33.3%;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: normal; 
    padding: .1rem;
    font-size: var(--big-size);
  }
  .events table tr{
    display: flex;
    width: 100%;
    align-items: center;
    vertical-align: middle;
    padding-bottom: 2rem;
    justify-content: space-between;
    border-bottom: 1px solid white;
  }
  .events table th{
    
    text-align: center;
    padding: 1rem;
    font-size: var(--big-size);
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .events{
    width: 95%;
    min-height: 2rem;
    margin: 0 auto;
    padding: .5rem;
  }
  .footer_class{
    background-color: rgb(44, 44, 44);
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 3rem;
    text-align: center;
    padding: .5rem;
    font-size: var(--small-size);
    color: white;

  }
  body{
    position: relative;
    min-height: 100vh;
    padding-bottom: 3rem;
  }
  
  @keyframes slide-in-top {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  

/* Hovers */

/* Media Queries */
@media screen and (max-width: 994px) {
    .hr_flags div{
        width:  35%!important;
    } 
    .hr_flags div:first-child{
        width: 45%!important;
    }
    .hr_flags div:last-child{
        width: 25%!important;
        background-color: red;
    }
    .left-image p{
        font-size: 1.5rem;
    }
    .left-image p strong{
        font-size: 1.5rem;
    }
    .main_menu ul li a{
        font-size: 2rem;
    }
    .main_home_page_container h1{
        font-size: 2rem
        
    }
}
@media screen and (max-width: 600px) {
    .events table tr td {
        font-size: var(--small-size);
    }
    .events table th{
        font-size: var(--medium-size);
    }

    .events table tr td  p{
    text-overflow: clip;
    word-break: normal;

    }
    .events{
        width: 100%;
        padding: .1rem;
    }
    .hr_flags div{
        width:  50%!important;
    } 
    .hr_flags div:first-child{
        width: 60%!important;
    }
    .hr_flags div:last-child{
        width: 40%!important;
        background-color: red;
    }
    .left-image p{
        font-size: 1.5rem;
    }
    .left-image p strong{
        font-size: 1.5rem;
    }
    .main_menu ul li a{
        font-size: 2rem;
    }
    .main_home_page_container h1{
        font-size: 2rem   
    }
    .left-image p{
        width: 95%;
        padding-top: 2rem;
    }
    .left-image div{
        width: 95%;
        background-position: center;
        height: 40vh;
    }
    .left-image{
        padding-top: 2rem;
        flex-direction: column;
        height: 100%;
    }
    #section_2{
        display: none;
    }
    #section_2_res{
        display: block;
    }
}