﻿/*
Template Name: Art Web
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/
/*********************center_home****************/
.carousel-caption{
text-align:left;
background-color: rgba(0, 0, 0, 0.7);
padding:200px 150px;
bottom:0;
left:0;
width:100%;
height:100%;
color:#fff;
 }
.carousel-caption p{
width:45%;
 }
.carousel-indicators{
bottom:0; 
 }
.center_home .carousel-indicators [data-bs-target] {
 background-color: #a81c51;
}

/*********************center_home_end****************/

/*********************port****************/
.port_2 .nav-tabs .nav-link{
color:#fff;
border:1px solid #323131;
display:block;
margin-left:8px;
margin-right:8px;
border-radius:5px; 
padding: 8px 20px;
text-transform:uppercase;
font-size:15px;
 }
.port_2 .nav-tabs .nav-link:hover{
background:#a81c51;
color:#fff; 
border:1px solid #a81c51;
 }
.port_2 .nav-tabs .nav-link.active{
background:#a81c51;
color:#fff; 
border:1px solid #a81c51;
 }
 
#folio {
background-color: #cccccc;

}
#folio .modal-dialog {
max-width: 700px;
}
.folio_1im2 ul li a{
border:1px solid #fff;
width:50px;
height:50px;
border-radius:50%;
line-height:48px;
display:block;
 }
.folio_1im2 ul  a:hover{
background:#fff;
color:#a81c51; 
 }
.folio_1im2{
background:#a81c51c4;
display:none;
 }
.folio_1im3{
background:#a81c51c4;
display:block; 
 }
.folio_1im:hover .folio_1im2{
display:block; 
 } 
.folio_1im:hover .folio_1im3{
display:block; 
 }
.folio_1im1 img{
border:5px solid #fff; 
 }
/*********************port_end****************/

/*********************blog****************/
.bloh_h1r{
padding:65px 100px 0px 100px; 
 }
 
.frame_1r .nav-tabs .nav-link{
color:#fff;
border:1px solid #a81c51;
display:block;
margin-left:5px;
margin-right:5px;
border-radius:0; 
padding: 8px 16px;
text-transform:uppercase;
font-size:14px;
background:#a81c51;
 }
.frame_1r .nav-tabs .nav-link:hover{
background:#fff;
color:#a81c51; 
border:1px solid #fff;
 }
.frame_1r .nav-tabs .nav-link.active{
background:#fff;
color:#a81c51; 
border:1px solid #fff;
 }
.frame_1r{
padding-top:100px; 
 }
.bloh_h1l img{
min-height:420px; 
 }
/*********************blog_end****************/


@media screen and (max-width : 767px){
.center_home img{
min-height:350px; 
 }
.carousel-caption {
text-align: center;
left:0;
width:100%;
bottom:0;
padding:10px;
}
.carousel-caption .font_60{
font-size:28px; 
 }
.carousel-caption h4{
font-size:20px; 
 }
.carousel-caption p{
font-size:14px;
text-align:left;
width:100%; 
 }
 
.port_2 .nav-tabs li {
margin-bottom:8px; 
 }
.port_2 .nav-tabs  {
justify-content: left!important;
 }
.folio_main  {
margin-top:15px; 
 }
.bloh_h1r {
padding:30px 15px; 
 }
.bloh_h1r p{
text-align:left;
 }
.bloh_h1l{
margin-bottom:15px; 
 }
.frame_1li1{
margin-top:15px; 
 }
.frame_1r {
padding-top:15px;
}
.frame_1r p{
text-align:left;
 }
.frame_1r .nav-tabs li {
margin-bottom:8px; 
 }
.frame_1r .nav-tabs  {
justify-content: left!important;
 }
 }


@media (min-width:576px) and (max-width:767px) {
.folio_1im1 img{
height:auto; 
 }

 }
@media (min-width:768px) and (max-width:991px) {
.center_home img{
min-height:500px; 
 }
.carousel-caption .font_60{
font-size:45px; 
 }
.carousel-caption {
padding: 100px 100px;
}
.carousel-caption p{
width:60%;
}
.bloh_h1l img{
min-height:420px; 
 }
.bloh_h1r {
padding:30px;
}
.frame_1r {
padding-top:0;
}
.frame_1r .nav-tabs li {
margin-bottom:8px; 
 }

 }

@media (min-width:992px) and (max-width:1200px) {
.carousel-caption{
padding:100px 100px;
 }
.center_home img{
min-height:550px; 
 }
.bloh_h1l img{
min-height:420px; 
 }
.bloh_h1r {
padding:50px 30px;
}
.frame_1r {
padding-top:0;
}
.frame_1r .nav-tabs li {
margin-bottom:8px; 
 }
 }
@media (min-width:1201px) and (max-width:1255px) {

 }


.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #03b5d2;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 1em;
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: black;
  outline: none;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: #FFFFFF;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 200;
  margin: 1em 1em;
  color:black;
}

.hero {
  background: url('img/high-profile-escort-banner.html') no-repeat center center/cover;
  color: white;
  text-align: center;
  padding: 100px 20px;
}
