/*
Theme Name: Roma Jewellers
Author: Russell Nagel
Author URI: www.lionmarketing.com
Description: Theme Created For Roma Jewellers
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: Roma Jewellers
*/

/*-----------------------------------*/
/*------- Global Styles Start -------*/
/*-----------------------------------*/

#standard-page .vp-portfolio__item-meta-excerpt{font-size: 14px;}
#standard-page .vp-portfolio__item-meta{padding: 7px;}
#standard-page .vp-portfolio__item-meta h2{margin-bottom: 10px;}

.extra-pad{padding: 6% !important;}

hr.small-gold {
  max-width: 60px;
  border: 2px solid #a0791a;
  opacity: 1;
 }
 
p, h1, h2, h3, h4, h5, h6, a, li{font-family: 'Open Sans', sans-serif;}

.text-gold{color: #a0791a !important;}
.text-dgrey{color: #1a1a1a !important;}
.text-white{color: white !important;}

.bg-gold{background-color: #a0791a !important;}
.bg-goldop{background-color: rgba(160,121,26,0.8) !important;}
.bg-dgrey{background-color: #1a1a1a !important;}
.bg-dgreyop{background-color: rgba(26,26,26,0.8) !important;}
.bg-grey{background-color:#eaeaea};

.heading-hr{
  border: 2px solid #a0791a;
  opacity: 1;
  max-width: 60px !important;
  margin-left: 15px;
  border: 2px solid #a0791a;
}

.main-btn{
  background: #a0791a;
  padding: 10px 50px;
  display: inline-block;
  max-width: fit-content;
  margin: 10px 20px;
  border-radius: 25px;
  color: white;
  text-decoration: none;
}
.main-btn:hover{
  background: #1a1a1a;
  color: white;
}

#material-section .slide-content button{
  background: white;
  border: white;
  color: black;
  font-weight: bold;
}

#material-section .slide-content button:hover{
  background: black;
  color: white;
}

.accordion-button{font-size: 20px !important;}

/*------- Global Styles End ---------*/

/*-----------------------------------*/
/*----- Front Page Styles Start -----*/
/*-----------------------------------*/


.accordion-button:not(.collapsed) i{
  rotate: 90deg !important;
}

.accordion-button i{
  position: absolute;
  left: 0;
  rotate: 0deg !important;
  color: #a0791a;
  transition: ease-in-out 200ms;
  padding-right: 5px;
}

.accordion-button:not(.collapsed)::after,
.accordion-button::after {
display: none;}
.accordion-header button:nth-child(1) {
  padding-left: 30px !important;
}

#accordionServices .accordion-button:focus, 
#accordionServices .accordion-button,
#diamonds .accordion-button:focus, 
#diamonds .accordion-button{
    padding: 10px;
  color: black;
  background: none;
  border-top: 1px solid rgba(0,0,0,0.2);
}
/* #accordionServices .accordion-button:focus,
#accordionServices .accordion-button.show{
  font-weight: bold;
} */
.accordian-images{position: relative;}
.accordian-images .accordion-collapse{
  height: 100%;
  background-size: cover;
  background-position: center center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100% !important;
  width: 100% !important;
}
.accordian-images .accordion-collapse.collapse{
  opacity: 0;
  transition: all 200ms;
}
.accordian-images .accordion-collapse.collapse.show{opacity: 1;}


div.vp-portfolio__items-arrow:nth-child(2),
div.vp-portfolio__items-arrow:nth-child(3) {
  background: black;
  color: #a0791a;
  opacity: 1;
}


.wp-block-button__link:hover {
  background-color:white !important;
  color: black !important;
 }
 
#header-banner {
  background-size: cover;
  background-position: center;
}
#header-banner .row{min-height: 90vh;}

/*----- Front Page Styles End -------*/

/*-----------------------------------*/
/*----- Single Post Styles Start -----*/
/*-----------------------------------*/

#standard-post .post-image{
  background-position: center;
  background-size: cover;
  padding: 20%;
}

/*----- Front Post Styles End -------*/

/*-----------------------------------*/
/*----- Single Page Styles Start -----*/
/*-----------------------------------*/

.gallery-menu li{
  font-size: 20px;
  margin: 0 auto;
  padding: 10px;
  border-bottom: 3px solid rgba(0,0,0,0);
}
.gallery-menu li:hover,
.gallery-menu .current-menu-item{
  border-bottom: 3px solid #a0791a;
}

#standard-page-back {
  background-image:url(http://localhost:8888/jewel/wp-content/uploads/2023/05/shutterstock_1567363804.jpg);
  min-height: 50vh;
  background-position: center;
  background-size: cover;
  position: relative;
 }

 #standard-page-back .black-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
 }
 
 /*----- Single Page Styles End -------*/

/*-----------------------------------*/
/*----- Header Styles Start -----*/
/*-----------------------------------*/

#min-heading #navbarNav a{
  color: white;
  text-decoration: none;
  margin: 0 20px;
  padding: 10px 0;
  display: block;
  border-bottom: 2px solid rgba(0,0,0,0);
}
#min-heading #navbarNav a:hover,
#min-heading #navbarNav .active a{
  border-bottom: 2px solid #a0791a;
}

#menu-item-64 > a:nth-child(1) {text-decoration: none !important;}

.menu-item-has-children:hover .sub-menu{display: block;}
.menu-item-has-children .sub-menu {
  padding: 0;
  position: absolute;
  display: none;
  list-style: none;
  z-index: 99;
}

.menu-item-has-children .sub-menu a{
  padding: 8px 15px !important;
  display: block;
  background: white;
  color: black !important;
  border-bottom: 1px solid black;
}


.menu-item-has-children .sub-menu a:hover{
  background: #a0791a;
  color: #eaeaea !important;
}


/*----- Header Styles End -------*/

/*-----------------------------------*/
/*----- Expertise Styles Start ------*/
/*-----------------------------------*/

#modals .modals.show{ display: flex !important; }

#material-section img{
  height: auto;
  max-width: 100%;
}

#material-section .slide-content{
  position: absolute;
  /* top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: ease-in-out all 300ms;
}
#material-section .slide-content:hover{opacity: 1;}

#diamonds .diamond-image{
  background-size: cover;
  background-position: center center;
}


#occasions img{
  max-width: 80%;
  height: auto;
}
#occasions .occasion-text{z-index: 99;}
/*----- Expertise Styles End --------*/

/*-----------------------------------*/
/*----- History Styles Start -----*/
/*-----------------------------------*/

.history-full .row div{
  min-height: 60vh;
  background-position: center;
  background-size: cover;
}



/*----- History Styles End -------*/

/*-----------------------------------*/
/*----- Footer Styles Start -----*/
/*-----------------------------------*/

#main-foot a{
  color: white;
  text-decoration: none;
}
#main-foot a:hover{
  text-decoration: underline;
}
.foot-logo > a:nth-child(1) > img:nth-child(1) {
  max-width: 100%;
 }
 
/*----- Footer Styles End -------*/


/*-----------------------------------*/
/*----- Responsive Styles Start -----*/
/*-----------------------------------*/

@media only screen and (max-width: 991px){

  .section-right{background-color: white !important;}
  .section-right h2, .section-right p{ color: black !important;}
  .section-left {
    background-color: #1a1a1a !important;
    color: white;
  }
  #standard-page-back{min-height: 30vh;}
  #standard-page-back .page-title {
    padding: 10px;
    text-align: center;
   }
   
}

@media only screen and (max-width: 767px){

  #material-section .slide-content {
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: 8px;
  }

  #menu-header-menu {
    background: #1a1a1a;
    z-index: 99;
    position: relative;
   }
   
  #menu-header-menu {text-align: end;}
  #min-heading #navbarNav a{
    font-size: 22px !important;
    padding: 5px 0;
  }
  #min-heading #navbarNav .sub-menu{
    position: relative;
    display: block;
  }

}

@media only screen and (max-width: 667px){

  .diamond-image {min-height: 300px;}
   
  #material-section img {
    height: auto;
    max-width: 70%;
  }
  
  #material-section .slide-content {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: relative;
    width: 70%;
    margin: auto;
    opacity: 1;
  }

}

@media only screen and (max-width: 575px){
  .history-full .row div {min-height: 40vh;}
  .footer-nav{text-align: center;}
}

/*------ Responsive Styles End ------*/