*{  
margin: 0;
padding:0;
font-family: 'Poppins', sans-serif;
}

/*---------------Sekcja Header -----------------------------------*/
.header{
min-height: 70vh;
width: 100%;
background-image: url(img/tlo2.webp);
background-position: center;
background-size: cover;
position: relative;}

.text-box{
width: 90%;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;}

.text-box h1{
font-size: 80px;
font-weight: 300;}

/*---------------Ustawienia dla COURSE ----------------------------*/

.course{
max-width: 100%;
text-align: center;
padding-top: 20px ;}

h2{
font-size: 58px;
font-weight: 500;
color: #0f4d55;}

.paragraf2{
    text-align: center;
    font-size: 20px;}

p{
color: #0f4d55;
padding-top: 25px;
text-align: justify;
margin-left: 40px;
margin-right: 40px;
font-size: 21px;
font-weight: 400;}

.row
{
margin-top: 40px;
display: flex;
justify-content: space-between;
text-align: center;
margin-left: 100px;
margin-right: 100px;}

.course-col{
flex-basis: 31%;
background-color: #0f4d55;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
margin-left: 25px;
margin-right: 25px;
transition: 0.5s;}

.course-col:hover{
box-shadow: 0 0 15px 0px rgba(0,0,0,0.7);}

h3
{
text-align: center;
color: white;
font-size: 35px;
font-weight: 400;}

h4
{
text-align: center;
color: white;
font-size: 12px;
font-weight: 400;}

.hero-btnX{
display: inline-block;
text-decoration: none;
color: #0f4d55;
border: 1px solid #fff;
font-size: 16px;
font-weight: 400;
background: #fff;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 200px;
transition: 0.5s;
margin-top: 25px;}

.hero-btnX:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
font-size: 16px;
font-weight: 400;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 200px;}

.hero-btny{
display: inline-block;
text-decoration: none;
color: #0f4d55;
border: 2px solid #0f4d55;
font-size: 19px;
font-weight: 500;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 250px;
transition: 0.5s;
margin-top: 20px;
padding: 3px;}
    
.hero-btny:hover{
display: inline-block;
text-decoration: none;
color: #fff;
background: #0f4d55;}

/*---------------Ustawienia dla whatsapp ----------------------------*/

.floating-wpp {
    position: fixed;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    transition: bottom 0.2s;
}

.floating-wpp .floating-wpp-button {
    position: relative;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(60, 60, 60, 0.4);
    transition: box-shadow 0.2s;
    cursor: pointer;
    overflow: hidden;
}

.floating-wpp .floating-wpp-button img,
.floating-wpp .floating-wpp-button svg {
    position: absolute;
    width: 100%;
    height: auto;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 50%;
}

.floating-wpp:hover {
    bottom: 17px;
}

.floating-wpp:hover .floating-wpp-button {
    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.4);
}

.floating-wpp .floating-wpp-popup {
    /*border: 2px solid white;*/
    border-radius: 6px;
    background-color: #E5DDD5;
    position: absolute;
    overflow: hidden;
    padding: 0;
    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
    width: 0px;
    height: 0px;
    bottom: 0;
    opacity: 0;
    transition: bottom 0.1s ease-out, opacity 0.2s ease-out;
    transform-origin: bottom;
}

.floating-wpp .floating-wpp-popup.active {
    padding: 0 12px 12px 12px;
    width: 260px;
    height: auto;
    bottom: 82px;
    opacity: 1;
}

.floating-wpp .floating-wpp-popup .floating-wpp-message {
    background-color: white;
    padding: 8px;
    border-radius: 0px 5px 5px 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.2s;
}

.floating-wpp .floating-wpp-popup.active .floating-wpp-message {
    opacity: 1;
    transition-delay: 0.2s;
}

.floating-wpp .floating-wpp-popup .floating-wpp-head {
    text-align: right;
    color: white;
    margin: 0 -15px 10px -15px;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.floating-wpp .floating-wpp-input-message {
    background-color: white;
    margin: 10px -15px -15px -15px;
    padding: 0 15px;
    display: flex;
    align-items: center;
}

.floating-wpp .floating-wpp-input-message textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: none;
    padding: 8px;
    margin: 10px 0;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    font-size: inherit;
    resize: none;
}

.floating-wpp .floating-wpp-btn-send {
    margin-left: 12px;
    font-size: 0;
    cursor: pointer;
}

/*---------------Kolejna sekcja -----------------*/

.campus{
width: 80% ;
margin: auto;
text-align: center;
padding-top: 20px;}

.campus2{
width: 100% ;
margin: auto;
text-align: center;
padding-top: 20px;
background-color: #0f4d55;
min-height: 100px;
display: flex;
justify-content: flex-end;
align-items: flex-end;}

.row1
{
margin-top: 20px;
display: flex;
justify-content: space-between;
text-align: center;
margin-left: 5px;
margin-right: 5px;}

.row1 p
{

display: flex;
justify-content: center;
text-align: center;
font-size: 15px;}

.row2
{
position: relative;
width: 100%;
background-color: #0f4d55;
min-height: 100px;
padding: 20px 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;}

.row2 .social_icon,
.row2 .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;}

.row2 .social_icon li,
.row2 .menu li{
list-style: none;}

.row2 .social_icon li a,
.row2 .menu li a{
list-style: none;
font-size: 2.5em;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.4s;}

.row2 .social_icon li a:hover{
transform: translateY(-10px);}

.row2 .menu li a{
list-style: none;
font-size: 1.3em;
color: #fff;
margin: 0 20px;
display: inline-block;
transition: 0.4s;
text-decoration: none;}

.row2 .menu li a:hover{
list-style: none;
font-size: 1.3em;
color: #0f8484;}

.row2 p{
color: #fff;
text-align: center;
margin-top: 5px;
margin-bottom: 10px;
font-size: 0.8em;}

.hero-btny1{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 23px;
font-weight: 500;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 530px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}
        
.hero-btny1:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 23px;
font-weight: 500;
background: orangered;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 530px;
margin-top: 20px;
padding: 2px;}

.hero-btnyX{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 23px;
font-weight: 500;
background: #0f4d55;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 330px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}
        
.hero-btnyX:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 23px;
font-weight: 500;
background: orangered;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 330px;
margin-top: 20px;
padding: 2px;}

.row2 p{
font-size: 25px;
font-weight: 300;}

.campus-col{
flex-basis: 32%;
margin-bottom: 30px;
position: relative;
overflow: hidden;}

.campus-col img{
width:100% ;
border-radius: 10px;}

.campus-col1{
flex-basis: 44%;
margin-bottom: 30px;
position: relative;
overflow: hidden;}
    
.campus-col1 img{
width:100% ;
border-radius: 10px;}

/*---------------Ustawienia dla szerokości 1150px -----------------*/

@media screen and (max-width: 1150px)
{
.text-box h1 {font-size: 49px;
font-weight: 300;}

.header{min-height: 50vh;}

h2{
font-size: 43px;
font-weight: 500;
color: #0f4d55;
width: 100%;}

h3
{
font-size: 21px;
font-weight: 400;
text-align: center;}

h4
{
text-align: center;
color: white;
font-size: 12px;
font-weight: 400;}

.hero-btnX{
display: inline-block;
text-decoration: none;
color: #0f4d55;
border: 1px solid #fff;
font-size: 16px;
font-weight: 400;
background: #fff;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 120px;
transition: 0.5s;
margin-top: 15px;}
    
.hero-btnX:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
font-size: 16px;
font-weight: 400;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 120px;}

.row2 p{
font-size: 25px;
font-weight: 300;}

.hero-btny1{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 23px;
font-weight: 500;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 430px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}
    
.hero-btny1:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 23px;
font-weight: 500;
background: orangered;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 430px;
margin-top: 20px;
padding: 2px;}

.hero-btnyX{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 23px;
font-weight: 500;
background: #0f4d55;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 330px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}
    
.hero-btnyX:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 23px;
font-weight: 500;
background: orangered;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 330px;
margin-top: 20px;
padding: 2px;}

.course-col{
flex-basis: 31%;
background-color: #0f4d55;
border-radius: 10px;
padding:20px 12px;
box-sizing: border-box;
margin-left: 8px;
margin-right: 8px;}

.hero-btnX{
display: inline-block;
text-decoration: none;
color: #0f4d55;
border: 1px solid #fff;
font-size: 16px;
font-weight: 400;
background: #fff;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 120px;
transition: 0.5s;}

.hero-btnX:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
font-size: 16px;
font-weight: 400;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 120px;}

.hero-btny{
display: inline-block;
text-decoration: none;
color: #0f4d55;
border: 2px solid #0f4d55;
font-size: 17px;
font-weight: 500;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 120px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}
        
.hero-btny:hover{
display: inline-block;
text-decoration: none;
color: #fff;
background: #0f4d55;}}

/*---------------Ustawienia dla szerokości 700px -----------------*/

@media screen and (max-width: 700px)
{
.text-box h1 {
font-size: 38px;
font-weight: 300;}

.header{
min-height: 39vh;}

h2{
font-size: 27px;
font-weight: 600;
color: #0f4d55;
width: 100%;}

p{
font-size: 14px;
margin-left: 20px;
margin-right: 20px;
color: #0f4d55;}

.row{
margin-top: 40px;
text-align: center;
margin-left: 10px;
margin-right: 10px;}

h3
{
font-size: 27px;
font-weight: 500;
text-align: center;}

h4
{
text-align: center;
color: white;
font-size: 12px;
font-weight: 400;}

.course-col{
flex-basis: 31%;
background-color: #0f4d55;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
margin-left: 65px;
margin-right: 65px;}

.hero-btnX{
display: inline-block;
text-decoration: none;
color: #0f4d55;
border: 1px solid #fff;
font-size: 16px;
font-weight: 400;
background: #fff;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 120px;
transition: 0.5s;
margin-top: 15px;}

.hero-btnX:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
font-size: 16px;
font-weight: 400;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 120px;}

.row{
flex-direction: column;}

.row1{
flex-direction: column;}

.row2{
flex-direction: column;}

.hero-btny{
display: inline-block;
text-decoration: none;
color: #0f4d55;
border: 2px solid #0f4d55;
font-size: 17px;
font-weight: 500;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 170px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}

.hero-btny:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #0f4d55;
font-size: 17px;
font-weight: 500;
background: #0f4d55;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 170px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}

.hero-btny1{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 13px;
font-weight: 500;
background: transparent;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 230px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}

.hero-btny1:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 13px;
font-weight: 500;
background: orangered;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 230px;
margin-top: 20px;
padding: 2px;}

.hero-btnyX{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 15px;
font-weight: 500;
background: #0f4d55;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 150px;
transition: 0.5s;
margin-top: 20px;
padding: 2px;}
    
.hero-btnyX:hover{
display: inline-block;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
font-size: 15px;
font-weight: 500;
background: orangered;
position: relative;
cursor: pointer;
border-radius: 10px;
width: 150px;
margin-top: 20px;
padding: 2px;}

.row2 .menu li a{
list-style: none;
font-size: 15px;
color: #fff;
margin: 0 15px;
display: inline-block;
transition: 0.4s;
text-decoration: none;}

.row2 .menu li a:hover{
list-style: none;
font-size: 15px;
color: #0f8484;
margin: 0 15px;
display: inline-block;
transition: 0.4s;
text-decoration: none;}

.row2 p{
font-size: 15px;
font-weight: 300;}

}