@media (max-width: 1300px){
	header .navbar .navbar-collapse{
		margin-top: 5px;
		padding: 10px 0;
	}

	header .navbar .navbar-collapse .navbar-nav{
		text-align: center;
		background-color: #000;
		border-radius: 5px;
		padding: 10px 15px;
		row-gap: 1px;
		column-gap: 0;
		margin-bottom: 10px;
	}

	header .navbar .navbar-collapse .navbar-nav .nav-item:last-child{
		margin-bottom: 5px;
	}

	header #carouselExampleIndicators .carousel-inner .carousel-item .carousel-caption p{
		width: 95%;
		margin: 20px 0;
		font-size: 16px;
	}

	header .navbar .container{
		padding-inline: 0;
	}

	header .navbar .container .navbar-brand{
		padding: 0;
	}

	header .navbar .container .navbar-brand img {
	    width: 65%;
	}

	header nav.navbar .container .navbar-toggler[aria-expanded=true]{
		/*search again about aria-expanded because i didnt understand it , but i undrsood that through it i can control specific action like here we want when click on button for first time make bc white and so on()*/
		background-color: #fff;
		border-color: #fff;
	}

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

	header .navbar .container .navbar-toggler{
		display: flex;
		background-color: transparent;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: 50px;
		height: 40px;
		padding: 4px 0;
		border: 1px solid var(--main-color);
		border-radius: 5px;
		transition-duration: .5s;
		transition-property: all;
	}

	header .navbar .container .navbar-toggler span{
		width: 50%;
		height: 2px;
		background-color: var(--main-color);
	}

	#About .container .row .part2 .row .box .SpecialCard{
		width: 230px;
		margin: auto;
	}

	#About .container .row .part1 p{
		line-height: 2;
	}


	#Services .container .img_animate {
		margin-bottom: 	40px;
	}

	#Menu .container .content ul{
		width: max-content;
	}

	#Menu .container .content .showen-div .row .item .box{
		margin: auto;
		width: 300px;
	}

	.modal-content {
	    width: 90%;
	}

	#Beans_Coffee h2{
		font-size: 22px;
	}

	#Beans_Coffee h3{
		font-size: 28px;
	}

	#Beans_Coffee i{
		font-size: 50px;
	}

	#Book {
		background-image: none,url("../images/Book_black_bg.png");
		padding-top: 8px;
	}

	#Book .container {
	    padding: 0 10px 115px;
	}

	#Book form{
		width: 90%;
		margin: auto;
	}

	#Book form .form-group{
		padding-inline: 3px;
		width: 90%;
	}
}

@media (min-width: 371px) and (max-width: 1300px){
	header .navbar .container .navbar-brand img {
	    width: 85%;
	}

	header .navbar .navbar-collapse .navbar-nav{
		padding: 10px 20px;
	}

	#Services .container .title img{
		width: 32%;	
	}

	#Services .container .row img{
		width: 70%;
	    display: block;
	    margin: auto;	
	}

	#Beans_Coffee .container{
		padding-block: 20px;
	}

	#Beans_Coffee h2{
		font-size: 30px;
	}

	#Beans_Coffee h3{
		font-size: 35px;
	}

	#Beans_Coffee i{
		font-size: 70px;
		margin-block: 10px;
	}
}

@media (min-width: 577px) and (max-width: 1300px){
	header .navbar .container {
        padding-inline: 12px;
    }

	header .navbar .container .navbar-brand img {
	    width: 77%;
	}

	header .navbar .navbar-collapse .navbar-nav{
		padding: 10px 25px;
	}

	#Services .container .title img {
        width: 26%;
    }

	#Services .container .img_animate {
		margin-bottom: 	50px;
	}

	#Menu .container .content .showen-div .row .item .box{
		width: initial;
	}

	#Beans_Coffee .container {
        padding-block: 25px 15px;
    }

	#Beans_Coffee h2 {
        font-size: 39px;
    }

	#Beans_Coffee h3 {
        font-size: 47px;
    }

    #Beans_Coffee i{
    	font-size: 90px;
    }

    .modal-content {
        width: 70%;
    }

    #Book {
		background-image: url("../images/man.png"),url("../images/Book_black_bg.png");
		background-position: left bottom, center;
		background-size: 50%, cover;
	}

	#Book .container{
        padding: 0px 25px 25px;
    }

    #Book .container .row .part2{
    	padding: 0;
    }

	#Book form {
        width: 260px;
    }

    #Book form .form-group {
        padding-inline: 0px;
    }
}

@media (min-width: 769px) and (max-width: 1300px){
	header .navbar .container .navbar-brand img {
	    width: 85%;
	}

	header #carouselExampleIndicators .carousel-inner .carousel-item .carousel-caption p{
		width: 90%;
	}

	header .navbar .navbar-collapse .navbar-nav{
		padding: 10px 35px;
	}

	#Services .container .row img {
        width: 50%;
    }

    #Services .container .title img{
    	width: 15%;	
    }

    #Beans_Coffee .container {
        padding-block: 30px 15px;
    }

    #Beans_Coffee h2 {
        font-size: 48px;
    }

    #Beans_Coffee h3 {
        font-size: 55px;
    }

    #Beans_Coffee i {
        font-size: 100px;
    }

    #Book form {
        width: initial;
    }

    #Book form .form-group {
        padding-inline: 2px;
    }
}

@media (min-width: 992px) and (max-width: 1300px){

	header .navbar .container .navbar-brand img{
		width: 75%;
	}

	header .navbar .container .navbar-toggler{
		display: none;
	}

	header .navbar-expand-lg .navbar-collapse{
		padding-right: 20px;
	}

	header .navbar .navbar-collapse .navbar-nav{
		margin-bottom: 0;
		padding: 0;
		row-gap: 0;
		column-gap: 24px;
	}

	header .navbar .navbar-collapse .navbar-nav{
		background-color: transparent;
		border-radius: 0;
	}


	header .navbar .navbar-collapse .navbar-nav .nav-item:last-child{
		margin-bottom: 0px;
	}

	#About .container .row .part2 .row .box .SpecialCard{
		width: initial;
	}

	.title  h2{
		margin-bottom: 10px;
	}

	#Services .container .title img{
		width: 20%;
	}

	#Services .container .row img{
		width: initial;
	}

	#Services .container p.second_p{
		padding-right: 5px;
	}

	#Menu .container .title {
	    padding: 30px 0 35px;
	}

	#Beans_Coffee .container{
        padding-block: 40px;
    }

    #Beans_Coffee h2 {
        font-size: 50px;
        padding-block: 10px;
    }

	.modal-content {
        width: 60%;
    }

    #Book {
        padding-top: 40px;
    }

    #Book .container {
        padding: 0px 25px 45px;
    }

    #Book form .form-group{
    	width: 80%;
    	padding-inline: 0;
    }

}

@media (min-width: 1181px) and (max-width: 1300px){
	header .navbar .container .navbar-brand img{
		width: 90%;
	}

	header .navbar-expand-lg .navbar-collapse{
		padding-top: 15px;
	}

	#About .container .row .part1 p{
		letter-spacing: 0.5px;
		padding-right: 20px;
	}

	.title h2{
		margin-block: 25px 10px;
	}

	#Book .title  h2{
		margin-top: 0;
	}

	#Services .container .title img{
		width: 17%;
	}

	#Services .container .img_animate{
		margin-bottom: 40px;
	}

	#Menu .container .title {
        padding: 10px 0 35px;
    }

	#Book form .form-group {
        width: 85%;
        padding-inline: 10px;
    }
}