@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --primaryColor: #ff8000;
    --secondaryColor: #ff6a00;
    --textColor: hsl(0, 0%, 0%);

    --primaryFont:  "Poppins", sans-serif;
    --secondaryFont: "League Spartan", sans-serif;
    --header: 10rem;
    --topbar: 5rem;
    --menu: 10rem;

    --facebook: hsl(214, 89%, 52%);
    --twitter: hsl(203, 89%, 53%);
    --instagram: hsl(313, 65%, 46%);
    --youtube: hsl(0, 100%, 50%);
    --linkedin: hsl(210, 90%, 40%);
    --whatsappLight: hsl(142, 70%, 49%);
    --whatsappDark: hsl(173, 77%, 31%);

}
@media (min-width: 768px){
    :root{
        --header: 13rem;
        --menu: 7rem;
    }
}
@media (min-width: 992px){
    :root{
        --header: 15rem;
        --menu: 10rem;
    }
}
html {
	box-sizing: border-box;
	font-size: 62.5%;
	font-size-adjust: 100%;
	margin-right: 0 !important;
	-ms-overflow-style: scrollbar;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
html,
body {
	height: 100%;
}
body {
	color: var(--textColor);
	font-family: var(--primaryFont);
	font-size: 1.6rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	line-height: 1.5;
    overflow-x: hidden;
    position: relative;
}
body::-webkit-scrollbar{
    width: 1rem;
}
body::-webkit-scrollbar-track {
    background-color: #000;
}
body::-webkit-scrollbar-thumb {
    background-color: var(--primaryColor);
}
::-moz-selection {
	background-color: var(--primaryColor);
	color: #fff;
}
::selection {
	background-color: var(--primaryColor);
	color: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--secondaryFont);
    margin: 0;
}
figure,
address,
p{
    margin: 0;
}
figure a{
    width: 100%;
    height: 100%;
    display: block;
}
span{
    display: inline;
}
a,
a:hover,
a:focus{
    text-decoration: none;
    outline: none;
}
img{
    max-width: 100%;
    width: 100%;
    display: block;
    height: auto;
}
i{
    display: inline-block;
    position: relative;
    font-weight: 400!important;
}
ul{
    margin: 0;
    list-style-type: none;
    padding: 0;
}
li{
    position: relative;
}
label{
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.padding{
    padding: 5rem 0;
}
@media (min-width: 992px){
    .padding{
        padding: 12rem 0;
    }
}
.padding2{
    padding-bottom: 8rem;
}
.form-group{
    margin-bottom: 1rem;
}
.form-control{
    padding: 1.2rem;
    font-size: 1.6rem;
    color: var(--textColor);
}
.form-control,
.form-control:hover,
.form-control:focus{
    outline: none;
    box-shadow: none;
    border: none;
}
.equal [class^="col"] {
    display: flex;
}
.containImage{
    height: 100%!important;
    object-fit: contain!important;
}
.coverImage{
    height: 100%!important;
    object-fit: cover!important;
}
.header{
    height: var(--header);
    position: relative;
}
@media (min-width: 768px){
    .header:before{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: var(--topbar);
        background-color: var(--textColor);
        width: 50vw;
    }
}
.headerSide{
    height: var(--header);
    display: flex;
    justify-content: flex-start;
}
.logo{
    height: 100%;
    max-width: var(--header);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.headerSideContent{
    height: 100%;
    max-width: calc(100% - var(--header));
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
@media (min-width: 1200px){
    .headerSideContent{
        align-items: flex-start;
    }
}
.headerSideContentBar{
    height: var(--topbar);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--textColor);
    max-width: 100%;
    width: 100%;
    padding-left: 2rem;
    position: relative;
    border-bottom-left-radius: .6rem;
}
@media (min-width: 1400px){
    .headerSideContentBar{
        padding-left: 3rem;
    }
}
.headerSideContentBarContact{
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 2rem;
}
.headerSideContentBarContact a,
.headerSideContentBarContact a:hover,
.headerSideContentBarContact a:focus{
    font-size: 1.5rem;
    color: #FFF;
}
.headerSideContentBarContact a i{
    margin-right: .5rem;
    color: var(--primaryColor);
}
.headerSideContentBarEnd{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.headerSideContentBarButtons{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: .5rem;
    margin-left: 1rem;
    padding-left: 1rem;
    position: relative;
}
.headerSideContentBarButtons a{
    background-color: var(--primaryColor);
    color: #FFF;
    border-radius: .2rem;
    padding: .6rem 1.2rem;
    font-size: 1.4rem;
    transition: all 400ms ease;
}
.headerSideContentBarButtons a:hover,
.headerSideContentBarButtons a:focus{
    background-color: var(--secondaryColor);
}
.headerSideContentBarButtons a i{
    margin-right: .5rem;
}
.headerSideContentBarSocial{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: .5rem;
}
.headerSideContentBarSocial a,
.headerSideContentBarSocial a:hover,
.headerSideContentBarSocial a:focus{
    width: 3rem;
    height: 3rem;
    border-radius: .2rem;
    background-color: rgba(255, 255, 255, .1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 1.5rem;
    position: relative;
    overflow: hidden;
}
.headerSideContentBarSocial a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100%;
    transition: bottom 400ms ease;
}
.headerSideContentBarSocial a:hover:before{
    bottom: 0;
}
.facebook:before{
    background-color: var(--facebook);
}
.twitter:before{
    background-color: var(--twitter);
}
.instagram:before{
    background-color: var(--instagram);
}
.youtube:before{
    background-color: var(--youtube);
}
.linkedin:before{
    background-color: var(--linkedin);
}
.whatsapp:before{
    background-color: var(--whatsappLight);
}
.mainMenu{
    height: var(--menu);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 100%;
    width: 100%;
}
@media (min-width: 1200px){
    .mainMenu{
        justify-content: space-between;
        padding-left: 2rem;
    }
}
@media (min-width: 1400px){
    .mainMenu{
        padding-left: 3rem;
    }
}
.mainUl{
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 2rem;
}
@media (min-width: 1400px){
    .mainUl{
        column-gap: 2.5rem;
    }
}
.mainLi{
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
    color: var(--textColor);
    transition: color 400ms ease;
    cursor: pointer;
    position: relative;
}
.mainLi span{
    position: relative;
    transition: color 400ms ease;
    font-weight: 500;
}
.mainLi span i{
    transition: transform 400ms ease;
    transform: rotate(0);
}
.mainLi:hover span i{
    transform: rotate(-45deg);
}
.mainLi:hover span{
    color: var(--primaryColor);
}
.mainA{
    color: var(--textColor);
    transition: color 400ms ease;
    font-size: 1.6rem;
    position: relative;
    font-weight: 500;
}
.mainA:after,
.mainLi span:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0.2rem;
    left: auto;
    right: 0;
    bottom: -0.5rem;
    background-color: var(--primaryColor);
    transition: width 400ms ease, color 400ms ease;
}
.mainLi:hover span:after,
.mainLi:hover .mainA:after{
    width: 100%;
    left: 0;
    right: auto;
}
.mainLi:hover .mainA{
    color: var(--primaryColor);
}
.activeLink,
.activeLink .mainA,
.activeLink span{
    color: var(--primaryColor)!important;
}
.activeLink .mainA:after,
.activeLink span:after{
    width: 100%;
    left: 0;
    right: auto;
}
.mainMenuButtons{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: .5rem;
}
@media (min-width: 768px){
    .mainMenuButtons{
        margin-right: 2rem;
    }
}
@media (min-width: 1200px){
    .mainMenuButtons{
        margin-right: 0;
    }
}
.mainMenuButtons a{
    border-radius: .2rem;
    background-color: var(--secondaryColor);
    color: #FFF;
    padding: .8rem 1.2rem;
    font-size: 1.5rem;
    transition: all 400ms ease;
}
.mainMenuButtons a:hover{
    background-color: var(--textColor);
    color: #FFF;
}
.mobileMenuIcon{
    height: 100%;
    width: 1.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: .4rem;
    justify-content: center;
}
.mobileMenuIcon span{
    width: 100%;
    height: .2rem;
    background-color: var(--textColor);
    border-radius: 5rem;
    transition: all 400ms ease;
}
.pn span:first-child{
    transform: rotate(45deg);
    transform-origin: 0;
}
.pn span:nth-child(2){
    transform: translateX(-1rem);
    opacity: 0;
}
.pn span:last-child{
    transform: rotate(-45deg);
    transform-origin: 0;
}
.mobileBar{
    background-color: var(--textColor);
}
.mobileEnvelope{
    display: none;
}
@media (min-width: 375px){
    .mobileEnvelope{
        display: inline-block;
    }
}
.mobileBarSide{
    height: 5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.mobileBarSide a{
    font-size: 1.4rem;
    color: #FFF;
    transition: color 400ms ease;
}
@media (min-width: 576px){
    .mobileBarSide a{
        font-size: 1.6rem;
    }
}
.mobileBarSide a:not(:last-child){
    margin-right: 2rem;
}
.mobileBarSide a:hover{
    color: var(--primaryColor);
}
.dropdownMenu{
    position: absolute;
    z-index: 5;
    top: 100%;
    left: -5rem;
    background-color: #FFF;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 25rem;
    transition: transform 0.3s ease-in-out; /* Geçiş efekti */
    transform-origin: top right; /* Perspektifte açılma için orijin */
    transform: perspective(600px) rotateX(-90deg); /* Başlangıçta katlanmış durum */
}
.mainLi:hover .dropdownMenu {
    display: block;
    transform: perspective(600px) rotateX(0deg); /* Açıkken düzleşen durum */
}
.dropdownMenu a{
    font-size: 1.4rem;
    font-weight: 500;
    color: #000;
    padding: .8rem 1rem;
    border-radius: .3rem;
    width: 100%;
    display: block;
}
.dropdownMenu a:hover{
    background-color: var(--primaryColor);
    color: #FFF;
}
.dropdownMenu a:not(:last-child){
    margin-bottom: .1rem;
}
.slide{
    background-color: #EBEBEB;
    background-image: url(../images/bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
@media (min-width: 768px){
    .slide{
        padding: 3rem 0;
    }
}
@media (min-width: 992px){
    .slide{
        padding: 6rem 0;
    }
}
@media (min-width: 1200px){
    .slide{
        padding: 6rem 0 0 0;
    }
}
@media (min-width: 1600px){
    .slide{
        padding: 6rem 0;
    }
}
@media (min-width: 768px){
    .slide:before{
        content: "";
        position: absolute;
        top: 0;
        left: -55vw;
        bottom: 0;
        background-image: radial-gradient(#000000 1px, transparent 1px);
        background-size: 15px 15px;
        width: 65rem;
        transform: rotate(45deg);
        height: 100%;
        z-index: -1;
        opacity: .2;
    }
}
@media (min-width: 992px){
    .slide:before{
        left: -35vw;
    }
}
@media (min-width: 1200px){
    .slide:before{
        left: -20vw;
    }
}
@media (min-width: 1600px){
    .slide:before{
        width: 100rem;
        height: 100rem;
    }
}
.slideSide{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px){
    .slideSide{
        flex-direction: initial;
        justify-content: space-between;
        align-items: center;
    }
}
.slideLeft{
    max-width: 100%;
    width: 100%;
}
@media (min-width: 768px){
    .slideLeft{
        max-width: 50%;
    }
}
.slideText{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    padding: 5rem 0;
    text-align: center;
}
@media (min-width: 768px){
    .slideText{
        align-items: flex-start;
        text-align: left;
    }
}
@media (min-width: 1200px){
    .slideText{
        align-items: flex-start;
        padding: 0;
        text-align: left;
    }
}
.slideText h1{
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
}
@media (min-width: 425px){
    .slideText h1{
        font-size: 3rem;
    }
}
@media (min-width: 576px){
    .slideText h1{
        font-size: 3.5rem;
    }
}
@media (min-width: 768px){
    .slideText h1{
        font-size: 3rem;
    }
}
@media (min-width: 992px){
    .slideText h1{
        font-size: 3.5rem;
    }
}
@media (min-width: 1200px){
    .slideText h1{
        font-size: 4.5rem;
    }
}
.slideText p{
    font-size: 1.45rem;
    margin-bottom: 2rem;
    color: #666;
}
@media (min-width: 576px){
    .slideText p{
        font-size: 1.55rem;;
    }
}
@media (min-width: 992px){
    .slideText p{
        font-size: 1.65rem;;
    }
}
.slideLink{
    border-radius: .4rem;
    padding: 1.2rem 2rem;
    background-color: var(--primaryColor);
    color: #FFF;
    transition: all 400ms ease;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.45rem;
}
@media (min-width: 992px){
    .slideLink{
        padding: 1.5rem 2.5rem;
        font-size: 1.6rem;
    }
}
.slideLink i{
    margin-right: 1rem;
}
.slideLink:hover,
.slideLink:focus{
    background-color: var(--textColor);
    color: #FFF;
}
.slideImageSide{
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (min-width: 1200px){
    .slideImageSide{
        max-width: 50%;
        justify-content: flex-end;
        align-items: flex-end;
    }
}
.slideImage{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5rem;
}
@media (min-width: 425px){
    .slideImage{
        padding: 0 8rem;
    }
}
@media (min-width: 576px){
    .slideImage{
        padding: 0 12rem;
    }
}
@media (min-width: 768px){
    .slideImage{
        padding: 0 0 0 2rem;
        margin-bottom: -18rem;
    }
}
@media (min-width: 1200px){
    .slideImage{
        padding: 8rem 0 0 10rem;
        margin-bottom: -2rem;
    }
}
@media (min-width: 1400px){
    .slideImage{
        padding: 2rem 0 0 20rem;
        margin-bottom: 0;
    }
}
@media (min-width: 1600px){
    .slideImage{
        padding: 5rem 0 0 15rem;
        margin-bottom: -8rem;
    }
}
.slideImage img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shape1{
    position: absolute;
    top: 0;
    left: 0;
    width: 30rem;
    height: 30rem;
    background-image: radial-gradient(var(--primaryColor) 1px, transparent 1px);
    background-size: 15px 15px;
    border-radius: 50%;
    z-index: -1;
    opacity: .6;
}
@media (min-width: 425px){
    .shape1{
        left: auto;
    }
}
@media (min-width: 768px){
    .shape1{
        top: -30%;
    }
}
@media (min-width: 1200px){
    .shape1{
        top: 15%;
        left: 20%;
    }
}
.shape2{
    position: absolute;
    top: 50%;
    right: -10%;
    width: 30rem;
    height: 30rem;
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 15px 15px;
    border-radius: 50%;
    z-index: -1;
    opacity: .3;
    display: none;
}
@media (min-width: 1200px){
    .shape2{
        display: block;
    }
}
.circle1{
    position: absolute;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    border: 4rem solid var(--primaryColor);
    top: 25%;
    left: 0;
    z-index: -1;
    opacity: .8;
}
@media (min-width: 1200px){
    .circle1{
        top: 35%;
        left: 20%;
    }
}
.circle2{
    position: absolute;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    top: 0;
    right: 10%;
    background-color: var(--secondaryColor);
    z-index: -1;
}
@media (min-width: 576px){
    .circle2{
        width: 20rem;
        height: 20rem;
    }
}
@media (min-width: 1200px){
    .circle2{
        top: 20%;
        width: 15rem;
        height: 15rem;
    }
}
.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide-active h1 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
    animation-delay: .6s;
}
.swiper-slide-active p {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
    animation-delay: 1.2s;
}
.swiper-slide-active .slideLink {
    -webkit-animation-duration: 1s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
    animation-delay: 1.8s;
}
.boxesSide{
    background: rgb(255,128,0);
    background: linear-gradient(45deg, rgba(255,128,0,1) 0%, rgba(255,106,0,1) 100%);
    padding: 2rem 0;
}
.boxes{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .2);
}
@media (min-width: 768px){
    .boxes{
        margin-bottom: 2rem;
    }
}
@media (min-width: 992px){
    .boxes{
        margin-bottom: 0;
    }
    .brnone{
        border-right: none;
    }
}
.boxesIcon{
    max-width: 6rem;
    width: 100%;
    height: 6rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.3rem;
    border: 1px solid rgba(255, 255, 255, .2);
}
@media (min-width: 1600px){
    .boxesIcon{
        max-width: 7rem;
        height: 7rem;
        padding: 1.5rem;
    }
}
.boxesIcon img{
    height: 100%;
    object-fit: contain;
}
.boxes p{
    font-size: 1.55rem;
    color: #FFF;
    padding-left: 1.5rem;
}
@media (min-width: 1200px){
    .boxes p{
        font-size: 1.65rem;
    }
}
@media (min-width: 1600px){
    .boxes p{
        font-size: 1.75rem;
    }
}
.about{
    overflow: hidden;
}
.aboutImageSide{
    position: sticky;
    z-index: 1;
    top: 1rem;
}
.aboutImageSide:before{
    content: "";
    position: absolute;
    background-image: radial-gradient(var(--primaryColor) 1px, transparent 1px);
    background-size: 15px 15px;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    top: -15%;
    left: -15%;
    z-index: -1;
    opacity: .5;
}
.aboutImageSide:after{
    content: "";
    position: absolute;
    background-image: radial-gradient(var(--primaryColor) 1px, transparent 1px);
    background-size: 15px 15px;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    bottom: -15%;
    right: 0;
    z-index: -1;
    opacity: .5;
}
.aboutImage{
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}
@media (min-width: 576px){
    .aboutImage{
        max-width: 70%;
    }
}
.aboutVideo{
    box-shadow: 0px 40px 70px 0px rgba(26.999999999999993, 20, 78, 0.1);
    padding: 2rem;
    background-color: #FFF;
    border-radius: 1rem;
    position: absolute;
    top: -6rem;
    right: 0;
    max-width: 30rem;
    width: 100%;
    transition: all 400ms ease;
}
@media (min-width: 576px){
    .aboutVideo{
        top: -4rem;
    }
}
@media (min-width: 768px){
    .aboutVideo{
        top: 3rem;
    }
}
@media (min-width: 992px){
    .aboutVideo{
        top: 3rem;
        right: 2rem;
    }
}
@media (min-width: 1200px){
    .aboutVideo{
        top: -6rem;
        right: 0;
    }
}
.aboutVideoImage{
    border-radius: 1rem;
    width: 100%;
    overflow: hidden;
    height: 15rem;
    position: relative;
}
.aboutVideoImage img{
    height: 100%;
    object-fit: cover;
    transition: all 400ms ease;
}
.aboutVideo:hover .aboutVideoImage img{
    filter: brightness(80%);
}
.aboutVideo .content{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 0;
}
.aboutVideoLine1{
    border-radius: 2rem;
    background-color: #EAEAEA;
    width: 90%;
    height: .8rem;
    margin-bottom: 1.5rem;
}
.aboutVideoLine2{
    border-radius: 2rem;
    background-color: #EAEAEA;
    width: 40%;
    height: .8rem;
}
.playButtonSide{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}
.playButton{
    width: 6rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #FFF;
    color: var(--primaryColor);
    font-size: 2.5rem;
    cursor: pointer;
    transition: all 400ms ease;
    position: relative;
    z-index: 1;
}
.playButton:hover{
    background-color: var(--primaryColor);
    color: #FFF;
}
.playButton:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .4);
    border-radius: 50%;
}
.aboutVideo:hover .playButton:before {
    animation: pulse 1.2s ease infinite;
    background-color: rgba(255, 145, 0, .4);
}
.aboutVideo:hover .playButton{
    background-color: var(--primaryColor);
    color: #FFF;
}
@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1);
    }
}
.aboutExperience{
    position: absolute;
    background-color: #FFF;
    border-radius: 0.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0px 40px 70px 0px rgba(26.999999999999993, 20, 78, 0.1);
    max-width: 25rem;
    width: 100%;
    bottom: 5rem;
    right: 15%;
    animation: leftRight 5s linear infinite;
}
@media (min-width: 1200px){
    .aboutExperience{
        bottom: 1rem;
    }
}
@media (min-width: 1400px){
    .aboutExperience{
        bottom: 5rem;
    }
}
.experienceIcon{
    max-width: 8rem;
    width: 100%;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.aboutExperience .content{
    max-width: calc(100% - 8rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 1rem;
}
.aboutExperience .content span{
    font-size: 2rem;
    font-weight: 700;
    color: var(--primaryColor);
    display: block;
    line-height: 1;
    margin-bottom: .3rem;
}
.aboutExperience .content p{
    font-size: 1.65rem;
    font-weight: 500;
    opacity: .8;
}
@keyframes leftRight{
    0%{
        right: 10%;
    }
    50%{
        right: 0;
    }
    100%{
        right: 10%;
    }
}
.aboutText{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-top: 2rem;
}
@media (min-width: 992px){
    .aboutText{
        margin-top: 0;
        padding-left: 2rem;
    }
}
@media (min-width: 1200px){
    .aboutText{
        padding-left: 7rem;
    }
}
.aboutTextHead{
    margin-bottom: 2rem;
    position: relative;
}
.aboutTextHead:before{
    content: "";
    position: absolute;
    bottom: -.8rem;
    left: 0;
    height: .3rem;
    background-color: #000;
    width: 8rem;
    border-radius: 2rem;
}
.aboutTextHead:after{
    content: "";
    position: absolute;
    bottom: -.8rem;
    left: 9rem;
    height: .3rem;
    background-color: var(--primaryColor);
    width: 4rem;
    border-radius: 2rem;
}
.aboutTextHead span{
    display: block;
    font-size: 1.65rem;
    color: var(--primaryColor);
    font-weight: 600;
    margin-bottom: 1rem;
}
.aboutTextHead h2{
    font-size: 2.5rem;
    font-weight: 800;
}
@media (min-width: 425px){
    .aboutTextHead h2{
        font-size: 3rem;
    }
}
@media (min-width: 576px){
    .aboutTextHead h2{
        font-size: 3.5rem;
    }
}
@media (min-width: 1200px){
    .aboutTextHead h2{
        font-size: 4rem;
    }
}
.aboutTextContent{
    margin-bottom: 1rem;
}
.aboutTextContent p{
    font-size: 1.6rem;
    opacity: .8;
    margin-bottom: 1rem;
}
.aboutLink{
    border-radius: .4rem;
    background-color: var(--primaryColor);
    color: #FFF;
    padding: 1.2rem 2.4rem;
    font-size: 1.6rem;
    transition: background 400ms ease;
}
.aboutLink i{
    transition: transform 400ms ease;
}
.aboutLink:hover i{
    transform: translateX(.8rem);
}
.aboutLink:hover{
    color: #FFF;
    background-color: var(--textColor);
}
.services{
    background-color: #F0F4F5;
}
.servicesHead{
    text-align: center;
    max-width: 100%;
    width: 100%;
    margin: 0 auto 4rem auto;
}
@media (min-width: 768px){
    .servicesHead{
        max-width: 60rem;
    }
}
@media (min-width: 992px){
    .servicesHead{
        max-width: 70rem;
    }
}
.servicesHead h2{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
@media (min-width: 375px){
    .servicesHead h2{
        font-size: 3rem;
    }
}
@media (min-width: 576px){
    .servicesHead h2{
        font-size: 3.5rem;
    }
}
@media (min-width: 768px){
    .servicesHead h2{
        font-size: 4rem;
    }
}
@media (min-width: 1200px){
    .servicesHead h2{
        font-size: 4.5rem;
    }
}
.servicesHead p{
    font-size: 1.45rem;
    opacity: .8;
}
@media (min-width: 375px){
    .servicesHead p{
        font-size: 1.55rem;
    }
}
@media (min-width: 576px){
    .servicesHead p{
        font-size: 1.65rem;
    }
}
.servicesBox{
    background-color: #FFF;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 400ms ease;
    margin-bottom: 2rem;
}
.servicesBox:hover{
    transform: translateY(-1.5rem);
}
.servicesBoxImage{
    overflow: hidden;
}
.servicesBoxImage img{
    object-fit: cover;
}
.servicesBox .content{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    flex: 1;
}
.servicesBox .content h3{
    color: var(--textColor);
}
.servicesBox .content h3 a{
    color: inherit;
    font-size: 1.9rem;
    font-weight: 600;
    transition: color 400ms ease;
}
.servicesBox .content h3:hover a{
    color: var(--primaryColor);
}
.serviceContentText{
    padding: 1rem 0;
    border-bottom: 1px dashed #EAEAEA;
    margin-bottom: 1rem;
}
.serviceContentText p{
    font-size: 1.5rem;
    margin: 0;
    flex: 1;
}
.shadowBox{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.fillColor{
    color: var(--primaryColor);
}
.ratingSide{
    margin: 1rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.serviceLink{
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: inline-block;
    transition: color 400ms ease;
    color: #505050;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}
.serviceLink i{
    transition: transform 400ms ease;
    margin-left: .5rem;
}
.serviceLink:hover{
    color: var(--primaryColor);
}
.serviceLink:hover i{
    transform: translateX(.8rem);
}
.servicesButtons{
    margin-top: 2rem;
    text-align: center;
}
.servicesButtons a{
    border-radius: .4rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primaryColor);
    color: #FFF;
    font-size: 1.6rem;
    padding: 1.2rem 2.4rem;
    transition: background 400ms ease;
}
.servicesButtons a:hover{
    color: #FFF;
    background-color: var(--textColor);
}
.comments{
    overflow: hidden;
}
.commentsBox{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
@media (min-width: 576px){
    .commentsBox{
        max-width: 80%;
        margin: 0 auto;
    }
}
@media (min-width: 768px){
    .commentsBox{
        max-width: 75%;
        margin: 0 auto;
    }
}
@media (min-width: 992px){
    .commentsBox{
        max-width: 100%;
        margin: 0;
        align-items: flex-start;
        text-align: left;
    }
}
.commentsBox span{
    display: block;
    font-size: 1.65rem;
    color: var(--primaryColor);
    font-weight: 600;
    margin-bottom: 1rem;
}
.commentsBox h2{
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
@media (min-width: 375px){
    .commentsBox h2{
        font-size: 3rem;
    }
}
@media (min-width: 576px){
    .commentsBox h2{
        font-size: 3.5rem;
    }
}
@media (min-width: 768px){
    .commentsBox h2{
        font-size: 4rem;
    }
}
@media (min-width: 1200px){
    .commentsBox h2{
        font-size: 4.5rem;
    }
}
.commentsBox p{
    font-size: 1.45rem;
    opacity: .8;
}
@media (min-width: 375px){
    .commentsBox p{
        font-size: 1.55rem;
    }
}
@media (min-width: 576px){
    .commentsBox p{
        font-size: 1.65rem;
    }
}
.commentLink{
    margin-top: 2rem;
    border-radius: .4rem;
    background-color: var(--primaryColor);
    color: #FFF;
    transition: background 400ms ease;
    padding: 1.2rem 2.4rem;
    display: inline-block;
}
.commentLink:hover{
    color: #FFF;
    background-color: var(--textColor);
}
.commentBox{
    background-color: #FFF;
    border-radius: 1rem;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 2rem;
    position: relative;
    box-shadow: 0px 0px 20px 0px rgba(26,46,85,0.05);
    overflow: hidden;
}
.commentBox:before{
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    background-image: radial-gradient(var(--primaryColor) 1px, transparent 1px);
    background-size: 15px 15px;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    opacity: .4;
}
.commentBoxAvatar{
    position: relative;
    margin-bottom: 2rem;
}
.commentIcon{
    position: absolute;
    bottom: -0.8rem;
    right: -0.8rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--primaryColor);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    border-radius: 50%;
    font-size: 1.4rem;
    border: 0.3rem solid #FFF;
}
.avatar{
    max-width: 7rem;
    width: 100%;
    height: 7rem;
    border-radius: .5rem .5rem 2rem .5rem;
    overflow: hidden;
}
.avatar img{
    height: 100%;
    object-fit: cover;
}
.commentContent{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}
.commentBox p{
    margin-bottom: 1rem;
    font-size: 1.5rem;
    opacity: .8;
    flex: 1;
}
.commentBox h3{
    font-size: 1.6rem;
    margin-bottom: 1rem;
    font-weight: 700;
}
@media (min-width: 1500px){
    .commentBox h3{
        font-size: 1.7rem;
    }
}
@media (min-width: 1600px){
    .commentBox h3{
        font-size: 1.8rem;
    }
}
.commentBox span{
    font-size: 1.6rem;
    opacity: .6;
    font-style: italic;
    font-weight: 500;
}
@media (min-width: 1200px){
    .owlComment .owl-stage-outer{
        display: inline-block;
    }
}
.owlComment .owl-stage-outer{
    padding-top: 3rem;
    margin-top: 0;
    padding-left: .5rem;
    padding-bottom: 5rem;
    margin-right: -3rem;
}
@media (min-width: 992px){
    .owlComment .owl-stage-outer{
        margin-top: -6rem;
        padding-left: 1rem;
    }
}
.owlComment .owl-stage,
.owlComment .owl-stage .owl-item {
    display: flex;
}
.homeCon{
    border-radius: 0.5rem;
    padding: 2rem;
    background-color: var(--primaryColor);
    background-image: url(../images/bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rem;
}
@media (min-width: 768px){
    .homeCon{
        flex-direction: initial;
        justify-content: center;
        align-items: center;
        padding: 3rem 2rem;
    }
}
@media (min-width: 992px){
    .homeCon{
        max-width: 80rem;
        padding: 2rem;
    }
}
.homeConMiddle{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}
@media (min-width: 768px){
    .homeConMiddle{
        margin: 0 5rem;
    }
}
.homeConMiddle span{
    background-color: #FFF;
    color: var(--primaryColor);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 800;
    position: relative;
    z-index: 0;
}
@media (min-width: 992px){
    .homeConMiddle span{
        font-size: 1.8rem;
        width: 8rem;
        height: 8rem;
    }
}
.homeConMiddle span:before{
    content: "";
    position: absolute;
    top: -.5rem;
    left: -.5rem;
    bottom: -.5rem;
    right: -.5rem;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 50%;
    z-index: -1 ;
}
.homeConLeft{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
@media (min-width: 768px){
    .homeConLeft{
        align-items: flex-end;
        text-align: right;
    }
}
.homeConLeft p{
    font-size: 1.6rem;
    color: #FFF;
    margin-bottom: .5rem;
    opacity: .9;
}
@media (min-width: 768px){
    .homeConLeft p{
        font-size: 1.8rem;
    }
}
.homeConRight{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
@media (min-width: 768px){
    .homeConRight{
        text-align: left;
        align-items: flex-start;
    }
}
.homeConRight p{
    font-size: 1.6rem;
    color: #FFF;
    margin-bottom: .5rem;
    opacity: .9;
}
@media (min-width: 768px){
    .homeConRight p{
        font-size: 1.8rem;
    }
}
.homeConLeft a,
.homeConRight a{
    font-size: 1.6rem;
    font-weight: 600;
    color: #FFF;
}
@media (min-width: 768px){
    .homeConLeft a,
    .homeConRight a{
        font-size: 1.8rem;
    }
}
@media (min-width: 992px){
    .homeConLeft a,
    .homeConRight a{
        font-size: 2rem;
    }
}
.team{
    position: relative;
    overflow: hidden;
}
@media (min-width: 992px){
    .team:before{
        content: "";
        position: absolute;
        left: -20%;
        top: 15%;
        width: 40rem;
        height: 40rem;
        background-color: var(--primaryColor);
        opacity: .1;
        border-radius: 50%;
        z-index: -1;
    }
    .team:after{
        content: "";
        position: absolute;
        right: -15%;
        bottom: 0;
        width: 40rem;
        height: 40rem;
        background-color: transparent;
        border: 2rem solid var(--primaryColor);
        opacity: .1;
        border-radius: 50%;
        z-index: -1;
    }
}
@media (min-width: 1200px){
    .team:before{
        top: 0;
        left: -15%;
    }
    .team:after{
        bottom: 0;
        right: -10%;
    }
}
.teamHead{
    margin-bottom: 4rem;
    text-align: center;
}
.teamHead span{
    display: block;
    font-size: 1.65rem;
    color: var(--primaryColor);
    font-weight: 600;
    margin-bottom: 1rem;
}
.teamHead h2{
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
@media (min-width: 375px){
    .teamHead h2{
        font-size: 3rem;
    }
}
@media (min-width: 576px){
    .teamHead h2{
        font-size: 3.5rem;
    }
}
@media (min-width: 768px){
    .teamHead h2{
        font-size: 4rem;
    }
}
@media (min-width: 1200px){
    .teamHead h2{
        font-size: 4.5rem;
    }
}
.teamBox{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    box-shadow: 0px 0px 20px 0px rgba(26,46,85,0.05);
    border-radius: 1rem;
    background-color: #FFF;
}
.teamBoxImage{
    width: 100%;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
    position: relative;
}
.teamBoxImage img{
    transition: filter 400ms ease;
}
.teamBox:hover .teamBoxImage img{
    filter: brightness(90%);
}
.teamBoxImage a{
    position: relative;
}
.teamBox .content{
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2rem;
    text-align: center;
    align-items: center;
}
.teamBox .content h3{
    margin-bottom: .6rem;
    flex: 1;
}
.teamBox .content h3 a{
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--textColor);
    transition: color 400ms ease;
}
@media (min-width: 992px){
    .teamBox .content h3 a{
        font-size: 2rem;
    }
}
.teamBox .content p{
    font-size: 1.6rem;
    opacity: .8;
}
.teamBox:hover .content h3 a{
    color: var(--primaryColor);
}
.partners{
    background-color: #FBFBFB;
}
.parnersLogoSide{
    margin-top: 2rem;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    border-top: .1rem solid #f0f0f0;
    border-left: .1rem solid #f0f0f0;
}
@media (min-width: 1200px){
    .parnersLogoSide{
        margin-top: 0;
        max-width: 90%;
        margin: auto 0 0 auto;
    }
}
@media (min-width: 1400px){
    .parnersLogoSide{
        max-width: 90%;
    }
}
@media (min-width: 1500px){
    .parnersLogoSide{
        max-width: 85%;
    }
}
.pLogo{
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-style: solid;
    border-width: 0 .1rem .1rem 0;
    border-color: #F0F0F0;
    transition: background 400ms ease;
}
@media (min-width: 576px){
    .pLogo{
        padding: 2rem;
    }
}
@media (min-width: 768px){
    .pLogo{
        padding: 3.5rem;
    }
}
@media (min-width: 992px){
    .pLogo{
        padding: 2.5rem;
    }
}
@media (min-width: 1200px){
    .pLogo{
        padding: 3rem;
    }
}
@media (min-width: 1400px){
    .pLogo{
        padding: 3.5rem;
    }
}
.pLogo:hover{
    background-color: #FFF;
}
.blogBox{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.blogBoxImage{
    border-radius: 1rem;
    overflow: hidden;
}
.blogBoxImage img{
    transition: transform 400ms ease;
}
.blogBox:hover .blogBoxImage img{
    transform: scale(1.1);
}
.blogDate{
    background-color: var(--primaryColor);
    border-radius: .2rem;
    padding: .5rem 1rem;
    color: #FFF;
    font-size: 1.45rem;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 2rem;
}
.blogBox .content{
    padding: 2rem 4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    flex: 1;
}
.blogBox .content h3{
    margin-bottom: 1rem;
}
.blogBox .content h3 a{
    font-size: 2rem;
    font-weight: 600;
    transition: color 400ms ease;
    color: var(--textColor);
}
.blogBox .content p{
    margin-bottom: 1rem;
    opacity: .8;
    flex: 1;
}
.blogLink{
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--primaryColor);
    transition: color 400ms ease;
}
.blogLink:hover{
    color: var(--secondaryColor);
}
.blogBox:hover .content h3 a{
    color: var(--primaryColor);
}
.footer{
    background-color: #F0F4F5;
    padding: 8rem 0;
}
.fBox{
    margin-bottom: 2rem;
}
.fBox h4{
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}
.fBox h4:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1rem;
    height: .2rem;
    width: 3rem;
    border-radius: 5rem;
    background-color: var(--primaryColor);
}
.fBox ul li{
    padding: .3rem 0;
}
.fBox ul li a{
    font-size: 1.6rem;
    color: var(--textColor);
    transition: color 400ms ease;
}
.fBox ul li:hover a{
    color: var(--secondaryColor);
}
.footerContact{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media (min-width: 992px){
    .footerContact{
        align-items: flex-end;
    }
}
.footerSocialMedia{
    margin-bottom: 2rem;
}
.footerSocialMedia a{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--primaryColor);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 1.6rem;
    transition: all 400ms ease;
}
.footerSocialMedia a:hover{
    color: #FFF;
    background-color: var(--textColor);
}
.footerContactItem{
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}
@media (min-width: 992px){
    .footerContactItem{
        align-items: flex-end;
        text-align: right;
        padding-left: 5rem;
    }
}
.footerContactItem span{
    font-size: 1.6rem;
    color: var(--textColor);
    opacity: .8;
    margin-bottom: 1rem;
    display: block;
}
.footerContactItem a{
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--textColor);
    transition: color 400ms ease;
}
.footerContactItem a:hover{
    color: var(--primaryColor);
}
.footerContactItem a:not(:last-child){
    margin-bottom: 1rem;
}
.pageMaps{
    padding: 2rem 0;
    background-color: var(--primaryColor);
}
.pageMaps ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    column-gap: 2.5rem;
    flex-wrap: wrap;
}
.pageMaps li{
    position: relative;
}
.pageMaps li:not(:last-child):after{
    content: "\EA6E";
    font-family: remixicon;
    position: absolute;
    right: -2rem;
    top: 0;
    color: #FFF;
}
.pageMaps li,
.pageMaps a{
    font-size: 1.5rem;
    color: #FFF;
}
@media (min-width: 768px){
    .pageMaps li,
    .pageMaps a{
        font-size: 1.6rem;
    }
}
.pageMaps li.active{
    font-weight: 600;
}
.innerPageHeader{
    margin-bottom: 2rem;
}
.innerPageHeader h1{
    font-size: clamp(2.8rem, 2.1818rem + 3.0909vw, 4.5rem);
    font-weight: 700;
}
.galeriImage{
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    overflow: hidden;
}
.galeriImage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease, filter 400ms ease;
}
.galeriImage:hover img{
    transform: scale(1.09, 1.09);
    filter: brightness(80%);
}
.videoBox{
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.videoBoxImage{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.videoBoxImage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease, filter 400ms ease;
}
.videoBox:hover .videoBoxImage img{
    transform: scale(1.09, 1.09);
    filter: brightness(80%);
} 
.videoBox .content{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}
.videoBox .content h3{
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    flex: 1;
}
.videoBox .content a{
    font-size: 1.4rem;
    color: var(--textColor);
    font-weight: 500;
    transition: color 400ms ease;
}
.videoBox .content a:hover{
    color: var(--primaryColor);
}
.aboutInlineText{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
@media (min-width: 992px){
    .aboutInlineText{
        padding-left: 3rem;
    }
}
@media (min-width: 1500px){
    .aboutInlineText{
        padding-left: 5rem;
    }
}
.aboutInlineTextHead{
    margin-bottom: 2rem;
}
.aboutInlineTextHead h1{
    font-size: clamp(2.8rem, 2.1818rem + 3.0909vw, 4.5rem);
    font-weight: 700;
}
.aboutInlineText .content p{
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    opacity: .8;
}
.aboutInlineImage{
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
}
@media (min-width: 768px){
    .aboutInlineImage{
        max-width: 25rem;
    }
}
@media (min-width: 992px){
    .aboutInlineImage{
        max-width: 100%;
    }
}
.aboutInlineImage img{
    width: 100%;
    object-fit: cover;
}
.tagSide{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}
@media (min-width: 992px){
    .tagSide{
        margin-bottom: 0;
    }
}
.tag{
    font-size: 1.2rem;
    border: 1px solid #EAEAEA;
    padding: 0.6rem 1rem;
    border-radius: 0.3rem;
    font-weight: 400;
    color: var(--textColor);
    transition: all 400ms ease;
}
.tag:hover{
    color: #FFF;
    background-color: var(--primaryColor);
    border: 1px solid var(--primaryColor);
}
.aboutVideoSide{
    margin-bottom: 2rem;
}
.aboutVideoSide a{
    background-color: var(--primaryColor);
    color: #FFF;
    padding: 1rem 2rem;
    border-radius: .2rem;
    transition: all 400ms ease;
    display: inline-block;
}
.aboutVideoSide a:hover{
    background-color: var(--secondaryColor);
    color: #FFF;
}
.affixDiv{
    margin-bottom: 2rem;
}
@media (min-width: 992px){
    .affixDiv{
        position: sticky;
        top: 1rem;
    }
}
.others{
    max-width: 100%;
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #F9F9F9;
    padding: 2rem;
    border-radius: 1rem;
}
.others a{
    width: 100%;
    display: block;
    transition: all 400ms ease;
    font-size: 1.5rem;
    color: var(--textColor);
    padding: 1rem;
    border-radius: .4rem;
}
.others a:not(:last-child){
    margin-bottom: .2rem;
}
.others a:hover{
    color: #FFF;
    background-color: var(--primaryColor);
}
.others a.active,
.others a.active:hover,
.others a.active:focus{
    color: #FFF!important;
    background-color: var(--primaryColor)!important;
}
.partnerLogo{
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    border: 1px solid #EAEAEA;
    border-radius: 1rem;
    padding: 1rem;
}
.partnerLogo img{
    width: 60%;
    object-fit: contain;
    margin: 0 auto;
}
.contactBox{
    margin-bottom: 2rem;
}
.contactBox h2{
    font-size: 2rem;
    margin-bottom: 1rem;
}
@media (min-width: 576px){
    .contactBox h2{
        font-size: 2.5rem;
    }
}
.contactContentItem {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.contactContentIcon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.3rem;
    background: var(--primaryColor);
    color: #FFF;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 1.6rem;
}
.contactContentHead {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: calc(100% - 3.5rem);
    width: 100%;
    padding-left: 1rem;
}
.contactContentHead h3 {
    margin: 0;
    font-size: 1.8rem;
}
.contactContentList {
    padding: 1rem 0 2rem 4.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.contactContentList a {
    font-size: 1.5rem;
    transition: all .3s ease;
    color: #333;
}
.contactContentList a:not(:last-child){
    margin-bottom: .5rem;
}
.contactContentList a:hover{
    color: var(--secondaryColor);
}
.contactContentList:before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.6rem;
    bottom: 0;
    width: 0.2rem;
    background-color: var(--primaryColor);
}
.wpButton{
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--whatsappDark);
    color: #FFF;
    border-radius: .4rem;
    transition: all 400ms ease;
}
.wpButton i{
    margin-right: 1rem;
}
.wpButton:hover{
    color: #FFF;
    background-color: #075e54;
}
.contactIcon{
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: .4rem;
    transition: all 400ms ease;
    font-size: 1.6rem;
    color: #FFF;
    background-color: var(--primaryColor);
    transition: all 400ms ease;
}
.contactIcon:hover{
    color: #FFF;
    background-color: var(--secondaryColor);
}
.contactForm{
    background-color: #FFF;
    padding: 3rem;
}
@media (min-width: 992px){
    .contactForm{
        padding: 5rem;
    }
}
.contactForm h2{
    font-size: 2rem;
    margin-bottom: 1rem;
}
.contactForm p{
    font-size: 1.6rem;
    margin-bottom: 1rem;
    opacity: .8;
    font-style: italic;
}
.contactForm label{
    margin-bottom: 1rem;
}
.contactForm .form-control{
    background-color: #fbfbfb;
    padding: 1.5rem 1rem;
    transition: all 400ms ease;
}
.contactForm .form-control:hover,
.contactForm .form-control:focus{
    background-color: #f2f2f2!important;
}
.btnSubmit{
    border-radius: .4rem;
    padding: 1.5rem 3rem;
    color: #FFF;
    background-color: var(--primaryColor);
    font-size: 1.6rem;
    transition: all 400ms ease;
    border: none;
    outline: none;
}
.btnSubmit:hover{
    background-color: var(--secondaryColor);
    color: #FFF;
}
.paketBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    padding: 3rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 1200px){
    .paketBox{
        margin-bottom: 0;
    }
}
.paketIcon{
    width: 6rem;
    height: 6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primaryColor);
    padding: .8rem;
    border-radius: .5rem;
    margin-bottom: 2rem;
}
.paketIcon img{
    height: 100%;
    object-fit: contain;
}
.paketBoxHead{
    margin-bottom: 1rem;
}
.paketBoxHead h2{
    font-size: 2.5rem;
    font-weight: 700;
}
.paketDetail{
    width: 100%;
    display: flex;
    margin-bottom: 1rem;
    flex: 1;
}
.paketDetail ul{
    padding-left: 1.5rem;
    border-left: .3rem solid #EAEAEA;
}
.paketDetail ul li{
    position: relative;
    font-size: 1.5rem;
    color: #333;
    padding: .5rem 0;
}
.paketDetail ul li:before{
    content: "";
    position: absolute;
    left: -1.5rem;
    width: .8rem;
    top: 1.35rem;
    height: .3rem;
    background-color: #EAEAEA;
}
@media (min-width: 1200px){
    .PL5{
        padding-left: 5rem;
    }
}
@media (max-width: 1199px){
    .packet .reverse{
        flex-direction: column-reverse;
    }
    .packet .commentsBox{
        margin-bottom: 5rem;
    }
}
.paketDescription{
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 992px){
    .paketDescription{
        max-width: 80rem;
    }
}
.paketDescriptionHead{
    margin-bottom: 2rem;
    border-bottom: .1rem dashed #EAEAEA;
    padding-bottom: 1rem;
}
.paketDescriptionHead h1{
    font-size: 3rem;
    font-weight: 700;
}
.paketDescription .content p{
    font-size: 1.6rem;
    opacity: .8;
    margin-bottom: 1rem;
}
.mb2{
    margin-bottom: 2rem;
}
.homeVideo{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #f9f9f9;
    width: 100%;
}
.homeVideoImage{
    width: 10rem;
    height: 10rem;
    overflow: hidden;
}
@media (min-width: 992px){
    .homeVideoImage{
        width: 18rem;
        height: 14rem;
    }

}
.homeVideoImage img{
    height: 100%;
    object-fit: cover;
}
.homeVideo .content{
    max-width: calc(100% - 10rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    padding-left: 1rem;
}
@media (min-width: 992px){
    .homeVideo .content{
        max-width: calc(100% - 18rem);
        padding-left: 2rem;
    }
}
.homeVideo .content h3{
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: .5rem;
    flex: 1;
}
@media (min-width: 992px){
    .homeVideo .content h3{
        font-size: 1.8rem;
    }
}
.homeVideo .content a{
    font-size: 1.4rem;
    color: var(--primaryColor);
    transition: color 400ms ease;
}
.homeVideo .content a:hover{
    color: var(--secondaryColor);
}
.mb0{
    margin-bottom: 0;
}
.rowGap{
    row-gap: 2rem;
}
.mt2{
    margin-top: 2rem;
}
@media (min-width: 1200px){
    .mt2{
        margin-top: 0;
    }
}
.online{
    background-color: var(--primaryColor);
    border-radius: 1rem;
    padding: 3rem;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 992px){
    .online{
        max-width: 70%;
    }
}
.onlineHead{
    margin-bottom: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.onlineHead h2{
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFF;
    margin-bottom: .5rem;
}
@media (min-width: 768px){
    .onlineHead h2{
        font-size: 3rem;
    }
}
.onlineHead p{
    font-size: 1.6rem;
    color: #FFF;
}
.online label{
    color: #FFF;
}
.btnTalep{
    background-color: #FFF;
    border: none;
    border-radius: .3rem;
    padding: 1rem 2rem;
    color: var(--primaryColor);
    font-weight: 500;
    margin-top: 1rem;
    transition: all 400ms ease;
}
.btnTalep:hover{
    transform: translateY(.2rem);
    background-color: #FFF;
    color: var(--primaryColor);
}
.swal2-popup {
    font-size: 1.45rem!important;
}
.koclukForm{
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem;
}
@media (min-width: 992px){
    .koclukForm{
        max-width: 80rem;
        padding: 5rem;
    }
}
.koclukFormHead{
    margin-bottom: 1rem;
    border-bottom: 1px dashed #EAEAEA;
    padding-bottom: 1rem;
}
.koclukFormHead h1{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
@media (min-width: 992px){
    .koclukFormHead h1{
        font-size: 3rem;
    }
}
.koclukFormHead p{
    font-size: 1.6rem;
    font-style: italic;
    opacity: .8;
}
.koclukForm .form-control{
    border: 1px solid #EAEAEA;
    transition: border 400ms ease;
}
.koclukForm .form-control:hover,
.koclukForm .form-control:focus{
    border: 1px solid var(--primaryColor);
}
.btnSubmitForm{
    padding: 1rem 2rem;
    background-color: var(--primaryColor);
    border-radius: .3rem;
    color: #FFF;
    border: none;
    margin-top: 1rem;
    transition: all 400ms ease;
}
.btnSubmitForm:hover{
    background-color: var(--secondaryColor);
    color: #FFF;
}
.mobileMenuList ul{
    padding-bottom: 1rem;
}
.mobileMenuList ul li{
    padding: 1rem 0;
    transition: all 400ms ease;
}
.mobileMenuList ul li a{
    font-size: 1.5rem;
    color: #333;
    transition: all 400ms ease;
}
.mobileMenuList ul li:not(:last-child){
    border-bottom: .1rem solid #f3f3f3;
}
.mobileMenuList ul li:hover{
    background-color: var(--primaryColor);
    border-bottom: 1px solid var(--primaryColor);
    padding-left: 1rem;
}
.mobileMenuList ul li:hover a{
    color: #FFF;
}
.mobileMenu{
    display: none;
}
@font-face {
    font-family: pill;
    src: url(../fonts/magnolia_sky.ttf);
}
.pill{
    font-family: pill;
    margin-top: 2rem;
    font-size: 2rem;
    color: #333;
    transition: all 400ms ease;
}
.pill:hover{
    color: var(--primaryColor);
}

/*PANEL CSS*/
.sideMenu{
    position: fixed;
    top: 0;
    left: -100%;
    width: 28rem;
    background-color: #f1f1f1;
    height: 100%;
    z-index: 100;
    transition: all 400ms ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
}
@media (min-width: 1200px){
    .sideMenu{
        left: 0;
    }
}
.left0{
    left: 0!important;
}
.sideMenuHead{
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2rem;
}
.sideMenuHead .avatar{
    width: 4.5rem;
    height: 4.5rem;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}
.sideMenuHead .avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sideMenuHead .content{
    display: flex;
    width: calc(100% - 4.5rem);
    padding-left: 1rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.sideMenuHead .content h3{
    font-size: 1.6rem;
    margin: 0;
}
.sideMenuHead .content p{
    font-size: 1.25rem;
    margin: 0;
}
.sideMenuContentList{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sideMenuContentListTitle{
    margin-bottom: 1rem;
}
.sideMenuContentListTitle h4{
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0;
}
.sideMenuContentList ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sideMenuContentList ul li{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: .5rem 1rem;
    background-color: #FFF;
    border-radius: .3rem;
    cursor: pointer;
}
.sideMenuContentList ul li:hover{
    background-color: var(--primaryColor);
}
.sideMenuContentList ul li:hover a{
    color: #FFF;
}
.sideMenuContentList ul li:hover .sideMenuIcon{
    background-color: #FFF;
    color: var(--primaryColor);
}
.sideMenuContentList ul li:not(:last-child){
    margin-bottom: 1rem;
}
.sideMenuContentList ul li a{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.4rem;
    color: #333;
}
@media (min-width: 768px){
    .sideMenuContentList ul li a{
        font-size: 1.5rem;
    }
}
.sideMenuIcon{
    background-color: var(--primaryColor);
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    border-radius: .3rem;
    margin-right: 1rem;
}
.wrapper{
    padding: 2rem;
    position: relative;
    background-color: #f4f4f4;
    min-height: 100vh;
}
@media (min-width: 1200px){
    .wrapper{
        padding: 3rem 8rem 3rem 35rem;
    }
}
@media (min-width: 1600px){
    .wrapper{
        padding: 5rem 13rem 5rem 40rem;
    }
}
.pageBreadCrumb{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.pageBreadCrumb li{
    font-size: 1.5rem;
    color: #333;
    transition: color 400ms ease;
    position: relative;
}
.pageBreadCrumb li:not(:last-child):after{
    content: "\EA6E";
    font-family: "remixicon";
    position: absolute;
    right: -2rem;
    font-size: 1.3rem;
    color: #333;
    top: .1rem;
}
.pageBreadCrumb li a{
    font-size: 1.5rem;
    color: #333;
    transition: color 400ms ease;
}
.pageBreadCrumb li.active{
    font-weight: 500;
    color: var(--primaryColor);
}
.mainSectionHead{
    margin-bottom: 2rem;
}
.mainSectionHead h2{
    font-size: clamp(2rem, 1.8182rem + 0.9091vw, 2.5rem);
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    color: #333;
}
.addButton{
    border-radius: .3rem;
    background-color: #FFF;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    color: #333;
}
.addButton:hover{
    background-color: var(--primaryColor);
    color: #FFF;
}
.postForm{
    background-color: #FFF;
    border-radius: .5rem;
    padding: 2rem;
}
@media (min-width: 768px){
    .postForm{
        padding: 3rem;
    }
}
.postForm .form-group{
    position: relative;
}
.postForm .form-group label{
    font-size: 1.5rem;
    font-weight: 600;
}
.postForm .form-control{
    background-color: #f1f1f1;
    position: relative;
    transition: all 400ms ease;
    font-size: 1.5rem;
}
.postForm .form-control:hover,
.postForm .form-control:focus{
    background-color: #dddddd;
}
.formSubmitButton{
    border-radius: .5rem;
    padding: 1rem 2rem;
    background-color: var(--primaryColor);
    color: #FFF;
    border: none;
    margin-top: 1rem; 
    transition: all 400ms ease;
    font-size: 1.4rem;
}
@media (min-width: 768px){
    .formSubmitButton{
        font-size: 1.5rem;
    }
}
.formSubmitButton:hover{
    background-color: var(--secondaryColor);
    color: #FFF;
}
.mainSectionButtons{
    margin-bottom: 2rem;
}
.tableFormat{
    width: 100%;
    display: flex;
    box-shadow: rgba(149, 157, 165, 0.13) 0px 8px 24px;
    padding: 2rem;
    border: 1px solid #f6f6f6;
    border-radius: .5rem;
    transition: all 400ms ease;
    flex-direction: column;
}
@media (min-width: 992px){
    .tableFormat{
        flex-direction: row;
    }
}
.tableFormat:hover{
    box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px;
}
.tableFormat:not(:last-child){
    margin-bottom: 2rem;
}
.tableFormat li{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
    justify-content: flex-start;
    margin-bottom: 1rem;
}
.tableFormat li:not(:last-child){
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 1rem;
}
@media (min-width: 992px){
    .tableFormat li{
        width: 20%;
        margin-bottom: 0;
    }
    .tableFormat li:not(:last-child){
        border-bottom: none;
        padding-bottom: 0;
    }
}
.tableFormat li a,
.tableFormat li p{
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0;
    flex: 1;
}
.tableFormat li a:hover{
    color: var(--primaryColor);
}
.tableFormatTitle{
    font-size: 1.5rem;
    font-weight: 500;
    display: block;
    margin-bottom: .8rem;
}
.capitalize{
    text-transform: capitalize;
}
.tableBadge{
    border-radius: .3rem;
    padding: .2rem 2rem;
    font-size: 1.4rem;
}
.badgeMF{
    background-color: #10439F;
    color: #FFF;
}
.badgeTM{
    background-color: #874CCC;
    color: #FFF;
}
.badgeSOS{
    background-color: #C65BCF;
    color: #FFF;
}
.badgeLAN{
    background-color: #F27BBD;
    color: #FFF;
}
.tableFilterLink{
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: .3rem;
    font-size: 1.4rem;
    border: none;
    background-color: #f1f1f1;
    cursor: pointer;
}
.linkType1:hover{
    background-color: #41B06E;
    color: #FFF!important;
}
.linkType2:hover{
    background-color: #FFB534;
    color: #FFF!important;
}
.linkType3:hover{
    background-color: #0766AD;
    color: #FFF!important;
}
.linkType4:hover{
    background-color: #FF204E;
    color: #FFF!important;
}
.tooltip{
    font-size: 1.2rem;
}
.postForm{
    margin-bottom: 2rem;
}
.postForm .alert{
    font-size: 1.4rem;
    margin: 0;
}
.postForm p{
    margin-bottom: 2rem;
    color: #333;
    font-size: 1.5rem;
}
.postForm p span{
    font-weight: 600;
}
.lessonPost{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}
@media (min-width: 576px){
    .lessonPost{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px){
    .lessonPost{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1200px){
    .lessonPost{
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1400px){
    .lessonPost{
        grid-template-columns: repeat(5, 1fr);
    }
}
.checkForm{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #f1f1f1;
    border-radius: .3rem;
    padding: .5rem 1rem;
    transition: all 400ms ease;
    cursor: pointer;
}
.checkForm:hover{
    background-color: #f1f1f1;
}
.checkForm label{
    font-weight: 500;
    margin: 0;
    padding-left: .5rem;
    font-size: 1.5rem;
    cursor: pointer;
}
.lessonPostHead{
    font-size: 1.5rem;
    font-weight: 600;
}
.sideMenuOpen{
    font-size: 1.4rem;
    border: none;
    border-radius: .3rem;
    background-color: #FFF;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    display: inline-block;
}
@media (min-width: 1200px){
    .sideMenuOpen{
        display: none;
    }
}
.sideMenuOpen:hover{
    background-color: var(--primaryColor);
    color: #FFF;
}
.required{
    color: var(--primaryColor);
    font-size: 1rem;
}
.adminHomeCard{
    border-radius: .5rem;
    background-color: #FFF;
    padding: 2rem;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.adminHomeCard h2{
    font-size: 1.6rem;
    font-weight: 500;
    text-transform: uppercase;
    opacity: .6;
    flex: 1;
}
.adminHomeCard p{
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
}
.adminHomeCardLink{
    position: absolute;
    top: -1rem;
    right: -1rem;
    background-color: #FFF;
    color: #333;
    border-radius: 50%;
    border: .5rem solid #f4f4f4;
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.adminHomeCardLink:hover{
    background-color: var(--primaryColor);
    color: #FFF;
}
.postFormFilter{
    margin-bottom: 2rem;
}
.postFormFilter h4{
    font-size: 2rem;
    margin-bottom: 1rem;
}
.postFormFilter .form-control{
    margin-bottom: 1rem;
}
@media (min-width: 576px){
    .postFormFilter .form-control{
        margin-bottom: 0;
    }
}
#chart1 .apexcharts-toolbar {
    display: none;
}
.modal-header{
    padding: 2rem 1rem;
    display: flex;
    align-items: center;
}
.modal-title{
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
}
.gorevModal{
    border-radius: .3rem;
    background-color: #FFF;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    color: #333;
    border: none;
    margin-bottom: 2rem;
}
.gorevModal:hover{
    background-color: var(--primaryColor);
    color: #FFF;
}
.lineStatus{
    width: 100%;
    position: relative;
    border-radius: .3rem;
    background-color: #f4f4f4;
    margin-bottom: .8rem;
    font-size: 1.2rem;
    padding: .2rem 1rem;
    overflow: hidden;
    z-index: 1;
    color: #FFF;
}
@media (min-width: 992px){
    .lineStatus{
        width: 80%;
    }
}
.lineStatusBars{
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.tableFormatContent{
    display: none;
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    border-radius: .5rem;
    padding: 2rem;
    margin-bottom: 2rem;
}
.tableFormatContentItemHead{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
    background-color: #FFF;
    border-radius: .3rem;
    padding: 1rem;
}
.tableFormatContentItemHead h3{
    line-height: 1;
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0;
}
.tableFormatContent .content{
    padding: 1rem 0;
}
.tableFormatContent .content .contentItem{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1rem;
    padding: 2rem;
    border-radius: .5rem;
    background-color: #FFF;
    position: relative;
}
.tableFormatContent .content .contentItemDesc{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    border-bottom: 1px dashed #EAEAEA;
    padding-bottom: 1rem;
    flex: 1;
}
.tableFormatContent .content .contentItemDesc span{
    display: block;
    width: 100%;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.tableFormatContent .content .contentItemDesc h4{
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
}
.tableFormatContent .content .contentItemDesc p{
    margin: 0;
    font-size: 1.4rem;
}
.w100{
    width: 100%;
}
.mb0{
    margin-bottom: 0;
}
.requestView{
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: .3rem;
    font-size: 1.4rem;
    border: none;
    background-color: #f1f1f1;
    cursor: pointer;
}
.requestView:hover{
    background-color: var(--primaryColor);
    color: #FFF;
}
#derstable{
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
    background-color: #FFF;
}
#derstable th,
#derstable td{
    font-size: 1.15rem;
    padding: .5rem;
    border: 1px solid #DDD;
    overflow: hidden;
    white-space: nowrap;
}
#derstable th{
    font-weight: 500;
}
#dersTable td{
    width: calc(100% / 31);
}
.konubasligi{
    width: 25rem;
}
.tabledays{
    width: 3rem;
    text-align: center;
}
.tabledaysSelect{
    text-align: center;
    cursor: pointer;
    width: 3rem;
}
.tabledaysSelect:hover{
    background-color: #ddd;
}
.colorPicker{
    background-color: #FFF;
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 2rem;
    display: inline-flex;
    position: fixed;
    row-gap: 1rem;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    flex-direction: column;
    box-shadow: rgba(149, 157, 165, 0.13) 0px 8px 24px;
}

.colorOption{
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
}
.selectedColor{
    border: .2rem solid #333;
}
.removeMission{
    position: absolute;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: #FFF;
    border: .5rem solid #f4f4f4;
    top: -1rem;
    right: -1rem;
}
.removeMission:hover{
    color: #FFF;
    background-color: var(--primaryColor);
}
.text-left{
    text-align: left!important;
}
.postFormHead{
    margin-bottom: 1rem;
}
.postFormHead h2{
    font-size: 2rem;
    font-weight: 600;
}
.studentCard{
    margin-bottom: 2rem;
    background-color: #FFF;
    border-radius: .5rem;
    padding: 3rem;
}
.studentCardHead{
    margin-bottom: 2rem;
}
.studentCardHead h2{
    font-size: 2rem;
    font-weight: 600;
}
.studentCardItem{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 1rem;
}
.studentCardItem span{
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.studentCardItem p{
    font-size: 1.4rem;
}
.studentCardItem .tableBadge{
    font-size: 1.2rem;
    font-weight: 400;
    padding: .5rem 2rem;
}
.studentLessonCard{
    background-color: #FFF;
    padding: 2rem;
    border-radius: .5rem;
    margin-bottom: 2rem;
}
.studentLessonItem{
    margin-bottom: 1rem;
}
.studentLessonItem p{
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.studentLessonItem .lineStatus{
    width: 100%!important;
}