/*!
Theme Name: Life Style Smile
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: life-style-smile
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Life Style Smile is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Container Width */
.container { max-width: 1200px; padding-left: 24px; padding-right: 24px; }

a { text-decoration: none; transition: all .3s ease; }

:root {
   --section-padding: 80px;
   --section-margin: 80px;
   --gap: 24px;
   --tan-color: #F9F8F5;
   --white: #FFFFFF;
   --theme-color: #B78556;
   --typo-black: #0C251F;
   --text-color: #4A5565;
   --typo-font: "Playfair Display", serif;
   --body-text: "Poppins", sans-serif;
   --foot-text: "Urbanist", sans-serif;
}

body.menu-open { overflow: hidden; }

.gap-row { gap: 56px; }
.mb-eighty { margin-bottom: 80px; }

.mt-single { margin-top: 16px; }
.mt-half-double { margin-top: 24px; }
.mt-double { margin-top: 32px; }

.mb-single { margin-bottom: 16px !important; }
.mb-half-double { margin-bottom: 24px; }
.mb-double { margin-bottom: 32px; }

.pt-single { padding-top: 16px; }
.pt-half-double { padding-top: 24px; }
.pt-double { padding-top: 32px; }

.pb-single { padding-bottom: 16px; }
.pb-half-double { padding-bottom: 24px; }
.pb-double { padding-bottom: 32px; }

.heading-typo { font-family: var(--typo-font); font-weight: 500; margin-bottom: 0; }
.heading-typo span { color: var(--theme-color); font-style: italic; }

.h1 { font-size: 64px; line-height: 120%; letter-spacing: 1%; font-weight: 500; }
.h2 { font-size: 56px; line-height: 100%; letter-spacing: 1%; font-weight: 500; }
.h3 { font-size: 48px; line-height: 120%; letter-spacing: 0; }
.h4 { font-family: var(--typo-font); font-size: 40px; line-height: 120%; letter-spacing: 0; font-weight: 500; text-align: center; }
.h5 { font-size: 24px; line-height: 140%; letter-spacing: 1%; text-align: center; }

p { font-family: var(--body-text); font-weight: 400; line-height: 140%; letter-spacing: 1%; }
p.large { font-size: 20px; }
p.medium { font-size: 16px; }
p.small { font-size: 14px; }

.section-padding { padding-top: var(--section-padding); padding-bottom: var(--section-padding); }
.section-margin { margin-top: var(--section-margin); margin-bottom: var(--section-margin); }
.section-bg { background-color: var(--tan-color); }





/*-----------*/
.site-header { background: #004D4A; padding: 30px 0; }
.header-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.site-logo { flex-shrink: 0;
   img { max-width: 270px; height: auto; display: block; }
}
.nav-wrapper { display: flex; align-items: center; gap: 24px; margin-left: auto;
   .main-navigation {
      .nav-list { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none;
         li {
            a { font-family: var(--body-text); color: var(--white); font-weight: 400; font-size: 14px; line-height: 140%; text-decoration: none;
               &:hover { color:#B58955; }
            }
         }
      }
   }
}
.header-actions { display: flex; align-items: center; gap: 24px; }
.phone-btn { background: var(--white); padding: 10px 24px; border-radius: 999px; color: #422B27; text-decoration: none; gap: 8px; font-family: var(--body-text); font-size: 14px; font-weight: 400; }
.consult-btn { background: #B58955; color: var(--white); padding: 10px 24px; border-radius: 999px; text-decoration: none; font-family: var(--body-text); font-size: 14px; font-weight: 500; }
.consult-btn:hover { color: #B58955; background: var(--white); }
.phone-btn:hover { background: #B58955; color: var(--white); }
.mobile-toggle { display: none; }
.mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: .3s ease; z-index: 998; }
.mobile-overlay.active { opacity: 1; visibility: visible; }
.phone-text {text-decoration: underline;}


/*------ Button style start -----*/

.theme-btn { padding-top: 20px; padding-right: 107px; padding-bottom: 20px; padding-left: 107px; gap: 16px; opacity: 1; border-radius: 32px; transition: transform .3s ease, background .3s ease; background: linear-gradient(90deg, #B78556 0%, #C89963 100%);font-family: var(--body-text); font-weight: 500;font-size: 24px;line-height: 24px;letter-spacing: 0.4px;color: var(--white);display: inline-flex;align-content: center;justify-content: center; }
.theme-btn:hover { color: var(--white);
   background: linear-gradient(90deg, #C89963 0%, #B78556 100%); transform: scale(1.04); }

/*------ Button style end -----*/



/*--------Banner-----------*/

.hero-section { margin-top: var(--gap); margin-bottom: var(--gap); height: 422px; overflow: hidden;

   .video-wrap { position: relative; border-radius: 16px; }
}

.hero-video { width: 100%; height: 422px; object-fit: cover; display: block; border-radius: 16px; }

.video-controls { position: absolute; right: 24px; bottom: 24px; z-index: 10; display: flex; gap: 12px; }

.video-controls button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); backdrop-filter: blur(10px); color: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/*--------------Banner Caption start------------------*/

.section-banner-caption { margin-top:24px; margin-bottom: 64px;
   .description {font-family: var(--body-text); font-weight: 400; font-size: 20px; line-height: 140%; letter-spacing: 1%; text-align: center; color:rgba(13, 49, 47, 1);
   } 
      }

/*--------------Banner Caption end------------------*/


/*-----------------Natural Refresh Start------------------*/

.natural-refresh-section { background: rgba(249, 248, 245, 1);
   .image-wrapper { img { border-radius: 16px; max-width:100%; } }
   .info-text { color: rgba(0, 0, 0, 1); }
   .suitability-list { gap: 1rem; background: var(--white); border-radius: 2rem; padding: 1.5rem; list-style: none; margin: 0; }
   .suitability-item { background: rgba(249, 248, 245, 1); border-radius: 9.59px; padding: 12px 16px; gap: 8px; border: 0.48px solid #E8E6DF;
      p { margin-bottom: 0; color: rgba(74, 85, 101, 1); }
      .icon-circle { font-size: 20px; color: rgba(200, 169, 126, 1); }
   }
   .bottom-note { background: rgba(10, 38, 28, 0.05); border-radius: 1rem; padding: 1.5rem;
      .small { margin: 0; color: rgba(12, 37, 31, 1); letter-spacing: 2%; }
   }
}

/*-----------------Natural Refresh end------------------*/



/*--------------Patient Stories Start-------------*/

.patient-stories-section { overflow: hidden; background: var(--white);
   .section-heading {
      h2 { color: #062B2B;
         span { color: #C48A45; font-style: italic; }
      }
   }
}
.patientStoriesSlider { overflow: hidden; padding-bottom: 10px;
   .swiper-slide { width: 48%; height: auto; }
}
.patient-card { border: 1.86px solid #E3C59F; border-radius: 58.3px; padding: 2rem; background: transparent; height: 100%; box-shadow: 0 3.73px 0 0 #E3C59F; }
.card-logo { margin-bottom: 29.81px;
   img { max-width: 272.8px; }
}
.patient-image { margin-bottom: 29.81px;
   img { width: 100%; border-radius: 59.63px; display: block; }
}
.patient-note { text-align: center; font-family: var(--body-text); font-weight: 400; font-size: 16px; line-height: 140%; letter-spacing: 1%; color: var(--text-color); margin-bottom: 44.72px; }
.doctor-info { text-align: center;
   p { margin-bottom: 14.91px; color: var(--text-color); }
   .h4 { color: var(--text-color); margin-bottom: 16px; }
   span { display: block; color: var(--text-color); }
}
.patient-disclaimer { background: #0A261C0D; padding: 1.5rem; border-radius: 1rem;
   p { margin: 0; font-weight: 400; font-size: 16px; line-height: 160%; letter-spacing: 2%; font-style: italic; color: rgba(74, 85, 101, 1); }
}

/*--------------Patient Stories End-------------*/

/*----------- Why Lifestyle Start ----------------*/

.why-lifestyle-section { background: #083634;
   h2 { color: var(--white); margin-bottom: 2rem; }
   p { color: var(--white); max-width: 732px; margin-bottom: 0; }
   .col {
      h5 { font-family: var(--body-text); font-weight: 500; font-size: 24px; line-height: 160%; letter-spacing: 3%; text-transform: uppercase; color: #C8A97E; }
   }
   .experience-list { list-style: none; padding: 0; margin: 0;
      li { display: flex; align-items: center; gap: 1.5rem; color: var(--white); font-family: var(--body-text); font-weight: 400; font-size: 24px; line-height: 160%; letter-spacing: 1%; margin-bottom: 20px;
         i.fa-solid { color: #C8A97E; font-size: 22px; }
      }
      li:last-child { margin-bottom: 0; }
   }
   .approach-card { background: linear-gradient(74.55deg, #083634 6.24%, #085956 101.99%); border-radius: 24px; padding: 24px; text-align: center;
      .h4 { color: var(--white); margin-bottom: 16px; }
      p { color: #FFF; font-family: var(--body-text); font-weight: 400; font-size: 18px; line-height: 160%; letter-spacing: 1%; text-align: center; margin-bottom: 32px; }
   }
   .inner-card { background: #0A261C; border-radius: 16px; padding: 45px 16px; border: solid 1px #FFFFFF0D;
      h6 { font-family: var(--body-text); font-weight: 500; font-size: 20px; line-height: 140%; letter-spacing: 1%; text-align: center; text-transform: uppercase; color: #C8A97E; margin-bottom: 12px; }
      p { color: var(--white); font-family: var(--body-text); font-weight: 300; font-size: 18px; line-height: 160%; letter-spacing: 1%; text-align: center; margin: 0; }
   }
}

/*----------- Why Lifestyle End ----------------*/


/*------------ Doctor Section Start ---------------*/

.doctor-section { background: var(--white); }
.doctor-image { max-width: 400px; margin: 0 auto; position: relative;
   img { width: 100%; border-radius: 20px; display: block; }
}
.doctor-navigation { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 24.3px 0; }
.doctor-pagination { position: static !important; width: auto !important; }
.doctor-pagination .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; background-color: #D9D9D9; }
.doctor-pagination .swiper-pagination-bullet-active { background-color: var(--theme-color); }
.doctor-prev,
.doctor-next { position: static !important; margin: 0 !important; width: 40px; height: 40px; color: #C8A97E; }
.next-prev { position: absolute; top: 50%; width: calc(100% + 98px); transform: translate(-49px, -20px); display: flex; justify-content: space-between; margin: 0; }
.doctor-prev:after,
.doctor-next:after { font-size: 18px; font-weight: 700; }
.doctor-info {
   p.large { color: #B78556; font-weight: 500; line-height: 120%; letter-spacing: 3%; text-transform: uppercase; }
}
.doctor-content { padding: 0 24px; gap: 32px;
   p { line-height: 160%; margin-bottom: 0; }
   h5 { font-family: var(--body-text); font-weight: 500; font-size: 16px; line-height: 160%; letter-spacing: 3%; color: var(--text-color); margin-bottom: 16px; }
   .doct { width: 100%; }
}
.doctor-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; margin-bottom: 0;
   li { background: #F1EFEB; border-radius: 8px; padding: 16px 20px; display: flex; flex-direction: row; gap: 16px; align-items: center; font-family: var(--body-text); font-weight: 400; font-size: 14px; line-height: 140%; letter-spacing: 1%; color: #5E4C33;
      .fa-regular { font-size: 20px; color: #C8A97E; }
   }
}
.doctor-quote { background-color: #F9FAFB; padding: 24px; border-left: 1.6px solid var(--theme-color);
   p.medium { margin: 0; font-style: italic; color: var(--text-color); }
}

/*------------ Doctor Section End ---------------*/

/*--------- Assessment Section Start ---------------*/
.assessment-section { background-color: rgba(249, 248, 245, 1);}
.assessment-layout { display: grid; grid-template-columns: 350px 1fr; gap: 40px; }
.step-card { border: 1px solid #DDD; padding: 20px; border-radius: 16px; margin-bottom: 16px; }
.step-card.active-step { border: 2px solid #C49A6C; }
.form-stage { display: none; }
.form-stage.active { display: block; }
.step-1-concerns { display: none; }
.step-1-personal.active,
.step-1-concerns.active { display: block; }
.button-group { display: flex; gap: 12px; margin-top: 24px; }
.upload-next-btn { margin-top: 24px; }
.upload-next-btn:disabled { opacity: .5; cursor: not-allowed; }
.upload-slide { display: none; }
.upload-box { width: 100%; min-height: 320px; border: 2px dashed #E6D7C5; border-radius: 32px; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; cursor: pointer; }
.upload-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.upload-icon { font-size: 40px; color: #C4935D; }
.upload-content h4 { margin: 0; font-size: 28px; font-weight: 600; color: #4A5568; }
.photo-upload { display: none; }
.preview-image { display: none; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.form-group { margin-bottom: 24px; }
.form-group label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #00443F; }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group input[type="date"], .form-group select, .form-group textarea { width: 100%; background: transparent; font-size: 14px; color: #4A5568;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"] { height: 52px; border: none; border-bottom: 1px solid #D9D9D9; padding: 0; border-radius: 0; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: #C4935D; }
.concern-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #F7F5F1; border: 1px solid #ECE8E1; border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
.concern-item input { display: none; }
.concern-item span { width: 18px; height: 18px; border: 1px solid #7B8794; border-radius: 2px; position: relative; }
.concern-item input:checked + span { background: #C4935D; border-color: #C4935D; }
.concern-item input:checked + span::after { content: '✓'; color: #FFF; font-size: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#urgency { width: 100%; height: 56px; border: 1px solid #E6E0D8; border-radius: 14px; padding: 0 20px; background: #FFF; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2300443F' stroke-width='2'%3E%3Cpath d='M4 7l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; }
textarea { width: 100%; min-height: 180px; border: 1px solid #E6E0D8; border-radius: 20px; padding: 20px; resize: none; background: #FFF; }
::placeholder { color: #B8B8B8; font-size: 14px; }
.gender-group { display: flex; gap: 24px; margin-top: 12px; }
.radio-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8A8A8A; cursor: pointer; }
.radio-item input { display: none; }
.radio-item span { width: 18px; height: 18px; border: 1px solid #BDBDBD; border-radius: 50%; position: relative; }
.radio-item input:checked + span::after { content: ''; width: 8px; height: 8px; background: #C4935D; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
input[type="date"] { position: relative; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.phone-field { display: flex; align-items: center; height: 52px; border-bottom: 1px solid #D9D9D9; }
.country-code { margin-right: 12px; font-size: 14px; color: #4A5568; }
.phone-field input { flex: 1; border: none; background: none; padding: 0; }
.phone-field input:focus { outline: none; }

/*--------- Assessment Section End ---------------*/

/*--------- footer Section Start ---------------*/
.site-footer {background: rgba(8, 54, 52, 1);padding: 80px 0px;overflow: hidden;}
.footer-top {padding-bottom: 56px; 
   .footer-left{ max-width: 432px; }
   .footer-right{ max-width: 535px; gap:40px; }
}
.footer-brand {
   .footer-logo { display: inline-block; margin-bottom: 16px; 
      img {max-width: 340px; width: 100%; display: block;}
   } p {color:var(--white);}
}
.footer-widget { display:flex; flex-direction: column; gap:16px;
   h4 {font-family: var(--body-text); font-weight: 500; font-size: 14px; line-height: 140%; letter-spacing: 1%; color:var(--white); margin-bottom: 0; }
   ul {list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:16px;
      li {font-family: var(----body-text); font-weight: 400; font-size: 16px; line-height: 140%; letter-spacing: 1%; color:var(--white);
         a {color:var(--white); text-decoration: underline; transition: 0.3s ease; &:hover {opacity: 0.8;} span {margin-left: 7px; text-decoration: none;}}
      }
   }
}
.footer-bottom { text-align: center; p {color: var(--white); font-size: 14px; margin: 0; font-family: var(--foot-text); font-weight: 400; line-height: 120%; letter-spacing: 1%;
      a { text-decoration: none; &:hover {color: rgba(255,255,255,0.7);} 
      }
   }
}
.mobile-actions { display:none; }

/*--------- footer Section End ---------------*/

@media(min-width:1025px) and (max-width:1200px){

   .site-logo {
    & img {
        max-width: 210px;
    }
   }
    .nav-wrapper {
    & .main-navigation {
        & .nav-list {
            gap:10px;
        }
    }
   }
    .header-actions { gap:10px; }
    .phone-btn, .consult-btn { padding:10px 16px; }


}

@media (max-width: 1024px) {

   .site-header { padding: 12px 0; }
   .mobile-actions { display:block; }
   .mobile-actions .consult-btn { padding: 4px 16px; font-size: 14px; }
   .h1, .h2 { font-size: 52px; }
   .h3 { font-size: 40px; }
   .h4 { font-size: 32px; }
   p.large { font-size: 18px; }
   p.medium { font-size: 14px; }
   .theme-btn { padding: 10px 50px; gap: 16px; border-radius: 30px; font-size: 18px;}
   .mobile-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 0; color: #C4935D; font-size: 24px; }
   .header-wrapper { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; }
   .site-logo { display: flex; justify-content: center;
      img {
         max-width: 180px;
      }
   }
   .nav-wrapper { display: none; position: fixed; top: 0; left: 0; width: 320px; height: 100vh; background: #004D4A; padding: 30px; z-index: 999;}
   .nav-wrapper.active { display: block; }
   .header-actions { margin-top: 24px; flex-direction: column; align-items: flex-start; }
   .phone-btn { width: 100%; justify-content: center; }
   .consult-btn { position: static; padding: 10px 20px; white-space: nowrap; }
   .nav-wrapper {position: fixed;top: 0;left: 0;width: 320px;max-width: 85%;height: 100vh;background: #004D4A;padding: 24px;z-index: 999;transform: translateX(-100%);transition: transform .35s ease;display: flex;flex-direction: column;align-items: flex-start;gap: 24px;overflow-y: auto;}
   .nav-wrapper.active {transform: translateX(0);}
   .mobile-menu-header {width: 100%;display: flex;align-items: center;justify-content: space-between;padding-bottom: 20px;border-bottom: 1px solid rgba(255,255,255,.15);}
   .mobile-close {width: 40px;height: 40px;border: 0;background: transparent;color: #fff;font-size: 24px;}
   .main-navigation {width: 100%; margin-top:30px; }
   .nav-list {flex-direction: column !important;align-items: flex-start !important;gap: 18px !important;width: 100%;}
   .header-actions {width: 100%;flex-direction: column;gap: 12px !important;}
   .phone-btn,.consult-btn {width: 100%;justify-content: center; text-align: center; }
   .footer-top {
    .footer-left {
        max-width: 230px;
    }}
    .footer-top {
    .footer-right {
        max-width: 470px;
        gap: 24px;
    }}
    .footer-widget {
    & ul {
        li {
            font-size: 14px; }}
        }


}






@media (max-width: 768px) {

   .h1, .h2 { font-size: 40px; }
   .h3 { font-size: 32px; }
   .h4 { font-size: 24px; }
   p.large { font-size: 16px; }
   p.medium { font-size: 12px; }
   .mb-eighty { margin-bottom: 64px; }
   .section-padding { padding-top: 64px; padding-bottom: 64px; }
   .section-margin { margin-top: 64px; margin-bottom: 64px; }
   .hero-section { margin-top: 0; margin-bottom: 0; height: 329px; overflow: hidden;
      .container { max-width: 100%; padding-left: 0; padding-right: 0; }
      .video-wrap { position: relative; border-radius: 0; }
      .hero-video {  width: 100%; height: 329px; border-radius: 0; }
   }
   .inner-refresh { flex-direction: column; gap: 24px; 
      .left-refresh { display: flex; flex-direction: column-reverse; gap: 32px;
         .mb-double { margin-bottom: 0; }
         .h3 { text-align: center; }
      }
      .right-refresh { .info-text { margin-bottom: 16px; }
      }
   }
   .natural-refresh-section {
      .image-wrapper img { max-width: 100%; height: 329px; object-fit: cover;}
   }
   .patient-card { padding: 12px; border-radius: 32px; }
   .patient-note { font-size: 12px; }
   .patient-disclaimer {
      p { font-size: 12px; text-align: left; }
   }
   .why-lifestyle-section { 
      h2 { margin-bottom: 16px; }
      .content-wrapper { flex-direction: column; gap: 40px; }
      .experience-list li { font-size: 16px; margin-bottom: 12px; }
      .col h5 { font-size: 16px; text-align: center; }
      .approach-card p { font-size: 14px; }
      .inner-card h6 { font-size: 16px; }
   }
   .doctor-info { .h4 { font-size: 32px; } }
   .doctor-content { padding:0px; h5 { text-align: center; } }
   .theme-btn { padding: 8px 24px; gap: 16px; border-radius: 27px; font-size: 16px;}
   .site-footer { padding: 40px 0; }
   .footer-top { padding-bottom: 56px; flex-direction: column; 
      .footer-left { max-width: 100%; }
      .footer-right { width: 100%; flex-direction: column; gap: 65px;}
   }
   .footer-brand .footer-logo img { max-width: 240px; }
   .footer-widget .list-group { width: 100%; }
   .footer-brand { margin-bottom: 65px; }
   .section-banner-caption {
    margin-bottom: 40px;
   .description { font-size: 14px;}
   }
   .doctor-info > p { font-size:16px; }
   .doctor-info {
      h5{ font-size: 12px;}
   }
   .why-lifestyle-section{
      p.large{ font-size: 14px;}
   }
   .experience-list { 
      li { font-size: 12px; gap:8px; }
      }
   .why-lifestyle-section {
    & .experience-list {
        & li {
            i.fa-solid {
                font-size: 12px;
            }
        }
    }
   }
   .doctor-content {
      p { text-align: center;}
   }
   .doctor-quote {    p.medium { text-align: left; } }
   .assessment-layout { grid-template-columns: 1fr; }






}