@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'RollerGI';
    src: url('../fonts/ROLLERGI.TTF')
}
:root {
    --bs-danger: #fa8072;
    --bs-danger-rgb: 250, 128, 114; 
    --bs-warning: #ede2ab;
    --bs-warning-rgb: 237, 226, 171;    
    --bs-body-bg-rgb: 209, 246, 255;
    --bs-body-bg: #d1f6ff;
    --bs-highlight-bg: #D1F6FF;
    --bs-font-sans-serif:"Work Sans", Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-link-color: #000000;
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-decoration: none;
    --bs-link-hover-color: #000000;
    --bs-link-hover-color-rgb: 0, 0, 0;
}


body{font-size:15px;}
h1 {font-size: 60px;}
h2 {font-size: 36px;}
h3 {font-size: 26px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}

footer p{
    font-size: 18px;
    letter-spacing: .25em;
    line-height: .9em;
    text-transform: lowercase;
}

::selection {background: #ffffff;color: #000000;}

a{text-decoration: var(--bs-link-decoration);}
@-moz-document url-prefix(){
    select, select:-moz-focusring, select::-moz-focus-inner{color:transparent !important;text-shadow: 0 0 0 #000 !important;background-image: none !important;border:0;}
}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition: background-color 5000s ease-in-out 0s;-webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.6) inset;}


.bg-center-url{background-size: cover; background-repeat: no-repeat;background-position: center center;}

header .navbar-nav{
    --bs-nav-link-padding-y: 1rem;
    --bs-navbar-nav-link-padding-x: 1.0rem;
}

header .nav-link {
    --bs-nav-link-font-weight:500;
    --bs-nav-link-color: var(--bs-dark);
    --bs-nav-link-hover-color: var(--bs-danger);
    --bs-navbar-active-color: var(--bs-black);
    --bs-nav-link-font-size:12px;
    text-transform: lowercase;
}
.hero-sec1{background-size: cover; background-repeat: no-repeat;background-position: center center;padding: 20px;}
.hero-sec1 .row{ min-height: 310px;}
.hero-sec1 h2,
.hero-sec1 .h2{
    font-family: 'RollerGI';
    font-style: normal;
    text-transform: lowercase;
    font-size: 100px;
    line-height: 1.1;
}
.navbar-brand{width: 600px}

.btn-warning{ 
    --bs-btn-color: :var(--bs-light);
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: :var(--bs-light);
    --bs-btn-hover-bg: rgba(var(--bs-warning-rgb),0.9);
    --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb),0.9);
    --bs-btn-active-color: :var(--bs-light);
    --bs-btn-active-bg: rgba(var(--bs-warning-rgb),0.9);
    --bs-btn-active-border-color: rgba(var(--bs-warning-rgb),0.9);
    --bs-btn-disabled-color: :var(--bs-light);
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}
.btn-lg {
    --bs-btn-padding-y: 25px;
    --bs-btn-padding-x: 46px;
    --bs-btn-font-family:'RollerGI'; 
    --bs-btn-font-size: 50px;
    --bs-btn-font-weight:400;
    --bs-btn-line-height:40px;
    text-transform: lowercase;
    letter-spacing: .05em;
    --bs-border-radius-lg: 0rem;
}
.btn:hover{opacity: .8;}

.bs-title{font-size:4rem;font-style: italic;}

.bs-title.text-danger{
     --e-stroke-color: #E96353 ;      
      text-shadow:-1px -1px 0px var(--e-stroke-color), 1px -1px 0px var(--e-stroke-color), 1px -1px 0px var(--e-stroke-color), 1px -1px 0px var(--e-stroke-color), 0px -1px 0px var(--e-stroke-color), -1px -1px 0px var(--e-stroke-color), -1px -1px 0px var(--e-stroke-color), -0px -1px 0px var(--e-stroke-color), 1px -1px 0px var(--e-stroke-color), -1px 1px 0px var(--e-stroke-color), 1px 1px 0px var(--e-stroke-color);
}


.bs-top-title{
    background: #FA8072;
    background: linear-gradient(160deg, rgba(250, 128, 114, 1) calc(60% - 20px), rgba(209, 246, 255, 1) calc(60% - 20px), rgba(209, 246, 255, 1) calc(60% + 20px), rgba(250, 128, 114, 1) calc(60% + 20px));
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}

.article-card:nth-child(1) {
    transform: rotate(-1deg);
}
.article-card:nth-child(2) {
    transform: rotate(0.5deg);
}
.article-card:nth-child(3) {
    transform: rotate(-0.75deg);
}
.article-card {
    margin-bottom: 4rem;
    position: relative;
}
.article-card:nth-child(1) .article::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 60%;
    background-color: rgba(255, 255, 255, 0.9);
    background-image: url('../imgs/article-img1.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.6;
}
.article-card:nth-child(1) .article::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 40%;
    background-image: url('../imgs/bg-article-img1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px 120px;
    background-repeat: repeat;
    opacity: 0.6;
}
.article-card:nth-child(1) .article {
    position: relative;
    background: #195E35;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 3rem;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.article-card:nth-child(1) .article .content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 55%;
    margin-left: auto;
    text-align: right;
}
.article-meta { font-family: 'Courier Prime', monospace; font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem;}
.article-title { font-size: 2.8rem;font-weight: 900; color: #000000; text-transform: lowercase; margin-bottom: 1rem; line-height: 1.1; text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.3);}
.article-excerpt{font-family: 'Courier Prime', monospace; font-size: 1rem; line-height: 1.6; color: #FFFFFF; margin-bottom: 1.5rem;}
.read-more {
    display: inline-block;
    background: #000000;
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.3);
    transition: transform 0.2s;
    text-transform: lowercase;
}
.article-card:nth-child(1) .article .tags {
    max-width: 120%;
    margin-right: -10%;
}
.tags{display: flex;flex-wrap: wrap;gap: 0.5rem;margin-top: 1.5rem;}
.tag {background: #F4E7A3; color: #000000; padding: 0.4rem 0.8rem; font-family: 'Courier Prime', monospace; font-size: 0.75rem; box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);}


.article-card:nth-child(2) .article{
    position: relative;
    background: #195E35;
    min-height: 450px;
    display: flex;
    align-items: center;
    padding: 3rem;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.article-card:nth-child(2) .article::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../imgs/bg-article-img1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px 120px;
    background-repeat: repeat;
    opacity: 0.6;
}
.article-card:nth-child(2) .article::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 60%;
    background-color: rgba(255, 255, 255, 0.9);
    background-image: url('../imgs/asset_prices-img1.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.6;
}
.article-card:nth-child(2) .article .content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 55%;
    margin-right: auto;
}

.article-card:nth-child(3) .article {
    position: relative;
    background-image: url('../imgs/bg-article-img2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 450px;
    display: flex;
    align-items: center;
    padding: 3rem;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.article-card:nth-child(3) .article::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 60%;
    background-color: rgba(255, 255, 255, 0.95);
    background-image: url("../imgs/gemini_generated-img1.png");
    background-size: cover;
    background-position: center;
    opacity: 0.6;
}
.article-card:nth-child(3) .article .content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 55%;
    margin-right: auto;
}




@media only screen and (max-width:519px) {
 
}
@media only screen and (max-width:991px) {
  .article-card:nth-child(1) .article .content-wrapper{max-width: 100%;}
  .article-title {font-size: 2rem;}
  .article-excerpt {font-size:0.9rem;}
  .tag{font-size: 0.70rem;}
  .read-more {font-size: 0.8rem;}
    .article-card:nth-child(1) .article .tags{max-width: 100%; margin-right: 0%;}
    
    .article-card:nth-child(1) .article .content-wrapper {max-width: 100%;}
    .article-card:nth-child(1) .article{padding-top:300px;}
    .article-card:nth-child(1) .article::before {bottom: 60%;right: 0;}
    .article-card:nth-child(1) .article::after {top: 40%;left: 0;}

    .article-card:nth-child(2) .article .content-wrapper {max-width: 100%;}
    .article-card:nth-child(2) .article{padding-top:300px;}
    .article-card:nth-child(2) .article::before {top: 40%;right: 0;}
    .article-card:nth-child(2) .article::after {bottom: 60%;left: 0;}

    .article-card:nth-child(3) .article .content-wrapper {max-width: 100%;}
    .article-card:nth-child(3) .article{padding-top:300px;}
    .article-card:nth-child(3) .article::before {top: 40%;right: 0;}
    .article-card:nth-child(3) .article::after {bottom: 60%;left: 0;}
}
@media only screen and (max-width:767px){
    footer p {font-size: 14px;}
    .hero-sec1 h2,
    .hero-sec1 .h2{font-size: 60px;}
    .article-card:nth-child(1) .article {padding-top: 440px;padding-left:20px;padding-right:20px;}
    .article-card:nth-child(2) .article {padding-top: 440px;padding-left:20px;padding-right:20px;}
    .article-card:nth-child(3) .article {padding-top: 440px;padding-left:20px;padding-right:20px;}
  
}
@media only screen and (max-width:480px){
    .article-card:nth-child(1) .article {padding-top: 450px;}
    .article-card:nth-child(2) .article {padding-top: 500px;}
    .article-card:nth-child(3) .article {padding-top: 500px;}
}

@media only screen and (min-width:768px){
    
}


@media only screen and (min-width:1200px){
  
}