@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;600&display=swap");
@font-face {
font-family: 'Machine LT';
src: url(https://www.hogarsi.org/wp-content/themes/goodwish-child/font/MachineLT-Bold.woff2) format('woff2'),
url(https://www.hogarsi.org/wp-content/themes/goodwish-child/font/MachineLT-Bold.woff) format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
:root {
--white: #fff;
--grey: #8E8F90;
--light-grey: #D7D8D9;
--dark-grey: #B7B8B9;
--pink: #D9007A;
--purple: #801658;
}
html {
overflow-y: initial !important
}
* { line-height: 1.2 !important;
}
p {
color: inherit;
font-family: 'Oswald', sans-serif !important;
font-size: 1.2rem !important;
}
.no-scroll {
overflow: hidden;
}
.relative {
position: relative;
}
.secondary-font {
font-family: 'Machine LT' !important;
}
h1 {
font-size: 4rem;
font-weight: bold;
font-family: 'Machine LT' !important;
}
h2 {
font-size: 2rem;
background-color: transparent;
padding: 0;
font-family: 'Oswald', sans-serif !important;
}
h2.secondary-font {
font-size: 3rem!important;
line-height: 1!important;
font-weight: bold!important;
}
h3 {
font-size: 1.7rem;
font-family: 'Oswald', sans-serif !important;
}
h4 {
font-size: 1.4rem;
font-family: 'Oswald', sans-serif !important;
}
body {
min-height: 100vh;
background-color: #000;
}
body.block {
overflow: hidden;
}
b,
option,
span,
strong {
color: inherit;
font-family: inherit;
}
a {
width: fit-content;
text-decoration: none;
color: inherit;
}
a:hover {
color: var(--green);
}
.txt-primary {
color: var(--pink);
}
.txt-secondary {
color: var(--purple);
} .maincta span:not(.maincta-bg) {
position: inherit;
z-index: 2;
color: inherit;
} .maincta {
position: relative;
background-color: var(--pink);
border: 1px solid var(--pink);
padding: 8px 20px;
text-transform: uppercase;
min-width: 120px;
transition: all .3s ease!important;
color: #fff;
font-weight: bold;
}
.maincta:hover {
border-color: var(--purple);
background-color: var(--purple);
color: #fff;
}
.maincta.v2 {
border-color: var(--purple);
background-color: var(--purple);
}
.maincta.v3 {
color: var(--pink);
border-color: var(--pink);
background-color: #fff;
}
.maincta.v4 {
background-color: transparent;
color: var(--pink);
border-color: transparent;
}
.maincta.v4 span {
border-bottom: 2px solid var(--pink);
}
.maincta.v5 {
background-color: var(--purple);
color: #fff!important;
} 
.maincta.v5:hover {
background-color: #fff;
color: var(--purple)!important;
}
.custom-dropdown {
background-color: transparent !important;
border-color: transparent !important;
color: rgba(0, 0, 0, 0.653) !important;
position: relative;
z-index: 9;
}
.nav-right .dropdown:hover>.dropdown-menu {
display: block;
}
.nav-right .dropdown:hover>.custom-dropdown {
color: var(--pink) !important;
}
.nav-right .dropdown>.dropdown-toggle:active { pointer-events: none;
}
.nav-right .dropdown-menu-custom {
padding-top: 56px;
top: 0;
left: -33px;
border-radius: 0;
background-color: transparent;
border: none;
z-index: 9;
}
.nav-right .dropdown-menu-custom-bg {
background-color: #fff;
width: 100%;
height: 100%;
position: absolute;
}
.nav-right .dropdown-menu-custom li {
position: relative;
z-index: 2;
padding-left: 10px;
padding-right: 10px;
background-color: #fff;
}
.nav-right .dropdown-menu-custom li a {
font-size: 1rem;
text-transform: uppercase;
padding: 10px;
font-weight: bold;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: inherit;
}
.nav-right .dropdown-menu-custom li a:hover {
color: var(--pink);
}
.nav-right .dropdown-submenu {
background: none;
padding-left: 10px;
border: none;
}
.nav-right .dropend .dropdown-toggle.show {
color: var(--pink);
}
.custom-dropdown:hover,
.custom-dropdown:active,
.custom-dropdown:focus-visible {
background-color: transparent !important;
color: #000 !important;
border-color: transparent !important;
}
.txt-w-btn {
display: flex;
align-items: center;
}
.txt-w-btn .maincta {
margin-left: 10px;
margin-right: 10px;
padding: 8px 12px;
}
.txt-w-btn>h3 {
margin-bottom: 0;
font-size: 1.4rem;
}
.cards-section {
justify-content: center;
display: flex;
justify-items: center;
align-items: center;
padding: 10px 5px;
}
.card {
width: 400px;
height: 425px;
border: 1px solid transparent;
border-radius: 0;
text-align: center;
background-color: #fff;
transition: all .3s ease;
color: #000;
margin: 20px 10px;
float: left;
}
.card-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 35px 10px;
color: inherit;
}
.card img {
width: 50px;
height: auto;
margin-bottom: 0.7rem;
margin-top: auto;
transition: all .1s ease;
}
.card-title {
width: 90%;
margin-left: auto;
margin-right: auto;
color: inherit;
}
.card p {
color: inherit;
margin-bottom: auto;
max-width: 150px;
}
.card .maincta {
transition: all .1s ease;
}
.card:hover {
background-color: var(--pink);
color: #fff;
transform: translateY(-3%);
}
.card:hover .maincta {
border-color: #fff;
color: var(--pink);
background-color: #fff;
}
.card:hover img {
filter: invert(1);
}
.language a:hover {
color: var(--pink);
}
.language-selector {
border-radius: 6px;
cursor: pointer;
color: var(--blue);
padding: 3px;
}
nav {
position: absolute;
top: 15px;
width: 100%;
z-index: 99999;
}
nav .dropdown {
cursor: pointer;
}
nav .dropdown-menu li:first-child {
padding-top: 1rem;
}
nav .dropdown-menu li:last-child {
padding-bottom: 1rem;
}
nav .logo {
width: 110px;
}
nav .nav-right {
background-color: #fff;
height: 100%;
width: 100%;
max-width: 780px; margin-left: auto;
padding: 10px 0px;
}
nav .nav-btn {
background-color: transparent;
padding: 10px;
padding-top: 40px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: initial;
}
nav .btn-selected {
background-color: var(--green);
color: var(--blue);
}
nav .btn-selected a:hover {
color: #fff;
}
footer .social-media a {
margin-left: 5px;
}
.footer-border {
border-top: 1px solid #fff;
} #thehambcont {
position: relative;
height: 55px;
width: 55px;
display: none;
margin-left: auto;
background-color: #fff;
}
.hamburger .line {
width: 30px;
height: 2px;
background-color: #000;
display: block;
margin: 3px auto;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#hamburger-1.is-active .line:nth-child(2) {
opacity: 0;
}
#hamburger-1.is-active .line:nth-child(1) {
-webkit-transform: translateY(5px) rotate(45deg);
-ms-transform: translateY(5px) rotate(45deg);
-o-transform: translateY(5px) rotate(45deg);
transform: translateY(5px) rotate(45deg);
}
#hamburger-1.is-active .line:nth-child(3) {
-webkit-transform: translateY(-5px) rotate(-45deg);
-ms-transform: translateY(-5px) rotate(-45deg);
-o-transform: translateY(-5px) rotate(-45deg);
transform: translateY(-5px) rotate(-45deg);
}
#hamburger-1 {
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 19px;
}
.hamburger:hover {
cursor: pointer;
}
.drop-nav-mobile.onleft {
opacity: 0;
visibility: hidden;
box-shadow: -12px 6px 10px 0 rgba(32, 33, 36, 0.07);
position: absolute;
top: 80px;
left: 0;
padding: 0;
margin: 0;
width: 100%;
z-index: 9999;
transition: all 0.2s;
overflow-y: hidden;
padding-top: 30px;
height: 100%;
}
.drop-nav-mobile.onleft.is-active {
opacity: 1;
visibility: visible;
transition: all 0.2s;
top: 80px;
}
.drop-nav-mobile.onleft>.col-4 {
padding: 0;
margin: 0;
}
.drop-nav-mobile {
display: none;
z-index: 999;
}
.menu-mobile {
flex-direction: column;
margin: initial;
padding: initial;
justify-content: flex-start;
align-items: flex-start;
}
.menu-mobile .menu-option { border-bottom: 1px solid #fff;
width: 100%;
padding: 10px 0px;
color: #000;
}
.menu-mobile .menu-option>a,
.menu-mobile .menu-option>select {
margin: 10px 20px;
} .modal-filter {
display: none;
width: 100vw;
height: 100vh;
background-color: #000;
opacity: 0.4;
position: fixed;
z-index: 998;
}
.modal-filter.active {
display: block;
}
#contact {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 24px;
z-index: 999;
border: 1px solid var(--blue);
}
#contact h2 {
font-weight: 600;
font-size: 3rem;
padding-bottom: 1rem;
}
#contact.active {
display: block;
}
#contact .container {
padding: 25px;
}
.contact-form {
width: 650px;
max-width: 100%;
display: flex;
flex-direction: column;
}
.contact-form label {
margin: 10px auto;
width: 90%;
}
.contact-form input,
.contact-form textarea {
background-color: var(--green);
width: 100%;
border-radius: 16px;
border: none;
padding: 10px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
border-color: var(--blue);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #fff;
}
.contact-form input.send {
width: 100px;
} .zeynep {
top: 0;
bottom: 0;
position: fixed;
overflow: hidden;
overflow-y: auto;
z-index: 1011;
pointer-events: none;
transform: translateX(-100%) translateZ(0px);
-webkit-overflow-scrolling: touch;
}
.zeynep:not(.no-transition),
.zeynep .submenu:not(.no-transition) { transition: all 250ms;
}
.zeynep-overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
position: fixed;
z-index: 1010;
background-color: rgba(0, 0, 0, .42);
}
.zeynep-overlay-desktop {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
z-index: 1010;
background-color: rgba(0, 0, 0, .42);
}
.zeynep-overlay-desktop.hide {
display: none;
} .zeynep.opened {
pointer-events: auto;
transform: translateX(0px) translateZ(0px);
}
.zeynep.submenu-opened {
overflow: hidden;
}
.zeynep .submenu {
top: 0;
bottom: 0;
min-height: calc(100% - 72px);
overflow: hidden;
overflow-y: auto;
position: fixed;
width: 100%;
pointer-events: none;
-webkit-overflow-scrolling: touch;
z-index: 9;
}
.zeynep .submenu.opened {
left: 0;
pointer-events: auto;
}
.zeynep .submenu.opened:not(.current) {
overflow: hidden;
}
.btn-open {
border: 0;
border-radius: 27.5px;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .05);
display: inline-block;
font-size: 16px;
font-weight: bold;
outline: 0;
padding-bottom: 15px;
padding-top: 15px;
cursor: pointer;
margin: 0 6px;
} .zeynep {
background-color: #ffffff;
color: #404143;
width: 100%;
height: calc(100% - 120px);
top: initial;
bottom: 0;
}
.zeynep ul {
list-style-type: none;
padding: 0;
-webkit-overflow-scrolling: touch;
}
.zeynep ul>li {
display: block;
border-bottom: 1px solid #efefef;
}
.zeynep ul>li>a {
color: inherit;
display: block;
padding: 18px 20px;
text-decoration: none;
transition: all 150ms;
width: 100%;
color: #000;
font-size: 1.3rem;
font-weight: 400;
}
.zeynep ul>li>a:hover {
background-color: #efefef;
border-radius: 3px;
color: var(--pink);
}
.zeynep ul>li:not(:last-child)>a {
border-bottom: 1px solid #efefef;
border: none;
}
.zeynep ul>li.has-submenu>a {
background-image: url(https://hogarsi.org/wp-content/uploads/2023/07/submenu-arrow-light.svg);
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 8px 14px;
}
.zeynep ul>li.has-submenu>a:hover {
background-image: url(https://hogarsi.org/wp-content/uploads/2023/07/submenu-arrow-light-active.svg);
} .zeynep .submenu {
background-color: #ffffff;
left: 100%;
}
.zeynep .submenu-header {
background-position: left 20px center;
background-repeat: no-repeat;
background-size: 8px 14px;
border-bottom: solid 1px #efefef;
cursor: pointer;
position: relative;
}
.zeynep .submenu-header>a {
color: inherit;
display: block;
font-size: 0.8rem;
font-weight: 400;
padding: 18px 20px;
padding-left: 40px;
text-decoration: none;
width: 100%;
text-align: end;
color: #000;
background-color: var(--light-grey);
}
.zeynep .submenu-header>a:before {
background-image: url(https://hogarsi.org/wp-content/uploads/2023/07/submenu-arrow.svg);
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 8px 14px;
content: "";
height: 100%;
right: 60px;
position: absolute;
top: 0;
transform: rotate(-180deg);
width: 40px;
}
.zeynep .submenu>label {
color: var(--orange);
display: block;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
margin-top: 19px;
opacity: .5;
padding-left: 20px;
width: 100%;
}
.zeynep-opened body {
overflow: hidden;
}
.zeynep {
right: auto;
left: 0;
}
.zeynep .border-bottom {
border-bottom: 1px solid #efefef;
}
.zeynep .no-border-bottom {
border-bottom: none;
}
.carrousel-nav {
display: flex;
align-items: center;
justify-content: center; padding: 25px 0px;
}
.carrousel-nav a {
margin: 0 40px !important;
}
.carrousel-nav img {
width: 150px;
}
.carrousel-nav h3 {
width: 150px;
}
.carrousel-nav .carrousel-nav-category {
height: 550px;
}
.carrousel-nav .carrousel-nav-category-title {
white-space: initial;
padding-top: 10px;
}
.carrousel-nav-category-subcategory {
position: absolute;
top: 270px;
left: 0;
width: 100%;
padding: 25px 0px;
height: 375px;
border-bottom: 1px solid var(--softGrey);
background-color: #fff;
}
.carrousel-nav-category-subcategory.hide {
display: none;
}
.carrousel-nav-category-subcategory-section {
margin: 15px 75px;
width: 200px;
}
.carrousel-nav-category-subcategory-section-content {
position: absolute;
left: 270px;
top: 0;
padding: 40px 25px;
width: 600px;
max-width: 100%;
height: 100%;
}
.carrousel-nav-category-subcategory-section-content.hide {
display: none;
}
.carrousel-nav-category-subcategory-section-content a {
margin: 15px 0px;
}
.category-image {
width: 100px;
height: 100px;
border-radius: 25px;
}
.conditional-border {
border-bottom-color: transparent !important;
}
.subcategory-name {
display: flex;
align-items: center;
}
.subcategory-name img {
width: 30px !important;
height: auto;
margin-right: 5px;
}
.pre-title {
color: var(--pink);
} .pink-separator {
background-color: var(--pink);
height: 20px;
width: 110%;
rotate: -2deg;
position: absolute;
left: 50%;
bottom: 110px;
transform: translate(-50%);
z-index: 2;
}
.black-separator {
background-color: #000;
height: 135px;
width: 110%;
rotate: -2deg;
position: absolute;
left: 50%;
bottom: -23px;
transform: translate(-50%);
}
.separated-section {
position: relative;
background-color: #000;
z-index: 3;
}
#videoprincipal {
width: 100%;
height: 1000px;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
} .arrow-scroll {
display: flex;
flex-direction: column;
align-items: center;
}
.arrow-scroll span {
display: flex;
justify-content: center;
margin-top: 55px;
scale: 1.2;
width: fit-content;
transform: translatey(0px);
animation: float 4s ease-in-out infinite;
cursor: pointer;
}
.arrow-scroll svg {
width: 10px;
rotate: 90deg;
fill: #fff;
}
.arrow-scroll p {
font-size: 0.9rem !important;
}
.header-bg {
background-image: url(https://hogarsi.org/wp-content/uploads/2023/06/AyR-2.jpg);
}
.social-icons svg {
width: 30px;
height: auto;
fill: var(--dark-grey);
}
.social-icons .fix * {
fill: var(--dark-grey);
}
.social-icons a {
margin: 0px 5px;
}
.social-icons svg.svg-instagram-fix {
width: 23px;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-5px);
}
100% {
transform: translatey(0px);
}
}  @media only screen and (max-width:991px) {
nav .nav-right {
width: fit-content;
height: fit-content;
background-color: transparent;
}
nav .nav-right>p {
margin: 0;
margin-right: 10px;
color: #fff;
}
nav .logo {
width: 80px;
}
#thehambcont {
display: block;
}
.drop-nav-mobile {
display: initial;
background-color: var(--blue);
}
.drop-nav-mobile-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 105;
background-color: #fff;
display: none;
}
.drop-nav-mobile-bg.active {
display: block;
}
.margin-header-bgfix {
margin-top: 9rem;
}
} @media only screen and (max-width:767px) {
h1 {
font-size: 2.5rem;
font-weight: bold;
font-family: 'Machine LT';
}
h2 {
font-size: 1.8rem;
}
h2.secondary-font {
font-size: 2.5rem!important;
}
h3 {
font-size: 1.4rem;
}
h4 {
font-size: 1.2rem;
}
p {
font-size: 1rem;
}
.cards-section {
flex-direction: column;
}
} @media only screen and (max-width:600px) {
.cards-section {
flex-direction: column;
}
.card {
width: 300px;
height: 325px;
}
.card-title {
font-size: 1.4rem;
}
.card p {
font-size: 1.1rem;
}
.card .maincta {
font-size: 0.9rem;
scale: 0.9;
}
}