:root { --black-clr: #000; --white-clr: #fff; --theme-clr: #874cf6; --link-clr: #ffd700; }
@font-face { font-family: 'Lora'; src: url('../fonts/Lora-Bold.woff2') format('woff2'), url('../fonts/Lora-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/Lora-SemiBold.woff2') format('woff2'), url('../fonts/Lora-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/Lora-Medium.woff2') format('woff2'), url('../fonts/Lora-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/Lora-Regular.woff2') format('woff2'), url('../fonts/Lora-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
body { padding: 0; margin: 0; font-size: 16px; font-family: 'Lora'; }
ul { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; }
img { max-width: 100%; }
p { color: #7c6f6f; font-size: 16px; margin-bottom: 10px; font-weight: normal; }
strong { color: var(--black-clr); }
.teb-heading { color: var(--theme-clr); font-weight: bold; font-size: 20px; }
.size-text { color: var(--black-clr); font-weight: bold; }
.check-w-50 { width: 50%; float: left; margin-bottom: 5px; }
.ditils-click a { font-size: 22px; color: var(--black-clr); }
.ditils-click a:hover { color: var(--link-clr); }
.form-check-input[type=checkbox] { border: 1px solid #ccc; border-radius: 0; outline: none; box-shadow: none; }
.insert-heading { font-size: 18px; margin-bottom: 10px; font-weight: 600; }
.item_coad { font-size: 18px; }
.p-tag { font-size: 18px; margin-bottom: 10px; }
.personalization { font-size: 24px; color: var(--black-clr); font-weight: bold; }
.p-tag .price { padding: 0 2px; }
.sub-heading {  color: var(--black-clr);  display: block; margin-top: 10px; font-size: 18px; }
.color-prod { margin-bottom: 5px; }
/*=========================header-css=========================*/
.header-wrapper {  background: var(--theme-clr); }
.header-wrapper .navbar-nav li { margin-right: 20px; position: relative; overflow: hidden; }
.header-wrapper .navbar-nav li:last-child { margin-right: 0; }
.header-wrapper .navbar-nav li a { font-size: 16px; color: #f9f5f5; text-transform: uppercase; font-weight: bold; position: relative; padding-top: 15px; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; display: block; }
.header-wrapper .navbar-nav li.active a { color: var(--link-clr); }
.header-wrapper .navbar-nav li a:before { left: -100%; opacity: 0; z-index: 1; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; content: ""; background: var(--link-clr); width: 100%; height: 3px; top: 0; position: absolute; }
.header-wrapper .navbar-nav li.active a:before { opacity: 1; left: 0; content: ""; background: var(--link-clr); width: 100%; height: 3px; top: 0; position: absolute; }
.header-wrapper .navbar-nav li:hover a::before { left: 0; opacity: 1; }
/*=========================home-page=========================*/
.index_banner .container{overflow: hidden;}
.item-card .container{overflow: hidden;}
.index_banner { background-image: url(../images/banner-bg.jpg); position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; }
.index_banner::before { background: rgba(0, 0, 0, 0.7); height: 100%; width: 100%; position: absolute; content: ""; }
.index_banner .row { background-color: rgba(255, 255, 255, .5); }
.card-img-box { height: 270px; align-items: center; display: flex; justify-content: center; }
.card.custom-card { height: 100%; }
.site-namelogo {  padding: 50px 10px; position: relative; }
.site-namelogo h1 { font-size: 42px; font-weight: bold; color: var(--link-clr); margin-bottom: 15px; }
.site-namelogo h5 { font-size: 22px; color: var(--white-clr); font-weight: 400; }
.site-heading { margin-left: 30px; position: relative; }
.site-heading h2 { font-size: 26px; font-weight: 500; color: var(--white-clr); position: relative; margin-bottom: 20px; font-style: italic; }
.site-heading p { font-size: 18px; color: #F5F5E7;  font-style: italic; line-height: 30px; }
.site-heading p a { color: var(--link-clr); }
.item-card .card .card-heading { color: var(--white-clr); font-size: 18px; background: var(--theme-clr); padding: 10px; }

/*=========================inner-page-css=========================*/
.product-page-title {font-size: 36px;font-weight: bold;margin-bottom: 50px;}
.product-items .img-box { display: flex; align-items: center; justify-content: center; height: 270px; }
.product-wrapper .product-items { scale: .95; background: var(--white-clr); transition: .4s; box-shadow: 0 0 5px 0 #ccc; border: 1px solid transparent; }
.product-wrapper .product-items:hover { scale: 1.01; border-color: var(--black-clr); }
.shado-box {display: inline-block;width: 100%;margin-top: 20px;padding: 20px 15px 30px;box-shadow: 0 0 5px 0 #ccc;-webkit-box-shadow: 0 0 5px 0 #ccc;background: var(--white-clr);}
.product-wrapper h4 { color: var(--theme-clr); font-size: 30px; margin-bottom: 10px; font-weight: 600; }
.product-content .productinfo-descript { font-size: 20px; margin-bottom: 5px; font-weight: 600; margin-top: 0; }
.product-content .check-selector label {  font-size: 16px; }
.product-wrapper table { width: 100%; text-align: center; background: var(--white-clr); line-height: 40px; margin: 20px 0; }
.product-wrapper table tr th { border: 1px solid #ccc; color: var(--white-clr);font-weight: 600; text-transform: uppercase; background: var(--theme-clr); font-size: 16px; line-height: 30px; padding: 5px 10px; }
.product-wrapper table tr td { border: 1px solid #ccc; font-size: 16px; padding: 5px 10px; line-height: 30px; }
.form-group { display: inline-block; width: 100%; margin-bottom: 10px; }
.shado-box input.form-control.quantity {width: 30%;text-align: center;}
.shado-box .form-control {text-align: left; border: 1px solid #ccc; height: 50px; border-radius: 5px; box-shadow: none; float: left; margin-right: 20px;  }
.shado-box .form-control:focus { border-color: var(--black-clr); outline: none; box-shadow: none; }
.product-wrapper label { display: block; color: #7c6f6f; text-align: left; font-size: 16px; margin-bottom: 8px; font-weight: 600; }
.submit_btn { width: calc(70% - 20px); background: var(--white-clr); font-weight: 600; border-radius: 5px; text-transform: uppercase; transition: all 0.4s; border: 1px solid #ccc; color: var(--black-clr); font-size: 16px; height: 48px; }
.submit_btn:hover { background: var(--theme-clr); color: var(--white-clr); border-color: var(--theme-clr); }

/*=========================contact-us css=========================*/
.contact-page .contact-col { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; margin-bottom: 20px; }
.contact-page .contact-col .box { border: 1px solid #ccc; background: var(--white-clr); width: 24%; padding: 15px 10px; transition: .3s all ease-in; }
.contact-page .contact-col .box p { color: var(--black-clr); font-weight: 600; }
.contact-page .contact-col .box span, .contact-page .contact-col .box a { display: block; color: var(--theme-clr); margin-top: 5px; }
.contact-page .contact-col .box img.hover_img { display: none; }
.contact-page .contact-col .box:hover p, 
.contact-page .contact-col .box:hover a,
.contact-page .contact-col .box:hover span { color: var(--white-clr); }
.contact-page .contact-col .box:hover img { display: none; }
.contact-page .contact-col .box:hover { background: var(--theme-clr);  }
.contact-page .contact-col .box:hover img.hover_img { display: block; margin: 0 auto; }
.disclaimer-heading { font-size: 30px; font-weight: 600; }

/*=========================footer-css=========================*/
.footer { background: var(--black-clr);  }
.footer .f_title h3 { font-size: 30px; color: var(--link-clr); letter-spacing: 1.5px; margin-bottom: 15px; position: relative; font-weight: bold; }
.footer .f_title h3:after { background: var(--link-clr); content: ""; position: absolute; bottom: 8px; height: 3px; max-width: 120px; width: 100%; margin-left: 4px; }
.footer .f_title h6 { font-size: 16px; color: var(--white-clr); text-transform: capitalize; }
.footer .card_img ul li { margin-right: 5px; padding: 10px 5px; }
.footer .usapad-logo { background: var(--white-clr); max-width: 200px; padding: 20px 0; width: 100%; }
.footer .icon-box { display: flex;  margin-bottom: 15px; }
.footer .footer-card .fa-icon { color: var(--white-clr); margin-right: 10px; font-size: 22px; line-height: 1.25; }
.footer .icon-box .icon-text { color: var(--white-clr); font-size: 16px; transition: .2s; }
.footer .icon-box a.icon-text:hover { color: var(--link-clr); }
.footer .usapad-logo { background: var(--white-clr); width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; border-radius: 100%; padding: 6px; margin: 0 auto; }
@media (max-width:1199px) {
    .container { max-width: 100%; }
    .header-wrapper .navbar-nav li { margin-right: 15px; }
    .header-wrapper .navbar-nav li a { font-size: 14px; }
    .site-namelogo h1 { font-size: 30px; }
    .site-namelogo h5 { font-size: 18px; }
    .site-heading h2 { font-size: 24px; margin-bottom: 10px; }
    .site-heading p { font-size: 16px; }
}
@media (max-width:991px) {
    .p-tag { font-size: 16px; }
    .item_coad { font-size: 16px; }
    .shado-box input.form-control.quantity { width: 20%; }
    .site-heading { margin-left: 0; }
    .site-heading h2 { font-size: 20px; }
    .header-wrapper .navbar-nav li.active a:before { content: none; }
    .item-card .card .card-heading { font-size: 16px; }
    .footer .f_title h3:after { max-width: 70px; }
    .product-wrapper table tr th {  font-size: 13px; padding: 10px 6px; line-height: normal; }
    /*=========================mobile-nav-css=========================*/
    .header-wrapper .navbar-nav li a::before {display: none;}
    .header-wrapper .navbar-nav li.active a {color: #bba320;}
    .navbar.navbar-expand-lg.coustom-nav .navbar-collapse {position: absolute;padding: 0;z-index: 9999;top: 91px;right: -12px;align-items: baseline;background: var(--white-clr);color: var(--black-clr);width: 242px;}
    .header-wrapper .navbar-nav li { margin-right: 0; }
    .navbar-toggler { position: absolute; right: 0; top: -12px; border: none; background: var(--white-clr); padding: 5px 10px; border-radius: 4px; }
    .navbar-toggler:focus { box-shadow: none; }
    .header-wrapper ul.navbar-nav li:first-child a { border-top: none; }
    .header-wrapper ul.navbar-nav li a { padding: 10px 10px; display: block; border-top: 1px solid #ccc; font-weight: 500; color: var(--black-clr); }
    
}
@media (max-width:767px) {
    .check-w-50{width: 100%;}
    .personalization{font-size: 18px;}
    .site-namelogo{padding: 20px 0;}
    .site-namelogo h1{margin-bottom: 5px}
    .product-wrapper h4 { font-size: 26px; }
    .product-wrapper .product-items { margin-bottom: 25px; scale: 1; }
    .contact-page .contact-col .box { width: 48%; }
    .productinfo-descript { font-size: 18px; margin: 15px 0 15px;  margin-top: 0;}
    .footer .f_title h3 { font-size: 24px; }
    .footer .usapad-logo { margin: unset; }
}
@media (max-width:575px) {
    .contact-page .contact-col .box { width: 100%; }
}
@media (max-width:479px) {
    .product-wrapper table tr  td {  font-size: 14px; padding: 10px 6px; }
}

/*animation css*/
@keyframes fadeInUp {
    from { transform: translate3d(0, 50px, 0) }
    to { transform: translate3d(0, 0, 0); opacity: 1 }
}
@-webkit-keyframes fadeInUp {
    from { transform: translate3d(0, 50px, 0) }
    to { transform: translate3d(0, 0, 0); opacity: 1 }
}