/* google font poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ################## */
/* common resets */

body{
    font-family: 'Poppins', sans-serif;
 
}
html{
    scroll-behavior: smooth;
}
*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
  
    color: white;
    cursor: pointer;
}

:root{
    --main-color:#F25454;
    --sec-color:#F38383;
}


/* ###################### */
/* navbar customization */

.first .navbar-nav .nav-link{
    font-weight: 700;
    transition: 0.5s;
    color: white;
    font-size: smaller;
    margin-left: 15px;
}

.second .navbar-nav .nav-link{
    font-weight: 700;
    transition: 0.5s;
    color: black;
    font-size: smaller;
    margin-left: 15px;
}


.second .social a{
color: black;
}

.second {
    position: absolute;
    top: -700px;
    left: 0;
    width: 100%;
    z-index: 10;
    transition:.8s ;
}


 .navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{
    color: var(--main-color); 
}


 .navbar-toggler{
   all: unset;
}

.navbar-toggler:focus{
    box-shadow: none;
   
}


 .first .navbar-toggler{
    color: white;
    transition: 0.5s;
}

.second .navbar-toggler{
    color: black;
    transition: 0.5s;
}

 .navbar-toggler:focus ,.navbar-toggler:hover {
  
color: var(--main-color) !important;
   
}

.navbar .social li{
    transition: 0.5s;
}
.navbar .social li:hover a{
color: var(--main-color);
}

.custom-tooltip{
    --bs-tooltip-bg: var(--main-color);
    --bs-tooltip-color: var(--bs-white);
    
    --bs-tooltip-font-size:8px;
}

.navbar{
    transition: 1s; 
}
/* ###################### */
/*  Carousel customization*/

.home1{
background-image: url(../images/photo-4.jfif);
background-position: center;
background-size: cover;
height: 100vh;
}
.home2{
    background-image: url(../images/photo-11.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
 }
    

.home3{
        background-image: url(../images/photo-71.jpg);
        background-position: center;
        background-size: cover;
        height: 100vh;
}


.carousel h1{
   width: 55%;
  }


 .carousel{
    text-align: center;
 }

 .carousel-item h1{  
   left: 200% !important;
    transition: 1s;
 }
 .carousel-item.active h1 {  
   left:50% !important;
 }

/* icons */

.setting{
    position: fixed;
    top: 120px;
    left: 0;
    z-index: 1000;
    color: #fff;
    background-color: #333;
    font-size: 20px;
    border-radius: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.down{
    width: 26px;
    display: inline-block;
    height: 40px;
    border: 1px solid #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    z-index: 5;
    border-radius: 50px;
    transition: .3s;
}
.down::after{
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    background-color: white;
    border-radius: 50%;
    transition: 1s;
    position: absolute;
    left:50%;
    top:8px;
    transform: translateX(-50%);
    animation: move 1.5s linear infinite ;
    transition: .3s;
}

@keyframes move {
    0%{
     top:8px;
     opacity: 1;
    }
   100%{
     top:20px;
     opacity: 0;
    }
 
}

.down:hover{
    border-color: var(--main-color);
}
.down:hover::after{
    background-color: var(--main-color);
}
.carousel-control-next ,.carousel-control-prev{
    width: 0;   
    left:0;
    display: inline-block;
    opacity: 1;
}

.carousel-control-next{
    top: -22%;
    transition: 0.5s;
}
.carousel-control-prev{
    top:-5.5%;
    transition: 0.5s;
   
}
.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover{
    color: var(--main-color);
   
}
/* 
.next{
    z-index: 1;
    position: relative;
    width: 53.33px;
    height: 49.33px;
}
.next::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    transform-origin: center right;
    transform: scaleX(0);
    transition: transform 0.25s ease-in-out;
  }

 .next:hover {
    cursor: pointer;
  }
  
  .next:hover::before {
    transform-origin: center left;
    transform: scaleX(1);
  } */

  .prev{  border-radius: 0 0 5px 0;}
  .next{  border-radius: 0 5px 0 0;}

  .next ,.prev {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    z-index: 1;
    position: relative;
    transition: .3s;
  }
  .next:before ,.prev::before {
    
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: 0.3s ease-out;
   
  }
  .next:hover, .next:focus, .next:active  ,  .prev:hover, .prev:focus, .prev:active{
    color: var(--main-color);
  }
  .next:hover:before, .next:focus:before, .next:active:before , .prev:hover:before, .prev:focus:before, .prev:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }


/* ###################### */
/* starting */

.starting h1{
    color: #F2F2F2 !important;
}
.starting h2{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 85px;

}
.starting>span{
display: inline-block;
width: 40px;
height: 1px;
background-color: #333;
transition: 0.3s;
}

.starting:hover span{
    width: 60px;
}

/* ###################### */
/* about */

.progress{
    height: 5px;
   
}

.progress-bar{
    background-color: var(--main-color);
    width: 0;
    animation: progress1 5s ease-in-out forwards;
   
}
.about .text span{
    opacity: 0;
   animation: progress2 1s ease-in-out 4.7s forwards;
}

@keyframes progress1{
    0%{
        width: 0;
        
    }
    100%{
        width:""

    }
}

@keyframes progress2{
    0%{
       
        opacity: 0;
    }
    100%{
opacity: 1;
    }
}

.about .text p{
    margin: 5px;
    font-size: 14px;
}
.about .text p + span{
    font-size: 14px;
  color: #696464;
}
/* ###################### */
/* team */

.team .parent .layer{
    transition: 0.5s;
}
.team .parent:hover .layer{
    display: block !important;
}
.team .parent .image{
    overflow: hidden;
    border-radius: 5px;
}
.team .parent img{
  transition: 0.5s;
}
.team .parent:hover img{
    transform: scale(1.2);
}
.team .parent:hover h3{
    color: var(--main-color);
}

.ask a{
padding: 12px 20px;
border-radius: 4px;
transition: 0.5s;
}

.ask a:hover{
    background-color: var(--sec-color) !important;;
}

/* ###################### */
/* services  */

.services .col h3{
    transition: 0.4s;
}
.services .col:hover h3{
    color: var(--main-color);
}



/* ###################### */
/* client */

/* .client { */

/* } */
.client .carousel img{
border-radius: 50%;

}


.client .carousel h6{
    font-weight: 600;
    margin-top: 20px;
   
}


.client .carousel{
    font-size: small;
    color: #5f5e5e;
}


.client .carousel p{
    margin-top: 30px;
    width: 60%;
    margin-inline: auto;
    font-size:30px;
    color: #8f8c8c;
   
}
.client .carousel p::before{
    content: "\f10d"; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 5px; 
    color: #5f5e5e;
}

.client .carousel p::after{
    content: "\f10e"; 
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900;
    margin-right: 5px; 
    color: #5f5e5e;
}



.client .carousel-indicators [data-bs-target]{
  
    background-color: #333;
    width: 15%;
    height: 15%;
    border-radius: 50%;
}

.client .carousel-indicators{
    display: flex;
    align-items: center;
    position: absolute;
    top:-100%;
    flex-shrink: 0;
    margin-bottom: 80px;
    margin-top: 60px;
    overflow-x: hidden;
    width: 100%;
    margin: auto;
    
}

.client .carousel-indicators .active {
    width: 20% !important;
    height: 20%!important;
   

}


@media(max-width:767px){

    .client .carousel-indicators [data-bs-target]{
        width: 40px !important;
        height: 40px!important; 
    }
    .client .carousel-indicators .active {
        width: 60px !important;
        height: 60px!important;   
    }
    
}

@media(min-width:767px){
    .client .carousel-indicators [data-bs-target]{
        width: 80px !important;
        height: 80px!important; 
    }
    .client .carousel-indicators .active {
        width:120px !important;
        height:120px!important;   
    }
    
}


.indicator-1{
    background-image: url(../images/Bill\ Gates.jpg);
    background-position: center;
    background-size: cover;
}

.indicator-2{
    background-image: url(../images/MichaelDell.jpg);
    background-position: center;
    background-size: cover;
}


.indicator-3{
    background-image: url(../images/Warren\ Buffett.jpg);
    background-position: center;
    background-size: cover;
}


.indicator-4{
    background-image: url(../images/Jeff\ Bezos.jpg);
    background-position: center;
    background-size: cover;
}


.indicator-5{
    background-image: url(../images/peter\ Drucker.jpg);
    background-position: center;
    background-size: cover;
}


.indicator-6{
    background-image: url(../images/Jim\ Collins.jpg);
    background-position: center;
    background-size: cover;
}


.indicator-7{
    background-image: url(../images/Janet\ Yellen.jpg);
    background-position: center;
    background-size: cover;
}


.indicator-8{
    background-image: url(../images/Eric\ Schmidt.jpeg);
    background-position: center;
    background-size: cover;
}


.indicator-9{
    background-image: url(../images/Tim\ O\'Reilly.jpeg);
    background-position: center;
    background-size: cover;
}

/* ###################### */
/* contact */
.contact{
    padding-bottom: 100px;
}
.contact li h5{
    transition: .5s;
}
.contact li:hover h5{
    color: var(--main-color);
}

.connect input ,.connect textarea{
    width: 100%;
    padding: 10PX;
    border: 2px solid #dfd9d9 ;   
    color: #5f5e5e;
    transition: 0.3s;
}

.connect input:focus ,.connect textarea:focus{
    border-color: var(--main-color);
    outline: none;
}

 .send{
transition: .3s;
}
 .send:hover{
    background-color: var(--sec-color) !important;
    }
/* ###################### */
/* closing */

.closing {
    color: #8f8c8c ;
}
.closing a{
    color: #8f8c8c ;
    border-color: #8f8c8c !important;
    transition: .3s;
}

.closing a:hover{
    color: var(--main-color);
    border-color: var(--main-color) !important;
}

.closing h5{
    color: white;
}

.top{
    width: 50px;
    height: 50px;
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    top:-25px;
    transition: 0.3s;
}

.top:hover{
    background-color: var(--sec-color) !important;
}

/* ###################### */
/* footer*/

footer .info{
    color: #8f8c8c;
}
footer a{
    transition: .4s;
}
footer a:hover{
    color: var(--main-color);
}



/* ###################### */
/* failed trial "slider" */
.gallery{
    display: flex;
    align-items: center;
    column-gap: 20px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    width: 50%;
    margin: auto;
    padding: 40px 0;
}

.item{
    scroll-snap-align:center;
    min-width: 100px;
}

.gallery .image{
    width: 140px;
   padding: 0 20px;
    object-fit: cover;
}


.hr-height{

    background-color: currentColor;
    margin-top: 5px;
    margin-bottom: 1rem;
    border: transparent;
    cursor: auto;
    height: .5px;
    opacity: .5;
    width: 55px;
    /* background-image: linear-gradient(90deg,rgba(87, 32, 32, 0.101) 35%,rgb(242, 79, 63) 100%); */
    /* background: linear-gradient(45deg, #BDC3C7, #2C3E50); */
    background-image: linear-gradient(90deg,#F25454 100%,#F25454 70%);


    border-radius: 5px;
}

.text-footer-after-logo {
        margin: 25px 0px 0px 0px;
        font-weight: 500;
        line-height: 15px;
        font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
        font-style: normal;
        font-size: 13px;
        display: flex;
        align-items: center;
        letter-spacing: 0.01em;
        color: #FFFFFF;
        
}

.fff{
    padding: 0px;
    margin-top:20px;
    margin: left;
}

.ffff{
    transform: translateX(0px);
    margin-top:30px
}
.fffff{
    transform: translateX(10px);
}
.text-14 {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 10px;
        display: flex;
        align-items: center;
        letter-spacing: 0.03em;
        color: #FFFFFF;
}
.hrefSubscribe {
    /* margin-right: 20px; */
    /* width: 300px; */
    margin: 10px !important;
    /* padding-left: 20px !important; */
}

.text-12 {
    font-family: Noto Sans;
    font-style: normal;
    /* font-weight: 600; */
    line-height: 20px;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 14px;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: white;
}

.text-12:hover a{
    color: var(--main-color);
    }

.custom{
    color: white;
    font-size: 12px;
}

/* .section-4 .row .col-md-7, .col-md-5{

    margin-top: 10%;
    margin-bottom: 10%;
} */
* { -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;

}
#btnup{
    position: fixed;
    right: 30px;
    z-index: 999;
    bottom: 30px;
    display: none;
}
#btnup:hover {
    opacity: 1;   
    background-color: #ad3939;
}


.bg-col{ 
    background-color: #F25454;
}

#secpage{
    background-color: #F25454;


}

.secpagenav{
    margin-top: 122px;
}