/*
Theme Name: IMI Solutions Child
Template: imisolutions
*/

/* =========================================================
   Tokens & base
   ========================================================= */
:root{
  --imi-teal:#187b81;
  --imi-blue:#21607c;
  --imi-line:#e5e7eb;
  --imi-muted:#6b7280;
}

html,body{margin:0;padding:0}

/* Canvas / embeds */
.imp-canvas{width:870px;height:auto}
@media (max-width:767.98px){ .imp-canvas{width:600px} }
@media (max-width:479.98px){ .imp-canvas{width:300px} }

/* =========================================================
   Woo tables (product list in table-content)
   ========================================================= */
.table-content a.details.name{font-size:14px}
.table-content .cart{display:flex;gap:8px}
.table-content input.qty{
  width:50px;margin:0;height:45px;text-align:center;
  padding:10px 5px;font-size:14px
}
.table-content .add_to_cart_button.ajax_add_to_cart{padding:15px 20px}
.table-content .ajax_add_to_cart{font-size:13px}
.table-content a.button.product_type_simple{font-size:13px;color:#199ca2}
.table-content tr td .name{font-size:14px}
.table-content tr td.product{padding:10px}
.table-content tr td.product .cart{float:none}
.table-content .product a.button.product_type_simple{padding:15px 20px}
.table-content tr td.product .cart .button{background:#f1f1f1}
.table-content tr td.product .cart .button:hover{background:#199ca2;color:#fff}
#woocommerce .table-content{max-height:500px}

/* =========================================================
   Subservices tiles
   ========================================================= */
.subservices .container .subservice .block a span{padding:20px;margin:0}
.subservices .container .subservice .block a span:before{width:70px;height:50px}
.subservices .container .subservice .block a span:after{width:40px;height:50px}
body .subservice .block{height:85px}

/* =========================================================
   Footer
   ========================================================= */
/* shell */
footer{padding:25px 15px 15px;display:flex}
footer .container.four{display:flex;gap:20px;padding:0 0 15px}
footer .container.four .logo{width:50%}
footer .container.four .logo img{width:200px}
footer .container.four ul.social{display:inline-flex;width:auto}
footer .container.four ul.social li a{height:40px;width:40px;padding:5px 0 0}
footer .container.four ul.social li a i.fa{font-size:20px}
footer .copyright .bloginfo{max-width:300px}
footer .copyright .bloginfo p{line-height:25px}
footer .copyright ul.logos{max-width:330px;display:inline}
footer .copyright ul.logos li{height:50px}
footer .contact{margin-left:0}
footer .contact h6{color:#fff}
footer .contact p{color:#6d8d9b;font-size:14px;line-height:22px}
footer .phone a{color:#fff}
footer .phone a{font-size:16px;line-height:26px}

.copywrite-sect.bloginfo{
  background:#04252d;color:#6d8d9b;font-size:14px;text-align:center
}
.copywrite-sect.bloginfo p a{color:#6d8d9b;font-weight:700}
.mailfoo a{font-size:16px;line-height:24px}

footer .foobotom-container.copyright{
  display:flex;width:100%;gap:30px;justify-content:space-around
}

/* --- responsive footer --- */
@media (max-width:1400px){
  footer .foobotom-container.copyright{justify-content:center}
}
@media (max-width:991.98px){
  footer .foobotom-container.copyright{flex-wrap:wrap;gap:25px;justify-content:flex-start}
  footer .copyright .bloginfo,
  footer .copyright ul.logos,
  .phone{max-width:48%;width:100%;margin-left:0}
  .mailfoo a{font-size:14px;line-height:20px}
  footer .container.four .address{text-align:left}
}
@media (max-width:767.98px){
  footer .container.four{display:block}
  footer .container.four .logo{width:100%;max-width:80%}
  footer .container.four .address{text-align:center}
  footer .container.four ul.social{float:inline-start;padding-top:20px}
  .mailfoo a{text-align:left}
  footer .copyright .bloginfo{width:100%;text-align:left;margin:0}
  footer .foobotom-container.copyright{flex-wrap:wrap;justify-content:space-between}
  footer .copyright ul.logos,.phone{max-width:45%;text-align:left}
  .foobotom-container.copyright .bloginfo{width:50%;margin:0;text-align:left}
  footer .container.four .email,
  footer .container.four ul.social{width:30%;margin:0}
}
@media (max-width:575.98px){
  footer{display:block}
  footer .container.four{display:flex;flex-direction:column;gap:10px}
  footer .container.four .logo img{width:auto}
  .contact p{max-width:100%}
  footer .logos li{margin:20px 0}
  .foobotom-container .phone{display:grid;padding:20px 0}
  .mailfoo{display:grid;justify-content:center}
  footer .container.four ul.social{display:inline;padding-top:20px}
  .copywrite-sect.bloginfo p{padding:10px;line-height:24px}
  footer .foobotom-container.copyright{
    display:inline-flex;text-align:center;gap:30px;flex-direction:column
  }
  .contact,.phone{width:100%;max-width:100%;text-align:center}
  footer .container.four .contact,
  footer .container.four .phone,
  footer .container.four .email,
  footer .container.four .logo{width:100%}
  footer .copyright ul.logos{display:flex;align-items:center}
  footer .copyright ul.logos li{height:auto}
  footer .container.four .address{width:100%}
  .foobotom-container.copyright .bloginfo{
    margin:0 auto;max-width:100%;width:100%;text-align:center
  }
  footer .copyright ul.logos{max-width:60%;text-align:center}
  .mailfoo a{text-align:center}
}
@media (max-width:480px){
  footer .copyright ul.logos{
    text-align:center;display:flex;align-items:center;justify-content:center;max-width:100%
  }
  footer .copyright ul.logos li:first-child,
  footer .copyright ul.logos li:last-child{height:15px;padding:0}
  footer .container.four{padding:10px}
}

/* Extra layout tweaks for wide-ish ranges */
@media (min-width:991px) and (max-width:1400px){
  footer .container.four .logo img{width:100%}
  footer .copyright ul.logos{max-width:230px}
  .contact{max-width:280px}
  .mailfoo a{font-size:14px;line-height:20px}
  .foobotom-container .phone{display:contents}
}
@media (min-width:1024px) and (max-width:1200px){
  footer .foobotom-container.copyright{gap:25px}
  footer .copyright ul.logos li:not(:last-child) img{margin:0 15px 0 0}
  .contact{max-width:20%}
  footer .copyright .bloginfo{max-width:28%;padding-left:20px}
  .phone{width:18%}
}
@media (min-width:991px) and (max-width:1024px){
  .phone{width:20%}
  .phone a{font-size:16px}
  footer .foobotom-container.copyright{gap:20px}
}

/* =========================================================
   Media rails (TALA / ALA-E)
   ========================================================= */
/* classes and ids both supported; share the same look */
.tala-media-rail, .alae-media-rail, #tala-media-rail, #alae-media-rail{
  display:flex;flex-wrap:nowrap;align-items:center;gap:12px;
  overflow-x:auto;margin:12px 0 0;padding-bottom:2px;
  scrollbar-gutter:stable both-edges;
}
.tala-media-rail > *, .alae-media-rail > *,
#tala-media-rail > .thumb, #alae-media-rail > .thumb{
  flex:0 0 auto;width:260px;aspect-ratio:4/3;display:grid;place-items:center;
  background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden;
}
.tala-media-rail img, .tala-media-rail video,
.alae-media-rail img, .alae-media-rail video,
#tala-media-rail img, #tala-media-rail video,
#alae-media-rail img, #alae-media-rail video{
  width:100%;height:100%;object-fit:cover
}
@media (max-width:979.98px){
  .tala-media-rail > *, .alae-media-rail > *,
  #tala-media-rail > .thumb, #alae-media-rail > .thumb{width:210px}
}
@media (max-width:679.98px){
  .tala-media-rail > *, .alae-media-rail > *,
  #tala-media-rail > .thumb, #alae-media-rail > .thumb{width:180px}
}

/* =========================================================
   Small polish
   ========================================================= */
footer .container.two .contact p{color:#fff;font-size:15px}
footer .container.two .phone a span{font-size:18px}
footer .container.two .phone a i.fa{color:#fff;font-size:24px;margin:0 15px 0 0}