/* ==========================

   CR Framework

   Tailwind-style utility CSS

   No npm required

   ========================== */



:root{

  --cr-primary:#00496b;

  --cr-secondary:#F9DC5C;

  --cr-success:#16a34a;

  --cr-danger:#dc2626;

  --cr-warning:#f59e0b;

  --cr-light:#F4FFFD;

  --cr-dark:#0f172a;



  --cr-radius:8px;

  --cr-container:1200px;

}



/* ==========================

   Reset

========================== */



*{

  margin:0;

  padding:0;

  box-sizing:border-box;

}



body{

  font-family:Arial,sans-serif;

  line-height:1.5;

  color:var(--cr-dark);

}



/* ==========================

   Container

========================== */



.cr-container{

  width:100%;

  max-width:var(--cr-container);

  margin:auto;

  padding-left:15px;

  padding-right:15px;

}



/* ==========================

   Grid System

========================== */



.cr-row{

  display:flex;

  flex-wrap:wrap;

  margin:-10px;

}



[class*="cr-col-"]{

  padding:10px;

  width:100%;

}



.cr-col-1{width:8.333%;}

.cr-col-2{width:16.666%;}

.cr-col-3{width:25%;}

.cr-col-4{width:33.333%;}

.cr-col-5{width:41.666%;}

.cr-col-6{width:50%;}

.cr-col-7{width:58.333%;}

.cr-col-8{width:66.666%;}

.cr-col-9{width:75%;}

.cr-col-10{width:83.333%;}

.cr-col-11{width:91.666%;}

.cr-col-12{width:100%;}



/* ==========================

   Display

========================== */



.cr-block{display:block;}

.cr-inline{display:inline;}

.cr-inline-block{display:inline-block;}

.cr-flex{display:flex;}

.cr-grid{display:grid;}

.cr-hidden{display:none;}



/* ==========================

   Flex Utilities

========================== */



.cr-flex-row{

  flex-direction:row;

}



.cr-flex-col{

  flex-direction:column;

}



.cr-flex-wrap{

  flex-wrap:wrap;

}



.cr-items-center{

  align-items:center;

}



.cr-items-start{

  align-items:flex-start;

}



.cr-items-end{

  align-items:flex-end;

}



.cr-justify-center{

  justify-content:center;

}



.cr-justify-between{

  justify-content:space-between;

}



.cr-justify-around{

  justify-content:space-around;

}



.cr-gap-1{gap:10px;}

.cr-gap-2{gap:20px;}

.cr-gap-3{gap:30px;}



/* ==========================

   Width

========================== */



.cr-w-25{width:25%;}

.cr-w-50{width:50%;}

.cr-w-75{width:75%;}

.cr-w-100{width:100%;}



/* ==========================

   Height

========================== */



.cr-h-100{height:100%;}

.cr-vh-100{height:100vh;}



/* ==========================

   Padding

========================== */



.cr-p-0{padding:0;}

.cr-p-1{padding:10px;}

.cr-p-2{padding:20px;}

.cr-p-3{padding:30px;}

.cr-p-4{padding:40px;}



.cr-pt-1{padding-top:10px;}

.cr-pt-2{padding-top:20px;}



.cr-pb-1{padding-bottom:10px;}

.cr-pb-2{padding-bottom:20px;}



.cr-pl-1{padding-left:10px;}

.cr-pr-1{padding-right:10px;}



/* ==========================

   Margin

========================== */



.cr-m-0{margin:0;}

.cr-m-1{margin:10px;}

.cr-m-2{margin:20px;}

.cr-m-3{margin:30px;}



.cr-mt-1{margin-top:10px;}

.cr-mt-2{margin-top:20px;}

.cr-mt-3{margin-top:30px;}



.cr-mb-1{margin-bottom:10px;}

.cr-mb-2{margin-bottom:20px;}

.cr-mb-3{margin-bottom:30px;}



.cr-mx-auto{margin-left:auto;margin-right:auto;}

.cr-ml-auto{margin-left:auto;}

.cr-mr-auto{margin-right:auto;}



/* ==========================

   Typography

========================== */



.cr-text-left{text-align:left;}

.cr-text-center{text-align:center;}

.cr-text-right{text-align:right;}



.cr-text-sm{font-size:.875rem;}

.cr-text-md{font-size:1rem;}

.cr-text-lg{font-size:1.25rem;}

.cr-text-xl{font-size:2rem;}

.cr-text-2xl{font-size:3rem; line-height: 4rem;}



.cr-font-light{font-weight:300;}

.cr-font-normal{font-weight:400;}

.cr-font-bold{font-weight:700;}



.cr-uppercase{text-transform:uppercase;}

.cr-lowercase{text-transform:lowercase;}

.cr-capitalize{text-transform:capitalize;}



/* ==========================

   Colors

========================== */



.cr-bg-primary{

  background:var(--cr-primary);

  color:#fff;

}



.cr-bg-secondary{

  background:var(--cr-secondary);

  color:#fff;

}



.cr-bg-light{

  background:var(--cr-light);

}



.cr-bg-dark{

  background:var(--cr-dark);

  color:#fff;

}



.cr-text-primary{

  color:var(--cr-primary);

}



.cr-text-success{

  color:var(--cr-success);

}



.cr-text-danger{

  color:var(--cr-danger);

}



.cr-text-warning{

  color:var(--cr-warning);

}



/* ==========================

   Border Radius

========================== */



.cr-rounded{

  border-radius:var(--cr-radius);

}



.cr-rounded-sm{

  border-radius:4px;

}



.cr-rounded-lg{

  border-radius:16px;

}



.cr-rounded-full{

  border-radius:9999px;

}



/* ==========================

   Shadows

========================== */



.cr-shadow-sm{

  box-shadow:0 2px 5px rgba(0,0,0,.1);

}



.cr-shadow{

  box-shadow:0 4px 10px rgba(0,0,0,.15);

}



.cr-shadow-lg{

  box-shadow:0 10px 25px rgba(0,0,0,.2);

}



/* ==========================

   Buttons

========================== */



.cr-btn{

  display:inline-block;

  padding:12px 24px;

  border:none;

  cursor:pointer;

  text-decoration:none;

  transition:all .3s ease;

  border-radius:var(--cr-radius);

}



.cr-btn-primary{

  background:var(--cr-primary);

  color:#fff;

}



.cr-btn-secondary{

  background:var(--cr-secondary);

  color:#fff;

}



.cr-btn:hover{

  transform:translateY(-2px);

  opacity:.9;

}



/* ==========================

   Cards

========================== */



.cr-card{

  background:#fff;

  padding:20px;

  border-radius:var(--cr-radius);

  box-shadow:0 4px 10px rgba(0,0,0,.1);

}



/* ==========================

   Position

========================== */



.cr-relative{position:relative;}

.cr-absolute{position:absolute;}

.cr-fixed{position:fixed;}

.cr-sticky{position:sticky;}



/* ==========================

   Overflow

========================== */



.cr-overflow-hidden{

  overflow:hidden;

}



.cr-overflow-auto{

  overflow:auto;

}



/* ==========================

   Responsive

========================== */



/* Tablet */

@media(max-width:992px){



  .cr-md-col-6{

    width:50%;

  }



  .cr-md-col-12{

    width:100%;

  }



  .cr-md-hidden{

    display:none;

  }



  .cr-md-text-center{

    text-align:center;

  }

  .cr-w-75{width:95%;}



}



/* Mobile */

@media(max-width:768px){



  .cr-sm-col-12{

    width:100%;

  }



  .cr-sm-hidden{

    display:none;

  }



  .cr-sm-flex-col{

    flex-direction:column;

  }



  .cr-sm-text-center{

    text-align:center;

  }



}