@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* ========================= Root Variables ========================= */
:root {
  --font-body: "Roboto", sans-serif;
  --font-icon: "Font Awesome 6 Free";
  --text-transform-capitalize: capitalize;
  --text-transform-uppercase: uppercase;
  --text-transform-none: none;
  --primary: #CE070F;
  --secondary: #003366;
  --third: #333333;
  --light: #FAFAFA;
  --light2: #F4F4F4;
  --white: #fff;
  --black: #000;
}
/* ========================= Reset & Base ========================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-normal);
  line-height: 1.6;
  font-style: normal;
  font-size: 14px;
  letter-spacing: var(--letter-spacing);
  color: var(--third);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.container-fluid {
    width: 100%;
    max-width: 1600px;
}

.bg-primary{
  background-color: var( --primary) !important ;
}
.bg-secondary{
  background-color: var( --secondary) !important ;
}
.bg-light{
  background-color: var( --light) !important ;
}
.bg-light2{
  background-color: var( --light2) !important ;
}

.text-primary{
  color: var(--primary) !important;
}
.text-secondary{
  color: var(--secondary) !important;
}
.text-third{
  color: var(--third);
}
.border-primary{
  border-color: var(--primary) !important;
}
.border-secondary{
  border-color: var(--secondary) !important;
}
.img-fluid {
  max-width: 100% !important;
  height: auto;
}
a, a:hover, a:active{
  text-decoration: none;
}

input, select{
  outline: 0;
}

hr{
  opacity: 1;
}

.spacer{
  height: 40px;
}

p:empty {
    display: none;
}

h1,h2,h3,h4,h5,h6{font-weight: 600;}

/* ========================= Typography ========================= */
h1{font-size: 36px;}
h2 {font-size: 32px;}
h3 {font-size: 28px;}
h4 {font-size: 20px;}
h5 {font-size: 16px;}
h6 {font-size: 12px;}

/* ========================= Border Radius ========================= */
.rounded-0 {border-radius: 0px !important;}
.rounded-1 {border-radius: 2px !important;}
.rounded-4 {border-radius: 4px !important;}
.rounded-8 {border-radius: 8px !important;}
.rounded-12 {border-radius: 12px !important;}
.rounded-16 {border-radius: 16px !important;}
.rounded-full{border-radius: 50% !important;}

/* ========================= Font Weight ========================= */
.font-light {font-weight: 300;}
.font-normal {font-weight: 400;}
.font-medium {font-weight: 500;}
.font-semibold {font-weight: 600;}
.font-bold {font-weight: 700;}
.font-extrabold {font-weight: 800;}
.font-black {font-weight: 900;}

/* ========================= Grid ========================= */
.grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}

.col-span-1{grid-column: span 1 / span 1;}	
.col-span-2{grid-column: span 2 / span 2;}	
.col-span-3{grid-column: span 3 / span 3;}	
.col-span-4{grid-column: span 4 / span 4;}	
.col-span-5{grid-column: span 5 / span 5;}	
.col-span-6{grid-column: span 6 / span 6;}	
.col-span-7{grid-column: span 7 / span 7;}	
.col-span-8{grid-column: span 8 / span 8;}	

/* ========================= Layout Containers ========================= */
@media screen and (min-width: 567px){
.grid-cols-sm-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-sm-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-sm-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-sm-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-sm-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-sm-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-sm-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-sm-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}

.col-span-sm-1{grid-column: span 1 / span 1;}	
.col-span-sm-2{grid-column: span 2 / span 2;}	
.col-span-sm-3{grid-column: span 3 / span 3;}	
.col-span-sm-4{grid-column: span 4 / span 4;}	
.col-span-sm-5{grid-column: span 5 / span 5;}	
.col-span-sm-6{grid-column: span 6 / span 6;}	
.col-span-sm-7{grid-column: span 7 / span 7;}	
.col-span-sm-8{grid-column: span 8 / span 8;}
}

@media screen and (min-width: 768px){
 .container-fluid {
    width: 95%;
}

.grid-cols-md-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-md-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-md-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-md-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-md-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-md-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-md-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-md-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}

.col-span-md-1{grid-column: span 1 / span 1;}	
.col-span-md-2{grid-column: span 2 / span 2;}	
.col-span-md-3{grid-column: span 3 / span 3;}	
.col-span-md-4{grid-column: span 4 / span 4;}	
.col-span-md-5{grid-column: span 5 / span 5;}	
.col-span-md-6{grid-column: span 6 / span 6;}	
.col-span-md-7{grid-column: span 7 / span 7;}	
.col-span-md-8{grid-column: span 8 / span 8;}
}

@media screen and (min-width: 992px){
.grid-cols-lg-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-lg-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-lg-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-lg-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-lg-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-lg-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-lg-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-lg-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}

.col-span-lg-1{grid-column: span 1 / span 1;}	
.col-span-lg-2{grid-column: span 2 / span 2;}	
.col-span-lg-3{grid-column: span 3 / span 3;}	
.col-span-lg-4{grid-column: span 4 / span 4;}	
.col-span-lg-5{grid-column: span 5 / span 5;}	
.col-span-lg-6{grid-column: span 6 / span 6;}	
.col-span-lg-7{grid-column: span 7 / span 7;}	
.col-span-lg-8{grid-column: span 8 / span 8;}

h1{font-size: 40px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 24px;}
h5 {font-size: 18px;}
h6 {font-size: 14px;}
}

@media screen and (min-width: 1200px){
.grid-cols-xl-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-xl-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-xl-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-xl-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-xl-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-xl-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-xl-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-xl-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}

.col-span-xl-1{grid-column: span 1 / span 1;}	
.col-span-xl-2{grid-column: span 2 / span 2;}	
.col-span-xl-3{grid-column: span 3 / span 3;}	
.col-span-xl-4{grid-column: span 4 / span 4;}	
.col-span-xl-5{grid-column: span 5 / span 5;}	
.col-span-xl-6{grid-column: span 6 / span 6;}	
.col-span-xl-7{grid-column: span 7 / span 7;}	
.col-span-xl-8{grid-column: span 8 / span 8;}
}

@media screen and (min-width: 1400px){
body{font-size: 16px;}
.container{
  width: 85%;
  max-width: 1440px;
}
.grid-cols-xxl-1 {grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-xxl-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-xxl-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-xxl-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-xxl-5 {grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-xxl-6 {grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-xxl-7 {grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-xxl-8 {grid-template-columns: repeat(8, minmax(0, 1fr));}

.col-span-xxl-1{grid-column: span 1 / span 1;}	
.col-span-xxl-2{grid-column: span 2 / span 2;}	
.col-span-xxl-3{grid-column: span 3 / span 3;}	
.col-span-xxl-4{grid-column: span 4 / span 4;}	
.col-span-xxl-5{grid-column: span 5 / span 5;}	
.col-span-xxl-6{grid-column: span 6 / span 6;}	
.col-span-xxl-7{grid-column: span 7 / span 7;}	
.col-span-xxl-8{grid-column: span 8 / span 8;}

h1{font-size: 48px;}
h2 {font-size: 40px;}
h3 {font-size: 36px;}
h4 {font-size: 28px;}
h5 {font-size: 20px;}
h6 {font-size: 16px;}
}