@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Thin.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Thin.woff) format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Black.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Black.woff) format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-ExtraBold.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-ExtraBold.woff) format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-SemiBold.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-SemiBold.woff) format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Light.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Light.woff) format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Medium.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-ExtraLight.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-ExtraLight.woff) format('woff');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Regular.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Bold.woff2) format('woff2'),
url(//studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/fonts/montserrat/Montserrat-Bold.woff) format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
#reviews div:nth-of-type(3)
{
display:none;
}
:root {
--color-blue: #BDD0D4;
--color-blue2: #92B8C3;
--color-blue3:#2A5D73;
--color-tuna: #EDD1C5;
--color-bg: #EDEAE3; --color-white: #FEFEFE;
--color-text: #555555 }
html {
scroll-behavior: smooth;
} body {
font-family: 'Montserrat', sans-serif;
margin:0px;
background-color: var(--color-bg);
color: var(--color-text);
font-weight:300;
overflow-x: hidden;
} a
{
text-decoration:none;
}
.email-scroll {
word-break: break-all;
overflow-wrap: break-word;
display: inline-block;
max-width: 100%; 
text-align:left;
color: black;
} #nav-contact
{
background-color: var(--color-blue2);
width:100%;
display:flex;
justify-content:center;
z-index:100;
}
#nav-contact-container
{
width:1300px;
display:flex;
justify-content:right;
gap:0px 30px;
flex-wrap:wrap;
z-index:100;
}
.nav-contact-container-links
{
display:flex;
margin: 8px;
align-items: center;
}
.nav-contact-container-links img
{
width:16px;
height:16px;
margin-right: 10px;
}
.nav-contact-container-links a
{
color:black;
text-decoration:none;
font-size:15px;
font-weight:400;
}
.nav-contact-container-links-sm
{
display:flex;
margin: 8px;
align-items: center;
}
.nav-contact-container-links-sm img
{
width:18px;
height:18px;
margin-left: 10px;
}
#nav-main
{
width:100%;
display:flex;
justify-content:center;
}
#nav-main-container
{
width:1300px;
display:flex;
justify-content:space-between;
}
#nav-main-logo
{
padding-top: 20px;
}
#nav-main-menu
{
display: flex;
align-items: center;
justify-content: right;
margin-top: -20px;
}
#nav-main-menu .menu-item-203 > a:first-of-type
{
background-image: url(https://studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/images/dropdown.svg);
background-repeat: no-repeat;
background-position-x: 93%;
background-size: 12px;
background-position-y: center;
padding-right: 33px;
} #nav-main-button {
display: flex;
align-items: center;
background-color: var(--color-tuna);
border-radius: 40px;
transition: background-color 0.3s ease;
white-space: nowrap;
}
#nav-main-button a {
color: var(--color-text);
font-weight: 500;
font-size: 15px;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
width: 100%;
transition: transform 0.4s ease;
padding: 11px 19px;
overflow: hidden;
}
#nav-main-button .button-text {
display: inline-block;
transition: transform 0.4s ease;
}
#nav-main-button img {
width: 7.5px;
height: 14px;
padding-left: 10px;
transition: transform 0.4s ease, opacity 0.4s ease;
} #nav-main-button:hover .button-text {
transform: translateX(7.5%);
}
#nav-main-button:hover img {
transform: translateX(150%);
opacity: 0;
} #menu-main-menu {
display: flex; list-style: none; padding: 0;
margin: 0;
flex-wrap:wrap;
justify-content:right;
gap:0px;
}
#menu-main-menu > li {
position: relative; margin-right: 10px; }
#menu-main-menu > li > a {
text-decoration: none;
display: inline-block;
padding: 10px 15px;
font-size: 15px;
font-weight: 400;
color: black;
position: relative;
} #menu-main-menu > li > a::after {
content: "";
position: absolute;
left: 0;
bottom: 0px; width: 0%;
height: 1px;
background-color: var(--color-blue2);
transition: width 0.2s ease;
} #menu-main-menu > li:hover > a::after {
width: 100%;
}
#menu-main-menu .sub-menu {
opacity: 0;
visibility: hidden;
transform: translateY(10px); position: absolute;
top: 40px;
left: -37px;
background-color: #fff;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
list-style: none;
padding: 15px;
margin: 0;
min-width: 230px;
border-radius: 20px;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
z-index: 10;
} #menu-main-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#menu-main-menu .sub-menu li {
border-bottom: 1px solid #f1f1f1; }
#menu-main-menu .sub-menu li:last-child {
border-bottom: none; }
#menu-main-menu .sub-menu a {
padding: 10px 15px;
text-decoration: none;
display: block;
color: #333;
transition: 0.2s; 
}
#menu-main-menu .sub-menu a:hover {
padding-left:30px;
}  #mobile-menu-toggle {
display: none;
font-size: 32px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
} #mobile-menu-close {
position: absolute;
top: 50px;
right: 50px;
font-size: 50px;
background: none;
border: none;
cursor: pointer;
color: #555555;
} #mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--color-tuna, #111);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1000;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 50px 0px;
}
#mobile-menu.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index:1002;
}
#mobile-menu nav ul {
list-style: none;
padding: 0;
text-align: left;
}
#mobile-menu nav ul li {
margin: 20px 0;
}
#mobile-menu nav ul li a {
color: var(--color-text);
text-decoration: none;
font-size: 19px;
font-weight:400;
} @media (max-width: 930px) {
#nav-main-menu
{
display:none;
}
#mobile-menu-toggle {
display: block;
margin-right:20px;'
padding:20px;
}
#menu-main-menu {
display: none; }
#nav-main-logo
{
padding-top:10px;
}
#nav-main-logo img
{
max-width:100px;
height:auto;
padding-left:10px;
}
#nav-contact-container
{
justify-content:center;
}
.nccl1
{
}
.nccl2
{
display:none;
}
.nccl3
{
}
.nccl4
{
display:none;
}
} #nav-main-menu-mobile
{
padding:50px 0px;
}
#mobile-menu .sub-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
padding-left: 15px;
opacity: 1;
visibility: visible;
}
#mobile-menu .sub-menu li {
opacity: 1 !important;
animation: none !important;
}
#mobile-menu .sub-menu li a
{
font-size:16px;
}
#mobile-menu .submenu-open > .sub-menu {
max-height: 1000px; }
#mobile-menu .menu-item-has-children > a::after {
content: "▼";
float: right;
font-size: 12px;
margin-left: 10px;
transition: transform 0.3s ease;
}
#mobile-menu .submenu-open > a::after {
transform: rotate(180deg);
} body.no-scroll {
overflow: hidden;
position: fixed;
width: 100%;
} @keyframes fadeSlideIn {
0% {
opacity: 0;
transform: translateX(-30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#mobile-menu nav ul li {
opacity: 0; } footer
{
padding-top:100px;
margin-top: -100px;
background-image:url(https://studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/images/dots-ver.svg);
background-size: 50px;
background-repeat: no-repeat;
background-position-x: 99%;
background-position-y: 0%;
}
#footer
{
width:100%;
display:flex;
justify-content:center;
flex-wrap:wrap;
background: #555555;
background: linear-gradient(180deg, rgba(85, 85, 85, 0) 0%, rgba(85, 85, 85, 0) 25%, rgba(85, 85, 85, 1) 25%, rgba(85, 85, 85, 1) 100%);
}
#footer-container
{
width: calc(1300px - 120px);
padding:60px;
display:flex;
justify-content:center;
background-color:var(--color-blue);
border-radius:40px;
flex-wrap:wrap;
box-shadow: 0px 71px 108px 34px rgba(255, 255, 255, 0.08);
}
#footer-logo
{
width:30%;
display:flex;
justify-content: left;
align-items: center;
}
#footer-logo img
{
margin-left:20px;
}
#footer-contact p, #footer-menu p
{
font-size:18px;
font-weight:700;
color:black;
}
#footer a
{
font-size:15px;
color: black;
padding-bottom:10px;
display: flex;
flex-wrap: nowrap;
}
#footer-contact
{
width:35%;
}
.footer-contact-item
{
padding-bottom:0px;
}
.footer-contact-item img
{
padding-right:15px;
}
#footer-menu
{
width:35%;
}
#footer-menu .main-navigation ul,
#footer-menu .main-navigation li {
list-style: none;
margin: 0;
padding: 0;
display:flex;
flex-wrap:wrap;
}
#footer-menu .main-navigation li
{
width:50%;
}
#footer-menu .menu-item-39
{
display:none !important;
}
#footer-menu .sub-menu
{
display:none !important;
}
#footer-info
{
width:1300px;
display:flex;
flex-wrap:wrap;
padding: 20px;
}
#copyright
{
width:50%;
color:white;
font-size: 15px;
}
#footer-social-media
{
width:50%;
display:flex;
justify-content: right;
color:white;
font-size: 15px;
}
.footer-contact-container-links-sm
{
display:flex;
justify-content:space-between
}
.footer-contact-container-links-sm a
{
display:flex;
}
.footer-contact-container-links-sm img
{
width:23px;
height:auto;
padding-left: 30px;
}
@media (max-width:1000px)
{
#footer-logo
{
width:50%;
}
#footer-contact
{
width:50%;
}
#footer-menu
{
width:100%;
}
#footer-info
{
flex-wrap: wrap-reverse;
}
#copyright
{
width:100%;
text-align:center;
}
#footer-social-media
{
width:100%;
justify-content: center;
}
}
@media (max-width:767px)
{
#footer-container
{
padding:40px;
}
#footer-logo
{
width:100%;
justify-content:center;
}
#footer-logo img
{
margin:0px;
}
#footer-contact
{
width:100%;
}
.footer-contact-item img
{
padding-right:10px;
}
#footer-menu .main-navigation li
{
width:100%;
}
}.main-button-blue {
display: flex;
align-items: center;
border: 2px solid var(--color-blue2);
border-radius: 40px;
transition: background-color 0.3s ease;
white-space: nowrap;
}
.main-button-blue a {
color: var(--color-text);
font-weight: 500;
font-size: 15px;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
width: 100%;
transition: transform 0.4s ease;
padding: 11px 19px;
overflow: hidden;
}
.main-button-blue .button-blue-text {
display: inline-block;
transition: transform 0.4s ease;
}
.main-button-blue img {
width: 7.5px;
height: 14px;
padding-left: 10px;
transition: transform 0.4s ease, opacity 0.4s ease;
} .main-button-blue:hover .button-blue-text {
transform: translateX(7.5%);
}
.main-button-blue:hover img {
transform: translateX(150%);
opacity: 0;
} .main-button-tuna {
display: flex;
align-items: center;
border: 2px solid var(--color-tuna);
border-radius: 40px;
transition: background-color 0.3s ease;
white-space: nowrap;
}
.main-button-tuna a {
color: var(--color-text);
font-weight: 500;
font-size: 15px;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
width: 100%;
transition: transform 0.4s ease;
padding: 11px 19px;
overflow: hidden;
}
.main-button-tuna .button-tuna-text {
display: inline-block;
transition: transform 0.4s ease;
}
.main-button-tuna img {
width: 7.5px;
height: 14px;
padding-left: 10px;
transition: transform 0.4s ease, opacity 0.4s ease;
} .main-button-tuna:hover .button-tuna-text {
transform: translateX(7.5%);
}
.main-button-tuna:hover img {
transform: translateX(150%);
opacity: 0;
} .second-button {
display: flex;
align-items: center;
transition: background-color 0.3s ease;
white-space: nowrap;
}
.second-button a {
color: var(--color-text);
font-weight: 500;
font-size: 15px;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
width: 100%;
transition: transform 0.4s ease;
padding: 11px 19px;
overflow: hidden;
}
.second-button .second-button-text {
display: inline-block;
transition: transform 0.4s ease;
}
.second-button img {
opacity:0;
width: 7.5px;
height: 14px;
padding-left: 10px;
transition: transform 0.4s ease, opacity 0.4s ease;
} .second-button:hover .second-button-text {
transform: translateX(7.5%);
}
.second-button:hover img {
transform: translateX(100%);
opacity: 1;
} #home-hero
{
width:100%;
display:flex;
justify-content:center;
}
#home-hero-container
{
width:1300px;
display:flex;
justify-content:center;
align-items:center;
}
#home-hero-photo {
display: flex;
position: relative;
min-width: 100%;
align-items: center;
justify-content: space-between;
margin-top:-50px;
background-image:url(https://studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/images/hero.png);
background-size: contain;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
height:570px;
}
#home-hero-photo::before
{
content: '';
position: absolute;
z-index: -1;
width: 1022px;
height: auto;
bottom: 0;
right: 0px;
box-shadow: 0px 60px 70px 0px rgba(189, 208, 212, 0.5);
aspect-ratio: 1022 / 570;
border-radius: 40px;
}
#home-hero-text-container {
width: 40%;
z-index: 2;
margin-right: -20%; position:relative;
margin-top: 70px;
padding: 20px;
}
#home-hero-text-container::before {
content: '';
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background: radial-gradient(circle, rgba(237, 234, 227, 0.85) 43%, rgba(237, 234, 227, 0) 100%);
z-index: -1; border-radius: 50%; filter: blur(50px); }
#home-hero-text-container h1
{
font-size: 16px;
font-weight: 600;
letter-spacing: 0.7px;
color: var(--color-blue2);
margin-left: -30px;
}
#home-hero-text-container h2
{
font-size: 70px;
margin: 0px;
letter-spacing: 3px;
font-weight: 300;
line-height: 110%;
}
#home-hero-text-container .hero-intro {
display: flex;
align-items: center;
}
#home-hero-text-container .hero-buttons {
display: flex;
gap: 20px;
align-items: center;
margin-top: 20px;
}
@media (max-width:1202px)
{
#home-hero-text-container h2
{
font-size:60px;
}
}
@media (max-width:930px)
{
#home-hero-container
{
padding:20px;
}
#home-hero-text-container h2
{
font-size:40px;
text-align:center;
}
#home-hero-photo
{
height: auto;
aspect-ratio: 1080 / 880;
background-size: contain;
background-position-y:top;
background-position-x:center;
align-items:end;
flex-wrap:wrap;
}
#home-hero-photo::before
{
width: 100%;
aspect-ratio: 2000 / 1090;
height: auto;
position: static;
}
#home-hero-text-container
{
margin-right:0px;
width:100%;
margin-top:0px;
}
#home-hero-text-container::before
{
display:none;
}
#home-hero-text-container .hero-intro
{
justify-content: center;
margin-top:30px;
}
#home-hero-text-container .hero-buttons
{
justify-content:center;
}
}
@media (max-width:767px)
{
#home-hero-photo
{
margin-top:0px;
}
.hero-intro img
{
width:40px;
}
#home-hero-text-container h1
{
font-size:14px;
margin-left:-20px;
}
#home-hero-text-container h2
{
font-size:30px;
}
#home-hero-text-container
{
padding:0px;
}
} #about-us
{
margin-top:100px;
width:100%;
display:flex;
justify-content:center;
background-image:url(https://studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/images/dots.svg);
background-size: 150px;
background-repeat: no-repeat;
background-position-x: 95%;
background-position-y: 98%;
}
#about-us-circle-bg
{
width:100%;
display:flex;
justify-content:center;
background-image:url(https://studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/images/circle-bg.png);
background-size: 160px;
background-repeat: no-repeat;
background-position-x: 3%;
background-position-y: 98%;
}
#about-us-container
{
width:1300px;
display:flex;
justify-content: center;
position:relative;
align-items:center;
margin-bottom:100px;
}
#about-us-container::before
{
content: '';
position: absolute;
z-index:-1;
background-color:white;
border-radius:40px;
top:0px;
right:0px;
height:100%;
width:80%;
}
#about-us-img
{
width:45%;
}
#about-us-img img
{
border-radius: 40px;
width:100%;
height:auto;
}
#about-us-text-container
{
width:55%;
padding:60px;
}
.content-intro
{
display:flex;
align-items:center;
}
.content-intro h2
{
font-size: 16px;
font-weight: 600;
letter-spacing: 0.7px;
color: var(--color-blue2);
margin-left: -30px;
}
.content-header h2
{
font-size:28px;
font-weight:500;
line-height:130%;
margin:0px;
}
.content-text p
{
font-size:20px;
line-height:130%;
}
.content-buttons {
display: flex;
gap: 20px;
align-items: center;
margin-top: 20px;
flex-wrap:wrap;
}
@media (max-width:930px)
{
#about-us
{
margin-top: 20px;
}
#about-us-container
{
flex-wrap:wrap-reverse;
z-index:2;
}
#about-us-container::before
{
width:100%;
height:80%;
}
#about-us-img
{
width:100%;
max-width:500px;
padding:0px 20px;
}
#about-us-text-container
{
width:100%;
}
}
@media (max-width:767px)
{
#about-us-text-container
{
padding:40px 20px;
}
.content-intro img
{
width:40px;
}
.content-intro h2
{
font-size:14px;
margin-left:-20px;
}
.content-header h2
{
font-size:22px;
}
.content-text p
{
font-size:17px;
}
} #services
{
width:100%;
display:flex;
justify-content:center;
margin-bottom:100px;
}
#services-container
{
width:1300px;
display:flex;
justify-content:center;
flex-wrap:wrap;
}
#services-intro
{
width:100%;
display:grid;
justify-content:center;
margin-bottom:40px;
}
#services-intro .content-intro
{
justify-content:center;
}
#services-intro .content-header
{
text-align:center;
} #services-list
{
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 50px;
justify-content: center;
}
.stomatologia-box-a
{
width: calc(25% - 50px);
min-width: 250px;
transition: transform 0.3s ease;
}
.stomatologia-box-a:hover 
{
transform: scale(0.95);
}
.stomatologia-box-item {
position: relative;
background-size: cover;
background-position: center;
height: auto;
border-radius: 40px;
overflow: hidden;
aspect-ratio: 310 / 400;
display: flex;
align-items: end;
justify-content: center;
box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.15);
}
.stomatologia-box-item-overlay {
background-color: var(--color-tuna);
color: var(--color-text);
margin: 15px;
display: flex;
flex-wrap:nowrap;
text-align: start;
border-radius:32px;
padding:20px;
width:100%;
align-items:center;
justify-content:space-between;
overflow:hidden;
}
.stomatologia-box-item-overlay h3
{
font-weight:600;
font-size:16px;
line-height:115%;
margin:0px;
}
.stomatologia-box-item .btn {
margin-top: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
margin:0px;
}
.stomatologia-box-item-overlay h3
{
transition: transform 0.3s ease;
}
.stomatologia-box-item-overlay img
{
transition: transform 0.3s ease, opacity 0.4s ease;
} .stomatologia-box-a:hover h3
{
transform: translateX(30px);
}
.stomatologia-box-a:hover img
{
transform: translateX(150%);
opacity: 0;
}
@media (max-width:767px)
{
#services-list
{
gap:0px;
}
.stomatologia-box-a
{
min-width:220px;
padding:10px;
}
.stomatologia-box-item-overlay
{
padding:15px;
}
.stomatologia-box-item-overlay h3
{
font-size:14px;
}
.stomatologia-box-item-overlay img
{
width:30px;
}
}
@media (max-width:480px)
{
#services
{
margin-bottom:10px;
}
#services-container
{
overflow-x: hidden;
padding-bottom:50px;
}
#services-list
{
flex-wrap: nowrap;
flex-direction: row;
overflow-x: auto;
justify-content: start;
padding: 0px 10px 40px 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.stomatologia-box-a
{
flex-shrink: 0;
min-width: 270px;
scroll-snap-align: start;
}
.stomatologia-box-item
{
aspect-ratio: 310 / 310;
box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15);
}
.stomatologia-box-item-overlay img
{
padding: 0px 0px 0px 20px;
}
} #why-us
{
width:100%;
display:flex;
justify-content:center;
margin-bottom:50px;
}
#why-us-container
{
width:1300px;
}
#why-us-list
{
width:100%;
display:flex;
flex-wrap:wrap;
gap:80px;
justify-content:space-around;
}
.why-us-item
{
min-width:500px;
display:flex;
flex-wrap:nowrap;
gap:30px;
width:calc(50% - 160px);
}
.why-us-item-icon
{
background-color: var(--color-blue2);
border-radius: 100px;
display:flex;
justify-content:center;
width:95px;
height:95px;
}
.why-us-item-icon img
{
width:45px;
height:45px;
padding:25px;
}
.why-us-item-content
{
}
.why-us-item-content h3
{
font-size:22px;
font-weight:600;
margin: 0px;
}
.why-us-item-content p
{
font-size:18px;
font-weight:500;
line-height:120%;
}
@media (max-width:1079px)
{
#why-us-list
{
gap:20px;
}
}
@media (max-width:767px)
{
.why-us-item
{
flex-wrap:wrap;
width: calc(100% - 40px);
min-width:0px;
gap:10px;
justify-content:center;
}
.why-us-item-icon
{
width: 55px;
height: 55px;
margin-bottom: 10px;
}
.why-us-item-icon img
{
width: 25px;
height: 25px;
padding: 15px;
}
.why-us-item-content h3
{
font-size:18px;
text-align: center;
}
.why-us-item-content p
{
font-size:16px;
text-align: center;
}
} #cta
{
padding-top:50px;
width:100%;
display:flex;
justify-content:center;
margin-bottom:100px;
overflow-x:hidden;
background-image: url(https://studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/images/dots.svg);
background-size: 150px;
background-repeat: no-repeat;
background-position-x: 5%;
background-position-y: 0;
}
#cta-container
{
width:1300px;
display:flex;
justify-content:center;
}
#cta-container-content-img
{
background-image:url(https://studiostomatologiimarcelin.pl/wp-content/uploads/2025/05/IMG_9481-1024x768.jpeg);
background-size: contain;
background-repeat: no-repeat;
background-position-x: right;
background-color: white;
width:100%;
margin:20px;
border-radius:40px;
display:flex;
}
#cta-content
{
min-width:390px;
padding: 80px 20px 80px 80px;
background-color: white;
border-radius: 40px 0px 0px 40px;
}
#cta-bg
{
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 31%, rgba(255, 255, 255, 0) 67%);
}
@media (max-width:825px)
{
#cta
{
margin-bottom:30px;
}
#cta-container-content-img
{
flex-wrap:wrap;
background-position-y: bottom;
}
#cta-content
{
width:100%;
padding:40px;
min-width:0px;
border-radius:40px;
}
#cta-bg
{
height:auto;
border-radius: 40px;
background: transparent;
aspect-ratio: 2000 / 1333;
margin-top:-40px;
}
} #ctrev
{
width:100%;
display:flex;
justify-content:center;
padding: 100px 0px;
background-image: url(https://studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/images/half-circle.svg);
background-repeat: no-repeat;
}
#ctrev-container
{
width:1300px;
display:flex;
justify-content:center;
flex-wrap:wrap;
}
#contact
{
width: calc(50% - 40px);
padding:20px;
}
#contact .content-header h2
{
font-weight:600;
}
#contact .content-text p
{
font-size:20px;
font-weight:400;
}
#contact-items-container
{
margin-bottom:40px;
}
.contact-item
{
font-size:20px;
font-weight:400;
color:black;
margin:15px 0px;
}
.contact-item a
{
color:black;
display:flex;
flex-wrap:nowrap;
}
.contact-item img
{
margin-right:10px;
}
#contact .main-button-tuna
{
background-color: var(--color-tuna);
}
#reviews
{
width: calc(50% - 40px);
padding:20px;
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.review-item
{
background-color: white;
display: flex;
gap: 30px;
padding: 30px;
align-items: center;
border-radius:40px;
}
.review-item p
{
margin: 0px;
}
.review-item img
{
border-radius: 20px;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
}
.review-rate-name
{
display: flex;
gap: 15px;
}
.review-rate-name .star
{
font-size:30px;
color:#DDC618
}
.review-rate-name .name
{
font-size:14px;
font-weight:600;
display: flex;
align-items: center;
}
.review-text
{
font-weight:400;
}
#more-reviews
{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#more-reviews h4
{
width: 100%;
margin: 0px;
text-align: center;
font-size: 20px;
font-weight: 600;
}
#more-reviews .content-buttons
{
width: 100%;
justify-content: center;
}
#more-reviews .content-buttons .main-button-tuna
{
border: 2px solid var(--color-blue2);
}
@media (max-width:1000px)
{
#ctrev
{
padding:0px;
}
#contact
{
width: calc(100% - 40px);
overflow:hidden;
}
#contact .content-text p
{
font-size:16px;
}
.contact-item
{
font-size:15px;
}
#reviews
{
width: calc(100% - 40px);
}
.review-item
{
gap:10px;
flex-wrap: wrap;
}
.review-item img
{
width:50px;
height:50px;
border-radius:100px;
}
.review-rate-name
{
margin-bottom:10px;
}
.review-rate-name .star
{
font-size:20px;
}
}h1, h2, h3, h4, h5
{
color: var(--color-blue3);
}
figure
{
margin:0px;
} .offer-main
{
width:100%;
display:flex;
justify-content:center;
}
#offer-hero
{
width:1300px;
display: flex;
align-items: center;
margin: 20px;
}
#offer-hero-content
{
padding: 0px;
display: flex;
width: 100%;
justify-content: center;
}
#offer-hero-content > h1
{
color: var(--color-blue3);
background-color: white;
border-radius: 100px;
text-transform: uppercase;
text-align: center;
font-weight: 500;
font-family: helvetica;
padding: 15px 80px;
font-size: 18px;
}
#offer-container
{
width:1300px;
display:flex;
gap:40px;
padding: 0px 20px 20px 20px;
}
#offer-container-content
{
flex: 1;
width:100%;
}
#offer-container-content p, h1, h2, h3, h4, li
{
line-height: 130%;
}
h1, h2, h3, h4
{
font-weight:600;
}
strong
{
font-weight:600;
}
@media (max-width:767px)
{
#offer-hero
{
height:100px;
margin:0px;
}
}
.wp-block-column .content-intro
{
font-size: 16px;
font-weight: 600;
letter-spacing: 0.7px;
color: var(--color-blue2);
background-image:url(https://studiostomatologiimarcelin.pl/wp-content/themes/ssm-theme/assets/images/circle-blue.svg);
background-size: contain;
background-repeat: no-repeat;
padding: 11px 0px 11px 20px;
margin: 0px;
}
.wp-block-heading
{
margin:0px;
font-weight:500;
}
.wp-block-image
{
display: flex;
justify-content: center;
}
.basic-white-container
{
padding: 50px 50px 50px 0px;
gap:60px;
position:relative;
}
.basic-white-container::before
{
content: '';
position:absolute;
width:75%;
top:0;
right:0;
background-color:white;
border-radius:40px;
height:100%;
z-index:-1;
}
.basic-white-container .wp-block-column
{
align-self:center;
}
.basic-white-container img
{
border-radius:40px;
}
.basic-white-container-reverse
{
padding: 50px 0px 50px 50px;
gap:60px;
position:relative;
}
.basic-white-container-reverse::before
{
content: '';
position:absolute;
width:75%;
top:0;
left:0;
background-color:white;
border-radius:40px;
height:100%;
z-index:-1;
}
.basic-white-container-reverse .wp-block-column
{
align-self:center;
}
.basic-white-container-reverse img
{
border-radius:40px;
}
.basic-wcu-container .wp-block-image
{
}
.basic-cta-container
{
background-color:white;
border-radius:40px;
background-image:url(https://studiostomatologiimarcelin.pl/wp-content/uploads/2025/05/IMG_9481-1024x768.jpeg);
background-size: contain;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center;
gap:0;
}
.basic-cta-container .wp-block-column:first-of-type
{
align-self:center;
padding:80px 0px 80px 80px;
background-color:white;
border-radius:40px 0px 0px 40px;
}
.basic-cta-container .wp-block-column:last-of-type
{
background:linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 31%, rgba(255, 255, 255, 0) 67%);
}
.basic-cta-container p
{
font-size:20px;
}
.content-buttons {
display: flex;
gap: 20px;
align-items: center;
margin-top: 20px;
flex-wrap:wrap;
} .main-button-tuna {
display: flex;
align-items: center;
border: 2px solid var(--color-tuna);
border-radius: 40px;
transition: background-color 0.3s ease;
white-space: nowrap;
}
.main-button-tuna a {
color: var(--color-text);
font-weight: 500;
font-size: 15px;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
width: 100%;
transition: transform 0.4s ease;
padding: 11px 19px;
overflow: hidden;
}
.main-button-tuna .button-tuna-text {
display: inline-block;
transition: transform 0.4s ease;
}
.main-button-tuna img {
width: 7.5px;
height: 14px;
padding-left: 10px;
transition: transform 0.4s ease, opacity 0.4s ease;
} .main-button-tuna:hover .button-tuna-text {
transform: translateX(7.5%);
}
.main-button-tuna:hover img {
transform: translateX(150%);
opacity: 0;
} .second-button {
display: flex;
align-items: center;
transition: background-color 0.3s ease;
white-space: nowrap;
}
.second-button a {
color: var(--color-text);
font-weight: 500;
font-size: 15px;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
width: 100%;
transition: transform 0.4s ease;
padding: 11px 19px;
overflow: hidden;
}
.second-button .second-button-text {
display: inline-block;
transition: transform 0.4s ease;
}
.second-button img {
opacity:0;
width: 7.5px;
height: 14px;
padding-left: 10px;
transition: transform 0.4s ease, opacity 0.4s ease;
} .second-button:hover .second-button-text {
transform: translateX(7.5%);
}
.second-button:hover img {
transform: translateX(100%);
opacity: 1;
}
@media (max-width:1100px)
{
.basic-cta-container
{
background-size:cover;
}
}
@media (max-width:767px)
{
.basic-white-container
{
padding:20px 0px 0px 0px;
gap:20px;
flex-direction: column-reverse;
}
.basic-white-container::before
{
width:100%;
}
.basic-white-container .wp-block-column:last-of-type
{
padding:20px;
}
.basic-white-container .wp-block-heading
{
font-size:22px;
}
.basic-white-container-reverse
{
padding:20px 0px 0px 0px;
gap:20px;
}
.basic-white-container-reverse::before
{
width:100%;
}
.basic-white-container-reverse .wp-block-column:first-of-type
{
padding:20px;
}
.basic-white-container-reverse .wp-block-heading
{
font-size:22px;
}
.basic-cta-container
{
background-size:contain;
background-position-y: bottom;
}
.basic-cta-container .wp-block-column:first-of-type
{
padding: 40px;
border-radius: 40px;
}
.basic-cta-container > .wp-block-column > .content-intro, .basic-white-container > .wp-block-column > .content-intro, .basic-white-container-reverse > .wp-block-column > .content-intro
{
font-size:14px;
padding: 8px 0px 8px 15px;
}
.basic-cta-container .wp-block-heading
{
font-size:22px;
}
.basic-cta-container p {
font-size: 17px;
}
.basic-cta-container .wp-block-column:last-of-type
{
background:none;
height: auto;
aspect-ratio: 2000 / 1150;
}
}