:root {
--bg-clr:#e7ba83;

--light_blue_bg: #e9f2fe;

--orange-bg:#e56400;

--orange-text-color:#e56400;

--heading-font-family:'Cardo', serif;

--sub-heading-font-family:'Pathway Gothic One', sans-serif;

--paragraph-font-family:'Cardo', serif;

}



body {   
  
  background: url('https://gulfnews-labs.s3.us-east-1.amazonaws.com/bhatia-family/images/bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  background-color: var(--bg-clr);    color: #000000;}


a:link { text-decoration: none; color: #414141 !important;}

a:hover { text-decoration: none; color: #414141 !important;}


h1 {  font-family: var(--heading-font-family); font-size: 2.4rem; font-weight: bolder; text-shadow: 0px 1px 1px rgba(255, 238, 218, 0.5); }

h2 {  font-family: var(--heading-font-family); font-size: 1.8rem; font-weight: 700;  }

h3 {  font-family: var(--heading-font-family); font-size: 1.7rem;}

h5 {    font-family:  var(--sub-heading-font-family); letter-spacing: .1rem; }

p { font-family: var(--paragraph-font-family); font-size: 1.2rem; line-height: 30px; font-weight: 700; margin-top: 1rem;}

.header_section { background-color:var(--light_blue_bg); }

.header_section > .text-box { padding: 3rem 6rem;}

.header_section  img {  object-fit: cover;}
  
.text_1 { font-size: 12px; font-family: Verdana, Geneva, Tahoma, sans-serif; width: 100%; color: #778995; padding-top: 15px;}

.news_section { padding:40px 0px; margin-top: 60px; }

.news_section h3  { background-color:var(--orange-bg); color: #fff; padding: 8px 20px; display: inline-block;  }

.vlink { color: var(--orange-text-color); font-family: var(--heading-font-family); text-decoration: none; font-weight: 700; padding: 15px 0px;}

.vlink:hover { color: rgb(31, 31, 31); font-family: var(--heading-font-family);}


.ilink { color: #414141; font-family: var(--heading-font-family); text-decoration: none; font-weight: 700;  }

.ilink:hover { color: #000000 !important; font-family: var(--heading-font-family);}

.card-title {   font-family: var(--heading-font-family); font-size: 1.3rem; font-weight: 700;}

.card p { font-size: 1.2rem; margin: 0px; line-height: 1.8rem; }

.card:hover { background-color: #f9fcff;}

.fst_hdng { padding-top: 30px;}


.img_zoom { overflow: hidden;}
 
.img_zoom img {
    transform-origin: 50% 65%;
    transition: transform 2s, filter 3s ease-in-out; 
  }
   
  .img_zoom:hover img { 
    transform: scale(1.1);
  }




@media only screen and (min-device-width : 320px) and (max-device-width : 360px) {

    .header_section > .text-box {
        padding: 1rem 1rem;
    }

    .news_section { padding-top: 10px;}

    .news_section h1 {  padding: 1rem 0;}

    .news_section h3 {  padding: .5rem 1rem; font-size: 1.2rem;}

    .news_section img { padding: 1rem 0 0 0;}
    .card img { padding: 0;}

}
 

@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {

    .header_section > .text-box { padding: 1rem 1rem; }

    .news_section { padding: 0px !important; text-align: center;}

    .news_section h1 {  padding: 1rem 0  .5rem 0;  font-size: 3rem;}

    .news_section h3 {  padding: .5rem 1rem; font-size: 1.2rem;}

    .news_section p {  font-size: 1.4rem; line-height: 2rem;}

    .news_section img { padding: 1rem 0 0 0;}
    .card img { padding: 0;}

}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {  
  #parallax_container { width: 100% !important; }
}  


#parallax_navbar  {
  background-color: #fbfdff;
  color: #242222;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 999;
  box-shadow: 0 2px 8px 0 hsla(0,0%,7%,.2);
}

#parallax_navbar img { height: 25px; margin:8px  16px;}

#parallax_container 
{
  width: 61%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 
#parallax_navbar a { 
  text-decoration: none; 
  font-size: .9rem;
  color: #525252; 
}
#parallax_navbar a:hover { 
  color: #0c0c0c; 
}


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }