*
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
:root
{
    --main-color:#09567cfc;
    --padding-value:100px;
    --main-transition:0.5s;
}
html
{
    scroll-behavior: smooth;
}
body{
    font-family: 'Cairo', sans-serif;
    /* background-image: url(/Images/Wood.jpg); */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top;
    margin: 0;
    padding: 0;
    background-image: radial-gradient(#8c6941, #3f2508);
    overflow-x: hidden;
}
.landing-box_for_contactus
{
    background-image: url(../Images/Wood.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-color: #3f2508;
}
.landing-box
{
    background-image: url(../Images/studying-with-coffee-8jtkje1s3d537a6h.jpg );
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
@media screen and (max-width : 767px){
    .landing-box
    {
        padding-bottom: 100px;
        background-image: url(../Images/PicsArt_24-10-08_11-32-53-784.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom;
    }
    .landing-box svg 
    {
        display: none;
    }
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.container
{
    padding-left:15px;
    padding-right:15px;
    margin-left: auto;
    margin-right: auto;
}
/* Small Screen */
@media (min-width:768px)
{
    .container
    {
        width: 750px;
    }
}
/* Medium Screen */
@media (min-width:992px)
{
    .container
    {
        width: 970px;
    }
}
/* Large Screen */
@media (min-width:1200px)
{
    .container
    {
        width: 1180px;
    }
}
::-webkit-scrollbar
{
    width: 10px;
    
}
::-webkit-scrollbar-track
{
    background-color: #593100;
    /* border-top-right-radius: 10px;
    border-bottom-right-radius:10px ;
    border-top-left-radius: 10px;
    border-bottom-left-radius:10px ; */
}
::-webkit-scrollbar-thumb
{
    background-color: #d0a77a;
    /* border-top-right-radius: 10px;
    border-bottom-right-radius:10px ;
    border-top-left-radius: 10px;
    border-bottom-left-radius:10px ; */
}
::-webkit-scrollbar-thumb:hover
{
    background-color:  #b9946c;
}
.main-title::before
{
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #8f6230;
    left: 30%;
    top: 53%;
    transform: translateY(-50%);
    transition: var(--main-transition);
}
.main-title::after
{
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #8f6230;
    right: 30%;
    top: 53%;
    transform: translateY(-50%);
    transition: var(--main-transition);
}
.main-title:hover::before
{
    left: 39%;
    width: 0;       
    height: 0;
}
.main-title:hover::after
{
    right: 39%;
    width: 0;
    height: 0;
}
.main-title:hover
{
    color: #8f6230;
    transition-delay: 0.2s;
}
/* start header */
header
{
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 30px rgba(227, 228, 237, 0.37);
    border: 2px solid rgb(255 255 255 / 18%);      
    border-radius: 15px; 
    z-index: 10;
    position: relative;
}
header .container
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px auto;
    flex-wrap: wrap;
}
header .logo
{
    color: white;
    font-size: 30px;
    font-weight: 700;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
header .container .logo img 
{
    width: 250px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 2px;
}
header nav{
    display: flex;
}
header nav ul.head-ul a{
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:  0px 5px;
    height: 60px;
    transition: var(--main-transition);
    overflow: hidden;
    gap: 5px;
}
header nav ul.head-ul a.active 
{
    color: #d2a675;
}
header nav ul.head-ul a:hover 
{
    color: #d2a675;
}
header nav ul.head-ul{
    display: flex;
    margin-top: 0px;
    margin-bottom: 0px;
}
header nav .head-ul li{
    margin: 0px 10px;
    font-size: 18px;
    position: relative;
    overflow: hidden;
}
header nav .head-ul > li > a::before,
header nav .head-ul >.li > li > a::before
{
    content: '';
    width: 100%;
    position: absolute;
    background-color: #d0a77a;
    height: 2px;
    top: 0;
    left: -100%;
    transition: var(--main-transition);
}
header nav .head-ul li > a:hover::before
{
    color: #d0a77a;
    left: 0%;
    
}
header nav .head-ul li.li_courses 
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: var(--main-transition);
}
header nav .head-ul li.li_courses .li_courses_a
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: white;
}
header nav .head-ul li.li_courses .li_courses_a:hover 
{
    color: #d2a675;
}
header nav .head-ul li.li_courses ul.ul_courses
{
    background-color: #d2a675;
    color: wheat;
    border-radius: 5px;
    display: none;
    transition: var(--main-transition);
    flex-direction: column;
    top: 54px;
    right: 290px;
    position: fixed;
}
header nav .head-ul li.li_courses i 
{
    font-size: 13px;
    transform: rotate(180deg);
    transition: var(--main-transition);
}
header nav .head-ul li.li_courses:hover i 
{
    transform: rotate(0deg);
}
header nav .head-ul li.li_courses ul.ul_courses li
{
    margin: 0;
    transition: var(--main-transition);
    position: relative;
    z-index: 0;
}
header nav .head-ul li.li_courses ul.ul_courses li::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background-color: #8f6230;
    transition: var(--main-transition);
    z-index: -1;
}
header nav .head-ul li.li_courses ul.ul_courses li:first-child
{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
header nav .head-ul li.li_courses ul.ul_courses li:last-child
{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

}

header nav .head-ul li.li_courses ul.ul_courses li:hover::before
{
    width: 100%;
}
header nav .head-ul li.li_courses ul.ul_courses li:not(:last-child)
{
    border-bottom: 1px solid wheat;

}
header nav .head-ul li.li_courses ul.ul_courses a.a_courses
{
    color: wheat;
    padding: 5px 20px;
}
header nav .head-ul li.li_courses:hover ul.ul_courses
{
    display: flex;
}
@media (min-width : 500px) 
{
    header nav .head-ul li.li_courses ul.ul_courses 
    {
        right: 272px !important;
    }
}
@media screen and (max-width:600px)
{
    header nav .head-ul li.li_courses ul.ul_courses 
    {
        right: 286px ;
    }
}
@media screen and (min-width:600px) and (max-width :767px)
{
    header nav .head-ul li.li_courses ul.ul_courses 
    {
    right: 312px !important;
    }
}
@media screen and (max-width:767px)
{
    header .logo
    {
        width: 100%;
    }
    header nav ul.head-ul a
    {
        font-size: 12px;
        padding: 0px 2px;
    }
    header nav 
    {
        margin: 0px auto;
    }
    header nav .head-ul li.li_courses ul.ul_courses 
    {
        top: 117px !important;
        right: 182px ;
    }
    header nav .head-ul li.li_courses .li_courses_a
    {
        font-size: 13px;
    }
    header nav .head-ul li.li_courses .li_courses_a
    {
        gap: 4px;
    }
    header nav .head-ul li.li_courses i 
    {
        font-size: 12px;
    }
}

/* end header */

/* start landing page  */
.landing-page 
{
    align-items: center;
    display: flex;
    height: calc(100vh - 60px);
    overflow: hidden;
}
.landing.container
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.landing.container .landing-paragraph
{
    text-align: center;
    max-width: 780px;
    margin: auto;
}
.landing.container .landing-paragraph p
{
    color: white;
    line-height: 1.3;
    font-size: 42px;
    animation: scroll 2s forwards;
}
@keyframes scroll 
{
    from {transform: scale(0);}
    to {transform: scale(1.1);}
}
.landing.container .landing-paragraph p span 
{    
    color: #66492800;
    font-size: 50px;
    font-weight: bold;
    /* -webkit-text-stroke: 0.3vh #d0a77a; */
    position: relative;
    top: 3px;
}
.landing.container .landing-paragraph p span::before
{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 15px;
    width: 0%;
    height: 70px;
    color: #d0a77a;
    -webkit-text-stroke: 0vh #d0a77a;
    border-right: 2px solid #d0a77a;
    overflow: hidden;
    animation: typewriter 6s linear infinite;
}
.landing.container .contact button
{
    border: none;
    background-color: #EEE;
    font-size: 22px;
    font-weight: bold;
    border-radius: 12px;
    position: relative;
    transition: var(--main-transition);
    animation: scroll 2s forwards;
    margin-right: 5px;
}
.landing.container .contact button a 
{
    text-decoration: none;
    color: #d0a77a;
    transition: var(--main-transition);
    z-index: 10;
    position: relative;
    width: 100%;
    display: block;
    padding: 10px;
}
.landing.container .contact button::before
{
    content: '';
    background-color: #d0a77a;
    left: 0;
    top: 0;
    position: absolute;
    width: 0%;
    height: 100%;
    transition: var(--main-transition);
    z-index: 0;
    border-radius: 12px;
} 
.landing.container .contact button:hover::before{
    width: 100%;
}
.landing.container .contact button:hover a 
{
    color: white;
}
@keyframes typewriter 
{
    0%,10%,100% 
    {
        width: 0%;
    }
    70%,90% 
    {
        width: 96%;
    }
}
@media screen  and (max-width:767px ) {
    @keyframes typewriter-for-mobile 
{
    0%,10%,100% 
    {
        width: 0%;
    }
    70%,90% 
    {
        width: 100%;
    }
}
}
.landing.container img 
{
    width: 580px;
    height: 300px;
    position: relative;
    left: 25px;
    bottom: 25px;
    animation: up-and-down 4s linear infinite;
}
@keyframes up-and-down
{
    0%{top:-50px;}
    50%{top: 20px;}
    100%{top: -50px;}
}
@media screen and (max-width:767px) {
    .landing.container .landing-paragraph
    {
        margin: -80px auto 0;
    }
    .landing.container .landing-paragraph p {
        font-size: 30px;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .landing.container .landing-paragraph p span {
        font-size: 34px;
    }
    .landing.container .landing-paragraph p span::before
    {
        height: 40px;
        top: 11px;
        animation: typewriter-for-mobile 6s linear infinite;
    }
    .landing.container .contact button 
    {
        font-size: 14px;
    }
    .landing.container .contact button a 
    {
        padding: 5px;
    }
}
@media screen and (min-width:767px) and (max-width:1023px) {
    
}
.MAA_SEC .MAA_con
{
    height: 350px;
    width: 100%;
    background-image: url(../Images/MAA_SEC.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin-top: -30px;
    margin-bottom: 120px;
    border: 2px solid #d0a77a;
}
.MAA_SEC .MAA_con::before
{
    content: '';
    background: #000000d1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

}
.MAA_SEC .MAA_con .info 
{
    color: #d0a77a;
    text-align: center;
    transform: translateY(-50%);
    top: 50%;
    position: relative;
    font-size: 30px;
    line-height: 1;
    font-weight: bold;
}
.MAA_SEC .MAA_con button 
{
    border: none;
    background-color: #d0a77a;
    padding: 10px 20px;
    font-size: 22px;
    border-radius: 12px;
    position: relative;
    transition: var(--main-transition);
}

.MAA_SEC .MAA_con button a
{
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: var(--main-transition);
    z-index: 10;
    position: relative;
}
.MAA_SEC .MAA_con button::before
{
    content: '';
    background-color: white;
    left: 0;
    top: 0;
    position: absolute;
    width: 0%;
    height: 100%;
    transition: var(--main-transition);
    z-index: 0;
    border-radius: 12px;
}
.MAA_SEC .MAA_con button:hover::before{
    width: 100%;
}
.MAA_SEC .MAA_con button:hover a
{
    color: #d0a77a;
}
/* end landing page  */
.spikes {
    position: relative;
}
.spikes::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    top: 0px;
    z-index: 1;
    display: block;
    height: 60px;
    background-size: 30px 100%;
    background-image: linear-gradient(135deg, #d0a77a 25%, transparent 25%), linear-gradient(225deg, #d0a77a 25%, transparent 25%);
    background-position: 0 0;
}
/* start courses page  */
.courses-page
{
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    background-image: radial-gradient(#d2a675, #3f2508);
}
.courses-page .container{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 30px;
}
.courses-page p 
{
    color: white;
    font-size: 90px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    text-shadow: 3px 2px 5px #545454;
    position: relative;
    transition: var(--main-transition);
    margin: -40px auto 50px;
    text-shadow: 10px 12px 6px black;
}
.courses-page p::before 
{
    content: '';
    position: absolute;
    left: 30%;
    top: 50%;
    width: 15px;
    height: 15px;
    background-color: #d0a77a;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 0px 4px 3px #eee;
    transition: var(--main-transition);
}
.courses-page p::after
{
    content: '';
    position: absolute;
    right: 30%;
    top: 50%;
    width: 15px;
    height: 15px;
    background-color: #d0a77a;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 0px 4px 3px #eee;
    transition: var(--main-transition);
}
.courses-page:hover p
{
    color: #d0a77a;
}
.courses-page:hover p::after 
{
    right: 50%;
    width: 0;
    height: 0;
    box-shadow: 0px 0px 0px 0px #eee;
}
.courses-page:hover p::before
{
    left: 50%;
    width: 0;
    height: 0;
    box-shadow: 0px 0px 0px 0px #eee;
}
.courses-page .container .box
{
    background-color: white;
    position: relative;
    counter-increment: courses-page;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 7px 2px 20px black;
    transition: 3s;
}
.hidden {
    opacity: 0;
    transform: translateY(20px);
}

.visible {
    opacity: 1;
    transform: translateY(0px);
}
.courses-page .container .box::before
{   
    content: '';
    top: -3px;
    height: 6px;
    position: absolute;
    background-color: #8f6230   ;
    transform: translateX(-50%);
    left: 50%;
    width: 0;
    transition: var(--main-transition);
}
.courses-page .container .box:hover::before
{
    animation: courses-page 0.4s linear;
}
@keyframes courses-page {
    0%{width: 0;}
    100%{width: 100%;}    
}
.courses-page .container .box:hover
{
    transform: translateY(-10px);
    transition: 0.4s;
}
.courses-page .container .box img 
{
    width: 370px;
    height: 200px;
}
.courses-page .container .box h3
{
    text-align: center;
    font-size: 29px;
    font-weight: bold;
    color: #8f6230;
    margin: 10px auto 20px;
}
.courses-page .container .box .info 
{
    background-color: #f5f5f5;
    text-align: right;
    padding: 15px;
    position: relative;
    transition: var(--main-transition);
}
.courses-page .container .box .info::before 
{
    content: "0" counter(courses-page);
    background-color: #8f6230;
    position: absolute;
    left: 0;
    width: 80px;
    height: 100%;
    top: 0px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.courses-page .container .box .info::after
{
    content: '';
    position: absolute;
    width: 60px;
    height: 101%;
    top: 0px;
    background-color: #8f6230;
    left: 63px;
    transform: skewX(-25deg);
    transition: var(--main-transition);
}
.courses-page .container .box:hover .info::after
{
    width: 100%;
}
.courses-page .container .box:hover .info a 
{
    position: relative;
    z-index: 10;
    color: white;
    font-size: 15px;
}
.courses-page .container .box .info a{
    text-decoration: none;
    color: #8f6230;
    transition: var(--main-transition);
    z-index: 10;
    background-color: #8f6230 !important;
    color: white;
    padding: 5px;
    border-radius: 10px;
}
.courses-page .container .box:hover .info a{
    
    font-size: 15px;
    background-color: white !important;
    color: #8f6230;
}
.courses-page .container .box .info a:hover
{
    padding: 11px;
}
@media screen and (max-width:767px) {
    .courses-page {
        padding-bottom: 100px;
    }
    .courses-page p 
    {
        font-size: 68px;
        margin: -95px auto 100px;
    }
    .courses-page p::before 
    {
        left: 2%;
        width: 10px;
        height: 10px;
        top: 55%;
    }
    .courses-page p::after
    {
        right: 2%;
        width: 10px;
        height: 10px;
        top: 55%;
    } 
    .courses-page svg 
    {
        display: none;
    }
}
@media screen and (min-width : 767px) and (max-width : 1023px) {
    .courses-page p 
    {
        margin: -50px auto 100px;
    }
    .courses-page p::after 
    {
        right: 20%;
    }
    .courses-page p::before
    {
        left: 21%;
    } 
}
@media screen and (min-width:929px) and (max-width:1200px) {
    .courses-page .container .box img
    {
        width: 460px;
    }
}
/* end courses-page */
/* Start footer */
.footer
{
    padding: 70px 0px 0px;
    background-color: #8f6230;
}
.footer .cont
{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 20px;
    margin: 0px 130px;
}
.footer .cont .logo img 
{
    width: 200px;
    height: 40px;
    margin-bottom: 10px;
    margin-right: 5px;
}
@media screen and (min-width:1023px){
    .footer .cont .logo img 
    {
        position: relative;
        left: -10px;
    }
}
.footer .cont .box h3
{
    color: white;
    font-size: 30px;
    margin: 0px 0px 20px;
}
.footer .cont .box .social
{
    display: flex;
}
.footer .cont .box .social li
{
    margin: 0px 10px 0px 0px;
}
.footer .cont .box .social li a{
    background-color: #ffffff;
    color: #b9b9b9;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    transition: var(--main-transition);
    border-radius: 10px;
}
.footer .cont .box .social li:hover i 
{
    color: white;
}
.footer .cont .box .social .Telegram:hover,
.footer .cont .box .social .instagram:hover,
.footer .cont .box .social .email:hover
{
    background-color: #d0a77a;
}
.footer .cont .box .text
{
    color: #b9b9b9;
    line-height: 1.6;
}
.footer .cont .box ul.links li
{
    padding: 10px 0px;
    transition: var(--main-transition);
}
.footer .cont .box ul.links li:not(:last-child)
{
    border-bottom: 1px solid white;
}
.footer .cont .box ul.links li:hover
{
    padding-left: 10px;
}
.footer .cont .box ul.links li:hover a
{
    color: white;
}
.footer .cont .box ul.links li a
{
    text-decoration: none;
    color: #b9b9b9;
    transition: var(--main-transition);
}
.footer .cont .box ul.links li a::before
{
    content: "\f101";
    font-family: "font awesome 5 free";
    font-weight: 900;
    margin-right: 5px;
    color: white;
}
.footer .cont .box .line
{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b9b9b9;
    transition: var(--main-transition);
}
.footer .cont .box .line:hover 
{
    padding-left: 5px;
}
.footer .cont .box .line:hover i 
{
    color: #d0a77a;
}
.footer .cont .box .line i {
    margin-right: 10px;
    color: white;
    transition: var(--main-transition);
}
.footer .cont .box .line .info
{
    line-height: 1.6;
    flex: 1;
}
.footer .cont .box .line .info span
{
    display: block;
}
.footer .cont .footer-gallery img
{
    width: 77px;
    border: 3px solid white;
    margin: 3px;
}
.footer .copyright
{
    color: white;
    text-align: center;
    font-size: 20px;
    border-top: 1px solid white;
    margin: 50px 0px 0px;
    padding: 10px 0px;
}
.footer .cont .box.data 
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
@media (max-width:450px)
{
    .footer .cont .box{text-align: center;}
    .footer .cont .box .social{justify-content: center;}
    .footer .cont .box .line{flex-direction: column;}
    .footer .cont .box .line i{margin-bottom: 10px; margin-top: 10px;}
    .footer .cont .footer-gallery{text-align: center;}
    .footer .cont .links{text-align: center;}
    .footer .cont {margin: 0;}
}
/* End footer */
/* Start statistics */
.stats
{
    padding-top: var(--padding-value);
    padding-bottom: calc(var(--padding-value)*2);
    background-image: url(../images/stats.jpg);
    background-size: cover;
    width: 100%;
    min-height: 300px;
    position: relative;
    z-index: 0;
}
.stat {
    font-size: 2em;
    margin: 20px;
}
.number {
    font-size: 3em;
    color: #333;
}
.stats .container
{
    display: grid;
    grid-template-columns: repeat(auto-fill , minmax(300px , 1fr));
    gap: 60px;
    animation: opacity 2s linear forwards, translate 1s linear forwards;
}
.stats h1
{
    font-size: 90px;
    margin: -30px auto 100px;
    position: relative;
    width: fit-content;
    color: white;
    text-shadow: 10px 12px 6px black;
}
.stats h1::before
{
    content: '';
    position: absolute;
    left: -20%;
    top: 50%;
    width: 15px;
    height: 15px;
    background-color: #d0a77a;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 0px 4px 3px #eee;
    transition: var(--main-transition);
}
.stats h1::after 
{
    content: '';
    position: absolute;
    right: -20%;
    top: 50%;
    width: 15px;
    height: 15px;
    background-color: #d0a77a;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 0px 4px 3px #eee;
    transition: var(--main-transition);
}
.stats:hover h1
{
    color: #d0a77a ;
    transition-delay: 0.2s;
}
.stats:hover h1::before 
{
    left: 0;
    width: 0;
    height: 0;
    box-shadow: 0px 0px 0px 0px #eee;
}
.stats:hover h1::after 
{
    right: 0;
    width: 0;
    height: 0;
    box-shadow: 0px 0px 0px 0px #eee;
}
.stats .container .box 
{
    position: relative;
    transition: var(--main-transition);
    backdrop-filter: blur(5px);
    box-shadow: inset 0px 0px 30px rgba(227, 228, 237, 0.37);
    box-shadow: inset 0px 0px 30px rgba(227, 228, 237,);
    border: 2px solid rgb(255 255 255 / 18%);
    border-radius: 10px;
}
.stats .container .box:hover{
    transform: scale(1.06);
}
.stats .container .box::before
{
    content: "";
    position: absolute;
    width: 4px;
    left: 0;
    top: 0;
    height: 0%;
    background-color: white;
    transition: calc(var(--main-transition) + 0.6s);
    border-radius: 5px;
    border-top-left-radius: 45px;
    border-bottom-left-radius: 65px;
}
.stats .container .box::after
{
    content: "";
    position: absolute;
    width: 4px;
    right: 0;
    bottom: 0;
    height: 0%;
    background-color: white;
    transition: calc(var(--main-transition) + 0.6s);
    border-radius: 5px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.stats .container .box:hover::before,
.stats .container .box:hover::after
{
    height: 100%;
}
.stats .container .box i
{
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    margin: 20px 0px 10px;
    color: white;
    position: relative;
    font-size: 30px;
}
.stats .container .box:hover i
{
    color: #d0a77a;
}
.stats .container .box span
{
    display: flex;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0px 0px 10px;
    width: fit-content;
    font-size: 50px;
    font-weight: bold;
    color: white;
}
.stats .container .box h2
{
    display: flex;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0px 0px 20px;
    width: fit-content;
    font-size: 20px;
    color: white;
    font-style: italic;

}
@media screen and (max-width:767px){
    .stats h1 {    
        font-size: 68px;
        margin: -93px auto 30px;
    }
    .stats h1::before 
    {
        left: -8%;
        width: 10px;
        height: 10px;
        top: 55%;
    }
    .stats h1::after 
    {
        right : -8%;
        width: 10px;
        height: 10px;
        top: 55%;
    } 
}
/* End statistics */
/* start contact us  */
.contact-us h1{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    margin: 30px auto 30px;
    color: white;
    text-shadow: 10px 12px 6px black;
}
.contact-us-box{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
}
.contact-us-box .socialmedia 
{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    backdrop-filter: blur(5px);
    box-shadow: 0px 0px 30px rgba(227, 228, 237, 0.5);
    border: 2px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    height: 500px;
    width: 500px;
    transition: var(--main-transition);
    filter: drop-shadow(2px 4px 6px black);
    animation: opacity 2s linear forwards , translate 1s linear forwards;
}
@keyframes opacity {
    from {filter: opacity(0);}
    to {filter: opacity(1);}
}
@keyframes translate {
    from {transform: translateY(30px);}
    to {transform: translateY(0px);}
}
.contact-us-box .socialmedia:hover{
    transform: scale(1.02);
}
.socialmedia h2 
{
    color: #ffffff;
    font-size: 33px;
    text-shadow: 7px 7px 4px black;
    margin: 40px auto 0;
}
.contact-us-box .socialmedia .tele,
.contact-us-box .socialmedia .insta,
.contact-us-box .socialmedia .email 
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: white;
    background: #8f6230;
    border-radius: 10px;
    width: 350px;
    border: 1px solid white;
    overflow: hidden;
    transform: translateY(-50%);
    position: relative;
    top: 4%;
}
.contact-us-box .socialmedia .tele a i,
.contact-us-box .socialmedia .insta a i,
.contact-us-box .socialmedia .email a i
{
    margin-left: 10px;
} 
.contact-us-box .socialmedia .tele a,
.contact-us-box .socialmedia .insta a,
.contact-us-box .socialmedia .email a 
{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    font-size: 20px;
    height: 40px;
    position: relative;
    z-index: 1;
    transition: var(--main-transition);
    overflow: hidden;
}
.contact-us-box .socialmedia .tele a::before,
.contact-us-box .socialmedia .insta a::before,
.contact-us-box .socialmedia .email a::before
{
    content: '';
    width: 0%;
    height: 100%;
    background-color: white;
    z-index: -1;
    position: absolute;
    left: 0px;
    transition: var(--main-transition);
}
.contact-us-box .socialmedia .tele a:hover,
.contact-us-box .socialmedia .insta a:hover,
.contact-us-box .socialmedia .email a:hover
{
    color: #8f6230;
}
.contact-us-box .socialmedia .tele a:hover::before,
.contact-us-box .socialmedia .insta a:hover::before,
.contact-us-box .socialmedia .email a:hover::before
{
    width: 100%;
}
/* Start Discount */
.discount
{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    backdrop-filter: blur(5px);
    box-shadow: 0px 0px 30px rgba(227, 228, 237, 0.5);
    border: 2px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    height: 500px;
    border-radius: 50%;
    width: 500px;
    overflow: hidden;
    transition: var(--main-transition);
    filter: drop-shadow(2px 4px 6px black);
    animation: opacity 2s linear forwards , translate 1s linear forwards;
}
@media screen and (max-width:767px){
    
.contact-us-box .socialmedia .email a p
{
    font-size: 18px;
}
}
.discount:hover 
{
    transform: scale(1.02);
}
.discount .content
{
    text-align: center;
    color: white;
}
.discount .image
{
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../images/discount-background1.jpg);
    background-size: contain;
    position: relative;
    z-index: 1;
    animation: change-background 10s linear infinite;
    background-attachment: fixed;
    background-repeat: round;
}
.discount .image::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-color: hsl(206.57deg 89.74% 54.12% / 91%);
    width: 100%;
    height: 100%;
    z-index: -1;
}
.discount .image img
{
    width: 300px;
    max-width: 100%;
    position: relative;
    bottom: -72px;
    margin-left: -50px;
}
.discount .image h2
{
    font-size: 40px;
    margin: 0;
}
.discount .image p
{
    line-height: 1.6;
    max-width: 500px;
    margin: 10px auto 0px;
}
.discount .form
{
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}
.discount .form .content
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.discount .form .content h2
{
    color: #ffffff;
    font-size: 33px;
    text-shadow: 7px 7px 4px black;
    margin: 40px auto 40px ;
}
.discount .form form
{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.discount .form input,
.discount .form .input
{
    width: 350px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background-color: #f3f3f3;
    caret-color: var(--main-color);
    padding-left: 10px;
    box-shadow: 3px 3px 6px 0px #cdcaca;
}
.discount .form textarea
{
    height: 60px !important;
    padding-top: 10px;
}
.discount .form input::placeholder,
.discount .form .input::placeholder
{
    padding-left:10px ;
}
.discount .form input:focus,
.discount .form .input:focus
{
    outline: none;
    box-shadow: 3px 3px 6px 0px var(--main-color);
}
.discount .form input[type="submit"]
{
    background-color: white;
    color: #8f6230;
    transition: var(--main-transition);
    font-size: 20px;
    position: relative;
    cursor: pointer;
}
.discount .form input[type="submit"]:hover
{
    background-color: #8f6230;
    color: white;
}
@media (max-width:450px)
{
    .discount .image{flex-basis: 100%;}
    .discount .image h2{margin: 30px;}
    .discount .image img{bottom: -15px; margin-left: -30px;}
    .discount .form{flex-basis: 100%;margin-bottom:20px}
    .discount .form .content h2 
    {
        margin: 20px auto 40px;
    }
    .socialmedia h2 
    {
        margin: 40px auto 0;
    }

}
@media (min-width:451px) and (max-width:537px)
{
    .discount .image{flex-basis: 100%;}
    .discount .image img{bottom: -16px;}
}
@media screen and (min-width : 767px ) and (max-width : 1023px) {
    .discount .form .content h2 
    {
        margin: 20px auto 40px;
    }
    .socialmedia h2 
    {
        margin: 20px auto 0;
    }
}
/* End Discount */
@media (max-width:767px)
{
    .contact-us h1
    {
        font-size: 37px;
        margin: 10px auto 50px;
    }
    .contact-us-box
    {
        flex-direction: column;
        margin-bottom: 50px;
    }
    .discount,
    .contact-us-box .socialmedia
    {
        border-radius: 10px;
        width: 350px;
        height: 430px;
    }
    .contact-us-box .socialmedia .tele, .contact-us-box .socialmedia .insta, .contact-us-box .socialmedia .email
    {
        width: 330px;
    }
    .discount .form input, .discount .form .input
    {
        width: 310px;
    }
}
@media screen and (min-width:767px) and (max-width:1023px)
{
    .discount,
    .contact-us-box .socialmedia
    {
        border-radius: 10px;
        width: 350px;
        height: 430px;
    }
    .contact-us-box .socialmedia .tele, .contact-us-box .socialmedia .insta, .contact-us-box .socialmedia .email
    {
        width: 330px;
    }
    .discount .form input, .discount .form .input
    {
        width: 330px;
    }
    .footer .cont
    {
        text-align: center;
    }
    .footer .cont .box .social
    {
        justify-content: center;
    }
}
/* end contact us  */
/* start trading courses page */
h2.trading-courses-title,
h2.editing-courses-title,
h2.fitness-courses-title,
h2.social-media-courses-title,
h2.coding-courses-title,
h2.design-courses-title,
h2.financial-courses-title
{
    color: white;
    font-size: 70px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    position: relative;
    transition: var(--main-transition);
    margin: 30px auto 30px;
    text-shadow: 10px 12px 6px black;
}
h2.social-media-courses-title{
    font-size: 64px;
    margin: 30px auto 30px;
}
.trading-courses marquee,
.editing-courses marquee,
.fitness-courses marquee,
.coding-courses marquee,
.financial-courses marquee,
.design-courses marquee,
.social-media-courses marquee
{
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 30px rgba(227, 228, 237, 0.37);
    border: 2px solid rgb(255 255 255 / 18%);
    border-radius: 15px;
    color: white;
    font-size: 30px;
}
.trading-courses .boxes ,
.editing-courses .boxes ,
.fitness-courses .boxes ,
.coding-courses .boxes ,
.financial-courses .boxes ,
.design-courses .boxes ,
.social-media-courses .boxes 
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 30px;
    margin: 10px 20px 100px;
}
.trading-courses .boxes .box ,
.editing-courses .boxes .box ,
.fitness-courses .boxes .box ,
.coding-courses .boxes .box ,
.financial-courses .boxes .box ,
.design-courses .boxes .box ,
.social-media-courses .boxes .box 
{
    background-color: wheat;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 6px 9px 8px 1px black;
    transition: 2s;
    counter-increment: C_num;
}
.trading-courses .boxes .box:hover, 
.editing-courses .boxes .box:hover ,
.social-media-courses .boxes .box:hover ,
.fitness-courses .boxes .box:hover ,
.financial-courses .boxes .box:hover ,
.design-courses .boxes .box:hover ,
.coding-courses .boxes .box:hover 
{
    transform: translateY(-10px);
    transition: var(--main-transition);
}
.trading-courses .boxes .box img ,
.editing-courses .boxes .box img ,
.fitness-courses .boxes .box img ,
.coding-courses .boxes .box img ,
.financial-courses .boxes .box img ,
.design-courses .boxes .box img ,
.social-media-courses .boxes .box img 
{
    width: 420px;
    height: 230px;
    width: 100%;
}
.trading-courses .boxes .box .info h2 ,
.editing-courses .boxes .box .info h2 ,
.fitness-courses .boxes .box .info h2 ,
.coding-courses .boxes .box .info h2 ,
.financial-courses .boxes .box .info h2 ,
.design-courses .boxes .box .info h2 ,
.social-media-courses .boxes .box .info h2 
{
    text-align: center;
    min-height: 135px;
    position: relative;
    padding: 0 5px 0 20px;
}
.trading-courses .boxes .box .info h2::before ,
.editing-courses .boxes .box .info h2::before ,
.fitness-courses .boxes .box .info h2::before ,
.coding-courses .boxes .box .info h2::before,
.financial-courses .boxes .box .info h2::before ,
.design-courses .boxes .box .info h2::before ,
.social-media-courses .boxes .box .info h2::before 
{
    content: counter(C_num);
    position: absolute;
    width: 6%;
    height: 50px;
    background-color: #d0a77a;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    color: white;
    top: -3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.trading-courses .boxes .box .info .data .description ,
.editing-courses .boxes .box .info .data .description ,
.fitness-courses .boxes .box .info .data .description ,
.coding-courses .boxes .box .info .data .description ,
.financial-courses .boxes .box .info .data .description ,
.design-courses .boxes .box .info .data .description ,
.social-media-courses .boxes .box .info .data .description 
{
    text-align: center;
    overflow-y: scroll;
    max-height: 140px;
    min-height: 140px;
    padding: 0 6px;
    text-transform: capitalize;
}
.trading-courses .boxes .box .info .data .description::-webkit-scrollbar,
.editing-courses .boxes .box .info .data .description::-webkit-scrollbar,
.fitness-courses .boxes .box .info .data .description::-webkit-scrollbar,
.coding-courses .boxes .box .info .data .description::-webkit-scrollbar,
.financial-courses .boxes .box .info .data .description::-webkit-scrollbar,
.design-courses .boxes .box .info .data .description::-webkit-scrollbar,
.social-media-courses .boxes .box .info .data .description::-webkit-scrollbar
{
    width: 0px;
    
}
.trading-courses .boxes .box .info .data .description::-webkit-scrollbar-track,
.editing-courses .boxes .box .info .data .description::-webkit-scrollbar-track,
.fitness-courses .boxes .box .info .data .description::-webkit-scrollbar-track,
.coding-courses .boxes .box .info .data .description::-webkit-scrollbar-track,
.financial-courses .boxes .box .info .data .description::-webkit-scrollbar-track,
.design-courses .boxes .box .info .data .description::-webkit-scrollbar-track,
.social-media-courses .boxes .box .info .data .description::-webkit-scrollbar-track
{
    background-color: #593100;
}
.trading-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb,
.editing-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb,
.fitness-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb,
.coding-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb,
.financial-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb,
.design-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb,
.social-media-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb
{
    background-color: #d0a77a;
}
.trading-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb:hover,
.editing-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb:hover,
.fitness-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb:hover,
.coding-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb:hover,
.financial-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb:hover,
.design-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb:hover,
.social-media-courses .boxes .box .info .data .description::-webkit-scrollbar-thumb:hover
{
    background-color:  #b9946c;
}
.trading-courses .boxes .box .info .data .instructor_name ,
.editing-courses .boxes .box .info .data .instructor_name ,
.fitness-courses .boxes .box .info .data .instructor_name ,
.coding-courses .boxes .box .info .data .instructor_name ,
.financial-courses .boxes .box .info .data .instructor_name ,
.design-courses .boxes .box .info .data .instructor_name ,
.social-media-courses .boxes .box .info .data .instructor_name 
{
    border-top: 1px solid;
    border-bottom: 1px solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px;
    font-weight: bold;
    position: relative;
    transition: var(--main-transition);
    z-index: 10;
} 
.trading-courses .boxes .box .info .data .instructor_name::before ,
.trading-courses .boxes .box .info .price p::before,
.editing-courses .boxes .box .info .data .instructor_name::before ,
.editing-courses .boxes .box .info .price p::before,
.fitness-courses .boxes .box .info .data .instructor_name::before ,
.fitness-courses .boxes .box .info .price p::before,
.coding-courses .boxes .box .info .data .instructor_name::before ,
.coding-courses .boxes .box .info .price p::before,
.financial-courses .boxes .box .info .data .instructor_name::before ,
.financial-courses .boxes .box .info .price p::before,
.design-courses .boxes .box .info .data .instructor_name::before ,
.design-courses .boxes .box .info .price p::before,
.social-media-courses .boxes .box .info .data .instructor_name::before ,
.social-media-courses .boxes .box .info .price p::before
{
    content: '';
    position: absolute;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #d2a675;
    transition: var(--main-transition);
    z-index: -1;
}
.trading-courses .boxes .box .info .data .instructor_name:hover::before ,
.trading-courses .boxes .box .info .price p:hover::before,
.editing-courses .boxes .box .info .data .instructor_name:hover::before ,
.editing-courses .boxes .box .info .price p:hover::before,
.fitness-courses .boxes .box .info .data .instructor_name:hover::before ,
.fitness-courses .boxes .box .info .price p:hover::before,
.coding-courses .boxes .box .info .data .instructor_name:hover::before ,
.coding-courses .boxes .box .info .price p:hover::before,
.financial-courses .boxes .box .info .data .instructor_name:hover::before ,
.financial-courses .boxes .box .info .price p:hover::before,
.design-courses .boxes .box .info .data .instructor_name:hover::before ,
.design-courses .boxes .box .info .price p:hover::before,
.social-media-courses .boxes .box .info .data .instructor_name:hover::before ,
.social-media-courses .boxes .box .info .price p:hover::before
{
    width: 100%;
}
.trading-courses .boxes .box .info .price p:hover,
.trading-courses .boxes .box .info .data .instructor_name:hover,
.editing-courses .boxes .box .info .price p:hover,
.editing-courses .boxes .box .info .data .instructor_name:hover,
.fitness-courses .boxes .box .info .price p:hover,
.fitness-courses .boxes .box .info .data .instructor_name:hover,
.coding-courses .boxes .box .info .price p:hover,
.coding-courses .boxes .box .info .data .instructor_name:hover,
.financial-courses .boxes .box .info .price p:hover,
.financial-courses .boxes .box .info .data .instructor_name:hover,
.design-courses .boxes .box .info .price p:hover,
.design-courses .boxes .box .info .data .instructor_name:hover,
.social-media-courses .boxes .box .info .price p:hover,
.social-media-courses .boxes .box .info .data .instructor_name:hover
{
    padding: 5px;
}
.trading-courses .boxes .box .info .price p ,
.editing-courses .boxes .box .info .price p ,
.fitness-courses .boxes .box .info .price p ,
.coding-courses .boxes .box .info .price p ,
.financial-courses .boxes .box .info .price p ,
.design-courses .boxes .box .info .price p ,
.social-media-courses .boxes .box .info .price p 
{
    border-top: 1px solid;
    border-bottom: 1px solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px;
    font-weight: bold;
    position: relative;
    transition: var(--main-transition);
    z-index: 10;
}
.trading-courses .boxes .box .info .price p span ,
.editing-courses .boxes .box .info .price p span ,
.fitness-courses .boxes .box .info .price p span ,
.coding-courses .boxes .box .info .price p span ,
.financial-courses .boxes .box .info .price p span ,
.design-courses .boxes .box .info .price p span ,
.social-media-courses .boxes .box .info .price p span 
{
    transition: var(--main-transition);
}
.trading-courses .boxes .box .info .price p:hover span.org_pri,
.editing-courses .boxes .box .info .price p:hover span.org_pri ,
.fitness-courses .boxes .box .info .price p:hover span.org_pri ,
.coding-courses .boxes .box .info .price p:hover span.org_pri ,
.financial-courses .boxes .box .info .price p:hover span.org_pri ,
.design-courses .boxes .box .info .price p:hover span.org_pri ,
.social-media-courses .boxes .box .info .price p:hover span.org_pri 
{
    color: red;
}
.trading-courses .boxes .box .info .price p:hover span.us_pri,
.editing-courses .boxes .box .info .price p:hover span.us_pri,
.fitness-courses .boxes .box .info .price p:hover span.us_pri,
.coding-courses .boxes .box .info .price p:hover span.us_pri,
.financial-courses .boxes .box .info .price p:hover span.us_pri,
.design-courses .boxes .box .info .price p:hover span.us_pri,
.social-media-courses .boxes .box .info .price p:hover span.us_pri
{
    color: green;
}
.trading-courses .boxes .box .buttons,
.editing-courses .boxes .box .buttons,
.fitness-courses .boxes .box .buttons,
.coding-courses .boxes .box .buttons,
.financial-courses .boxes .box .buttons,
.design-courses .boxes .box .buttons,
.social-media-courses .boxes .box .buttons
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: white;
    width: fit-content;
    margin: 0 auto 10px;
    padding: 0px 25px;
    border-radius: 10px;
    font-size: 20px;
    height: 50px;
    position: relative;
    z-index: 10;
}
.trading-courses .boxes .box .buttons::before,
.editing-courses .boxes .box .buttons::before,
.fitness-courses .boxes .box .buttons::before,
.coding-courses .boxes .box .buttons::before,
.financial-courses .boxes .box .buttons::before,
.design-courses .boxes .box .buttons::before,
.social-media-courses .boxes .box .buttons::before
{
    content: '';
    left: 0;
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 2%;
    background: #d2a675;
    transition: var(--main-transition);
    border-radius: 10px;
}
.trading-courses .boxes .box .buttons:hover::before,
.editing-courses .boxes .box .buttons:hover::before,
.fitness-courses .boxes .box .buttons:hover::before,
.coding-courses .boxes .box .buttons:hover::before,
.financial-courses .boxes .box .buttons:hover::before,
.design-courses .boxes .box .buttons:hover::before,
.social-media-courses .boxes .box .buttons:hover::before
{
    width: 100%;
}
.trading-courses .boxes .box .buttons p ,
.editing-courses .boxes .box .buttons p ,
.fitness-courses .boxes .box .buttons p ,
.coding-courses .boxes .box .buttons p ,
.financial-courses .boxes .box .buttons p ,
.design-courses .boxes .box .buttons p ,
.social-media-courses .boxes .box .buttons p 
{
    color: #8f6230;
}
.trading-courses .boxes .box .buttons:hover p ,
.editing-courses .boxes .box .buttons:hover p ,
.fitness-courses .boxes .box .buttons:hover p ,
.coding-courses .boxes .box .buttons:hover p ,
.financial-courses .boxes .box .buttons:hover p ,
.design-courses .boxes .box .buttons:hover p ,
.social-media-courses .boxes .box .buttons:hover p 
{
    color: white;
}
.trading-courses .boxes .box .buttons:hover button.tele,
.trading-courses .boxes .box .buttons:hover button.insta,
.editing-courses .boxes .box .buttons:hover button.tele,
.editing-courses .boxes .box .buttons:hover button.insta,
.fitness-courses .boxes .box .buttons:hover button.tele,
.fitness-courses .boxes .box .buttons:hover button.insta,
.coding-courses .boxes .box .buttons:hover button.tele,
.coding-courses .boxes .box .buttons:hover button.insta,
.financial-courses .boxes .box .buttons:hover button.tele,
.financial-courses .boxes .box .buttons:hover button.insta,
.design-courses .boxes .box .buttons:hover button.tele,
.design-courses .boxes .box .buttons:hover button.insta,
.social-media-courses .boxes .box .buttons:hover button.tele,
.social-media-courses .boxes .box .buttons:hover button.insta
{
    background-color: white;
}
.trading-courses .boxes .box .buttons:hover button.tele a,
.trading-courses .boxes .box .buttons:hover button.insta a,
.editing-courses .boxes .box .buttons:hover button.tele a,
.editing-courses .boxes .box .buttons:hover button.insta a,
.fitness-courses .boxes .box .buttons:hover button.tele a,
.fitness-courses .boxes .box .buttons:hover button.insta a,
.coding-courses .boxes .box .buttons:hover button.tele a,
.coding-courses .boxes .box .buttons:hover button.insta a,
.financial-courses .boxes .box .buttons:hover button.tele a,
.financial-courses .boxes .box .buttons:hover button.insta a,
.design-courses .boxes .box .buttons:hover button.tele a,
.design-courses .boxes .box .buttons:hover button.insta a,
.social-media-courses .boxes .box .buttons:hover button.tele a,
.social-media-courses .boxes .box .buttons:hover button.insta a
{
    color: #d2a675;
}
.trading-courses .boxes .box .buttons button.tele,
.trading-courses .boxes .box .buttons button.insta,
.editing-courses .boxes .box .buttons button.tele,
.editing-courses .boxes .box .buttons button.insta,
.fitness-courses .boxes .box .buttons button.tele,
.fitness-courses .boxes .box .buttons button.insta,
.coding-courses .boxes .box .buttons button.tele,
.coding-courses .boxes .box .buttons button.insta,
.financial-courses .boxes .box .buttons button.tele,
.financial-courses .boxes .box .buttons button.insta,
.design-courses .boxes .box .buttons button.tele,
.design-courses .boxes .box .buttons button.insta,
.social-media-courses .boxes .box .buttons button.tele,
.social-media-courses .boxes .box .buttons button.insta
{
    border: none;
    background-color: #d2a675;
    border-radius: 10px;
    transition: var(--main-transition);
}
.trading-courses .boxes .box .buttons button.tele:hover,
.trading-courses .boxes .box .buttons button.insta:hover,
.editing-courses .boxes .box .buttons button.tele:hover,
.editing-courses .boxes .box .buttons button.insta:hover,
.fitness-courses .boxes .box .buttons button.tele:hover,
.fitness-courses .boxes .box .buttons button.insta:hover,
.coding-courses .boxes .box .buttons button.tele:hover,
.coding-courses .boxes .box .buttons button.insta:hover,
.financial-courses .boxes .box .buttons button.tele:hover,
.financial-courses .boxes .box .buttons button.insta:hover,
.design-courses .boxes .box .buttons button.tele:hover,
.design-courses .boxes .box .buttons button.insta:hover,
.social-media-courses .boxes .box .buttons button.tele:hover,
.social-media-courses .boxes .box .buttons button.insta:hover
{
    background-color: #8f6230;
}
.trading-courses .boxes .box .buttons button.tele:hover a,
.trading-courses .boxes .box .buttons button.insta:hover a,
.editing-courses .boxes .box .buttons button.tele:hover a,
.editing-courses .boxes .box .buttons button.insta:hover a,
.fitness-courses .boxes .box .buttons button.tele:hover a,
.fitness-courses .boxes .box .buttons button.insta:hover a,
.coding-courses .boxes .box .buttons button.tele:hover a,
.coding-courses .boxes .box .buttons button.insta:hover a,
.financial-courses .boxes .box .buttons button.tele:hover a,
.financial-courses .boxes .box .buttons button.insta:hover a,
.design-courses .boxes .box .buttons button.tele:hover a,
.design-courses .boxes .box .buttons button.insta:hover a,
.social-media-courses .boxes .box .buttons button.tele:hover a,
.social-media-courses .boxes .box .buttons button.insta:hover a
{
    color: white;
}
.trading-courses .boxes .box .buttons button.tele a,
.trading-courses .boxes .box .buttons button.insta a,
.editing-courses .boxes .box .buttons button.tele a,
.editing-courses .boxes .box .buttons button.insta a,
.fitness-courses .boxes .box .buttons button.tele a,
.fitness-courses .boxes .box .buttons button.insta a,
.coding-courses .boxes .box .buttons button.tele a,
.coding-courses .boxes .box .buttons button.insta a,
.financial-courses .boxes .box .buttons button.tele a,
.financial-courses .boxes .box .buttons button.insta a,
.design-courses .boxes .box .buttons button.tele a,
.design-courses .boxes .box .buttons button.insta a,
.social-media-courses .boxes .box .buttons button.tele a,
.social-media-courses .boxes .box .buttons button.insta a
{
    color: white;
    width: 100%;
    display: flex;
    padding: 10px 8px;
    text-decoration: none;
    font-size: 19px;
    transition: var(--main-transition);
}
@media screen and (max-width : 767px) {
    h2.trading-courses-title, h2.editing-courses-title, h2.fitness-courses-title, h2.social-media-courses-title, h2.coding-courses-title, h2.design-courses-title, h2.financial-courses-title
    {
        font-size: 45px;
        margin: 24px auto 30px;
        text-align: center;
    }
    .trading-courses .boxes, .editing-courses .boxes, .fitness-courses .boxes, .coding-courses .boxes, .financial-courses .boxes, .design-courses .boxes, .social-media-courses .boxes
    {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    .trading-courses .boxes .box img, .editing-courses .boxes .box img, .fitness-courses .boxes .box img, .coding-courses .boxes .box img, .financial-courses .boxes .box img, .design-courses .boxes .box img, .social-media-courses .boxes .box img
    {
        
        width: 100% !important;
    }
    .Facebook_Money_Masterclass_span
    {
        font-size: 15px;
    }
}
@media screen and (min-width:767px) and (max-width : 1023px){
    .trading-courses .boxes .box img, .editing-courses .boxes .box img, .fitness-courses .boxes .box img, .coding-courses .boxes .box img, .financial-courses .boxes .box img, .design-courses .boxes .box img, .social-media-courses .boxes .box img
    {
        width: 100% !important;
    }
    h2.trading-courses-title, h2.editing-courses-title, h2.fitness-courses-title, h2.social-media-courses-title, h2.coding-courses-title, h2.design-courses-title, h2.financial-courses-title
    {
        font-size: 60px;
        margin: -4px auto 30px;
    }
    h2.social-media-courses-title
    {
        font-size: 49px;
    }
}
/* end trading courses page */