@charset "UTF-8";
/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#fff; color:#000;
  font: 400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
img{max-width:100%; display:block}
a{color:#008db1; text-decoration:none}
a:hover{text-decoration:underline}

:root{
  --teal: #009CA6;                /* section headings */
  --ink-muted:#000;
  --brand:#1e90ff;               /* link highlight (kept subtle) */
  --hero-blue:#cfe7ee;           /* hero band */
  --radius:14px;
  --shadow:0 6px 24px rgba(15,23,42,.08);
  --container:1180px;            /* default (1440 design) */
  --pad:24px;
}

.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:15px}
h1{font-weight:700; font-size:34px; line-height:1.2; margin:8px 0 12px}
h2{font-weight:700; font-size:26px; margin:0 0 12px}
h3{font-size:18px; margin:0 0 8px}
.eyebrow{color:var(--ink-muted); margin:0}
.muted{color:var(--ink-muted)}

/* ====== Buttons ====== */
.btn{display:inline-block; border-radius:999px; padding:10px 16px; font-weight:600}
.btn--black{background:#111; color:#fff; box-shadow:var(--shadow)}
.btn--black:hover{filter:brightness(1.05)}
.btn--small{padding:8px 14px}


/* ===== SINGLE-IMAGE HERO (no cropping) ===== */
.hero-split{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  line-height: 0;
}

.hero-split__img{
  display: block;
  width: 100%;
  height: auto;
}


/* OPTIONAL: cap hero height on ultra-wide screens without cropping */
@media (min-width: 1920px){
  .hero-split__img{ max-height: 720px; margin-inline: auto; }
}

/* OPTIONAL: if you want the hero to be tighter on small phones */
@media (max-width: 420px){
  .hero-split__img{ max-height: 360px; object-fit: contain; }
}



/* ====== Intro text emphasis ====== */
.intro__title{
  
  color:#009CA6; 
  line-height:1.6; 
  margin:0 0 8px;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  /* font-size: 30px; */
  font-size: 24px;
  line-height: 130%;


}
.intro__p{
  margin:0 0 12px;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  /* font-size: 20px; */
    font-size: 16px;
  color:black;
  line-height: 130%;

}

/* ====== Tables ====== */
.heading-teal{
  color:var(--teal);
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  line-height: 120%;

}
.table__label{margin:18px 0 8px; font-weight:600}
.table-wrap{  overflow:auto}
table{width:100%; border-collapse:collapse; min-width:520px}
thead th{ width:70%; text-align:left; padding:20px 16px; border: 1px solid #000;
  border-left: 0;      /* remove inner verticals */
  border-right: 0;
 font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
  line-height: 120%;

}
tbody td{padding:20px 16px;  border: 1px solid #000;
  border-left: 0;      /* remove inner verticals */
  border-right: 0;
   font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 120%;
  align-content: start;
}
/* keep the outer box (left & right edges only) */
tr > *:first-child { border-left: 1px solid #000; }
tr > *:last-child  { border-right: 1px solid #000; }

/* ====== Venue ====== */
.venue{ }
.conferencevanue {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  line-height: 120%;

}
.fixtop {
    margin-top:15px;
}

.conferencevanue1 {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 120%;
}

.muted {
  font-family: "IBM Plex Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 150%;
  margin-top: 5px;
  margin-bottom: 0px;
}

.hotel__headline {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 120%;
}

.hotel__location {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 120%;

}

.hotel__walk {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 130%;

}
/* ====== Hotels list ====== */
.hotels{display:flex; flex-direction:column;}
.hotel{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:#fff; border:1px solid #000;  padding:20px
}
.hotel__text{flex:1}
.walk{font-size:16px;}

/* ====== Links ====== */
.links{list-style:none; padding:0; margin:0 0 28px}
.links li+li{margin-top:6px}

/* ====== Info panel ====== */
.panel{ padding-block:24px; padding-bottom: 90px;}
.panel__grid{display:grid; gap:18px; background:#d7edf4;}
.panel__cols{display:grid; gap:18px}
@media (min-width: 900px){
  .panel__cols{grid-template-columns:1fr 1fr}
}

/* ====== Footer bar ====== */
.footer{background:#707a84; color:#fff; padding-block:16px}
.footer a{color:#fff;   font-family: "Lexend", sans-serif;}
.footer__grid{display:flex; justify-content:space-between; align-items:center}

/* ====== RESPONSIVE (match Figma artboards) ====== */

/* Tablet baseline (820) */
@media (max-width: 819.98px){
  :root{--pad:16px}
  .hero__grid{grid-template-columns:1fr; align-items:start}
  .hero__media{height:260px; border-radius:16px}
  .hero__arrows{display:none}
}

/* Desktop â€“ 1440 */
@media (min-width: 1440px){
  :root{--container:1180px}
  .hero__media{height:320px}
  .hero__media img{object-position:76% center}
}

/* Large desktop â€“ 1920 */
@media (min-width: 1920px){
  :root{--container:1320px}
  .hero__grid{grid-template-columns:1.15fr .85fr}
  .hero__media{height:360px}
  .hero__arrows{right:-40px; width:240px}
  .hero__media img{object-position:78% center}
}


.keybutton {
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
/* font-size: 20px; */
font-size: 16px;
line-height: 120%;
letter-spacing: 2%;
padding: 8px 35px;
margin-top: 15px;

}

.KeyDates1 {
font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
/* font-size: 24px; */
font-size: 18px;
line-height: 120%;
}

.usefullink {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  line-height: 120%;
}

ul.Visalink li a {
font-family: "Lexend", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 120%;
  color:#000;
  text-decoration: underline;

}

ul.Visalink li a:hover {
  text-decoration: none;

}

.contactinfo {
  font-family: "IBM Plex Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 150%;
}

/* ==== Host / Partner logos table ==================================== */
.org-table {
  width: 100%;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;       /* important */
}

.org-table th,
.org-table td {
  width: 50%;                /* split table into two equal columns */
}

.org-table thead th{
  border: 0;
  padding: 8px 8px 16px;
  text-align: center;
  font-family: "Lexend", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 130%;
  color:#000;
}

.org-table tbody td{
  border: 0;                  /* no lines between columns */
  padding: 6px 12px 0;
  text-align: center;
  vertical-align: middle;
}

.org-table tbody td a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.org-table tbody td img{
  max-height: 60px;           /* match your screenshot scale */
  height: auto;
  width: auto;
  display: block;
}

/* subtle hover (optional) */
@media (prefers-reduced-motion: no-preference){
  .org-table tbody td a:hover img{
    transform: scale(1.02);
    transition: transform .18s ease;
  }
}

/* ===== Mobile: stack and show labels from data-label ================= */
@media (max-width: 640px){

  .org-table thead{ display: none; }
  .org-table, .org-table tbody, .org-table tr{ display: block; }
  .org-table tbody td{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 14px;
  }
  .org-table tbody td::before{
    content: attr(data-label);
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
  }
  .org-table tbody td{    margin-left: -18%; }
  .hotel-rates-table-mobile tbody td {
 
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 120%;
    align-content: start;
}
  .hotel-rates-table-mobile .promo-code {
  font-size: 12px;
  font-weight: 300;
}
}
.panel-divider{
  border:0;                            /* remove default HR */
  height:2px;
  width:100%;
  background: rgba(15,23,42,.35);      /* subtle dark line */
  margin:10px 0 14px;                  /* spacing above/below */
}

.panel__org {
font-family: "Lexend", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 120%;
  color:#000;
  padding: 15px;

}

.footer__text{
  margin:0 0 12px;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color:black;
  line-height: 130%;

}

html, body { overflow-x: clip; }

/* fallback for older browsers */
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

section.section2 {
    padding-top: unset;
}

.muted2 {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 120%;
  margin-top: 5px;
  margin-bottom: 0px;

}

.only-mobile { display: none; }
.only-desktop { display: table; }

@media (max-width: 450px){
  .only-desktop { display: none; }
  .only-mobile { display: block; }

  .mtable { list-style: none; margin: 0; padding: 0;min-width:unset; }
  .mrow { border: 1px solid #000; border-left: 0; border-right: 0; padding: 12px 16px; margin-bottom: 12px; }
  .mlabel { display: block; font-weight: 600; color:#000; }
  .mvalue { display: block; margin-bottom: 8px; }

/* Mobile: stack hotel content, put button on a new line */
  .hotel{
    flex-direction: column;        /* was row */
    align-items: flex-start;       /* left-align contents */
    justify-content: initial;      /* reset space-between */
    gap: 12px;
  }
  .hotel__text{ width: 100%; }

  /* keep button natural width on the left */
  .hotel .btn{ 
    align-self: flex-start; 
    margin-top: 4px;
  }

  .org-table tbody td{    margin-left: -25%; }

}
/* FRAME the whole list (outer left/right borders only) */
.hotels1{
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background: #fff;
}

/* Each row draws only its TOP border; last row also draws the BOTTOM one */
.hotel-acc{
  border: 0;                 /* remove per-item box */
  border-top: 1px solid #000;
  margin: 0;                 /* no gaps = no double lines */
}
.hotel-acc:last-of-type{ border-bottom: 1px solid #000; }

/* Summary row â€” headline left, + right */
.hotel-acc > summary{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  
}
.hotel-acc > summary::-webkit-details-marker{ display:none; }
.hotel-acc > summary::after{
  content:"+";
  font-weight:700; font-size:1.1rem; line-height:1;
}
.hotel-acc[open] > summary::after{ content:"â€“"; }

/* Open content â€” add a divider between summary and content, align like screenshot */
.hotel-acc .hotel__content{
 /*  border-top: 1px solid #000;      single inner divider */
  padding: 10px 16px 14px;
  display: grid;
  grid-template-columns: 1fr max-content;  /* text left, button right */
  align-items: center;
  gap: 16px;
  padding-top:0px;
  margin-top:-8px;
}
.hotel-acc .hotel__left{ display: grid; gap: 6px; }
.hotel-acc .keybutton{ margin: 0; }

/* Mobile: stack and make button full-width */
@media (max-width: 450px){
  .hotel-acc .hotel__content{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hotel-acc .keybutton{
    width: 100%;
    text-align: center;
  }
  #footerlogo {
  min-width:400px;
 
}
#footerlogo tbody td { 
 margin:auto;
}
.mtable tbody td {
   font-family: "Lexend", sans-serif;
    padding: 15px 12px;
    font-weight: 400;
}
}
@media (max-width: 390px){
  .org-table tbody td{    margin-left: -32%; }
.equal-table {
    width: 550px;
    table-layout: fixed; /* important: makes column widths stable */
  
  }
}
  @media (max-width: 325px) {
  .org-table tbody td {
    margin-left: -42%;
  }
}

  .footer {

  }
th.pricetable {
  width:45%;
}

th.pricetable2 {
  width:25%;
}
.ptop {
  padding-top:25px;
}

.toppfix {
  margin-top:23px;
}
.hotel__cta {
  text-align: right;          /* optional, to align with button */
}

.btn-promo {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85em;
  margin-right: 16%;
  color:#f7230a;
}

.promo-code{
  
  font-size: 12px;
  color:#f7230a;
}

.toppfix2 {
  margin-top:28px;
}

.extbold {
  font-weight: 800;
}
.datefix {
  font-size: 16px;
  font-weight: 400;
}




/* Negotiated hotel rates table â€“ desktop */
.hotel-rates-table thead tr:first-child th {
  text-align: center;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 120%;
  margin-top: 5px;
  margin-bottom: 0px;
  border: 1px solid #000;
}

.hotel-rates-table th {
  text-align: center;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 120%;
  margin-top: 5px;
  margin-bottom: 0px;
  border: 1px solid #000;
}

.hotel-rates-table thead tr:first-child th:nth-child(1)
{
  text-align: left;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 120%;
  
}

/* light green US column and Marriott row, like screenshot */
.hotel-rates-table .rates-usd {
  background: #e6f3df;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 18px;
  line-height: 120%;
  margin-top: 5px;
  margin-bottom: 0px;
  font-weight: 400;
  border: 1px solid #000;
}

.hotel-rates-table .rates-marriott-row td {
  background: #e6f3df;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 120%;
  margin-top: 5px;
  margin-bottom: 0px;
  
}

/* Promo code text inside booking cell */
.promo-code {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 300;
  margin-right: 1px;
}

/* Notes under the table */
.rates-note {
  margin-top: 6px;
  font-size: 14px;
  font-family: "Lexend", sans-serif;
}
.rates-note strong {
  font-weight: 500;
}

/* Mobile: use same general look as other mtable tables */
.hotel-rates-table-mobile td {
  border: 1px solid #000;
  border-left: 0;
  border-right: 0;
  padding: 16px;
}
.hotel-rates-table-mobile tr > *:first-child {
  border-left: 1px solid #000;
  
}
.hotel-rates-table-mobile tr > *:last-child {
  border-right: 1px solid #000;
}


.hotel-rates-table {
  table-layout: fixed;      /* browser respects the col widths */
}



/* === Negotiated hotel rates table === */
.hotel-rates-table {
  table-layout: fixed;   /* so column widths are respected */
  margin-top: 6px;
}

/* cancel the global thead th { width:70% } for this table */
.hotel-rates-table thead th {
  width: auto;
  
}

/* column width distribution â€“ adjust % if you like */
.hotel-rates-table thead tr:first-child th:nth-child(1) { width: 30%; }  /* Hotel */
.hotel-rates-table thead tr:first-child th:nth-child(2) { width: 50%; }  /* NEGOTIATED RATES (3 cols) */
.hotel-rates-table thead tr:first-child th:nth-child(3) { width: 0; }    /* not used (colspan) */
.hotel-rates-table thead tr:first-child th:nth-child(4) { width: 0; }    /* not used (colspan) */
.hotel-rates-table thead tr:first-child th:nth-child(5) { width: 30%; }  /* Booking Link */

/* keep the second-row headers on one line */
.hotel-rates-table thead tr.subhead th {
  /* white-space: nowrap; */
  text-align: center;
  
}
.hotel-rates-table thead tr.subhead th:first-child,
.hotel-rates-table thead tr.subhead th:last-child {
  white-space: normal;
  text-align: center;
  
}

.hotel-rates-table td {
  text-align: center;
  border: 1px solid #000;
}

.hotel-rates-table tr > td:first-child {
  text-align: left;
}

.textcenter {
    text-align: center;
}

.hotel-rates-table tbody td {
 
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 120%;
    align-content: start;
}

.hotel__walk ol, ul, li, p, .hotel__left {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 130%;
  margin: 0;

}
ol {
  margin-top:6px;
  margin-bottom:6px;
}

tr.alignfix {
  text-align: left;
}

a.alignfix {
  margin-left: -4px;
}

.activitiyTable {
width: 70%;
  
}

.rednote {
color:red;
font-size:12px;

}
.proemail a {

  word-break: break-word;
}


.hero-split {
    position: relative;
}

.header-btn-pos {
    position: absolute;
    top: 25px;
    left: 3%;
    z-index: 999;
}

/* Base Styles */
#header-cta-wrapper .optionbtn a {
    display: flex !important;
    flex-direction: column; /* Stack the spans vertically */
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 230px !important;
    min-height: 60px !important;
    border: 1px solid #000 !important;
    background-color: #fff !important;
    border-radius: 100px !important;
    text-decoration: none;
    transition: all 0.2s ease;
    
    /* Updated Font and Color Properties */
    color: #212529 !important;
    font-family: 'Lexend', sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Hide the space span on desktop since they are stacked */
#header-cta-wrapper .btn-space {
    display: none;
}

#header-cta-wrapper .optionbtn a:hover {
    box-shadow: -4px 6px 0px 0px #000 !important;
}

/* Responsive: 1-Line Style below 1200px */
@media (max-width: 1200px) {
    #header-cta-wrapper .optionbtn a {
        flex-direction: row; /* Put spans side-by-side */
        width: auto !important;
        /* min-height: auto !important; */
        padding: 12px 30px !important;
        font-size: 16px !important; /* Scaled down slightly to fit the 1-line layout */
        min-height: 60px !important;
    }

    /* Show the space span on one-line version */
    #header-cta-wrapper .btn-space {
        display: inline !important;
    }
}

@media (max-width: 1025px) {
  .header-btn-pos {
    top: 15px;
    left: 12%;
  }
}

/* Mobile Scaling */
@media (max-width: 600px) {
    #header-cta-wrapper .optionbtn a {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }
    .header-btn-pos {
        top: 10px;
        left: unset;
        right: 3%;
    }
}


/* Safest option: standard keyboard hyphen/minus */
.hotel-acc[open] summary::after {
    content: "-"; 
}

/* OR, if you need the exact longer en-dash look, use the Unicode escape: */
.hotel-acc[open] summary::after {
    content: "\2013"; 
}


/* ====== GLOBAL HEADER LOGO ====== */
.eqao-global-header {
  width: 100%;
  background-color: #ffffff;
  padding: 24px 0; /* Exact spacing to match reference */
}

.top-logo {
  max-height: 48px;
  display: block;
}

/* ====== BREADCRUMBS WRAPPER & NAV ====== */
.breadcrumb-wrapper {
  width: 94%;
  border-top: 1px solid #000;    /* Reference uses black borders */
  border-bottom: 1px solid #000;
  margin-left: 3%;
 /* background-color: #f3f4f6;      Light grey background */
}

.eqao-breadcrumb {
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}

.eqao-breadcrumb a, 
.eqao-breadcrumb div {
  font-family: 'Lexend', sans-serif !important;
  font-size: 16px !important;    /* From your Chrome Output */
  line-height: 120% !important;
  color: #000000 !important;
  text-decoration: none !important;
}

.home-link {
  display: flex;
  align-items: center;
}

/* HOME ICON (Matches .homepage-icon .icon) */
.homepage-icon.icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 18px;
}

/* BREADCRUMB SEPARATOR SVG (Matches the content: url() from your output) */
.eqao-breadcrumb img.bc-sep {
  width: 10px;
  height: 16px;
  margin-left: 10px;
  margin-right: 10px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* HOVER EFFECT */
.eqao-breadcrumb a:hover {
  text-decoration: underline !important;
}

.container-logo {
    padding-left: 3%;
    padding-top:10px;
}
