/* Start custom CSS for html, class: .elementor-element-23ff62e *//* =====================================================
S.K. & SONS
MONO CARTONS ABOUT SECTION
===================================================== */
.sk-mono-about-section{
width:100%;
padding:50px 20px;
background:#F7F3EC;
font-family:'Poppins',sans-serif;
overflow:hidden;
box-sizing:border-box;
}
.sk-mono-about-section *,
.sk-mono-about-section *::before,
.sk-mono-about-section *::after{
box-sizing:border-box;
}
/* =====================================================
MAIN
===================================================== */
.sk-mono-about-wrap{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:75px;
align-items:center;
}
/* =====================================================
LEFT CONTENT
===================================================== */
.sk-mono-about-content{
max-width:620px;
}
.sk-mono-about-tag{
display:block;
margin-bottom:15px;
color:#5A3420;
font-size:13px;
font-weight:600;
letter-spacing:2.5px;
}
.sk-mono-about-content h2{
margin:0 0 25px;
color:#222;
font-size:44px;
line-height:1.18;
font-weight:700;
letter-spacing:-1px;
}
.sk-mono-about-content h2 strong{
display:block;
color:#5A3420;
font-weight:700;
}
.sk-mono-about-content p{
margin:0 0 18px;
color:#666;
font-size:15px;
line-height:1.9;
}
.sk-mono-about-content p strong{
color:#4F382B;
font-weight:600;
}
/* =====================================================
IMAGE AREA
===================================================== */
.sk-mono-about-image{
position:relative;
min-height:470px;
display:flex;
align-items:center;
justify-content:center;
}
/* Background Shape */
.sk-mono-image-bg{
position:absolute;
width:390px;
height:390px;
right:15px;
top:50%;
transform:translateY(-50%);
background:#E8DCCF;
border-radius:50%;
}
/* Image Frame */
.sk-mono-image-frame{
position:relative;
z-index:2;
width:630px;
height:400px;
overflow:hidden;
border-radius:26px;
background:#ddd;
box-shadow:
0 25px 55px rgba(60,35,20,.18);
transition:.5s ease;
}
/* Image */
.sk-mono-image-frame img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:.6s ease;
}
/* =====================================================
EXPERIENCE BADGE
===================================================== */
.sk-mono-experience{
position:absolute;
z-index:4;
left:5px;
bottom:0px;
display:flex;
align-items:center;
gap:13px;
padding:15px 20px;
background:#5A3420;
border:4px solid #F7F3EC;
border-radius:14px;
box-shadow:
0 12px 30px rgba(50,30,20,.18);
transition:.4s ease;
}
.sk-mono-experience strong{
color:#D7B27A;
font-size:30px;
line-height:1;
font-weight:700;
}
.sk-mono-experience span{
color:#fff;
font-size:10px;
line-height:1.5;
font-weight:500;
}
/* =====================================================
HOVER
===================================================== */
.sk-mono-about-image:hover .sk-mono-image-frame{
transform:translateY(-7px);
box-shadow:
0 32px 65px rgba(60,35,20,.25);
}
.sk-mono-about-image:hover
.sk-mono-image-frame img{
transform:scale(1.05);
}
.sk-mono-about-image:hover
.sk-mono-experience{
transform:translateY(-5px);
}
/* =====================================================
TABLET
===================================================== */
@media(max-width:991px){
.sk-mono-about-section{
padding:75px 20px;
}
.sk-mono-about-wrap{
grid-template-columns:1fr;
gap:55px;
}
.sk-mono-about-content{
max-width:800px;
}
.sk-mono-about-content h2{
font-size:40px;
}
.sk-mono-about-image{
min-height:440px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:700px){
.sk-mono-about-section{
padding:60px 18px;
}
.sk-mono-about-content h2{
font-size:31px;
line-height:1.25;
}
.sk-mono-about-content p{
font-size:14px;
line-height:1.8;
}
.sk-mono-about-image{
min-height:370px;
}
.sk-mono-image-bg{
width:300px;
height:300px;
right:0;
}
.sk-mono-image-frame{
width:100%;
height:350px;
border-radius:21px;
}
.sk-mono-experience{
left:5px;
bottom:15px;
padding:12px 15px;
}
.sk-mono-experience strong{
font-size:25px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media(max-width:400px){
.sk-mono-about-content h2{
font-size:28px;
}
.sk-mono-image-frame{
height:320px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9f4d2c3 *//* =====================================================
S.K. & SONS
MONO CARTONS - FEATURE CARDS
===================================================== */
.sk-mono-card-features{
width:100%;
padding:40px 20px;
background:#FFFFFF;
font-family:'Poppins',sans-serif;
overflow:hidden;
box-sizing:border-box;
}
.sk-mono-card-features *,
.sk-mono-card-features *::before,
.sk-mono-card-features *::after{
box-sizing:border-box;
}
/* =====================================================
CONTAINER
===================================================== */
.sk-mono-card-container{
max-width:1200px;
margin:0 auto;
}
/* =====================================================
HEADING
===================================================== */
.sk-mono-card-heading{
max-width:720px;
margin:0 auto 55px;
text-align:center;
}
.sk-mono-card-heading > span{
display:block;
margin-bottom:13px;
color:#5A3420;
font-size:13px;
font-weight:600;
letter-spacing:2.5px;
}
.sk-mono-card-heading h2{
margin:0 0 17px;
color:#222;
font-size:42px;
line-height:1.2;
font-weight:700;
letter-spacing:-.5px;
}
.sk-mono-card-heading h2 strong{
display:block;
color:#5A3420;
font-weight:700;
}
.sk-mono-card-heading p{
margin:0;
color:#666;
font-size:15px;
line-height:1.8;
}
/* =====================================================
4 x 2 GRID
===================================================== */
.sk-mono-card-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:20px;
}
/* =====================================================
CARD
===================================================== */
.sk-mono-feature-card{
position:relative;
min-height:300px;
padding:27px 24px;
display:flex;
flex-direction:column;
background:#fff;
border:1px solid #E1D6CC;
border-radius:20px;
overflow:hidden;
box-shadow:
0 8px 25px rgba(60,40,25,.04);
transition:
transform .4s ease,
background .4s ease,
border-color .4s ease,
box-shadow .4s ease;
}
/* =====================================================
TOP
===================================================== */
.sk-mono-card-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:25px;
}
.sk-mono-card-top > span{
color:#B39A88;
font-size:12px;
font-weight:600;
letter-spacing:1.5px;
}
/* =====================================================
ICON
===================================================== */
.sk-mono-card-icon{
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:15px;
background:#F3EAE0;
color:#5A3420;
font-size:21px;
transition:.4s ease;
}
/* =====================================================
TITLE
===================================================== */
.sk-mono-feature-card h3{
margin:0 0 13px;
color:#222;
font-size:18px;
line-height:1.4;
font-weight:650;
transition:.3s ease;
}
/* =====================================================
DESCRIPTION
===================================================== */
.sk-mono-feature-card p{
margin:0;
color:#707070;
font-size:12.5px;
line-height:1.75;
transition:.3s ease;
}
/* =====================================================
BOTTOM LINE
===================================================== */
.sk-mono-card-line{
width:35px;
height:3px;
margin-top:auto;
padding-top:0;
background:#D7B27A;
border-radius:5px;
transition:.4s ease;
}
/* =====================================================
DECORATIVE CIRCLE
===================================================== */
.sk-mono-feature-card::after{
content:"";
position:absolute;
width:120px;
height:120px;
right:-75px;
bottom:-75px;
border:22px solid rgba(90,52,32,.04);
border-radius:50%;
transition:.5s ease;
}
/* =====================================================
HOVER
===================================================== */
.sk-mono-feature-card:hover{
background:#5A3420;
border-color:#5A3420;
transform:translateY(-8px);
box-shadow:
0 25px 45px rgba(90,52,32,.20);
}
.sk-mono-feature-card:hover
.sk-mono-card-top > span{
color:#D7B27A;
}
.sk-mono-feature-card:hover
.sk-mono-card-icon{
background:#D7B27A;
color:#5A3420;
transform:rotate(-6deg) scale(1.08);
}
.sk-mono-feature-card:hover h3{
color:#fff;
}
.sk-mono-feature-card:hover p{
color:#E9DED5;
}
.sk-mono-feature-card:hover
.sk-mono-card-line{
width:65px;
background:#D7B27A;
}
.sk-mono-feature-card:hover::after{
border-color:rgba(255,255,255,.07);
transform:scale(1.2);
}
/* =====================================================
TABLET
===================================================== */
@media(max-width:1100px){
.sk-mono-card-grid{
grid-template-columns:repeat(2, 1fr);
}
.sk-mono-feature-card{
min-height:280px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:700px){
.sk-mono-card-features{
padding:60px 18px;
}
.sk-mono-card-heading{
margin-bottom:40px;
}
.sk-mono-card-heading h2{
font-size:30px;
line-height:1.3;
}
.sk-mono-card-heading p{
font-size:13.5px;
}
.sk-mono-card-grid{
grid-template-columns:1fr;
gap:15px;
}
.sk-mono-feature-card{
min-height:270px;
padding:24px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media(max-width:400px){
.sk-mono-card-heading h2{
font-size:27px;
}
.sk-mono-feature-card{
min-height:255px;
padding:22px;
}
.sk-mono-card-icon{
width:50px;
height:50px;
font-size:19px;
}
.sk-mono-feature-card h3{
font-size:17px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fa05ce2 *//* =====================================================
S.K. & SONS
MONO CARTONS - APPLICATIONS
PREMIUM VISUAL SECTION
===================================================== */
.sk-mono-applications{
width:100%;
padding:35px 20px;
background:#F7F4F0;
font-family:'Poppins',sans-serif;
overflow:hidden;
box-sizing:border-box;
}
.sk-mono-applications *,
.sk-mono-applications *::before,
.sk-mono-applications *::after{
box-sizing:border-box;
}
/* =====================================================
INNER
===================================================== */
.sk-mono-applications-inner{
max-width:1200px;
margin:0 auto;
}
/* =====================================================
HEADING
===================================================== */
.sk-mono-applications-heading{
max-width:720px;
margin:0 auto 70px;
text-align:center;
}
.sk-mono-applications-heading > span{
display:block;
margin-bottom:14px;
color:#5A3420;
font-size:18px;
font-weight:600;
letter-spacing:2.5px;
}
.sk-mono-applications-heading h2{
margin:0 0 18px;
color:#222;
font-size:43px;
line-height:1.2;
font-weight:700;
letter-spacing:-1px;
}
.sk-mono-applications-heading h2 strong{
display:block;
color:#5A3420;
font-weight:700;
}
.sk-mono-applications-heading p{
max-width:680px;
margin:0 auto;
color:#666;
font-size:15px;
line-height:1.85;
}
/* =====================================================
MAIN AREA
===================================================== */
.sk-mono-applications-main{
display:grid;
grid-template-columns:1fr 1.05fr 1fr;
gap:35px;
align-items:center;
}
/* =====================================================
APPLICATION COLUMNS
===================================================== */
.sk-mono-applications-column{
display:flex;
flex-direction:column;
gap:42px;
}
/* =====================================================
APPLICATION
===================================================== */
.sk-mono-application{
display:flex;
align-items:flex-start;
gap:17px;
padding-bottom:28px;
border-bottom:1px solid #DED5CD;
transition:.4s ease;
}
/* =====================================================
ICON
===================================================== */
.sk-mono-application-icon{
width:54px;
height:54px;
flex:0 0 54px;
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
border:1px solid #DED2C8;
border-radius:50%;
color:#5A3420;
transition:all .4s ease;
}
.sk-mono-application-icon svg{
width:25px;
height:25px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round;
transition:.4s ease;
}
/* =====================================================
CONTENT
===================================================== */
.sk-mono-application-content{
flex:1;
}
.sk-mono-application-content > span{
display:block;
margin-bottom:4px;
color:#B29886;
font-size:10px;
font-weight:600;
letter-spacing:1.5px;
}
.sk-mono-application-content h3{
margin:0 0 7px;
color:#222;
font-size:17px;
line-height:1.4;
font-weight:650;
transition:.3s ease;
}
.sk-mono-application-content p{
margin:0;
color:#707070;
font-size:12.5px;
line-height:1.7;
transition:.3s ease;
}
/* =====================================================
CENTER
===================================================== */
.sk-mono-applications-center{
position:relative;
min-height:500px;
display:flex;
align-items:center;
justify-content:center;
}
/* =====================================================
CIRCLE
===================================================== */
.sk-mono-application-circle{
position:relative;
width:410px;
height:410px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#EDE4DB;
border:1px solid #DED1C5;
transition:.5s ease;
}
.sk-mono-application-circle::before{
content:"";
position:absolute;
inset:-25px;
border:1px dashed #D7B27A;
border-radius:50%;
opacity:.8;
}
/* =====================================================
IMAGE
===================================================== */
.sk-mono-application-image{
position:relative;
z-index:2;
width:350px;
height:350px;
overflow:hidden;
border-radius:50%;
background:#E3D8CF;
box-shadow:
0 25px 60px rgba(65,42,27,.16);
transition:.5s ease;
}
.sk-mono-application-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:.6s ease;
}
/* =====================================================
BADGE
===================================================== */
.sk-mono-center-badge{
position:absolute;
right:5px;
bottom:25px;
z-index:5;
width:92px;
height:92px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius:50%;
background:#5A3420;
color:#D7B27A;
font-size:10px;
font-weight:600;
line-height:1.4;
letter-spacing:1.5px;
box-shadow:
0 15px 35px rgba(70,40,22,.2);
transition:.4s ease;
}
/* =====================================================
HOVER
===================================================== */
.sk-mono-application:hover{
transform:translateY(-5px);
}
.sk-mono-application:hover .sk-mono-application-icon{
background:#5A3420;
border-color:#5A3420;
color:#D7B27A;
transform:scale(1.08);
}
.sk-mono-application:hover .sk-mono-application-icon svg{
transform:scale(1.08);
}
.sk-mono-application:hover .sk-mono-application-content h3{
color:#5A3420;
}
.sk-mono-applications-center:hover
.sk-mono-application-circle{
transform:scale(1.02);
}
.sk-mono-applications-center:hover
.sk-mono-application-image{
transform:translateY(-8px);
box-shadow:
0 35px 75px rgba(65,42,27,.22);
}
.sk-mono-applications-center:hover
.sk-mono-application-image img{
transform:scale(1.06);
}
.sk-mono-applications-center:hover
.sk-mono-center-badge{
transform:scale(1.08) rotate(5deg);
}
/* =====================================================
TABLET
===================================================== */
@media(max-width:991px){
.sk-mono-applications{
padding:75px 20px;
}
.sk-mono-applications-heading h2{
font-size:38px;
}
.sk-mono-applications-main{
grid-template-columns:1fr;
gap:50px;
}
.sk-mono-applications-center{
order:-1;
min-height:430px;
}
.sk-mono-application-circle{
width:350px;
height:350px;
}
.sk-mono-application-image{
width:300px;
height:300px;
}
.sk-mono-applications-column{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:700px){
.sk-mono-applications{
padding:60px 18px;
}
.sk-mono-applications-heading{
margin-bottom:45px;
}
.sk-mono-applications-heading h2{
font-size:30px;
line-height:1.3;
}
.sk-mono-applications-heading p{
font-size:13px;
line-height:1.8;
}
.sk-mono-applications-main{
gap:40px;
}
.sk-mono-applications-center{
min-height:320px;
}
.sk-mono-application-circle{
width:275px;
height:275px;
}
.sk-mono-application-circle::before{
inset:-18px;
}
.sk-mono-application-image{
width:235px;
height:235px;
}
.sk-mono-center-badge{
right:8px;
bottom:5px;
width:70px;
height:70px;
font-size:8px;
}
.sk-mono-applications-column{
display:flex;
gap:28px;
}
.sk-mono-application{
gap:12px;
padding-bottom:22px;
}
.sk-mono-application-icon{
width:44px;
height:44px;
flex:0 0 44px;
}
.sk-mono-application-icon svg{
width:20px;
height:20px;
}
.sk-mono-application-content h3{
font-size:15px;
}
.sk-mono-application-content p{
font-size:11.5px;
line-height:1.65;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media(max-width:400px){
.sk-mono-applications-heading h2{
font-size:27px;
}
.sk-mono-application-circle{
width:245px;
height:245px;
}
.sk-mono-application-image{
width:210px;
height:210px;
}
.sk-mono-center-badge{
width:62px;
height:62px;
font-size:7px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8994a0e *//* =====================================================
S.K. & SONS
CUSTOM PRINTING & BRANDING
===================================================== */
.sk-print-branding{
width:100%;
padding:40px 20px;
background:#5A3420;
font-family:'Poppins',sans-serif;
overflow:hidden;
box-sizing:border-box;
}
.sk-print-branding *,
.sk-print-branding *::before,
.sk-print-branding *::after{
box-sizing:border-box;
}
/* =====================================================
MAIN CONTAINER
===================================================== */
.sk-print-branding-inner{
max-width:1180px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}
/* =====================================================
LEFT CONTENT
===================================================== */
.sk-print-branding-content{
max-width:570px;
}
/* Small Tag */
.sk-print-tag{
display:block;
margin-bottom:15px;
color:#D7B27A;
font-size:13px;
font-weight:600;
letter-spacing:2.5px;
}
/* Heading */
.sk-print-branding-content h2{
margin:0 0 22px;
color:#FFFFFF;
font-size:43px;
line-height:1.2;
font-weight:700;
letter-spacing:-.7px;
}
.sk-print-branding-content h2 strong{
display:block;
color:#D7B27A;
font-weight:700;
}
/* Paragraph */
.sk-print-branding-content p{
margin:0 0 15px;
color:#E9DED5;
font-size:15px;
line-height:1.85;
}
/* =====================================================
BUTTON
===================================================== */
.sk-print-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
margin-top:18px;
padding:12px 14px 12px 21px;
background:#D7B27A;
color:#5A3420;
text-decoration:none;
border-radius:50px;
font-size:13px;
font-weight:600;
transition:all .4s ease;
}
.sk-print-btn span{
width:31px;
height:31px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#5A3420;
color:#FFFFFF;
font-size:17px;
transition:all .4s ease;
}
.sk-print-btn:hover{
background:#FFFFFF;
color:#5A3420;
transform:translateY(-3px);
}
.sk-print-btn:hover span{
transform:translateX(4px) rotate(45deg);
}
/* =====================================================
RIGHT VISUAL
===================================================== */
.sk-print-branding-visual{
position:relative;
min-height:430px;
display:flex;
align-items:center;
justify-content:center;
}
/* =====================================================
DECORATIVE CIRCLE
===================================================== */
.sk-print-circle{
position:absolute;
width:390px;
height:390px;
border-radius:50%;
border:1px solid rgba(215,178,122,.35);
background:
radial-gradient(
circle,
rgba(215,178,122,.16),
rgba(215,178,122,.03) 65%,
transparent 66%
);
transition:all .5s ease;
}
/* =====================================================
INNER BOX
===================================================== */
.sk-print-box{
position:relative;
z-index:2;
width:330px;
min-height:330px;
padding:45px 38px;
display:flex;
flex-direction:column;
justify-content:center;
background:#F4EFE8;
border-radius:25px;
box-shadow:
0 25px 60px rgba(25,12,5,.28);
transform:rotate(-3deg);
transition:all .5s ease;
}
/* Box Hover */
.sk-print-branding-visual:hover .sk-print-box{
transform:rotate(0deg) translateY(-8px);
}
.sk-print-branding-visual:hover .sk-print-circle{
transform:scale(1.04);
}
/* =====================================================
NUMBER
===================================================== */
.sk-print-box-number{
position:absolute;
top:22px;
right:25px;
color:#B69A84;
font-size:11px;
font-weight:600;
letter-spacing:2px;
}
/* =====================================================
ICON
===================================================== */
.sk-print-box-icon{
width:65px;
height:65px;
margin-bottom:25px;
display:flex;
align-items:center;
justify-content:center;
border-radius:17px;
background:#5A3420;
color:#D7B27A;
transition:all .4s ease;
}
.sk-print-box-icon svg{
width:30px;
height:30px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round;
}
.sk-print-branding-visual:hover .sk-print-box-icon{
transform:scale(1.08) rotate(-5deg);
background:#D7B27A;
color:#5A3420;
}
/* =====================================================
BOX TEXT
===================================================== */
.sk-print-box > span{
display:block;
margin-bottom:9px;
color:#9A765C;
font-size:11px;
font-weight:600;
letter-spacing:2px;
}
.sk-print-box h3{
margin:0;
color:#222222;
font-size:27px;
line-height:1.3;
font-weight:700;
}
/* =====================================================
TABLET
===================================================== */
@media(max-width:991px){
.sk-print-branding{
padding:75px 20px;
}
.sk-print-branding-inner{
grid-template-columns:1fr;
gap:55px;
}
.sk-print-branding-content{
max-width:700px;
}
.sk-print-branding-content h2{
font-size:38px;
}
.sk-print-branding-visual{
min-height:400px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:700px){
.sk-print-branding{
padding:60px 18px;
}
.sk-print-branding-inner{
gap:40px;
}
.sk-print-branding-content h2{
font-size:30px;
line-height:1.3;
}
.sk-print-branding-content p{
font-size:13px;
line-height:1.8;
}
.sk-print-branding-visual{
min-height:340px;
}
.sk-print-circle{
width:290px;
height:290px;
}
.sk-print-box{
width:270px;
min-height:280px;
padding:35px 28px;
}
.sk-print-box-icon{
width:55px;
height:55px;
margin-bottom:20px;
}
.sk-print-box-icon svg{
width:26px;
height:26px;
}
.sk-print-box h3{
font-size:23px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media(max-width:400px){
.sk-print-branding-content h2{
font-size:27px;
}
.sk-print-circle{
width:250px;
height:250px;
}
.sk-print-box{
width:235px;
min-height:245px;
padding:28px 23px;
}
.sk-print-box h3{
font-size:21px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-32df299 *//* =====================================================
S.K. & SONS
WHY CHOOSE US
COMPACT 4 x 2 DESIGN
===================================================== */
.sk-why-compact{
width:100%;
padding:40px 20px;
background:#FFFFFF;
font-family:'Poppins',sans-serif;
overflow:hidden;
box-sizing:border-box;
}
.sk-why-compact *,
.sk-why-compact *::before,
.sk-why-compact *::after{
box-sizing:border-box;
}
/* =====================================================
SECTION HEADING
===================================================== */
.sk-why-compact-head{
max-width:1180px;
margin:0 auto 45px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:50px;
}
/* LEFT TITLE */
.sk-why-compact-title{
flex:1;
}
.sk-why-compact-title > span{
display:block;
margin-bottom:10px;
color:#5A3420;
font-size:12px;
font-weight:600;
letter-spacing:2.2px;
}
.sk-why-compact-title h2{
margin:0;
color:#222222;
font-size:38px;
line-height:1.15;
font-weight:700;
letter-spacing:-.5px;
}
.sk-why-compact-title h2 strong{
color:#5A3420;
font-weight:700;
}
/* RIGHT DESCRIPTION */
.sk-why-compact-head > p{
max-width:440px;
margin:0;
color:#666666;
font-size:14px;
line-height:1.75;
}
/* =====================================================
FEATURE GRID
===================================================== */
.sk-why-compact-grid{
max-width:1180px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid #DED5CD;
border-left:1px solid #DED5CD;
}
/* =====================================================
FEATURE ITEM
===================================================== */
.sk-why-compact-item{
position:relative;
min-height:150px;
padding:24px 22px;
display:flex;
align-items:flex-start;
gap:16px;
background:#F7F4F0;
border-right:1px solid #DED5CD;
border-bottom:1px solid #DED5CD;
transition:
background .35s ease,
transform .35s ease,
box-shadow .35s ease;
}
/* =====================================================
NUMBER
===================================================== */
.sk-why-compact-number{
flex:0 0 auto;
padding-top:2px;
color:#B39A87;
font-size:11px;
font-weight:600;
letter-spacing:1.5px;
transition:.35s ease;
}
/* =====================================================
CONTENT
===================================================== */
.sk-why-compact-content{
flex:1;
}
.sk-why-compact-content h3{
margin:0 0 8px;
color:#252525;
font-size:16px;
line-height:1.4;
font-weight:650;
transition:.35s ease;
}
.sk-why-compact-content p{
margin:0;
color:#707070;
font-size:12px;
line-height:1.7;
transition:.35s ease;
}
/* =====================================================
HOVER
===================================================== */
.sk-why-compact-item:hover{
position:relative;
z-index:2;
background:#5A3420;
transform:translateY(-5px);
border-color:#5A3420;
box-shadow:
0 18px 38px rgba(90,52,32,.18);
}
.sk-why-compact-item:hover
.sk-why-compact-number{
color:#D7B27A;
}
.sk-why-compact-item:hover
.sk-why-compact-content h3{
color:#FFFFFF;
}
.sk-why-compact-item:hover
.sk-why-compact-content p{
color:#E9DED5;
}
/* =====================================================
TABLET
===================================================== */
@media(max-width:991px){
.sk-why-compact{
padding:60px 20px;
}
.sk-why-compact-head{
flex-direction:column;
align-items:flex-start;
gap:18px;
margin-bottom:35px;
}
.sk-why-compact-title h2{
font-size:34px;
}
.sk-why-compact-head > p{
max-width:650px;
font-size:13.5px;
}
.sk-why-compact-grid{
grid-template-columns:repeat(2,1fr);
}
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:600px){
.sk-why-compact{
padding:55px 18px;
}
.sk-why-compact-head{
margin-bottom:30px;
}
.sk-why-compact-title h2{
font-size:29px;
line-height:1.25;
}
.sk-why-compact-title > span{
font-size:11px;
letter-spacing:1.8px;
}
.sk-why-compact-head > p{
font-size:13px;
line-height:1.8;
}
.sk-why-compact-grid{
grid-template-columns:1fr;
}
.sk-why-compact-item{
min-height:120px;
padding:20px;
}
.sk-why-compact-content h3{
font-size:15px;
}
.sk-why-compact-content p{
font-size:11.5px;
line-height:1.7;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media(max-width:400px){
.sk-why-compact{
padding:48px 15px;
}
.sk-why-compact-title h2{
font-size:27px;
}
.sk-why-compact-item{
min-height:115px;
padding:18px;
}
.sk-why-compact-content h3{
font-size:14px;
}
.sk-why-compact-content p{
font-size:11px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dcba3e2 *//* =====================================================
S.K. & SONS
MONO CARTONS CTA
LIGHT PREMIUM VERSION
===================================================== */
.sk-mono-cta{
width:100%;
padding:20px 20px;
background:#E9DED2;
font-family:'Poppins',sans-serif;
overflow:hidden;
box-sizing:border-box;
}
.sk-mono-cta *,
.sk-mono-cta *::before,
.sk-mono-cta *::after{
box-sizing:border-box;
}
/* =====================================================
INNER
===================================================== */
.sk-mono-cta-inner{
position:relative;
max-width:1180px;
min-height:300px;
margin:0 auto;
padding:55px 65px;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
overflow:hidden;
border:1px solid #D6C4B3;
border-radius:28px;
background:#F5EFE9;
box-shadow:
0 18px 45px rgba(72,45,27,.08);
}
/* =====================================================
DECORATIVE BACKGROUND
===================================================== */
.sk-mono-cta-inner::before{
content:"";
position:absolute;
width:350px;
height:350px;
left:-190px;
bottom:-230px;
border:45px solid rgba(90,52,32,.06);
border-radius:50%;
}
.sk-mono-cta-inner::after{
content:"";
position:absolute;
width:250px;
height:250px;
right:-130px;
top:-170px;
border:35px solid rgba(90,52,32,.05);
border-radius:50%;
}
/* =====================================================
CONTENT
===================================================== */
.sk-mono-cta-content{
position:relative;
z-index:3;
max-width:760px;
}
.sk-mono-cta-tag{
display:block;
margin-bottom:13px;
color:#8B654B;
font-size:12px;
font-weight:600;
letter-spacing:2.5px;
}
.sk-mono-cta-content h2{
margin:0 0 18px;
color:#29221E;
font-size:40px;
line-height:1.2;
font-weight:700;
letter-spacing:-.6px;
}
.sk-mono-cta-content h2 strong{
color:#5A3420;
font-weight:700;
}
.sk-mono-cta-content p{
max-width:720px;
margin:0;
color:#665D57;
font-size:14px;
line-height:1.8;
}
/* =====================================================
BUTTON
===================================================== */
.sk-mono-cta-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
margin-top:25px;
padding:10px 12px 10px 22px;
background:#5A3420;
color:#FFFFFF;
text-decoration:none;
border-radius:50px;
font-size:13px;
font-weight:700;
letter-spacing:.3px;
transition:all .4s ease;
}
.sk-mono-cta-button span{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#D7B27A;
color:#5A3420;
font-size:17px;
transition:all .4s ease;
}
.sk-mono-cta-button:hover{
background:#3F2415;
color:#FFFFFF;
transform:translateY(-3px);
}
.sk-mono-cta-button:hover span{
transform:rotate(45deg);
}
/* =====================================================
RIGHT DECORATION
===================================================== */
.sk-mono-cta-decoration{
position:relative;
z-index:2;
width:260px;
height:220px;
flex:0 0 260px;
display:flex;
align-items:center;
justify-content:center;
}
/* =====================================================
DECORATIVE RING
===================================================== */
.sk-mono-cta-ring{
position:absolute;
width:205px;
height:205px;
border-radius:50%;
border:1px solid rgba(90,52,32,.22);
box-shadow:
0 0 0 25px rgba(90,52,32,.035),
0 0 0 50px rgba(90,52,32,.02);
transition:.6s ease;
}
.sk-mono-cta-ring::before{
content:"";
position:absolute;
inset:25px;
border-radius:50%;
background:#D7B27A;
opacity:.18;
}
/* =====================================================
CENTER BADGE
===================================================== */
.sk-mono-cta-number{
position:relative;
z-index:2;
width:90px;
height:90px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius:50%;
background:#5A3420;
color:#D7B27A;
font-size:11px;
font-weight:700;
line-height:1.35;
letter-spacing:1.5px;
transition:.5s ease;
}
/* =====================================================
HOVER
===================================================== */
.sk-mono-cta-inner:hover .sk-mono-cta-ring{
transform:scale(1.08) rotate(12deg);
}
.sk-mono-cta-inner:hover .sk-mono-cta-number{
transform:scale(1.08);
}
/* =====================================================
TABLET
===================================================== */
@media(max-width:991px){
.sk-mono-cta{
padding:65px 20px;
}
.sk-mono-cta-inner{
padding:50px;
gap:30px;
}
.sk-mono-cta-content h2{
font-size:35px;
}
.sk-mono-cta-decoration{
width:210px;
flex:0 0 210px;
}
.sk-mono-cta-ring{
width:170px;
height:170px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:700px){
.sk-mono-cta{
padding:50px 18px;
}
.sk-mono-cta-inner{
min-height:auto;
padding:38px 25px;
display:block;
border-radius:22px;
}
.sk-mono-cta-content{
max-width:100%;
}
.sk-mono-cta-content h2{
font-size:29px;
line-height:1.3;
}
.sk-mono-cta-content p{
font-size:13px;
line-height:1.8;
}
.sk-mono-cta-button{
margin-top:22px;
}
.sk-mono-cta-decoration{
width:100%;
height:160px;
margin-top:15px;
}
.sk-mono-cta-ring{
width:130px;
height:130px;
}
.sk-mono-cta-number{
width:68px;
height:68px;
font-size:8px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media(max-width:400px){
.sk-mono-cta-inner{
padding:32px 20px;
}
.sk-mono-cta-content h2{
font-size:26px;
}
.sk-mono-cta-content p{
font-size:12px;
}
}/* End custom CSS */