@import "style.css";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');

/*default class*/
body {
	-webkit-box-sizing: border-box;
	-moz-box-sizing   : border-box;
	-o-box-sizing     : border-box;
	box-sizing        : border-box;
	font-family       : 'Cairo', sans-serif;
}


.transition_me {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition   : all 0.3s ease-in-out;
	-o-transition     : all 0.3s ease-in-out;
	transition        : all 0.3s ease-in-out;
}

.index_over {
	z-index: 1000
}

.form-select:focus {
	border-color: none;
}

button:focus:not(:focus-visible),
button,
select,
input,
textarea {
	outline: none;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	margin-bottom: 0px;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus .form-check-input:focus {
	box-shadow: none;
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover,
.carousel-control-next,
.carousel-control-prev {
	opacity: 1;
}

.point {
	cursor: pointer;
}

.tiny_font {
	font-size: 12px
}

.back_me {
	background: transparent
}

/*main-class*/
:root {
	--main--color  : #0b2e5b;
	--second--color: #fff;
	--third--color : #000000;
}

.main_color {
	color: var(--main--color);
}

.second_color {
	color: var(--second--color);
}

.third_color {
	color: var(--third--color);
}

.main_bg {
	background: var(--main--color);
}

.second_bg {
	background: var(--second--color);
}

.third_bg {
	background-color: var(--third--color);
}

.our_opacity {
	opacity: 0.7;
}

.uppercase {
	text-transform: uppercase;
}

.my_letter {
	letter-spacing: 1.8px;
}

.main_bt {
	background-color: var(--main--color);
	color           : var(--second--color);
    border-radius: 20px;
    width: 100%;
}

.main_bt:hover {
	background-color: var(--third--color);
	color           : var(--second--color);
}

.main_bt2 {
	background-color: var(--main--color);
	color           : var(--second--color);
    border-radius: 0px 0px 10px 10px;
    width: 100%;
    height: 50px;
}

.main_bt2:hover {
	background-color: var(--third--color);
	color           : var(--second--color);
}

.main_link {
	color          : var(--main--color);
	text-decoration: none;
}

.main_link:hover {
	color: var(--third--color);
}

.main_border {
	border: 1px solid var(--main--color);
    border-radius: 0px 0px 10px 10px;
}

/* start index page*/
.chevron_pre {
	border         : 1px solid var(--main--color);
	display        : flex;
	justify-content: center;
	align-items    : center;
	color          : var(--main--color);
	width          : 30px;
	height         : 30px;
}

.chevron_pre:hover {
	background-color: var(--main--color);
	color           : var(--second--color);
}

.details_slider {
	position       : absolute;
	top            : 0px;
	left           : 0px;
	height         : 100%;
	width          : 100%;
	display        : flex;
	justify-content: start;
	align-items    : center;
}

.link_slide {
	border-radius   : 10px;
	background-color: #f3f8fe;
	color           : var(--main--color);
	border          : 1px solid var(--main--color);
	padding         : 20px 60px;
	letter-spacing  : 1.6px;
	font-weight     : 600;
}

.link_slide:hover {
	background-color: var(--main--color);
	color           : #f3f8fe;
}

.solve {
	cursor: pointer;
}

.solve:hover .in_solve {
	color     : var(--main--color);
	transition: all 0.3s ease-in-out;
}

.solve img {
	transition: all 0.3s ease-in-out;
}

.solve:hover img {
	transform : scale(1.06);
	transition: all 0.3s ease-in-out;
}


.partners .slick-next {
	right: 0 !important;
	left : 65px !important;
}

.partners .slick-prev {
	left: 10px !important;
}

.partners .slick-next:before {
	color    : var(--main--color);
	content  : "\276f";
	font-size: 25px;
	opacity  : 1;
}

.partners .slick-prev:before {
	color    : var(--main--color);
	content  : "\276e";
	font-size: 25px;
	opacity  : 1;
}

.partners .slick-next,
.partners .slick-prev {
	background-color  : transparent;
	border            : 1px solid #0000003b;
	width             : 45px;
	height            : 45px;
	border-radius     : 50%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition   : all 0.3s ease-in-out;
	-o-transition     : all 0.3s ease-in-out;
	transition        : all 0.3s ease-in-out;
	top               : -15%;
}

/* .slick-next:hover .slick-next:before {
        color: var(--second--color);
    }

    .slick-prev:hover .slick-prev:before {
        color: var(--second--color);
    } */

.slick-next:hover,
.slick-prev:hover {
	background-color  : var(--main--color);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition   : all 0.3s ease-in-out;
	-o-transition     : all 0.3s ease-in-out;
	transition        : all 0.3s ease-in-out;
}

.signup-form {
    width: 480px;
    padding: 32px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 2px 4px 8px #6b728040;
    text-align: center;
}

.signup-form .header {
    margin-bottom: 48px;
}

.signup-form .header h1 {
    font-weight: bolder;
    font-size: 28px;
    color: var(--main--color);
}

.signup-form .input {
    position: relative;
    margin-bottom: 24px;
}

.signup-form .input input {
    width: 100%;
    border: none;
    padding: 8px 40px;
    border-radius: 4px;
    background-color: #f3f4f6;
    color: #1f2937;
    font-size: 16px;
}

.signup-form .input input::placeholder {
    color: #6b7280;
}

.signup-form .input i {
    top: 50%;
    width: 36px;
    position: absolute;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 16px;
}

.signup-form .signup-btn {
    width: 100%;
    border: none;
    padding: 8px 0;
    margin: 24px 0;
    border-radius: 4px;
    background-color: var(--main--color);
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
}

.signup-form .signup-btn:active {
    background-color: #4f46e5;
    transition: all 0.3s ease;
}

.signup-form .social-icons i {
    height: 36px;
    width: 36px;
    line-height: 36px;
    border-radius: 50%;
    margin: 24px 8px 48px 8px;
    background-color: gray;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
}

.signup-form i.fa-facebook-f {
    background-color: #3b5998;
}

.signup-form i.fa-twitter {
    background-color: #1da1f2;
}

.signup-form i.fa-google {
    background-color: #dd4b39;
}

        .swal2-container {
          z-index: 100000;
        }
        #loader {
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 1;
          width: 120px;
          height: 120px;
          margin: -76px 0 0 -76px;
          border: 16px solid #f3f3f3;
          border-radius: 50%;
          border-top: 16px solid #0b2e5b;
          -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
        }

        @-webkit-keyframes spin {
          0% { -webkit-transform: rotate(0deg); }
          100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        /* Add animation to "page content" */
        .animate-bottom {
          position: relative;
          -webkit-animation-name: animatebottom;
          -webkit-animation-duration: 1s;
          animation-name: animatebottom;
          animation-duration: 1s
        }

        @-webkit-keyframes animatebottom {
          from { bottom:-100px; opacity:0 }
          to { bottom:0px; opacity:1 }
        }

        @keyframes animatebottom {
          from{ bottom:-100px; opacity:0 }
          to{ bottom:0; opacity:1 }
        }


    
        .breadcrumb {
            background-color: rgb(202 202 202 / 20%);
        }
    
        .breadcrumb-item {
            color: var(--main--color);
            font-size: 17px;
            font-weight: normal;
        }
        

        * {
            letter-spacing: 0px !important;
        }