/* inter-100 - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    src: url('./fonts/inter-v20-greek_latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-100italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100;
    src: url('./fonts/inter-v20-greek_latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-200 - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    src: url('./fonts/inter-v20-greek_latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-200italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 200;
    src: url('./fonts/inter-v20-greek_latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300 - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/inter-v20-greek_latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 300;
    src: url('./fonts/inter-v20-greek_latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/inter-v20-greek_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    src: url('./fonts/inter-v20-greek_latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/inter-v20-greek_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 500;
    src: url('./fonts/inter-v20-greek_latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('./fonts/inter-v20-greek_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 600;
    src: url('./fonts/inter-v20-greek_latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/inter-v20-greek_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    src: url('./fonts/inter-v20-greek_latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-800 - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    src: url('./fonts/inter-v20-greek_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-800italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 800;
    src: url('./fonts/inter-v20-greek_latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-900 - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    src: url('./fonts/inter-v20-greek_latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-900italic - greek_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: italic;
    font-weight: 900;
    src: url('./fonts/inter-v20-greek_latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*{margin: 0px;padding: 0px;box-sizing: border-box;}
html, body{margin: 0px;padding: 0px;font-family: 'Inter';}
body.noscroll{overflow: hidden;}

:root{
    --black-color: #000;
    --white-color: #fff;
}

h1 {
    font-size: clamp(1.575rem, 3vw, 2.75rem);
    line-height: clamp(1.8rem, 3.2vw, 3.2rem);
    font-weight: 600;
}
  
h2 {
    font-size: clamp(1.375rem, 2.6vw, 2.25rem);
    line-height: clamp(1.7rem, 2.8vw, 2.8rem);
    font-weight: 600;
}
  
h3 {
    font-size: clamp(1.275rem, 2.2vw, 1.875rem);
    line-height: clamp(2.4rem, 2.4vw, 2.4rem);
    font-weight: 600;
}
  
h4 {
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    line-height: clamp(1.5rem, 2vw, 2rem);
    font-weight: 600;
}
  
h5 {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: clamp(1.4rem, 1.7vw, 1.8rem);
    font-weight: 600;
}
  
h6 {
    font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
    line-height: clamp(1.3rem, 1.5vw, 1.6rem);
    font-weight: 600;
}
p{
    font-weight: 500;
} 
  

a{color: var(--black-color);text-decoration: none;transition: 0.2s ease;}
a:hover{opacity: 0.7;transition: 0.2s ease;}

.pagewrap{max-width: 1440px;position: relative;margin: auto;padding: 0px 20px;}
.pagewrap-inside{max-width: 1440px;position: relative;margin: auto;padding: 0px 20px;}

.grid-2-elements-header{width: 100%;position: relative;display: grid;grid-template-columns: 0.4fr 1fr;gap: 30px;}
.grid-2-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(2,1fr);gap: 30px;}
.grid-3-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(3,1fr);gap: 30px;}
.grid-4-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(4,1fr);gap: 30px;}

.section{width: 100%;position: relative;margin-top: 100px;}
.section-title{width: 100%;position: relative;text-align: center;}

.content{width: 100%;position: relative;display: flex;flex-direction: column;gap: 20px;}
.content ul{padding-left: 20px;}
.content ul li{padding-bottom: 5px;}

.black-button{width: fit-content;margin: auto;padding: 20px 30px;background-color: var(--black-color);border-radius: 4px;color: var(--white-color);transition: 0.2s ease;}
.black-button:hover{transition: 0.2s ease;}

.element-button{width: 100%;position: relative;display: flex;justify-content: center;align-items: center;margin: 80px 0px 0px 0px;}

.one-element{max-width: 800px;margin: auto;}

.section-inside{margin-bottom: 50px;}

/* Header code starts */
header{width: 100%;position: relative;padding: 10px 0px;background-color: var(--black-color);color: var(--white-color);z-index: 100;}
.header-left-element a p{font-size: 60px;font-weight: 500;color: var(--white-color);}
.header-right-element{display: flex;justify-content: end;align-items: center;}
.header-right-element ul{display: flex;gap: 20px;list-style: none;}
.header-right-element ul li a{font-weight: 500;color: var(--white-color);}

.header-right-element .desktop-element{display: block;}
.header-right-element .mobile-element{display: none;}
.header-right-element .mobile-element .button-mob{width: 40px;height: 25px;display: flex;flex-direction: column;gap: 6px;justify-content: center;cursor: pointer;}
.header-right-element .mobile-element .button-mob span{width: 40px;height: 2px;background-color: var(--white-color);transition: 0.3s ease;}

.header-right-element .mobile-element .button-mob.active span:nth-child(2){display: none;transition: 0.3s ease;}
.header-right-element .mobile-element .button-mob.active span:nth-child(1){transform: rotate(45deg) translateY(0px) translateX(4px);transition: 0.3s ease;}
.header-right-element .mobile-element .button-mob.active span:nth-child(3){transform: rotate(-45deg) translateY(-1px) translateX(5px);transition: 0.3s ease;}
/* Header code ends */

/* Main code starts */
.hero-section{width: 100%;position: relative;height: auto;aspect-ratio: 1920/625;max-height: 625px;}
.hero-section-image{width: 100%;height: 100%;position: relative;}
.hero-section-image img{width: 100%;height: 100%;object-fit: cover;}
.hero-filter{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;background-color: rgba(0,0,0,0.4);}
.hero-section-text{max-width: 1200px;width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);display: flex;flex-direction: column;gap: 20px;justify-content: center;align-items: center;padding: 0px 20px;}
.hero-section-text h1{color: var(--white-color);text-align: center;}
.hero-section-text .button{max-width: fit-content;padding: 15px 30px;border: 2px solid var(--white-color);border-radius: 4px;overflow: hidden;font-weight: 500;color: var(--white-color);}
.hero-section-text .button:hover{background-color: var(--white-color);color: var(--black-color);opacity: 1;}

.section-content{width: 100%;position: relative;margin-top: 40px;}
.citymag-element{width: 100%;height: auto;aspect-ratio: 600/700;display: block;overflow: hidden;}
.citymag-element img{width: 100%;height: 100%;object-fit: cover;transition: 0.4s ease;}
.citymag-element a:hover{opacity: 1;transition: 0.4s ease;}
.citymag-element a:hover img{transform: scale(1.1);transition: 0.4s ease;}

.pagkaki-element{width: 100%;position: relative;height: auto;}
.pagkaki-image{width: 100%;height: auto;aspect-ratio: 1024/550;display: block;overflow: hidden;transition: 0.2s ease;}
.pagkaki-image img{width: 100%;height: 100%;object-fit: cover;transition: 0.4s ease;}
.pagkaki-title{text-align: center;padding-top: 10px;}
.pagkaki-image a:hover{opacity: 1;transition: 0.4s ease;}
.pagkaki-image a:hover img{transform: scale(1.1);transition: 0.4s ease;}

.partner-element{width: 100%;height: auto;aspect-ratio: 400/400;display: block;}
.partner-element img{width: 100%;height: 100%;object-fit: cover;}

.swiper-button-next, .swiper-button-prev{width: 25px!important;height: 25px!important;color: var(--black-color)!important;}

.two-elements-section{width: 100%;position: relative;}
.two-elements-section .grid-2-elements{width: 100%;position: relative;gap: 100px;}
.two-elements-section .section-title{text-align: left;padding-bottom: 40px;}
.two-elements-section .content{max-width: 600px;}

.about-section .about-section-inside{max-width: 800px;text-align: center;margin: auto;}

.form-section .section-content{max-width: 600px;margin: 40px auto 0px auto;}

.ff-btn{background-color: var(--black-color)!important;}

.projects-section.partners{display: none;}
.projects-section.partners:has(img){display: block;}

@media screen and (max-width: 970px) and (min-width: 200px){
    .header-right-element .desktop-element{display: none;}
    .header-right-element .mobile-element{display: block;}

    .hero-section{aspect-ratio: 400/500;max-height: 500px;}
    .hero-section-text{max-width: 700px;}

    .pagkaki-image{aspect-ratio: 400/400;max-height: 600px;}
}

@media screen and (max-width: 730px) and (min-width: 510px){
    .citymag-section .grid-3-elements{grid-template-columns: repeat(2,1fr);}
    .citymag-section .citymag-element:last-child{grid-column: 1/3;max-width: 328px;margin: auto;}
}
@media screen and (max-width: 509px) and (min-width: 200px){
    .citymag-section .grid-3-elements{grid-template-columns: repeat(1,1fr);}
    .citymag-section .citymag-element{max-width: 428px;margin: auto;}
}

@media screen and (max-width: 810px) and (min-width: 200px){
    .two-elements-section .grid-2-elements{grid-template-columns: 1fr;gap: 60px;}
    .two-elements-section .section-title{padding-bottom: 20px;}
}
/* Main code ends */

/* Footer code starts */
footer{width: 100%;position: relative;margin-top: 100px;}

.footer-top{width: 100%;position: relative;padding-top: 20px;border-top: 1px solid var(--black-color);}
.footer-top-left p{font-size: 60px;font-weight: 500;text-align: left;}
.footer-top-right .flex-elements{display: flex;justify-content: end;gap: 60px;}
.footer-top-right .flex-element{display: flex;flex-direction: column;gap: 10px;}
.footer-top-right ul{list-style: none;}
.footer-top-right ul li{padding-bottom: 5px;}
.footer-top-right .flex-element.social ul{display: flex;gap: 10px;}

.footer-bottom{width: 100%;position: relative;padding: 20px 0px;margin-top: 100px;border-top: 1px solid var(--black-color);}
.footer-bottom p{text-transform: uppercase;font-size: 14px;}
.footer-bottom .footer-bottom-right{display: flex;justify-content: end;}

@media screen and (max-width: 500px) and (min-width: 200px){
    .footer-bottom .grid-2-elements{grid-template-columns: 1fr;gap: 8px;}
    .footer-bottom .footer-bottom-right{justify-content: start;}
}
@media screen and (max-width: 708px) and (min-width: 472px){
    .footer-top-left{text-align: center;}
    .footer-top .grid-2-elements-header{grid-template-columns: 1fr;gap: 60px;}
    .footer-top-right .flex-elements{justify-content: space-between;}
}
@media screen and (max-width: 471px) and (min-width: 200px){
    .footer-top-left{text-align: center;}
    .footer-top .grid-2-elements-header{grid-template-columns: 1fr;gap: 60px;}
    .footer-top-right .flex-elements{display: grid;grid-template-columns: repeat(2,1fr);gap: 30px;row-gap: 45px;}
    .footer-bottom{margin-top: 60px;}
}
@media screen and (max-width: 568px) and (min-width: 471px){
    .footer-top-right .flex-element.social ul{display: flex;gap: 0px;flex-direction: column;}
}
@media screen and (max-width: 470px) and (min-width: 200px){
    .footer-top-right .flex-element.social ul{display: flex;gap: 10px;flex-direction: row;flex-wrap: wrap;}
}
/* Footer code ends */

/* Overlay code starts*/
#overlay{width: 100%;height: 100dvh;position: fixed;top: 0px;left: -100%;background-color: rgba(0,0,0,0.6);z-index: 99;transition: 0.4s ease;}
.overlay-inside{width: 100%;max-width: 400px;height: 100%;}
.overlay-informations{width: 100%;height: 100%;background-color: var(--black-color);padding: 126px 20px 0px 20px;}
.overlay-menu ul{list-style: none;}
.overlay-menu ul li{border-bottom: 1px solid var(--white-color);padding: 10px 0px;}
.overlay-menu ul li a{font-size: 24px;color: var(--white-color);}

#overlay.open{left: 0px;transition: 0.4s ease;}
/* Overlay code ends*/

/* Error Elements code starts */
.error-elements{width: 100%;position: relative;display: flex;flex-direction: column;align-items: start;gap: 20px;}
.error-elements .extra-big{font-size: clamp(180px, 12vw, 250px);font-weight: 500;line-height: 250px;}
.error-elements .black-button{margin: 0px;}
/* Error Elements code ends */