/* 
	Theme Name: YNT PRODUCTION
	Version: 1.0 / 2025
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

/* custom scroll bar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #D9D9D9; }
::-webkit-scrollbar-thumb { background: #000; }

body { font-family: "Archivo", sans-serif; overflow-x: hidden; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; font-size: 18px; color: #333; }

a { text-decoration: none; color: #000; }
a:hover {}

img { width: 100%; height: auto; border-radius: 10px; }

h1, h2 ,h3 ,h4 ,h5 { }

.progress-container { width: 100%; height: 5px; background: none; position: fixed; top: 0; left: 0; z-index: 1000; }
.progress-bar { height: 100%; background: linear-gradient(135deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); width: 0%; }

.container { max-width: 80%; overflow: hidden; }

.home-top { background: #D9D9D9; }

.toparea { position: absolute; z-index: 5; width: 100%; padding: 1em 0; align-content: center; }
.toparea .logo { align-content: center; }
.toparea .logo img { width: 100%; max-width: 300px; height: auto; }
.toparea .topmenu { position: relative; height: 100%; align-content: center; text-align: right; }
.toparea .topmenu ul { list-style: none; margin: 0; padding: 0; }
.toparea .topmenu ul li { display: inline-block; margin: 0 0 0 1em; }
.toparea .topmenu ul li a { font-weight: bold; color: #333; transition: ease all .5s; }
.toparea .topmenu ul li a:hover { color: #000; }

.inner-area a { color: #999 !important; }
.inner-area a:hover { color: #fff !important; }
.inner-area .logo img { filter: grayscale(100%) brightness(500%) !important; }

.home-display { position: relative; padding: 7em 0 3em 0; }
.home-display .image { position: relative; overflow: hidden; z-index: 2; border-radius: 1em; }
.home-display .image div { position: relative; }
.home-display .image img { position: relative; }
.home-display .text { position: relative; z-index: 3; }
.home-display .text h1 { font-size: 3em; font-weight: 800; margin: 0 0 .5em 0; }
.home-display .btn-custom { background: #333; color: #FFF; margin: 1em 0; font-weight: 600; }
.home-display .btn-custom:hover { background: #000; }

.home-section-light { background: #EEE; padding: 5em 0; }
.home-section-dark { background: #D9D9D9; padding: 5em 0; }
.home-section-white { background: #FFF; padding: 5em 0; }
.home-section-light h2,
.home-section-dark h2,
.home-section-white h2 { font-size: 2.5em; font-weight: 800; margin: 0 0 .5em 0; } { font-size: 2.5em; font-weight: 800; margin: 0 0 .5em 0; }

.home-section-light-box { border-radius: 1em; padding: 2em; background: #D9D9D9; }
.home-section-dark-box { border-radius: 1em; padding: 2em; background: #EEE; }

.why { position: relative; }
.why .content { position: relative; z-index: 2; }
.why-text {}
.why-text ul { list-style: none; margin: 0; padding: 0; }
.why-text ul li { margin: 0 0 1em 0; }
.why-text i { margin: 0 .5em 0 0; }

.services { background: url(images/building.jpg) no-repeat bottom center; background-size: 100% 100%; }
.services i { font-size: 2.5em; margin: 0 0 .5em 0; }
.services h2 { font-size: 3em; font-weight: 800; margin: 0 0 .5em 0; }
.services h3 { font-size: 1.5em; font-weight: 600; margin: 0 0 .5em 0; }
.services .text { font-size: .8em; }
.services-box { transition: ease all .5s; }
.services-box:hover { background: #333; color: #FFF; }
.services .btn-custom { background: #333; color: #FFF; margin: 2em 0 0 0; font-weight: 600; }
.services .btn-custom:hover { background: #000; }

.cta { background: #333 url(images/cta.jpg) no-repeat center top; background-size: cover; color: #FFF; text-align: center; border-radius: 1em; padding: 6em 3em; }
.cta h2 { font-size: 2.5em; }
.cta .btn-custom { background: #FFF; color: #000; margin: .5em 0 0 0; font-weight: 600; padding: .5em 1em; font-size: 1.5em; }
.cta .btn-custom:hover { background: #000; color: #FFF; }

.footer { background: #333; padding: 3em 0 1em 0; color: #AAA; }
.footer h3 { margin: 0 0 1em 0; font-size: 1em; color: #FFF; }
.footer h4 { margin: 0 0 .25em 0; font-size: 1em; color: #FFF; }
.footer .logo { height: 100%; align-content: center; }
.footer .logo img { width: 100%; max-width: 200px; height: auto; filter: grayscale(100%) brightness(500%) !important; }
.footer i { margin: 0 10px 0 0; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin: 0 0 1em 0; }
.footer ul li a { color: #AAA; transition: ease all .5s; }
.footer ul li a:hover { color: #FFF; }
.footer .small-text { font-size: .8em; }
.footer a { color: #AAA; }

.copyright { margin-top: 3em; padding-top: 1em; font-size: .8em; text-align: center; border-top: 1px solid #444; }

.inner-top { position: relative; z-index: 1; background: #333; color: #FFF; overflow: hidden; }
.inner-top::before { content: ''; position: absolute; left: -150%; top: -150%; width: 300%; height: 300%; background: radial-gradient(circle 2000px,rgba(255, 255, 255, 0.07) 20%,rgba(255, 255, 255, 0.02),transparent 60%); transform: translate(var(--move-x), var(--move-y)); transition: transform 1s ease-out, opacity 0.3s; opacity: 0; }
.inner-top:hover::before { opacity: 1; }
.inner-top .content { position: relative; z-index: 2; }
.inner-top a { color: #999 !important; }
.inner-top a:hover { color: #fff !important; }
.inner-top .content .logo img { filter: grayscale(100%) brightness(500%) !important; }

.inner-display { padding: 10em 0 5em 0; text-align: center; }
.inner-display h1 { font-size: 4em; margin: 0 0 .5em 0; font-weight: 800; }
.inner-display .image { margin: 3em 0 0 0; }
.inner-display .image img { width: 100%; border-radius: 1em; }

.about-stat { text-align: center; }
.about-stat h1 { font-size: 3em; margin: 0 0 .5em 0; font-weight: 800; }
.about-stat h2 { font-size: 4em; margin: 0; font-weight: 800; }
.about-stat span { text-transform: uppercase; }

.visi-misi { padding 5em 0; }
.visi-misi h1 { font-size: 3em; margin: 0 0 .5em 0; font-weight: 800; }
.visi-misi h2 { font-size: 3em; margin: 0 0 .5em 0; font-weight: 800; }
ul.about-mission { list-style: none; }
ul.about-mission li { border-bottom: 1px solid #999; padding: 2em 0; }
ul.about-mission li:last-child { border-bottom: none; }
ul.about-mission li .number { font-size: 3em; color: #AAA; }

.inner-services { padding 5em 0; }
.inner-services h1 { font-size: 3em; margin: 0 0 .5em 0; font-weight: 800; }
.inner-services h2 { font-size: 3em; margin: 0 0 .5em 0; font-weight: 800; }
.inner-services h3 { font-size: 1.5em; margin: 0 0 .5em 0; font-weight: 800; }
.inner-services ul { list-style: none; margin: 0; padding: 0; }
.inner-services ul li { margin: 0 0 1em 0; }
ul.about-mission { list-style: none; }
ul.about-mission li { border-bottom: 1px solid #999; padding: 2em 0; }
ul.about-mission li:last-child { border-bottom: none; }
ul.about-mission li .number { font-size: 3em; color: #AAA; }

.inner-contact { padding 5em 0; }
.inner-contact h1 { font-size: 3em; margin: 0 0 .5em 0; font-weight: 800; }
.inner-contact h2 { font-size: 3em; margin: 0 0 .5em 0; font-weight: 800; }
.inner-contact h3 { font-size: 1.25em; margin: 0 0 .5em 0; font-weight: 800; }
.inner-contact .form-control { font-size: 1em; }
.inner-contact .btn-custom { background: #333; color: #FFF; font-size: 1em; }
.inner-contact .btn-custom:hover { background: #000; color: #FFF; }
ul.contact-list { list-style: none; }
ul.contact-list li { border-bottom: 1px solid #999; padding: 2em 0; }
ul.contact-list li:last-child { border-bottom: none; }
ul.contact-list li .icon { font-size: 2em; color: #000; }

.errorpage { height: 100vh; background: #333; text-align: center; align-content: center; color: #999; }
.errorpage img { width: 80% !important; max-width: 250px !important; height: auto; }
.errorpage h2 { margin: 0 0 1em 0; font-size: 1.25em; font-weight: 800; }

.btn-white { background: #FFF; color: #000; }

.wpcf7-list-item { margin: 0 !important; }

@media screen and (max-width: 768px) {

body { font-size: 18px; }

.container { max-width: 100%; }

.home-top { padding: 0; }

.toparea .logo { text-align: center; margin: 0 0 1em 0; }
.toparea .logo img { max-width: 150px; }
.toparea .topmenu { text-align: center; }
.toparea .topmenu ul li { margin: 0 10px; }

.home-display { padding: 10em 0 3em 0; }
.home-display .text h1 { font-size: 2.25em; }
.home-display .order-1 { order: 2 !important; }
.home-display .order-2 { order: 1 !important; }

.home-section-light { padding: 3em 0; }
.home-section-dark { padding: 3em 0; }
.home-section-light h2,
.home-section-dark h2 { font-size: 2em; }

.why-text ul { list-style: disc; padding: 0 1em; }
.why-text i { display: none; }

.services { background-size: cover; }
.services i { font-size: 2em; }
.services h2 { font-size: 1.75em; }
.services h3 { font-size: 1.25em; }
.services .text { font-size: 1em; }

.home-section-light-box {  padding: 1em; }
.home-section-dark-box { padding: 1em; }

.cta { padding: 2em; }
.cta h2 { font-size: 1.25em; }
.cta .btn-custom { font-size: 1em; } 

.footer .logo img { max-width: 150px; }
.footer .small-text { font-size: 1em; }

.inner-top::before { display: none; }

.inner-display { padding: 10em 0 3em 0; }
.inner-display h1 { font-size: 2.25em; }

.about-stat { text-align: center; }
.about-stat h2 { font-size: 5em !important; }
.about-stat span { text-transform: uppercase; }

.inner-services h3 { font-size: 1.25em; }

ul.about-mission { margin: 0; padding: 0; }

ul.contact-list { margin: 0; padding: 0; }
ul.contact-list li .icon { font-size: 1.5em; }

}


@media (min-aspect-ratio: 16/9) {

}

@media (max-aspect-ratio: 16/9) {

}