:root {
    /* Colors: */
    --texr-color-000: #000000;
    --gray_light_color: #;
    --gray_medium_color: #4B4B4B;
    --red_color: #C80000;
    --primary_color: #283C78;
    --gray_dark_color: #333333;
    --text_white_80: #fffc;
    /* Font Sizes (converted to percentages) */
    --font_size_xsm: 68.75%;    /* 11px */
    --font_size_sm: 87.5%;      /* 14px */
    --font_size_md: 100%;       /* 16px */
    --font_size_lg: 112.5%;     /* 18px */
    --font_size_2lg: 125%;      /* 20px */
    --font_size_xl: 150%;       /* 24px */
    --font_size_xxl: 200%;      /* 32px */
    --font_size_xxxl: 300%;     /* 48px */

    /* Paddings */
    --padding_1: 1rem;
    --padding_1x5: 1.5rem;
    --padding_2: 2rem;
    --padding_2x5: 2.5rem;
    --padding_3: 3rem;
    /* Borders */
    --border_1 : 1px solid;
    --border_2xl : 2px solid;
    --border_3x1: 3px solid;
    /* Border Radius */
    --brdr_rds_0x5 : .5rem;
    --brdr_rds_1: 1rem;
    --brdr_rds_1x5: 1.5rem;
    --brdr_rds_2: 2rem;
    --brdr_rds_2x5: 2.5rem;
}
@font-face{ font-family: Roboto_Regular; src: url(../fonts/Roboto-Regular.ttf);}
@font-face{ font-family: Roboto_Regular_bold; src: url(../fonts/Roboto-Bold.ttf);}
@font-face{ font-family: Roboto_Regular_light; src: url(../fonts/Roboto-Light.ttf);}
@font-face{ font-family: Roboto_Regular_thin; src: url(../fonts/Roboto-Thin.ttf);}
body{font-size: 1rem; font-family: 'Roboto_Regular'}
.lh_normal{line-height: normal;}
a{text-decoration: none; color: #000;}
/* Header css */
.top_nav{box-shadow: 0px 3px 6px #00000029; transition: all 0.5s ease;}
.navbar .navbar-brand img{width: auto; height: 50px; transition: height 0.5s ease;}
.navbar-nav .nav-item .nav-link{padding: 6px 25px; border: var(--border_1) transparent; border-radius: 50px; margin-right: 10px; transition: all 0.3s ease-in-out;}
.navbar-nav .nav-item .nav-link:hover{background: var(--primary_color); border-radius: 50px; color: #fff;}
.products_menu li{margin-bottom: 6px;}
.top_nav.shrink{padding-top: 8px; padding-bottom: 8px; max-height: 60px;}
.top_nav.shrink .navbar-brand img{height: 27px;}
.top_nav.shrink .navbar-collapse {background: white !important;}
/* Remove Bootstrap default toggler icon */
.navbar-toggler-icon{display: none;}
.ham-icon{display: inline-block; cursor: pointer;}
.bar1, .bar2, .bar3 {width: 30px; height: 3px; background-color: #000; margin: 6px 0; transition: 0.4s;}

/* Animation when active */
.ham-icon.change .bar1 {
    transform: translate(0, 8px) rotate(-45deg);
}

.ham-icon.change .bar2 {
    opacity: 0;
}

.ham-icon.change .bar3 {
    transform: translate(0, -8px) rotate(45deg);
}

/* BREADCRUMB */
.sticky-breadcrumb{position: sticky; top: 76px; z-index: 999; box-shadow: 0px 3px 6px #00000020; backdrop-filter: blur(8px); padding: 10px 0; transition: all 0.5s ease; background: rgb(13 44 135 / 50%);}
.sticky-breadcrumb.shrink {padding: 8px 0; font-size: 90%;}
/* Hero Css */
.hero_section{background-size: cover; height: 70vh; background-attachment: fixed; rotate: 360deg; max-height: 600px;}
/* About Video Section css */
.srai_factory_img{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
/* Why Choose Us */
.why_choose_crd{box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1); cursor: default; transition: all .5s ease;}
.why_choose_crd:hover{transform: scale(1.04); box-shadow: 0 27px 22px -19px rgba(0, 0, 0, 0.3);}
/* Contact Us css */
.contact_info_card, .contact_form_card{border: var(--border_2xl) rgba(235, 230, 231, 1);}
.contact_info_card:hover{border: 2px solid #4b77ff33; box-shadow: 0 25px 50px -12px rgba(155, 155, 155, 0.3) !important;}
.contact_info_card .img_2{display: none;}
.contact_info_card:hover .img_1{display: none;}
.contact_info_card:hover .img_2{display: block;}
.contact_info_card:hover img{background: var(--primary_color);}
.contact_info_card img{width: 45px; background: rgba(43, 74, 141, 0.1); border-radius: 25%; padding: 12px;}
.responsive-map{overflow: hidden; padding-bottom: 56.25%;position: relative; height: 0; border-radius: 10px;}
.responsive-map iframe{left: 0; top: 0; height: 100%; width: 100%; position: absolute;}
.contact_form_card input{min-height: 40px;padding: 5px 10px; border: var(--border_2xl) rgba(235, 230, 231, 1); border-radius: var(--brdr_rds_0x5); background: rgba(255, 255, 255, .3); box-shadow: inset 0 0px 3px rgba(0, 0, 0, 0.1);}
.contact_form_card textarea{padding: 10px 20px; border: var(--border_2xl) rgba(235, 230, 231, 1); border-radius: var(--brdr_rds_1); background: rgba(255, 255, 255, .3); box-shadow: inset 0 0px 3px rgba(0, 0, 0, 0.1);}
/* ----------------------------------------------------------------- Products --------------------------------------------------------- */
/* Steel Grey css */
.product_card{background: rgba(255, 255, 255, .7); backdrop-filter: blur(9px);margin-top: 4rem; margin-bottom: 3rem;}
.bg-product{ background:url('../img/backgrounds/SRAI-BG-Marble.jpg');background-size:cover; background-repeat:no-repeat; background-attachment: fixed; background-position: center; }
/* ----------------------------------------------------------------- Company ------------------------------------------------------------------- */
/* About Us css */
.about_us_cntnt{margin-top: 30rem;}
.blur_bg{background: rgba(255, 255, 255, .65); backdrop-filter: blur(40px);}
/* Footer css */
.footer_tags_lst span{background: rgba(255, 255, 255, .1); padding: 2px 17px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50px; font-size: var(--font_size_sm); backdrop-filter: blur(12px); margin-bottom: 5px;}
.footer_menu_items a{color: #fffc; display: block; padding: 10px 10px; text-decoration: none;}
.footer_menu_items a:hover{color: #fff; background: rgba(207, 207, 207, .2); border-radius: 10px; border: 2px solid var(--border_2xl); box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.3);}
.footer_contact_info a{color: #fffc; display: block; padding: 8px 0; margin-bottom: 8px;}
.footer_contact_info a:hover{color: #fff;}
/* Social Media */
.social_media a{margin-right: 10px; padding: 10px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(12px); color: #fff; border-radius: 6px;     border: 1px solid rgba(255, 255, 255, .2);}
.social_media a:hover{background: rgba(0, 0, 0, 0.1);}
/* max-width Media Queries */
@media (max-width: 576px){
    
}

@media (max-width: 768px){
    .banner_content h1{font-size: var(--font_size_lg); font-family: 'Roboto_Regular';}
    .banner_content p{font-size: var(--font_size_md); font-family: 'Roboto_Regular_light'}
    .sticky-breadcrumb h1{font-size: var(--font_size_md);}
    .sticky-breadcrumb ol{font-size: var(--font_size_xsm);}
    .about_us_cntnt{margin-top: 10rem !important;}
}

@media (max-width: 992px){
    .about_us_cntnt{margin-top: 10rem !important;}
    
}

@media (max-width: 1200px){
    .about_us_cntnt{margin-top: 20rem;}
    
}

/* min-width Media Queries */

/* @media (min-width: 576px){
    
} */


/* @media (min-width: 768px){
    
} */

@media (min-width: 992px){
    .navbar .container {
        align-items: flex-start;
    }
    .navbar-collapse {
        width: 100%;
    }
}

/* @media (min-width: 1200px){
    
} */
/* Buttons */
/* .btn_primary{} */
.knw_more_btn{background: var(--primary_color); color: #fff; padding: 7px 20px; border: var(--border_1) var(--primary_color); border-radius: var(--brdr_rds_0x5); font-size: var(--font_size_sm) !important;}
/* Font-Family */
.roboto{font-family: 'Roboto_Regular'}
.roboto_bold{font-family: 'Roboto_Regular_bold'}
.roboto_light{font-family: 'Roboto_Regular_light'}
.roboto_thin{font-family: 'Roboto_Regular_thin'}
/* Texts */
.text_primary{color: var(--primary_color);}
.text_white_80{color: var(--text_white_80);}
.running_txt_secondary{color: var(--gray_medium_color);}
.running_txt_primary{color: var(--gray_dark_color);}
/* Font Sizes */
.fs_sm{font-size: var(--font_size_sm);}     /* 14px */
.fs_md{font-size: var(--font_size_md);}
.fs_lg{font-size: var(--font_size_lg);}     /* 18px */
.fs_2lg{font-size: var(--font_size_2lg);}   /* 20px */
.fs_xl{font-size: var(--font_size_xl);}
.fs_xxl{font-size: var(--font_size_xxl);}   /* 32px */
.fs_xxxl{font-size: var(--font_size_xxxl);}
/* Borders */
.border_1{border: var(--border_1);}
.border_2{border: var(--border_2xl);}
.border_3{border: var(--border_3x1);}
/* Border colors */
.border_color_gray{border-color: #4b77ff33;}
/* Border Radius */
.brdr_rds_0x5{border-radius: var(--border_0x5);}
.brdr_rds_1{border-radius: var(--brdr_rds_1);}
.brdr_rds_1x5{border-radius: var(--brdr_rds_1x5);}
.brdr_rds_2{border-radius: var(--brdr_rds_2);}
.brdr_rds_2x5{border-radius: var(--brdr_rds_2x5);}
/* Paddings */
.p_1{padding: var(--padding_1);}
.p_1x5{padding: var(--padding_1x5);}
.p_2{padding: var(--padding_2);}
.p_2x5{padding: var(--padding_2x5);}
.p_3{padding: var(--padding_3);}
/* Backgrounds */
.bg_primary{background-color: var(--primary_color);}