/** *********************************************************************************************** **/  
/** navbar CSS DEFINITIONS ************************************************************************ **/  
.navbar .navbar-brand > img {height:33px;}
.navbar .navbar-toggler {width:35px;height:35px; text-align:center;padding:0;}
.navbar [aria-expanded="true"].navbar-toggler .fa-solid::before {content:"\f00d";} 

.navbar .dropdown-menu li:not(:first-child) {
  border-top: dashed 1px #666666;
}
.navbar .active {background:#f0f0f0;}
.navbar .nav-item:hover {background:#f0f0f0;}

/** Large devices (desktops, 992px and down) **/
@media (max-width: 992px) { 
  .navbar .nav-item { border-top: dashed 1px #666666; }
  .navbar .dropdown-menu { 
    --bs-dropdown-border-radius: none; 
    --bs-dropdown-border-width: none;
    border-top: dashed 1px #666666;
    text-align: center;
  }
  
}


/** navbar CSS DEFINITIONS ************************************************************************ **/  
/** *********************************************************************************************** **/  




/** *********************************************************************************************** **/  
/** app icon link CSS DEFINITIONS ***************************************************************** **/  
.app_icon { display: flex !important; align-items: center !important; } /** .d-flex .align-items-center **/
.app_icon::before {
  content:' ';
  display:inline-block;
  width: 25px;
  height:25px;
  margin-right:0.5em;
  background:transparent url(https://www.perfect365.com/images/photo_perfect365_icon.png) left center/auto 100% no-repeat;
}
.app_video::before {background-image:url(https://www.perfect365.com/images/video_perfect365_icon.png);} 
.app_studio::before {background-image:url(https://www.perfect365.com/images/studio_perfect365_icon.png);} 
.app_ai::before {background-image:url(https://www.perfect365.com/images/ai_perfect365_icon.png);} 

.app_web_world::before {background-image:url(https://www.perfect365.com/images/ai_travel_icon.png);} 
.app_web_style::before {background-image:url(https://www.perfect365.com/images/ai_style_icon.png);} 
.app_web_look::before {background-image:url(https://www.perfect365.com/images/ai_perfect365_icon.png);} 
.app_web_skin::before {background-image:url(https://www.perfect365.com/images/skin_softener_perfect365_icon.png);} 
.app_web_hair::before {background-image:url(https://www.perfect365.com/images/hair_dye_perfect365_icon.png);} 
/** app icon link CSS DEFINITIONS ***************************************************************** **/  
/** *********************************************************************************************** **/    

/** *********************************************************************************************** **/  
/** footer related CSS DEFINITIONS **************************************************************** **/  
footer {background:black url(https://www.perfect365.com/images/footer_bg.png) 0 0/auto 100%  repeat;}
footer .footer_logo {width:100%;max-width:200px;}
footer .app_wrapper {max-width:315px;}   
footer .app_wrapper a {
  border-radius: var(--bs-border-radius-pill) !important; /** rounded-pill **/

  background-color:#333333;
  
  padding:0.3em 0.6em 0.3em 1em;
     
}   
@media (min-width: 768px) { /** Medium devices (tablets, 768px and up) **/
  footer .app_wrapper {max-width:650px;} 
}
/** footer related CSS DEFINITIONS **************************************************************** **/  
/** *********************************************************************************************** **/  





    /** *********************************************************************************************** **/ 
    /** social_wrapper CSS DEFINITIONS **************************************************************** **/ 
    .social_wrapper .fa-circle {color:#ffffff;}       /** default circle color **/
    .social_wrapper .fa-brands, .social_wrapper .fa-solid:not(:first-child) {color:#000000;} /** default icon color **/
    
    .social_wrapper .instagram .fa-circle {	
      background: linear-gradient(135deg, #405DE6, #833AB4, #FD1D1D, #fccb0a);
      -webkit-text-fill-color: transparent; /** necessary to cap the graident area within the circle **/
      -webkit-background-clip: text;        /** necessary to cap the graident area within the circle **/
    }      
    .social_wrapper .instagram .fa-brands {color:#ffffff;}  
    
    .social_wrapper .facebook .fa-circle {color:#0575ec;}       
    .social_wrapper .facebook .fa-brands {color:#ffffff;}  
    
    .social_wrapper .youtube .fa-circle {color:#fe0000;}       
    .social_wrapper .youtube .fa-brands {color:#ffffff;}  
    /** social_wrapper CSS DEFINITIONS **************************************************************** **/  
    /** *********************************************************************************************** **/  




    /** *********************************************************************************************** **/ 
    /** div_laurel CSS DEFINITIONS ******************************************************************** **/  
    .div_laurel {width:265px;text-align:center;display:inline-block;}  
    
    .div_laurel span {
      height:80px;
      width:calc(100% - 60px);
      display: flex;
      align-items: center;
      float:left;
    }  
    .div_laurel::before, .div_laurel::after {
      content:"";
      height:80px;
      width:30px;
      background:transparent url(https://www.perfect365.com/images/laurel_left.png) right center/15px auto no-repeat;
      display:block;
      float:left;
    }  
    .div_laurel::after {
      background:transparent url(https://www.perfect365.com/images/laurel_right.png) left center/15px auto no-repeat;
    }  
    /** div_laurel CSS DEFINITIONS ******************************************************************** **/  
    /** *********************************************************************************************** **/ 







.icon_user {width:60px;height:60px;}







.bg_1 {
  background:transparent url(bg_1.jpg) top center/cover no-repeat;
}

.bg_2 {
  background: linear-gradient(0deg,rgba(255,255,255,0.85),rgba(255,255,255,0.85)),
  url(https://images.pexels.com/photos/220118/pexels-photo-220118.jpeg?auto=compress&cs=tinysrgb&w=600&h=600&dpr=2) center center/cover no-repeat; 
}

.bg_hero {
  background: linear-gradient(to bottom,rgba(255,255,255,0.8), rgba(255,255,255,0)),
  url(bg_hero_designai.jpg) center center/cover no-repeat;
}  


.bg_gradient_image {
  background: linear-gradient(0deg,rgba(255,255,255,0.75),rgba(255,255,255,0.75)),
  url(https://images.pexels.com/photos/7134986/pexels-photo-7134986.jpeg?auto=compress&cs=tinysrgb&w=800&h=800&dpr=2) left top/100% 100% no-repeat;  
}


.bg_fixed { background-attachment: fixed !important;}
    
.bg_move_corners { 
  background-size:200% 200% !important; 
  animation: animate_bg_move_corners 60s ease infinite;   
} 
@keyframes animate_bg_move_corners {
  0% {background-position: left top;}
  25% {background-position: right top;}
  50% {background-position: right bottom;}  
  75% {background-position: left bottom;}  
  100% {background-position: left top;}    
}



.accordion-button:not(.collapsed),
.accordion-collapse.collapsing,
.accordion-collapse.collapse.show {
  background-color:#EBF6F9;
    box-shadow:unset;
}


.img_hover_zoom img { 
  transition: all .3s ease;
}

.img_hover_zoom:hover img {
  transform: scale(1.2);
}






.txt-primary_2 {
  background-image: linear-gradient(to right, #fcd78c, #ca962d, #fbdfa6); 

  -webkit-background-clip: text;  /* Clip the background to the text shape for WebKit browsers (Chrome, Safari) **/
  background-clip: text;          /* Clip the background to the text shape for none WebKit browsers **/

  color: transparent; /* Make the text color transparent to reveal the background gradient */ 
     
}





.txt-primary  {
  background: linear-gradient(45deg, #ca962d, #fcd78c, #ca962d); /* Define your gradient colors */
  -webkit-background-clip: text; /* Clip background to text shape */
  -webkit-text-fill-color: transparent; /* Make text color transparent to reveal background */
  background-size: 300% 100%; /* x, y Make background wider than text for animation, necessary for chrome */
  animation: animate_bg_x 6s linear infinite alternate; /* Animate the background position */
  color: transparent; /* Make the text color transparent to reveal the background gradient */ 
}








 



.btn-white {
  background: linear-gradient(45deg, #ca962d, #fcd78c, #ca962d); /* Define your gradient colors */
  background-size: 300% 100%; /* Make the background wider than the container */
  animation: animate_bg_x 6s linear infinite alternate; /* Animate the background position */  
}
.btn-white:hover {opacity:1;}

 @keyframes animate_bg_x {
  0% {
    background-position: 0% center; /* Start position (left) */
  }
  100% {
    background-position: 100% center; /* End position (right) */
  }
}