/*================================= 1 Reset Css ( #res ) =================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{text-decoration:none;outline:0;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:#E35925;transition:all 0.5s ease 0s;}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}hr{display:block;height:1px;border:0;border-top:1px solid #ababab;margin:50px auto; padding:0}

/*================================= 2 Font Face ( #face ) =================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nunito", sans-serif;
}

/*================================= 3  Inputs ( #input ) =================================*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0;}
::-webkit-input-placeholder {color:#343434; font-style:normal;}
:-moz-placeholder {color:#343434; font-style:normal;}
::-moz-placeholder {color:#343434; font-style:normal;}
:-ms-input-placeholder {color: #343434; font-style:normal;}
button::-moz-focus-inner {border: 0}
:focus {outline:none;border-color: var(--primary_color) !important;}
::-moz-focus-inner {border:0;}

ul{list-style:none; margin:0; padding:0;}
li{list-style:none;}
img{max-width: 100%;}

body{font-family: "Nunito", sans-serif; line-height: 1; color:#434040}

h1{font-size: 32px;font-weight: 500;text-align: center;}
h2{font-size: 32px;font-weight: 600;margin-bottom: 50px;}
h3{font-size: 20px;font-weight: 600;line-height: 30px;transition: all 0.5s ease;}
h4{font-size: 24px;font-weight: 600;line-height: 30px;}
h5{font-size: 20px;font-weight: 600;line-height: 28px;}
p{font-size: 18px;line-height: 30px;color: var(--description_color);text-align: justify;word-spacing: 1px;hyphens: auto;}
a{color: #434040;}
a:hover{transition: all 0.5s ease;}

.container{max-width: 1360px;margin-right: auto;margin-left: auto;padding-right: 20px;padding-left: 20px;}
.text-center{text-align: center}
.py-100{padding-top: 80px;padding-bottom: 80px;}
.pb-100{padding-bottom: 80px;}

/* ================================= 6 Custom CSS #custome ================================= */	

.main{padding-top: 85px;}

.burger-container {position: relative;height: 28px;width: 36px;}
.burger-bun-top, .burger-bun-bot, .burger-filling {position: absolute;display: block;height: 2px;width: 25px;border-radius: 2px;background: #000;}
.burger-bun-top {top: 4px;transform-origin: 34px 0px;}
.burger-bun-bot {bottom: 6px;transform-origin: 21px 8px;}
.burger-filling {top: 12px;}
.hamburglar.is-open .burger-bun-top {animation: bun-top-out 0.6s linear normal;animation-fill-mode:forwards;}
.hamburglar.is-open .burger-bun-bot {animation: bun-bot-out 0.6s linear normal;animation-fill-mode:forwards;}
.hamburglar.is-closed .burger-bun-top{animation: bun-top-in 0.6s linear normal;animation-fill-mode:forwards;}
.hamburglar.is-closed .burger-bun-bot {animation: bun-bot-in 0.6s linear normal;animation-fill-mode:forwards;}
  
@keyframes bun-top-out {
    0% {
        left: 0;
        top: 0;
        transform: rotate(0deg);
    }
    20% {
        left: 0;
        top: 0;
        transform: rotate(15deg);
    }
    80% {
        left: -5px;
        top: 0;
        transform: rotate(-50deg);
    }
    100% {
        left: -5px;
        top: 1px;
        transform: rotate(-45deg);
    }
}
  
@keyframes bun-bot-out {
    0% {
        left: 0;
        transform: rotate(0deg);
    }
    20% {
        left: 0;
        transform: rotate(-15deg);
    }
    80% {
        left: -5px;
        transform: rotate(50deg);
    }
    100% {
        left: -5px;
        transform: rotate(45deg);
    }
}
  
@keyframes bun-top-in {
    0% {
        left: -5px;
        bot: 0;
        transform: rotate(-45deg);
    }
    20% {
        left: -5px;
        bot: 0;
        transform: rotate(-50deg);
    }
    80% {
        left: 0;
        bot: 0;
        transform: rotate(15deg);
    }
    100% {
        left: 0;
        bot: 1px;
        transform: rotate(0deg);
    }
}
  
@keyframes bun-bot-in {
    0% {
        left: -5px;
        transform: rotate(45deg);
    }
    20% {
        left: -5px;
        bot: 0;
        transform: rotate(50deg);
    }
    80% {
        left: 0;
        bot: 0;
        transform: rotate(-15deg);
    }
    100% {
        left: 0;
        transform: rotate(0deg);
    }
}

.hamburglar.is-open .burger-filling{animation: burger-fill-out 0.6s linear normal;animation-fill-mode:forwards;}
.hamburglar.is-closed .burger-filling{animation: burger-fill-in 0.6s linear normal;animation-fill-mode:forwards;}
  
@keyframes burger-fill-in {
    0% {
        width: 0;
        left: 36px;
    }
    40% {
        width: 0;
        left: 40px;
    }
    80% {
        width: 25px;
        left: -6px;
    }
    100% {
        width: 25px;
        left: 0px;
    }
}
  
@keyframes burger-fill-out {
    0% {
        width: 25px;
        left: 0px;
    }
    20% {
        width: 42px;
        left: -6px;
    }

    40% {
        width: 0;
        left: 40px;
    }

    100% {
        width: 0;
        left: 36px;
    }
}

header{display: flex;align-items: center;justify-content: space-between;padding: 0 20px;position: fixed;top: 0;width: 100%;background-color: #fff;z-index: 10;}
.scrollTop, .scrollDown {box-shadow: 2px 4px 12px #00000014;}
.nav{display: flex;gap: 20px;align-items: center;font-size: 18px;}
.nav li a{display: inline-block;padding: 35px 0;}
.nav li a:hover{color: #E35925;}
.hamburglar{display: none;}

.material_wrapper ul{display: flex;flex-wrap: wrap;gap: 30px;justify-content: center;}
.material_wrapper ul li{max-width: 230px;border: 2px solid rgba(0, 0, 0, 0.10);border-radius: 10px;padding: 30px;text-align: center;position: relative;transition: all 0.5s ease;}
.material_wrapper ul li::after{content: '';position: absolute;width: 20px;height: 20px;background-image: url(/images/arrow.svg);background-repeat: no-repeat;background-size: contain;display: inline-block;right: 10px;bottom: 10px;transition: all 0.5s ease;}
.material_wrapper ul li:hover::after{transform: rotate(-45deg);}
.material_wrapper ul li:hover{border-color: #E35925;}
.material_wrapper ul li h3{padding: 20px 0;}

.content_wrapper h2{text-align: center;}
.content_wrapper p:not(:last-child){margin-bottom: 20px;}

.sphere_enlightenment{background-image: url(/images/sphere-bg.jpg);background-repeat: no-repeat;background-size: cover;background-position: center center;}
.sphere_enlightenment h2{color: #fff;text-align: center;}
.sphere_enlightenment ul{display: flex;flex-wrap: wrap;gap: 30px;justify-content: center;}
.sphere_enlightenment ul li{max-width: 362px;background-color: #fff;border: 2px solid rgba(0, 0, 0, 0.10);border-radius: 10px;padding: 40px;transition: all 0.5s ease;}
.sphere_enlightenment ul li:hover{border-color: #E35925;}
.sphere_enlightenment ul p{padding: 25px 0;}
.sphere_enlightenment ul span{font-weight: 600;color: #E35925;}

.enlightenment_links h2{text-align: center;}
.link_wrapper{display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}
.link_wrapper a{max-width: 280px;}
.link_wrapper a:hover{transform: scale(1.05);}

footer{background-image: url(/images/footer-bg.png);background-repeat: no-repeat;background-size: cover;padding-top: 60px;padding-bottom: 60px;}
.footer_wrapper{display: flex;gap: 20px;justify-content: space-between;flex-wrap: wrap;}
.footer_wrapper div p{max-width: 443px;font-size: 16px;line-height: 22px;margin-top: 30px;margin-bottom: 10px;}
.footer_wrapper p a{color: #E35925;}
.footer_wrapper p a:hover{font-weight: 700;}
.footer_wrapper div > a{font-weight: 600;}
.footer_wrapper div > a:hover{color: #E35925;}
.footer_wrapper ul a:hover{color: #E35925;}
.footer_wrapper h5{margin-bottom: 20px;}
.footer_wrapper ul li{margin-bottom: 20px;}
.social_icon ul{display: flex;gap: 10px;}
.social_icon ul li:hover{transform: scale(1.05);}

.footer_bottom{display: flex;justify-content: space-between;padding-top: 20px;padding-bottom: 20px;gap: 10px;}
.footer_bottom p{font-size: 16px;}
.sitemap_list a:hover, .footer_bottom a:hover{color: #E35925;}


.content_wrapper p a{color: #E35925;}
.content_wrapper p a:hover{text-decoration: underline;}

.sitemap_list{padding-top: 20px;display: flex;flex-wrap: wrap;justify-content: space-between;gap: 20px;}
.sitemap_list h5{margin-bottom: 20px;}
.sitemap_list a{display: block;position: relative;padding-left: 20px;font-weight: 500;margin-bottom: 30px;}
.sitemap_list a::after{content: '';position: absolute;width: 5px;height: 5px;border-radius: 7px;background-color: #E35925;left: 0;top: 50%;transform: translateY(-50%);}
.sitemap_list a:last-child{margin-bottom: 0;}


@media (max-width:1280px) and (min-width:1024px){
    .py-100 {padding-top: 40px;padding-bottom: 40px;}
    .pb-100 {padding-bottom: 40px;}

    .nav_logo{max-width: 220px;}
    .nav li a{font-size: 15px;}
}

@media (max-width:1023px){
    .py-100 {padding-top: 40px;padding-bottom: 40px;}
    .pb-100 {padding-bottom: 40px;}
    
    .nav {display: none;}
    .nav.open {display: block;position: absolute;background-color: #fff;top: 59px;right: 20px;box-shadow: 2px 4px 12px #00000014;}
    .hamburglar{display: block;}
    
    .main{padding-top: 59px;}
    header{padding: 10px;}
    .nav_logo{max-width: 200px;}
    .nav li a{padding: 15px;}
    
    .sitemap_list a{margin-bottom: 15px;}
    footer{padding-top: 40px;padding-bottom: 40px;}
    
}

@media (max-width:767px){
    h2{font-size: 22px;margin-bottom: 30px;}
    h4{font-size: 20px;line-height: 25px;}
    p{font-size: 16px;line-height: 24px;}
    
    .sphere_enlightenment ul p {padding: 15px 0;}
    
    .footer_wrapper{gap: 30px;justify-content: flex-start;}
    .footer_wrapper h5 {margin-bottom: 18px;}
    .footer_wrapper div p{max-width: 767px;}
    .footer_bottom p {font-size: 14px;}
    .footer_bottom{flex-flow: column;gap: 0;text-align: center;}

}

@media (max-width:653px){
    .sitemap_list{gap: 0;flex-flow: column;}


}