@import url("https://fonts.googleapis.com/css2?family=Cormorant+Unicase&family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:wght@300;400&display=swap");
#section1, #section2, #section3, #section4 {
padding-bottom: 50px;
}
*{
margin: 0;
padding: 0;
list-style-type: none;
}
img{
max-width: 100%;
}
a{
text-decoration: none;
}
body{
background: #f4efe0;
}
.container-fluid{
padding-left: 50px;
padding-right: 50px;
}
header{
height: 90px;
font-family: 'Cormorant', sans-serif;
}
header .container-fluid{
padding-left: 10px;
padding-right: 10px;
}
header .navbar{
padding: 13px 40px;
}
header .navbar-brand img{
max-width: 63px;
max-height: 54px;
}
header .navbar-brand{
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
}
header .navbar-brand img{
max-width: 63px;
}
header .navbar-nav{
width: 100%;
justify-content: center;
}
header .navbar-nav li{
margin-right: 12px;
padding: 0;
}
header .navbar-nav .nav-link{
padding: 0 !important;
color: #030304;
font-size: 19px;
}
header .navbar-nav .nav-link:hover{
color: #90704e;
transition: .5s all;
}
header .langs{
display: flex;
margin: 0px 25px 0 0;
color: rgb(144, 112, 78);
}
header .langs li{
padding: 0 3px;
}
header .langs li a{
color: rgb(144, 112, 78);
}
header .langs li a:hover{
color: #90704e;
transition: .5s all;
}
#hero{
display: flex;
height: calc(100vh - 90px);
justify-content: space-between;
align-items: center;
flex-direction: column;
background: url(//cetinlawoffice.com/wp-content/themes/cetinlaw/images/hero.png) top center no-repeat;
background-size: cover;
}
#hero img{
max-width: 830px;
margin: 250px 0 0 0;
}
#hero .kongzi{
margin-bottom: 30px;
text-align: center;
}
#hero .kongzi p{
color: rgb(244, 239, 224);
font-style: italic;
font-family: 'Cormorant', sans-serif;
margin: 0;
font-size: 19px;
line-height: 33px;
}
#hero .kongzi span{
color: rgb(144, 112, 78);
margin: 13px 0 0 0;
font-size: 19px;
font-family: "CormorantUnicase";
}
#section1{
padding-top: 68px;
}
#section1 .section-title{
font-size: 50px;
font-family: "Roboto";
color: rgb(0, 37, 46);
}
#section1 .left{
display: flex;
justify-content: space-between;
flex-direction: column;
}
#section1 .left img{
max-width: 260px;
}
#section1 .right .sub{
font-size: 40px;
font-family: "Cormorant";
font-weight: 400;
font-style: italic;
color: rgb(144, 112, 78);
padding: 0 0 0 34px;
line-height: 54px;
}
#section1 .right p{
margin: 38px 0 45px 0;
color: #10323a;
font-family: "Cormorant";
font-size: 21px;
padding: 0 0 0 35px;
line-height: 41px;
font-weight: 400;
}
#section1 .right * {
color: #10323a;
font-family: "Cormorant";
font-size: 21px;
line-height: 41px;
font-weight: 400;
}
#section1 .bottom{
font-size: 70px;
font-family: "Cormorant";
color: rgb(144, 112, 78);
font-style: italic;
margin: 0 0 0 40px;
display: flex;
font-weight: 500;
}
#section2{
padding-top: 85px;
padding-bottom: 85px;
overflow: hidden;
}
#section2 .container-fluid{
max-width: 100%;
padding-right: 0px;
}
#section2 .section-title{
font-size: 50px;
font-family: "Roboto";
color: rgb(0, 37, 46);
margin: -17px 0 0 0;
}
#section2 .right{
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 0;
}
#section2 .right .item{
margin: 3px 13px 0 0;
width: 395px;
}
#section2 .right .item:hover strong{
color: #90704e;
transition: .5s all;
}
#section2 .right .item img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: .5s all;
}
#section2 .right .item img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
#section2 .bottom{
display: flex;
flex-direction: column;
padding-top: 30px;
}
#section2 .bottom strong{
width: 100%;
font-weight: normal;
}
#section2 .bottom strong{
color: #00252e;
font-size: 17px;
font-family: "Cormorant";
text-decoration: underline;
margin-bottom: 3px;
}
#section2 .bottom strong::after{
content: '';
display: inline-flex;
width: 11px;
height: 10px;
margin-left: 10px;
background: url(//cetinlawoffice.com/wp-content/themes/cetinlaw/images/arrow.png) center center no-repeat;
}
#section2 .bottom small{
color: #90704e;
font-family: "Cormorant";
font-size: 16px;
font-style: italic;
}
#section2 .item-detail{
display: none;
transition:  1s all;
padding: 0 0 0 190px;
}
#section2 .item-detail .nav{
width: 215px;
}
#section2 .content{
margin: -4px 0 0 50px;
font-family: "Cormorant";
font-size: 20px;
line-height: 34px;
}
#section2 .content label{
color: #90704e;
font-style: italic;
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
}
#section2 .content .text-list{
padding: 0;
list-style: none;
}
#section2 .content .text-list li{
text-decoration: underline;
display: inline-flex;
}
#section2 .content .text-list li:not(:last-child):after {
content: ", ";
}
#section2 .content .image-list{
display: flex;
padding: 0;
align-items: center;
}
#section2 .content .image-list li{
margin-right: 30px;
} #section3{
padding-top: 68px;
}
#section3 .section-title{
font-size: 50px;
font-family: "Roboto";
color: rgb(0, 37, 46);
}
#section3 .right .sub{
padding: 5px 0 30px 34px;
font-size: 37px;
font-family: "Roboto";
color: rgb(144, 112, 78);
}
#section3 .right p{
font-size: 18px;
font-family: "Cormorant";
color: #10323a;
padding: 7px 0px;
line-height: 1.3;
}
#section3 .list{
display: flex;
padding: 23px 0 100px 35px;
}
#section3 .list ul{
width: 100%;
padding: 0;
font-size: 15px;
font-family: "Cormorant";
color: #214046;
}
#section3 .list ul li{
font-size: 18px;
font-weight: 500;
}
#section3 .list ul li span{
color: rgb(144, 112, 78);
margin-right: 30px;
}
#section3 .accordion *{
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
outline: none;
}
#section3 .accordion-button:after,
#section3 .accordion-button:before{
display: none !important;
}
#section3 .accordion-button{
margin-bottom: 30px;
font-size: 30px;
font-family: "Roboto";
color: rgb(144, 112, 78);
text-decoration: underline;
}
#section3 .accordion-body{
padding-bottom: 30px;
font-size: 20px;
font-family: "Cormorant";
color: #10323a;
line-height: 38px;
} #section4{
padding-top: 70px;
}
#section4 .section-title{
font-size: 50px;
font-family: "Roboto";
color: rgb(0, 37, 46);
}
#section4 .item{
margin-bottom: 90px;
}
#section4 .item span{
font-size: 28px;
font-family: "Cormorant";
color: rgb(144, 112, 78);
margin: 43px 0 0 -9px;
display: flex;
}
#section4 .item label{
margin-top: -20px;
font-size: 16px;
font-family: "Cormorant";
color: rgb(144, 112, 78);
margin: -78px 0 0 35px;
display: flex;
}
#section4 .item a{
font-size: 25px;
font-family: "Roboto";
color: rgb(0, 37, 46);
text-decoration: underline;
display: flex;
margin: 2px 0 0 37px;
}
#section5{
height: 100vh;
padding-top: 65px;
background: #202430 url(//cetinlawoffice.com/wp-content/themes/cetinlaw/images/map.png) right top no-repeat;
border-bottom: 4px solid #90704e;
}
#section5 .section-title{
font-size: 50px;
font-family: "Roboto";
color: #f4efe0;
}
#section5 .right .item{
display: flex;
flex-direction: column;
padding-top: 310px;
margin: 0 30px 0 0;
}
button.toggleMenu {
display: none;
}
#section5 .right .item label{
font-size: 16px;
font-family: "Cormorant";
color: rgb(144, 112, 78);
font-style: italic;
padding: 0 0 32px 0;
}
#section5 .right .item .white{
font-size: 18px;
font-family: "CormorantInfant";
color: rgb(244, 239, 224);
margin: 0 0 20px 0;
line-height: 34px;
}
#section5 .right .item .map{
font-size: 18px;
font-family: "Roboto";
color: rgb(144, 112, 78);
text-decoration: underline;
}
#section5 .right .item:last-child{
padding: 50px 0 0 0;
}
#section5 .right .item:last-child a{
font-size: 25px;
font-family: "Roboto";
color: rgb(244, 239, 224);
text-decoration: underline;
padding: 0 0 0 10px;
}
#section5 .right .item:last-child a:hover{
text-decoration: none;
}
#section5 .bottom{
margin-top: 60px;
margin-bottom: 50px;
}
#section5 .logo img{
width: 46px;
}
#section5 .copyright{
padding-top: 20px;
font-size: 11px;
font-family: "Roboto";
color: rgb(144, 112, 78);
border-top: 1px solid #2c3243;
}
#section5 .copyright a {
color: rgb(144, 112, 78);
font-weight: 600;
}
section.mobilemenu {
background: #202430 url(//cetinlawoffice.com/wp-content/themes/cetinlaw/images/map.png) right top no-repeat;
height: 100vh;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
section.mobilemenu .navbar-nav .nav-link {
text-align: center;
color: #fff;
font-family: "CormorantInfant";
color: rgb(244, 239, 224);
font-size: 24px;
}
section.mobilemenu ul.langs {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin-top: 30px;
}
section.mobilemenu ul.langs li {
text-align: center;
color: #fff;
font-family: "CormorantInfant";
color: rgb(244, 239, 224);
font-size: 20px;
}
section.mobilemenu ul.langs li a {
color: #fff;
font-family: "CormorantInfant";
color: rgb(244, 239, 224);
font-size: 20px;
}
section.mobilemenu ul.langs li:nth-child(2) {
margin-left: 10px;
margin-right: 10px;
}
section.mobilemenu button.close {
width: 40px;
height: 40px;
border: 0;
border-radius: 100%;
font-weight: 700;
position: absolute;
left: 30px;
top: 30px;
}
@media (max-width: 1440px){
.section,
.fp-tableCell{
height: auto !important;
}
}
@media (max-width: 1200px){
button.toggleMenu {
display: flex;
}
header{
height: auto;
}
.toggleMenu{
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
transition: box-shadow .15s ease-in-out;
background: url(//cetinlawoffice.com/wp-content/themes/cetinlaw/images/menu-3-line.png) center center no-repeat;
border: 1px solid #90704e;
}
header .navbar{
padding: 15px;
}
header .langs{
margin: 0;
padding: 15px 0 0 0;
}
header .langs li{
padding: 0 3px 0 0;
}
#hero{
padding: 50px 0;
height: auto;
}
#hero img{
margin: 0;
max-width: 75%;
}
#hero .kongzi{
margin: 50px 0 0 0;
}
#section1{
padding: 30px;
}
.container-fluid{
padding: 0;
}
#section1 .left{
padding: 0;
}
#section1 .section-title{
font-size: 26px;
margin-bottom: 15px;
}
#section1 .left img{
max-width: 225px;
}
#section1 .right .sub{
padding: 0;
font-size: 18px;
line-height: normal;
}
#section1 .right p{
margin: 15px 0 0 0;
padding: 0 0 0 0;
font-size: 14px;
line-height: 16px;
}
#section1 .bottom{
margin: 15px 0 0 0;
font-size: 36px;
text-align: center;
}
#section2{
padding: 30px;
}
#section2 .left{
padding: 0;
}
#section2 .section-title{
font-size: 26px;
margin-bottom: 15px;
}
#section2 .right{
display: flex;
flex-direction: column;
margin: 0;
}
#section2 .right .item{
margin: 0;
width: 100%;
}
#section2 .nav-fixed{
flex-direction: column;
}
#section2 .bottom{
padding: 15px 0;
}
#section2 .item-detail{
padding: 0;
flex-direction: column;
}
#section2 .item-detail .profile{
width: 100%;
}
#section2 .item-detail .profile img{
width: 100%;
}
#section2 .item-detail .content{
margin: 0;
width: 100%;
}
#section3{
padding: 30px;
}
#section3 .section-title{
font-size: 26px;
margin-bottom: 15px;
}
#section3 .right .sub{
padding: 0;
font-size: 18px;
}
#section3 .right p{
font-size: 14px;
padding: 10px 0;
line-height: normal;
}
#section3 .list{
display: flex;
flex-direction: column;
padding: 0;
}
#section3 .list ul{
width: 100%;
font-size: 14px;
}
#section3 .list ul li{
margin-bottom: 5px;
}
#section3 .list ul li span{
margin-right: 10px;
}
#section3 .bottom-links ul{
padding: 0;
}
#section3 .bottom-links li {
margin-bottom: 15px;
}
#section3 .bottom-links li a{
font-size: 16px;
}
#section4{
padding: 30px;
}
#section4 .section-title{
font-size: 26px;
margin-bottom: 15px;
}
#section4 .item{
margin-bottom: 30px;
}
#section4 .item span{
font-size: 16px;
margin: 0;
}
#section4 .item label{
margin-top: 0;
font-size: 16px;
font-family: "Cormorant";
color: rgb(144, 112, 78);
margin: 0;
display: flex;
}
#section4 .item a{
font-size: 16px;
margin: 0;
}
#section5{
height: unset;
padding: 30px 30px 0 30px;
}
#section5 .left{
padding-left: 0;
}
#section5 .section-title{
font-size: 26px;
margin-bottom: 15px;
}
#section5 .right .item{
margin: 0 0 30px 0;
padding: 0;
}
#section5 .right .item label{
font-size: 14px;
padding: 0 0 30px 0;
}
#section5 .right .item .white{
font-size: 14px;
margin: 0 0 20px 0;
line-height: normal;
}
#section5 .right .item .map{
font-size: 14px;
}
#section5 .right .item:last-child{
padding: 30px 0 0 0;
}
#section5 .right .item:last-child a{
font-size: 16px;
padding: 0;
}
#section5 .bottom{
margin-top: 30px;
margin-bottom: 30px;
}
#section5 .logo img{
width: 46px;
margin-bottom: 15px;
}
#section5 .copyright{
padding-top: 15px;
}
}
@media (max-width: 768px){
#section1 .right .sub, #section1 .right p, #section3 .right p, #section3 .right .sub, #section3 .right .item, #section3 .right .item label, #section3 .right .item .white, #section3 .right .item .map, #section3 .right .item a, #section5 .right .item label, #section5 .right .item .white, #section5 .right .item .map, #section5 .right .item a{
font-size: 18px;
line-height: 1.3;
}
#section2 .right .item {
margin: 5px;
width: 100%;
}
#section2 .bottom strong {
font-size: 18px;
}
#section2 .item-detail .nav {
width: 100%;
}
#section3 .accordion-button {
font-size: 18px;
line-height: 1.3;
margin-bottom: 10px;
}
#section3 .list ul li {
margin-bottom: 0;
}
#hero {
height: calc(100vh - 84px);
display: flex;
align-items: center;
justify-content: center;
}
}