/*making all images responsive*/
img
{
    width: 100%;
    height: auto;
}

/*center classes borrowed from Thimble framework*/
.align-center
{
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
            align-self: center;
}
.justify-center
{
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
}
/*grey outlines added for display*/
.col-sm,
.col,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-md-auto,
.col-lg-2,
.col-md-4,
.col-md-8
{
    min-height: 100px;

    border: thin solid #999;
    border-radius: 4px;
}


/*no gutters*/
.row.no-gutters
{
    margin-right: 0;
    margin-left: 0;
}
.row.no-gutters > [class^='col-'],
.row.no-gutters > [class*=' col-']
{
    padding-right: 0;
    padding-left: 0;
}

/*typographic styling*/
.cta
{
    padding: 50px;

    text-align: center;

    background-color: aqua;
}
.huge
{
    font-size: 100px;

    text-align: center;

    color: white;
}

/* style for drop-menu here, my code start here */

/* carousel section */
.carousel-inner img {
      width: 100%;
      height: 100%;
  }


/*the hero section
#hero
{
    display: flex;

    min-height: 800px;

    background-image: url(../img/store.jpg);
    background-repeat: no-repeat;
    background-size: cover;
} */

#newarrivals
{
    height: 300px;

    background: #3a506b;
}

/* test for text overlay
.thumbnail {
    position: relative;
}

.caption {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
}
/* end test */

.subheading
{
    display: block;

    letter-spacing: 2px;

    color: #0b132b;
}
h4
{
    overflow: hidden;

    padding: 20px;

    text-align: center;
    text-transform: uppercase;
}
h4:before,
h4:after
{
    position: relative;

    display: inline-block;

    width: 50%;
    height: 1px;

    content: '';
    vertical-align: middle;

    background-color: #3a506b;
}
h4:before
{
    right: .5em;

    margin-left: -50%;
}
h4:after
{
    left: .5em;

    margin-right: -50%;
}

#footer
{
    height: 500px;
		color: #E07A5F;
    background: #3D405B;
		font-size: 14px;
		text-align: center;
		line-height: 2;
}
.history
{
		font-size: 14px;
		line-height: 1.5;
		text-indent: 50px;
		text-align: justify;
		color: #F4F1DE;
}
.footer-links {
	color: #81B29A;
	font-size: 14px;
	text-transform: capitalize;
}
.info-list a{
	color: #F4F1DE;
	text-decoration: none;
	font-size: 12px;
}
/* socail icons style */
.fa {
	padding: 10px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.5;
}

.fa-facebook {
  background: #E07A5F;
  color: white;
}
.fa-twitter {
	background: #E07A5F;
  color: white;
}
.fa-google {
	background: #E07A5F;
  color: white;
}
.fa-instagram {
	background: #E07A5F;
  color: white;
}
.fa-youtube {
	background: #E07A5F;
  color: white;
}



/*hover images captions. Replace with your images */
.title-arch
{
    font-size: 22px;

    margin: 50px 0;

    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.project
{
    float: left;

    width: 100%;
    height: 500px;
    padding: 0 !important;

    background-image: url(../img/trend1.jpg);
    background-position: center;
    background-size: cover;
}
.project-2
{
    /* background-image: url(https://image.freepik.com/free-vector/abstract-geometric-background-design_1045-764.jpg); */
    background-image: url(../img/trend2.jpg);
}
.project-3
{
    /* background-image: url(https://image.freepik.com/free-vector/abstract-geometric-background-design_1045-764.jpg); */
    background-image: url(../img/trend3.jpg);
}
.project-4
{
    /* background-image: url(https://image.freepik.com/free-vector/abstract-geometric-background-design_1045-764.jpg); */
    background-image: url(../img/trend4.jpg);
}
.project-hover
{
    width: 100%;
    height: 100%;
    padding: 40% 30px !important;

    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    opacity: 0;
    color: #fff;
    background-color: rgba(86, 82, 2, .7);
}
.project-hover hr
{
    width: 0;
    height: 30px;

    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    border: 0;
    background-color: rgba(255, 255, 255, 1);
}
.project-hover a
{
    line-height: 40px;

    padding: 2px 22px;

    -webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
         -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;

    color: rgba(255, 255, 255, 1);
    border: 2px solid rgba(255, 255, 255, 1);
}
.project-hover a:hover
{
    color: rgba(51, 51, 51, 1);
    border-color: rgba(51, 51, 51, 1);
    background-color: #fff;
}
.project:hover .project-hover
{
    opacity: 1;
}
.project:hover .project-hover hr
{
    width: 100%;
    height: 5px;
}
/*---My code start here---*/
.nav-links
{
    display: inline-block;

    padding: .5em 1em;

    text-decoration: none;

    color: white;
}