/* Start Variables */
:root{
    --main-color: #FFFFFF;
    --second-color: #46A7A0;
    --backgroung-image: linear-gradient(#323335, #46A7A033);
    --padding-left: 100px;
    --padding-right:100px;


}
    
/* End Variables */



/* Global Rules */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;

}

html{
    
   
 overflow-x: hidden;
scroll-behavior: smooth;
height: 100vh;
background-color: #323335;

}


/* Site Fonts */
body {

    font-family: "Poppins", sans-serif;
    background: #323335;
    min-height: 100vh;
    overflow-x: hidden;
   
}


.parent{
background-color: var(--backgroung-image);


}
.container {
    
    
    padding-left: 15 px;
    padding-right: 15 px;
    margin-left: auto;
    margin-right: auto;
    

}

/* Responsive for Small Devices */
@media ( min-width:768px ) {
    .container{
        width: 750 px;
        
    }

    
}
/* Responsive for Medium Devices */
@media ( min-width:992px ) {
    .container{
        width: 970 px;
        
       
    }

   
    
}
/* Responsive for Large Devices */
@media ( min-width:1200px ) {
    .container{
        width: 1170 px;
    }
    
}



ul,ol{

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


a{

    color:var(--second-color);
    text-decoration: none;
}
a:hover{

    color:var(--second-color);

}

h2,h3,h4,h5,h6{

    color: var(--main-color);
}


/* End Global Rules */

/* start header */

.navbar{
    z-index: 2;
    padding: 20px 40px;
}

.navbar .container-fluid .navbar-brand {
    color:var(--second-color);
    padding-left: 30px;
    
}

.navbar .container-fluid .navbar-toggler {

border: none;
}

.navbar .container-fluid .navbar-collapse {
    padding:3%;
}


.navbar .container-fluid .navbar-collapse ul li a{
    
    padding:.5em;
    color:var(--main-color);
}




.navbar .container-fluid .navbar-toggler >span.navbar-toggler-icon >i {
color: var(--main-color);
    
}

.navbar .container-fluid .navbar-nav >li >a{

    padding:.5em;
    color:var(--main-color);
}


.navbar .container-fluid .navbar-nav .menu-item >a.active,

.navbar .container-fluid .navbar-nav .menu-item >a:focus,

.navbar .container-fluid .navbar-nav .menu-item >a:hover{

color:var(--second-color);

}

.navbar .container-fluid form{

    position: relative;
    padding: 0px 30px;
}

.navbar .container-fluid form input{

    background-color: transparent;
    border-color: var(--second-color);
    border-radius: 5px;
    color: #FFF;
    outline: none;
}

.navbar .container-fluid form input:focus{

    border-color: var(--second-color);
    
    outline: none !important;
    box-shadow: none !important;
}
.navbar .container-fluid form .btn-outline-success

{

    position: relative;
    color: var(--second-color);
    border-color: var(--second-color);
   

}

.navbar .container-fluid form .btn-outline-success:focus{
    border-color: var(--second-color);
    outline: none !important;
    box-shadow: none !important;

}

.navbar .container-fluid form .btn-outline-success:hover{
background-color:var(--second-color) ;
color: #000000;

}




/* end header */


/* start head section */
.head-sec{
    width: 100%;
    inset: 20px 0px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color:#323335;   
    
}

.head-sec .head-content{
    width: 550px;
    display: flex;
    flex-flow: column nowrap;
    justify-items: flex-start;
    position: relative;
    padding-left: 10px;
    padding-right: 20px;
    top: 20px;


}

.head-sec .head-content >span{

    font-style: normal;
    position: relative;
    max-width: 65%;
    padding-left: 40px;
    padding-bottom: 3px;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: var(--second-color);
}

.head-sec .head-content >span:before{
    content: "";
    width:8%;
    height: 3px;
    top:50%;
    left: 3px;
    position: absolute;
    background: var(--second-color);
}

.head-sec .head-content h2{
    font-style: normal;
    font-weight: 600;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: 0.018em;
    color: var(--main-color);
    

}
.head-sec .head-content p{
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 32px;
    letter-spacing: 0.02em;

    color: var(--main-color);


}
.head-sec .head-content .get-start-btn{

    position: relative;
    width: 35%;
    top:20px;
    padding: 15px 25px;
    background-color: var(--second-color);
    border: none;
    border-radius: 8px;
    color: var(--main-color);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.01em;
    text-align: center;
}

.head-sec .head-image{
    width: 400px;
    position: relative;
    padding: 40px 20px 0px;
    margin-top: 5%;
    margin-right: 15%;


}
.head-sec .head-image .image{

    position: relative;
    max-width: 500px;
    
   
}
/* end head section */

/* start parteners section */

.partners{
    position: relative;
    width: 100%;
    top: 100px;
    padding-top: 50px;
    padding-left:var(--padding-left);
    padding-right: var(--padding-right);
    background-image: linear-gradient(182.15deg, rgba(70, 167, 160, 0.2) 1.81%, rgba(102, 255, 244, 0) 100.22%);;

}
.partners h3{
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;

}
.partners .logos{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    

}
.partners .logos .logo-div{
    position: relative;
    text-align: center;
}

/* end parteners section */


/* start advantages section */
.advant{

    position: relative;
    width: 100%;
    top: 100px;
    bottom: 60px;
    padding-top: 50px;
    padding-left:var(--padding-left);
    padding-right: var(--padding-right);


}
.advant h2{
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;


}
.advant p{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 167.5%;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--main-color);


}
.advant .show-advant{
    position: relative;
    top:30px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 15px 20px;
    


}

.advant .show-advant .advant-div{
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 50px 50px 20px; 
    background: #3A3C48;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 20px;


}

.advant .show-advant .advant-div image{

    padding: 5px;
}

.advant .show-advant .advant-div h4{
    position: relative;

    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 144.5%;
   letter-spacing: 0.02em;
   color: var(--main-color);
   top: 30px;


}

.advant .show-advant .advant-div p{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 172%;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--main-color);
    top: 25px;

}


/* end advantages section */

/* start popular section */
.popular-courses{
    position: relative;
    width: 100%;
    top: 180px;
    padding-top: 50px;
    padding-left:var(--padding-left);
    padding-right: var(--padding-right);

}
.popular-courses >span{

    font-style: normal;
    position: relative;
    max-width: 65%;
    padding-left: 25px;
    padding-bottom: 3px;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: var(--second-color);
    text-transform: uppercase;
}

.popular-courses >span:before{
    content: "";
    width:8%;
    height: 3px;
    top:50%;
    left: 3px;
    position: absolute;
    background: var(--second-color);


}
.popular-courses .pop-div{

    position: relative;
    display: flex;
    flex-flow: row;
    justify-content: space-between;

}
.popular-courses div>h2{
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: start;

}

.popular-courses div .course-arrow{

    position: relative;
    display: flex;
    flex-flow: row;
    padding:10px;
    align-items: flex-end;

}

.popular-courses div .course-arrow i{
    padding: 10px;
    color: #FFF;
    background-color: #C6C6C6;
    border-radius: 5px;
    transform: scale(1.5);
    margin-right: 20px;
    margin-left: 20px;
    
}

.popular-courses div .course-arrow i.active{
    padding: 10px;
    color: #FFF;
    background-color: var(--second-color);
    border-radius: 5px;
    transform: scale(1.5);
    margin-right: 20px;
    margin-left: 20px;
    
}

.popular-courses div .course-arrow i:hover{
    
    background-color: var(--second-color);
}

.popular-courses >p{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);

}
.popular-courses .pop-items{

    position: relative;
    width: 100%;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 30px 20px;
    top:40px;
    bottom:40px;
}


.popular-courses .pop-items .pop-item{

    position: relative;
    display: flex;
    flex-flow: column ;
    border: 1px solid #4e4e4e;
    border-radius: 15px;
    margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #4e4e4e;
    border-radius: 20px;


}


.popular-courses .pop-items .pop-item:hover{
    margin-top:-20px;

}

.popular-courses .pop-items .pop-item >img{

    position: relative;
    width:100%;
    max-height: 50%;
    height:60%;
    border-radius: 20px;
}

.popular-courses .pop-items .pop-item .course-data{
     
    position: relative;
    display: flex;
    flex-flow: row;
    padding: 5px 10px;
    top:15px;
}

.popular-courses .pop-items .pop-item .course-data >img{


    position: relative;
    width:40px;
    height:40px;
    border-radius: 20px;
}

.popular-courses .pop-items .pop-item .course-data >span{
   position: relative;
   padding-left: 15px;
   padding-top: 5px;
   font-style: normal;
   font-weight: 500;
   font-size: 17px;
   line-height: 144.5%;
   letter-spacing: 0.02em;
   color: var(--main-color);
}

.popular-courses .pop-items .pop-item >h3{
    padding: 8px;
}

.popular-courses .pop-items .pop-item >h3 >a{
    position: relative;
    font-style: normal;
    font-weight: 600;
    text-align: start;
    font-size: 25px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    top: 10px;
    
    
}


.popular-courses .pop-items .pop-item .course-body{
    
    position: relative;
    display: flex;
    flex-flow: row;
    padding: 5px 10px 20px;


}

.popular-courses .pop-items .pop-item .course-body >span{

    position: relative;
    padding: 5px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: #A7A7A7;

}


/* end popular section */

/* start about section */
.about-sec{
    position: relative;
    width: 100%;
    top:250px;
    bottom: 40px;
    padding-top: 50px;
    padding-left:var(--padding-left);
    padding-right: var(--padding-right);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    background-color:#323335; 

    
}


.about-sec .about-image{
    width: 500px;
    position: relative;
    
    

}

.about-sec .about-image .ab-image{
    position: relative;
    max-width: 500px;
    
}
.about-sec .about-content{
  
    width: 580px;
    display: flex;
    flex-flow: column nowrap;
    justify-items: flex-start;
    position: relative;
    top: 20px;
    padding-left: 20px;

}

.about-sec .about-content >span{
    font-style: normal;
    position: relative;
    max-width: 65%;
    padding-left: 40px;
    padding-bottom: 3px;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: var(--second-color);

    
}

.about-sec .about-content >span:before{
    content: "";
    width:8%;
    height: 3px;
    top:50%;
    left: 3px;
    position: absolute;
    background: var(--second-color);
}

.about-sec .about-content >h2{

    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 65px;
    letter-spacing: 0.018em;
    color: var(--main-color);
}

.about-sec .about-content >p{
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 32px;
    letter-spacing: 0.02em;

    color: var(--main-color);

    
}

.about-sec .about-content .learn-more-btn{

    
    position: relative;
    width: 35%;
    top:20px;
    padding: 15px 25px;
    background-color: var(--second-color);
    border: none;
    border-radius: 8px;
    color: var(--main-color);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.01em;
    text-align: center;

    
}


/* end about section */

/* start testimonials section */
.testimonials{
    position: relative;
    width: 100%;
    margin-top:35%;
    margin-bottom: 10%;
    padding-top: 50px;
    padding-left:var(--padding-left);
    padding-right: var(--padding-right);


}
.testimonials h2{

    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;


}
.testimonials p{

    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 167.5%;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--main-color);

}

.testimonials .show-testimonials{

    position: relative;
}

.testimonials .show-testimonials .slides{

    position: relative;
    top:30px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 25px 20px;


}


/* Fading animation */
 
.fade-in {
    
    animation-name: fade-in;
    animation-duration: 1.5s;
  }
  
  @keyframes fade-in {
    from {opacity: 0} 
    to {opacity: 1}
  }
  


.testimonials .show-testimonials .testimonial-div{

    position: relative;
    display: flex;
    flex-flow: column nowrap;
    padding: 50px 50px 20px; 
    background: #3A3C48;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    
    transition: all 0.25s ease 0s;
   
}

.testimonials .show-testimonials .testimonial-div >p{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 156.5%;
    letter-spacing: 0.02em;
    text-align: start;
    color: var(--main-color);
    
    
}

.testimonials .show-testimonials .testimonial-div .testimonial-media{

    position: relative;
    display: flex;
    flex-flow: row wrap;
    padding: 0px 10px;

}

.testimonials .show-testimonials .testimonial-div .testimonial-media >image{

  position: relative;
  border-radius: 20px;
  
}


.testimonials .show-testimonials .testimonial-div .testimonial-media .testimonial-text{

    position: relative;
    display: flex;
    flex-flow: column;
    padding-left: 15px;
    
}

.testimonials .show-testimonials .testimonial-div .testimonial-media .testimonial-text h4{
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 156.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    top:8px;
    
}

.testimonials .show-testimonials .testimonial-div .testimonial-media .testimonial-text h6{

   position: relative;
   font-style: normal;
   font-weight: 400;
   font-size: 13px;
   line-height: 156.5%;
   letter-spacing: 0.02em;
   color: var(--main-color);

}



.testimonials .show-testimonials .indicators{

   position: relative;
   margin-top:5%;
   left:50%;
   right:50%;
}


@media (max-width:992px){


    .testimonials{

        margin-top:45%;

    }

    
.testimonials .show-testimonials .indicators{

   
    margin-top:15%;
   
 }
}

.testimonials .show-testimonials .indicators .dot{

    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #c2c2c2;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}


.testimonials .show-testimonials .indicators .active {
    width:50px;
    
    border-radius: 32px;
    background-color: var(--second-color);
  }
  

/* end testimonials section */


/* start blog page*/

.blog{
    position: relative;
    width:100% ;
    margin-bottom: 80px;
    padding: 0;
   

}
.blog .blog-head{
    position: relative;
    height: 280px;
    top:0;
    left:0;
    right:0;
    background-image: linear-gradient(#323232, #46a7a0ad);
   

}
.blog .blog-head >h1{

    position: absolute;
    padding: 100px;
    width: 100%;
    z-index: 2;
    font-style: normal;
    font-size: 44px;
    font-weight: 700;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;
    left: 50%;
    right: 50%;
    top:60%;
    transform: translate(-50%,-50%);
}
.blog .blog-posts{

    position: relative;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 40px 80px;
    top:40px;
    bottom:40px;

}

.blog .blog-posts .blog-post-item{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    border: 1px solid #4e4e4e;
    border-radius: 15px;
    margin-top:10px;
    margin-bottom: 10px;
    padding: 5px;



}
.blog .blog-posts .blog-post-item .post-media{
    position: relative;
    width:25%;
    
    


}


.blog .blog-posts .blog-post-item .post-content{

    position: relative;
    width:70%;
    display: flex;
    flex-flow: column nowrap;
    padding-left: 20px;

}

@media (max-width:758px){

    .blog .blog-posts .blog-post-item .post-media{
        width:100%;
    }
   
.blog .blog-posts .blog-post-item .post-content{
        width:100%;
    }

}

.blog .blog-posts .blog-post-item .post-media >img{
    position: relative;
    width:100%;
    height:100%;
    
    padding: 5px;
    border-radius: 15px;


}


.blog .blog-posts .blog-post-item .post-content>h3 >a{

    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 34px;
    text-align: start;
    color: var(--main-color);
    
    

}

.blog .blog-posts .blog-post-item .post-content .post-body{

    position: relative;
    display: flex;
    flex-flow: row;
    padding: 5px 0px;
    
}

.blog .blog-posts .blog-post-item .post-content .post-body>span{
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--second-color);
    padding-right: 5px;
}

.blog .blog-posts .blog-post-item .post-content .blog-excerpt{

    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: start;
    color: var(--main-color);
   
}

.blog .blog-posts .blog-post-item .post-content .blog-excerpt >a{

    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--second-color);
    padding-bottom: 5px;


}

.blog nav.navigation{
    position: absolute;
    padding: 20px;
    width: 100%;
    font-style: normal;
    font-size: 18px;
    font-weight: 700;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;
    left: 50%;
    right: 50%;
    margin-bottom:40px;


}
.blog nav.navigation .nav-links >a{
    border: 1px solid #4e4e4e;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 3px;
    background-color: var(--second-color);
    color: #000;

}
.blog nav.navigation .nav-links >span{

    padding: 10px;
    border: none;
}

/* end blog page*/


/* start article page*/
.post{
    position: relative;
    top: -150px;
    width: 100%;
    margin: 0;
    padding:0;
    
}
.post .post-head{
    position: relative;
    width:100% ;
    height:650px;
    display: flex;
    flex-flow: column;
    background-color: var(--second-color);
    
}


.post .post-head >img{
 width:100%;
 height: 650px;
}
.post .post-head::after{
    
    position: absolute;
    content: "";
    width: 100%;
    height: 650px;
    margin: 0;
    background-color: #32333599;
  
}


.post .post-head h1{
    position: absolute;
    padding: 100px;
    width: 100%;
    z-index: 2;
    font-style: normal;
    font-size: 44px;
    font-weight: 700;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: #000000;
    text-align: center;
    left: 50%;
    right: 50%;
    top:60%;
    transform: translate(-50%,-50%);
    
}

.post .article-content{
    position: relative;
    top:15px;
    bottom: 30px;
    padding: 60px;
    display: flex;
    flex-flow: column;
}
.post .article-content .breadcrumb-container{
    position: relative;
    width: 100%;
    display: flex;
    padding: 10px 0px;
    background-color: #4e4e4e;
    
}
.post .article-content .breadcrumb-container li{
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--second-color);
    padding: 5px;
}

.post .article-content .breadcrumb-container li.active{

    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: #D9D9D9;

}

.post .article-content .breadcrumb-container li >a >span{

    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: #D9D9D9;

}

.post .article-content >h4{
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    bottom: 40px;
    top: 20px;

}
.post .article-content >h4 span{
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--second-color);


}
.post .article-content p{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 172%;
    letter-spacing: 0.02em;
    color: var(--main-color);


}

.related-posts{

    position: relative;
    width: 100%;
    padding: 30px;
    margin: 20px;
    
   
}


.related-posts >h3{
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 69px;
    text-align: center;
    color: var(--main-color);
    
}

.related-posts .posts-items{
    position: relative;
    width: 100%;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 30px 20px;
    top:30px;
    padding-left: 80px;
    padding-right: 80px;
   
    
}
.related-posts .posts-items .post-item{
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    align-items: start;
    border: 1px solid #4e4e4e;
    border-radius: 15px;
    
}

.related-posts .posts-items .post-item >img{

    width:100%;
    height: 200px;
    padding: 5px;
    border-radius: 15px;
}

.related-posts .posts-items .post-item >h4 >a{

    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--main-color);
    max-width: 40ch;
    padding: 5px;
}

.related-posts .posts-items .post-item >p{

    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    text-align: start;
    color: var(--main-color);
    padding: 5px;
    
}

/* end article page*/

/* start courses page*/

.courses{

    position: relative;
    width:100% ;
    margin-bottom: 80px;
    padding: 0;

}
.courses .courses-head{
    position: relative;
    height: 280px;
    top:0;
    left:0;
    right:0;
    background-image: linear-gradient(#323232, #46A7A0);


}

.courses .courses-head >h1{

    position: absolute;
    padding: 100px;
    width: 100%;
    z-index: 2;
    font-style: normal;
    font-size: 44px;
    font-weight: 700;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;
    left: 50%;
    right: 50%;
    top:60%;
    transform: translate(-50%,-50%);

}

.courses .course-items{
    position: relative;
    width: 100%;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 30px 20px;
    padding: 40px 80px;
    top:40px;
    bottom:40px;
}

.courses .course-items .course-item{

    position: relative;
    display: flex;
    flex-flow: column ;
    border: 1px solid #4e4e4e;
    border-radius: 15px;
    margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #4e4e4e;
    border-radius: 20px;


}

.courses .course-items .course-item >img{

    position: relative;
    width:100%;
    height:60%;
    max-height: 50%;
    border-radius: 20px;
}

.courses .course-items .course-item .course-data{
     
    position: relative;
    display: flex;
    flex-flow: row;
    padding: 5px 10px;
    top:15px;
}

.courses .course-items .course-item .course-data >img{


    position: relative;
    width:40px;
    height:40px;
    border-radius: 20px;
}

.courses .course-items .course-item .course-data >span{
   position: relative;
   padding-left: 15px;
   padding-top: 5px;
   font-style: normal;
   font-weight: 500;
   font-size: 17px;
   line-height: 144.5%;
   letter-spacing: 0.02em;
   color: var(--main-color);
}

.courses .course-items .course-item >h3{
    padding: 8px;
}

.courses .course-items .course-item >h3 >a{
    position: relative;
    font-style: normal;
    font-weight: 600;
    text-align: start;
    font-size: 25px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    top: 10px;
    
}


.courses .course-items .course-item .course-body{
    
    position: relative;
    display: flex;
    flex-flow: row;
    padding: 5px 10px 20px;


}

.courses .course-items .course-item .course-body >span{

    position: relative;
    padding: 5px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: #A7A7A7;

}


/* end courses page*/


/* start single course page*/

.course{
    position: relative;
    width: 100%;
    margin: 0;
    bottom: 40px;
    
}
.course .course-head{
    position: relative;
    top: 40px;
    width:100% ;
    display: grid;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    grid-template-columns: repeat(auto-fill,minmax(500px,1fr));
    gap: 30px 10px;
    background-image: linear-gradient(#323232, #46a7a06e);

}

.course .course-head .course-text{
    position: relative;
    display: flex;
    flex-flow: column;
    top:50px;
    left: 20px;
}


.course .course-head .course-vid{
    position: relative;
    width: 350px;
    top:30%;
    padding-bottom: 30px;
    border-radius: 22px;
    left: 20%;
    display: flex;
    flex-flow: column;
    align-items: center;
    background-color: var(--main-color);
}

.course .course-head .course-vid >img{
    position: relative;
    width:100%;
    height:60%;
    border-radius: 20px;
}

.course .course-head .course-vid >h5{

    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 172%;
    letter-spacing: 0.02em;
    color: #000000;
    padding: 20px;
    
}

.course .course-head .course-vid >a{

    position: relative;
    width: 45%;
    padding: 15px 25px;
    background-color: var(--second-color);
    border: none;
    border-radius: 0px 20px 0px 20px;
    color: var(--main-color);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.01em;
    text-align: center;
}

.course .course-head .course-text>h1{

    position: relative;
    padding-left: 10px;
    font-style: normal;
    font-size: 44px;
    font-weight: 600;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: start;
   
}


.course .course-head .course-text>p{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 172%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    padding-left: 10px;
    


}

.course .course-head .course-text>h5{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 172%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    padding-left: 10px;
    
}


.course .course-head .course-text>h5>span{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 172%;
    letter-spacing: 0.02em;
    color: var(--second-color);
    
}
.course .course-content{
    position: relative;
    margin-top:15%;
    bottom: 40px;
    padding: 60px;
    display: flex;
    flex-flow: column;

}


@media (max-width:992px){

    
.course .course-content{
    margin-top:20%;

    }
}


@media (max-width:797px){

    
.course .course-content{
    margin-top:25%;

    }
}

.course .course-content >h3{

    position: relative;
    font-style: normal;
    font-weight: 600;
    text-align: start;
    font-size: 32px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    top: 10px;

}

.course .course-content >p {

    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 172%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    top: 35px;
    bottom: 30px;
    


}

.course .related-courses{

    position: relative;
    width: 100%;
    padding: 30px;
    margin: 20px;
    
   
}


.course .related-courses >h3{
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 69px;
    text-align: center;
    color: var(--main-color);
    
}

.course .related-courses .rel-courses{
    position: relative;
    width: 100%;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 30px 20px;
    top:30px;
    padding-left: 80px;
    padding-right: 80px;
   
    
}
.course .related-courses .rel-courses .rel-course{
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    align-items: start;
    border: 1px solid #4e4e4e;
    border-radius: 15px;
    
}

.course .related-courses .rel-courses .rel-course >img{

    width:100%;
    height: 200px;
    padding: 5px;
    border-radius: 15px;
}

.course .related-courses .rel-courses .rel-course >h4 >a{

    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--main-color);
    max-width: 40ch;
    padding: 5px;
}

.course .related-courses .rel-courses .rel-course >p{

    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    text-align: start;
    color: var(--main-color);
    padding: 5px;
    
}


/* end single course page*/


/* start about page*/

.about-head{
    width: 100%;
    inset: 20px 0px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color:#C2C2C2;   
    margin-top: -20%;
    padding-top: 10%;
    padding-left: 5px;
    padding-right: 5px;

    

}
@media (max-width:992px){

.about-head{margin-top: -35%;
    padding-top: 28%;}
 
}
   

.about-head .ab-content{
    width: 600px;
    display: flex;
    flex-flow: column nowrap;
    justify-items: flex-start;
    position: relative;
    padding-left: 10px;
    padding-right: 20px;
    margin-top: 8%;


}

.about-head .ab-content h2{
    font-style: normal;
    font-weight: 600;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: 0.018em;
    color: #000;
    
    
}

.about-head .ab-content p{

    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 32px;
    letter-spacing: 0.02em;

    color: #000;
}

.about-head .ab-content .start-btn{

    
    position: relative;
    width: 35%;
    top:20px;
    padding: 15px 25px;
    background-color: var(--second-color);
    border: none;
    border-radius: 8px;
    color: #000;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.01em;
    text-align: center;
}
.about-head .ab-image{

    width: 400px;
    position: relative;
    padding: 40px 20px 0px;
    margin-top: 5%;
    margin-right: 15%;

}

.about-head .ab-image .ab-img{
    position: relative;
    max-width: 500px;
    
}

.we-are{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-bottom: 20%;
    padding-top: 5%;
    padding-left:35px;
    padding-right: 35px;

}
.we-are .we-text{
position: relative;
width: 30% ;
padding-right: 30px;

}


.we-are .we-text h2{
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: start;


}
.we-are .we-text p{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 167.5%;
    text-align: start;
    letter-spacing: 0.02em;
    color: var(--main-color);


}

.we-are .we-advantages{
    position: relative;
    width: 65% ;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap: 35px 30px;
    

}

.we-are .we-advantages .we-div{

    position: relative;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    
    
}


.we-are .we-advantages .we-div image{

    padding: 5px;
}

.we-are .we-advantages .we-div h4{
    position: relative;

    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 144.5%;
   letter-spacing: 0.02em;
   color: var(--main-color);
   top: 30px;


}

.we-are .we-advantages .we-div p{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 172%;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--main-color);
    top: 25px;

}

    
/* Responsive for Small Devices */
@media  (max-width: 768px) {

    .about-head{

        margin-top: -55%;
        padding-top: 45%;
    }
    
    .we-are .we-text{
           
        width: 100% ;
        margin-bottom: 8%;
            
        }
              
    .we-are .we-text h2{
        text-align: center;
    }
    
           
    .we-are .we-text p{
        text-align: center;
    }
    
        
    
    .we-are .we-advantages{
        
        width: 100%;
        
        grid-template-columns: repeat(auto-fill,minmax(450px,1fr));
        gap: 55px 30px;
        padding-left: 40px;
        padding-right: 40px;
    
    }
    
        
    }
    


/* end about page*/



/* start comments section */

.comments{
   
    position: relative;
    top: 30px;
    bottom: 30px;
    padding: 15px;

}

.comments .comments-title{

    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--second-color);
    padding: 20px;


}

.comments .comments-title >i{

    color:#4e4e4e;
    font-size: 16px;
}

.comments .edu-comments-list{

    margin: 15px;
}
.comments .edu-comments-list >.comment{

    padding: 10px;
    border: 1px solid var(--main-color);
    margin-bottom: 15px;
}

.comments .edu-comments-list >.comment > .comment-body .comment-author .fn ,
.children .comment-author .fn{

    
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--second-color);
    padding: 5px;


}


.comments .edu-comments-list >.comment > .comment-body >p ,
.comments .edu-comments-list >.comment > .comment-body >em{

    
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    padding: 5px;
    margin: 10px 0px;



}
.comments .edu-comments-list >.comment > .comment-body .comment-author .says ,
.children .comment-author .says {

    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
   
}

.comments .edu-comments-list >.comment > .comment-body >.comment-meta{
    margin-top: 5px;
}
.comments .edu-comments-list >.comment >.children{
    position: relative;
    padding: 10px;
    margin: 10px 0px;
    border: 1px solid #4e4e4e;
    background-color: #41464b;
   
}
.comments .edu-comments-list >.comment > .comment-body text{
    display: none;
}
.comments .edu-comments-list >.comment >.children >.comment >.children{
    position: relative;
    padding: 10px;
    margin: 10px 0px;
    border: 1px solid #4e4e4e;
    background-color: #4f555a;
    
    
} 

.comments .edu-comments-list >.comment >.children >.comment >.children >.comment >.comment-body{
    position: relative;
    padding: 10px;
    margin: 10px 0px;
    border: 1px solid #41464b;
    background-color: #4f555a;
    
    
} 
.comments .comment-respond{

    margin: 20px 0px;

}


.comments .comment-respond .comment-reply-title{
 
    position: relative;
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    padding: 5px;
    margin-top: 30px;
   


}


.comments .comment-respond .comment-form .comment-form-comment >label{

    display: block;
    
}

.comments .comment-respond .comment-form >.comment-form-author input,
.comments .comment-respond .comment-form >.comment-form-email input,
.comments .comment-respond .comment-form >.comment-form-url input{

    width: 54%;
    height: 45px;
    padding: 5px;
    border: 1px solid #4e4e4e;
    border-radius: 3px;
    color: var(--main-color);
    outline: none;
    background-color: #4e4e4e;


}
.comments .comment-respond .comment-form >.comment-form-email input{
    margin-left: 6px;
}


.comments .comment-respond .comment-form .comment-form-comment >textarea{

    width: 60%;
    height: 350px;
    padding: 10px;
    margin-top: 5px;
    background-color: #4e4e4e;
    resize: none;
    border: 1px solid #4e4e4e;
    border-radius: 3px;
    color: var(--main-color);
    outline: none;
}


.comments .comment-respond .comment-form >.form-submit >input{
    padding: 10px 35px;
    background-color: var(--second-color);
    color: var(--main-color);
    margin-top: 10px;
    border: 1px solid #4e4e4e;
    border-radius: 22px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 172%;
    letter-spacing: 0.02em;
    text-align: center;

}


/* end comments section */


/* start search page */
.search{

    position: relative;
    width:100% ;
    margin-bottom: 80px;
    padding: 0;
   

}
.search .search-head{

    position: relative;
    height: 280px;
    top:0;
    left:0;
    right:0;
    background-image: linear-gradient(#323232, #46a7a0ad);
   
}

.search .search-head h1{

    
    position: absolute;
    padding: 100px;
    width: 100%;
    z-index: 2;
    font-style: normal;
    font-size: 44px;
    font-weight: 700;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;
    left: 50%;
    right: 50%;
    top:60%;
    transform: translate(-50%,-50%);
}


.search .results{

    position: relative;
    width: 100%;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 30px 20px;
    padding: 40px 80px;
    top:40px;
    bottom:40px;
}



.search .results .search-item{

    position: relative;
    display: flex;
    flex-flow: column ;
    border: 1px solid #4e4e4e;
    border-radius: 15px;
    margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #4e4e4e;
    border-radius: 20px;
    padding: 5px;
}


.search .results .search-item .search-media {

    position: relative;
    width:100%;
    height:60%;
    max-height: 50%;
    border-radius: 20px;
    margin-bottom:12%;
}

.search .results .search-item .search-media >img{

    position: relative;
    width:100%;
    border-radius: 20px;

}


.search .results .search-item h3>a{
    position: relative;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 34px;
    text-align: start;
    color: var(--main-color);
    
    
}


.search .results .search-item .read-more{
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--second-color);
    padding-bottom: 5px;
    padding-top: 5px;
    
}


.search nav.navigation{
    position: absolute;
    padding: 20px;
    width: 100%;
    font-style: normal;
    font-size: 18px;
    font-weight: 700;
    line-height: 167.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;
    left: 50%;
    right: 50%;
    margin-bottom:20%;
    margin-top: 5%;


}
.search nav.navigation .nav-links >a{
    border: 1px solid #4e4e4e;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 3px;
    background-color: var(--second-color);
    color: #000;

}
.search nav.navigation .nav-links >span{

    padding: 10px;
    border: none;
}






/* end search page */


/* start contact sec */


.contact{

    position: relative;
    width: 80%;
    padding: 15% 35%;
    top:40%;
    
    margin-right:10%;
    margin-left:10%;
    background-repeat: no-repeat;
    border-radius: 35px;
   

}

 .contact form >h4{
    position: absolute;
    width: 100%;
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 144.5%;
    letter-spacing: 0.02em;
    color: var(--main-color);
    text-align: center;
    left: 50%;
    right: 50%;
    top:38%;
    bottom: 20%;
    transform: translate(-50%,-50%);
}
 .contact form .contact-form{

    position: absolute;
    display: flex;
    flex-flow: row ;
    padding: 10px 5px;
    align-items: center;
    justify-content: center;
    width: 40%;
    top: 48%;
    border-radius: 65px;
    border: none;
    left: 50%;
    right: 50%;
    transform: translate(-50%,-50%);
    background-color: #FFF;

}
 .contact form .contact-form >label >.email{

    width:100%;
    background-color: #FFF;
   border:none; 
   border-radius: 65px;
   font-size:14px;     
   outline: none; 
   margin-bottom:10px;
   padding:10px ; 
   text-align:center; 
   color:#828282;
}
 .contact form .contact-form >.send{
    background-color:#46A7A0;
    padding:20px 45px;
    margin-left:20px ;
    border:none ;
    color:#FFF;
    font-size:14px;
    border-radius:62px;


}

/* Responsive for medium Devices */
@media (max-width: 992px) {

    
 .contact form{
    padding:25%;
 }
   
 .contact form >h4{

    top:40%;
 
  }
    .contact form .contact-form{
        flex-flow: row wrap ;
        background-color: transparent;
        padding-bottom: 20px;
        top:55%

    }
    .contact form .contact-form >label >.email{

        background-color: transparent;
        border-bottom: 2px solid #FFF;
        border-radius: 0px;
        
       
    }
  
    
   

}


/* Responsive for medium Devices */
@media (max-width: 818px) {

    
    .contact form{
       padding:25%;
    }
      
    .contact form >h4{
   
       top:45%;
    
     }
       .contact form .contact-form{
           flex-flow: row wrap ;
           background-color: transparent;
           padding-bottom: 20px;
           top:68%
   
       }
       .contact form .contact-form >label >.email{
   
           background-color: transparent;
           border-bottom: 2px solid #FFF;
           border-radius: 0px;
           
          
       }
     
       
      
   
   }
   
/* Responsive for medium Devices */
@media (max-width: 687px) {

    
    .contact form{
       padding:25%;
    }
      
    .contact form >h4{
   
       top:45%;
    
     }
       .contact form .contact-form{
           flex-flow: row wrap ;
           background-color: transparent;
           padding-bottom: 20px;
           top:78%
   
       }
       .contact form .contact-form >label >.email{
   
           background-color: transparent;
           border-bottom: 2px solid #FFF;
           border-radius: 0px;
           
          
       }
     
       
      
   
   }
     
/* Responsive for medium Devices */
@media (max-width: 594px) {
      
    .contact form >h4{
   
        top:35%;
     
      }
    .contact form .contact-form{
        flex-flow: row wrap ;
        background-color: transparent;
        padding-bottom: 20px;
        top:68%

    }
    .contact form .contact-form >.send{
        background-color:var(--main-color);
    color:#000}
}

   
/* end contact sec */


@media (max-width:1115px){

    .no-content{
        left:25% !important;

    }
}



.not-found{

    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin:10% ;
}


.not-found .not-img{

    position: relative;
    
    top: 5%;
    padding:30px;
   


}
.not-found h4{

    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 55px;
    line-height: 68px;
    color: var(--main-color);
    text-align: center;
    padding:25px;
}

.not-found span{
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 55px;
    line-height: 68px;
    text-align: center;
    color: var(--main-color);
    text-transform: uppercase;
}

.not-found img{

    padding:50px 30px;
    margin-right: -90px;
   
    
}


/* start footer*/
.footer{
    position: relative;
    margin-top:10%;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-color:#323232;
    border-top: 2px solid #4e4e4e38;
    
   
}
.top-foo{
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 10px 5px;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);

}
.top-foo .footer-col{
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 20px 5px;


}
.top-foo .footer-col .site-name{
    font-style: normal;
    font-weight: 700;
   font-size: 30px;
   line-height: 45px;
   color: var(--main-color);
   text-align: center;
   padding-bottom: 5px;




}

.top-foo .footer-col h3{
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
    line-height: 38px;
    color: var(--main-color);
    text-align: center;
    padding-bottom: 5px;


}
.top-foo .footer-col p{
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 28px;
    color: var(--main-color);
    text-align: center;
    padding-bottom: 5px;




}

.top-foo .footer-col a li{
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 28px;
    color: var(--main-color);
    text-align: center;
    padding-bottom: 5px;


}
.footer .top-foo .footer-col .contact-info > h4{
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 28px;
    color: var(--main-color);
    text-align: center;
    padding-bottom: 5px;


}

.footer .bottom-foo{
    position: relative;
    width: 90%;
    height: 60px;
    z-index: 2;
    margin-left: 40px;
    margin-right: 40px;
    border-top: 2px solid #aaa6a6;


}
.footer .bottom-foo >h4{

    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 28px;
     text-align: center;
    color: var(--main-color);
    padding: 10px 30px 20px;
}

/* end footer*/