/*
Theme Name: cassia
Theme URI: https://cassias-cleaning.com/cassia
Author: Flaviasig
Author URI: https://flaviasiv.github.io/Portifolio-Flavia-Sigoli/
Description: Um tema simples para WordPress.
Version: 1.0
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main{
    color: #fff;
    background: #0E294A;
}
body{
    font-family: 'Raleway', sans-serif;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html{
    scroll-behavior: smooth;
}
.container{
    position: relative;
    width:100%;
    max-width:100%;
    margin: auto;
}
:root {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #0E294A;
    --swiper-pagination-bullet-width: 10px;
    --swiper-pagination-bullet-height: 10px;
    --scroll: 0
}
swiper-container{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
a{
    color: inherit;
    text-decoration: none;
}
.smalltt{
    color: #FFF;
    font-family: 'Raleway';
    font-size: 12px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: 0.96px;
    text-transform: uppercase;
}
.btnestimate, .btnserv{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    z-index: 3;
    border: none;
    background: none;
}
.btnestimate{
    border-radius: 96px;
    background: var(--Linear, linear-gradient(90deg, #B4974A 0%, #E1CF9E 33.5%, #E1CF9E 74.5%, #B4974A 100%));
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
}
.btnestimate a{
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 14px 60px;
    font-family: 'Montserrat';
    font-size: 10px;
    line-height: 210%; 
    font-weight: 600;
    color: #0E294A;
}
.btnestimate svg path{
    fill: #0E294A;
}

.btnestimate:hover {
    scale: 1.05;
    transition: 0.2s all ease-in-out;
  }
.gradientblue{
    background: linear-gradient(106deg, var(--Color-Brand-main, #0E294A) 0%, #070D14 100%);
}
img, video{width: 100%;}
p{
    font-family: 'Montserrat';
    font-size: 10px;
    font-weight: 500;
    line-height: 210%;
}
.h2tt{
    font-size: 66.759px;
    line-height: 110%;
    font-weight: 800;
}
.m-b-br{
    display: flex;
    flex-direction: column;
    margin-bottom: -64px;
    border-radius: 0px 0px 64px 64px;
}
.postercontainer{
    height: 810px;
    z-index: 10;
}
.videoposter{
    height: 810px;
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
}
.videoposter video{
    position: relative;
    height: 810px;
    object-fit: cover;
    border-radius: 0px 0px 64px 64px;
    z-index: 1;
}
.overlay{
    width: 100%;
    display: block;
    height: 810px;
    position: absolute;
    top: 0;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.40);
    z-index: 1;
    border-radius: 0px 0px 64px 64px;
}
.postertitle{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 32px;
    max-width: 625px;
}
.postertitle h1{
    color: var(--Color-Brand-main, #0E294A);
    text-align: center;
    font-size: 66.759px;
    font-weight: 800;
    line-height: 110%; /* 73.434px */
}
.logocontainer{
    position: relative;
    max-width: 172px;
    margin: auto;
    z-index: 11;
    height: 0;
}
.logocontainer img{
    max-width: 172px;
    z-index: 2;
    margin-top: -25px;
    border-radius: 100%;
    border: 2px solid #B4974A;
}
.aboutuscontainer{
    margin-bottom: 0;
    padding: 239px 0 185px;
    z-index: 9;
}
.aboutus{
    display: flex;
    width: 100%;
    max-width: 1020px;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}
.imgabout{
    max-width: 414px;
    object-fit: cover;
    border-radius: 16px;
}
.aboutinfos{
    width: 100%;
    max-width: 472px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.aboutinfos h2{
    font-size: 40px;
    font-weight: 800;
    line-height: 110%; 
    max-width: 360px;
}
.aboutinfos .btnestimate{
    margin-left: 0;
}
.preferencecontainer{
    background: url('https://cassias-cleaning.com/wp-content/uploads/2025/04/PexelsPhotobyKetutSubiyanto.png') no-repeat;
    background-position: center;
    background-position-y: bottom;
    background-size: cover;
    margin-top: -64px;
    z-index: 8;
    /* margin-bottom: 260px; */
}
.margindiv{background-color: #0E294A;height:160px;z-index: 7;}
.preference{
    display: flex;
    flex-direction: column;
    padding-top: 270px;
    gap: 130px;
}
.preferencetitle{
    display: flex;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}
.preferencetitle .logo{
    max-width: 324px;
    object-fit: cover;
}
.preferenceceinfos {
    max-width: 554px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.preferenceceinfos p{
    max-width: 330px;
}
.preferencegrid{
    width: 100%;
    max-width: 880px;
    justify-content: space-between;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    row-gap: 75px;
}
.preferencecard{
    display: flex;
    gap: 50px;
    align-items: center;
    z-index: 2;
}
.preferencecard h5{
    font-size: 16px;
    line-height: 140%; /* 22.4px */
    text-transform: uppercase;
    font-weight: 800;
    max-width: 267px
}
.servicescontainer{
    background: url('https://cassias-cleaning.com/wp-content/uploads/2025/03/servicesbg-min-scaled.webp') no-repeat;
    background-position: center;
    background-size: cover;
    color: #0E294A;
    padding: 150px 0 80px;
    display: flex;
    flex-direction: column;
    gap: 100px;
    z-index: 6;
}
.servicestitle{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    text-align: center;
    max-width: 800px;
    margin: auto;
}
.servicestitle .smalltt{
    color: #0E294A;
}
.servttgrid, .servttcard{
    display: flex;
    align-items: center;
}
.servttgrid{
    max-width: 470px;
    gap: 16px;
}
.servttcard{
    gap: 16px;
    text-align: left;
}
.servttcard h5{
    font-size: 9.956px;
    font-weight: 800;
    line-height: 130%; /* 12.943px */
    letter-spacing: 1.991px;
    text-transform: uppercase;
}
.servicescard, .swiper1{
    width: 260px
}
.swiper1{
    margin-bottom: 30px;
}
.serva{
    display: flex;
    width: 260px;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    border: 1px solid var(--Linear, #B4974A);
}
.serva:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.servimg{
    border-radius: 22.325px;
}
.serva h2{
    font-family: 'Raleway';
    text-align: center;
    font-weight: 800;
    line-height: 140%; /* 22.4px */
    text-transform: uppercase;
    font-size: 16px;
}
.btnservices{
    padding: 12px 60px;
    display: flex;
    gap: 6px;
    color: #0E294A;
    font-family: 'Montserrat';
    font-size: 10px;
    line-height: 210%; 
    cursor: pointer;
    font-weight: 600;
}
.greybg{background-color: #ECECEC; color: #0E294A;}
.gallerycontainer{
    padding: 150px 0  80px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.gallerytitle{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 559px;
    margin: auto;
    gap: 20px;
}
.gallerytitle .smalltt{color: #0E294A;}
.swiper2{
    width: 100%;
  cursor: grab;
  max-width: 420px;
}
.reviewstitle{
    max-width: 681px;
}

.firstswip{
    display: block;
    padding: 50px 0;
    z-index: 5;
    width: 100%;
    position: relative;  
}
.mySwiper3 {
  width: 100%;
  cursor: grab;
  margin: 0 !important;
  z-index: 5;
}
.swiper3 {
  width: 100%;
  max-width: fit-content;
  margin-left: 30px;
  text-transform: capitalize;
  color: #0E294A;
}
.swiper3 p{
  display: flex;
  align-items: center;
  gap: 10px;
    color: var(--Color-Brand-main, #0E294A);
    font-size: 16px;
    font-weight: 800;
    line-height: 140%; /* 22.4px */
    text-transform: uppercase;
}
.contactcontainer{
    background: url('https://cassias-cleaning.com/wp-content/uploads/2025/03/contactbg-min.webp') no-repeat;
    background-position: center;
    background-size: cover;
    background-position-y: bottom;
    padding: 160px 0;
}
.contact .logo{max-width: 224px;}
.contact{
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: auto;
    gap: 28px;
    align-items: center;
}
.contact .btnestimate a{
    font-family: 'Montserrat';
    font-size: 20.4px;
    font-weight: 800;
    line-height: 130%
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  cursor: pointer;
  position: absolute;
  
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
/* .form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}
 */

/* Set a style for the submit/login button */
.form-popup .btn {
  background-color: #333333d8;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100px;
  position: relative;
  margin-bottom:0px;
  right: 0;
  opacity: 0.8;
}

/* Add a red background color to the cancel button 
.form-container .cancel {
  background-color: red;
}*/

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
form {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width:450px;
    max-width: 100%;
    margin: auto;
    height: 520px;
    background-color: #FFF;
    border-radius: 8px;
    padding: 24px;
}
.formgroup{
    display: flex;
    gap: 10px;
}
#form input, textarea, select{
    width: 100%;
    list-style: none;
    padding: 20px;
    border-radius: 3px;
    border: 1px solid #333333d8;
    resize: none;
}
#form input{
    height:  46px;    
}
select{
    padding: 10px;
}
form .btnform{
    margin-top: 15px;
    width: 120px;
    list-style: none;
    border-radius: 16px;
    padding: 10px;
    margin:0 auto;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;    
    border: 1px solid #000;
}
form .btnform:hover{
    transition: 0.1s ease-in-out;
}
#form input:focus, #form textarea:focus{
    outline: 1px solid #fff; 
}
#form textarea{
  max-height: 150px;
  resize: none;
}
label{
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #333333;
}
select option{
    color: #111111;
}
select{
    color: #969696;
}
.ulform {
  display: flex;
  color: #0E294A;
  list-style: none;
  width: 100%;
  justify-content: space-between;
}
.ulform ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.126px;
    justify-content: center;
}
.ulform li h5{
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 5px;    
    font-family: 'Urbanist';
    font-weight: 700;
    line-height: 100%;
    font-size: 17.814px;
}
.ulform li a{
    display: flex;
    align-items: center;
    justify-self: center;
    font-family: 'Urbanist';
    font-size: 12.47px;
    font-weight: 400;
    line-height: 150%; 
}
.areascontainer{
    position: relative;
    display: flex;
    z-index: 9;
    padding: 30px 0 70px;
    margin-bottom: 0;
}
.areas{
    display: flex;
    width: 100%;
    max-width: 950px;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}
.maps iframe{
    width: 414px;
    height: 414px;
    aspect-ratio: 1/1;
    border-radius: 752px;
    border: 2px solid var(--Linear, #B4974A);
    background: url() lightgray 50% / cover no-repeat;
    backdrop-filter: blur(64px);
}
.areasgrid{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 441px;
    align-items: center;
}
.areasgrid h2{
    font-size: 52.189px;
    font-weight: 800;
    line-height: 110%; 
    text-transform: uppercase;
}
.areasul{
    display: flex;
    gap: 30px;
}
.areas ul li{
    font-family: 'Montserrat';
    font-size: 12px;
    line-height: 200%;
    font-weight: 600;
}

/* IG CONTAINER */
.ig-embled{
    padding: 100px 0;
    background-color: #fff;
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: auto;
    color: #000;
}
.ig-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.ig-title .smalltt{
    color: #0E294A;
}
.ig-title h2{
    text-align: center;
    color: var(--Color-Brand-main, #0E294A);
    font-family: 'Raleway';
    font-size: 66.759px;
    font-weight: 800;
    line-height: 110%; /* 73.434px */
    text-align: center;
}
.ig-iframe iframe{
    display: flex;
    width:100%;
    max-width: 900px; 
    /* height do feed */
    height: 800px;
    margin: auto;
}
@media screen and (max-width:980px) {
    .ig-iframe iframe{
        max-width: 500px; 
        max-height: 500px;
    }    
}
@media screen and (max-width:580px) {
    .ig-iframe iframe{
        width:100%;
        max-width: 400px; 
        max-height: 400px;
    }    
}

/* services pages */
.contentservices{
    color: #FFF;
    padding: 150px 0 100px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.contenttitle{
    width: 100%;
    max-width: 472px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.servpost .contenttitle{
    max-width: 602px;
}
.contenttitle h1{
    font-size: 60px
}
.contentgrid{
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    gap: 32px;
    align-items: center;
}
.posterimg{
    width: 100%;
    max-width: 614px;
    height: 614px;
    aspect-ratio: 1/1;
    border-radius: 336px;
    margin: auto;
}
.posterimg img{
    width: 614px;
    height: 614px;
    aspect-ratio: 1/1;
    border-radius: 336px;
    border: 3px solid var(--Linear, #B4974A);
}
.contentgrid h2{
    font-family: 'Raleway';
    font-size: 12px;
    line-height: 130%;
    letter-spacing: 0.96px;
    font-weight: 500;
    text-transform: uppercase;
}
.swiper4{
    display: flex;
    width: 100%;
    max-width: 920px;
    height: 353px;
    padding: 56px 48px;
    justify-content: center;
    align-items: center;
    gap: 96px;
    flex-shrink: 0;
    border-radius: 48px;
    border: 2px solid var(--Linear, #B4974A);
}
.contentcard{
    display: flex;
    gap: 90px;
    align-items: center;
}
.contentcard h3{
    width: 100%;
    max-width: 230px;
    flex-shrink: 0;
    color: #FFF;
    font-weight: 800;
    line-height: 110%; /* 45.245px */
    font-size: 41.132px;
    text-transform: uppercase;
}
.h3off{
    font-size: 36px !important
}
.contentcard ul{
    width: 100%;
    max-width: 430px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contentcard ul li{
    display: flex;
    list-style: none;
    align-items: center;
    gap: 12px;
    font-family: 'Inter';
    font-size: 13.358px;
    line-height: 100%;
    font-weight: 600;
}
.contentcard ul li svg{
    flex-shrink: 0;
}
.ulmob{display: none;}
@media screen and (max-width: 900px) {
    /* flex-direction column */
    .aboutus, .preferencetitle, .areas, .servttgrid{
        flex-direction: column;
    }
    .h2tt{
        font-size: 40px;
    }
    .btnestimate a{
        padding: 11px 60px;
    }
    /* text-aling center */
    .aboutinfos, .preferencetitle{
        text-align: center;
    }
    .postercontainer{
        height: 700px;
    }
    .videoposter{
        height: 700px;
    }
    .videoposter video{
        height: 700px;
    }
    .overlay{
        height: 700px;
    }
    .postertitle h1{
        font-size: 40px;
        max-width: 390px;
    }
    .aboutuscontainer{
        padding-bottom: 80px;
    }
    .aboutus, .preferencetitle, .servicestitle, .areas{
        gap: 32px;
        padding: 0 16px;
    }
    .aboutinfos h2, .aboutinfos .btnestimate{
        margin: auto;
    }
    .preferencecontainer{
        background-position-y: bottom;
        background-position-x: -400px;
    }
    .preference{
        padding-top: 100px;
        gap: 50px;
    }
    .preferencetitle .logo{
        max-width: 220px;
    }
    .preferencegrid{
        max-width: 90%;
        margin: auto;
        row-gap: 30px;
    }
    .preferencecard{
        gap: 30px;
    }
    .preferencecard svg{
        width: 68px;
        height: 100%;
    }
    .preferencecard h5{
        font-size: 15px;
    }
    .margindiv{height:130px;}
    .servicescontainer{
        gap: 32px;
    }
    .servicestitle{
        max-width: 390px;
    }
    .servttgrid{
        max-width: 162px;
    }
    .servttcard svg{flex-shrink: 0;}
    .gallerytitle{max-width: 300px;}
    .swiper2, .swiper2 img{
      max-width: 380px !important;
    }
    .contactcontainer{
        padding: 80px 0;
    }
    .contact h2{
        text-transform: capitalize;
        font-size: 38px;
        padding-bottom: 30px;
    }
    .cancel{
        margin-left: 3%;
    }
    .open-button {
      bottom: 20px;
      white-space: nowrap;
    }
    .open-button a{
        font-size: 16px;
    }
    form {
        width:100%;
        max-width: 94%;
        height: 450px;
        padding: 24px;
    }
    #form input, textarea, select{
        padding: 12px;
        resize: none;
    }
    #form input{
        height:  36px;    
    }
    .ulform ul li{
        gap: 6px;
    }
    .ulform li h5{
        gap: 5px;    
        font-size: 12px;
    }
    .ulform li h5 svg{
        width: 16px;
        height: 16px;
    }
    .ulform li a{
        font-size: 9px;
    }
    .ulform  li:last-child a{padding-left: 3px;}
    .maps iframe{
        width: 100%;
        max-width: 390px;
        height: 100%;
        max-height: 390px;
        border-radius: 100%;
        border: 2px solid var(--Linear, #B4974A);
    }
    .areasgrid h2{
        font-size: 52.189px;
        text-transform: capitalize;
        text-align: center;
    }
    .uldesk{display: none;}
    .ulmob{display: block;}
    .areasul{padding-left: 20px;}
    .contenttitle{
        max-width: 287px;
    }
    .contenttitle h1{
        font-size: 40px
    }
    .contentgrid{
        display: flex;
        flex-direction: column;
        padding-top: 50px;
        gap: 32px;
        align-items: center;
    }
    .posterimg{
        max-width: 380px;
        height: 380px;
        border-radius: 100%;
    }
    .posterimg img{
        width: 100%;
        max-width: 380px;
        height: 380px;
        border-radius: 100%;
    }
    .swiper4{
        max-width: 299px;
        height: 453px;
        padding: 26px 38px;
        gap: 0;
    }
    .contentcard{
        display: flex;
        justify-content: first baseline;
        gap: 30px;
        height: 100%;
        align-items: center;
        flex-direction: column;
    }
    .contenttitle{
        padding: 0 10px;
    }
    .contentcard h3{
        max-width: 230px;
        font-size: 38px !important;
        text-align: center;
    }
    .contentcard ul{
        width: 100%;
        max-width: 440px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .contentcard ul li{
        display: flex;
        list-style: none;
        gap: 12px;
    }
    .h1pc{
        font-size: 40px;
    }
    .h3off{
        font-size: 26px !important
    }
}



/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
    cursor: pointer;
    position: absolute;
    
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* The popup form - hidden by default */
  .form-popup {
    display: none;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
  }
  
  /* Add styles to the form container */
  .form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
  }
  
  /* Full-width input fields */
  /* .form-container input[type=text], .form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
  }
   */
  
  /* Set a style for the submit/login button */
  .form-popup .btn {
    background-color: #333333d8;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100px;
    position: relative;
    margin-bottom:0px;
    right: 0;
    opacity: 0.8;
  }
  
  /* Add a red background color to the cancel button 
  .form-container .cancel {
    background-color: red;
  }*/
  
  /* Add some hover effects to buttons */
  .form-container .btn:hover, .open-button:hover {
    opacity: 1;
  }
  form {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width:450px;
      max-width: 100%;
      margin: auto;
      height: 520px;
      background-color: #FFF;
      border-radius: 8px;
      padding: 24px;
  }
  .formgroup{
      display: flex;
      gap: 10px;
  }
  #form input, textarea, select{
      width: 100%;
      list-style: none;
      padding: 20px;
      border-radius: 3px;
      border: 1px solid #333333d8;
      resize: none;
  }
  #form input{
      height:  46px;    
  }
  select{
      padding: 10px;
  }
  form .btnform{
      margin-top: 15px;
      width: 120px;
      list-style: none;
      border-radius: 16px;
      padding: 10px;
      margin:0 auto;
      cursor: pointer;
      font-size: 16px;
      font-weight: 700;    
      border: 1px solid #000;
  }
  form .btnform:hover{
      transition: 0.1s;
  }
  #form input:focus, #form textarea:focus{
      outline: 1px solid #fff; 
  }
  #form textarea{
    max-height: 150px;
    resize: none;
  }
  label{
      display: flex;
      flex-direction: column;
      gap: 5px;
      color: #333333;
  }
  select option{
      color: #111111;
  }
  select{
      color: #969696;
  }
  .ulform {
    display: flex;
    color: #0E294A;
    list-style: none;
    width: 100%;
    justify-content: space-between;
  }
  .ulform ul li{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7.126px;
      justify-content: center;
  }
  .ulform li h5{
      display: flex;
      align-items: center;
      justify-self: center;
      gap: 5px;    
      font-family: 'Urbanist';
      font-weight: 700;
      line-height: 100%;
      font-size: 17.814px;
  }
  .ulform li a{
      display: flex;
      align-items: center;
      justify-self: center;
      font-family: 'Urbanist';
      font-size: 12.47px;
      font-weight: 400;
      line-height: 150%; 
  }
  .preferencecontainer{
      background: url('https://cassias-cleaning.com/wp-content/uploads/2025/04/PexelsPhotobyKetutSubiyanto.png') no-repeat;
      background-position: center;
      background-position-y: bottom;
      background-size: cover;
  }
  .imgabout{
      border-radius: 16px;
  }
  .ig-iframe iframe{
      display: flex;
      width:100%;
      max-width: 900px; 
      /* height do feed */
      height: 820px;
      margin: auto;
  }
  @media screen and (max-width:980px) {
      .ig-iframe iframe{
          max-width: 500px; 
          max-height: 540px;
      }    
  }
  @media screen and (max-width:580px) {
      .ig-iframe iframe{
          width:100%;
          max-width: 400px; 
          max-height: 400px;
      }    
  }